/*
 * CRM valco-latam · hoja única de las maquetas
 *
 * Herramienta de trabajo, no sitio de marketing: densa, sobria, sin animación
 * decorativa. El verde de VAL-CO (#008061, medido en docs/SISTEMA-VISUAL.md)
 * entra SOLO como acento —acción primaria, pestaña activa, marca— y nunca como
 * fondo de pantalla completa.
 *
 * Tipografía del sistema a propósito: el sitio usa Montserrat/Hind, que son
 * fuentes de marca para leer despacio. Esto se abre 40 veces al día en un
 * teléfono y tiene que pintar sin esperar una descarga.
 *
 * Móvil primero: todo lo de abajo es la base; los @media suben a escritorio.
 */

/* ------------------------------------------------------------------ tokens */
:root {
  --verde: #008061;
  --verde-osc: #006148;
  --verde-tenue: #e6f2ee;
  --mostaza: #f3cf1e;

  --tinta: #1c1b1a;
  --tinta-2: #55524e;
  --tinta-3: #7b776f;
  --papel: #f5f5f3;
  --caja: #ffffff;
  --linea: #e3e1dc;
  --linea-fuerte: #c9c6bf;

  /* Semáforo. El color NUNCA va solo: siempre lleva palabra o glifo. */
  --rojo: #b3261e;
  --rojo-tenue: #fbeae9;
  --ambar: #8a5300;
  --ambar-tenue: #fdf2e0;
  --bien: #006148;
  --bien-tenue: #e6f2ee;
  --frio: #4a5b66;
  --frio-tenue: #eef1f3;

  /* Escala única de espacio: 4 8 12 16 24 32 48. Nada a 13px. */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;

  --radio: 6px;
  --radio-chip: 999px;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.06);

  --texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --barra-alto: 52px;
  --nav-alto: 58px;
}

/* --------------------------------------------------------------- cimientos */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 15px/1.5 var(--texto);
  padding-bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom, 0px));
}

a { color: var(--verde-osc); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--verde-osc);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 700; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
p { margin: 0 0 var(--e3); }

.crece { flex: 1; min-width: 0; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 0.92em; }
.der { text-align: right; }
.apagado { color: var(--tinta-3); }
.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------------- barra */
.barra {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--e3);
  height: var(--barra-alto);
  padding: 0 var(--e4);
  background: var(--caja);
  border-bottom: 1px solid var(--linea);
}

.marca {
  display: flex; align-items: baseline; gap: var(--e2);
  font-weight: 700; letter-spacing: .01em; text-decoration: none; color: var(--tinta);
  white-space: nowrap;
}
.marca b { color: var(--verde); }
.marca span { font-size: 11px; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; }

.barra .buscar { flex: 1; min-width: 0; }
.barra input[type="search"] {
  width: 100%; height: 36px;
  padding: 0 var(--e3);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  background: var(--caja); font: inherit; font-size: 14px;
}

/* Idioma (24-sep): el sistema nace bilingüe —español hoy, inglés por default
 * después—. Selector segmentado, alto táctil, el activo en verde tenue. */
.idioma { display: flex; flex-shrink: 0; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); overflow: hidden; }
.idioma a {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 34px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-decoration: none; color: var(--tinta-2);
}
.idioma a + a { border-left: 1px solid var(--linea-fuerte); }
.idioma a[aria-current="true"] { background: var(--verde-tenue); color: var(--verde-osc); }

/* Lo que solo se ve en inglés: la nota de que los borradores y las notas de
 * diseño siguen en español, y el aviso de pantalla sin diccionario. */
.borrador-nota, .nota-en { display: none; margin: var(--e1) 0 0; font-size: 12px; color: var(--tinta-3); font-style: italic; }
body.en .borrador-nota, body.en .nota-en { display: block; }
.aviso-idioma {
  margin: 0; padding: var(--e2) var(--e4);
  background: var(--ambar-tenue); color: var(--ambar); font-size: 13px;
  border-bottom: 1px solid #f0dcb4;
}

/* Navegación de escritorio: 6 destinos, el máximo que se lee de un vistazo. */
.nav-esc { display: none; }

