/* ── Lora, la serif de la marca ───────────────────────────────────────
   Va como archivo propio, no desde Google: el programa corre en la
   computadora del cliente y muchas veces sin internet. Es variable, así
   que un solo archivo cubre de 400 a 700. */
@font-face {
  font-family: "Lora";
  src: url("/static/fuentes/Lora.ttf") format("truetype-variations");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/static/fuentes/Lora-Italic.ttf") format("truetype-variations");
  font-weight: 400 700; font-style: italic; font-display: swap;
}

/* ============================================================================
   ICG-Dashboard — Sistema de diseño
   Principio: el color le pertenece a los datos. El cromo es tinta y papel.
   Sin fuentes externas: corre offline en la computadora del cliente.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ── Identidad Caio ────────────────────────────────────────────────
     Arena de fondo, carbón para lo que se lee, naranja solo donde hay
     que tocar o mirar. La proporción manda: dos tercios arena, un cuarto
     carbón y blanco, y apenas un décimo de naranja. Un naranja que sale
     en todos lados deja de significar algo. */
  --naranja:       #FF7127;
  --carbon:        #4A4A4A;
  --arena:         #FAEFE1;
  --gris:          #9C9C9C;

  --canvas:        #FAEFE1;
  --surface:       #FFFDFC;
  --surface-sunk:  #FDF7EF;
  --surface-rail:  #4A4A4A;
  --surface-rail-2:#585858;

  --line:          #EADFD0;
  --line-strong:   #D9CBB8;

  --ink:           #4A4A4A;
  /* Los tres niveles de tinta están medidos contra el fondo arena, no
     elegidos a ojo: 5.6, 4.7 y 4.6 a uno. El gris de marca #9C9C9C da 2.4 —
     la mitad de lo que hace falta para leer— así que no lleva texto nunca:
     vive en --gris, para bordes e íconos donde no hay nada que leer. */
  --ink-2:         #5F5F5F;
  --ink-3:         #6B6B6B;
  --ink-4:         #9C9C9C;   /* decorativo: separadores, íconos apagados */

  /* El naranja de marca no se puede leer sobre arena: 2.4 a uno. Para texto
     y enlaces va su versión oscura, que da 4.9. El #FF7127 se queda donde es
     un color y no una letra: botones, barras, el logo, los bordes. */
  --accent-txt:    #B54405;
  /* Y al revés: lo que va escrito ENCIMA del naranja. El blanco sobre
     #FF7127 da 2.8 a uno —no se lee—; esta tinta da 5.8. */
  --sobre-accent:  #2E1F12;
  --ink-on-dark:   #FAEFE1;
  /* Sobre el carbón del riel, la arena por debajo del 72% deja de leerse.
     Los dos niveles apagados están medidos ahí: 5.0 y 5.7 a uno. */
  --ink-on-dark-2: rgba(250,239,225,.80);
  --ink-on-dark-3: rgba(250,239,225,.72);

  --accent:        #FF7127;
  --accent-2:      #D9521A;
  --hero:          #4A4A4A;
  --hero-ink:      #FAEFE1;
  --hero-ink-2:    rgba(250,239,225,.84);
  --hero-ink-3:    rgba(250,239,225,.74);
  --hero-up:       #8FD6A8;
  --hero-down:     #F2A0A0;
  --accent-soft:   #FFEDE2;
  --accent-line:   #FFC7A8;

  /* ── Estado (reservados: nunca se usan como color de serie) ──────── */
  --good:          #0B6E45;
  --good-bg:       #E8F3EC;
  --warn:          #8A5200;
  --warn-bg:       #FBF0DC;
  --serious:       #A33A10;
  --serious-bg:    #FBEBE3;
  --critical:      #A3231D;
  --critical-bg:   #FAE9E8;

  /* ── Paleta categórica validada (CVD-safe, orden fijo) ─────────────
     Esta no se toca por marca: son los colores que separan una serie de
     otra para alguien que no distingue rojo de verde. El naranja de Caio
     entra de primero porque es el que más se ve; los demás quedan como
     estaban, que es como pasaron la prueba. */
  --s1:#FF7127; --s2:#2a78d6; --s3:#1baf7a; --s4:#eda100;
  --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;

  /* ── Rampa secuencial (magnitud: mapa de calor) ───────────────────
     De arena a naranja quemado. Una sola tinta, de claro a oscuro. */
  /* La rampa está escalonada para que el número de cada celda se lea sobre
     su propio fondo: hasta el sexto tono la cifra va en tinta, y solo el más
     oscuro la lleva en papel. El tono que estaba en el medio no daba
     contraste ni con uno ni con el otro. */
  --q1:#FDE7D4; --q2:#FBCFAE; --q3:#FAB588; --q4:#F89A62;
  --q5:#F28942; --q6:#EC7C33; --q7:#A2450F;

  /* ── Tipografía ───────────────────────────────────────────────────
     Al revés de lo habitual: los títulos en sans y el cuerpo en Lora.
     El título queda seco y corto; el texto, con voz. */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
          system-ui, "Helvetica Neue", Arial, sans-serif;
  --display: var(--sans);
  --body: "Lora", "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;

  /* Las cifras van en sans con cifras tabulares: alinean igual y no
     compiten con la serif del texto. */
  --mono: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
          "Helvetica Neue", Arial, sans-serif;

  --r-sm: 6px; --r: 10px; --r-lg: 14px;
  --rail-w: 236px;
  --shadow:    0 1px 1px rgba(74,58,40,.05), 0 4px 10px -4px rgba(74,58,40,.10);
  --shadow-up: 0 2px 3px rgba(74,58,40,.07), 0 18px 34px -14px rgba(74,58,40,.18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --naranja:#FF8A4C; --carbon:#E6E1DA; --arena:#1C1A17; --gris:#8C867D;
    --canvas:#1C1A17; --surface:#262320; --surface-sunk:#211E1B;
    --surface-rail:#141210; --surface-rail-2:#221F1C;
    --line:#35312C; --line-strong:#463F38;
    --ink:#F2EDE5; --ink-2:#C6BFB4; --ink-3:#B0A99E; --ink-4:#8C867D;
    --accent-txt:#FFA470;
    --ink-on-dark:#FAEFE1;
    --ink-on-dark-2:rgba(250,239,225,.80); --ink-on-dark-3:rgba(250,239,225,.72);
    --accent:#FF8A4C; --accent-2:#FF7127;
    --accent-soft:#3A241A; --accent-line:#5C3823;
    --hero:#33302C; --hero-ink:#F2EDE5;
    --hero-ink-2:rgba(242,237,229,.84); --hero-ink-3:rgba(242,237,229,.74);
    --hero-up:#8FD6A8; --hero-down:#F2A0A0;
    --good:#3FBF86; --good-bg:#11291F; --warn:#D9A441; --warn-bg:#2A2113;
    --serious:#E08356; --serious-bg:#2C1B12; --critical:#E66767; --critical-bg:#2C1717;
    --s1:#FF8A4C; --s2:#3987e5; --s3:#199e70; --s4:#c98500;
    --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
    --q1:#A2450F; --q2:#D45E1B; --q3:#F07C39; --q4:#F89A62;
    --q5:#FAB588; --q6:#FBCFAE; --q7:#FDE7D4;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-up: 0 2px 4px rgba(0,0,0,.5), 0 16px 40px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --naranja:#FF8A4C; --carbon:#E6E1DA; --arena:#1C1A17; --gris:#8C867D;
  --canvas:#1C1A17; --surface:#262320; --surface-sunk:#211E1B;
  --surface-rail:#141210; --surface-rail-2:#221F1C;
  --line:#35312C; --line-strong:#463F38;
  --ink:#F2EDE5; --ink-2:#B6AFA5; --ink-3:#8C867D;
  --ink-on-dark:#FAEFE1;
  --ink-on-dark-2:rgba(250,239,225,.66); --ink-on-dark-3:rgba(250,239,225,.36);
  --accent:#FF8A4C; --accent-2:#FF7127;
  --accent-soft:#3A241A; --accent-line:#5C3823;
  --hero:#33302C; --hero-ink:#F2EDE5;
  --hero-ink-2:rgba(242,237,229,.68); --hero-ink-3:rgba(242,237,229,.40);
  --hero-up:#8FD6A8; --hero-down:#F2A0A0;
  --good:#3FBF86; --good-bg:#11291F; --warn:#D9A441; --warn-bg:#2A2113;
  --serious:#E08356; --serious-bg:#2C1B12; --critical:#E66767; --critical-bg:#2C1717;
  --s1:#FF8A4C; --s2:#3987e5; --s3:#199e70; --s4:#c98500;
  --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
  --q1:#A2450F; --q2:#D45E1B; --q3:#F07C39; --q4:#F89A62;
  --q5:#FAB588; --q6:#FBCFAE; --q7:#FDE7D4;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-up: 0 2px 4px rgba(0,0,0,.5), 0 16px 40px -16px rgba(0,0,0,.7);
}

*,*::before,*::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--body); font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── Cifras: siempre monoespaciadas y tabulares ─────────────────────── */
.num, .metric-value, td.num, th.num, .tick, .cell-val {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1; letter-spacing: -.02em;
}

/* ============================ ESQUELETO ================================= */
.app { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; }

.rail {
  background: var(--surface-rail); color: var(--ink-on-dark);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.rail::-webkit-scrollbar { width: 4px; }
.rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }

.brand { padding: 22px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.brand-mark {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 640; letter-spacing: -.35px; color: var(--ink-on-dark);
}
/* El logo va como imagen y no como texto: es la marca, no una palabra. */
.brand-logo { height: 28px; width: auto; display: block; flex: none; }
.mtop .brand-logo { height: 18px; }

.brand-dot {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.brand-client {
  margin-top: 6px; font-size: 11.5px; color: var(--ink-on-dark-2);
  letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.nav { padding: 10px 0 16px; flex: 1; }
.nav-group {
  padding: 16px 20px 6px; font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-on-dark-3);
}
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 20px;
  color: var(--ink-on-dark-2); text-decoration: none; font-size: 13.5px;
  border-left: 2px solid transparent; cursor: pointer; user-select: none;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: rgba(255,255,255,.055); color: var(--ink-on-dark); }
.nav-item.on {
  background: rgba(255,113,39,.14); color: var(--ink-on-dark); font-weight: 560;
  border-left-color: var(--accent);
}
.nav-ico { width: 16px; text-align: center; font-size: 14px; opacity: 1; flex: none; }
.nav-badge {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  padding: 1px 6px; border-radius: 20px; background: var(--critical); color: #fff;
}

.rail-foot {
  padding: 13px 20px; border-top: 1px solid rgba(255,255,255,.07);
  font-size: 11px; color: var(--ink-on-dark-3); display: grid; gap: 4px;
}
.rail-foot .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; }
.dot-live { background: var(--good); box-shadow: 0 0 0 3px rgba(11,110,69,.22); }
.dot-stale { background: var(--warn); box-shadow: 0 0 0 3px rgba(138,82,0,.22); }

.main { min-width: 0; display: flex; flex-direction: column; }

