/* Planeación de Flujo — identidad Sago
   Marca: #173233 (verde profundo) · #5cb070 (verde) · #d5eb89 (lima)
          #cecece (gris) · #ffffff · #ff619e (rosa, acento)
   Tipografía: Neue Haas Grotesk (títulos y texto) + Times New Roman itálica (acentos) */
:root {
  color-scheme: light;

  /* --- colores de marca --- */
  --marca-oscuro: #173233;
  --marca-verde: #5cb070;
  --marca-lima: #d5eb89;
  --marca-gris: #cecece;
  --marca-rosa: #ff619e;

  /* --- superficies e ink --- */
  --plano: #f3f6ef;
  --superficie: #ffffff;
  --tinta: #173233;
  --tinta-2: #4a6163;
  --tinta-suave: #85999a;
  --linea: #e2e8dd;
  --eje: #c7d2c6;
  --borde: rgba(23, 50, 51, 0.14);

  /* --- acciones --- */
  --acento: #173233;
  --acento-oscuro: #0d2021;
  --acento-wash: #eaf4d5;
  --enlace: #2c7a4b;

  /* --- estados (semántica de datos) ---
     Tonos derivados de la marca y validados: separación mínima entre estados
     ΔE 22.5 en visión normal y 12.0 con daltonismo (umbral 8); contraste
     3.84:1 y 7.44:1 sobre blanco. El ámbar queda en 2.19:1 a propósito —para
     que se lea como advertencia— y por eso cada semana lleva SIEMPRE su
     etiqueta de texto y su cifra, nunca solo el color. */
  --bien: #419257;
  --bien-texto: #2c7a4b;
  --alerta: #e0a52e;
  --alerta-texto: #855400;
  --grave: #ec835a;
  --critico: #9e2b21;
  --bien-wash: rgba(65, 146, 87, 0.13);
  --alerta-wash: rgba(224, 165, 46, 0.18);
  --critico-wash: rgba(158, 43, 33, 0.10);

  /* --- armazón oscuro (barra + menú) --- */
  --shell: #173233;
  --shell-tinta: #eef4e6;
  --shell-suave: #9cb3a9;
  --shell-linea: rgba(213, 235, 137, 0.15);
  --shell-hover: rgba(213, 235, 137, 0.10);

  /* --- escala adaptable (pantallas 1920 / 2560 / 3840) ---
     Dos perillas: --u para el TEXTO y --e para el AIRE (paddings, huecos,
     anchos de columna). Todo lo demás se escribe como calc(N * var(--u)),
     así el número original sigue a la vista: 13.5 sigue diciendo 13.5.

     OJO, se mide contra el ancho CSS de la VENTANA, no contra los pixeles
     del monitor, y eso es lo correcto: un 4K con el escalado normal de
     macOS reporta 1920 px CSS —el texto ya se ve del tamaño debido— así que
     agrandarlo por sus 3840 físicos lo dejaría enorme. Por eso un 1920 y un
     4K en Retina dan el mismo resultado, y un 2560 sin escalar sí crece.
     Al ser clamp() y no escalones, una ventana a media pantalla cae en el
     punto que le toca en vez de saltar de golpe.
       ancho de ventana:   1400    1920    2560    3000+
       --u (texto):        1.00    1.08    1.18    1.25
       --e (aire):         1.00    1.16    1.36    1.50   */
  --u: clamp(1px, 0.0156vw + 0.781px, 1.25px);
  --e: clamp(1px, 0.0313vw + 0.563px, 1.5px);
  /* Tope del ancho de lectura: crece con la ventana pero no sin límite —
     pasados ~1900 px una tabla de 6 columnas solo separa la fecha del monto
     y obliga a barrer la vista de lado a lado. */
  --ancho-contenido: clamp(1180px, 84vw, 1900px);

  --radio: 10px;
  --sombra: 0 1px 2px rgba(23, 50, 51, 0.06), 0 6px 18px rgba(23, 50, 51, 0.05);
  --sans: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Text Pro", "Helvetica Neue",
          Helvetica, Inter, system-ui, -apple-system, Arial, sans-serif;
  --serif: "Times New Roman", Times, serif;
  font-family: var(--sans);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Columna de altura completa: así el menú oscuro llega hasta abajo sin
   depender de restarle a 100vh la altura de la barra, que ya no es un número
   fijo (crece con --e). */
body {
  background: var(--plano); color: var(--tinta);
  font-size: calc(14.5 * var(--u)); line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh;
}
h1 { font-size: calc(22 * var(--u)); margin: 0 0 4px; letter-spacing: -0.4px; font-weight: 700; }
h2 { font-size: calc(16 * var(--u)); margin: 26px 0 10px; letter-spacing: -0.2px; }
h3 { font-size: calc(14.5 * var(--u)); margin: 0 0 8px; letter-spacing: -0.1px; font-weight: 650; }
p { margin: 6px 0; }
a { color: var(--enlace); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--marca-oscuro); }
code { font-family: ui-monospace, Menlo, monospace; font-size: 0.92em; background: var(--plano);
  border: 1px solid var(--linea); border-radius: 5px; padding: 1px 5px; }