/* -------------------------------------------------------- nav de móvil */
.nav-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex;
  height: calc(var(--nav-alto) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--caja);
  border-top: 1px solid var(--linea);
}
.nav-movil a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-height: 44px;
  font-size: 11px; font-weight: 600; text-decoration: none; color: var(--tinta-2);
}
.nav-movil a .g { font-size: 17px; line-height: 1; }
.nav-movil a[aria-current="page"] { color: var(--verde-osc); }
.nav-movil a[aria-current="page"] .g {
  background: var(--verde-tenue); border-radius: var(--radio-chip);
  padding: 2px 10px;
}

/* ------------------------------------------------------------------- lienzo */
.lienzo { max-width: 1200px; margin: 0 auto; padding: var(--e4) var(--e4) var(--e7); }

.cabecera-pagina { margin-bottom: var(--e4); }
.cabecera-pagina .migas {
  font-size: 12px; color: var(--tinta-3); margin-bottom: var(--e2);
}
.cabecera-pagina .migas a { color: var(--tinta-2); }
.cabecera-pagina .sub { margin: var(--e1) 0 0; font-size: 13px; color: var(--tinta-2); }
.frescura { font-size: 12px; color: var(--tinta-3); }

/* ------------------------------------------------------------------- panel */
.panel {
  background: var(--caja);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  margin-bottom: var(--e4);
}
.panel > header {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linea);
}
.panel > header .crece { flex: 1; }
.panel .cuerpo { padding: var(--e4); }
.panel .cuerpo.pegado { padding: 0; }

/* ------------------------------------------------------------------ chips */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border-radius: var(--radio-chip);
  font-size: 12px; font-weight: 600; line-height: 1.6;
  white-space: nowrap;
  background: var(--frio-tenue); color: var(--frio);
}
.chip.rojo  { background: var(--rojo-tenue);  color: var(--rojo); }
.chip.ambar { background: var(--ambar-tenue); color: var(--ambar); }
.chip.bien  { background: var(--bien-tenue);  color: var(--bien); }
.chip.gris  { background: #eeece8; color: var(--tinta-2); }
.chip .g { font-size: 11px; }

/* --------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 var(--e4);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  background: var(--caja); color: var(--tinta);
  font: 600 14px/1 var(--texto); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--papel); }
.btn.primario {
  background: var(--verde); border-color: var(--verde); color: #fff;
}
.btn.primario:hover { background: var(--verde-osc); border-color: var(--verde-osc); }
.btn.chico { min-height: 32px; padding: 0 var(--e3); font-size: 13px; }
.btn.peligro { color: var(--rojo); border-color: #e7c7c4; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* --------------------------------------------------------------- métricas */
.metricas { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e3); }
.metrica {
  background: var(--caja); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: var(--e3) var(--e4);
}
.metrica .rot {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-3); display: block; margin-bottom: var(--e1);
}
.metrica .cifra { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.metrica .pie { font-size: 12px; color: var(--tinta-2); display: block; margin-top: var(--e1); }
.metrica.alarma { border-left: 3px solid var(--rojo); }
.metrica.aviso  { border-left: 3px solid var(--ambar); }

/* Barra de pronóstico: tres tramos, cada uno con su etiqueta escrita. */
.barra-pron { display: flex; height: 14px; border-radius: 3px; overflow: hidden; background: #eeece8; }
.barra-pron i { display: block; }
.barra-pron .cerrado { background: var(--verde); }
.barra-pron .compro  { background: #7fbfab; }
.barra-pron .pondera { background: #cfe3db; }
.leyenda { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e2); font-size: 12px; }
.leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ----------------------------------------------------------------- tablas */
/*
 * En móvil una tabla no es tabla: cada fila se vuelve tarjeta y cada celda
 * lleva su rótulo en `data-col`. Cero scroll horizontal, que en herramienta
 * operativa es anti-patrón.
 */
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla thead { display: none; }
.tabla tbody tr {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--e3);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linea);
}
.tabla tbody tr:last-child { border-bottom: 0; }
.tabla td { padding: 0; }
.tabla td::before {
  content: attr(data-col) " · ";
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--tinta-3);
}
.tabla td.principal { grid-column: 1 / -1; font-weight: 600; }
.tabla td.principal::before { content: none; }
.tabla td.acciones-celda { grid-column: 1 / -1; margin-top: var(--e2); }
.tabla td.acciones-celda::before { content: none; }
.tabla tbody tr:nth-child(even) { background: #fbfbfa; }

/* ------------------------------------------------------------------ casos */
/*
 * El caso colapsado. `details/summary` nativo: teclado y lector de pantalla
 * gratis, cero JavaScript, y el estado abierto/cerrado lo administra el
 * navegador. Es lo contrario del scroll infinito de SICC, donde cada caso
 * venía con su correo completo desplegado.
 */
.caso {
  background: var(--caja);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--linea-fuerte);
  border-radius: var(--radio);
  margin-bottom: var(--e2);
}
.caso.rojo  { border-left-color: var(--rojo); }
.caso.ambar { border-left-color: var(--ambar); }
.caso.bien  { border-left-color: var(--bien); }
/*
 * El renglón cerrado. Tres renglones en móvil (estado+reloj / título / dónde) y
 * dos en escritorio. Las posiciones son explícitas a propósito: con colocación
 * automática, un `dónde` largo aplasta al título, que es justo el dato que se
 * lee primero.
 */