/* ── Barra de contexto ──────────────────────────────────────────────── */
.topbar {
  /* Fondo sólido a propósito: el desenfoque translúcido provoca fallos de
     pintado al hacer scroll en algunos equipos, y este tablero corre en la
     computadora del cliente, no en la nuestra. */
  position: sticky; top: 0; z-index: 20;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  padding: 14px 28px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.page-title {
  font-family: var(--display);
  font-size: 30px; font-weight: 600; letter-spacing: -.6px; margin: 0;
  line-height: 1.1;
}
.page-sub { font-size: 12.5px; color: var(--ink-2); margin: 2px 0 0; }
.topbar-spacer { flex: 1 1 auto; }

.seg { display: inline-flex; background: var(--surface-sunk); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.seg button {
  font: inherit; font-size: 12.5px; padding: 4px 12px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }

.select, .input {
  font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.btn {
  font: inherit; font-size: 13px; font-weight: 560; padding: 7px 14px; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px; transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-sunk); border-color: var(--line-strong); }
.btn-primary { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.btn-primary:hover { filter: brightness(1.18); }

.content { padding: 24px 28px 72px; display: grid; gap: 20px; align-content: start; }

/* ============================ TARJETAS ================================== */
.card {
  background: var(--surface); border: 0; border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 20px 22px; min-width: 0;
}
.card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.card-title {
  font-family: var(--display);
  font-size: 17px; font-weight: 600; letter-spacing: -.1px; margin: 0;
}
.card-note { font-size: 11.5px; color: var(--ink-3); margin-left: auto; }
.card-sub { font-size: 12px; color: var(--ink-2); margin: -8px 0 14px; }

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
/* Siete cifras no entran en cuatro columnas sin dejar un hueco al final. Con
   auto-fit la última fila se reparte el ancho sobrante y no queda un vacío. */
.g-cifras { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.span2 { grid-column: span 2; }

/* ── Métrica destacada ──────────────────────────────────────────────── */
.metric {
  background: var(--surface); border: 0; border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 17px 19px 15px; min-width: 0;
}
.metric-label {
  font-size: 10px; font-weight: 600; letter-spacing: .9px; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 9px;
}
.metric-value {
  font-family: var(--display);
  font-size: 31px; font-weight: 500; line-height: 1.02; letter-spacing: -.6px;
  font-variant-numeric: tabular-nums;
}
.metric-value .cur { font-size: 17px; color: var(--ink-3); margin-right: 2px; font-weight: 400; }
.metric-foot { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.metric-spark { margin-top: 10px; display: block; width: 100%; height: 30px; overflow: visible; }

.delta { font-family: var(--mono); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.delta.up   { color: var(--good); }
.delta.down { color: var(--critical); }
.delta.flat { color: var(--ink-3); }

/* ── Chips de estado ────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 620; white-space: nowrap; border: 1px solid transparent;
}
.chip-good     { background: var(--good-bg);     color: var(--good); }
.chip-warn     { background: var(--warn-bg);     color: var(--warn); }
.chip-serious  { background: var(--serious-bg);  color: var(--serious); }
.chip-critical { background: var(--critical-bg); color: var(--critical); }
.chip-mute     { background: var(--surface-sunk); color: var(--ink-2); border-color: var(--line); }

/* ============================ TABLAS ==================================== */
.table-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th {
  font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--ink-3); text-align: left; padding: 0 12px 9px; white-space: nowrap;
  border-bottom: 1px solid var(--line-strong); position: sticky; top: 0; background: var(--surface);
}
table.t th.num, table.t td.num { text-align: right; }
table.t td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tbody tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover td { background: var(--surface-sunk); }
table.t tfoot td {
  padding: 10px 12px; border-top: 2px solid var(--line-strong); font-weight: 640;
  background: var(--surface-sunk);
}
.t-scroll { max-height: 460px; overflow-y: auto; }
.t-name { font-weight: 540; }
.t-dim  { color: var(--ink-3); }

/* Barra dentro de celda: magnitud comparable de un vistazo */
.bar-cell { position: relative; min-width: 110px; }
.bar-cell .bar {
  position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px;
  background: var(--line); border-radius: 2px; overflow: hidden;
}
.bar-cell .bar > i { display: block; height: 100%; background: var(--s1); border-radius: 2px; }

/* ============================ GRÁFICOS ================================== */
.chart { width: 100%; display: block; overflow: visible; }
.axis line, .axis path { stroke: var(--line); stroke-width: 1; }
.grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.axis text, .tick { fill: var(--ink-3); font-size: 10.5px; }
.series-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.series-area { opacity: .10; }
.dot { r: 4; stroke: var(--surface); stroke-width: 2; }
.bar-mark { rx: 3; }

.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
.legend b { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* Tooltip */
.tip {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .1s;
  background: var(--surface-rail); color: var(--ink-on-dark); border-radius: 8px;
  padding: 8px 11px; font-size: 12px; box-shadow: var(--shadow-up); max-width: 260px;
}
.tip.on { opacity: 1; }
.tip-h { font-weight: 620; margin-bottom: 4px; color: var(--ink-on-dark); }
.tip-row { display: flex; gap: 12px; justify-content: space-between; }
.tip-row span { color: var(--ink-on-dark-2); }
.tip-row b { font-family: var(--mono); font-weight: 600; }

/* ── Mapa de calor ──────────────────────────────────────────────────── */
.heat { border-collapse: separate; border-spacing: 2px; font-size: 11.5px; }
.heat th {
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink-3); padding: 4px 6px; background: transparent; border: 0; position: static;
}
.heat td.hour { color: var(--ink-2); font-family: var(--mono); text-align: right; padding-right: 8px; font-weight: 600; }
.heat td.cell {
  border-radius: 4px; text-align: center; padding: 7px 8px; cursor: default;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  transition: transform .08s;
}
.heat td.cell:hover { transform: scale(1.08); }

/* ── Barras horizontales con etiqueta directa ───────────────────────── */
.bars { display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 1.1fr) 3fr auto; gap: 12px; align-items: center; }
.bar-lbl { font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 8px; background: var(--surface-sunk); border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.bar-track > i { display: block; height: 100%; border-radius: 4px; }
.bar-val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--ink-2); text-align: right; white-space: nowrap; }

/* ── Barra apilada de participación ─────────────────────────────────── */
.stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--line); }
.stack > i { display: block; height: 100%; }
.stack > i + i { box-shadow: inset 2px 0 0 var(--surface); }

/* ── Escala del mapa de calor ───────────────────────────────────────── */
.heat-scale { display: flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 11px; color: var(--ink-3); }
.heat-scale i { display: block; width: 22px; height: 8px; border-radius: 2px; }
.heat-scale i:first-of-type { border-radius: 4px 2px 2px 4px; }
.heat-scale i:last-of-type { border-radius: 2px 4px 4px 2px; }
.heat-scale .source { margin-left: auto; }

/* ── Estados vacíos y avisos ────────────────────────────────────────── */
.empty { padding: 34px 20px; text-align: center; color: var(--ink-3); font-size: 13px; }
.empty-ico { font-size: 26px; opacity: .4; display: block; margin-bottom: 8px; }
.callout {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  border-radius: 0 var(--r) var(--r) 0; padding: 12px 16px; font-size: 13px; color: var(--ink);
}
.callout.warn     { border-color: var(--warn);     background: var(--warn-bg); }
.callout.critical { border-color: var(--critical); background: var(--critical-bg); }
.source {
  font-size: 11px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px;
}
.source::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); }

/* ── Lista de alertas ───────────────────────────────────────────────── */
.alert-list { display: grid; gap: 2px; }
.alert-row { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.alert-row:last-child { border-bottom: 0; }
.alert-row .t-dim { font-size: 12px; margin-top: 1px; }

/* ── Buscador ───────────────────────────────────────────────────────── */
.search-res { display: grid; gap: 2px; margin-top: 12px; max-width: 560px; }
.res-item { font: inherit; text-align: left; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 9px 12px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); cursor: pointer; }
.res-item:hover { background: var(--surface-sunk); border-color: var(--line-strong); }
.res-item b { font-weight: 560; }

/* ── Fila destacada (hoy) ───────────────────────────────────────────── */
table.t tr.is-today td { background: var(--accent-soft); font-weight: 560; }

/* ── Ficha de artículo (modal) ──────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(12,15,20,.55); backdrop-filter: blur(3px); display: grid; place-items: start center; padding: 40px 20px; overflow-y: auto; }
.modal-box { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-up); width: min(940px, 100%); padding: 22px 24px 18px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.modal-foot { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Mini-gráfico de barras mensuales dentro de la ficha */
.mchart { display: flex; gap: 5px; align-items: flex-end; height: 150px; }
.mcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.mcol .mbars { flex: 1; display: flex; gap: 2px; align-items: flex-end; width: 100%; justify-content: center; }
.mcol .mbars i { width: 46%; max-width: 14px; border-radius: 3px 3px 0 0; min-height: 1px; }
.mcol span { font-size: 10px; color: var(--ink-3); }