.acento-serif { font-family: var(--serif); font-style: italic; }

/* ---------- barra superior (oscura, marca) ---------- */
#barra {
  display: flex; align-items: center; gap: 14px;
  padding: calc(10 * var(--e)) calc(18 * var(--e)); background: var(--shell); color: var(--shell-tinta);
  position: sticky; top: 0; z-index: 20; flex: 0 0 auto;
}
#logo { display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--shell-tinta); font-weight: 650; font-size: calc(15.5 * var(--u)); letter-spacing: -0.2px; }
#logo:hover { color: var(--marca-lima); }
#barra-empresa { display: flex; align-items: center; gap: 10px; min-width: 0; }
#barra-hoy { margin-left: auto; color: var(--shell-suave); font-size: calc(13 * var(--u)); white-space: nowrap; }
.chip-empresa {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(213, 235, 137, 0.14); color: var(--marca-lima);
  border: 1px solid var(--shell-linea);
  padding: 4px 12px; border-radius: 99px; font-weight: 600; font-size: calc(13.5 * var(--u));
  max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.enlace-cambiar { font-size: calc(12.5 * var(--u)); color: var(--shell-suave); text-decoration: none; }
.enlace-cambiar:hover { color: var(--marca-lima); }

/* ---------- estructura ---------- */
#cuerpo { display: flex; flex: 1 1 auto; min-height: 0; }
#menu {
  width: calc(212 * var(--u)); flex: 0 0 auto; padding: calc(14 * var(--e)) calc(10 * var(--e));
  background: var(--shell); color: var(--shell-tinta);
}
#menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin: 2px 0; border-radius: 8px;
  color: var(--shell-tinta); text-decoration: none; font-weight: 500; font-size: calc(14 * var(--u));
  opacity: 0.86;
}
#menu a:hover { background: var(--shell-hover); opacity: 1; }
#menu a.activo {
  background: var(--marca-lima); color: var(--marca-oscuro); font-weight: 650; opacity: 1;
}
.icono-nav { flex: 0 0 auto; }
#menu .mini-saldo {
  margin: 16px 8px 4px; padding: 12px; border: 1px solid var(--shell-linea);
  border-radius: var(--radio); background: rgba(0, 0, 0, 0.16);
}
#menu .mini-saldo .etiqueta { font-size: calc(11.5 * var(--u)); color: var(--shell-suave); }
#menu .mini-saldo .valor { font-size: calc(17 * var(--u)); font-weight: 650; margin-top: 2px; color: var(--marca-lima);
  font-variant-numeric: tabular-nums; }
/* El ancho deseado va como flex-basis (no como max-width) para poder centrar
   con `margin-inline: auto`: en una pantalla muy ancha el contenido topa con
   su tope de lectura y lo que sobra se reparte a los dos lados, en vez de
   dejar un hueco muerto de 1600 px pegado a la derecha.
   OJO: los márgenes automáticos se comen el espacio libre ANTES que
   flex-grow, así que crecer y centrar a la vez no se puede — de ahí que el
   ancho viaje en la base y el crecimiento quede en 0. El `shrink: 1` con
   `min-width: 0` es lo que deja encoger cuando la ventana es más angosta. */
#contenido {
  flex: 0 1 var(--ancho-contenido); min-width: 0; margin-inline: auto;
  padding: calc(24 * var(--e)) calc(26 * var(--e)) calc(60 * var(--e));
}
.sub { color: var(--tinta-suave); font-size: calc(13 * var(--u)); }
/* La rueda es la única señal de que algo sigue ocurriendo: sin ella, un
   "Cargando…" quieto se lee igual que una pantalla colgada. */
.cargando { color: var(--tinta-suave); padding: 40px 0; text-align: center; }
.cargando::before {
  content: ""; display: block; width: 22px; height: 22px; margin: 0 auto 12px;
  border: 2.5px solid var(--linea); border-top-color: var(--marca-verde);
  border-radius: 50%; animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cargando::before { animation-duration: 2.4s; } }