.caso > summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--e1) var(--e3);
  align-items: center;
  padding: var(--e3) var(--e4);
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.caso > summary > .flecha { grid-area: 1 / 1 / 4 / 2; align-self: start; padding-top: 3px; }
.caso > summary > .chip   { grid-column: 2; grid-row: 1; justify-self: start; }
.caso > summary > .titulo { grid-column: 2 / -1; grid-row: 2; }
.caso > summary > .donde  { grid-column: 2 / -1; grid-row: 3; }
.caso > summary > .tiempo { grid-column: 3; grid-row: 1; justify-self: end; }
.caso > summary::-webkit-details-marker { display: none; }
.caso > summary .flecha {
  width: 18px; text-align: center; color: var(--tinta-3); font-size: 12px;
}
.caso[open] > summary .flecha::before { content: "▾"; }
.caso:not([open]) > summary .flecha::before { content: "▸"; }
.caso .titulo { font-weight: 600; }
.caso .donde { font-size: 12.5px; color: var(--tinta-2); }
.caso .tiempo { font-size: 12px; color: var(--tinta-3); white-space: nowrap; }
.caso .detalle { padding: 0 var(--e4) var(--e4); border-top: 1px solid var(--linea); }
.caso .porque {
  background: var(--papel); border-radius: var(--radio);
  padding: var(--e3); margin: var(--e3) 0; font-size: 13.5px;
}
.caso .porque b { display: block; margin-bottom: var(--e1); }
.caso .borrador {
  border: 1px dashed var(--linea-fuerte); border-radius: var(--radio);
  padding: var(--e3); margin-bottom: var(--e3);
  font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap;
  color: var(--tinta-2);
}

/* --------------------------------------------------------------- listados */
.lista-cuentas { list-style: none; margin: 0; padding: 0; }
.lista-cuentas > li { border-bottom: 1px solid var(--linea); }
.lista-cuentas > li:last-child { border-bottom: 0; }
.cuenta {
  display: grid; grid-template-columns: 1fr auto; gap: var(--e1) var(--e3);
  padding: var(--e3) var(--e4);
  text-decoration: none; color: inherit;
  min-height: 44px; align-items: center;
}
.cuenta:hover { background: #fbfbfa; }
.cuenta .nom { font-weight: 600; }
.cuenta .meta { grid-column: 1 / -1; font-size: 12.5px; color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: var(--e3); }
.cuenta .cifra { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------------- filtros */
.filtros { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.filtros .vista {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 var(--e3);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chip);
  background: var(--caja); color: var(--tinta-2);
  font: 600 13px/1 var(--texto); text-decoration: none; cursor: pointer;
}
.filtros .vista[aria-pressed="true"],
.filtros .vista[aria-current="true"] {
  background: var(--verde-tenue); border-color: #9ec9bb; color: var(--verde-osc);
}
.filtro-activo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e4);
  background: var(--verde-tenue); border-bottom: 1px solid #cfe3db;
  font-size: 13px;
}

/* Pestañas de los dos monitores. */
.pestanas { display: flex; gap: var(--e1); border-bottom: 1px solid var(--linea); }
.pestanas a {
  padding: var(--e3) var(--e4); text-decoration: none; color: var(--tinta-2);
  font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent;
  min-height: 44px; display: flex; align-items: center;
}
.pestanas a[aria-current="page"] { color: var(--verde-osc); border-bottom-color: var(--verde); }

