/* Panel de Jarvis. Una hoja, sin build y sin nada cargado de fuera (lo impide la CSP).
   Orden: tokens · base · estructura · componentes · pantallas · modo oscuro. */

/* ---- Tokens ---------------------------------------------------------------------------------------------- */
:root {
  --fondo: #ffffff;
  --superficie: #f7f7f8;
  --tinta: #0d0d0d;
  --suave: #5f636b;
  --linea: #e6e6e8;
  --primario: #0a0a0a;
  --sobre-primario: #ffffff;
  --lateral: #f7f7f8;
  --acento: #0b6b52;
  --acento-hover: #095a45;
  --sobre-acento: #ffffff;
  --mal: #b42318;
  --mal-fondo: #fef3f2;
  --aviso: #b54708;
  --visor-fondo: #e9eaec;

  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Escala: 13 · 15 · 16 · 20 · 28 */
  --t-pequeno: .8125rem;
  --t-normal: .9375rem;
  --t-base: 1rem;
  --t-h2: 1.25rem;
  --t-h1: 1.75rem;

  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 40px; --e7: 64px;
  --radio: 8px;
  --radio-grande: 12px;
  --ancho-lateral: 232px;
  --ancho: 1080px;
}

/* ---- Base ------------------------------------------------------------------------------------------------ */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-family: var(--fuente); font-size: 100%; line-height: 1.55; color: var(--tinta); background: var(--fondo); }
body { margin: 0; font-size: var(--t-normal); background: var(--fondo); -webkit-text-size-adjust: 100%; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-base); }
p { margin: 0 0 var(--e3); max-width: 70ch; }
a { color: var(--acento); text-underline-offset: 3px; }
a:hover { color: var(--acento-hover); }
code { font: var(--t-pequeno) var(--mono); background: var(--superficie); padding: 1px 5px; border-radius: 4px; }
kbd { font: 600 .75rem var(--mono); border: 1px solid var(--linea); border-radius: 4px; padding: 0 5px; color: var(--suave); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
.tabular { font-variant-numeric: tabular-nums; }
.suave { color: var(--suave); }
.nota { color: var(--suave); font-size: var(--t-pequeno); margin: var(--e2) 0 0; }
.oculto { display: none; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: var(--e4); top: -64px; background: var(--tinta); color: var(--fondo); padding: var(--e2) var(--e4); border-radius: var(--radio); z-index: 10; }
.saltar:focus { top: var(--e2); }

/* ---- Estructura ------------------------------------------------------------------------------------------ */
main { max-width: var(--ancho); margin: 0 auto; padding: var(--e6) var(--e6) var(--e7); }
.app { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); min-height: 100vh; }
.lateral {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--e4);
  padding: var(--e5) var(--e3); background: var(--lateral); border-right: 1px solid var(--linea);
}
.lateral .marca, .superior .marca { font-weight: 600; font-size: var(--t-h2); color: var(--tinta); text-decoration: none; letter-spacing: -.02em; padding: 0 var(--e3); }
.nav-lista { list-style: none; margin: 0 0 var(--e4); padding: 0; display: grid; gap: 2px; }
.nav-lista a, .nav-ayuda { display: block; color: var(--suave); text-decoration: none; padding: var(--e2) var(--e3); border-radius: var(--radio); }
.nav-lista a:hover, .nav-ayuda:hover { color: var(--tinta); background: var(--fondo); }
.nav-lista [aria-current], .nav-ayuda[aria-current] { color: var(--tinta); font-weight: 600; background: var(--fondo); box-shadow: inset 2px 0 0 var(--acento); }
.nav-admin { padding-top: var(--e3); border-top: 1px solid var(--linea); }
.lateral-pie { margin-top: auto; display: grid; gap: var(--e1); }
.lateral-pie .menu { display: block; }
.lateral-pie .menu > summary { display: block; color: var(--tinta); padding: var(--e2) var(--e3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-lista.arriba { top: auto; bottom: calc(100% + var(--e1)); left: 0; right: auto; }
.contenido { min-width: 0; }
.superior {
  position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: var(--e3); height: 56px;
  padding: 0 var(--e5); background: var(--fondo); border-bottom: 1px solid var(--linea);
}
.busqueda-global { flex: 1 1 auto; max-width: 480px; }
.busqueda-global input { margin: 0; background: var(--superficie); border-color: transparent; }
#contador { margin-left: auto; font-size: var(--t-normal); }
.contador { color: var(--suave); text-decoration: none; white-space: nowrap; }
.contador.con-pendientes { color: var(--tinta); font-weight: 500; }
.superior .menu-movil { display: none; }
.menu-nuevo > summary { display: inline-block; color: var(--tinta); }
.pagina-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e5); }
.miga { color: var(--suave); font-size: var(--t-pequeno); margin: 0 0 var(--e2); }
.miga a { color: var(--suave); }
.bloque { margin: 0 0 var(--e6); }
.bloque > h2, .bloque-cab h2 { margin-bottom: var(--e3); }
.bloque-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e3); }
.bloque-cab h2 { margin: 0; }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--e6); align-items: start; }
.titulo-grande { font-size: var(--t-h2); }