/* ---------- tarjetas / tiles ---------- */
.fila-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(190 * var(--u)), 1fr));
  gap: calc(12 * var(--e)); margin: calc(14 * var(--e)) 0 6px;
}
.tile {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: calc(14 * var(--e)) calc(16 * var(--e)); box-shadow: var(--sombra);
}
.tile .etiqueta { font-size: calc(12.5 * var(--u)); color: var(--tinta-2); }
/* tabular-nums también aquí: las cifras de los tiles se leen en fila y con
   ancho variable los pesos y los centavos bailan de un tile a otro. */
.tile .valor { font-size: calc(25 * var(--u)); font-weight: 650; margin-top: 3px; letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums; }
.tile .detalle { font-size: calc(12.5 * var(--u)); color: var(--tinta-suave); margin-top: 3px; }
.tile.heroe { border-color: rgba(23, 50, 51, 0.22); }
.tile.heroe .valor { font-size: calc(31 * var(--u)); }
.valor.negativo, .monto-neg { color: var(--critico); }
.detalle .malo { color: var(--critico); font-weight: 600; }
.detalle .bueno { color: var(--bien-texto); }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: calc(16 * var(--e)) calc(18 * var(--e));
  box-shadow: var(--sombra); margin: calc(14 * var(--e)) 0;
}

/* ---------- botones ---------- */
button, .boton {
  font: inherit; font-family: var(--sans); font-size: calc(13.5 * var(--u)); font-weight: 600;
  border-radius: 8px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--tinta);
  padding: 7px 13px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
button:hover, .boton:hover { background: var(--plano); border-color: var(--eje); }
.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.primario:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); color: var(--marca-lima); }
.peligro { color: var(--critico); border-color: rgba(158, 43, 33, 0.38); }
.peligro:hover { background: var(--critico-wash); border-color: var(--critico); }
/* Acción en vuelo: la pone el manejador de clics de app.js mientras el botón
   está cerrado con llave, para que se vea que el toque sí se registró y que lo
   que falta es esperar — no volver a picarle. */
button[aria-busy="true"] { opacity: .55; cursor: progress; }

/* El dato de respaldo bajo el que de verdad se lee: la razón social bajo el
   nombre comercial, o el concepto bajo el folio. Va más chico y apretado porque
   en columnas angostas un texto largo se partía en cuatro renglones y estiraba
   toda la fila. */
.subrenglon {
  display: block; font-size: calc(11 * var(--u)); line-height: 1.2; font-weight: 400;
}
.mini { padding: 3px 9px; font-size: calc(12.5 * var(--u)); font-weight: 550; }
.fantasma { border-color: transparent; background: transparent; color: var(--enlace); }
.fantasma:hover { background: var(--acento-wash); border-color: transparent; }
.barra-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.separador-flex { flex: 1; }

.segmentos { display: inline-flex; border: 1px solid var(--linea); border-radius: 9px; overflow: hidden; background: var(--superficie); }
.segmentos button { border: 0; border-radius: 0; font-weight: 550; color: var(--tinta-2); }
.segmentos button + button { border-left: 1px solid var(--linea); }
.segmentos button.activo { background: var(--marca-lima); color: var(--marca-oscuro); font-weight: 650; }

/* Rango de fechas de las bandejas (Facturas SAT y Banco). */
.rango-fechas { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-2); }
.rango-fechas input { padding: 6px 8px; }

select, input, textarea {
  font: inherit; font-family: var(--sans); font-size: calc(13.5 * var(--u)); color: var(--tinta);
  border: 1px solid var(--eje); border-radius: 8px; padding: 7px 10px; background: #fff;
}
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--marca-verde); outline-offset: 1px; border-color: var(--marca-verde);
}
label { display: block; font-size: calc(12.5 * var(--u)); color: var(--tinta-2); font-weight: 550; margin: 10px 0 4px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.campos .ancho { grid-column: 1 / -1; }

/* ---------- combo: elegir de lo ya capturado, o escribir uno nuevo ---------- */
.combo { position: relative; display: block; }
.combo > input { width: 100%; padding-right: 30px; }
.combo-flecha {
  position: absolute; top: 0; right: 0; height: 100%; width: 28px;
  padding: 0; justify-content: center; font-size: calc(11 * var(--u)); line-height: 1;
  border: 0; background: transparent; color: var(--tinta-suave);
}
.combo-flecha:hover { background: transparent; color: var(--tinta); }
.combo-panel {
  position: absolute; z-index: 40; top: calc(100% + 3px); left: 0; right: 0;
  max-height: 220px; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--eje);
  border-radius: 8px; box-shadow: 0 10px 26px rgba(23, 50, 51, 0.16);
  padding: 4px;
}
.combo.arriba .combo-panel { top: auto; bottom: calc(100% + 3px); }
.combo-opcion {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  width: 100%; text-align: left; font-weight: 500; border: 0; background: transparent;
  padding: 6px 8px; border-radius: 6px;
}
.combo-opcion:hover, .combo-opcion.activa { background: var(--acento-wash); border: 0; }
.combo-opcion > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-opcion .texto-suave { font-size: calc(11.5 * var(--u)); white-space: nowrap; }
.combo-nuevo { color: var(--enlace); font-weight: 600; }
.combo-vacio { padding: 7px 8px; font-size: calc(12.5 * var(--u)); color: var(--tinta-suave); }
.combo-nota { font-size: calc(11.5 * var(--u)); color: var(--alerta-texto); margin-top: 3px; }
.combo-nota button { font-size: calc(11.5 * var(--u)); padding: 1px 5px; vertical-align: baseline; }