/* ------------------------------------------------------------- archivos */
.archivos { list-style: none; margin: 0; padding: 0; }
.archivos li {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--e1) var(--e3);
  align-items: center;
  padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linea);
}
.archivos li:last-child { border-bottom: 0; }
.archivos .clave {
  font: 700 12px/1 var(--texto); letter-spacing: .03em;
  background: #eeece8; color: var(--tinta); border-radius: 3px;
  padding: 6px 7px; min-width: 56px; text-align: center;
}
.archivos .que { font-size: 13px; }
.archivos .que b { display: block; font-size: 14px; }
.archivos .falta .clave { background: var(--ambar-tenue); color: var(--ambar); }

/* ---------------------------------------------------------- formularios */
.campo { display: block; margin-bottom: var(--e3); }
.campo > span {
  display: block; font-size: 13px; font-weight: 600; margin-bottom: var(--e1);
}
.campo .ayuda { font-weight: 400; color: var(--tinta-2); font-size: 12.5px; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 42px; padding: var(--e2) var(--e3);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  font: inherit; font-size: 15px; background: var(--caja); color: var(--tinta);
}
.campo textarea { min-height: 90px; resize: vertical; }
.rejilla-2 { display: grid; grid-template-columns: 1fr; gap: 0 var(--e3); }

/* ------------------------------------------------------------ supuestos */
/*
 * Cada supuesto se marca en la pantalla con un globo numerado que salta a la
 * lista del pie. El cliente los puede picar uno por uno y contestar «sí / no /
 * es otra cosa» sin leerse un documento aparte.
 */