a { color: var(--accent-txt); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Dentro de una tabla, una columna entera de enlaces naranjas es una columna
   entera de ruido: el naranja deja de señalar nada. Ahí el enlace se lee en
   tinta y solo se pinta al pasarle por encima. */
table a, .tabla a { color: var(--ink); }
table a:hover, .tabla a:hover { color: var(--accent-txt); }

/* ── Canales y venta sugestiva ──────────────────────────────────────── */
.canales { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 4px; }
.canal-col { background: var(--surface-sunk); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.canal-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.canal-head b { font-size: 12.5px; }
.canal-head span { font-size: 11px; }
.canal-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.canal-top li { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.canal-top li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.canal-top li b { font-size: 11.5px; color: var(--ink); }

.sugerencias { display: grid; gap: 10px; margin-top: 4px; }
.sug { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
       background: var(--accent-soft); border-radius: 10px; padding: 11px 14px; font-size: 13px; }
.sug-n { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--sobre-accent);
         font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.sug .t-dim { font-size: 11.5px; margin-top: 2px; }

/* ── Formulario de promociones ──────────────────────────────────────── */
.promo-form { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 12px; align-items: end; margin-top: 4px; }
.promo-form label { display: grid; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-3); position: relative; }
.promo-form .search-res { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin-top: 4px; max-height: 260px; overflow-y: auto; box-shadow: var(--shadow-up); border-radius: var(--r-sm); }
@media (max-width: 900px) { .promo-form { grid-template-columns: 1fr; } }

/* ── Ver en el teléfono ─────────────────────────────────────────────── */
.qr-box { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.qr-img { background: #fff; padding: 10px; border-radius: 12px; border: 1px solid var(--line); line-height: 0; }
.qr-url { font-size: 19px; font-weight: 600; letter-spacing: -.5px; margin-top: 4px; }
.pasos { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 7px; font-size: 13.5px; }
.pasos li { padding-left: 2px; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1180px) { .g5 { grid-template-columns: repeat(3, minmax(0,1fr)); } .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* ══════════════════════ TELÉFONO ══════════════════════════════════════
   No es el escritorio encogido: es otra app. Barra inferior fija como
   cualquier aplicación nativa, métricas de dos en dos, y el pulgar siempre
   cerca de la navegación. */
.mnav, .msheet, .mtop { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .rail { display: none; }

  /* Cabecera compacta */
  .mtop {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface-rail); color: var(--ink-on-dark);
    padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
    position: sticky; top: 0; z-index: 30;
  }
  .mtop .brand-dot { width: 18px; height: 18px; border-radius: 5px; }
  .mtop-name { font-size: 13px; font-weight: 620; letter-spacing: -.2px; }
  .mtop-client { font-size: 11px; color: var(--ink-on-dark-2); margin-left: auto;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
  .mtop button { background: rgba(255,255,255,.12); border: 0; color: var(--ink-on-dark);
                 border-radius: 7px; padding: 5px 9px; font-size: 13px; cursor: pointer; }

  .topbar {
    position: static; padding: 14px 16px 12px; gap: 8px;
    border-bottom: 1px solid var(--line);
  }
  .topbar > div:first-child { flex: 1 1 100%; }
  .page-title { font-size: 24px; }
  .topbar .btn, .topbar .seg { display: none; }

  .content { padding: 14px 16px calc(76px + env(safe-area-inset-bottom)); gap: 14px; }

  /* Métricas de dos en dos: el dueño ve los cuatro números sin bajar */
  .g3, .g4, .g5 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .g2, .span2 { grid-template-columns: 1fr; grid-column: auto; }
  .metric { padding: 12px 13px 11px; }
  .metric-label { font-size: 9px; letter-spacing: .8px; }
  .metric-value { font-size: 21px; letter-spacing: -.6px; }
  .metric-foot { font-size: 11px; gap: 6px; flex-wrap: wrap; }
  .metric-spark { height: 22px; }

  .card { padding: 15px 16px; border-radius: 12px; }
  .card-title { font-size: 13px; }
  .card-note { font-size: 10.5px; }
  .table-wrap { margin: 0 -16px; padding: 0 16px; }
  table.t { font-size: 12.5px; }
  table.t th { font-size: 9px; }
  table.t td { padding: 8px 10px; }
  .bar-row { grid-template-columns: minmax(72px, 1fr) 2fr auto; gap: 8px; }
  .bar-lbl, .bar-val { font-size: 11.5px; }
  .heat td.cell { padding: 6px 4px; font-size: 10px; }
  .heat td.hour { font-size: 10px; padding-right: 5px; }
  .modal { padding: 0; }
  .modal-box { border-radius: 0; min-height: 100vh; padding: 18px 16px calc(80px + env(safe-area-inset-bottom)); }

  /* Barra inferior fija */
  .mnav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--surface); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mnav a, .mnav button {
    background: none; border: 0; font: inherit; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 2px 7px; color: var(--ink-3); text-decoration: none;
    font-size: 10px; position: relative;
  }
  .mnav .i { font-size: 17px; line-height: 1; }
  .mnav .on { color: var(--ink); font-weight: 620; }
  .mnav .on .i { color: var(--s1); }
  .mnav .pip {
    position: absolute; top: 5px; right: 50%; transform: translateX(16px);
    background: var(--critical); color: #fff; border-radius: 10px;
    font-size: 9px; font-weight: 700; padding: 0 5px; min-width: 15px; text-align: center;
  }

  /* Hoja "Más" */
  .msheet { display: block; position: fixed; inset: 0; z-index: 50; visibility: hidden; }
  .msheet[data-open="1"] { visibility: visible; }
  .msheet-bg { position: absolute; inset: 0; background: rgba(12,15,20,.5); opacity: 0; transition: opacity .18s; }
  .msheet[data-open="1"] .msheet-bg { opacity: 1; }
  .msheet-box {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--surface); border-radius: 16px 16px 0 0;
    padding: 8px 12px calc(16px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .22s cubic-bezier(.32,.72,0,1);
    /* Con la caja de preguntas adentro, la hoja puede crecer más que la
       pantalla. Sin esto los resultados quedaban fuera de vista y no había
       forma de llegar a ellos. */
    max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .msheet[data-open="1"] .msheet-box { transform: translateY(0); }
  .msheet-grip { width: 36px; height: 4px; border-radius: 3px; background: var(--line-strong); margin: 6px auto 12px; }
  .msheet a {
    display: flex; align-items: center; gap: 12px; padding: 13px 8px;
    color: var(--ink); text-decoration: none; font-size: 15px;
    border-bottom: 1px solid var(--line);
  }
  .msheet a:last-child { border-bottom: 0; }
  .msheet a .i { font-size: 17px; width: 22px; text-align: center; color: var(--ink-3); }
}
@media print {
  .rail, .topbar .seg, .btn { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .card { break-inside: avoid; border-color: #ccc; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Aviso breve del menú nativo (ventana de escritorio) */
#bv-aviso {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 900;
}
#bv-aviso.visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { #bv-aviso { transition: none; } }

/* Tarjeta que señala un dato faltante que distorsiona el número mostrado */
.card.card-warn {
  border-left: 3px solid var(--warn);
  background: var(--warn-bg);
}
.card.card-warn .card-title { color: var(--warn); }

/* ── Brief de apertura ──────────────────────────────────────────────── */
/* La conclusión de la pantalla no puede pesar lo mismo que una métrica
   suelta: va sobre fondo de acento, con la frase en serif y grande. */
.brief {
  background: var(--hero);
  box-shadow: var(--shadow-up);
  padding: 24px 26px;
}
.brief .card-title { color: var(--hero-ink); }
.brief .card-note  { color: var(--hero-ink-3); }
.brief-line {
  font-family: var(--display);
  margin: 0 0 8px;
  font-size: 21px;
  line-height: 1.38;
  color: var(--hero-ink);
  letter-spacing: -.2px;
  text-wrap: balance;
}
.brief-line.t-dim { font-size: 14px; color: var(--hero-ink-2); }
.brief-line b { font-weight: 600; }
.brief-line a { color: var(--hero-ink); text-decoration: underline; text-underline-offset: 3px; }
.brief-line .up   { color: var(--hero-up); }
.brief-line .down { color: var(--hero-down); }
.brief-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.brief-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--hero-ink-3);
  border-radius: 999px;
  font-size: 12px;
  color: var(--hero-ink);
  font-variant-numeric: tabular-nums;
}
.brief-chip .t-dim { color: var(--hero-ink-3); }

/* ── Operación en vivo ──────────────────────────────────────────────── */
.live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.live-tile {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface-sunk);
}
.live-good     { border-left-color: var(--good); }
.live-warn     { border-left-color: var(--warn); }
.live-critical { border-left-color: var(--critical); }

.live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.live-monto {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.live-monto .delta { font-size: 12px; margin-left: 6px; }
.live-rows {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  font-size: 12px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.live-rows span:nth-child(even) { color: var(--ink); text-align: right; }
.live-note {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Barra de avance de la actualización ────────────────────────────── */
#bv-progreso {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 14px);
  width: min(420px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 12px 14px 11px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 950;
}
#bv-progreso.visible { opacity: 1; transform: translate(-50%, 0); }

.bp-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.bp-paso {
  font-size: 13px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-n {
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.bp-riel {
  height: 4px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.bp-barra {
  height: 100%;
  width: 2%;
  background: var(--accent);
  border-radius: 4px;
  transition: width .35s ease;
}
#bv-progreso[data-estado="ok"]    .bp-barra { background: var(--good); }
#bv-progreso[data-estado="ok"]    .bp-paso  { color: var(--good); }
#bv-progreso[data-estado="error"] .bp-barra { background: var(--critical); }
#bv-progreso[data-estado="error"] .bp-paso  { color: var(--critical); white-space: normal; }

@media (max-width: 720px) {
  /* Encima de la barra de navegación del teléfono */
  #bv-progreso { bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  #bv-progreso, .bp-barra { transition: none; }
}

/* ── Selector de período ────────────────────────────────────────────── */
.per {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  margin-right: 10px;
}
.per-op {
  padding: 7px 11px;
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  border-right: 1px solid var(--line);
}
.per-op:last-child { border-right: 0; }
.per-op:hover { background: var(--surface-sunk); color: var(--ink); }
.per-op.on {
  background: var(--accent);
  color: var(--sobre-accent);
  font-weight: 600;
}
@media (max-width: 980px) {
  /* En pantallas angostas el selector baja a su propia fila y se desliza */
  .per { max-width: 100%; overflow-x: auto; margin: 0 0 10px; }
}
.page-per { color: var(--ink-3); }

/* ── Franja de contexto temporal ─────────────────────────────────────
   Resumen del día y En vivo se leían como la misma pantalla. Esto dice, de
   entrada, de qué día habla cada una. */
.franja {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink-2);
  padding: 9px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
  width: fit-content;
  max-width: 100%;
}
.franja b { color: var(--ink); font-weight: 600; }
.franja a { color: var(--accent-txt); }
.franja-cerrado { background: var(--surface); box-shadow: var(--shadow); }
.franja-vivo    { background: var(--accent-soft); color: var(--accent-txt); }
.franja-vivo b  { color: var(--accent-txt); }

.franja-punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-3); flex-shrink: 0;
}
.franja-punto.vive { background: var(--good); animation: latir 2.4s ease-in-out infinite; }
@keyframes latir { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .franja-punto.vive { animation: none } }
.chip-vivo {
  background: var(--accent-soft);
  color: var(--accent-txt);
  border: 1px solid var(--accent-line);
}

/* ── Tramos de antigüedad de lo que quedó abierto ────────────────────── */
.pend-tramos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.pend-tramo {
  border-radius: var(--r);
  padding: 14px 15px;
  border-left: 3px solid var(--line-strong);
  background: var(--surface-sunk);
}
.pend-tramo.pend-warn     { border-left-color: var(--warn);     background: var(--warn-bg); }
.pend-tramo.pend-serious  { border-left-color: var(--serious);  background: var(--serious-bg); }
.pend-tramo.pend-critical { border-left-color: var(--critical); background: var(--critical-bg); }
.pend-n {
  font-family: var(--display);
  font-size: 26px; font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pend-et { font-size: 12px; font-weight: 600; margin-top: 5px; }
.pend-m  { font-size: 11px; color: var(--ink-2); margin-top: 3px;
           font-variant-numeric: tabular-nums; }

/* ── Encabezados ordenables ──────────────────────────────────────────── */
.th-orden { cursor: pointer; user-select: none; position: relative; }
.th-orden:hover { color: var(--ink); }
.th-orden::after {
  content: '↕';
  margin-left: 5px;
  font-size: 9px;
  opacity: .28;
}
.th-orden[data-dir="asc"]::after  { content: '↑'; opacity: 1; color: var(--accent-txt); }
.th-orden[data-dir="desc"]::after { content: '↓'; opacity: 1; color: var(--accent-txt); }
.th-orden[data-dir] { color: var(--ink); }

/* ── Matriz tienda × día ─────────────────────────────────────────────── */
.t-matriz { font-size: 12px; }
.t-matriz td, .t-matriz th { padding: 6px 9px; white-space: nowrap; }
.celda-pico {
  background: var(--accent-soft);
  color: var(--accent-txt);
  font-weight: 600;
}
.fila-total td {
  border-top: 2px solid var(--line-strong);
  font-weight: 600;
  background: var(--surface-sunk);
}

.filtro-tiendas { position: relative; display: inline-block; }
.btn-chico { font-size: 11.5px; padding: 5px 11px; }
.filtro-panel {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow-up);
  padding: 12px;
  min-width: 220px; max-height: 320px; overflow-y: auto;
}
.filtro-acciones { display: flex; gap: 6px; margin-bottom: 10px; }
.filtro-acciones .btn { flex: 1; }
.filtro-lista { display: grid; gap: 2px; }
.filtro-lista label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; padding: 3px 2px; cursor: pointer;
}
.filtro-lista input { accent-color: var(--accent); }

/* ── Cascada de la venta al resultado ────────────────────────────────── */
.cascada { display: grid; gap: 1px; background: var(--line); border-radius: var(--r); overflow: hidden; }
.paso {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  background: var(--surface); padding: 11px 15px; font-size: 13px;
}
.paso-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.paso-fuerte { background: var(--surface-sunk); font-weight: 600; }
.paso-fuerte .paso-val { font-family: var(--display); font-size: 17px; }

/* ── Selector de métrica ─────────────────────────────────────────────── */
.metricas { display: flex; flex-wrap: wrap; gap: 6px; }
.met {
  font-size: 11.5px; padding: 6px 11px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-strong); border-radius: 999px;
  cursor: pointer; font-family: inherit;
}
.met:hover { color: var(--ink); border-color: var(--ink-3); }
.met.on {
  background: var(--accent); color: var(--sobre-accent);
  border-color: var(--accent); font-weight: 600;
}

/* ======================= FICHA DEL CUADRO (? / IA) ======================= */
/* Dos botones diminutos junto al título. Tienen que estar siempre y no
   pesar nunca: quien ya sabe qué mira no debería verlos. */
.ficha-btns { display: inline-flex; gap: 5px; align-self: center; }
.ficha-b {
  font: 600 10.5px/1 var(--ui, inherit);
  letter-spacing: .3px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--ink-2);
  cursor: pointer; transition: color .12s, border-color .12s, background .12s;
}
.ficha-b:hover, .ficha-b:focus-visible {
  color: var(--accent-txt); border-color: var(--accent); background: var(--accent-soft);
  outline: none;
}
.ficha-b.on { color: var(--hero-ink); background: var(--hero); border-color: var(--hero); }
.ficha-ia { font-style: normal; }

/* El cajón lateral. En pantalla angosta sube desde abajo. */
.ficha-bg {
  position: fixed; inset: 0; background: rgba(26,23,20,.32);
  opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 80;
}
.ficha-bg[data-open="1"] { opacity: 1; pointer-events: auto; }
.ficha-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw);
  background: var(--surface); box-shadow: -18px 0 48px rgba(26,23,20,.16);
  transform: translateX(100%); transition: transform .2s ease;
  z-index: 81; display: flex; flex-direction: column;
}
.ficha-panel[data-open="1"] { transform: none; }
.ficha-top {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 22px 14px; border-bottom: 1px solid var(--line);
}
.ficha-kicker {
  font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 4px;
}
.ficha-h { font-family: var(--display); font-size: 17px; font-weight: 600; margin: 0; }
.ficha-x {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: var(--ink-3); font-size: 20px; line-height: 1; padding: 2px 4px;
}
.ficha-x:hover { color: var(--ink); }
.ficha-cuerpo { padding: 18px 22px 28px; overflow-y: auto; }
.ficha-campo { margin-bottom: 16px; }
.ficha-campo:last-child { margin-bottom: 0; }
.ficha-et {
  font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--accent-txt); font-weight: 600; margin: 0 0 4px;
}
.ficha-tx { font-size: 13px; line-height: 1.55; color: var(--ink); margin: 0; white-space: pre-line; }
.ficha-tx.mute { color: var(--ink-2); }
.ficha-nota {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-3); line-height: 1.5;
}
@media (max-width: 720px) {
  .ficha-panel {
    top: auto; left: 0; width: 100%; max-height: 82vh; border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
}

/* ===================== CUADRANTES DE PRODUCTO ========================== */
.cuadros {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px; margin-bottom: 18px;
}
@media (max-width: 860px) { .cuadros { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.cuad {
  background: var(--surface-sunk); padding: 14px 15px 15px;
  border-radius: var(--r-md); border-top: 3px solid var(--line-strong);
}
.cuad-estrella { border-top-color: var(--good); }
.cuad-caballo  { border-top-color: var(--warn); }
.cuad-enigma   { border-top-color: var(--accent); }
.cuad-perro    { border-top-color: var(--critical); }
.cuad-n {
  font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.cuad-c {
  font-family: var(--display); font-size: 26px; line-height: 1.1;
  margin: 4px 0 2px; font-variant-numeric: tabular-nums;
}
.cuad-v { font-size: 11.5px; color: var(--ink-2); }
.cuad-a { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); margin: 9px 0 0; }
/* Un cuadrante vacío se muestra igual: que falte la caja del Caballo hace
   pensar que la app la perdió, cuando lo que pasó es que ese período no tuvo
   ningún producto de mucha venta y poco margen. */
.cuad-cero .cuad-c { color: var(--ink-4); }
.cuad-cero { opacity: .72; }

/* ===================== GAP DE APERTURA ================================= */
.gap-barra { width: 42%; min-width: 90px; padding-right: 0 !important; }
.gap-b { display: block; height: 9px; border-radius: 999px; min-width: 3px; }
.gap-good     { background: var(--good); }
.gap-warn     { background: var(--warn); }
.gap-critical { background: var(--critical); }

/* ===================== EXPORTAR A CSV ================================== */
/* Va al final del encabezado, después de la nota: presente sin competir con
   el título. Quien no lo necesita no lo ve; quien lo busca lo encuentra. */
.btn-csv {
  margin-left: 10px; align-self: center;
  font: 600 11px/1 var(--ui, inherit); letter-spacing: .04em;
  padding: 5px 11px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--ink-3);
  transition: color .12s, border-color .12s, background .12s;
  white-space: nowrap;
}
.card-note + .btn-csv { margin-left: 10px; }
.card-head > .btn-csv:not(.card-note + .btn-csv) { margin-left: auto; }
.btn-csv:hover, .btn-csv:focus-visible {
  color: var(--accent-txt); border-color: var(--accent); background: var(--accent-soft);
  outline: none;
}
.btn-csv[data-ok="1"] { color: var(--good); border-color: var(--good); background: transparent; }

/* ── Modo anotar ──────────────────────────────────────────────────────────
   Encendido, todo el tablero se vuelve clicable para dejar una nota. La
   señal tiene que ser inequívoca —el cursor cambia y la tarjeta se levanta al
   pasar— o se toca un gráfico creyendo que va a filtrar. */
body[data-anotar="1"] .content { cursor: crosshair; }
body[data-anotar="1"] .metric,
body[data-anotar="1"] .alert-row,
body[data-anotar="1"] .brief-chip,
body[data-anotar="1"] .franja,
body[data-anotar="1"] .card,
body[data-anotar="1"] .sug-item,
body[data-anotar="1"] .pend-tramo,
body[data-anotar="1"] .heat,
body[data-anotar="1"] .table-wrap,
body[data-anotar="1"] .bars,
body[data-anotar="1"] .callout,
body[data-anotar="1"] .live-row { position: relative; }

/* Gana la pieza más chica bajo el cursor: el resaltado se apaga en la que la
   contiene, o al pasar por una cifra se encenderían las dos a la vez. */
body[data-anotar="1"] .metric:hover,
body[data-anotar="1"] .alert-row:hover,
body[data-anotar="1"] .brief-chip:hover,
body[data-anotar="1"] .franja:hover,
body[data-anotar="1"] .card:hover,
body[data-anotar="1"] .sug-item:hover,
body[data-anotar="1"] .pend-tramo:hover,
body[data-anotar="1"] .heat:hover,
body[data-anotar="1"] .table-wrap:hover,
body[data-anotar="1"] .bars:hover,
body[data-anotar="1"] .callout:hover,
body[data-anotar="1"] .live-row:hover {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}
body[data-anotar="1"] .card:has(.metric:hover),
body[data-anotar="1"] .card:has(.alert-row:hover),
body[data-anotar="1"] .card:has(.brief-chip:hover),
body[data-anotar="1"] .card:has(.table-wrap:hover),
body[data-anotar="1"] .card:has(.bars:hover),
body[data-anotar="1"] .card:has(.heat:hover),
body[data-anotar="1"] .card:has(.pend-tramo:hover),
body[data-anotar="1"] .card:has(.live-row:hover) { outline: none; }

body[data-anotar="1"] .content a,
body[data-anotar="1"] .content button:not(.nota-marca),
body[data-anotar="1"] .content select,
body[data-anotar="1"] .content input { pointer-events: none; }

#bvAnotarBtn.on { background: var(--accent); color: var(--sobre-accent); border-color: var(--accent); }

/* La cuenta de notas del cuadro: chica, al lado del título, siempre visible
   —también con el modo apagado— para no perder de vista lo ya anotado. */
/* El globito va en la esquina de la pieza, no junto al título: así también
   marca una cifra suelta o una fila, que no tienen título propio. */
.nota-marca {
  position: absolute; top: -8px; right: -8px; z-index: 5;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 20px; border: 2px solid var(--surface); cursor: pointer;
  background: var(--accent); color: var(--sobre-accent);
  font-family: var(--sans); font-size: 10.5px; font-weight: 700; line-height: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.notas-cuenta {
  margin-left: 6px; padding: 1px 6px; border-radius: 20px;
  background: var(--accent); color: var(--sobre-accent);
  font-family: var(--sans); font-size: 10px; font-weight: 700;
}

/* El cuadro para escribir la nota. Va con estilo propio porque el prompt del
   navegador no existe en la ventana nativa de macOS: llamarlo cierra la app. */
.nota-dlg {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(40,32,24,.42); padding: 20px;
}
.nota-dlg-caja {
  width: min(460px, 100%); background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-up); padding: 20px 22px 18px;
}
.nota-dlg-k {
  margin: 0 0 4px; font-family: var(--sans); font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-txt);
}
.nota-dlg-h {
  margin: 0 0 12px; font-family: var(--sans); font-size: 17px; font-weight: 620;
  line-height: 1.25; letter-spacing: -.2px;
}
.nota-dlg-previas { margin-bottom: 12px; }
.nota-dlg-previas ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.nota-dlg-previas li { margin-bottom: 3px; }
.nota-dlg-txt {
  width: 100%; resize: vertical; font: inherit; font-size: 14px;
  color: var(--ink); background: var(--surface-sunk);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 10px 12px;
}
.nota-dlg-txt:focus { outline: none; border-color: var(--accent); }
.nota-dlg-pie { display: flex; align-items: center; gap: 8px; margin-top: 14px; }

.bv-aviso {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 210;
  background: var(--surface-rail); color: var(--ink-on-dark);
  font-family: var(--sans); font-size: 13px; padding: 10px 18px;
  border-radius: 24px; box-shadow: var(--shadow-up);
}

/* ── Cifra abrible y su panel de detalle ─────────────────────────────── */
.metric-abrible { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.metric-abrible:hover { border-color: var(--accent-line); box-shadow: var(--shadow-up); }
.metric-abrible:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.metric-lupa {
  float: right; font-size: 9px; font-weight: 700; letter-spacing: .9px;
  text-transform: uppercase; color: var(--accent-txt); opacity: 0; transition: opacity .12s;
}
.metric-abrible:hover .metric-lupa, .metric-abrible:focus-visible .metric-lupa { opacity: 1; }

/* Los extremos de la línea: sin esto no se sabe qué días ni qué montos son. */
.spark-ejes {
  display: flex; justify-content: space-between; gap: 8px;
  font-family: var(--sans); font-size: 9.5px; color: var(--ink-3);
  margin-top: 3px; font-variant-numeric: tabular-nums;
}
.spark-ejes .spark-y { color: var(--ink-2); }

.det-bg {
  position: fixed; inset: 0; z-index: 180;
  background: rgba(40,32,24,.38); display: flex; justify-content: flex-end;
}
.det-panel {
  width: min(680px, 100%); height: 100%; overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-up); padding: 22px 26px 40px;
}
.det-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.det-kicker {
  margin: 0 0 3px; font-family: var(--sans); font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-txt);
}
.det-h {
  margin: 0; font-family: var(--sans); font-size: 20px; font-weight: 640;
  letter-spacing: -.3px; line-height: 1.2;
}
.det-val {
  margin: 4px 0 0; font-family: var(--sans); font-size: 26px; font-weight: 600;
  letter-spacing: -.6px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.det-x {
  margin-left: auto; width: 30px; height: 30px; flex: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-sunk); color: var(--ink-2); font-size: 17px; line-height: 1;
}
.det-x:hover { color: var(--ink); border-color: var(--line-strong); }
.det-cuerpo .card { border: 0; box-shadow: none; padding: 0; margin-bottom: 22px; }
.det-nota {
  font-size: 13px; line-height: 1.6; color: var(--ink-2); margin: 0 0 16px;
}
@media (max-width: 720px) { .det-panel { width: 100%; padding: 18px 16px 40px; } }
.brief-fuente {
  margin: 10px 0 0; font-size: 11.5px; line-height: 1.6;
  color: var(--hero-ink-3); max-width: 76ch;
}
.brief-fuente b { color: var(--hero-ink-2); font-weight: 600; }
.t-critical { color: var(--critical); }