/* ---------- tablas ---------- */
table { border-collapse: collapse; width: 100%; font-size: calc(13.5 * var(--u)); }
th {
  text-align: left; font-size: calc(11.5 * var(--u)); font-weight: 650; color: var(--tinta-suave);
  padding: calc(8 * var(--e)) calc(10 * var(--e)); border-bottom: 1px solid var(--linea); white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.4px;
}
/* El aire de la celda va con --e, que crece más rápido que el texto: es lo
   que quita la sensación de apretado cuando sobra pantalla. */
td { padding: calc(8 * var(--e)) calc(10 * var(--e)); border-bottom: 1px solid var(--linea); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:hover { background: var(--plano); }
.tabla-envoltura { overflow-x: auto; }
.fila-error { background: var(--critico-wash); }
.fila-error:hover { background: var(--critico-wash); }
.texto-suave { color: var(--tinta-suave); }
.texto-2 { color: var(--tinta-2); }
.tachado { text-decoration: line-through; color: var(--tinta-suave); }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: calc(11.5 * var(--u)); font-weight: 600; padding: 2px 9px; border-radius: 99px;
  border: 1px solid var(--borde); color: var(--tinta-2); white-space: nowrap;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-suave); }
.chip.alta::before, .chip.confirmado::before, .chip.ok::before { background: var(--bien); }
.chip.media::before, .chip.estimado::before, .chip.ajustado::before { background: var(--alerta); }
.chip.baja::before, .chip.negativo::before { background: var(--critico); }
.chip.critico { background: var(--marca-oscuro); color: var(--marca-lima); border-color: var(--marca-oscuro); }
.chip.critico::before { background: var(--marca-lima); }
.chip.importante::before { background: var(--marca-verde); }
.chip.flexible::before { background: var(--marca-gris); }
.chip.vencida { background: var(--critico-wash); color: var(--critico); border-color: rgba(158, 43, 33, 0.3); }
.chip.vencida::before { background: var(--critico); }
.chip.aplazado { background: var(--alerta-wash); color: var(--alerta-texto); border-color: rgba(224, 165, 46, 0.45); }
.chip.aplazado::before { background: var(--alerta); }
.chip.inicial { background: var(--acento-wash); color: var(--marca-oscuro); border-color: rgba(23, 50, 51, 0.2); }
.chip.inicial::before { background: var(--marca-oscuro); }
.chip.credito { background: var(--acento-wash); color: var(--marca-oscuro); border-color: rgba(23, 50, 51, 0.18); }
.chip.credito::before { background: var(--marca-oscuro); }
.chip.planeado::before { background: var(--marca-verde); }
.chip.realizado::before { background: var(--bien); }

/* medidor de uso de línea */
.meter {
  position: relative; display: inline-block; vertical-align: middle;
  width: 120px; height: 8px; border-radius: 5px; background: var(--acento-wash); overflow: hidden;
}
.meter > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--marca-verde); }
.meter.ambar > i { background: var(--alerta); }
.meter.rojo > i { background: var(--critico); }