/* ---- Componentes ----------------------------------------------------------------------------------------- */
button, .boton {
  display: inline-block; font: inherit; font-weight: 500; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--primario); background: var(--primario); color: var(--sobre-primario); border-radius: var(--radio); padding: 9px var(--e4);
}
button:hover, .boton:hover { background: #2a2a2a; border-color: #2a2a2a; color: var(--sobre-primario); }
button.secundario, .boton.secundario { background: transparent; color: var(--tinta); border-color: var(--linea); }
button.secundario:hover, .boton.secundario:hover { background: var(--superficie); color: var(--tinta); border-color: var(--linea); }
button.peligro { background: transparent; color: var(--mal); border-color: var(--linea); }
button.peligro:hover { background: var(--mal-fondo); color: var(--mal); }
button.enlace, .boton.enlace { background: none; border-color: transparent; color: var(--acento); padding: 9px var(--e2); }
button.enlace:hover, .boton.enlace:hover { background: none; color: var(--acento-hover); text-decoration: underline; }
button.enlace.peligro { color: var(--mal); }
button:disabled, button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.acciones, .acciones-form, .acciones-fila { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.acciones-form { margin-top: var(--e5); }
.acciones form, .acciones-fila form { margin: 0; }
.acciones-fila { justify-content: flex-end; }

.aviso { padding: var(--e3) var(--e4); border-radius: var(--radio); margin: 0 0 var(--e5); background: var(--superficie); display: flex; gap: var(--e4); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.aviso form { margin: 0; }
.aviso-ok { background: var(--superficie); border-left: 3px solid var(--acento); border-radius: 2px var(--radio) var(--radio) 2px; }
.aviso-info { border-left: 3px solid var(--aviso); border-radius: 2px var(--radio) var(--radio) 2px; }
.aviso-error { background: var(--mal-fondo); color: var(--mal); border-left: 3px solid var(--mal); border-radius: 2px var(--radio) var(--radio) 2px; font-weight: 500; }
.deshacer { display: flex; align-items: center; gap: var(--e3); margin: calc(-1 * var(--e3)) 0 var(--e5); flex-wrap: wrap; }
.deshacer .nota { margin: 0; }
.vacio { color: var(--suave); background: var(--superficie); border-radius: var(--radio); padding: var(--e5); max-width: none; }

.tabla { width: 100%; border-collapse: collapse; position: relative; }
.tabla th { text-align: left; font-weight: 500; font-size: var(--t-pequeno); color: var(--suave); padding: var(--e2) var(--e3) var(--e2) 0; border-bottom: 1px solid var(--linea); }
.tabla td { padding: var(--e3) var(--e3) var(--e3) 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tfoot td { border-bottom: 0; font-weight: 600; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: var(--e4); }
.tabla-compacta td { padding-top: var(--e2); padding-bottom: var(--e2); }
.tabla tr.primero td { border-top: 1px solid var(--linea); }
.tabla tr.no-leida td { font-weight: 600; }
.detalle { display: block; color: var(--suave); font-size: var(--t-pequeno); }
.detalle-largo { max-width: 38ch; color: var(--suave); font-size: var(--t-pequeno); }

.punto, .estado { display: inline-flex; align-items: baseline; gap: var(--e2); font-weight: 500; white-space: nowrap; }
.punto::before, .estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--suave); flex: none; align-self: center; }
.punto-ok::before, .estado-aprobado::before, .estado-alta::before { background: var(--acento); }
.punto-mal::before { background: var(--mal); }
.estado-en_revision::before, .estado-pendiente_cliente::before, .estado-baja::before { background: var(--aviso); }
.estado-listo::before { background: var(--acento); }
.estado-rechazado { color: var(--suave); }
.punto + .detalle { margin-top: 2px; }

.pestanas { display: flex; gap: var(--e5); border-bottom: 1px solid var(--linea); margin: 0 0 var(--e5); }
.pestanas a { color: var(--suave); text-decoration: none; padding: var(--e2) 0; margin-bottom: -1px; border-bottom: 2px solid transparent; white-space: nowrap; }
.pestanas a:hover { color: var(--tinta); }
.pestanas a[aria-current] { color: var(--tinta); border-bottom-color: var(--tinta); font-weight: 500; }
.pestanas-filtro { border-bottom: 0; gap: var(--e4); margin-bottom: var(--e3); }
.pestanas-filtro a[aria-current] { border-bottom-color: var(--acento); }

.menu { position: relative; display: inline-block; text-align: left; }
.menu > summary { list-style: none; cursor: pointer; color: var(--acento); padding: var(--e1) var(--e2); border-radius: var(--radio); white-space: nowrap; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--superficie); }
.menu-usuario > summary { color: var(--tinta); }
.menu-lista {
  position: absolute; right: 0; top: calc(100% + var(--e1)); z-index: 5; min-width: 220px; max-width: min(92vw, 340px);
  background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e2);
  display: flex; flex-direction: column; gap: var(--e1);
}
.menu-lista.ancha { min-width: 300px; gap: var(--e3); padding: var(--e3); }
.menu-lista a { padding: var(--e2) var(--e3); text-decoration: none; color: var(--tinta); border-radius: var(--radio); }
.menu-lista a:hover { background: var(--superficie); }
.menu-lista form { margin: 0; }
.menu-lista button.enlace { width: 100%; text-align: left; padding: var(--e2) var(--e3); }
.plegable > summary { cursor: pointer; padding: var(--e2) var(--e3); color: var(--tinta); border-radius: var(--radio); }
.plegable > summary:hover { background: var(--superficie); }
.plegable[open] > summary { font-weight: 500; }