.sup {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px; margin-left: 5px;
  background: var(--mostaza); color: #363031;
  border: 1px solid #d8b616; border-radius: var(--radio-chip);
  font: 700 11px/1 var(--texto); text-decoration: none; vertical-align: middle;
}
.sup:hover { background: #e7c418; }

.supuestos {
  background: #fffdf4;
  border: 1px solid #ecdfa8; border-radius: var(--radio);
  padding: var(--e4); margin-top: var(--e5);
}
.supuestos h2 { font-size: 15px; margin-bottom: var(--e2); }
.supuestos > p { font-size: 13px; color: var(--tinta-2); }
.supuestos ol { margin: 0; padding-left: 0; list-style: none; counter-reset: sup; }
.supuestos li {
  padding: var(--e3) 0 var(--e3) 38px; border-top: 1px solid #ecdfa8;
  position: relative; font-size: 13.5px;
}
.supuestos li::before {
  counter-increment: sup; content: "S" counter(sup);
  position: absolute; left: 0; top: var(--e3);
  background: var(--mostaza); color: #363031; border-radius: var(--radio-chip);
  font: 700 11px/20px var(--texto); min-width: 26px; height: 20px; text-align: center;
}
.supuestos li:target { background: #fff6d6; }
.supuestos li b { display: block; }
.supuestos li em { font-style: normal; font-weight: 700; }
.supuestos li .si-no { display: block; margin-top: var(--e1); color: var(--tinta-2); }

/* -------------------------------------------------------------- avisos */
.ficticio {
  background: #2c2a27; color: #f2f0eb;
  padding: var(--e2) var(--e4); font-size: 12.5px;
  display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center;
}
.ficticio b { color: var(--mostaza); }
.ficticio a { color: var(--mostaza); }

.vacio { padding: var(--e6) var(--e4); text-align: center; color: var(--tinta-2); }
.vacio b { display: block; color: var(--tinta); margin-bottom: var(--e1); }

.nota-diseno {
  border-left: 3px solid var(--verde); background: var(--verde-tenue);
  padding: var(--e3) var(--e4); border-radius: 0 var(--radio) var(--radio) 0;
  font-size: 13.5px; margin-bottom: var(--e4);
}

/* --------------------------------------------------------- índice */
.tarjetas-indice { display: grid; grid-template-columns: 1fr; gap: var(--e3); }
.tarjeta-indice {
  display: block; background: var(--caja); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: var(--e4); text-decoration: none; color: inherit;
}
.tarjeta-indice:hover { border-color: var(--verde); }
.tarjeta-indice h3 { font-size: 15px; margin-bottom: var(--e1); color: var(--verde-osc); }
.tarjeta-indice p { font-size: 13.5px; color: var(--tinta-2); margin: 0; }
.tarjeta-indice .archivo { font-family: var(--mono); font-size: 11.5px; color: var(--tinta-3); }

/* =================================================== escritorio (≥768px) */
@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .nav-movil { display: none; }

  .barra { height: 56px; padding: 0 var(--e5); gap: var(--e5); }
  .nav-esc { display: flex; gap: var(--e1); }
  .nav-esc a {
    display: flex; align-items: center; padding: 0 var(--e3); height: 34px;
    border-radius: var(--radio); text-decoration: none;
    color: var(--tinta-2); font-weight: 600; font-size: 13.5px; white-space: nowrap;
  }
  .nav-esc a:hover { background: var(--papel); color: var(--tinta); }
  .nav-esc a[aria-current="page"] { background: var(--verde-tenue); color: var(--verde-osc); }
  .barra .buscar { max-width: 280px; }

  .lienzo { padding: var(--e5); }
  h1 { font-size: 24px; }

  .metricas { grid-template-columns: repeat(4, 1fr); }
  .metricas.tres { grid-template-columns: repeat(3, 1fr); }
  .columnas { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--e4); align-items: start; }
  .rejilla-2 { grid-template-columns: 1fr 1fr; }

  /* La tabla vuelve a ser tabla. */
  .tabla thead { display: table-header-group; }
  .tabla thead th {
    text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--tinta-3);
    padding: var(--e2) var(--e3); border-bottom: 1px solid var(--linea); white-space: nowrap;
  }
  .tabla thead th.der { text-align: right; }
  .tabla tbody tr { display: table-row; padding: 0; }
  .tabla tbody td {
    display: table-cell; padding: var(--e3); vertical-align: middle;
    border-bottom: 1px solid var(--linea);
  }
  .tabla tbody td::before { content: none; }
  .tabla td.acciones-celda { margin: 0; }

  .caso > summary { grid-template-columns: auto auto 1fr auto; gap: 2px var(--e3); }
  .caso > summary > .flecha { grid-area: 1 / 1 / 3 / 2; align-self: center; padding-top: 0; }
  .caso > summary > .chip   { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .caso > summary > .titulo { grid-column: 3; grid-row: 1; }
  .caso > summary > .donde  { grid-column: 3; grid-row: 2; }
  .caso > summary > .tiempo { grid-column: 4; grid-row: 1 / 3; align-self: center; justify-self: end; }

  .cuenta { grid-template-columns: 1.4fr 1fr auto; }
  .cuenta .meta { grid-column: auto; }

  .tarjetas-indice { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .tarjetas-indice { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .barra, .nav-movil, .acciones { display: none; }
  body { background: #fff; }
}

/* ==================================================================== cifras
 *
 * El pronóstico del mes es LA cifra de la pantalla de Inicio: el `Forecast`
 * que trae el reporte «MTD Bookings by Salesperson and Customer» del ERP y que
 * el parser `sicc/parsers/bookings_mtd.py` ya lee. No es una tarjeta más, por
 * eso tiene tipografía de héroe y un medidor propio.
 */
.pronostico {
  background: var(--caja);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--verde);
  border-radius: var(--radio);
  padding: var(--e4);
  margin-bottom: var(--e4);
}
.pronostico .rot {
  margin: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-3);
}
.pronostico .hero {
  margin: var(--e1) 0 0;
  font-size: 44px; line-height: 1.05; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.pronostico .hero-pie { margin: var(--e2) 0 0; font-size: 13.5px; color: var(--tinta-2); }

/* El tablero de la tarjeta (24-sep): dos tercios para la gráfica de tres
 * barras, un tercio para Revenue. Móvil primero: apilado. */
.tablero { display: grid; grid-template-columns: 1fr; gap: var(--e4); margin-top: var(--e4); }
@media (min-width: 768px) { .tablero { grid-template-columns: 2fr 1fr; } }

/* Tres barras sobre la misma escala (100 % = Forecast): Budget, Forecast y
 * MTD. En HTML y no en SVG a propósito —el texto no se encoge con la figura—.
 * Rampa ordinal de un solo tono: los dos pasos claros del comparativo y el
 * verde de la marca para lo real. Validada el 24-sep con el verificador de la
 * skill `dataviz` (modo --ordinal): #cfe3db, el tono claro de .barra-pron, NO
 * pasa —1.31:1 sobre el papel, invisible—; #7dbda9 da 2.10:1 y pasa. Marcas delgadas, puntas
 * redondeadas de 4 px ancladas a la base, una línea de ritmo punteada. */
.tres-barras { display: grid; gap: var(--e2); min-width: 0; }
.tres-barras .plano {
  position: relative; height: 210px;
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--e4); align-items: end;
  padding: 26px var(--e2) 0;
  border-bottom: 1px solid var(--linea-fuerte);
}
/* La capa de ritmo va sobre las barras (z 1) y los números sobre la capa (z 2). */
.tres-barras .capa { position: absolute; left: 0; right: 0; top: 26px; bottom: 0; z-index: 1; pointer-events: none; }
.tres-barras .ritmo-h { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--tinta); }
.tres-barras .ritmo-h i {
  position: absolute; right: 0; bottom: 3px;   /* a la derecha: a la izquierda choca con la cifra del MTD (29-sep) */
  font-style: normal; font-size: 11px; font-weight: 600; color: var(--tinta-2);
  background: var(--caja); padding: 0 4px; white-space: nowrap;
}
.tres-barras .tallo { position: relative; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.tres-barras .barra-v { position: relative; display: block; width: 100%; border-radius: 4px 4px 0 0; }
.tres-barras .barra-v.budget   { background: #7dbda9; }   /* --a24 del comparativo */
.tres-barras .barra-v.forecast { background: #3f9a80; }   /* --a25 */
.tres-barras .barra-v.mtd      { background: var(--verde); }
/* Halo de superficie (2 px) para que la línea de ritmo pase por detrás del
 * número cuando coinciden, como hoy con $142,900. */
.tres-barras .valor {
  position: absolute; left: -4px; bottom: 100%; margin-bottom: 4px; z-index: 2;
  padding: 0 4px; border-radius: 3px; background: var(--caja);
  font-size: 13.5px; font-weight: 700; color: var(--tinta);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tres-barras .nombres {
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--e4);
  padding: 0 var(--e2);
}
.tres-barras .nombres .n {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-3);
}
.tres-barras .nombres .contra {
  font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--tinta-2); font-variant-numeric: tabular-nums;
}
.tres-barras .nombres .contra b { color: var(--tinta); }
.tres-barras .nombres .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tres-barras .nombres .chips .chip { letter-spacing: 0; text-transform: none; white-space: normal; max-width: 100%; }

/* Revenue: no es meta, es lo facturado. Misma regla que las tarjetas tocables:
 * un <div> con un solo enlace estirado con ::after y el globo encima. */
.revenue-panel {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linea); border-radius: var(--radio); background: #fbfbfa;
}
.revenue-panel:hover { border-color: var(--verde); }
.revenue-panel .tit {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-3);
}
.revenue-panel .tit .sup { position: relative; z-index: 1; }
.revenue-panel .grande {
  font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.revenue-panel .sub { font-size: 13px; color: var(--tinta-2); }
.revenue-panel .aparte { font-size: 12.5px; color: var(--tinta-3); }
.revenue-panel .ver {
  margin-top: auto; display: flex; align-items: center; min-height: 44px;
  font-size: 12.5px; font-weight: 600; color: var(--verde-osc); text-decoration: none;
}
.revenue-panel .ver::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio); }