/* ---------- semana (flujo) ---------- */
.semana { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); margin: 10px 0; overflow: hidden; box-shadow: var(--sombra); }
.semana > summary {
  list-style: none; cursor: pointer; display: grid;
  grid-template-columns: calc(26 * var(--u)) minmax(calc(150 * var(--u)), 1.4fr)
                         repeat(3, minmax(calc(120 * var(--u)), 1fr)) calc(130 * var(--u));
  gap: calc(8 * var(--e)); align-items: center; padding: calc(10 * var(--e)) calc(14 * var(--e));
}
.semana > summary::-webkit-details-marker { display: none; }
.semana > summary:hover { background: var(--plano); }
.semana .flecha { color: var(--tinta-suave); font-size: calc(11 * var(--u)); transition: transform 0.15s; }
.semana[open] .flecha { transform: rotate(90deg); }
.semana .rotulo { font-weight: 650; }
.semana .rotulo .sub { font-weight: 400; }
.semana .cifra { text-align: right; font-variant-numeric: tabular-nums; }
.semana .cifra .etiqueta { display: block; font-size: calc(11 * var(--u)); color: var(--tinta-suave); font-weight: 500; }
.semana.estado-negativo { border-left: 4px solid var(--critico); }
.semana.estado-ajustado { border-left: 4px solid var(--alerta); }
.semana.estado-ok { border-left: 4px solid var(--marca-verde); }
.semana .interior { border-top: 1px solid var(--linea); padding: calc(10 * var(--e)) calc(14 * var(--e)) calc(14 * var(--e)); background: #fff; }
.semana .interior h4 { font-size: calc(11.5 * var(--u)); color: var(--tinta-suave); margin: 12px 0 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.semana .interior h4:first-child { margin-top: 2px; }
.actual-marca { font-size: calc(11 * var(--u)); color: var(--marca-oscuro); background: var(--marca-lima); border-radius: 5px; padding: 1px 7px; font-weight: 650; margin-left: 8px; }

/* ---------- gráfica ---------- */
.grafica-envoltura { overflow-x: auto; padding: 4px 0 2px; }
.grafica-leyenda { display: flex; gap: 16px; font-size: calc(12 * var(--u)); color: var(--tinta-2); margin-top: 6px; flex-wrap: wrap; }
.grafica-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
#tooltip {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--marca-oscuro); color: var(--shell-tinta); border-radius: 8px;
  padding: 8px 11px; font-size: calc(12.5 * var(--u)); line-height: 1.5; max-width: 260px;
  box-shadow: 0 6px 20px rgba(23, 50, 51, 0.3);
}
#tooltip .t-titulo { font-weight: 650; color: var(--marca-lima); margin-bottom: 2px; }
#tooltip .t-fila { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; }

/* ---------- inicio ---------- */
.rejilla-empresas { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(290 * var(--u)), 1fr)); gap: calc(14 * var(--e)); margin-top: 16px; }
.tarjeta-empresa {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 16px; box-shadow: var(--sombra); cursor: pointer; display: block; text-decoration: none; color: var(--tinta);
}
.tarjeta-empresa:hover { border-color: var(--marca-verde); box-shadow: 0 2px 4px rgba(23,50,51,0.08), 0 10px 24px rgba(23,50,51,0.08); }
.tarjeta-empresa h3 { font-size: calc(15 * var(--u)); margin-bottom: 8px; }
.tarjeta-empresa .linea-dato { display: flex; justify-content: space-between; font-size: calc(13 * var(--u)); padding: 3px 0; color: var(--tinta-2); }
.tarjeta-empresa .linea-dato b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tinta); }
.banda-alerta {
  margin-top: 10px; font-size: calc(12.5 * var(--u)); font-weight: 600;
  padding: 5px 10px; border-radius: 7px; display: flex; align-items: center; gap: 7px;
}
.banda-alerta.roja { background: var(--critico-wash); color: var(--critico); }
.banda-alerta.ambar { background: var(--alerta-wash); color: var(--alerta-texto); }
.banda-alerta.verde { background: var(--bien-wash); color: var(--bien-texto); }

/* ---------- alertas panel ---------- */
.lista-alertas { list-style: none; padding: 0; margin: 0; }
.lista-alertas li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.lista-alertas li:last-child { border-bottom: 0; }
.icono-alerta { flex: 0 0 auto; color: var(--tinta-suave); display: inline-flex; align-items: center; padding-top: 1px; }
.icono-alerta.critico { color: var(--critico); }
.icono-alerta.alerta { color: var(--alerta-texto); }

/* ---------- modal ---------- */
dialog {
  border: 0; border-radius: 14px; padding: 0;
  width: calc(560 * var(--u)); max-width: min(calc(640 * var(--u)), 92vw);
  box-shadow: 0 24px 60px rgba(23, 50, 51, 0.28); background: var(--superficie); color: var(--tinta);
}
dialog::backdrop { background: rgba(23, 50, 51, 0.42); }
/* Para los modales que muestran una tabla (amortización): con 560px las
   columnas quedan ilegibles y el área de pegado no cabe. */