.formulario { max-width: 520px; display: grid; gap: var(--e4); }
.formulario.compacto { gap: var(--e3); padding: var(--e2) var(--e3); }
.campo { display: block; font-size: var(--t-normal); color: var(--tinta); font-weight: 500; }
input, select, textarea {
  display: block; width: 100%; margin-top: var(--e1); font: inherit; font-weight: 400; color: var(--tinta); background: var(--fondo);
  border: 1px solid #c9ccd1; border-radius: var(--radio); padding: 9px var(--e3);
}
input[type="checkbox"] { display: inline-block; width: auto; margin: 0; }
textarea { resize: vertical; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--suave); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--acento); outline-offset: 0; border-color: var(--acento); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--mal); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 500; padding: 0; margin-bottom: var(--e2); }
.campo-error { color: var(--mal); font-size: var(--t-normal); margin: calc(-1 * var(--e2)) 0 0; }
.casilla { display: flex; align-items: flex-start; gap: var(--e2); font-weight: 400; margin: var(--e2) 0; }
.casilla input { margin-top: 4px; flex: none; }
.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li { padding: var(--e2) 0; border-bottom: 1px solid var(--linea); }
.lista-simple li span { display: block; }
.lista-simple li:last-child { border-bottom: 0; }

/* ---- Pantallas ------------------------------------------------------------------------------------------- */
.resumen-dia { display: flex; gap: var(--e5); flex-wrap: wrap; color: var(--suave); margin-bottom: var(--e5); }
.resumen-dia strong { color: var(--tinta); font-weight: 600; }

.filtros { display: flex; gap: var(--e4); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--e5); max-width: none; }
.filtros .busqueda { flex: 1 1 260px; }
.filtros .campo:not(.busqueda) { flex: 0 1 180px; }
.filtros-en-linea { display: flex; gap: var(--e3); }
.paginacion { display: flex; gap: var(--e3); align-items: center; margin-top: var(--e4); }

.cliente-cab .pagina-cab { margin-bottom: var(--e4); }
.datos-cliente { display: flex; gap: var(--e4); flex-wrap: wrap; color: var(--suave); margin: var(--e1) 0 0; }
.cifras { display: flex; gap: var(--e6); flex-wrap: wrap; margin: 0 0 var(--e4); }
.cifras div { min-width: 96px; }
.cifras dt { color: var(--suave); font-size: var(--t-pequeno); }
.cifras dd { margin: 0; font-size: var(--t-h1); font-weight: 600; letter-spacing: -.01em; }
.cifras .atencion dd { color: var(--aviso); }
.zona-delicada { padding-top: var(--e5); border-top: 1px solid var(--linea); margin-top: var(--e6); }

.actividad { list-style: none; margin: 0; padding: 0; }
.actividad li { display: grid; grid-template-columns: 100px 80px minmax(0, 1fr); gap: var(--e3); padding: var(--e2) 0; border-bottom: 1px solid var(--linea); }
.quien { font-weight: 500; }

.personas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e5); }
.persona { padding-bottom: var(--e5); border-bottom: 1px solid var(--linea); }
.persona:last-child { border-bottom: 0; }
.persona-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e4); margin-bottom: var(--e2); }
.persona-cab p { margin: 0; }
.persona.inactiva h3 { color: var(--suave); }