/* Una línea de «Requiere acción» que se abre */
.alert-abrible { cursor: pointer; }
.alert-abrible:hover { background: var(--accent-soft); }
.alert-abrible:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.alert-lupa {
  margin-left: auto; align-self: center; flex: none;
  font-family: var(--sans); font-size: 9.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--accent-txt);
  opacity: 0; transition: opacity .12s;
}
.alert-abrible:hover .alert-lupa, .alert-abrible:focus-visible .alert-lupa { opacity: 1; }

/* Ficha de dos columnas dentro del panel: etiqueta y valor */
.t-fichas { width: 100%; border-collapse: collapse; font-size: 14px; }
.t-fichas td { padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.t-fichas .det-k {
  width: 34%; padding-right: 14px; color: var(--ink-3);
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; padding-top: 12px;
}

/* Las barras partidas por franja: los segmentos van dentro de la pista y la
   pista se encoge al valor, en vez de ocupar todo el ancho. */
.bars-franja .bar-track { display: flex; overflow: hidden; }
.bars-franja .bar-track i { height: 100%; display: block; }

/* Dentro de la tarjeta oscura, los botones de ayuda iban en tinta sobre
   carbón: invisibles. Ahí heredan los colores del fondo oscuro. */
.brief .ficha-b, .hero .ficha-b {
  color: var(--hero-ink-2); border-color: rgba(255,255,255,.22);
}
.brief .ficha-b:hover, .hero .ficha-b:hover {
  color: var(--hero-ink); border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.08);
}

/* ── Cambio de período y de pantalla ─────────────────────────────────── */
/* Mientras llega el contenido nuevo, el viejo se apaga un poco en vez de
   desaparecer. Sin esto el cambio se ve como un parpadeo en blanco. */