dialog.ancho { width: min(calc(1040 * var(--u)), 94vw); max-width: min(calc(1040 * var(--u)), 94vw); }
.modal-cuerpo { padding: calc(20 * var(--e)) calc(22 * var(--e)); max-height: 82vh; overflow-y: auto; }
.modal-cuerpo h3 { font-size: calc(16.5 * var(--u)); margin-bottom: 4px; }
.modal-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.aviso-nota {
  font-size: calc(12.5 * var(--u)); color: var(--tinta-2); background: var(--plano);
  border: 1px solid var(--linea); border-left: 3px solid var(--marca-lima);
  border-radius: 8px; padding: 8px 11px; margin-top: 10px;
}

/* .banda-alerta nació para un renglón corto y es flex: cada hijo se vuelve una
   columna. Con .parrafo se le mete un solo hijo y el texto fluye como prosa,
   sin tocar el resto de pantallas que ya la usan de una línea. */
.banda-alerta.parrafo { align-items: flex-start; font-weight: 400; padding: 10px 13px; line-height: 1.5; }

/* ---------- carpetas de empresas y modo presentación ----------
   La carpeta solo agrupa visualmente; el candado entre clientes es la
   membresía por empresa (RLS). La banda de presentación va FIJA abajo a
   propósito: si se pudiera perder de vista al hacer scroll, se olvidaría
   encendida, que es justo el descuido que viene a evitar. */
.carpeta { margin-top: calc(26 * var(--e)); }
.carpeta:first-of-type { margin-top: calc(10 * var(--e)); }
.carpeta-cabeza {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: 6px; border-bottom: 1px solid var(--linea);
}
.carpeta-cabeza h2 { font-size: calc(15 * var(--u)); margin: 0; }
.carpeta-cuenta { font-size: calc(12 * var(--u)); color: var(--tinta-suave); }
.carpeta-cabeza button { margin-left: auto; }
.carpeta .rejilla-empresas { margin-top: calc(12 * var(--e)); }

#banda-presentacion {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: calc(8 * var(--e)) calc(16 * var(--e));
  background: var(--marca-lima); color: var(--marca-oscuro);
  font-size: calc(13 * var(--u)); font-weight: 600;
  box-shadow: 0 -2px 10px rgba(23, 50, 51, 0.14);
}
#banda-presentacion.fuera { background: var(--critico); color: #fff; }
#banda-presentacion button { background: transparent; border: 1px solid currentColor; color: inherit; }
#banda-presentacion button:hover { background: rgba(255, 255, 255, 0.35); }
body.presentando #cuerpo { padding-bottom: calc(46 * var(--e)); }
body.presentando #toasts { bottom: calc(58 * var(--e)); }
.banda-alerta.parrafo b { font-weight: 600; }

/* ---------- IVA ---------- */
/* La cifra del próximo entero es lo único que se busca al abrir la pantalla:
   se lee antes que el título. */
.cifra-grande {
  font-size: calc(34 * var(--u)); font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1; margin: 6px 0 4px;
}
/* Las dos mitades de la tabla responden preguntas distintas —lo que verá el SAT
   y lo que dice el flujo—, así que se separan con una regla visible en lugar de
   confiar en que el encabezado agrupado se entienda solo. */
th.grupo-sat, th.grupo-flujo {
  text-align: left; font-size: calc(11 * var(--u)); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinta-2);
}
th.grupo-sat { border-bottom: 2px solid var(--marca-oscuro); }
th.grupo-flujo { border-bottom: 2px solid var(--marca-gris); }
tr.fila-resaltada { background: var(--acento-wash); }
.detalle-mes { border-top: 1px solid var(--linea); padding: 10px 0; }
.detalle-mes:first-of-type { border-top: none; }
.detalle-mes > summary {
  cursor: pointer; padding: 4px 2px; font-size: calc(13.5 * var(--u));
  color: var(--tinta-2); border-radius: 6px;
}
.detalle-mes > summary:hover { color: var(--tinta); }
.detalle-mes > summary:focus-visible { outline: 2px solid var(--marca-verde); outline-offset: 2px; }
.detalle-mes[open] > summary { margin-bottom: 8px; }
.lista-avisos { list-style: none; display: grid; gap: 7px; }
.lista-avisos li {
  font-size: calc(13 * var(--u)); color: var(--tinta-2); background: var(--plano);
  border: 1px solid var(--linea); border-left: 3px solid var(--alerta);
  border-radius: 8px; padding: 8px 11px;
}