/* ---- Hilo: espacio de trabajo a pantalla completa -------------------------------------------------------- */
:root {
  --punto-gestor: var(--aviso);   /* los colores de estado viven solo en estos puntos */
  --punto-jarvis: var(--acento);
  --punto-resuelta: var(--suave);
  --burbuja-propia: color-mix(in srgb, var(--acento) 12%, var(--fondo));
  --ancho-riel: 56px;
  --ancho-bandeja: 280px;
  --ancho-contexto: 320px;
  --ancho-burbuja: 34rem;
}
.app.espacio { grid-template-columns: var(--ancho-riel) minmax(0, 1fr); height: 100dvh; min-height: 0; overflow: hidden; }
.espacio .lateral { height: 100dvh; padding: var(--e4) var(--e2); align-items: center; gap: var(--e3); }
.espacio .lateral .marca { padding: 0; }
.espacio .contenido { display: flex; flex-direction: column; height: 100dvh; min-height: 0; }
.espacio .superior { position: static; flex: none; }
.riel { display: grid; gap: var(--e1); }
.riel-enlace { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radio); color: var(--suave); }
.riel-enlace:hover { color: var(--tinta); background: var(--fondo); }
.riel-enlace[aria-current] { color: var(--tinta); background: var(--fondo); box-shadow: inset 2px 0 0 var(--acento); }
.espacio .menu-usuario > summary { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  background: var(--fondo); border: 1px solid var(--linea); text-transform: uppercase; }
.espacio-main { flex: 1 1 auto; min-height: 0; max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.espacio-main > .aviso, .espacio-main > .deshacer { flex: none; margin: var(--e2) var(--e4) 0; }

.espacio-grid {
  flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr);
  grid-template-columns: var(--ancho-bandeja) minmax(0, 1fr) var(--ancho-contexto);
}
.zona { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.bandeja { border-right: 1px solid var(--linea); overflow-y: auto; background: var(--fondo); }
.contexto { border-left: 1px solid var(--linea); overflow-y: auto; padding: var(--e4); gap: var(--e5); }
.zona-titulo { font-size: var(--t-pequeno); font-weight: 600; color: var(--suave); margin: 0; padding: var(--e4) var(--e4) var(--e2); }
.contexto .zona-titulo { padding: 0 0 var(--e2); }

.lista-hilos { list-style: none; margin: 0; padding: 0; }
.item-hilo { display: grid; gap: 2px; padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linea); color: var(--tinta); text-decoration: none; }
.item-hilo:hover { background: var(--superficie); }
.item-hilo[aria-current] { background: var(--superficie); box-shadow: inset 2px 0 0 var(--acento); }
.item-linea { display: flex; justify-content: space-between; gap: var(--e2); align-items: baseline; }
.item-nombre { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sin-leer .item-nombre { font-weight: 600; }
.contador-hilo { font-size: var(--t-pequeno); font-variant-numeric: tabular-nums; color: var(--sobre-acento); background: var(--acento); border-radius: 999px; padding: 0 var(--e2); }
.item-cliente, .item-texto { color: var(--suave); font-size: var(--t-pequeno); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hilo-cab { flex: none; display: flex; justify-content: space-between; align-items: center; gap: var(--e4); flex-wrap: wrap;
  padding: var(--e3) var(--e5); border-bottom: 1px solid var(--linea); }
.hilo-titulo { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; min-width: 0; }
.hilo-titulo h1 { font-size: var(--t-h2); overflow-wrap: anywhere; }
.canal { color: var(--suave); }
.chip { display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--t-pequeno); border: 1px solid var(--linea); border-radius: 999px; padding: 2px var(--e3); }
.punto-estado { width: 8px; height: 8px; border-radius: 50%; background: var(--suave); }
.punto-gestor { background: var(--punto-gestor); }
.punto-jarvis { background: var(--punto-jarvis); }
.punto-pasada { background: var(--punto-gestor); }
.punto-resuelta { background: var(--punto-resuelta); }

/* El hilo es lo único que se desplaza. */
.hilo-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--e4) var(--e5); scrollbar-width: thin; scrollbar-color: var(--linea) transparent; }
.hilo-scroll:focus-visible { outline-offset: -2px; }
.burbujas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.msg { display: flex; flex-direction: column; align-items: flex-start; margin-top: 2px; min-width: 0; }
.msg-inicio { margin-top: var(--e4); }
.msg-gestor, .msg-jarvis { align-items: flex-end; }
.meta { display: flex; gap: var(--e2); align-items: baseline; font-size: var(--t-pequeno); color: var(--suave); margin-bottom: 2px; }
.quien { font-weight: 500; color: var(--tinta); }
.quien-jarvis { color: var(--suave); font-weight: 400; }
.cuando { color: var(--suave); font-variant-numeric: tabular-nums; font-size: var(--t-pequeno); }
.burbuja { max-width: min(80%, var(--ancho-burbuja)); padding: var(--e2) var(--e3); border-radius: var(--radio-grande); border: 1px solid var(--linea);
  background: var(--superficie); overflow-wrap: anywhere; }
.msg-gestor .burbuja { background: var(--burbuja-propia); border-color: transparent; }
.msg-jarvis .burbuja { background: var(--fondo); }
.burbuja .texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja .adjunto-img { max-width: 100%; }
.evento { align-self: center; max-width: 90%; text-align: center; font-size: var(--t-pequeno); color: var(--suave); margin: var(--e1) 0; overflow-wrap: anywhere; }
.evento-etiqueta { font-weight: 600; }
.separador-dia { align-self: stretch; display: flex; align-items: center; gap: var(--e3); margin: var(--e4) 0 var(--e1); color: var(--suave); font-size: var(--t-pequeno); }
.separador-dia::before, .separador-dia::after { content: ""; flex: 1; border-top: 1px solid var(--linea); }
.msg-pendiente .burbuja { opacity: .7; }
.msg-fallido .burbuja { border-color: var(--mal); background: var(--mal-fondo); opacity: 1; }
.msg-fallido .cuando { color: var(--mal); }
.acciones-envio { display: flex; gap: var(--e2); align-items: center; margin-top: var(--e1); }
.adjunto-img { max-width: 260px; max-height: 220px; border-radius: var(--radio); display: block; margin-top: var(--e1); }
.anteriores { display: flex; justify-content: center; margin-bottom: var(--e3); }
.anteriores:empty { display: none; }
.nuevos { position: relative; align-self: center; margin-top: calc(-1 * var(--e6)); margin-bottom: var(--e2); z-index: 2; border-radius: 999px; }
.nuevos[hidden] { display: none; }