/* Selector Mes | Año de la tarjeta (29-sep). Mismo segmentado que el de
 * idioma, con alto táctil de 40 px. Lo oculto con `hidden` se oculta aunque
 * la pieza tenga su propio `display` (la gráfica es grid). */
.pron-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.periodo { display: flex; flex-shrink: 0; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); overflow: hidden; }
.periodo button {
  min-width: 64px; height: 40px; padding: 0 var(--e3);
  border: 0; background: var(--caja); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--tinta-2);
}
.periodo button + button { border-left: 1px solid var(--linea-fuerte); }
.periodo button[aria-pressed="true"] { background: var(--verde-tenue); color: var(--verde-osc); }
.pronostico [data-periodo][hidden] { display: none !important; }

/* Captura de Budget y Forecast (29-sep): la tabla de doce meses con campos
 * numéricos alineados a la derecha. El mes cerrado se lee, no se edita. */
.captura input {
  width: 100%; max-width: 150px; min-height: 40px; padding: var(--e1) var(--e2);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  font: inherit; font-size: 15px; text-align: right; font-variant-numeric: tabular-nums;
  background: var(--caja); color: var(--tinta);
}
.captura tr.cerrado td { color: var(--tinta-2); }
.captura tr.actual { background: var(--verde-tenue) !important; }
.captura tfoot td { padding: var(--e3); font-weight: 700; border-top: 2px solid var(--linea-fuerte); }
.captura tfoot tr { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--e3); padding: var(--e3) var(--e4); }
.captura tfoot td { padding: 0; border: 0; }
/* En el teléfono cada cifra lleva su rótulo encima, no al lado: con el campo
 * de captura al lado, el rótulo y el campo se descuadraban. */