.main { transition: opacity .12s ease; }
body[data-cargando="1"] .main { opacity: .45; pointer-events: none; }
body[data-cargando="1"] { cursor: progress; }

/* El botón tocado dice que está trabajando, para que el clic no parezca perdido */
.per-op[data-cargando], .nav-item[data-cargando] { position: relative; }
.per-op[data-cargando]::after, .nav-item[data-cargando]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent);
  animation: bv-cargando .9s ease-in-out infinite;
}
@keyframes bv-cargando {
  0%   { transform: scaleX(0); transform-origin: left; }
  50%  { transform: scaleX(1); transform-origin: left; }
  100% { transform: scaleX(0); transform-origin: right; }
}
@media (prefers-reduced-motion: reduce) {
  .main { transition: none; }
  .per-op[data-cargando]::after, .nav-item[data-cargando]::after { animation: none; }
}

/* ── Elegir el formato de exportación ────────────────────────────────── */
.exp-menu {
  position: absolute; z-index: 190; min-width: 250px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-up); padding: 5px;
  display: grid; gap: 2px;
}
.exp-menu button {
  display: grid; gap: 1px; text-align: left; width: 100%;
  padding: 9px 11px; border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer; font-family: inherit; color: var(--ink);
}
.exp-menu button:hover { background: var(--accent-soft); }
.exp-menu button b { font-family: var(--sans); font-size: 13px; font-weight: 620; }
.exp-menu button span { font-size: 11.5px; color: var(--ink-2); }
.btn[data-cargando] { opacity: .6; pointer-events: none; }

/* Una tarjeta de tienda en En vivo también se abre */
.live-tile.metric-abrible { cursor: pointer; }
.live-tile.metric-abrible:hover { border-color: var(--accent-line); box-shadow: var(--shadow-up); }
.live-tile.metric-abrible:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* El botón "Ver por tienda" del gráfico de ritmo */
.card-head .btn-csv[data-det-tit] { margin-left: 8px; }

/* Encabezados y casilla dentro del menú de exportar */
.exp-tit {
  margin: 6px 0 3px; padding: 0 11px;
  font-family: var(--sans); font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3);
}
.exp-tit:first-child { margin-top: 2px; }
.exp-donde {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 11px 9px; margin: 2px 0 4px;
  font-size: 12.5px; color: var(--ink-2);
  border-bottom: 1px solid var(--linea, var(--line));
}
.exp-donde input { accent-color: var(--accent); margin: 0; }

/* Detalle plegable dentro de un panel: está, pero no ocupa hasta que se pide */
.mas > summary {
  cursor: pointer; list-style: none; padding: 9px 0;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--accent-txt);
}
.mas > summary::-webkit-details-marker { display: none; }
.mas > summary::before { content: "▸ "; display: inline-block; transition: transform .12s; }
.mas[open] > summary::before { content: "▾ "; }
.mas > summary:hover { text-decoration: underline; }

/* Texto apagado DENTRO de la tarjeta oscura. El t-dim de siempre usa la tinta
   del papel y sobre el carbón desaparece. */
.brief .hero-dim, .hero .hero-dim { color: var(--hero-ink-2); }

/* Fila que esconde su desglose */
tr.fila-abre { cursor: pointer; }
tr.fila-abre:hover > td { background: var(--accent-soft); }
tr.fila-abre > td:first-child::before {
  content: "▸"; display: inline-block; width: 14px; color: var(--accent-txt);
  font-size: 11px; transition: transform .12s;
}
tr.fila-abre[data-abierta="1"] > td:first-child::before { content: "▾"; }
tr.fila-sub > td { padding: 0 0 14px; background: var(--surface-sunk); }
tr.fila-sub .sub-caja { padding: 4px 14px 0; }
tr.fila-sub table.t { font-size: 13px; }

/* La lista de «esto está cargado pero no cuadra» del aviso de configuración. */
.lista-rev { margin: 4px 0 0; padding-left: 18px; }
.lista-rev li { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }

/* El buscador de productos: campo y botón en una sola línea. */
.buscador { display: flex; gap: 8px; align-items: center; max-width: 520px; }

/* Las notas del dueño van en azul y las del consultor en naranja. No es
   decoración: los dos pueden estar anotando la misma app y hay que saber de
   quién es cada observación de un vistazo. Cada perfil guarda en su propia
   llave del navegador, así que ninguno ve las del otro. */
:root { --nota-dueno: #1D6FD1; --nota-dueno-sobre: #0E4E9B; }
body[data-perfil-notas="dueno"] .nota-marca,
body[data-perfil-notas="dueno"] .notas-cuenta {
  background: var(--nota-dueno);
  color: #fff;
}
body[data-perfil-notas="dueno"] #bvAnotarBtn.on {
  background: var(--nota-dueno);
  border-color: var(--nota-dueno-sobre);
  color: #fff;
}
body[data-perfil-notas="dueno"][data-anotar="1"] .metric:hover,
body[data-perfil-notas="dueno"][data-anotar="1"] .card:hover {
  outline-color: var(--nota-dueno);
}
body[data-perfil-notas="dueno"] .nota-dlg h3::after {
  content: " · sus notas";
  color: var(--nota-dueno);
  font-weight: 600;
}
.quien-nota {
  padding: 3px 9px; border-radius: 20px;
  background: var(--nota-dueno); color: #fff;
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .2px; white-space: nowrap;
}

/* El panel de detalle en el teléfono.

   En el celular el panel se abría pero las tablas anchas —tienda por forma de
   pago, hora por hora— se salían del borde sin dejar arrastrarlas, así que
   parecía que no había datos. Acá se le da su propio scroll horizontal a cada
   tabla, se sube el panel desde abajo en vez de desde el costado (que es el
   gesto que el teléfono espera) y se agranda el botón de cerrar hasta el
   tamaño de un dedo. */
@media (max-width: 720px) {
  .det-bg { align-items: flex-end; }
  .det-panel {
    width: 100%; height: 92vh; border-left: 0;
    border-top-left-radius: 16px; border-top-right-radius: 16px;
    -webkit-overflow-scrolling: touch;
  }
  .det-panel .table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin-left: -16px; margin-right: -16px; padding: 0 16px;
  }
  .det-panel table.t { min-width: max-content; }
  .det-panel table.t th, .det-panel table.t td {
    white-space: nowrap; font-size: 12.5px;
  }
  .det-x { width: 42px; height: 42px; font-size: 22px; }
  .det-h { font-size: 17px; }
  .det-val { font-size: 21px; }
  /* El asa de arrastre: dice que el panel se puede cerrar tirando hacia abajo. */
  .det-panel::before {
    content: ""; display: block; width: 38px; height: 4px; margin: 0 auto 12px;
    border-radius: 4px; background: var(--line-strong);
  }
}

/* Los pasos para conectar el teléfono desde fuera del local. */
.pasos { margin: 14px 0 0; padding-left: 20px; }
.pasos li { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); margin-bottom: 9px; }
.pasos-notas { margin: 6px 0 14px; padding-left: 20px; }
.pasos-notas li { font-size: 12.5px; line-height: 1.65; color: var(--ink-3); margin-bottom: 6px; }
.url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; padding: 1px 5px; border-radius: 5px;
  background: var(--surface-sunk); color: var(--ink);
  border: 1px solid var(--line); word-break: break-all;
}

/* El mapa de horas de un producto, dentro del panel de detalle. */
.ph-tabla th { font-size: 10.5px; color: var(--ink-3); font-weight: 600; }
.ph-tabla td.ph-c {
  width: 20px; height: 20px; padding: 0;
  border: 1px solid var(--surface);
  background: color-mix(in srgb, var(--accent) calc(var(--i) * 100%), var(--surface-sunk));
}
.ph-mapa { margin-top: 6px; }

/* Los botones de recibo, uno por colaborador. */
.recibos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* La pestaña de configuración: cada apartado con su estado. */
.cfg-lista { display: grid; gap: 14px; }
.cfg-item { display: grid; gap: 6px; }
.cfg-top { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.cfg-donde { margin: 0; font-size: 11.5px; color: var(--ink-3); }
.cfg-det .t-fichas { width: 100%; }

/* Anotar y Notas en la barra del teléfono.

   La barra de escritorio se esconde entera en pantallas chicas, y con ella se
   iba el botón de anotar — que es justamente para lo que alguien recibe este
   tablero. Acá van como íconos, con el contador de notas encima. */
.mtop #bvAnotarBtnM.on {
  background: var(--accent);
  color: var(--sobre-accent);
}
body[data-perfil-notas="dueno"] .mtop #bvAnotarBtnM.on {
  background: var(--nota-dueno);
  color: #fff;
}
.mtop button { position: relative; }
.mtop .notas-cuenta {
  position: absolute; top: -4px; right: -4px; margin: 0;
  min-width: 15px; padding: 0 4px; font-size: 9.5px; line-height: 15px;
}
/* Anotando, el aviso de que se está anotando también tiene que verse acá. */
@media (max-width: 900px) {
  body[data-anotar="1"] .mtop { background: var(--accent); }
  body[data-perfil-notas="dueno"][data-anotar="1"] .mtop {
    background: var(--nota-dueno);
  }
}

/* Las notas recibidas, tal cual las mandó cada persona. */
.notas-texto {
  margin: 10px 0 0; padding: 14px 16px; border-radius: 10px;
  background: var(--surface-sunk); border: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.65; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}

/* El aviso de versión nueva, abajo y sin tapar nada importante. */
.bv-version {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 300;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-up); font-size: 13px; color: var(--ink);
  max-width: min(92vw, 520px);
}
.bv-version .btn { padding: 6px 12px; font-size: 12.5px; }
@media (max-width: 900px) { .bv-version { bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* Una nota ya enviada se ve distinta de una que falta por mandar: así se
   sabe de un vistazo si queda algo pendiente sin abrir cada cuadro. */
.nota-marca-ok {
  background: var(--good);
  color: #fff;
}

/* Las burbujas de las notas de otras personas: azules, a la izquierda de las
   propias, para no confundir lo que uno pidió con lo que pidieron los demás. */
.nota-marca-otros {
  right: auto; left: -8px;
  background: var(--nota-dueno); color: #fff;
}
.nota-ajena {
  padding: 12px 14px; margin-bottom: 10px; border-radius: 10px;
  background: var(--surface-sunk); border: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.6; color: var(--ink);
}
.nota-ajena-quien {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase;
  color: var(--nota-dueno); margin-bottom: 5px;
}
#bvVerTodasBtn.on { background: var(--nota-dueno); border-color: var(--nota-dueno); color: #fff; }

/* La confirmación de borrar un acceso: que se vea que está esperando. */
.acc-confirmar {
  background: var(--critical) !important;
  border-color: var(--critical) !important;
  color: #fff !important;
}
.acc-acciones { white-space: nowrap; }
.acc-acciones .btn-csv { margin-right: 4px; }

/* ── Tablas en el teléfono ───────────────────────────────────────────────
   Una tabla de cinco columnas mide 500 píxeles y la pantalla tiene 375. El
   navegador entonces comprime cada columna hasta que el texto no cabe, y
   «TARJETA REGALO» se parte en dos o tres líneas: eso es lo que se ve como
   palabras encimadas y filas que crecen hacia abajo.

   La solución no es achicar la letra —quedaría ilegible— sino dejar que la
   tabla mida lo que necesite y que se arrastre de lado. Cada celda en una
   sola línea, y el contenedor con su propio scroll horizontal. */
@media (max-width: 900px) {
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Se sale del margen de la tarjeta para aprovechar todo el ancho. */
    margin-left: -13px;
    margin-right: -13px;
    padding-left: 13px;
    padding-right: 13px;
  }
  .table-wrap > table.t { min-width: max-content; }
  .table-wrap > table.t th,
  .table-wrap > table.t td { white-space: nowrap; }
  /* La primera columna suele ser el nombre y es la que uno busca al
     arrastrar: se queda fija a la izquierda. */
  .table-wrap > table.t th:first-child,
  .table-wrap > table.t td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
  }
  .table-wrap > table.t thead th:first-child { z-index: 3; }
  /* Un aviso de que la tabla se arrastra, la primera vez que se ve. */
  .table-wrap::after {
    content: "";
    position: sticky; right: 0; top: 0;
    display: block; width: 22px; height: 100%;
    pointer-events: none;
  }
}