.composer { flex: none; display: grid; gap: var(--e2); padding: var(--e3) var(--e5) var(--e4); border-top: 1px solid var(--linea); background: var(--fondo); max-width: none; }
.linea-estado { margin: 0; font-size: var(--t-pequeno); color: var(--suave); }
.composer-caja { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: flex-end; }
.composer-caja textarea { flex: 1 1 12rem; width: auto; margin: 0; min-height: 40px; max-height: 40vh; resize: none; overflow-y: auto; }
.composer-caja select { margin: 0; width: auto; max-width: 9rem; }
.composer-caja button { margin: 0; }
.icono { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid var(--linea); color: var(--suave); }
.icono:hover { color: var(--tinta); background: var(--superficie); border-color: var(--linea); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--e2); flex-wrap: wrap; }
.chips:empty { display: none; }
.chips li { display: inline-flex; align-items: center; gap: var(--e2); border: 1px solid var(--linea); border-radius: 999px; padding: 2px var(--e3); font-size: var(--t-pequeno); max-width: 100%; }
.chips .chip-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips button { padding: 0 var(--e1); border: 0; background: transparent; color: var(--suave); }
.composer .nota { margin: 0; }

.ctx-bloque { display: grid; gap: var(--e1); align-content: start; }
.ctx-nombre { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.docs { list-style: none; margin: 0; padding: 0; }
.docs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--e3); padding: var(--e2) 0; border-bottom: 1px solid var(--linea); }
.docs .doc-emisor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs .doc-total { text-align: right; }
.docs .estado { grid-column: 1 / -1; font-size: var(--t-pequeno); }

@media (max-width: 1180px) {
  .espacio-grid { grid-template-columns: minmax(0, 1fr) var(--ancho-contexto); }
  .bandeja { display: none; }
}
@media (max-width: 900px) {
  .espacio-grid { grid-template-columns: minmax(0, 1fr); }
  .contexto { display: none; }
}

.texto-largo { min-height: 28rem; font-family: var(--mono); font-size: var(--t-normal); }