@media (max-width: 767.98px) {
  .captura td:not(.principal) { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .captura td:not(.principal)::before { content: attr(data-col); }
}
.tabla td.completa { grid-column: 1 / -1; }

/* Vistas de la pantalla de metas (29-sep): Área, Director, vendedor y «así lo
 * ve el vendedor». Solo existen para revisar la maqueta con el cliente. */
[data-vista][hidden] { display: none !important; }
.periodo.vistas { flex-shrink: 1; min-width: 0; max-width: 100%; }
.periodo.vistas button { min-width: 0; padding: 0 var(--e2); font-size: 12.5px; white-space: nowrap; }
.nota-vista { margin: 0 0 var(--e3); font-size: 14px; color: var(--tinta-2); }
.estado-metas { border-left: 4px solid var(--ambar); }
.estado-metas p { margin: 0 0 var(--e3); font-size: 14px; }
@media (min-width: 768px) {
  .captura tfoot tr { display: table-row; }
  .captura tfoot td { padding: var(--e3); border-top: 2px solid var(--linea-fuerte); }
}

/* =================================================================== gráficas
 *
 * SVG escrito a mano, sin librería y sin JavaScript. El `viewBox` mide 340
 * unidades de ancho —casi el ancho útil de un teléfono de 390 px— para que la
 * figura se dibuje a escala ≈1 ahí y el texto del SVG no se encoja. En
 * escritorio se limita con `max-width` en vez de dejarla crecer sin freno.
 *
 * Rampa ordinal de los tres años, validada con el verificador de la skill
 * `dataviz` (OKLab, superficie #ffffff, modo `--ordinal`): luminosidad
 * monótona, un solo tono (3° de dispersión) y el extremo claro a 2.16:1 sobre
 * el papel. Son años, que son una escala ordenada: por eso un solo tono en tres
 * pasos y no tres colores distintos.
 */
:root {
  --a24: #7dbda9;
  --a25: #3f9a80;
  --a26: #00614a;
  --rejilla: #e3e1dc;
}
.grafica { width: 100%; height: auto; display: block; max-width: 460px; }
.grafica.multiple { max-width: 400px; }
.grafica .rejilla { stroke: var(--rejilla); stroke-width: 1; }
.grafica .eje { fill: var(--tinta-3); font: 10px var(--texto); }
.grafica .rotulo-ano { fill: var(--tinta); font: 700 12px var(--texto); }
.grafica .dentro { fill: #fff; font: 700 11px var(--texto); }
.grafica .fuera { fill: var(--verde-osc); font: 700 10px var(--texto); }
/* La meta es una referencia, no una serie: tinta neutra, nunca un color más. */
.grafica .meta { stroke: var(--tinta); stroke-width: 2.5; }
.grafica .meta-halo { stroke: var(--caja); stroke-width: 5.5; }
.grafica .linea-meta { stroke: var(--tinta-3); stroke-width: 1.5; stroke-dasharray: 4 3; }
.grafica .hoy { stroke: var(--linea-fuerte); stroke-width: 1; stroke-dasharray: 2 3; }

.leyenda-g { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); margin-top: var(--e3); font-size: 12.5px; }
.leyenda-g span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-g .m { width: 14px; height: 12px; border-radius: 2px; display: inline-block; flex: none; }
.leyenda-g .m.tick { width: 3px; height: 16px; background: var(--tinta); border-radius: 1px; }
.leyenda-g .m.raya { width: 14px; height: 0; border-top: 2px dashed var(--tinta-3); border-radius: 0; }

/* Pequeños múltiplos: un panel por año. Barras agrupadas de 3 años × 4 series
 * no caben en 390 px —serían 12 barras de 8 px—, así que cada año es su propio
 * panel con los mismos ejes. Se comparan por posición, que es lo que el ojo
 * hace bien. */
.multiples { display: grid; grid-template-columns: 1fr; gap: var(--e4); }
.multiples > figure { margin: 0; }
.multiples figcaption {
  display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap;
  font-size: 13px; margin-bottom: var(--e2);
}
.multiples figcaption b { font-size: 15px; }
.multiples figcaption .num { color: var(--tinta-2); }

/* La vista de tabla. Sin JavaScript no hay tooltip al pasar el ratón, así que
 * los números exactos tienen que estar escritos en algún lado: aquí. */
.vista-tabla { margin-top: var(--e3); border: 1px solid var(--linea); border-radius: var(--radio); }
.vista-tabla > summary {
  padding: var(--e2) var(--e3); cursor: pointer; font-size: 13px; font-weight: 600;
  min-height: 44px; display: flex; align-items: center; color: var(--verde-osc);
}

/* Selectores de corte. Son enlaces de maqueta: no filtran nada todavía. */
.cortes { display: grid; gap: var(--e3); margin-bottom: var(--e4); }
.cortes .grupo { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.cortes .et {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-3); width: 100%;
}

@media (min-width: 768px) {
  .bloques { grid-template-columns: repeat(3, 1fr); }
  .multiples { grid-template-columns: repeat(3, 1fr); }
  .pronostico { padding: var(--e5); }
  .pronostico .hero { font-size: 60px; }
  .cortes .et { width: auto; }
}

/*
 * Siete destinos ya no caben arriba a 768 px junto al buscador: medido en el
 * navegador, «Reportes» quedaba cortado a la mitad. Entre 768 y 1023 px se
 * queda la barra inferior —que sí cabe— y la de arriba no aparece. A partir de
 * 1024 px los siete entran completos.
 */
@media (min-width: 768px) and (max-width: 1023px) {
  body { padding-bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom, 0px)); }
  .nav-movil { display: flex; }
  .nav-esc { display: none; }
  .barra .buscar { max-width: none; }
}