/* ---------- toasts ---------- */
#toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast {
  background: var(--marca-oscuro); color: var(--shell-tinta); border-radius: 9px; padding: 10px 15px;
  font-size: calc(13.5 * var(--u)); box-shadow: 0 8px 24px rgba(23, 50, 51, 0.3); max-width: 340px;
  border-left: 3px solid var(--marca-lima);
}
.toast.error { background: var(--critico); border-left-color: #7d1e18; color: #fff; }

/* ---------- importar ---------- */
.zonas-importar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.zona {
  border: 1.5px dashed var(--eje); border-radius: var(--radio); padding: 18px; text-align: center;
  background: var(--superficie); color: var(--tinta-2);
}
.zona.activa { border-color: var(--marca-verde); background: var(--acento-wash); }
textarea.pegar { width: 100%; min-height: 120px; font-family: ui-monospace, Menlo, monospace; font-size: calc(12 * var(--u)); }
.insignia-num { font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- entrada (modo nube) ---------- */
#velo-sesion, #velo-mfa {
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  background-color: var(--marca-oscuro);
  /* Patrón de marca: la «S» encadenada en diagonal, igual que la pág. 9 del
     manual. Lo genera `python3 marca/patron_a_css.py` — el color va incrustado
     porque un SVG dentro de un background-image no lo hereda por CSS. El SVG
     cubre el área y el <pattern> repite por dentro, así que NO lleva repeat. */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cg id='s' fill='none' stroke='%23d5eb89' stroke-width='1.6' stroke-opacity='.18' transform='skewX(4.26) rotate(-39.02) scale(0.83)'%3E%3Cpath d='M 147.8 158.8 C 147.3 162.1 146.8 165 146.3 167.6 C 145.2 167.7 144.3 167.8 143.5 167.8 L 141.5 167.8 C 84.2 167.8 70.9 141.8 52.5 141.8 C 50.1 141.8 47.6 142.3 45.1 143.4 C 43.3 144.1 41.2 145.4 38.8 147.2 L 38.8 147.1 L 38.2 146.6 L 86.7 96.3 C 87.4 96.1 88.3 95.9 89.3 95.7 C 91.1 95.4 92.7 95.2 94.2 95.2 C 103.9 95.2 112.2 96.6 119 99.4 C 125.9 102.1 131.5 105.9 135.9 110.8 C 140.3 115.6 143.5 121.3 145.5 127.8 C 147.5 134.2 148.5 141.2 148.5 148.6 C 148.5 152.2 148.3 155.6 147.8 158.8 M 53.7 33.2 C 55 32.5 56.6 32.1 58.6 31.7 C 60.5 31.4 63.1 31.3 66.3 31.3 C 87.4 31.3 107.1 41.4 121.3 41.4 C 126.9 41.4 132.6 39 137.2 36.3 L 137.8 36.9 L 80.6 96.2 C 76.5 92.4 72.7 88.2 69.2 83.7 C 65.7 79.1 62.6 74.5 59.9 70 C 57.2 65.5 55.2 61.2 53.7 57.1 C 52.3 52.9 51.5 49.3 51.5 46.3 C 51.5 41 52.3 36.6 53.7 33.2 M 181.3 95.8 C 178.8 89.4 175.2 83.8 170.5 79 C 165.8 74.3 160.2 70.5 153.5 67.7 C 146.9 65 139.5 63.6 131.3 63.6 C 124.2 63.6 119 63.9 115.6 64.5 L 115.6 64.5 L 175.8 1 L 174.7 0 C 172.3 1.8 170.2 3.3 168.2 4.3 C 166 5.6 163.9 6.4 161.9 6.9 C 160 7.4 157.9 7.7 155.8 7.7 C 136.4 7.7 119.4 0.5 100.2 0.5 C 97.8 0.5 95.7 0.8 93.9 1.3 C 92.2 1.8 90.5 2.4 88.7 3.2 C 87.2 3.9 85.5 4.8 83.6 5.9 C 81.7 7.1 79.6 8.8 77.1 11.1 C 72.5 15 67.6 19.3 62.4 24 C 57.1 28.7 51.2 34 44.6 40.1 C 37.3 47 31.8 54.1 28.3 61.5 C 24.8 68.9 23 76.5 23 84.4 C 23 88.8 23.4 93 24.2 97 C 25.1 101 26.5 104.9 28.4 108.7 C 30.4 112.5 33 116.2 36.2 120 C 39.3 123.7 43.2 127.6 47.8 131.6 L 26.1 154.2 L 1.6 179 L 0 180.6 L 1.1 181.6 C 4.8 178.5 9.4 175.6 14.1 175.6 C 38.8 175.6 51.7 200 99.3 200 C 101.8 200 103.8 199.9 105.5 199.8 C 107.1 199.6 108.6 199.2 110 198.6 C 111.4 198.1 112.9 197.3 114.3 196.2 C 115.8 195.1 117.6 193.7 119.7 191.9 L 132.5 180.7 C 137.1 176.7 141.7 172.8 146.3 169 C 151.2 164.8 156.1 160.6 161 156.5 C 166 152.4 170.4 148.6 174.3 145.2 C 178.3 141.6 181 137.5 182.7 133 C 184.3 128.5 185.1 122.8 185.1 115.9 C 185.1 108.9 183.9 102.2 181.3 95.8'/%3E%3C/g%3E%3Cpattern id='p' width='137.86' height='206.99' patternUnits='userSpaceOnUse' patternTransform='rotate(39.02) skewX(-4.26)'%3E%3Cuse href='%23s' x='-137.86' y='-206.99'/%3E%3Cuse href='%23s' x='-137.86' y='0'/%3E%3Cuse href='%23s' x='-137.86' y='206.99'/%3E%3Cuse href='%23s' x='0' y='-206.99'/%3E%3Cuse href='%23s' x='0' y='0'/%3E%3Cuse href='%23s' x='0' y='206.99'/%3E%3Cuse href='%23s' x='137.86' y='-206.99'/%3E%3Cuse href='%23s' x='137.86' y='0'/%3E%3Cuse href='%23s' x='137.86' y='206.99'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23p)'/%3E%3C/svg%3E");
}
.caja-sesion {
  background: var(--superficie); border-radius: 16px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34); padding: 32px 34px; width: min(410px, 92vw);
  /* El alta del segundo factor lleva QR, clave de respaldo y advertencias: en
     una laptop de pantalla corta no cabe, y sin esto el botón de "Activar"
     quedaba fuera del área visible y sin manera de llegar a él. */
  max-height: 92vh; overflow-y: auto;
}
/* Por encima del velo de entrada: si ambos coincidieran, el de 2FA es el que
   tiene algo que pedir. */