/* Revisión de un documento: visor a la izquierda (fijo), datos a la derecha en bloques. */
.paginador { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.revision { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--e5); align-items: start; }
.visor { position: sticky; top: calc(56px + var(--e4)); }
.visor-plegable > summary { display: none; cursor: pointer; padding: var(--e2) 0; font-weight: 500; }
.herramientas { display: flex; gap: var(--e2); margin-bottom: var(--e2); align-items: center; flex-wrap: wrap; }
.herramientas button { padding: 6px var(--e3); }
.zoom-valor { min-width: 4.5ch; text-align: center; color: var(--suave); font-size: var(--t-pequeno); }
.lienzo {
  position: relative; overflow: hidden; height: calc(100vh - 56px - 190px); min-height: 380px;
  background: var(--visor-fondo); border: 1px solid var(--linea); border-radius: var(--radio);
  touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.lienzo.arrastrando { cursor: grabbing; }
.escena { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.escena img { display: block; width: 100%; height: auto; background: #fff; margin-bottom: 12px; pointer-events: none; }
.visor-ayuda { margin: var(--e2) 0 0; }
.visor-recordar { font-size: var(--t-pequeno); color: var(--suave); margin: var(--e1) 0 0; }
.visor:fullscreen { background: var(--fondo); padding: var(--e3); display: flex; flex-direction: column; }
.visor:fullscreen .visor-plegable { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.visor:fullscreen .lienzo { height: auto; flex: 1 1 auto; }

.requisitos { margin: 0 0 var(--e5); padding: var(--e4); border: 1px solid var(--linea); border-radius: var(--radio-grande); }
.requisitos h2 { font-size: var(--t-base); }
.requisitos .nota { margin: var(--e1) 0 var(--e3); }
.requisitos ul { list-style: none; margin: 0; padding: 0; }
.req { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); column-gap: var(--e2); padding: 6px 0; border-top: 1px solid var(--linea); align-items: baseline; }
.req:first-child { border-top: 0; }
.req > a { color: var(--tinta); text-decoration: none; grid-column: 2; }
.req > a:hover { text-decoration: underline; }
.req-marca { grid-row: 1 / span 2; font-weight: 700; text-align: center; }
.req-nota { grid-column: 2; font-size: var(--t-pequeno); color: var(--suave); }
.req.ok .req-marca { color: var(--acento); }
.req.falta .req-marca, .req.falta .req-nota { color: var(--mal); }
.req.aviso .req-marca, .req.dudoso .req-marca, .req.aviso .req-nota, .req.dudoso .req-nota { color: var(--aviso); }
.req.falta > a { font-weight: 500; }
.cumplidos { margin-top: var(--e2); }
.cumplidos > summary { color: var(--suave); padding-left: 0; }

.motivos { background: var(--superficie); border-left: 3px solid var(--aviso); border-radius: 2px var(--radio) var(--radio) 2px; padding: var(--e3) var(--e4); margin-bottom: var(--e4); }
.motivos h2 { font-size: var(--t-base); margin-bottom: var(--e2); }
.motivos ul { margin: 0; padding-left: var(--e5); }
.motivos li.bloquea { color: var(--mal); font-weight: 500; }
.motivos.guardado { border-left-color: var(--suave); }
.grupo-datos { padding: var(--e4) 0; border-top: 1px solid var(--linea); }
.grupo-datos:first-child { border-top: 0; padding-top: 0; }
.grupo-datos > h2 { font-size: var(--t-base); margin-bottom: var(--e3); }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.campos .ancho { grid-column: 1 / -1; }
.campo.dudoso { color: var(--aviso); }
.campo.dudoso input, .campo.dudoso select, table.dudoso input, table.dudoso select { border-color: var(--aviso); }
table.lineas { width: 100%; margin-bottom: var(--e3); border-collapse: collapse; }
table.lineas th { text-align: left; font-weight: 500; font-size: var(--t-pequeno); color: var(--suave); }
table.lineas td { padding: 2px var(--e2) 2px 0; }
table.lineas input, table.lineas select { margin-top: 0; }
table.lineas td:nth-child(2) { width: 6rem; }
table.detalle td:nth-child(2) { width: 5rem; }
table.detalle td:nth-child(3), table.detalle td:nth-child(4) { width: 7rem; }
table.dudoso th { color: var(--aviso); }
.revision .acciones { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--linea); }
#btn-aprobar { order: 3; margin-left: auto; }
.bloqueo-motivo { color: var(--mal); font-size: var(--t-pequeno); margin: var(--e2) 0 0; max-width: none; }
.otras-acciones { margin-top: var(--e4); display: grid; gap: var(--e1); }
.otras-acciones .formulario { max-width: none; padding: var(--e2) var(--e3) var(--e3); }
.eliminar-documento { margin-top: var(--e4); }
th.casilla, td.casilla { width: 1.5rem; padding-right: 0; }
.barra-seleccion { margin-bottom: var(--e3); }
.barra-seleccion button:disabled { opacity: .5; cursor: default; }
.asiento { margin-top: var(--e5); }
.asiento h2 { font-size: var(--t-base); margin-bottom: var(--e2); }

.plazo { border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: var(--e4) var(--e5); margin: 0 0 var(--e6); }
.plazo-cab .nota { margin: var(--e1) 0 var(--e3); }
.plazo .cifras { margin: 0; gap: var(--e6); }
.plazo .cifras dd { font-size: var(--t-h2); }
.filas-cliente { list-style: none; margin: 0; padding: 0; }
.fila-cliente { padding: var(--e3) 0; border-top: 1px solid var(--linea); }
.fila-cliente:first-child { border-top: 0; }
.fila-cliente-cab { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.fila-cliente-nombre { font-weight: 600; color: var(--tinta); text-decoration: none; margin-right: auto; }
.fila-cliente-nombre:hover { text-decoration: underline; }
.fila-cliente-cab form { margin: 0; }
.fila-cliente .detalle { margin: var(--e1) 0 0; }
.fila-cliente .lista-simple { margin-top: var(--e2); }
.prioridad { font-size: var(--t-pequeno); font-weight: 500; min-width: 4.5rem; color: var(--suave); }
.prioridad::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--suave); margin-right: var(--e2); }
.prioridad-urgente .prioridad { color: var(--mal); }
.prioridad-urgente .prioridad::before { background: var(--mal); }
.prioridad-normal .prioridad::before { background: var(--aviso); }
.lista-presentar li { display: flex; gap: var(--e4); justify-content: space-between; }
.enlace-suave { color: var(--suave); font-size: var(--t-pequeno); }
.atajos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); margin: 0 0 var(--e5); }
.atajo { display: block; padding: var(--e4); border: 1px solid var(--linea); border-radius: var(--radio-grande); text-decoration: none; color: var(--tinta); }
.atajo:hover { background: var(--superficie); color: var(--tinta); }
.atajo strong { display: block; font-weight: 600; }
.atajo span { display: block; color: var(--suave); font-size: var(--t-pequeno); margin-top: var(--e1); }
.tarjeta { border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: var(--e5); margin: 0 0 var(--e5); }
.tarjeta > h2 { margin-bottom: var(--e3); }
.grupos { display: grid; gap: var(--e5); }
.grupo { border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: var(--e4) var(--e5); }
.grupo .bloque-cab { margin-bottom: var(--e2); }
.grupo h2 { font-size: var(--t-base); }
.dialogo { border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: var(--e5); max-width: min(92vw, 440px); background: var(--fondo); color: var(--tinta); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.dialogo::backdrop { background: rgba(10, 10, 10, .35); }
.dialogo p { margin-bottom: var(--e5); }
.dialogo .acciones { justify-content: flex-end; }

/* Acceso: una columna estrecha, sin cabecera. */
main.acceso { max-width: 400px; padding-top: 14vh; }
.marca-acceso { font-weight: 600; margin: 0 0 var(--e5); }
main.acceso h1 { margin-bottom: var(--e4); }
main.acceso svg { display: block; margin: var(--e3) 0; max-width: 100%; height: auto; }
main.acceso code { word-break: break-all; }
.codigos { list-style: none; padding: 0; margin: 0 0 var(--e4); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e2); }
.salir-suelto { max-width: 400px; margin: 0 auto; padding: 0 var(--e5); }