/* El botón de volver, al final del panel de detalle. En el escritorio no hace
   falta —la X está a la vista— pero en el teléfono, después de leer una tabla
   larga, uno queda abajo del todo y la X quedó fuera de la pantalla. */
.det-volver {
  display: none;
  width: 100%; margin: 18px 0 8px; padding: 14px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--surface-sunk); color: var(--ink);
  font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer;
}
.det-volver:active { background: var(--line); }
@media (max-width: 900px) { .det-volver { display: block; } }

/* ── Encabezado de tarjeta en el teléfono ────────────────────────────────
   El encabezado es una fila: título, botones de ayuda, la nota y el botón de
   la derecha. En 375 píxeles los cuatro no caben y, como la fila no se parte,
   el navegador le deja 44 píxeles al título: «Venta por hora del día» baja
   convertido en una columna de palabras sueltas. Eso es lo que se veía como
   palabras encimadas.

   Acá la fila se parte: el título ocupa el ancho completo y lo demás pasa
   abajo, entero, sin comprimirse. */
@media (max-width: 900px) {
  .card-head { flex-wrap: wrap; row-gap: 8px; }
  .card-head > .card-title { flex: 1 1 100%; min-width: 0; }
  .card-head > .card-note,
  .card-head > .ficha-btns,
  .card-head > .btn-csv,
  .card-head > .btn { flex: 0 0 auto; }
}

/* ── Costos fijos: las columnas de cada tienda ───────────────────────────
   La tabla pasa de ocho columnas a ocho mas dos por cada local. Con 22
   tiendas son 52 columnas, asi que se arrastra de lado y lo de la izquierda
   —la cuenta y su nombre— se queda fijo: sin eso uno se pierde de cual fila
   esta llenando. */
#tablaCostos th.cf-grupo {
  text-align: center;
  background: var(--surface-sunk);
  border-left: 2px solid var(--line-strong);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#tablaCostos th.cf-t-cab { white-space: nowrap; }
#tablaCostos td.cf-t:nth-of-type(odd) { border-left: 2px solid var(--line-strong); }
#tablaCostos th, #tablaCostos td { white-space: nowrap; }
#tablaCostos th:nth-child(-n+3),
#tablaCostos td:nth-child(-n+3) {
  position: sticky;
  background: var(--surface);
  z-index: 2;
}
#tablaCostos th:nth-child(1), #tablaCostos td:nth-child(1) { left: 0; }
#tablaCostos th:nth-child(2), #tablaCostos td:nth-child(2) { left: 38px; }
#tablaCostos th:nth-child(3), #tablaCostos td:nth-child(3) {
  left: 130px;
  box-shadow: 1px 0 0 var(--line-strong);
}
#tablaCostos thead th { z-index: 3; }

/* Las dos filas del encabezado se apilan, no se tapan.
   La de arriba lleva el nombre del local y la de abajo dice si esa columna es
   monto o día. Las dos estaban pegadas con `top: 0`, así que al bajar por la
   tabla la segunda tapaba a la primera y se perdía justamente el dato que hace
   falta: en qué tienda se está escribiendo. */
#tablaCostos thead tr:first-child th {
  top: 0; height: 30px; z-index: 4;
}
#tablaCostos thead tr:nth-child(2) th {
  top: 30px; z-index: 3;
}
/* Con dos filas fijas más las de la cuenta, vale más alto para trabajar. */
#tablaCostos { --cf-cab: 60px; }
.table-wrap.cf-alto { max-height: min(70vh, 720px); }

/* ── Notas contestadas: el dorado ────────────────────────────────────────
   Alguien señala algo, nadie le dice nunca si se resolvió, y a la tercera
   deja de señalar. El dorado es la respuesta visible: la marca sobre el
   cuadro cambia de color cuando lo que pidió ya está hecho.

   El oro no es el naranja de marca a propósito: el naranja dice «tocá acá»
   y este dice «esto ya está». Si fueran el mismo color, ninguno significaría
   nada. */
