:root {
  --fondo: #f7f7f6;
  --superficie: #ffffff;
  --superficie-2: #fafaf9;
  --borde: #e7e5e4;
  --borde-fuerte: #d6d3d1;
  --texto: #1c1917;
  --suave: #78716c;
  --acento: #0e7490;
  --acento-oscuro: #155e75;
  --acento-claro: #ecfeff;
  --rojo: #dc2626;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(28, 25, 23, .05);
  --sombra-alta: 0 12px 40px rgba(28, 25, 23, .18);

  /* Paleta de estados: texto / fondo / sólido */
  --gris-t: #57534e; --gris-f: #f5f5f4; --gris-s: #a8a29e;
  --azul-t: #1d4ed8; --azul-f: #eff6ff; --azul-s: #3b82f6;
  --cian-t: #0e7490; --cian-f: #ecfeff; --cian-s: #06b6d4;
  --ambar-t: #b45309; --ambar-f: #fffbeb; --ambar-s: #f59e0b;
  --verde-t: #15803d; --verde-f: #f0fdf4; --verde-s: #22c55e;
  --rojo-t: #b91c1c; --rojo-f: #fef2f2; --rojo-s: #ef4444;
  --violeta-t: #6d28d9; --violeta-f: #f5f3ff; --violeta-s: #8b5cf6;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  display: flex;
  min-height: 100vh;
}
body.cargando > * { visibility: hidden; }
body.sin-sesion .barra, body.sin-sesion .contenido { display: none; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 14px; margin: 0 0 12px; font-weight: 600; }
small { font-size: 12px; }
.suave { color: var(--suave); }
.fuerte { font-weight: 600; color: var(--texto); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.texto-rojo, .vencida { color: var(--rojo) !important; }
.hoy { color: var(--ambar-t) !important; font-weight: 600; }
.espacio { flex: 1; }
.texto-libre { white-space: pre-wrap; margin: 12px 0 0; color: #44403c; }
.nota-pie { margin-top: 12px; font-size: 13px; }

/* ================= Barra lateral ================= */
.barra {
  width: 232px; flex-shrink: 0;
  background: var(--superficie-2); border-right: 1px solid var(--borde);
  padding: 14px 10px; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
}
.marca { display: flex; gap: 10px; align-items: center; padding: 4px 8px 18px; }
.marca strong { display: block; font-size: 17px; line-height: 1.1; }
.marca small { color: var(--suave); }
.nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.nav a {
  display: flex; gap: 10px; align-items: center; color: #44403c;
  padding: 7px 10px; border-radius: 7px; font-weight: 500;
}
.nav a:hover { background: #efeeec; text-decoration: none; }
.nav a.activo { background: var(--superficie); color: var(--texto); box-shadow: 0 0 0 1px var(--borde), var(--sombra); }
.nav a span { width: 20px; text-align: center; }

.usuario-menu { position: relative; border-top: 1px solid var(--borde); padding-top: 10px; }
.usuario-boton {
  display: flex; gap: 10px; align-items: center; width: 100%; text-align: left;
  border: 0; background: none; padding: 6px 8px; border-radius: 8px; cursor: pointer; font: inherit; color: inherit;
}
.usuario-boton:hover { background: #efeeec; }
.usuario-boton strong { display: block; font-size: 13px; }
.usuario-boton small { color: var(--suave); }
.usuario-opciones {
  position: absolute; bottom: 56px; left: 0; right: 0; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 10px; box-shadow: var(--sombra-alta); padding: 4px; z-index: 5;
}
.usuario-opciones button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 6px; font: inherit; cursor: pointer; }
.usuario-opciones button:hover { background: var(--gris-f); }

.contenido { flex: 1; padding: 24px 32px 64px; min-width: 0; max-width: 1480px; }

/* ================= Encabezado ================= */
.cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.cabecera-titulo { min-width: 0; }
.migas { display: flex; gap: 6px; color: var(--suave); font-size: 13px; margin-bottom: 4px; }
.migas a { color: var(--suave); }
.subtitulo { color: var(--suave); margin-top: 4px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ================= Controles ================= */
.btn {
  font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto);
  padding: 7px 13px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--sombra);
}
.btn:hover { background: var(--superficie-2); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primario { background: var(--texto); border-color: var(--texto); color: #fff; }
.btn.primario:hover { background: #292524; }
.btn.peligro { color: var(--rojo); }
.btn.peligro-lleno { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.btn.chico { padding: 4px 10px; font-size: 13px; }
.btn.grande { padding: 10px 16px; width: 100%; justify-content: center; font-size: 15px; }
.btn-icono { border: 0; background: none; font-size: 16px; cursor: pointer; color: var(--suave); padding: 4px 8px; border-radius: 6px; }
.btn-icono:hover { background: var(--gris-f); }
.btn-texto { border: 0; background: none; color: var(--acento); cursor: pointer; font: inherit; font-size: 12.5px; padding: 2px 4px; }
.btn-texto:hover { text-decoration: underline; }
.enlace-peligro { border: 0; background: none; color: var(--suave); cursor: pointer; font-size: 12px; padding: 0; margin-top: 4px; }
.enlace-peligro:hover { color: var(--rojo); text-decoration: underline; }

input, select, textarea {
  font: inherit; width: 100%; color: var(--texto);
  border: 1px solid var(--borde-fuerte); border-radius: 8px; padding: 7px 10px; background: var(--superficie);
}
input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--acento) 18%, transparent); border-color: var(--acento); }
input:disabled, select:disabled { background: var(--gris-f); color: var(--suave); }
input[type="search"] { width: 340px; max-width: 100%; }
input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--acento); cursor: pointer; flex-shrink: 0; margin: 0; }
select.filtro { width: auto; padding-right: 28px; }
.selector-estado { font-weight: 600; border-width: 1.5px; }
.check { display: inline-flex; gap: 6px; align-items: center; color: var(--suave); cursor: pointer; }

.segmentos { display: inline-flex; background: #eeedeb; border-radius: 9px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.segmentos button { font: inherit; border: 0; background: none; padding: 5px 12px; border-radius: 7px; cursor: pointer; color: var(--suave); font-weight: 500; }
.segmentos button.activo { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

.barra-filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }

/* ================= Colores de estado ================= */
.badge {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; padding: 1px 8px;
  border-radius: 99px; white-space: nowrap; line-height: 20px;
}
.c-gris { background: var(--gris-f); color: var(--gris-t); }
.c-azul { background: var(--azul-f); color: var(--azul-t); }
.c-cian { background: var(--cian-f); color: var(--cian-t); }
.c-ambar { background: var(--ambar-f); color: var(--ambar-t); }
.c-verde { background: var(--verde-f); color: var(--verde-t); }
.c-rojo { background: var(--rojo-f); color: var(--rojo-t); }
.c-violeta { background: var(--violeta-f); color: var(--violeta-t); }
.c-fondo-gris { background: var(--gris-s); }
.c-fondo-azul { background: var(--azul-s); }
.c-fondo-cian { background: var(--cian-s); }
.c-fondo-ambar { background: var(--ambar-s); }
.c-fondo-verde { background: var(--verde-s); }
.c-fondo-rojo { background: var(--rojo-s); }
.c-fondo-violeta { background: var(--violeta-s); }
.claro { opacity: .45; }
.c-borde-gris { border-color: var(--gris-s) !important; }
.c-borde-azul { border-color: var(--azul-s) !important; }
.c-borde-cian { border-color: var(--cian-s) !important; }
.c-borde-ambar { border-color: var(--ambar-s) !important; }
.c-borde-verde { border-color: var(--verde-s) !important; }
.c-borde-rojo { border-color: var(--rojo-s) !important; }

.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: 50%; color: #fff; font-weight: 600; letter-spacing: -.02em;
}
.persona { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.persona small { display: block; }

/* ================= Tarjetas y listas ================= */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra); }
.tarjeta.sin-relleno { padding: 0; overflow-x: auto; }
.tarjeta-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.tarjeta-cab h2 { margin: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vacio { color: var(--suave); text-align: center; padding: 28px 12px; }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.lista li:last-child { border-bottom: 0; }
.lista small { display: flex; gap: 6px; align-items: center; color: var(--suave); margin-top: 2px; flex-wrap: wrap; }
.lista .derecha { text-align: right; flex-shrink: 0; }
.lista .derecha small { justify-content: flex-end; }

.aviso { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }

/* ================= Tablas ================= */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla th { font-size: 12px; color: var(--suave); font-weight: 500; background: var(--superficie-2); white-space: nowrap; }
.tabla td small { display: block; color: var(--suave); max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla tbody tr { cursor: pointer; }
.tabla tbody tr.sin-clic { cursor: default; }
.tabla tbody tr:hover { background: #fcfcfb; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; }
.tabla.compacta th, .tabla.compacta td { padding: 8px 10px; }
.tabla tfoot td { font-weight: 650; border-top: 2px solid var(--borde); border-bottom: 0; }
.tabla-scroll { overflow-x: auto; border: 1px solid var(--borde); border-radius: 8px; }

/* ================= Panel ================= */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra); min-width: 0; }
.kpi span { color: var(--suave); font-size: 12.5px; }
.kpi strong { display: block; font-size: 22px; margin: 2px 0; font-variant-numeric: tabular-nums; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; }
.kpi small { color: var(--suave); }
.kpi.destacado { background: var(--acento); border-color: var(--acento); color: #fff; }
.kpi.destacado span, .kpi.destacado small { color: #cffafe; }

.embudo-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; gap: 4px 10px; align-items: center; margin-bottom: 12px; color: inherit; }
a.embudo-fila:hover { text-decoration: none; }
a.embudo-fila:hover .barra-h { background: #e7e5e4; }
.barra-h { grid-column: 1 / -1; background: var(--gris-f); border-radius: 4px; height: 8px; overflow: hidden; }
.barra-h div { height: 100%; border-radius: 4px; min-width: 3px; }
.embudo-fila .num { text-align: right; }

.grafico { display: flex; align-items: flex-end; gap: 12px; height: 190px; padding-top: 6px; }
.grafico .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.grafico .col div { width: 100%; max-width: 46px; background: var(--acento); border-radius: 5px 5px 0 0; min-height: 2px; }
.grafico .col small { color: var(--suave); text-transform: capitalize; }
.grafico .col span { font-size: 11px; color: var(--suave); font-variant-numeric: tabular-nums; }

.vendedor-fila { display: grid; grid-template-columns: 160px 1fr 64px; gap: 10px; align-items: center; margin-bottom: 10px; }
.vendedor-fila .num { text-align: right; }
.barra-doble { display: flex; background: var(--gris-f); border-radius: 5px; height: 18px; overflow: hidden; }
.leyenda { display: flex; gap: 16px; color: var(--suave); font-size: 12px; margin-top: 6px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ================= Detalle (prospecto, negocio, organización) ================= */
.detalle { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.detalle-principal { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.detalle-principal.tarjeta { display: block; padding-top: 6px; }
.detalle-lateral { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.resumen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--borde); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; margin-bottom: 16px;
}
.resumen > div { background: var(--superficie); padding: 12px 16px; min-width: 0; }
.resumen span { display: block; color: var(--suave); font-size: 12px; }
.resumen strong { font-size: 16px; font-variant-numeric: tabular-nums; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resumen .ancho { grid-column: span 2; }
.resumen .ancho strong { font-size: 14px; font-weight: 500; white-space: normal; }

.detalles { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 12px; margin: 0; }
.detalles dt { color: var(--suave); }
.detalles dd { margin: 0; overflow-wrap: anywhere; }

.pestanas-linea { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin: 0 -18px 16px; padding: 0 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.pestanas-linea button {
  font: inherit; font-weight: 500; border: 0; background: none; cursor: pointer; color: var(--suave);
  padding: 10px 8px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.pestanas-linea button.activo { color: var(--texto); border-bottom-color: var(--texto); }
.cuenta { display: inline-block; background: var(--gris-f); color: var(--suave); border-radius: 99px; font-size: 11px; padding: 0 7px; margin-left: 2px; font-weight: 600; }

.contacto-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.contacto-item:last-child { border-bottom: 0; }
.contacto-item.clicable { cursor: pointer; }
.contacto-item.clicable:hover strong { color: var(--acento); }
.contacto-datos { flex: 1; min-width: 0; }
.contacto-datos small { display: block; color: var(--suave); overflow-wrap: anywhere; }
.contacto-acciones { display: flex; flex-direction: column; align-items: flex-end; }

/* ================= Historial de actividad ================= */
.compositor { border: 1px solid var(--borde-fuerte); border-radius: 10px; padding: 8px; margin-bottom: 18px; background: var(--superficie-2); }
.compositor .segmentos { background: none; padding: 0; }
.compositor textarea { border: 0; background: transparent; resize: vertical; min-height: 64px; margin-top: 6px; padding: 6px 8px; }
.compositor textarea:focus { outline: none; }
.compositor-pie { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }

.historial { list-style: none; margin: 0; padding: 0; position: relative; }
.historial::before { content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 1px; background: var(--borde); }
.historial li { display: flex; gap: 12px; padding: 7px 0; position: relative; }
.historial-icono {
  width: 27px; height: 27px; flex-shrink: 0; border-radius: 50%; background: var(--superficie);
  border: 1px solid var(--borde); display: flex; align-items: center; justify-content: center; font-size: 12px; z-index: 1;
}
.historial-cuerpo { flex: 1; min-width: 0; padding-top: 3px; }
.historial-linea { display: flex; justify-content: space-between; gap: 12px; color: #44403c; }
.historial-linea time { color: var(--suave); font-size: 12px; white-space: nowrap; }
.historial .cambio { background: var(--gris-f); border-radius: 5px; padding: 0 6px; font-size: 12.5px; }
.historial-contenido {
  margin-top: 6px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 8px;
  padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ================= Tareas ================= */
.tareas { list-style: none; margin: 0; padding: 0; }
.tarea { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.tarea:last-child { border-bottom: 0; }
.tarea input { margin-top: 2px; }
.tarea-cuerpo { flex: 1; cursor: pointer; min-width: 0; }
.tarea-cuerpo strong { font-weight: 500; display: block; }
.tarea-cuerpo:hover strong { color: var(--acento); }
.tarea-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--suave); font-size: 12.5px; margin-top: 3px; }
.tarea-meta .ref { color: var(--suave); text-decoration: underline; text-decoration-color: var(--borde-fuerte); }
.tarea.cerrada strong { text-decoration: line-through; color: var(--suave); }

/* ================= Kanban ================= */
.kanban { display: grid; grid-template-columns: repeat(6, minmax(165px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
/* Las seis etapas caben en una pantalla normal; si una columna tiene muchas tarjetas (p. ej. Ganado) se desplaza dentro de sí misma */
.kanban:not(.kanban-tareas) .columna-cuerpo { max-height: calc(100vh - 290px); min-height: 80px; overflow-y: auto; }
.kanban:not(.kanban-tareas) .tarjeta-kanban { padding: 9px 10px; font-size: 13px; }
.kanban:not(.kanban-tareas) .columna-cab h3 { font-size: 13px; }
.columna { background: #f0efed; border-radius: var(--radio); min-height: 360px; transition: background .15s; display: flex; flex-direction: column; }
.columna.sobre { background: var(--acento-claro); outline: 2px dashed var(--acento); }
.columna-cab { padding: 10px 12px 8px; border-top: 3px solid; border-radius: var(--radio) var(--radio) 0 0; }
.columna-cab > div { display: flex; align-items: center; gap: 8px; }
.columna-cab h3 { margin: 0; font-size: 13.5px; font-weight: 600; }
.columna-cab small { color: var(--suave); font-variant-numeric: tabular-nums; }
.punto { width: 8px; height: 8px; border-radius: 50%; }
.columna-cuerpo { padding: 4px 8px 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.columna-vacia { color: var(--suave); text-align: center; padding: 20px 0; font-size: 12.5px; border: 1px dashed var(--borde-fuerte); border-radius: 8px; }
.tarjeta-kanban {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px;
  cursor: grab; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 3px;
}
.tarjeta-kanban:hover { border-color: var(--borde-fuerte); }
.tarjeta-kanban.arrastrando { opacity: .4; }
.tarjeta-kanban strong { font-weight: 550; line-height: 1.35; }
.tarjeta-kanban > small { color: var(--suave); }
.kanban-fila { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12.5px; margin-top: 2px; }
.kanban-fila .fecha { flex: 1; color: var(--suave); }

/* ================= Control de tareas ================= */
.c-borde-violeta { border-color: var(--violeta-s) !important; }
.ancho-completo { width: 100%; justify-content: center; }
.btn-icono.chico { font-size: 12px; padding: 2px 6px; }

.kanban-tareas { grid-template-columns: repeat(4, minmax(240px, 1fr)); }
.tarjeta-tarea { border-left: 3px solid var(--borde); gap: 5px; }
.tarjeta-tarea.prioridad-alta { border-left-color: var(--rojo-s); }
.tarjeta-tarea.prioridad-media { border-left-color: var(--ambar-s); }
.tarjeta-tarea .chip-proyecto { align-self: flex-start; }
.indicadores { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.indicador { font-size: 12px; color: var(--suave); white-space: nowrap; }
.indicador.completo { color: var(--verde-t); }
.chip-proyecto {
  display: inline-block; font-size: 11.5px; font-weight: 500; padding: 0 7px; border-radius: 5px;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 19px;
}
.chip-proyecto:hover { text-decoration: none; filter: brightness(.96); }

.progreso { background: var(--gris-f); border-radius: 99px; height: 6px; overflow: hidden; margin: 6px 0; }
.progreso > div { height: 100%; background: var(--verde-s); border-radius: 99px; transition: width .2s; }
.progreso.fino { height: 4px; margin: 2px 0; }
.progreso.excedido > div { background: var(--rojo-s); }
.progreso > div.con-vencidas { background: var(--ambar-s); }

/* Equipo */
.tabla-equipo td { white-space: nowrap; }
.carga { display: flex; align-items: center; gap: 8px; min-width: 160px; }
.carga .progreso { flex: 1; margin: 0; height: 8px; }
.carga .progreso > div { background: var(--acento); }

/* Proyectos */
.grid-proyectos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tarjeta-proyecto {
  display: flex; flex-direction: column; gap: 6px; color: inherit; background: var(--superficie);
  border: 1px solid var(--borde); border-top: 4px solid; border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra);
}
.tarjeta-proyecto:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(28, 25, 23, .08); }
.tp-cab { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.tp-cab strong { font-size: 15px; line-height: 1.3; }
.tp-avance { display: flex; align-items: center; gap: 10px; }
.tp-avance .progreso { flex: 1; height: 8px; }
.tp-datos { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--suave); }
.tp-pie { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--suave); margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--borde); }
.descripcion-proyecto { margin: -4px 0 16px; }

/* Ficha de tarea */
.tarea-detalle { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
.td-titulo { font-size: 19px; margin: 0 0 8px; line-height: 1.3; }
.td-etiquetas { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; font-size: 13px; }
.td-descripcion { margin: 0 0 8px; }
.td-seccion { padding: 14px 0; border-top: 1px solid var(--borde); }
.td-lateral .td-seccion:first-child { border-top: 0; padding-top: 0; }
.td-seccion-cab { display: flex; justify-content: space-between; align-items: baseline; }
.td-seccion h4 { margin: 0 0 6px; font-size: 13.5px; }
.td-lateral { background: var(--superficie-2); border-radius: 10px; padding: 14px; align-self: start; }
.td-datos { margin: 12px 0; grid-template-columns: 96px minmax(0, 1fr); font-size: 13px; }

.checklist { list-style: none; margin: 4px 0 8px; padding: 0; }
.checklist li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.checklist label { display: flex; gap: 10px; align-items: center; cursor: pointer; flex: 1; }
.checklist li.hecha span { text-decoration: line-through; color: var(--suave); }
.checklist li .btn-icono { visibility: hidden; }
.checklist li:hover .btn-icono { visibility: visible; }
.fila-agregar { display: flex; gap: 8px; }

.comentarios { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.comentarios li { display: flex; gap: 10px; }
.comentario-cuerpo { flex: 1; min-width: 0; }
.comentario-cuerpo p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 0 10px 10px 10px; padding: 8px 12px; }
.comentario-cuerpo .enlace-peligro { margin-left: 6px; }
.nuevo-comentario { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.nuevo-comentario textarea { min-height: 64px; resize: vertical; }

.form-horas { display: grid; grid-template-columns: 80px 1fr; gap: 6px; margin: 8px 0; }
.form-horas .completo { grid-column: 1 / -1; }
.form-horas .btn { justify-content: center; }
.registros, .adjuntos { list-style: none; margin: 4px 0 8px; padding: 0; font-size: 13px; }
.registros li, .adjuntos li { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.registros li:last-child, .adjuntos li:last-child { border-bottom: 0; }
.registros small, .adjuntos small { display: block; color: var(--suave); }
.adjuntos a { overflow-wrap: anywhere; flex: 1; }
.subir-archivo { display: block; cursor: pointer; }

/* ================= Despacho en vivo y Mi trabajo ================= */
.tarjeta-tarea.prioridad-urgente { border-left-color: var(--rojo); background: #fffafa; }
.tarjeta-tarea.prioridad-alta { border-left-color: var(--ambar-s); }
.tarjeta-tarea.prioridad-media { border-left-color: var(--azul-s); }

.indicador-vivo { color: var(--verde-t); font-weight: 600; margin-right: 6px; }
.indicador-vivo.desconectado { color: var(--suave); }
.indicador-vivo.desconectado::after { content: " (reconectando…)"; font-weight: 400; }

.despacho-rapido { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr) 120px 150px auto; gap: 8px; margin-bottom: 16px; padding: 12px; }
.despacho-rapido input[name="titulo"] { font-size: 15px; }
.despacho-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.despacho-persona {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px;
  box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 10px; transition: background .15s;
}
.despacho-persona.sobre { background: var(--acento-claro); outline: 2px dashed var(--acento); }
.despacho-persona header { display: flex; gap: 10px; align-items: center; }
.despacho-persona header div { flex: 1; min-width: 0; }
.despacho-persona header strong { display: block; }
.despacho-persona header small { color: var(--suave); }
.presencia { font-size: 12px; color: var(--suave); white-space: nowrap; }
.despacho-persona.conectada .presencia { color: var(--verde-t); font-weight: 600; }
.despacho-persona:not(.conectada) .avatar { filter: grayscale(.7); opacity: .75; }
.ahora-tarea {
  display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--azul-f); border: 1px solid #bfdbfe; border-radius: 8px; padding: 8px 10px; margin-bottom: 4px;
}
.disponible { background: var(--verde-f); color: var(--verde-t); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.latido { width: 10px; height: 10px; border-radius: 50%; background: var(--azul-s); flex-shrink: 0; animation: latido 1.4s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, .6); } 70% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } }
.despacho-cola-cab { display: flex; justify-content: space-between; font-size: 12px; color: var(--suave); font-weight: 500; }
.despacho-cola { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.despacho-tarea { border: 1px solid var(--borde); border-left: 3px solid var(--borde-fuerte); border-radius: 7px; padding: 7px 10px; cursor: grab; background: var(--superficie); }
.despacho-tarea:hover { border-color: var(--borde-fuerte); }
.despacho-tarea.urgente { border-left-color: var(--rojo); background: #fffafa; }
.despacho-tarea.arrastrando { opacity: .4; }
.despacho-tarea strong { font-weight: 500; font-size: 13.5px; display: block; }
.despacho-tarea .tarea-meta { font-size: 12px; }
.visto { color: var(--verde-t); font-size: 12px; }
.sin-ver { color: var(--ambar-t); font-size: 12px; font-weight: 600; }
.cola-vacia { color: var(--suave); font-size: 13px; text-align: center; padding: 8px; border: 1px dashed var(--borde-fuerte); border-radius: 7px; }

.asignacion { display: flex; flex-direction: column; gap: 8px; border-left: 4px solid var(--acento); padding-left: 14px; }
.asignacion.urgente { border-left-color: var(--rojo); }
.asignacion > strong { font-size: 17px; }
.asignacion p { margin: 0; }

.trabajo-seccion { margin-bottom: 18px; }
.trabajo-seccion > h2 { margin-bottom: 10px; }
.trabajo-seccion.destacada { border-color: var(--ambar-s); background: var(--ambar-f); }
.trabajo-ahora { background: var(--superficie); border: 1px solid #bfdbfe; border-left: 4px solid var(--azul-s); border-radius: var(--radio); padding: 16px 18px; box-shadow: var(--sombra); margin-bottom: 10px; }
.trabajo-ahora-cab { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }
.trabajo-ahora h3 { font-size: 19px; margin: 6px 0; cursor: pointer; }
.trabajo-ahora h3:hover { color: var(--acento); }
.trabajo-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.trabajo-libre { color: var(--suave); text-align: center; padding: 22px; }
.trabajo-lista { list-style: none; margin: 0; padding: 0; }
.trabajo-fila { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.trabajo-fila:last-child { border-bottom: 0; }
.trabajo-fila-cuerpo { flex: 1; min-width: 0; cursor: pointer; }
.trabajo-fila-cuerpo strong { font-weight: 500; display: block; }
.trabajo-fila-cuerpo:hover strong { color: var(--acento); }
.trabajo-fila.urgente .trabajo-fila-cuerpo strong { color: var(--rojo-t); }
.etiqueta-nueva { background: var(--ambar-s); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; vertical-align: 1px; }
.hechas-hoy { list-style: none; margin: 0; padding: 0; color: var(--verde-t); }
.hechas-hoy li { padding: 4px 0; cursor: pointer; }

@media (max-width: 900px) {
  .despacho-rapido { grid-template-columns: 1fr 1fr; }
  .despacho-rapido input[name="titulo"], .despacho-rapido .btn { grid-column: 1 / -1; justify-content: center; }
}

/* ================= Control de jornada ================= */
.texto-verde { color: var(--verde-t) !important; }
.reloj { border-top: 1px solid var(--borde); padding: 10px 4px; display: flex; flex-direction: column; gap: 8px; }
.reloj:empty { display: none; }
.reloj-estado { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 500; padding: 8px 10px; border-radius: 8px; }
.reloj-estado small { color: var(--suave); font-weight: 400; }
.reloj-estado.jornada { background: var(--verde-f); color: var(--verde-t); }
.reloj-estado.pausa { background: var(--ambar-f); color: var(--ambar-t); }
.reloj-estado.fuera { background: var(--gris-f); color: var(--gris-t); }
.reloj-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.reloj-botones .btn { justify-content: center; }
.reloj-tarjeta { text-align: center; align-items: stretch; }
.reloj-tarjeta .campo { text-align: left; }
.reloj-grande { font-size: 56px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; margin-top: 4px; }
.reloj-fecha { margin-top: -6px !important; }
.reloj-fecha::first-letter { text-transform: uppercase; }
.reloj-tarjeta .btn-texto { align-self: center; color: var(--suave); }
.opciones-pausa { display: flex; flex-direction: column; gap: 8px; }
.opciones-pausa .btn { justify-content: flex-start; padding: 10px 14px; font-size: 15px; }
.jornada-chip { font-size: 12.5px; padding: 4px 10px; border-radius: 6px; }
.jornada-chip.jornada { background: var(--verde-f); color: var(--verde-t); }
.jornada-chip.pausa { background: var(--ambar-f); color: var(--ambar-t); }
.jornada-chip.reunion { background: var(--violeta-f); color: var(--violeta-t); }
.jornada-chip.fuera { background: var(--gris-f); color: var(--suave); }
.observaciones { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; white-space: normal !important; }
.totales-asistencia { margin-top: 16px; }
.totales-asistencia .lista li { align-items: center; }
/* En el celular el reloj queda fijo abajo (los técnicos marcan desde terreno) */
@media (max-width: 760px) {
  .reloj {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; flex-direction: row; align-items: center;
    background: var(--superficie); border-top: 1px solid var(--borde); padding: 8px 12px; box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
  }
  .reloj-estado { flex: 1; padding: 6px 10px; }
  .reloj > .btn, .reloj-botones { flex-shrink: 0; width: auto; }
  .contenido { padding-bottom: 96px; }
  #toasts { bottom: 84px; }
}

/* ================= Oficina 3D ================= */
.texto-azul { color: var(--azul-t) !important; }
.oficina-3d {
  position: relative; height: calc(100vh - 250px); min-height: 460px; border-radius: var(--radio);
  overflow: hidden; border: 1px solid var(--borde); background: #f4f2ee; box-shadow: var(--sombra);
}
.oficina-3d canvas { display: block; position: absolute; inset: 0; cursor: grab; touch-action: none; }
.oficina-3d canvas:active { cursor: grabbing; }
.oficina-etiquetas { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.oficina-cargando { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--suave); padding: 24px; text-align: center; }
.etiqueta-3d {
  pointer-events: auto; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--borde); border-top: 3px solid var(--gris-s);
  border-radius: 8px; padding: 3px 9px; font-size: 11.5px; line-height: 1.3; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12); transition: transform .15s;
}
.etiqueta-3d:hover, .etiqueta-3d.seleccionada { transform: scale(1.08); z-index: 5; }
.etiqueta-3d b { font-size: 12.5px; }
.etiqueta-3d span { color: var(--suave); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.etiqueta-3d.trabajando { border-top-color: var(--azul-s); }
.etiqueta-3d.trabajando span { color: var(--azul-t); }
.etiqueta-3d.disponible { border-top-color: var(--verde-s); }
.etiqueta-3d.disponible span { color: var(--verde-t); }
.etiqueta-3d.pausa { border-top-color: var(--ambar-s); }
.etiqueta-3d.pausa span { color: var(--ambar-t); }
.etiqueta-3d.fuera { opacity: .6; }
.etiqueta-3d.urgente { border-color: var(--rojo-s); box-shadow: 0 0 0 3px rgba(239, 68, 68, .25); animation: aviso-urgente 1.2s infinite; }
.etiqueta-3d.seleccionada { outline: 2px solid var(--acento); }
@keyframes aviso-urgente { 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, .1); } }
.oficina-3d.lego { background: #dff1ff; }
.cartel-lego {
  pointer-events: none; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: #1b2a34; border: 2px solid #f2cd37; border-radius: 4px; padding: 2px 8px; white-space: nowrap;
  box-shadow: 0 2px 0 #0d151b;
}
.etiqueta-3d.reunion { border-top-color: var(--violeta-s); }
.etiqueta-3d.reunion span { color: var(--violeta-t); }
.oficina-panel-estado.reunion { background: var(--violeta-f); color: var(--violeta-t); }
.zona-3d { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(41, 37, 36, .45); pointer-events: none; }
.oficina-leyenda {
  position: absolute; left: 12px; bottom: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px 14px; max-width: calc(100% - 24px);
  background: rgba(255, 255, 255, .92); border: 1px solid var(--borde); border-radius: 8px; padding: 6px 12px; font-size: 12px; color: var(--suave);
}
.oficina-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.oficina-panel {
  position: absolute; top: 12px; right: 12px; bottom: 12px; width: 320px; max-width: calc(100% - 24px); z-index: 3; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra-alta); padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.oficina-panel[hidden] { display: none; }
.oficina-panel header { display: flex; gap: 10px; align-items: center; }
.oficina-panel header div { flex: 1; min-width: 0; }
.oficina-panel header strong { display: block; }
.oficina-panel header small { color: var(--suave); }
.oficina-panel h4 { margin: 6px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.oficina-panel-estado { padding: 8px 10px; border-radius: 8px; font-weight: 500; background: var(--gris-f); }
.oficina-panel-estado.trabajando { background: var(--azul-f); color: var(--azul-t); }
.oficina-panel-estado.disponible { background: var(--verde-f); color: var(--verde-t); }
.oficina-panel-estado.pausa { background: var(--ambar-f); color: var(--ambar-t); }
.oficina-tarea {
  display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%; font: inherit; color: inherit; cursor: pointer;
  border: 1px solid var(--borde); background: var(--superficie-2); border-radius: 8px; padding: 7px 10px;
}
.oficina-tarea:hover { border-color: var(--acento); }
.oficina-tarea.en-curso { border-left: 3px solid var(--azul-s); font-weight: 500; }
.oficina-tarea .tarea-meta { font-size: 12px; }
.oficina-cifras { margin: 4px 0; }
@media (max-width: 760px) {
  .oficina-3d { height: 70vh; }
  .oficina-panel { top: auto; height: 60%; }
}

/* ================= Menú agrupado ================= */
.barra { overflow-y: auto; }
.nav-grupo { margin-bottom: 4px; }
.nav-titulo {
  display: flex; justify-content: space-between; align-items: center; width: 100%; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); padding: 8px 10px 4px;
}
.nav-titulo span { transition: transform .15s; }
.nav-grupo.plegado .nav-titulo span { transform: rotate(-90deg); }
.nav-grupo.plegado a { display: none; }
@media (max-width: 760px) {
  .nav-grupo { display: contents; }
  .nav-titulo { display: none; }
  .nav-grupo.plegado a { display: flex; }
}

/* ================= Chat ================= */
.chat {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); height: calc(100vh - 48px); min-height: 480px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra);
}
.chat-lista { border-right: 1px solid var(--borde); display: flex; flex-direction: column; min-height: 0; background: var(--superficie-2); }
.chat-lista header { padding: 14px; border-bottom: 1px solid var(--borde); display: flex; flex-direction: column; gap: 10px; }
.chat-lista header input { width: 100%; }
#chat-conversaciones { overflow-y: auto; padding: 6px; }
#chat-conversaciones h4 { margin: 10px 8px 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.chat-item {
  display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: none;
  padding: 8px; border-radius: 8px; cursor: pointer; font: inherit; color: inherit;
}
.chat-item:hover { background: #efeeec; }
.chat-item.activo { background: var(--superficie); box-shadow: 0 0 0 1px var(--borde), var(--sombra); }
.chat-item-texto { flex: 1; min-width: 0; }
.chat-item-texto strong { display: block; font-weight: 600; font-size: 13.5px; }
.chat-item-texto small { display: block; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item .contador { margin-left: 0; }
.chat-avatar { position: relative; display: inline-flex; }
.chat-avatar i { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--gris-s); border: 2px solid var(--superficie-2); }
.chat-avatar i.en-linea { background: var(--verde-s); }
.chat-icono-equipo { width: 34px; height: 34px; border-radius: 50%; background: var(--acento-claro); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.chat-icono-equipo.grande { width: 38px; height: 38px; }
.chat-conversacion { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-cabecera { display: flex; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--borde); }
.chat-cabecera strong { display: block; font-size: 15px; }
.chat-cabecera small { color: var(--suave); }
.chat-mensajes { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; background: #f9f8f6; }
.chat-vacio { margin: auto; color: var(--suave); text-align: center; padding: 24px; }
.chat-dia { align-self: center; margin: 12px 0 6px; font-size: 12px; color: var(--suave); background: var(--superficie); border: 1px solid var(--borde); border-radius: 99px; padding: 2px 12px; }
.chat-dia::first-letter { text-transform: uppercase; }
.chat-msj { display: flex; gap: 8px; align-items: flex-end; max-width: 78%; margin-top: 6px; }
.chat-msj.seguido { margin-top: 0; }
.chat-msj.propio { align-self: flex-end; flex-direction: row-reverse; }
.chat-hueco { width: 28px; flex-shrink: 0; }
.chat-msj.propio .chat-hueco { display: none; }
.chat-burbuja { background: var(--superficie); border: 1px solid var(--borde); border-radius: 4px 14px 14px 14px; padding: 7px 11px 5px; min-width: 70px; box-shadow: var(--sombra); }
.chat-msj.propio .chat-burbuja { background: var(--acento); border-color: var(--acento); color: #fff; border-radius: 14px 4px 14px 14px; }
.chat-burbuja b { display: block; font-size: 12px; color: var(--acento); margin-bottom: 1px; }
.chat-burbuja p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-burbuja time { display: block; text-align: right; font-size: 10.5px; color: var(--suave); margin-top: 1px; }
.chat-msj.propio .chat-burbuja time { color: rgba(255, 255, 255, .75); }
.chat-msj.propio .chat-burbuja a { color: #fff; }
.chat-escribir { display: flex; gap: 8px; align-items: flex-end; padding: 12px 18px; border-top: 1px solid var(--borde); }
.chat-escribir textarea { resize: none; max-height: 140px; }
@media (max-width: 760px) {
  .chat { grid-template-columns: 1fr; grid-template-rows: 200px minmax(0, 1fr); height: calc(100vh - 150px); }
  .chat-lista { border-right: 0; border-bottom: 1px solid var(--borde); }
  .chat-msj { max-width: 92%; }
}

/* Supervisión (panel del CEO) y ayuda de roles */
.supervision { margin-bottom: 16px; }
.supervision-cifras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; }
.supervision-cifras > div { background: var(--superficie); padding: 10px 12px; }
.supervision-cifras strong { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.supervision-cifras span { color: var(--suave); font-size: 12px; }
.supervision-cifras .alerta { background: var(--rojo-f); }
.supervision-cifras .alerta strong { color: var(--rojo-t); }
.supervision-atrasos { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: 13px; }
.roles-ayuda { margin-top: 16px; }
.roles-ayuda ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.roles-ayuda li { display: flex; gap: 10px; align-items: baseline; }
.roles-ayuda .badge { flex-shrink: 0; min-width: 150px; justify-content: center; }
@media (max-width: 760px) {
  .supervision-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .roles-ayuda li { flex-direction: column; gap: 4px; }
}

/* Campana de avisos */
.marca { position: relative; }
.campana {
  margin-left: auto; position: relative; border: 0; background: none; font-size: 17px; cursor: pointer;
  width: 34px; height: 34px; border-radius: 8px;
}
.campana:hover { background: #efeeec; }
.campana b, .contador {
  position: absolute; top: 2px; right: 0; background: var(--rojo); color: #fff; font-size: 10.5px; font-weight: 700;
  min-width: 17px; height: 17px; line-height: 17px; border-radius: 99px; padding: 0 4px; text-align: center;
}
.nav a { position: relative; }
.contador { position: static; margin-left: auto; background: var(--ambar-s); }
.contador.rojo { background: var(--rojo); }
.panel-avisos {
  position: fixed; top: 56px; left: 14px; width: 360px; max-height: 70vh; overflow-y: auto; z-index: 40;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra-alta);
}
.panel-avisos header { padding: 12px 14px; border-bottom: 1px solid var(--borde); }
.panel-avisos ul { list-style: none; margin: 0; padding: 4px; }
.panel-avisos li button {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 0; background: none;
  padding: 9px 10px 9px 18px; border-radius: 8px; cursor: pointer; font: inherit; position: relative; color: inherit;
}
.panel-avisos li button:hover { background: var(--gris-f); }
.panel-avisos li button.no-leida::before { content: ""; position: absolute; left: 6px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); }
.panel-avisos li small { color: var(--suave); }
.recordatorios { padding: 8px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--borde); }
.recordatorio { text-align: left; border: 1px solid var(--borde); background: var(--superficie-2); border-radius: 8px; padding: 8px 10px; cursor: pointer; font: inherit; color: inherit; }
.recordatorio.rojo { background: var(--rojo-f); border-color: #fecaca; color: var(--rojo-t); }
.recordatorio.ambar { background: var(--ambar-f); border-color: #fde68a; color: var(--ambar-t); }

/* ================= Modales y formularios ================= */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(28, 25, 23, .4);
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 50; overflow-y: auto;
  animation: aparecer .12s ease-out;
}
.modal { background: var(--superficie); border-radius: 14px; width: 100%; box-shadow: var(--sombra-alta); }
.modal header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 0; }
.modal header h2 { margin: 0; font-size: 17px; }
.modal-cuerpo { padding: 16px 20px; }
.modal footer { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--borde); background: var(--superficie-2); border-radius: 0 0 14px 14px; }
.confirmar-texto { margin: 0; color: #44403c; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .completo, .form-grid .intro { grid-column: 1 / -1; }
.intro { background: var(--acento-claro); color: var(--acento-oscuro); padding: 10px 12px; border-radius: 8px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo > span { font-size: 13px; color: #44403c; font-weight: 500; }
.campo > span b { color: var(--rojo); font-weight: 500; }
.campo > small { color: var(--suave); }
.campo textarea { min-height: 84px; resize: vertical; }
.campo-check { display: flex; gap: 8px; align-items: center; cursor: pointer; align-self: end; padding-bottom: 8px; }
.campo[hidden], .campo-check[hidden] { display: none; }

/* ================= Acceso ================= */
#acceso:empty { display: none; }
/* Fondo de inicio: logo neón de Pulso a la izquierda sobre negro (el mismo tono del borde de la imagen) */
#acceso {
  flex: 1; display: flex; align-items: center; justify-content: flex-end; min-height: 100vh;
  padding: 24px max(24px, 8vw);
  --logo: min(92vh, 60vw);
  /* La primera capa difumina los bordes de la imagen para que no se note su recuadro */
  background:
    radial-gradient(closest-side, transparent 78%, #010006 100%) no-repeat 22% center / var(--logo) var(--logo),
    url('img/pulso-fondo.jpg') no-repeat 22% center / var(--logo) var(--logo),
    #010006;
}
/* Tarjeta de acceso tipo vidrio: deja ver el fondo de neón. Redefine los colores del tema
   dentro de la tarjeta para que textos, campos y botones se vean claros sobre fondo oscuro. */
.acceso-tarjeta {
  --texto: #f5f3ff;
  --suave: rgba(226, 232, 240, .72);
  --borde: rgba(255, 255, 255, .14);
  --borde-fuerte: rgba(255, 255, 255, .22);
  --superficie: rgba(255, 255, 255, .07);
  --superficie-2: rgba(255, 255, 255, .05);
  width: 100%; max-width: 400px; color: var(--texto);
  background: linear-gradient(160deg, rgba(59, 130, 246, .10), rgba(139, 92, 246, .08)), rgba(8, 8, 24, .38);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(165, 180, 252, .28);
  border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45), 0 0 80px rgba(99, 102, 241, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.acceso-tarjeta .campo > span { color: rgba(226, 232, 240, .85); }
.acceso-tarjeta input { background: rgba(255, 255, 255, .07); color: var(--texto); }
.acceso-tarjeta input::placeholder { color: rgba(226, 232, 240, .45); }
.acceso-tarjeta input:focus { border-color: #818cf8; outline-color: rgba(129, 140, 248, .3); }
/* Evita el fondo blanco que pone Chrome al autocompletar */
.acceso-tarjeta input:-webkit-autofill {
  -webkit-text-fill-color: #f5f3ff; caret-color: #f5f3ff;
  -webkit-box-shadow: 0 0 0 40px #141433 inset; transition: background-color 9999s;
}
.acceso-tarjeta .btn.primario {
  background: linear-gradient(90deg, #2563eb, #7c3aed); border-color: transparent; color: #fff;
  box-shadow: 0 6px 24px rgba(99, 102, 241, .45);
}
.acceso-tarjeta .btn.primario:hover { filter: brightness(1.1); }
.acceso-tarjeta .acceso-error { background: rgba(239, 68, 68, .15); color: #fecaca; }
.acceso-tarjeta .aviso { background: rgba(34, 197, 94, .15); color: #bbf7d0; }
.acceso-logo img { border-radius: 10px; }
/* En pantallas angostas el logo queda arriba y el formulario debajo */
@media (max-width: 900px) {
  #acceso {
    justify-content: center; align-items: flex-start; padding: min(58vw, 40vh) 16px 24px;
    --logo: min(64vw, 40vh);
    background-position: center 8px, center 8px;
  }
}
.acceso-logo { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.acceso-logo strong { display: block; font-size: 22px; line-height: 1.1; }
.acceso-logo small { color: var(--suave); }
.acceso-tarjeta p { margin: 0; }
.demo-aviso { background: var(--ambar-f); color: var(--ambar-t); border: 1px solid #fde68a; border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.demo-usuarios { display: flex; flex-direction: column; gap: 6px; }
.demo-usuarios button {
  display: flex; gap: 10px; align-items: center; text-align: left; width: 100%; font: inherit; color: inherit; cursor: pointer;
  border: 1px solid var(--borde); background: var(--superficie-2); border-radius: 10px; padding: 8px 12px;
}
.demo-usuarios button:hover { border-color: var(--acento); background: var(--acento-claro); }
.demo-usuarios strong { display: block; }
.demo-usuarios small { color: var(--suave); }
.separador { display: flex; align-items: center; gap: 10px; color: var(--suave); font-size: 12px; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
.acceso-error { color: var(--rojo); background: var(--rojo-f); padding: 8px 12px; border-radius: 8px; }

/* ================= Avisos ================= */
#toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: var(--texto); color: #fff; padding: 10px 16px; border-radius: 9px; box-shadow: var(--sombra-alta); animation: subir .2s ease-out; max-width: 380px; }
.toast.error { background: var(--rojo); }
@keyframes subir { from { transform: translateY(10px); opacity: 0; } }
@keyframes aparecer { from { opacity: 0; } }

/* ================= Responsivo ================= */
@media (max-width: 1280px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .detalle { grid-template-columns: minmax(0, 1fr); }
  .resumen .ancho { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .tarea-detalle { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body { flex-direction: column; }
  .barra { width: 100%; height: auto; position: sticky; z-index: 20; flex-direction: row; align-items: center; padding: 8px 12px; gap: 8px; border-right: 0; border-bottom: 1px solid var(--borde); }
  .marca { padding: 0; }
  .marca div { display: none; }
  .nav { flex-direction: row; overflow-x: auto; flex: 1; scrollbar-width: none; }
  .nav a { white-space: nowrap; padding: 6px 8px; font-size: 13px; }
  .usuario-menu { border-top: 0; padding-top: 0; }
  .usuario-boton span { display: none; }
  .usuario-opciones { bottom: auto; top: 44px; left: auto; right: 0; width: 180px; }
  .campana { margin-left: 0; }
  .panel-avisos { left: 16px; right: 16px; width: auto; }
  .contador { margin-left: 4px; }
  .contenido { padding: 16px 16px 64px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi strong { font-size: 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .vendedor-fila { grid-template-columns: 120px 1fr 56px; }
  input[type="search"] { width: 100%; }
  .cabecera { align-items: flex-start; }
}

/* ================= Módulos de gestión (cotizaciones, inventario, agenda…) ================= */
.fila-alerta td { background: var(--rojo-f); }
.centro { text-align: center; }
.mini { width: 100%; min-width: 60px; padding: 4px 6px; font: inherit; border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie); color: var(--texto); }
.editor-lineas td { vertical-align: middle; }
.editor-lineas input { width: 100%; }
.total-final { font-size: 1.15em; font-weight: 700; color: var(--acento); }
.detalle-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 16px; }
.articulo-cuerpo { line-height: 1.6; }
.articulos-grid, .metas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.articulo-tarjeta { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; transition: transform .12s, box-shadow .12s; }
.articulo-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.articulo-tarjeta h3 { margin: 0; font-size: 1.02rem; }
.articulo-tarjeta p { margin: 0; color: var(--suave); font-size: .9rem; flex: 1; }
.etiqueta-cat { align-self: flex-start; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--azul-f); color: var(--azul-t); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip-check { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--borde); border-radius: 99px; cursor: pointer; font-size: .85rem; }
.chip-check:has(input:checked) { background: var(--azul-f); border-color: var(--azul-s); }
.permisos-tabla input { width: 18px; height: 18px; cursor: pointer; }

/* Metas */
.meta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.meta-cab, .meta-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.meta-tipo { font-size: .8rem; color: var(--suave); }
.progreso.grande { height: 10px; }
.progreso .cerca { background: var(--ambar-s); }
.progreso .logrado { background: var(--verde-s); }
.meta-acciones { display: flex; gap: 10px; }

/* Agenda */
.agenda-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.agenda-lateral { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; }
.calendario-tarjeta { overflow: hidden; border-radius: 16px; }
.cal-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 16px 20px; border-bottom: 1px solid var(--borde); }
.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-titulo { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; min-width: 11.5ch; text-align: center; }
.cal-flecha { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .15s, transform .15s; }
.cal-flecha:hover { background: var(--acento); color: #fff; border-color: var(--acento); transform: scale(1.06); }
.cal-leyenda { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-tipo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); font: inherit; font-size: .76rem; cursor: pointer; transition: opacity .15s, background .15s; }
.cal-tipo i { width: 9px; height: 9px; border-radius: 50%; background: var(--gris-s); }
.cal-tipo.c-azul i { background: var(--azul-s); }
.cal-tipo.c-verde i { background: var(--verde-s); }
.cal-tipo.c-violeta i { background: var(--violeta-s); }
.cal-tipo.c-ambar i { background: var(--ambar-s); }
.cal-tipo.c-cian i { background: var(--cian-s); }
.cal-tipo:hover { background: var(--fondo); }
.cal-tipo.apagado { opacity: .45; text-decoration: line-through; }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cab { padding: 10px 6px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); text-align: center; background: var(--fondo); border-bottom: 1px solid var(--borde); }
.cal-cab.finde { color: var(--rojo-t, var(--suave)); opacity: .8; }
.cal-dia { position: relative; min-height: 112px; padding: 6px 6px 8px; border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); display: flex; flex-direction: column; gap: 3px; overflow: hidden; cursor: pointer; transition: background .15s; outline: none; }
.cal-dia:nth-child(7n) { border-right: 0; }
.cal-dia:hover { background: var(--fondo); }
.cal-dia:focus-visible { box-shadow: inset 0 0 0 2px var(--acento); }
.cal-dia.finde { background: color-mix(in srgb, var(--fondo) 60%, transparent); }
.cal-dia.fuera { opacity: .45; }
.cal-dia.seleccionado { background: color-mix(in srgb, var(--acento) 9%, var(--superficie)); box-shadow: inset 0 0 0 2px var(--acento); }
.cal-dia-cab { display: flex; justify-content: space-between; align-items: center; }
.cal-num { font-size: .85rem; font-weight: 600; min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.cal-dia.es-hoy .cal-num { background: var(--acento); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--acento) 45%, transparent); }
.cal-cuenta { font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 99px; background: var(--gris-f); color: var(--gris-t); }
.cal-evento { all: unset; box-sizing: border-box; display: flex; gap: 5px; align-items: center; cursor: pointer; font-size: .73rem; padding: 3px 6px; border-radius: 6px; border-left: 3px solid var(--gris-s); background: var(--gris-f); color: var(--gris-t); overflow: hidden; transition: transform .12s, box-shadow .12s; }
.cal-evento:hover { transform: translateX(2px); box-shadow: var(--sombra); }
.cal-evento b { font-variant-numeric: tabular-nums; font-size: .68rem; opacity: .75; flex: none; }
.cal-evento span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-evento.c-azul { background: var(--azul-f); color: var(--azul-t); border-color: var(--azul-s); }
.cal-evento.c-verde { background: var(--verde-f); color: var(--verde-t); border-color: var(--verde-s); }
.cal-evento.c-violeta { background: var(--violeta-f); color: var(--violeta-t); border-color: var(--violeta-s); }
.cal-evento.c-ambar { background: var(--ambar-f); color: var(--ambar-t); border-color: var(--ambar-s); }
.cal-evento.c-cian { background: var(--cian-f); color: var(--cian-t); border-color: var(--cian-s); }
.cal-mas { font-size: .7rem; font-weight: 600; color: var(--suave); padding-left: 4px; }
.cal-puntos { display: none; gap: 3px; justify-content: center; margin-top: auto; }
.cal-puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--gris-s); }
.cal-puntos i.c-azul { background: var(--azul-s); } .cal-puntos i.c-verde { background: var(--verde-s); }
.cal-puntos i.c-violeta { background: var(--violeta-s); } .cal-puntos i.c-ambar { background: var(--ambar-s); } .cal-puntos i.c-cian { background: var(--cian-s); }

/* Panel del día y próximos */
.ag-dia-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.ag-dia-cab h3 { margin: 0; font-size: 1.05rem; }
.ag-dia-cab small { color: var(--acento); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; }
.ag-evento, .ag-proximo { all: unset; box-sizing: border-box; width: 100%; display: flex; gap: 12px; padding: 10px; border-radius: 12px; cursor: pointer; transition: background .15s, transform .12s; }
.ag-evento { border-left: 4px solid var(--gris-s); background: var(--gris-f); margin-bottom: 8px; }
.ag-evento.c-azul { border-color: var(--azul-s); background: var(--azul-f); }
.ag-evento.c-verde { border-color: var(--verde-s); background: var(--verde-f); }
.ag-evento.c-violeta { border-color: var(--violeta-s); background: var(--violeta-f); }
.ag-evento.c-ambar { border-color: var(--ambar-s); background: var(--ambar-f); }
.ag-evento.c-cian { border-color: var(--cian-s); background: var(--cian-f); }
.ag-evento:hover, .ag-proximo:hover { transform: translateX(2px); background: var(--fondo); }
.ag-hora { display: flex; flex-direction: column; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 44px; }
.ag-hora small { font-weight: 500; color: var(--suave); }
.ag-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-cuerpo strong { overflow-wrap: anywhere; }
.ag-cuerpo small { color: var(--suave); }
.ag-vacio { text-align: center; padding: 22px 8px; color: var(--suave); font-size: 1.6rem; }
.ag-vacio p { margin: 4px 0 0; font-size: .88rem; }
.ag-proximo { align-items: center; }
.ag-fecha { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; height: 50px; border-radius: 12px; flex: none; background: var(--gris-f); color: var(--gris-t); }
.ag-fecha b { font-size: 1.15rem; line-height: 1; }
.ag-fecha small { text-transform: uppercase; font-size: .62rem; font-weight: 700; }
.ag-fecha.c-azul { background: var(--azul-f); color: var(--azul-t); } .ag-fecha.c-verde { background: var(--verde-f); color: var(--verde-t); }
.ag-fecha.c-violeta { background: var(--violeta-f); color: var(--violeta-t); } .ag-fecha.c-ambar { background: var(--ambar-f); color: var(--ambar-t); }
.ag-fecha.c-cian { background: var(--cian-f); color: var(--cian-t); }

/* Cronómetros de producción */
.crono { font-variant-numeric: tabular-nums; font-weight: 600; padding: 1px 6px; border-radius: 6px; background: var(--gris-f); color: var(--gris-t); }
.crono.corriendo { background: var(--verde-f); color: var(--verde-t); }
.crono.grande { font-size: 1.05rem; }
.crono-dia { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.oficina-cronos { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; font-size: .88rem; }
.jornada-chip { display: flex; align-items: center; gap: 6px; }

@media (max-width: 1100px) {
  .agenda-layout { grid-template-columns: 1fr; }
  .agenda-lateral { position: static; }
}
@media (max-width: 900px) {
  .detalle-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cal-dia { min-height: 54px; padding: 4px 2px; align-items: center; }
  .cal-dia .cal-evento, .cal-dia .cal-mas, .cal-dia .cal-cuenta { display: none; }
  .cal-dia .cal-puntos { display: flex; }
  .cal-barra { padding: 12px; }
  .cal-titulo { font-size: 1.1rem; min-width: 0; flex: 1; }
  .cal-nav { width: 100%; flex-wrap: wrap; justify-content: center; }
  .cal-cab { letter-spacing: 0; font-size: .62rem; padding: 8px 0; overflow: hidden; }
}

/* ================= Agentes IA ================= */
.motor-agentes { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.motor-estado { display: flex; align-items: center; gap: 12px; }
.motor-estado small { display: block; color: var(--suave); }
.motor-luz { width: 14px; height: 14px; border-radius: 99px; background: var(--gris-s); flex: none; }
.motor-luz.encendida { background: var(--verde-s); box-shadow: 0 0 0 5px var(--verde-f); animation: latido-motor 1.6s infinite; }
@keyframes latido-motor { 50% { box-shadow: 0 0 0 9px transparent; } }
.agentes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 14px 0; }
.agente { display: flex; flex-direction: column; gap: 10px; }
.agente.trabajando { outline: 2px solid var(--azul-s); }
.agente-cab { display: flex; gap: 10px; align-items: center; }
.agente-cab small { display: block; color: var(--suave); }
.agente-robot { font-size: 1.8rem; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--cian-f); }
.agente-mision { margin: 0; font-size: .86rem; flex: 1; }
.agente-cifras { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--suave); }
.agente-cifras b { color: var(--texto); }
.agente-acciones { display: flex; gap: 8px; }
.entrega-agente { border: 1px solid var(--verde-s); border-radius: var(--radio); padding: 12px; background: var(--verde-f); }
.entrega-cuerpo { max-height: 420px; overflow: auto; background: var(--superficie); border-radius: 8px; padding: 12px 14px; }
.entrega-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.md { line-height: 1.55; font-size: .92rem; }
.md h3, .md h4, .md h5, .md h6 { margin: 12px 0 6px; }
.md p { margin: 6px 0; }
.md ul, .md ol { margin: 6px 0; padding-left: 22px; }
.md pre { background: var(--fondo); padding: 10px; border-radius: 6px; overflow: auto; font-size: .82rem; }
.md code { background: var(--fondo); padding: 1px 4px; border-radius: 4px; }
.md blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--borde-fuerte); color: var(--suave); }
.md-fila { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--borde); font-size: .86rem; }
.md-fila:first-of-type { font-weight: 600; }

/* ================= Mercado Libre ================= */
.ml-pestanas { margin-bottom: 14px; flex-wrap: wrap; }
.ml-pasos { line-height: 1.8; padding-left: 20px; }
.ml-pasos code { font-size: .82rem; background: var(--fondo); padding: 2px 6px; border-radius: 4px; word-break: break-all; }
.ml-conectada { font-size: 1.05rem; }
.ml-mini { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--borde); }
.ml-enlace { max-width: 220px; }
.ml-acciones { display: flex; flex-wrap: wrap; gap: 4px; }
.ml-pregunta { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ml-pregunta.pendiente { border-left: 4px solid var(--ambar-s); }
.ml-pregunta header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ml-pregunta header span { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ml-texto, .ml-respuesta { margin: 0; }
.ml-respuesta { padding: 8px 10px; background: var(--verde-f); border-radius: 8px; }
.ml-responder { display: flex; flex-direction: column; gap: 6px; }
.ml-responder textarea { width: 100%; font: inherit; padding: 8px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto); }
.ml-chat { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow: auto; padding: 4px; margin-bottom: 10px; }
.ml-msg { align-self: flex-start; max-width: 80%; background: var(--fondo); border-radius: 12px; padding: 8px 12px; }
.ml-msg.propio { align-self: flex-end; background: var(--azul-f); }
.ml-msg p { margin: 0 0 2px; white-space: pre-wrap; }
.ml-msg small { color: var(--suave); }
.contador { background: var(--rojo); color: #fff; border-radius: 99px; padding: 0 6px; font-size: .75rem; }

/* ================= Agentes IA en el chat ================= */
.chat-robot { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--cian-f); font-size: 1.2rem; }
.chat-robot.grande { width: 38px; height: 38px; font-size: 1.35rem; }
.chat-escribiendo { padding: 6px 16px; font-size: .85rem; color: var(--suave); display: flex; align-items: center; gap: 8px; }
.chat-escribiendo .puntos { display: inline-flex; gap: 3px; }
.chat-escribiendo .puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--suave); animation: salto-puntos 1.2s infinite; }
.chat-escribiendo .puntos i:nth-child(2) { animation-delay: .2s; }
.chat-escribiendo .puntos i:nth-child(3) { animation-delay: .4s; }
@keyframes salto-puntos { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-burbuja .md { font-size: .92rem; }
.chat-burbuja .md > :first-child { margin-top: 0; }
.chat-burbuja .md h3, .chat-burbuja .md h4, .chat-burbuja .md h5 { font-size: 1rem; }

/* ================= Correo ================= */
.correo-conectar { max-width: 560px; }
.correo-texto { white-space: pre-wrap; word-break: break-word; font: inherit; background: var(--fondo); padding: 12px; border-radius: 8px; margin: 8px 0; max-height: 420px; overflow: auto; }
.correo-guardado header { display: flex; justify-content: space-between; gap: 10px; }
.correo-guardado { margin-bottom: 12px; }
tr.no-leido td { font-weight: 700; }
tr[data-uid] { cursor: pointer; }
.acceso-ayuda { margin: 0; font-size: .82rem; text-align: center; }

/* ================= WhatsApp ================= */
.wa-chat { height: calc(100vh - 230px); min-height: 420px; }
.wa-avatar { background: #25d366; color: #fff; font-weight: 700; font-size: 1rem; }
.wa-cerrada { margin: 10px; }

/* ================= Productos: fotos y vista previa de Mercado Libre ================= */
.producto-medios { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; padding: 12px; border: 1px dashed var(--borde-fuerte); border-radius: 12px; background: var(--fondo); }
.pm-fotos-col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pm-fotos { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-foto { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 2px solid var(--borde); background: #fff; }
.pm-foto.portada { border-color: var(--acento); }
.pm-foto img { width: 100%; height: 100%; object-fit: contain; }
.pm-foto b { position: absolute; left: 0; bottom: 0; right: 0; background: var(--acento); color: #fff; font-size: .62rem; text-align: center; padding: 1px 0; }
.pm-foto em { position: absolute; left: 0; top: 0; right: 0; background: var(--ambar-f); color: var(--ambar-t); font-size: .62rem; font-style: normal; text-align: center; }
.pm-foto button { position: absolute; border: 0; cursor: pointer; border-radius: 50%; width: 22px; height: 22px; font-size: .75rem; line-height: 1; background: rgba(0,0,0,.65); color: #fff; }
.pm-foto .pm-quitar { right: 3px; top: 3px; }
.pm-foto button[data-portada] { left: 3px; top: 3px; }
.pm-fotos.chicas .pm-foto { width: 54px; height: 54px; }
.mini-foto { width: 44px; height: 44px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid var(--borde); flex: none; }
.mini-foto.vacia { display: inline-grid; place-items: center; font-size: 1.1rem; }
.celda-producto { display: flex; gap: 10px; align-items: center; }
.celda-producto small { display: block; color: var(--suave); }
.ml-vista { display: flex; gap: 12px; background: #fff; color: #333; border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,.15); overflow: hidden; margin-top: 6px; }
.ml-vista-foto { position: relative; width: 120px; min-height: 120px; flex: none; display: grid; place-items: center; background: #f5f5f5; }
.ml-vista-foto img { width: 100%; height: 100%; object-fit: contain; }
.ml-vista-foto span { display: grid; place-items: center; font-size: 1.8rem; color: #aaa; }
.ml-vista-foto small { font-size: .65rem; }
.ml-vista-foto i { position: absolute; right: 4px; bottom: 4px; font-style: normal; font-size: .62rem; background: rgba(0,0,0,.6); color: #fff; padding: 1px 6px; border-radius: 99px; }
.ml-vista-info { padding: 10px 10px 10px 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ml-vista-info h4 { margin: 0; font-size: .92rem; font-weight: 400; line-height: 1.25; overflow-wrap: anywhere; }
.ml-vista-cond { font-size: .68rem; color: #00a650; font-weight: 600; text-transform: uppercase; }
.ml-vista-precio { font-size: 1.35rem; font-weight: 300; color: #333; }
.ml-vista-extra { font-size: .75rem; color: #666; }
.ml-publicar { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ml-publicar-vista { position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 800px) { .producto-medios, .ml-publicar { grid-template-columns: 1fr; } }

/* ================= Aviso de inactividad ================= */
.aviso-inactividad { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9999; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 14px; background: var(--ambar-f); color: var(--ambar-t); border: 1px solid var(--ambar-s); box-shadow: var(--sombra-alta); }