/* ---- Movimiento: solo responde a una acción ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .menu[open] > .menu-lista { animation: abrir .12s ease-out; }
  @keyframes abrir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* ---- Hilo: traspaso, acciones rápidas y vista previa ------------------------------------------------------ */
:root { --ancho-vista: 460px; }
.traspaso { flex: none; padding: var(--e3) var(--e5); border-bottom: 1px solid var(--linea); background: var(--superficie);
  box-shadow: inset 3px 0 0 var(--punto-gestor); }
.traspaso p { margin: 0; }
.traspaso-titulo { font-size: var(--t-pequeno); font-weight: 600; color: var(--suave); }
.traspaso-motivo { font-weight: 500; overflow-wrap: anywhere; }
.traspaso-resumen { font-size: var(--t-pequeno); overflow-wrap: anywhere; }
.conexion { flex: none; margin: 0; padding: var(--e1) var(--e5); font-size: var(--t-pequeno); color: var(--mal); background: var(--mal-fondo); }
.ctx-acciones { display: grid; gap: var(--e2); }
.ctx-acciones form { margin: 0; }
.ctx-acciones button { width: 100%; }
.doc-abrir { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--e3); width: 100%; text-align: left; padding: var(--e2) 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; color: var(--tinta); font-weight: 400; white-space: normal; }
.doc-abrir:hover { background: var(--superficie); border-color: var(--linea); color: var(--tinta); }
.doc-abrir .doc-emisor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs li { display: block; padding: 0; border-bottom: 0; }
.vista { border-left: 1px solid var(--linea); overflow-y: auto; padding: var(--e4); }
.vista[hidden] { display: none; }
.vista-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e3); }
.vista-cab .zona-titulo { padding: 0; }
.vista-emisor { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.vista-datos { margin: var(--e3) 0; display: grid; gap: var(--e1); }
.vista-datos div { display: flex; justify-content: space-between; gap: var(--e3); }
.vista-datos dt { color: var(--suave); }
.vista-datos dd { margin: 0; }
.vista-motivos { margin: 0 0 var(--e3); padding-left: var(--e4); font-size: var(--t-pequeno); }
.vista-motivos .bloquea { color: var(--mal); }
.vista-paginas img { display: block; width: 100%; height: auto; margin-bottom: var(--e3); border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; }
.vista-estado { color: var(--suave); }
.espacio-grid.con-vista { grid-template-columns: var(--ancho-bandeja) minmax(0, 1fr) var(--ancho-vista); }
.espacio-grid.con-vista .contexto { display: none; }
@media (max-width: 1180px) {
  .espacio-grid.con-vista { grid-template-columns: minmax(0, 1fr) var(--ancho-vista); }
}
@media (max-width: 900px) {
  .espacio-grid.con-vista { grid-template-columns: minmax(0, 1fr); }
  .espacio-grid.con-vista .centro { display: none; }
}

/* ---- Hilo: bandeja con filtros, modos del composer, plantillas, notas y atajos ---------------------------- */
.bandeja-cab { flex: none; padding: 0 var(--e4) var(--e2); border-bottom: 1px solid var(--linea); }
.bandeja-cab .zona-titulo { padding: var(--e4) 0 var(--e2); }
.bandeja-cab input[type="search"] { margin: 0; }
.lista-contenedor { min-height: 0; }
.filtros-bandeja { display: flex; flex-wrap: wrap; gap: var(--e1); padding: var(--e2) var(--e3); border-bottom: 1px solid var(--linea); }
.filtro { padding: 2px var(--e2); font-size: var(--t-pequeno); border-radius: 999px; background: transparent; color: var(--suave); border: 1px solid transparent; }
.filtro:hover { background: var(--superficie); color: var(--tinta); border-color: var(--linea); }
.filtro[aria-pressed="true"] { color: var(--tinta); border-color: var(--linea); background: var(--superficie); font-weight: 600; }
.filtro-n { color: var(--suave); }
.bandeja .vacio { padding: var(--e4); margin: 0; }

.modos { display: flex; gap: var(--e1); }
.modo { padding: 2px var(--e3); font-size: var(--t-pequeno); background: transparent; color: var(--suave); border: 1px solid var(--linea); border-radius: 999px; }
.modo:hover { background: var(--superficie); color: var(--tinta); border-color: var(--linea); }
.modo[aria-pressed="true"] { color: var(--tinta); background: var(--superficie); font-weight: 600; }
.composer[data-modo="nota"] .composer-caja textarea { background: var(--superficie); border-style: dashed; }
.composer[data-modo="nota"] #linea-estado { display: none; }
.linea-nota { color: var(--tinta); }

.composer { position: relative; }
.menu-plantillas { position: absolute; left: var(--e5); right: var(--e5); bottom: calc(100% - var(--e2)); z-index: 3; list-style: none; margin: 0; padding: var(--e1);
  background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio); max-height: 14rem; overflow-y: auto; }