:root {
  --oro:      #9A6B08;
  --oro-bg:   #FBF0D2;
  --oro-line: #E3C36A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --oro: #F0C567; --oro-bg: #3A2F14; --oro-line: #6E5A21;
  }
}
:root[data-theme="dark"] { --oro: #F0C567; --oro-bg: #3A2F14; --oro-line: #6E5A21; }

.nota-marca-oro {
  background: var(--oro) !important;
  color: #2E2308 !important;
  border-color: var(--oro-line) !important;
}

.chip-oro {
  display: inline-block; margin-left: 8px;
  background: var(--oro-bg); color: var(--oro);
  border: 1px solid var(--oro-line); border-radius: 999px;
  padding: 1px 9px; font-size: 11px; font-weight: 600;
  letter-spacing: .02em; vertical-align: 1px;
}

/* La respuesta, pegada a la nota que contesta. */
.nota-contesta {
  margin: 6px 0 2px; padding: 8px 11px;
  background: var(--surface-sunk); border-left: 3px solid var(--line-strong);
  border-radius: 0 8px 8px 0; font-size: 13.5px; color: var(--ink-2);
}
.nota-contesta.es-oro {
  background: var(--oro-bg); border-left-color: var(--oro);
}

.nota-ajena.nota-resuelta {
  border-left: 3px solid var(--oro);
  background: var(--oro-bg);
}
.nota-resp { width: 100%; margin-top: 9px; font-size: 14px; }
.nota-resp-pie {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 7px; font-size: 13px;
}
.nota-resp-pie .t-dim { margin-left: auto; }

/* Un borrador todavía no es una respuesta: lo escribió quien hizo el
   arreglo y falta que una persona lo apruebe. Se ve distinto del dorado a
   propósito — el dorado dice «ya está», esto dice «leelo antes». */
.chip-borrador {
  display: inline-block; margin-left: 8px;
  background: var(--surface-sunk); color: var(--ink-3);
  border: 1px dashed var(--line-strong); border-radius: 999px;
  padding: 1px 9px; font-size: 11px; font-weight: 600;
  letter-spacing: .02em; vertical-align: 1px;
}
.nota-resp.es-borrador {
  border-style: dashed;
  border-color: var(--line-strong);
  background: var(--surface-sunk);
}

/* A qué cuadro apunta la nota. Sin esto, en la bandeja se lee el reclamo
   pero no de dónde salió, y hay que adivinarlo. */
.nota-cuadro {
  font-size: 12px; color: var(--accent-txt); font-weight: 600;
  letter-spacing: .02em; margin-bottom: 4px;
}

/* ── Bandeja de notas: plegada por persona ───────────────────────────────
   Con ciento y pico de notas en una pantalla, contestar se vuelve bajar y
   bajar. Se abre sola la persona que tiene algo pendiente; lo ya resuelto
   queda guardado y a un clic. */
.notas-persona > details > summary.notas-cab {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  cursor: pointer; list-style: none; padding: 2px 0 10px;
}
.notas-persona > details > summary.notas-cab::-webkit-details-marker { display: none; }
.notas-persona > details > summary.notas-cab::before {
  content: "›"; font-size: 20px; color: var(--ink-4); line-height: 1;
  transition: transform .15s ease; display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
  .notas-persona > details > summary.notas-cab::before { transition: none; }
}
.notas-persona > details[open] > summary.notas-cab::before { transform: rotate(90deg); }
.notas-quien {
  font-family: var(--display, inherit); font-size: 19px; font-weight: 600;
}
.notas-persona > details > summary.notas-cab:hover .notas-quien { color: var(--accent-txt); }

.notas-hechas { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.notas-hechas > summary {
  cursor: pointer; font-size: 13.5px; color: var(--ink-3);
  padding: 4px 0;
}
.notas-hechas > summary:hover { color: var(--accent-txt); }

/* ── Las cuatro marcas de una nota ───────────────────────────────────────
   Cada color dice de quién es la pelota. El dorado se reserva para el final
   —cuando la persona que escribió ya la ve—, porque es el único estado que
   significa algo fuera de esta pantalla. */
.chip-est {
  display: inline-block; margin-left: 8px;
  border-radius: 999px; padding: 1px 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; vertical-align: 1px;
  border: 1px solid transparent;
}
.chip-pendiente    { background: var(--surface-sunk); color: var(--ink-3);
                     border-color: var(--line-strong); }
.chip-resuelto_dev { background: var(--bien-bg, #E6F0EA); color: var(--bien, #2F6F4E);
                     border-color: currentColor; }
.chip-dudas_dev    { background: var(--mal-bg, #F7E4E0); color: var(--mal, #A32F1E);
                     border-color: currentColor; }
.chip-visto_caio   { background: var(--surface-sunk); color: var(--accent-txt);
                     border-color: currentColor; }
.chip-enviar       { background: var(--oro-bg); color: var(--oro);
                     border-color: var(--oro-line); }

/* Una franja al costado para poder barrer la lista sin leer los chips. */
.nota-ajena.est-dudas_dev    { border-left: 3px solid var(--mal, #A32F1E); }
.nota-ajena.est-resuelto_dev { border-left: 3px solid var(--bien, #2F6F4E); }
.nota-ajena.est-visto_caio   { border-left: 3px solid var(--accent-txt); }
.nota-ajena.est-enviar       { border-left: 3px solid var(--oro); background: var(--oro-bg); }

/* ── El origen de una nota ───────────────────────────────────────────────
   Lo primero que uno necesita al contestar es saber dónde estaba parada la
   persona cuando escribió. Antes iba en una línea chica debajo del texto y
   había que buscarlo; ahora encabeza la nota. */
.nota-origen {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  margin-bottom: 3px;
}
.nota-pestana {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--accent-txt);
}
.nota-sep { color: var(--ink-4); font-size: 13px; }
.nota-cuadrito { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.nota-meta { font-size: 12px; color: var(--ink-3); margin-bottom: 7px; }
/* El texto de la nota se marca con el mouse y los dos botones de abajo se
   llevan justo lo marcado. El cursor de texto es la pista de que se puede. */
.nota-texto { font-size: 15px; cursor: text; }
.nota-texto::selection { background: var(--accent-soft); }
/* El menú del click derecho. Lo dibujamos nosotros porque dentro de la app
   de escritorio el del sistema viene vacío. */
.bv-menu-nota {
  position: fixed; z-index: 9999; min-width: 210px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); box-shadow: var(--shadow); padding: 5px;
}
.bv-menu-que {
  font-size: 11.5px; color: var(--ink-3); padding: 4px 8px 6px;
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bv-menu-nota button {
  display: block; width: 100%; text-align: left; border: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 13.5px;
  padding: 7px 8px; border-radius: 5px; cursor: pointer;
}
.bv-menu-nota button:hover { background: var(--accent-soft); }

.nota-tomar { display: flex; gap: 6px; flex-wrap: wrap; margin: 7px 0 2px; }
.nota-tomar .btn-csv { font-size: 12px; padding: 3px 9px; }
.nota-btn-listo { background: var(--good-bg); color: var(--good);
                  border-color: currentColor; font-weight: 600; }

/* ── Las dos cajas y los tres botones de cada nota ───────────────────────
   Antes había un desplegable con cinco estados: obligaba a elegir una
   opción, entender qué significaba, y después acordarse de guardar. Ahora
   cada botón dice lo que hace y guarda al tocarlo. */
.nota-lbl {
  display: block; margin: 10px 0 4px;
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-3);
}
.nota-resp, .nota-instr { width: 100%; font-size: 14px; }
.nota-instr {
  border-style: dashed;
  background: var(--surface-sunk);
}
.nota-acciones {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 11px;
}
.nota-acciones .t-dim { margin-left: auto; }
.nota-acciones .nota-enviar {
  background: var(--oro-bg); color: var(--oro);
  border-color: var(--oro-line); font-weight: 600;
}
.nota-acciones .nota-enviar:hover { filter: brightness(.97); }

/* La confirmación de que el botón hizo algo. Se queda escrita: el aviso
   flotante dura dos segundos y medio y con cien notas uno ya no sabe si
   tocó el botón o no. */
.nota-hecho { margin-top: 7px; font-size: 12.5px; color: var(--ink-3); }
.nota-hecho:empty { display: none; }
.nota-hecho-fresco {
  color: var(--good); font-weight: 600;
  animation: notaHecho 1.1s ease-out;
}
/* Cuando NO se guardó. Se queda escrito: el aviso que se va solo era todo lo
   que había, y por eso un botón que fallaba parecía un botón muerto. */
.nota-hecho-mal { color: var(--critical); font-weight: 600; }

/* Lo escrito y todavía no guardado en el servidor. Se queda a la vista hasta
   que se toca un botón: antes no había forma de distinguir un texto guardado
   de uno que se iba a perder en la próxima recarga. */
.nota-resp.sin-guardar, .nota-instr.sin-guardar {
  border-color: var(--warn); background: var(--warn-bg);
}
.nota-resp.sin-guardar::placeholder { color: var(--warn); }

/* El botón que se está tocando. Hunde y cambia AL INSTANTE, sin esperar al
   servidor: la respuesta puede tardar y mientras tanto parecía muerto. */
.nota-btn:active { transform: translateY(1px); }
.nota-btn.tocado {
  background: var(--ink); color: var(--surface); border-color: var(--ink);
}
@keyframes notaHecho { from { background: var(--good-bg); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .nota-hecho-fresco { animation: none; } }

.chip-rehacer { background: var(--medio-bg, #F7EEDA); color: var(--medio, #8A6210);
                border-color: currentColor; }
.nota-ajena.est-rehacer { border-left: 3px solid var(--medio, #8A6210); }

/* El botón que dejó la nota como está. Sin esto, apretar «Ya la vi» o «No hay
   nada que hacer» no cambiaba nada a la vista —solo «Enviar» pintaba la nota
   de dorado— y uno se quedaba sin saber si el clic había entrado. */
.nota-acciones .btn-csv.nota-btn-activo {
  background: var(--ink); color: var(--surface);
  border-color: var(--ink); font-weight: 600;
}
.nota-btn-activo::before { content: '\2713\00a0'; }
.nota-acciones .btn-csv.nota-btn-activo:hover { filter: brightness(1.35); }
/* La dorada manda sobre la negra: es la única que la persona llega a ver. */
.nota-acciones .btn-csv.nota-enviar.nota-btn-activo {
  background: var(--oro); color: #fff; border-color: var(--oro);
}

.chip-descartada { background: var(--surface-sunk); color: var(--ink-3);
                   border-color: currentColor; }
.nota-ajena.est-descartada { border-left: 3px solid var(--line-strong); opacity: .82; }

.notas-cuenta { margin-top: 9px; }


/* ── Preguntarle al tablero ──────────────────────────────────────────────
   La caja de la barra de arriba. Busca sobre las 113 fichas que ya viajan
   con la página: sin servidor, sin IA, sin costo. */
.preg-caja { position: relative; flex: 0 1 300px; min-width: 150px; }
.preg-q { width: 100%; font-size: 13px; padding: 7px 11px; }
.preg-res {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 300;
  max-height: 60vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); box-shadow: var(--shadow); padding: 5px;
}
.preg-item {
  display: block; padding: 9px 10px; border-radius: 6px;
  text-decoration: none; color: inherit;
}
.preg-item:hover { background: var(--accent-soft); }
.preg-donde {
  display: block; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-txt); font-weight: 600;
}
.preg-tit { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.preg-que {
  display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px;
  /* El «qué» de una ficha puede ser largo; dos líneas alcanzan para decidir. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.preg-nada { padding: 11px; font-size: 13px; color: var(--ink-3); }

/* El cuadro al que se llegó desde una pregunta. Se marca un momento: sin
   esto uno cae en una pantalla larga sin saber cuál de los cuadros era. */
.card-llegada {
  outline: 2px solid var(--accent); outline-offset: 3px;
  animation: cardLlegada 2.6s ease-out;
}
@keyframes cardLlegada {
  0%, 60% { background: var(--accent-soft); }
  100%    { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .card-llegada { animation: none; } }

/* En pantalla chica la caja de arriba no cabe, pero la del teléfono sí tiene
   que verse: vive dentro de la hoja del botón «Más». Esconderla en el celular
   era esconderla de la mayoría de la gente. */
.preg-movil { display: none; }
.preg-movil .preg-res {
  /* Dentro de la hoja no puede flotar: la hoja está pegada abajo y el menú
     se saldría de la pantalla. Va en línea y la hoja crece. */
  position: static; max-height: 46vh; margin-top: 8px; box-shadow: none;
}
.preg-movil .preg-q { font-size: 16px; padding: 11px 13px; }
/* La hoja pone en fila a TODOS sus enlaces (`.msheet a` es flex, para que el
   ícono quede al lado del nombre). Un resultado de búsqueda no es eso: son
   tres líneas apiladas, y en fila la descripción quedaba cortada. */
.msheet .preg-item {
  display: block; border-bottom: 0; padding: 10px 10px; font-size: inherit;
}
.msheet .preg-item + .preg-item { border-top: 1px solid var(--line); }
/* 16px a propósito: con menos, el iPhone hace zoom solo al tocar el campo. */

@media (max-width: 900px) {
  .topbar .preg-caja { display: none; }
  .preg-movil { display: block; grid-column: 1 / -1; margin-bottom: 4px; }
}

/* Alta de una incapacidad: una sola línea en pantalla grande, apilada en el
   teléfono. Va debajo de la tabla, donde ya se está mirando el problema. */
.inc-alta {
  display: grid; gap: 8px; margin: 12px 0 4px;
  grid-template-columns: 1.4fr 1.2fr auto auto 1fr auto;
  align-items: center;
}
.inc-alta .input { font-size: 13px; padding: 8px 10px; }
@media (max-width: 900px) {
  .inc-alta { grid-template-columns: 1fr; }
  .inc-alta .input { font-size: 16px; }   /* si no, el iPhone hace zoom solo */
}

/* El aviso de planilla cerrada: verde, porque es buena señal —lo pagado
   quedó fijo— y no una advertencia. */
.cierre-ok { border-color: var(--good); }
.cierre-ok b { color: var(--good); }

/* Aumentos: la lista de gente al lado de los campos, para ver a quién le
   estás subiendo el salario mientras escribís cuánto. */
.au-alta { display: grid; grid-template-columns: 260px 1fr; gap: 14px; margin: 12px 0; }
.au-campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; align-content: start; }
.au-campos .btn, .au-campos .btn-primary { align-self: end; }
@media (max-width: 900px) {
  .au-alta { grid-template-columns: 1fr; }
  .au-campos { grid-template-columns: 1fr; }
  .au-campos .input, .au-alta select { font-size: 16px; }
}

/* El valor hora cuando sale de un salario mensual: se ve que es calculado y
   no escrito, para que nadie intente corregirlo ahí. */
.pl-hora.derivado {
  background: var(--surface-sunk); color: var(--ink-3);
  font-style: italic; cursor: not-allowed;
}
.pl-mes-campos .input { display: inline-block; }

/* Celdas editables del ciclo del dinero.

   Se ven como número hasta que se tocan: la tabla se lee mucho más de lo que
   se corrige, y una cuadrícula de cajas de texto la vuelve ilegible. */
.cfg-in {
  width: 5.4em; padding: 4px 6px; text-align: right;
  font: inherit; font-variant-numeric: tabular-nums;
  color: var(--tinta, #3A3A3A);
  background: transparent;
  border: 1px solid transparent; border-radius: 6px;
}
.cfg-in:hover  { border-color: var(--linea, #E3D6C6); }
.cfg-in:focus  { outline: none; background: var(--fondo-card, #FFF);
                 border-color: var(--acento, #FF7127);
                 box-shadow: 0 0 0 2px rgba(255, 113, 39, .18); }
.cfg-in::placeholder { color: var(--mal, #A32F1E); opacity: .75; font-weight: 600; }
/* Sin las flechitas del navegador: ocupan espacio y nadie sube una comisión
   de 2% a 3% de a un clic. */
.cfg-in::-webkit-outer-spin-button,
.cfg-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cfg-in[type=number] { -moz-appearance: textfield; }

/* La caja de búsqueda de una tabla: pegada a su tabla, no a la pantalla. */
.buscador-tabla { max-width: 620px; margin: 0 0 12px; }
.buscador-tabla .tabla-q-cuenta { font-size: 12px; white-space: nowrap; }

/* Los centros de costo, al final de la tabla de cuentas: se distinguen de
   los locales porque no son locales — ahí no se vende nada. */
#tablaCostos th.cf-centro-cab {
  background: var(--oro-bg, #FBF0D2);
  color: var(--oro, #9A6B08);
}

/* Operación: la celda de respuestas de una visita.
   Tres opciones en línea y con área de toque grande: esto se llena desde el
   teléfono, parado en el local, no sentado frente a una pantalla. */
.vis-resp { white-space: nowrap; }
.vis-resp .cf-si { margin-right: 14px; display: inline-flex; align-items: center;
                   gap: 5px; padding: 6px 0; cursor: pointer; }
.vis-resp input[type=radio] { width: 17px; height: 17px; accent-color: var(--acento, #FF7127); }
/* ── El checklist en el teléfono ─────────────────────────────────────────
   Esta pantalla se llena parado en el local, con una mano, y como tabla no
   cabía: el texto del punto salía cortado y las tres opciones quedaban fuera
   de la pantalla, había que arrastrar de lado para contestar. En pantalla
   angosta deja de ser tabla y cada punto pasa a ser una tarjeta: el texto
   completo arriba, las tres opciones abajo como botones grandes. */
@media (max-width: 760px) {
  /* `visible` deja escapar un sobrante de la caja de tabla que ya no se ve
     pero que el documento sigue arrastrando: la página quedaba con 137 px de
     scroll lateral en el teléfono. `hidden` lo corta sin recortar nada real
     —ninguna tarjeta se sale— y la página deja de moverse de lado. */
  .vis-plantilla .table-wrap {
    overflow-x: hidden; overflow-y: visible;
    margin: 0; padding: 0; max-width: 100%;
  }
  /* `width: auto` no alcanza: una tabla puesta en `block` toma el ancho de
     su contenido, no el de su caja, y las tarjetas se salían 200 px por la
     derecha. El 100% con `border-box` las ata al contenedor. */
  .vis-plantilla table,
  .vis-plantilla tbody,
  .vis-plantilla tr,
  .vis-plantilla td {
    display: block; width: 100%; box-sizing: border-box;
  }
  /* Las tablas anchas llevan `.table-wrap > table.t { min-width: max-content }`
     para poder arrastrarlas de lado. Acá estorba —le gana al 100% y la
     tarjeta vuelve a medir lo que mide su contenido— así que hay que
     repetir el mismo peso de selector para poder anularla. */
  .vis-plantilla .table-wrap > table.t {
    min-width: 0; width: 100%;
  }
  .vis-plantilla thead { display: none; }   /* el título ya está en la tarjeta */

  .vis-plantilla tbody tr {
    border: 1px solid var(--line, #EADFD0);
    border-radius: 10px;
    padding: 12px 14px 14px;
    margin-bottom: 10px;
    background: var(--surface, #FFFDFC);
  }
  .vis-plantilla tbody tr:hover td { background: transparent; }
  /* `table.t td` pesa más que `.vis-plantilla td`, así que las rayas de la
     tabla seguían dibujándose dentro de las tarjetas. Hay que igualar el peso
     del selector para apagarlas. */
  .vis-plantilla table.t td {
    border: 0; padding: 0; white-space: normal; background: transparent;
  }

  .vis-punto {
    font-size: 15.5px; font-weight: 600; line-height: 1.35;
    margin-bottom: 10px;
  }

  /* Las tres opciones, del ancho de la tarjeta y con área de toque de sobra:
     se contesta con el pulgar, no con un mouse. */
  .vis-resp { display: flex; gap: 8px; white-space: normal; }
  .vis-resp .cf-si {
    flex: 1 1 0; margin: 0; justify-content: center;
    min-height: 44px; padding: 8px 4px;
    border: 1px solid var(--line, #EADFD0); border-radius: 8px;
    font-size: 14px; font-weight: 600;
  }
  .vis-resp .cf-si:has(input:checked) {
    border-color: var(--accent, #FF7127);
    background: var(--accent-soft, #FFEDE2);
    color: var(--accent-txt, #B54405);
  }
  .vis-plantilla .vis-nota {
    margin-top: 10px;
    width: 100%; box-sizing: border-box;
    font-size: 16px;               /* menos de 16 y iOS hace zoom al tocar */
  }
}

/* ══════════════════════════════════════════════════════════════════════
   EL TELÉFONO
   ══════════════════════════════════════════════════════════════════════
   Nueve de cada diez personas abren esto desde el celular, así que lo de
   acá abajo no es un ajuste: es la forma principal en que se usa la app.

   Dos cosas se arreglan para toda la app de una vez, porque estaban mal en
   todas las pantallas por igual:

   · **Los campos iban en 13px.** Abajo de 16, iOS hace zoom solo al tocar
     un campo, y después hay que volver a acomodar la pantalla con dos
     dedos. Pasa en cada campo de cada pantalla, y es de esas cosas que uno
     no sabe nombrar pero hacen que la app «se sienta rara».

   · **Los botones medían 26 a 34px de alto.** Con el pulgar eso se falla
     seguido. El mínimo razonable es 44.                                    */
@media (max-width: 760px) {

  /* Los campos: letra de 16 y alto de dedo. */
  .input,
  input[type="text"], input[type="number"], input[type="date"],
  input[type="search"], input[type="password"], input[type="email"],
  input[type="tel"], select, textarea {
    font-size: 16px;
    min-height: 44px;
  }
  textarea.input { min-height: 72px; }
  /* Los de marcar no llevan alto: el alto se lo da su etiqueta. */
  input[type="checkbox"], input[type="radio"] { min-height: 0; }

  /* Lo que se toca. */
  .btn, .btn-csv, .card-head button, .buscador button, .acc-acciones button {
    min-height: 44px;
    padding-inline: 14px;
  }
  /* Los cuatro íconos de la barra de arriba —anotar, notas, tema, actualizar—
     son los que más se tocan en el teléfono y median 26px de alto. */
  .mtop button, .ficha-x, .det-x, .msheet button {
    min-height: 44px; min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Un `min-height` sobre un `<a>` en línea no hace nada: hay que sacarlo del
     flujo de texto primero. Los botones que son enlaces medían 30px. */
  a.btn, a.btn-csv {
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Los selectores de métrica de Ventas son pestañas, y se tocan igual. */
  .metricas .met { min-height: 44px; }

  /* Texto que no dejaba envolverse y empujaba la página de lado. */
  .hero-dim, .card-note, .metric-foot span { white-space: normal; }

  /* Y la red de seguridad: que la página no se arrastre de lado, pase lo que
     pase. Es `clip` y no `hidden` a propósito — `hidden` convierte la caja en
     un contenedor de scroll y rompe el encabezado pegajoso de arriba; `clip`
     recorta sin crear scroll, así que el encabezado sigue quedándose fijo.
     Lo que sí tiene que arrastrarse —una tabla ancha dentro de su caja— no se
     ve afectado, porque arrastra dentro de su propio contenedor. */
  .app { overflow-x: clip; }

  /* ── Tablas que se vuelven tarjetas ──────────────────────────────────
     Una tabla de seis columnas para escribir no se arrastra de lado con
     una mano. Cada fila pasa a ser una tarjeta y cada celda una línea con
     su nombre adelante, tomado del `data-etq` que pone el servidor. */
  .t-tarjetas,
  .t-tarjetas tbody,
  .t-tarjetas tr,
  .t-tarjetas td { display: block; width: 100%; box-sizing: border-box; }
  .t-tarjetas thead { display: none; }
  .table-wrap > table.t.t-tarjetas { min-width: 0; width: 100%; }

  .t-tarjetas tbody tr {
    border: 1px solid var(--line, #EADFD0);
    border-radius: 10px;
    padding: 4px 14px 12px;
    margin-bottom: 10px;
    background: var(--surface, #FFFDFC);
  }
  .t-tarjetas tbody tr:hover td { background: transparent; }
  table.t.t-tarjetas td {
    border: 0; padding: 8px 0 0; white-space: normal; text-align: left;
  }
  .t-tarjetas td::before {
    content: attr(data-etq);
    display: block;
    font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase;
    color: var(--ink-3, #8C867D); font-weight: 700;
    margin-bottom: 4px;
  }
  /* El ancho fijo que traen los campos es para la tabla de escritorio; acá
     estorba, porque deja el campo a media línea. */
  .t-tarjetas td .input { width: 100% !important; }
  .t-tarjetas td .cf-si { display: inline-flex; align-items: center; gap: 8px;
                          min-height: 44px; }
}

/* ── Las secciones de una visita ─────────────────────────────────────────
   La lista de supervisión son cincuenta y tres puntos. De corrido no se
   llena: se abandona a la mitad. Partida en bloques numerados, con el
   contador de avance arriba, se ve el fondo y se puede parar entre uno y
   otro sin perder el hilo. */
.vis-seccion { margin-top: 18px; }
.vis-seccion:first-child { margin-top: 6px; }
.vis-seccion-cab {
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 6px; margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.vis-seccion-n {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-txt);
  font-size: 11px; font-weight: 700;
}
.vis-seccion-t {
  margin: 0; flex: 1 1 auto;
  font-size: 14.5px; font-weight: 640;
}
.vis-seccion-c { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.vis-intro { border-left: 3px solid var(--accent-line); padding-left: 11px; }
.vis-avance {
  display: inline-block; margin-left: 6px;
  font-weight: 700; color: var(--accent-txt);
}
.vis-avance.vis-listo { color: var(--good, #2F6B4F); }

@media (max-width: 760px) {
  .vis-seccion-cab { flex-wrap: wrap; }
  .vis-seccion-t { font-size: 15px; }
}

/* La caja de preguntas propias: cerrada por omisión. Lo que se hace todos
   los días es llenar la lista, no editarla. */
.vis-propias { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 12px; }
.vis-propias > summary {
  cursor: pointer; font-weight: 640; font-size: 14px;
  padding: 10px 0; min-height: 44px; display: flex; align-items: center; gap: 8px;
}
.vis-propias > summary::marker { color: var(--accent); }

/* Las cuatro listas, a la vista. */
.vis-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.vis-tab {
  flex: 1 1 170px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 14px; min-height: 52px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  font: inherit; font-weight: 640; font-size: 14px; text-align: left;
  cursor: pointer;
}
.vis-tab:hover { border-color: var(--accent-line); }
.vis-tab.on {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent-txt);
}
.vis-tab-n { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.vis-tab.on .vis-tab-n { color: var(--accent-txt); opacity: .8; }

/* Dos columnas para una tarjeta que muestra reglas a un lado y datos al
   otro —los tramos de renta y quién tiene créditos—. En el teléfono se
   apilan: dos columnas de 380px no caben en 375. */
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
           align-items: start; }
.ojo-chico { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
             color: var(--gris); font-weight: 700; margin: 0 0 8px; }
@media (max-width: 760px) {
  .dos-col { grid-template-columns: 1fr; gap: 18px; }
}

/* La aclaración de cómo se calcula cada provisión, debajo de su nombre. */
.fu2 { display: block; font-size: 11px; color: var(--gris); font-weight: 400;
       margin-top: 1px; }

/* La fila de total de una tabla: separada por una raya y en tinta plena,
   para que no se confunda con un renglón más. */
.t-total td { border-top: 2px solid var(--line-strong); }

/* Una advertencia dentro de una celda: pedir más días de los que se tienen,
   por ejemplo. En rojo de la casa, no el rojo de error del navegador. */
.t-mal { color: #B54405; font-weight: 600; }

/* ── Índice de la pantalla ──────────────────────────────────────────────
   Arriba de todo, un botón por tarjeta. La pantalla de Planilla tiene
   veinticuatro secciones y buscar una bajando con la rueda es lo que hace
   que la gente deje de usarla. */
.indice { background: var(--surface); border: 1px solid var(--line);
          border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
          display: flex; flex-direction: column; gap: 10px; }
.idx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.idx-chip { display: inline-block; padding: 5px 11px; border-radius: 999px;
            background: var(--surface-sunk); border: 1px solid var(--line);
            color: var(--ink); font-size: 12px; font-weight: 600;
            text-decoration: none; line-height: 1.3; }
.idx-chip:hover { border-color: var(--naranja); color: var(--accent-txt); }
.idx-todo { align-self: flex-start; background: none; border: 1px solid var(--line);
            border-radius: 8px; padding: 5px 11px; font-size: 12px;
            font-weight: 600; color: var(--ink); cursor: pointer;
            font-family: inherit; }
.idx-todo:hover { border-color: var(--naranja); color: var(--accent-txt); }

/* La flechita para volver al índice, a la derecha del título de cada
   tarjeta. Discreta hasta que uno pasa por encima: está para cuando hace
   falta, no para adornar. */
.card-arriba { float: right; text-decoration: none; color: var(--gris);
               font-size: 15px; line-height: 1; padding: 0 2px;
               opacity: .45; }
.card-arriba:hover { opacity: 1; color: var(--accent-txt); }

/* Tarjeta plegada: se deja el encabezado y se esconde el resto.
   `!important` porque varias pantallas le fijan el display a sus tablas y
   rejillas con selectores más específicos, y sin esto la tarjeta cambiaba de
   clase sin cambiar de aspecto: el botón «funcionaba» y no se veía nada. */
.card.plegada > *:not(.card-head) { display: none !important; }

/* Que el encabezado se vea tocable. Antes esto lo ponía el JavaScript al
   montar; puesto en CSS no depende de que el montaje haya llegado. */
.card-head:has(.card-title) { cursor: pointer; }

/* Por qué Planilla tardaba en abrir: son 24 tarjetas con 124 tablas,
   10.679 celdas, 2.401 opciones de menú y 632 campos — un documento de
   790 KB. El servidor lo arma en 0,35 s; lo que se sentía lento era el
   navegador midiendo y dibujando todo eso de una sola vez, incluso lo que
   está quince pantallas más abajo.

   `content-visibility: auto` le dice al motor que se saltee el trabajo de
   las tarjetas que no están a la vista y lo haga recién cuando uno llega a
   ellas. `contain-intrinsic-size` le da un alto de mentira mientras tanto,
   para que la barra de desplazamiento no brinque; una vez que la tarjeta se
   dibujó, el motor recuerda su alto de verdad. No cambia nada de lo que se
   ve: los enlaces del índice, buscar en la página y plegar siguen igual. */
.content > .card { content-visibility: auto; contain-intrinsic-size: auto 420px; }

/* Una tarjeta plegada NO se saltea. Si se la saltea, el motor le sigue
   reservando el alto de relleno y la página no se encoge: uno toca
   «Minimizar todo», las 83 tarjetas se cierran y la barra de desplazamiento
   queda igual de larga, o sea parece que no pasó nada. Plegada ya no cuesta
   nada medirla —es sólo el encabezado—, así que se mide de verdad. */
.content > .card.plegada { content-visibility: visible; contain-intrinsic-size: auto; }
.card.plegada { padding-bottom: 12px; }

/* En el teléfono el índice es lo más útil de todo, pero no puede ocupar
   media pantalla: los chips se hacen más chicos y se limita el alto. */
@media (max-width: 760px) {
  .idx-chips { max-height: 132px; overflow-y: auto; }
  .idx-chip { font-size: 11.5px; padding: 4px 9px; }
}

/* El botón de plegar de cada tarjeta. Va al lado del título porque ahí es
   donde uno lo busca, y gira cuando la tarjeta está cerrada para que se vea
   de un golpe cuáles quedaron abiertas. */
.card-plegar { float: right; background: none; border: 1px solid var(--line);
               border-radius: 7px; width: 26px; height: 22px; margin-left: 6px;
               color: var(--ink); font-size: 12px; line-height: 1; cursor: pointer;
               font-family: inherit; padding: 0; }
.card-plegar:hover { border-color: var(--naranja); color: var(--accent-txt); }
.card.plegada .card-plegar { transform: rotate(-90deg); }