/* Columna que solo existe en escritorio. En el teléfono, «acumulado» compite
 * con «% del total» y las dos juntas ensucian el renglón: se midió a 390 px. */
.tabla td.solo-ancho, .tabla th.solo-ancho { display: none; }
@media (min-width: 768px) {
  .tabla th.solo-ancho { display: table-cell; }
  .tabla td.solo-ancho { display: table-cell; }
}

/* ------------------------------------------------ entrar y administración (29-sep) */
.entrar { max-width: 440px; margin-left: auto; margin-right: auto; }
.ent h1 { margin: 0 0 var(--e4); }
.ent .sub { margin: 0 0 var(--e4); font-size: 14px; color: var(--tinta-2); }
.recordar { display: flex; align-items: center; gap: var(--e2); font-size: 13.5px; color: var(--tinta-2); min-height: 44px; }
.recordar input { width: 18px; height: 18px; }
.ent-pie { margin: var(--e4) 0 0; font-size: 13px; }
.ent-pie b { display: block; color: var(--tinta); }
.chico-txt { font-size: 12.5px; }
.tabla tr.apagada td { color: var(--tinta-3); }
.sel-resp {
  min-height: 38px; max-width: 100%; padding: 0 var(--e2);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  background: var(--caja); font: inherit; font-size: 13.5px; color: var(--tinta);
}
.buscar-pais input {
  width: 100%; max-width: 320px; height: 38px; padding: 0 var(--e3);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio); font: inherit; font-size: 14px;
}
.panel > header .filtros { margin-top: var(--e2); }
.marcas-paises { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 var(--e3); margin-bottom: var(--e3); }
.marca-pais { display: flex; align-items: center; gap: var(--e2); min-height: 40px; font-size: 14px; }
.marca-pais input { width: 18px; height: 18px; }
.aviso-marca { margin: 0 0 var(--e3); font-size: 13px; color: var(--ambar); }