.menu-plantillas[hidden] { display: none; }
.menu-plantillas li { display: grid; gap: 0; padding: var(--e2) var(--e3); border-radius: var(--radio); cursor: pointer; }
.menu-plantillas li[aria-selected="true"] { background: var(--superficie); box-shadow: inset 2px 0 0 var(--acento); }
.menu-plantillas span { color: var(--suave); font-size: var(--t-pequeno); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.evento-nota { align-self: stretch; max-width: none; text-align: left; background: var(--superficie); border: 1px dashed var(--linea);
  border-radius: var(--radio); padding: var(--e2) var(--e3); margin: var(--e2) 0; color: var(--tinta); }
.evento-nota .evento-etiqueta { display: block; color: var(--suave); }
.evento-nota .texto { white-space: pre-wrap; overflow-wrap: anywhere; }

.atajos-lista { margin: var(--e3) 0; display: grid; gap: var(--e2); }
.atajos-lista div { display: grid; grid-template-columns: minmax(8rem, auto) minmax(0, 1fr); gap: var(--e4); }
.atajos-lista dt { color: var(--suave); }
.atajos-lista dd { margin: 0; }
kbd { font-family: var(--mono); font-size: var(--t-pequeno); border: 1px solid var(--linea); border-radius: 4px; padding: 0 var(--e1); background: var(--superficie); }

/* ---- Pantallas estrechas --------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  main { padding: var(--e5) var(--e4) var(--e6); }
  .app, .app.espacio { grid-template-columns: minmax(0, 1fr); }
  .lateral { display: none; }
  .superior .menu-movil { display: block; }
  .menu-movil .menu-lista { position: absolute; left: 0; right: auto; min-width: 260px; padding: var(--e3); }
  .superior { padding: 0 var(--e4); gap: var(--e2); }
  .busqueda-global { flex: 1 1 0; min-width: 0; }
  .menu-nuevo > summary { padding: 9px var(--e3); }
  .atajos { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 1.5rem; }
  .dos-columnas, .revision { grid-template-columns: minmax(0, 1fr); gap: var(--e5); }
  .visor { position: static; }
  .visor-plegable > summary { display: list-item; }
  .herramientas { gap: var(--e1); }
  .herramientas button { padding: 6px 10px; font-size: var(--t-pequeno); }
  .fila-cliente-cab .boton { width: 100%; text-align: center; }
  .plazo { padding: var(--e4); }
  .plazo .cifras { gap: var(--e4); }
  .lienzo { height: 52vh; min-height: 280px; }
  .campos { grid-template-columns: minmax(0, 1fr); }
  .campos .ancho { grid-column: auto; }
  table.detalle { display: block; overflow-x: auto; }
  #btn-aprobar { margin-left: 0; }
  .actividad li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pestanas { overflow-x: auto; overflow-y: hidden; }
  .tabla { display: block; overflow-x: auto; }
  .tabla .menu-lista, .persona-cab .menu-lista { position: static; margin-top: var(--e2); max-width: none; }
  .tabla .menu, .persona-cab .menu { display: block; }
  .cifras { gap: var(--e5); }
}

/* ---- Modo oscuro ----------------------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #111214; --superficie: #1a1b1e; --tinta: #ececee; --suave: #a3a7af; --linea: #2c2e33;
    --acento: #4cc3a0; --acento-hover: #72d4b7; --sobre-acento: #0d0d0d;
    --primario: #ececee; --sobre-primario: #0d0d0d; --lateral: #16171a;
    --mal: #ff8a80; --mal-fondo: #2a1715; --aviso: #f0a35c; --visor-fondo: #0a0b0c;
  }
  input, select, textarea { border-color: #3a3d44; }
  button:hover, .boton:hover { background: #ffffff; border-color: #ffffff; }
  .lienzo { border-color: #3a3d44; }
}

/* Informe mensual: grafico de 12 meses (SVG; sin estilos en linea por la politica de contenido) */
.grafico-informe { width: 100%; max-width: 720px; height: auto; display: block; margin: var(--e3) 0; }
.grafico-informe .barra-ingresos { fill: var(--acento); }
.grafico-informe .barra-gastos { fill: var(--suave); }
.grafico-informe .eje-informe { fill: var(--suave); font-size: 9px; }
.leyenda-ingresos { color: var(--acento); }
.leyenda-gastos { color: var(--suave); }