#velo-mfa { z-index: 600; }
.caja-sesion p { font-size: calc(13.5 * var(--u)); line-height: 1.5; margin: 0 0 8px; }
.caja-sesion img { max-width: 100%; }
.caja-sesion .marca-sesion { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.caja-sesion h2 { margin: 0; font-size: calc(20 * var(--u)); letter-spacing: -0.4px; }
.caja-sesion .lema { color: var(--tinta-suave); font-size: calc(13 * var(--u)); margin: 0 0 18px; }
.caja-sesion input { width: 100%; }
.error-sesion { color: var(--critico); font-size: calc(13 * var(--u)); min-height: 18px; margin-top: 8px; }

/* ---------- responsivo / impresión ---------- */
@media (max-width: 860px) {
  #menu { display: none; }
  .campos { grid-template-columns: 1fr; }
  .zonas-importar { grid-template-columns: 1fr; }
}
@media print {
  /* En papel la escala de pantalla no aplica: las medidas vuelven a ser las
     que dice el número. */
  :root { --u: 1px; --e: 1px; --ancho-contenido: none; }
  #barra, #menu, .barra-acciones, button, .boton, #toasts, #banda-presentacion { display: none !important; }
  #contenido { padding: 0; max-width: none; }
  body { background: #fff; font-size: calc(12 * var(--u)); }
  .tarjeta, .semana, .tile { box-shadow: none; break-inside: avoid; }
  .solo-impresion { display: block !important; }
}
.solo-impresion { display: none; font-size: calc(12 * var(--u)); color: var(--tinta-2); margin-bottom: 10px; }

/* ---------- Conexiones (bancos y SAT vía Syncfy) ---------- */
.conexion-fila {
  display: flex; align-items: center; gap: calc(14 * var(--e));
  padding: calc(12 * var(--e)) 4px; border-bottom: 1px solid var(--linea);
}
.conexion-fila:last-child { border-bottom: 0; }
.conexion-icono {
  width: calc(38 * var(--e)); height: calc(38 * var(--e)); border-radius: 9px;
  background: var(--acento-wash); display: flex; align-items: center; justify-content: center;
  font-size: calc(18 * var(--u)); flex: 0 0 auto;
}
.conexion-icono.fiscal { background: rgba(213, 235, 137, 0.45); }
.conexion-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.conexion-datos .sub { margin: 0; }
.conexion-sync { flex: 0 0 auto; text-align: right; font-size: calc(12.5 * var(--u)); }
.conexion-acciones { display: flex; gap: 8px; flex: 0 0 auto; }
@media (max-width: 860px) {
  .conexion-fila { flex-wrap: wrap; }
  .conexion-sync { text-align: left; }
}