:root{
  /* Regla 26 (Design, 8-sep-2026) · La superficie de una TABLA es fria, no la gris calida
     de las tarjetas: un encabezado con --bogo-gris-3 y letra gris se lee como una fila mas,
     y el encabezado y el total quedaban pintados de la misma superficie.
     19-sep-2026 · Los tres valores originales nunca se midieron: contraste real 1,06-1,21:1
     contra blanco, invisibles. Postmortem de la vuelta de Registro. Reemplazados por dos
     agentes independientes + un arbitro que recalculo el WCAG completo de cada propuesta
     (ver docs/PROTOCOLO-DISENO.md si esto se audita de nuevo). El relleno del encabezado no
     necesitaba subir -un relleno sutil no es el defecto, ya lo media el propio postmortem en
     una pantalla que si funcionaba-; lo que fallaba eran las DOS lineas (--tabla-linea,
     --tabla-fila), que llevaban el mismo nivel casi invisible que un relleno. */
  --tabla-cab:var(--bogo-gris-2);   /* #eae6de · 1,24:1 contra blanco, calido */
  --tabla-linea:var(--border-strong); /* = var(--bogo-negro) #161618 · 18,07:1 contra blanco, 14,52:1 contra el cab nuevo */
  --tabla-fila:var(--bogo-negro-3);   /* #33333a · 12,53:1 contra blanco */
  /* CUATRO superficies, y cada una hace un trabajo distinto (Juan, 1-ago).
     Desde el reskin, --soft valia lo mismo que --soft2: el sistema declaraba
     cuatro y entregaba tres, asi que el encabezado de una tabla y un chip
     inactivo se veian igual y la profundidad se perdia.
       card  #ffffff  la tarjeta, la fila de tabla, el modal
       soft  #fafafa  la zona hundida SOBRE la tarjeta: encabezado de tabla,
                      fila alterna. Gris frio, como el resto del lienzo.
       bg    #f5f5f7  el piso de la app, debajo de todo
       soft2 #f4f2ee  el unico calido: chip inactivo, segundo nivel. Sobrevivio
                      a todos los reskins y es lo unico que da temperatura.
     Verificado que el texto cumple AA sobre la superficie nueva: mut2 4.84,
     mut 4.86, ink 16.12. Son 83 usos de var(--soft). */
  --bg:#f5f5f7;--card:#fff;--soft:#fafafa;--soft2:#f4f2ee;
  --ink:#1d1d1f;--mut:#6e6e73;--mut2:#6e6e76;--line:#e5e5ea;
  --olive:#606c38;--terra:#9e4e38;--red:#c0492b;--green:#3f7a2e;--amber:#9a7b1f;--violet:#8a76bf;
  /* AZUL · información, sin juicio (13-ago-2026, decisión de Juan).
     Faltaba un color para lo que se CONSULTA: la ayuda, la nota al pie, el dato
     de contexto. Sin él eso iba en gris —y desaparecía— o en terracota, que lo
     hacía parecer accionable. Y ya existía un `var(--blue)` usado en el botón de
     sincronizar ventas SIN estar declarado en ningún :root: un color inválido
     que el navegador ignoraba. Esto lo declara y lo ordena.
     No es el `--g-blue` del asistente (#4285f4, el azul de Google): ese vive
     fenceado dentro de su panel. Éste es el azul de la app, más apagado para
     convivir con el terracota sin pelear.
     MEDIDO: 4.88:1 sobre el fondo, 5.31 sobre la tarjeta, 4.62 sobre su tinte;
     en oscuro 7.38 y 6.80. Pasa AA en todos. Queda a propósito por DEBAJO del
     terracota (5.36) y del olivo (5.21): la información no puede gritar más
     fuerte que la acción. */
  --blue:#3a6ea5;--blue-t:#e9f0f7;
  /* ---- PALETA DE GRÁFICAS (13-ago-2026, decisión de Juan) ----
     «NO quiero usar colores de mi marca en ningún pie chart o bar chart».
     Es la paleta de estadísticas de Google, y es deliberadamente ajena al resto
     del sistema: una gráfica muestra DATO, no marca, y sus colores solo tienen
     que distinguirse entre sí. Si un tramo de una torta fuera terracota, el ojo
     leería «acción» sobre una porción que no se puede tocar.
     `--ch1` es también el foco/serie principal cuando una gráfica tiene una
     sola serie. En oscuro se aclaran para sostener contraste contra #151517. */
  --ch1:#3366cc;--ch2:#dc3912;--ch3:#ff9900;--ch4:#109618;
  --ch5:#990099;--ch6:#0099c6;--ch7:#dd4477;--ch8:#66aa00;
  /* Superficie del control ACTIVO (pestaña de filtro). En claro es el negro del
     manual de marca (#161618, «negro claro… como background»); en oscuro tiene
     que invertirse o el bloque desaparece contra el fondo #151517. El texto de
     encima es var(--bg) y funciona en los dos temas por simetria.
     NO es --ink: --ink es el color del TEXTO y tiene cientos de usos. Este token
     existe para poder mover la superficie del control sin tocar la tipografia
     de toda la app. */
  --seg-on:#161618;
  --olive-t:#eef0e3;--green-t:#eef5ea;--amber-t:#fdf6e3;--terra-t:#f5ece8;--violet-t:#eef0fb;--info-t:#eaf3f7;
  /* Tinte de la señal roja, declarado como token y en los dos temas (ver M6:
     el rg-tag-sinfac lo tenia suelto como #fdece9).
     El valor NO es ese #fdece9: sobre el, el rojo da 4.34:1 y el titulo de
     grupo es 14px bold —que WCAG no considera texto grande, asi que necesita
     4.5—. Aclarado a #fef4f2 da 4.60:1, y el gris apagado 4.69:1. */
  --red-t2:#fef4f2;
  --g-blue:#4285f4;--g-red:#d9584c;--g-yellow:#e0a11c;--g-green:#3d9960;
  --g-blue-t:#e8f0fe;--g-blue-line:#c6dafc;--fab-ink:#fff;
  /* El valor que de verdad gana en claro: venia del bloque RESKIN de mas
     abajo, que pisaba a este. Se trae aca y se borra alla. */
  --shadow:0 1px 2px rgba(30,30,55,.04),0 10px 26px -16px rgba(35,35,70,.16);
  --shadow-lg:0 14px 38px rgba(0,0,0,.2);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#151517;--card:#1d1d20;--soft:#232327;--soft2:#26262b;
  --ink:#ececf0;--mut:#9d9da6;--mut2:#84848b;--line:#33333a;
  --olive:#8fa05a;--terra:#d08768;--red:#e08272;--green:#7fbe74;--amber:#d9b44a;--violet:#a99bf0;
  --blue:#7aa9d8;--blue-t:#1d2733;
  --ch1:#7ba7e8;--ch2:#f08a72;--ch3:#ffc266;--ch4:#5cc271;
  --ch5:#c97fc9;--ch6:#5cc4de;--ch7:#ec8fae;--ch8:#a5cf5c;
  --seg-on:#ececf0;
  --olive-t:#2b3021;--green-t:#1f2b22;--amber-t:#2e2818;--terra-t:#33231d;--violet-t:#232238;--info-t:#1e272c;
  --red-t2:#331f1c;
  --g-blue:#8ab4f8;--g-red:#e58275;--g-yellow:#e5bb52;--g-green:#6bb886;
  --g-blue-t:#1c2635;--g-blue-line:#2e405c;--fab-ink:#1d1d20;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --shadow-lg:0 14px 38px rgba(0,0,0,.55);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink)}
/* 8-sep-2026 · Scrollbar fina y redondeada, declarada UNA vez para toda la app (plano de
   Design, gerencia-2). Antes cada pantalla que lo necesitaba se la escribia sola y las que
   no, mostraban la barra gorda del sistema al lado de una tarjeta de esquinas suaves. */
*{scrollbar-width:thin;scrollbar-color:var(--bogo-gris) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bogo-gris);border-radius:var(--radius-pill)}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
::-webkit-scrollbar-corner{background:transparent}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
header{background:var(--card);border-bottom:1px solid var(--line)}

.logo{height:26px}
.htop .t{font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}

.nav{display:flex;gap:4px;padding-top:4px}
.nav a{padding:10px 16px;font-size:14px;font-weight:600;color:var(--mut);border-bottom:2px solid transparent;cursor:pointer;text-decoration:none}
.nav a.on{color:var(--ink);border-color:var(--terra)}
.nav a.soon{opacity:.5;cursor:default}
.nav a.soon span{font-size:9px;background:var(--line);color:var(--mut);padding:1px 5px;border-radius:6px;margin-left:5px;text-transform:uppercase}

.cfgp{font-size:12px;color:var(--mut);margin:0 0 12px;max-width:640px;line-height:1.4}
.catedit{display:flex;flex-direction:column;gap:8px;max-width:460px}
.catrow{display:flex;gap:8px}
.catrow input{flex:1;padding:9px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:13px;background:var(--card);color:var(--ink)}
.nav a.navicon{padding:10px 12px;display:inline-flex;align-items:center;margin-right:8px}
.nav a.navicon svg{display:block}
.subnav{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px}
.subtab{padding:9px 14px;font-size:13px;font-weight:600;color:var(--mut);border-bottom:2px solid transparent;cursor:pointer}
.subtab.on{color:var(--ink);border-color:var(--terra)}
.fl-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
/* 🔴 Dentro de una barra `align-items:center` el margen de abajo entra en la
   caja que se centra, así que los chips quedaban 7px por encima del centro.
   Juan, 17-ago: «los chips de los años no están bien centrados en el alto
   disponible». El margen es para cuando los chips van solos, no en la barra. */
.fl-topbar>.fl-chips{margin-bottom:0}
.fl-chip{padding:6px 14px;border:1px solid var(--line);border-radius:20px;background:var(--bg);color:var(--mut);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
.fl-chip.on{background:var(--terra);color:#fff;border-color:var(--terra)}
.fl-table{font-size:12px;min-width:640px}
.fl-table td.fl-lbl{text-align:left;white-space:nowrap;position:sticky;left:0;background:var(--r-s1);z-index:1}
/* En la fila que agrupa, la columna pegajosa lleva la banda: si no, al
   scrollear de lado deja un parche del color de la tarjeta sobre la banda. */
.fl-table tr.fl-sec td.fl-lbl,.fl-table tr.fl-hl td.fl-lbl{background:var(--r-banda)}
/* La primera columna queda fija al hacer scroll y por eso lleva fondo propio.
   En la CABECERA ese fondo tiene que ser el azul de la banda, o el año «2026»
   aparece como un parche claro pegado a la izquierda. */
.fl-table th.fl-lbl{text-align:left;white-space:nowrap;position:sticky;left:0;background:var(--blue);z-index:1}
.fl-table th.num,.fl-table td.num{text-align:right;white-space:nowrap;min-width:66px}
/* INGRESOS / EGRESOS van GRISES: están debajo de la cabecera, y el azul es de
   la fila principal. «Aquí debe ir el azul, no abajo» (Juan, 13-ago). */
.fl-table tr.fl-sec td{background:var(--r-banda);font-weight:700;font-size:10.5px;letter-spacing:.04em;color:var(--mut);text-transform:uppercase}
.fl-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
/* «Necesito aire aquí» (Juan, 17-ago, en Histórico): la fila de años nacía
   pegada al borde de la vista. 8 arriba y 16 abajo, los dos de la escala. */
.fl-topbar-chips{justify-content:flex-start}
.fl-table tr.fl-ing td{background:rgba(76,133,58,.05)}
.fl-table tr.fl-eg td{background:rgba(183,65,39,.05)}
.fl-table tr.fl-hl td{background:var(--olive-t)}
.fl-table tr.fl-hl .fl-lbl{font-weight:800}
/* El tinte de estas filas es el fondo de SU celda, así que gana sobre el
   tr:hover general (que solo pinta el <tr>) y el hover no se veía (Juan,
   18-ago). Se repite el hover a nivel de celda, en las mismas tres filas. */
.fl-table tr.fl-ing:hover td,.fl-table tr.fl-eg:hover td,.fl-table tr.fl-hl:hover td{background:var(--soft)}
.fl-pct{font-size:9px;font-weight:700;line-height:1.1;margin-top:1px}
.fl-pct.up{color:var(--green)}.fl-pct.down{color:var(--red)}
/* Fondo de tarjeta, no el tinte suave de fondo de página: contra ese fondo
   casi no había contraste — "prácticamente el mismo color" (Juan, 18-ago). */
.fl-graph{margin-top:16px;border:1px solid #ecece4;border-radius:14px;padding:16px 18px;background:var(--card);box-shadow:0 1px 3px rgba(40,30,20,.05),0 6px 20px -12px rgba(40,30,20,.10)}
/* El título del gráfico es la fila principal de este bloque, así que lleva la
   misma banda azul que la cabecera de cualquier tabla (Juan, 13-ago: «ser una
   fila de título de tabla en azul»). Y va SEPARADO de los botones de tipo de
   gráfico —líneas, apiladas, cascada— que antes se leían como parte del mismo
   renglón: «esta fila debería tener un corte antes». */
.fl-graph-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:14px;margin:-16px -18px 0;padding:10px 18px;background:var(--blue);color:var(--ink);
  border-radius:13px 13px 0 0}
.fl-graph-h .fl-lg{color:var(--mut)}
.fl-graph-h b{letter-spacing:-.2px}
.fl-coach{margin-top:10px;background:var(--soft);border:1px solid #ece7db;border-radius:10px;padding:9px 12px;font-size:11.5px;line-height:1.5;color:var(--terra)}
.fl-coach-t{font-weight:700;color:var(--ink);margin-right:4px}
.fl-coach-modes{margin-top:5px;padding-top:5px;border-top:1px dashed #e2dccd;color:#8a8478;font-size:10.5px}
.fl-coach-modes b{color:var(--ink)}
.fl-det{overflow-x:auto}
.fl-det table{border-collapse:collapse;width:100%;font-size:12px}
.fl-det thead th{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--mut);background:var(--blue);font-weight:700;padding:4px 8px;border-bottom:1.5px solid var(--line);text-align:left}
.fl-det tbody td{padding:6px 8px;border-bottom:1px solid #f2f0ea;vertical-align:middle}
.fl-det-i{color:var(--mut2);font-size:10.5px;width:20px}
.fl-det-n{font-weight:600;color:var(--ink)}
.fl-det-r{display:block;font-size:10.5px;font-weight:600;opacity:.85;margin-top:1px}
.fl-det-bar{width:34%}
.fl-det-bar span{display:block;height:9px;border-radius:6px;min-width:3px}
.fl-det-v{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.fl-det-p{text-align:right;font-variant-numeric:tabular-nums;color:var(--mut);white-space:nowrap}
.ger-lead{margin:0 0 22px}
.gl-sect{margin-bottom:12px !important}
.gl-sect-s{font-weight:500;text-transform:none;letter-spacing:0;color:var(--b-mut);font-size:10.5px}
.ger-lead-row{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;align-items:stretch}
@media(max-width:1100px){.ger-lead-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ger-lead-row{grid-template-columns:1fr}}
.gl-tile{position:relative;background:var(--b-card);border:1px solid var(--b-line);border-radius:14px;padding:15px 17px;box-shadow:0 1px 2px rgba(30,30,50,.03),0 10px 26px -18px rgba(40,40,70,.22)}
.gl-tile .b-kl{white-space:normal;min-height:28px;padding-right:16px}
.gl-tile .b-kv{font-size:26px;margin-top:6px}
.gl-dot{position:absolute;top:16px;right:16px;width:9px;height:9px;border-radius:50%}
.gl-r{font-size:9px;color:var(--mut2);margin-top:8px;text-transform:uppercase;letter-spacing:.4px}
.gl-green .gl-dot{background:var(--b-green)}.gl-green .b-kv{color:var(--b-green)}
.gl-amber .gl-dot{background:#d99a2b}
.gl-red .gl-dot{background:var(--b-coral)}.gl-red .b-kv{color:var(--b-coral)}
.gl-off .gl-dot{background:var(--soft)}.gl-off .b-kv{color:var(--mut2);font-size:16px}
.b-coach{font-size:10.5px;color:var(--b-mut);line-height:1.45;margin-top:9px;padding-top:8px;border-top:1px dashed var(--b-line)}
.fl-graph-lg{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fl-lg{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--mut);font-weight:600}
.fl-lgdot{width:9px;height:9px;border-radius:50%;display:inline-block}
.fl-svg{width:100%;height:auto;display:block}
.fl-graph-hint{font-size:10.5px;color:var(--mut);margin-top:8px}
.fl-graph-empty{padding:40px 10px;text-align:center;color:var(--mut);font-size:12px}
/* El corte que pidió Juan: los tipos de gráfico son una barra de herramientas
   aparte, no la continuación del título. */
.fl-chart-ctrls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0 12px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.fl-seg{display:inline-flex;background:var(--soft);border-radius:10px;padding:2px;gap:2px}
.fl-segbtn{border:none;background:none;font-family:inherit;font-size:12px;font-weight:600;color:var(--mut);padding:5px 12px;border-radius:6px;cursor:pointer;white-space:nowrap}
.fl-segbtn.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.fl-seg-sm .fl-segbtn{font-size:11.5px;padding:5px 10px}
.fl-rubsel{font-family:inherit;font-size:11.5px;font-weight:600;color:var(--ink);border:1px solid var(--line);background:var(--card);border-radius:10px;padding:5px 10px;cursor:pointer;max-width:200px}
.fl-chev{color:var(--mut);font-size:11.5px;display:inline-block;width:12px}
/* La sección se pliega al tocarla, así que necesita hover. Antes era un tinte
   ámbar sobre gris; sobre la banda azul eso sería un salto de color. Se resuelve
   oscureciendo la propia banda, que es lo que hace un hover. */
.fl-table tr.fl-sec-h:hover td{filter:brightness(.9)}
.fl-table tr.fl-rub-on td{outline:1.5px solid var(--violet);outline-offset:-1.5px}
.fl-heat{overflow-x:auto}
.fl-heat table{border-collapse:collapse;width:100%;font-size:10.5px}
.fl-heat th{font-weight:600;color:var(--mut2);font-size:10.5px;padding:3px 4px;text-align:center}
.fl-heat th:first-child{text-align:left}
.fl-heat-lbl{text-align:left;font-weight:600;color:var(--terra);padding:4px 8px 4px 2px;white-space:nowrap;font-size:11.5px}
.fl-heat-c{text-align:center;padding:5px 3px;border:1px solid var(--card);font-variant-numeric:tabular-nums;min-width:34px}
.fl-table tr.fl-head td{font-weight:700}
.fl-table tr.fl-subt td{font-weight:600;border-top:1px solid var(--line)}
.fl-table tr.fl-mut td{color:var(--mut)}
/* 🔴 17-ago · La cabecera de columna del Cuadre esta hecha con <td>, no con
   <th>, asi que la regla L3-bis —que le quita la banda a `thead th`— no la
   alcanzaba: seguia con --soft2, el mismo tono que la banda del dia. Es la
   tercera vez hoy que una banda se salva por pintar el TD. Y el peso 700 esta
   derogado por §3: un rotulo de 11px se distingue por tamano y caja, no por peso. */
.cc-table tr.cc-colhdr td{font-size:10.5px;font-weight:600;color:var(--r-t2);text-transform:uppercase;letter-spacing:.02em;background:var(--r-s1);padding:5px 12px;border-bottom:1px solid var(--r-line-fuerte);text-align:center}
.cc-table tr.cc-colhdr td.l{text-align:left}
.util{margin-left:auto;display:flex;align-items:center;gap:6px}

.utilbtn.on{background:var(--olive-t);border-color:var(--olive);color:var(--olive)}

/* Buzón (inbox personal) */

.bz-bell{position:relative;background:var(--card);border:1px solid var(--line);border-radius:10px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--mut)}
.bz-bell:hover{border-color:var(--olive);color:var(--olive)}
.bz-bell svg{width:18px;height:18px;stroke-width:2}
.bz-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;background:var(--terra,var(--red));color:#fff;border-radius:10px;font-size:10.5px;font-weight:700;display:none;align-items:center;justify-content:center;line-height:1}
.bz-panel{display:none;position:absolute;top:46px;right:0;width:370px;max-width:92vw;max-height:72vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 38px rgba(0,0,0,.2);z-index:120}
.bz-hd{padding:12px 14px;border-bottom:1px solid var(--line);font-weight:700;font-size:14px;position:sticky;top:0;background:var(--card);z-index:1}
.bz-card{display:flex;gap:9px;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer;align-items:flex-start}
.bz-card:hover{background:var(--soft,var(--soft))}
.bz-card.unread{background:rgba(139,127,240,.07)}
.bz-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:0 0 auto;margin-top:6px}
.bz-ic{width:30px;height:30px;border-radius:10px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:14px}
.bz-tl{font-weight:600;font-size:13px;line-height:1.3}
.bz-dt{font-size:12px;color:var(--mut);margin-top:2px;line-height:1.4}
.bz-meta{font-size:10.5px;color:var(--mut);margin-top:4px;text-transform:capitalize}
.bz-x{margin-left:6px;color:var(--mut);border:none;background:none;cursor:pointer;font-size:13px;padding:2px 4px;flex:0 0 auto;border-radius:6px}
.bz-x:hover{background:var(--line);color:var(--ink)}
.bz-empty{padding:30px 16px;text-align:center;color:var(--mut);font-size:14px;font-weight:600;line-height:1.6}
.areahdr{padding-top:8px}
.areaname{font-size:20px;font-weight:700;letter-spacing:-.4px;margin:2px 0 10px}
.tabsnav{display:flex;gap:4px;padding-bottom:10px}
.app{display:flex;min-height:100vh}
.app.navhide .side{display:none}
.navscrim{display:none}
#navtoggle{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:10px;width:34px;height:34px;cursor:pointer;color:var(--mut);flex:none;margin:0 0 0 -6px;transition:background .15s ease,color .15s ease}
#navtoggle:hover{background:var(--soft2);color:var(--ink)}
#navtoggle svg{width:20px;height:20px}
/* ===== La cabecera deja de repetir dónde estás (13-ago) =====
   Juan: «el título gerencia y TODOS los títulos que aparecen son redundantes,
   elimínalos… sé perfectamente dónde estoy parado por el menú de la izquierda».
   Y el botón de plegar el menú se va del escritorio: «el menú debe estar por
   default siempre desplegado».
   Se ocultan por DEFECTO y se devuelven dentro del breakpoint de 640 que ya
   existe, en vez de abrir uno nuevo de 641: el sistema apunta a tener UNO solo
   y el verificador cuenta cada valor distinto como deuda. En teléfono los dos
   hacen falta — ahí el menú sí se pliega y la cabecera es lo único que ubica. */
#areaname{display:none}
#navtoggle{display:none}
@media(max-width:640px){
  #areaname{display:block}
  #navtoggle{display:inline-flex}
}
/* 🔴 Con el menú escondido, el botón que lo devuelve TIENE que verse (Juan, 14-ago):
   «al dar doble clic se esconde pero no hay manera de volver a verlo… solo F5».
   En escritorio este botón nace oculto —el menú siempre estaba a la vista, así que no
   hacía falta— y el doble clic para esconderlo llegó después. Quedó una salida sin
   entrada: la única forma de volver era recargar la página. */
.app.navhide #navtoggle{display:inline-flex}
#login-gate{display:none;position:fixed;inset:0;background:var(--bg);z-index:1000;align-items:center;justify-content:center;padding:20px}
.loginbox{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:32px 28px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:7px}
.loginbox .logo{height:34px;align-self:center;margin-bottom:4px}
.lgttl{font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:center}
.lgsub{font-size:12px;color:var(--mut);margin-bottom:12px;text-align:center}
.lglab{font-size:11.5px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.03em;margin-top:6px}
.lgin{padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit;width:100%}
.lgin:focus{outline:none;border-color:var(--olive)}
.lgerr{color:var(--red);font-size:12px;min-height:16px}
.lgbtn{margin-top:10px;padding:11px;border:none;border-radius:10px;background:var(--olive);color:#fff;font-weight:600;font-size:14px;cursor:pointer;font-family:inherit}
.lgbtn:disabled{opacity:.6;cursor:default}
.sidefoot{margin-top:auto;border-top:1px solid var(--border-inverse);display:flex;flex-direction:column}
.sidefoot-user{display:flex;align-items:center;gap:12px;padding:12px 8px 20px;margin:0 12px;min-width:0}
.uavatar{width:32px;height:32px;border-radius:50%;background:var(--bogo-terracota);color:var(--bogo-blanco);font-size:var(--size-body-sm);font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 32px}
.uinfo{display:flex;flex-direction:column;min-width:0}
.uchip{font-size:var(--size-body-sm);font-weight:600;color:var(--bogo-blanco);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.urole{font-size:var(--size-micro);color:var(--text-on-inverse-muted);text-transform:uppercase;letter-spacing:var(--tracking-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logoutb{font-size:11.5px;font-weight:600;color:var(--text-on-inverse-muted);background:none;border:1px solid var(--border-inverse);border-radius:6px;padding:5px 10px;cursor:pointer;font-family:inherit;flex:0 0 auto}
.logoutb:hover{color:var(--red);border-color:var(--red)}
.sidefoot-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 12px 12px}
.foot-editb{display:inline-flex;align-items:center;justify-content:center;color:var(--text-on-inverse-muted);background:none;border:1px solid var(--border-inverse);border-radius:6px;padding:5px 10px;cursor:pointer;font-family:inherit;flex:0 0 auto}
.foot-editb:hover{border-color:var(--bogo-terracota);color:var(--bogo-blanco)}
.foot-editb svg,.side-close svg{width:18px;height:18px;stroke-width:2;display:block}
.foot-editb.on{background:var(--terra);color:#fff;border-color:var(--terra)}

.pu-pick .selin{min-width:250px}

.pu-note{background:var(--olive-t);color:var(--olive);border-radius:10px;padding:12px 14px;font-size:13px;font-weight:500;margin-bottom:12px}
.pu-matrix{display:flex;flex-direction:column;gap:10px}
.pu-mod{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.pu-modh{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--soft);border-bottom:1px solid var(--line)}
.pu-modn{font-size:13px;font-weight:700;display:flex;align-items:baseline;gap:8px;flex:1 1 auto;min-width:0}
.pu-cnt{font-size:11.5px;font-weight:500;color:var(--mut);white-space:nowrap}
/* mismo ancho que el bloque de toggles -> la cabecera queda alineada con ellos */
.pu-modq{flex:0 0 var(--sw-block);display:flex;justify-content:flex-start}
.pu-off .pu-body{opacity:.55}
.pu-off .pu-modn{color:var(--mut)}
.pu-row{display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid var(--line)}
.pu-row:last-child{border-bottom:none}
.pu-row:hover{background:var(--bg)}
.pu-fn{flex:1 1 auto;min-width:0;font-size:13px;font-weight:500;display:flex;align-items:center;gap:7px}
.pu-fntxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pu-sens{font-size:9px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--terra);border:1px solid var(--terra);border-radius:999px;padding:0 6px;flex:0 0 auto;line-height:1.6}
/* bloque de toggles: ancho fijo -> alineados en columna entre todas las filas */
.pu-sws{display:flex;gap:6px;flex:0 0 var(--sw-block);justify-content:flex-start}
.pu-empty{padding:16px 12px;font-size:13px;color:var(--mut)}
/* resumen: informativo, NO parece boton (sin borde ni fondo de pastilla) */
.pu-sum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mut);margin-bottom:12px}
.pu-sum b{color:var(--ink);font-weight:700}
.pu-sum .sens b{color:var(--terra)}
/* «por defecto»: no se decidio para esta persona, sigue el valor de la
   categoria. Sin esta marca, un tilde apagado por descuido se ve igual que uno
   que nunca se toco. */
.pu-hered{margin-left:8px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);background:var(--soft2);border-radius:6px;padding:2px 6px}
/* Panel «Qué se ve en el menú» (superadmin). Reusa .pu-* del panel de permisos:
   misma forma para dos cosas parecidas, y cero CSS nuevo que mantener. */
/* El texto va en --amber, no en un hex de tema claro: --amber-t SI se invierte
   (#fdf6e3 claro / #2e2818 oscuro) y el hex fijo no, asi que en oscuro quedaba
   ambar oscuro sobre ambar oscuro — 2,61:1 medido. El par se mueve junto. */
.vs-aviso{background:var(--amber-t);color:var(--amber);border-radius:10px;padding:11px 13px;font-size:12.5px;line-height:1.55;margin-bottom:12px}
.vs-aviso b{font-weight:700}
.vs-sws{display:flex;gap:6px;flex:0 0 84px;justify-content:flex-start}
.vs-mk{font-size:9px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:0 6px;flex:0 0 auto;line-height:1.6;white-space:nowrap}
.vs-solo{color:var(--olive)}
.vs-nada{color:var(--mut2)}
/* El aviso de a quién se le aparecería: es la consecuencia del switch, va en
   terracota porque es lo único de esta pantalla que puede sorprender a alguien. */
.vs-verian{font-size:11px;color:var(--terra);font-weight:600;padding:0 12px 8px 26px;line-height:1.45}
.vs-modsw{flex:0 0 auto;display:flex;align-items:center}
.vs-modoff .pu-body{opacity:.45}
/* Panel de calce: las líneas de la factura que no se reconocieron.
   Una sola columna a propósito — se usa desde el teléfono, con la factura en
   la otra mano. */
/* El panel de calce se abre ENCIMA del formulario de registro, que sigue
   abierto detrás. Todos los .scrim comparten z-index 50, así que gana el que va
   último en el DOM — y #rgscrim está escrito mucho más abajo en el archivo. Sin
   esta línea el panel se ve pero no se puede tocar: los clics se los come el
   formulario de atrás. Lo encontró el test, no la producción. */
#czscrim{z-index:60}
/* Clase propia, NO se reusa .vs-aviso: dos elementos con la misma clase en
   modales distintos rompen cualquier selector que busque «el aviso». */
.cz-aviso{background:var(--soft);color:var(--ink);border-radius:10px;padding:11px 13px;
  font-size:12.5px;line-height:1.55;margin-bottom:12px}
.cz-aviso b{font-weight:700}
.cz-row{border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-bottom:10px;background:var(--card)}
.cz-row.ok{border-color:var(--olive);background:var(--olive-t)}
.cz-txt{font-size:13.5px;font-weight:700;line-height:1.35;word-break:break-word}
.cz-meta{font-size:11.5px;color:var(--mut);margin-top:2px}
.cz-q{width:100%;margin-top:9px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:16px;background:var(--bg);color:var(--ink)}
.cz-sug{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cz-sug button{font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);cursor:pointer;font-family:inherit;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cz-sug button:hover{border-color:var(--olive);color:var(--olive)}
.cz-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.cz-hecho{font-size:12.5px;font-weight:700;color:var(--olive)}
.cz-nada{font-size:12px;color:var(--mut);margin-top:8px}
/* Lo que falta para guardar. Va ARRIBA y dentro del formulario, no en un alert
   del navegador: un alert tapa la pantalla, no dice dónde está el campo y
   obliga a buscarlo a ciegas después de haber llenado todo. */
.rg-falta-box{background:var(--amber-t);color:#8a5a15;border-radius:11px;padding:11px 13px;
  font-size:13px;line-height:1.55;margin-bottom:12px}
.rg-falta-box b{font-weight:700}
.rg-falta-box ul{margin:6px 0 0;padding-left:18px}
.rg-falta-box li{margin-bottom:2px}
.rg-falta-box button{background:none;border:none;padding:0;font:inherit;color:inherit;
  text-decoration:underline;cursor:pointer}
/* Descartar cuesta dos clics; conservar, cero. Antes conservar tambien costaba
   cero pero perderlo tambien: un Escape, una x o un arrastre mal soltado. */
.rg-desc-bt{display:flex;gap:9px;margin-top:10px;flex-wrap:wrap}
.rg-falta-box .rg-desc-si,.rg-falta-box .rg-desc-no{text-decoration:none;border-radius:9px;
  padding:7px 15px;font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid transparent}
.rg-falta-box .rg-desc-si{background:none;border-color:var(--terra);color:var(--terra)}
/* Acción, no estado: es el botón que conserva el trabajo. El documento no la
   listaba en M1; se incluye porque dejarla olivo entre botones terracota es
   la ambigüedad que M1 viene a eliminar. */
.rg-falta-box .rg-desc-no{background:var(--terra);color:#fff}
/* «¿Cuál es este beneficiario en tu base?» — se pregunta junto al campo, no en
   un aviso arriba: la respuesta va en el campo que está al lado. */
.rg-map{background:var(--soft);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin-top:8px;font-size:12.5px;line-height:1.5}
.rg-map .leido{font-weight:700;color:var(--ink)}
/* Cada salida en su propio bloque: pegadas se leen como una sola pregunta y la
   de arriba se vuelve invisible. */
.rg-map-op{margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
/* Lo que esta persona NO puede hacer, dicho AL ABRIR y no al guardar. */
.rg-sinmerc{background:var(--soft);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;margin-bottom:8px;font-size:12.5px;line-height:1.5;color:var(--mut2)}
.rg-sinmerc b{color:var(--ink)}
/* La salida del aviso: crear el contacto que falta, sin salir del documento. */
.rg-falta-acc{border:none;border-radius:8px;padding:4px 11px;margin-left:6px;
  font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;
  background:var(--olive);color:#fff;white-space:nowrap}
/* El contacto se abre ENCIMA del formulario de registro. Todos los .scrim
   comparten z-index 50 y gana el último del DOM — y #rgscrim está escrito mucho
   más abajo que #ctscrim. Sin esto el modal se ve pero no se puede tocar: los
   clics se los come el formulario de atrás. Mismo caso que #czscrim. */
#ctscrim{z-index:70}
.pv-nota{font-size:11.5px;color:var(--mut);margin-top:5px;line-height:1.5}
/* Aviso de versión nueva. Discreto: no tapa nada y no interrumpe el trabajo. */
.ver-scrim{position:fixed;inset:0;z-index:99999;background:rgba(20,18,16,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:verEntra .18s ease-out}
@keyframes verEntra{from{opacity:0}to{opacity:1}}
.ver-caja{background:var(--bg);border-radius:18px;padding:28px 26px 22px;max-width:400px;
  width:100%;text-align:center;box-shadow:0 22px 60px rgba(0,0,0,.35)}
.ver-ico{width:52px;height:52px;border-radius:50%;background:var(--olive-t);color:var(--olive);
  display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px;
  font-weight:700}
.ver-tit{font-size:19px;font-weight:800;color:var(--ink);margin-bottom:7px}
.ver-txt{font-size:13.5px;color:var(--mut2);line-height:1.6;margin-bottom:20px}
.ver-bts{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.ver-bts button{border:none;border-radius:11px;padding:11px 22px;font-family:inherit;
  font-size:14px;font-weight:700;cursor:pointer;background:var(--olive);color:#fff}
/* La advertencia de que hay trabajo sin guardar. Va ANTES del botón a propósito:
   después del botón nadie la lee. */
.ver-ojo{background:var(--terra-t,rgba(190,90,60,.12));border:1px solid var(--terra);
  color:var(--ink);border-radius:11px;padding:11px 13px;font-size:12.5px;line-height:1.55;
  text-align:left;margin:-8px 0 18px}

/* El estado de conexión de cada línea, EN la línea.
   Juan, 30-jul: "leyó bien lo que compré. ¿en qué momento hace la conexión
   entre el nombre de los insumos de mi base y los que leyó? ¿qué hago aquí?"
   La respuesta era «al apretar Guardar», o sea cuando ya no está mirando la
   factura. Ahora se ve y se resuelve donde corresponde: en el renglón. */
.rg-cx{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:2px 0 8px 2px;font-size:12px}
.rg-cx.ok{color:var(--olive);font-weight:600}
.rg-cx.no{color:var(--terra)}
.rg-cx.mod{color:var(--ink)}
/* La equivalencia de unidad: la pregunta que evita meter 5000 cajas al
   inventario cuando la factura decía 5000 unidades. */
.rg-cx.duda{display:block;background:var(--amber-t);border:2px solid var(--terra);
  border-radius:11px;padding:11px 13px;margin:0 0 9px 2px;color:#8a3a15}
.rg-cx.ojo{display:block;background:var(--soft);border:1px solid var(--line);
  border-radius:10px;padding:9px 12px;margin:0 0 9px 2px;color:var(--mut2)}
.rg-duda-t{margin-top:4px;line-height:1.55;color:inherit;font-size:12.5px}
.rg-duda-f{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.rg-duda-f input{width:130px;padding:7px 10px;border:1px solid var(--terra);border-radius:9px;
  font-family:inherit;font-size:13px;background:var(--bg);color:var(--ink)}
.rg-duda-n{margin-top:6px;font-size:11.5px;color:var(--mut);line-height:1.5}
/* La vista previa de la equivalencia: qué entraría al inventario con lo que se
   acaba de escribir. Un factor abstracto no se puede verificar; «entran 48 u»
   sí — y es lo que faltaba el día de la cerveza. */
.rg-duda-pv{font-size:11.5px;color:var(--mut);line-height:1.5;flex:1 1 100%}
.rg-duda-mal{color:var(--amber);font-weight:600}
/* De qué lado del flujo cae el gasto. No es decorativo: es la diferencia entre
   $500 de gasto operativo y $500 de inversión en otro proyecto, y hasta el
   5-ago no se veía en ninguna parte. */
.rg-opera{color:var(--mut)}
.rg-dist{color:var(--violet);font-weight:600}
.rg-cx.mod select{border-color:var(--ink)}
.rg-cx .rg-cambiar{margin-left:2px}
.rg-cx select{flex:1 1 220px;min-width:0;max-width:100%;padding:6px 9px;border:1px solid var(--terra);
  border-radius:8px;font-family:inherit;font-size:13px;background:var(--bg);color:var(--ink)}
.rg-cx .prov{font-size:11px;color:var(--mut)}
/* El beneficiario sin reconocer: rojo y con volumen. Antes era una nota gris que
   se leía como información, no como algo que hay que hacer. */
.rg-map{background:var(--amber-t);border:2px solid var(--terra);border-radius:11px;
  padding:12px 14px;margin-top:9px;font-size:13px;line-height:1.55;color:#8a3a15}
.rg-map .leido{font-weight:800;color:var(--terra)}
.rg-map select{border-color:var(--terra)}
.rg-map.hecho{background:var(--olive-t);border-color:var(--olive);color:var(--olive)}
.rg-map select{width:100%;margin-top:7px;padding:8px 10px;border:1px solid var(--line);
  border-radius:9px;font-family:inherit;font-size:14px;background:var(--bg);color:var(--ink)}
/* El campo que falta se marca, para encontrarlo sin leer nada. */
.rg-mal{outline:2px solid var(--terra)!important;outline-offset:1px}
/* Bandeja «Por registrar». La misma lista en el teléfono (solo lectura) y en la
   PC (donde se procesa), porque es la misma cosa vista desde dos lados. */
.bn-row{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;
  padding:11px;margin-bottom:10px;background:var(--card)}
.bn-mini{width:64px;height:64px;flex:0 0 64px;border-radius:9px;object-fit:cover;border:1px solid var(--line);background:var(--soft)}
.bn-mini.doc{display:flex;align-items:center;justify-content:center;font-size:22px}
.bn-cen{flex:1 1 auto;min-width:0}
.bn-tl{font-size:13.5px;font-weight:700;line-height:1.3;word-break:break-word}
.bn-dt{font-size:11.5px;color:var(--mut);margin-top:3px;line-height:1.45}
/* La puerta de entrada a la bandeja desde la computadora (8-ago).
   Borde punteado y no sólido: dice «acá se suelta algo» sin competir con las
   tarjetas de abajo, que son el trabajo pendiente de verdad. */
.bn-drop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;
  padding:12px 16px;border:1px dashed var(--line);border-radius:10px;background:var(--soft)}
.bn-drop.on{border-color:var(--g-blue);background:var(--soft2)}
.bn-drop-c{flex:1 1 240px;min-width:0}
.bn-drop-c b{font-size:13px}
.bn-drop-s{font-size:11.5px;color:var(--mut);line-height:1.45;margin-top:2px}
.bn-drop-t{font-size:11.5px;color:var(--mut)}
.bn-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.bn-org{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  border-radius:999px;padding:1px 7px;border:1px solid currentColor;margin-left:6px;white-space:nowrap}
.bn-org.foto{color:var(--olive)} .bn-org.sri{color:var(--terra)}
.bn-vieja{color:var(--terra);font-weight:700}
/* «Ya lo pagué»: pegar un comprobante a un pago que YA existe. */
#pexscrim{z-index:60}
.px-q{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:16px;background:var(--bg);color:var(--ink);margin-bottom:10px}
.px-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;
  padding:9px 11px;margin-bottom:7px;background:var(--card);cursor:pointer}
.px-row:hover{border-color:var(--olive)}
.px-row.on{border-color:var(--olive);background:var(--olive-t)}
.px-id{font-weight:700;font-size:13px;flex:0 0 auto}
.px-cen{flex:1 1 auto;min-width:0;font-size:12.5px;line-height:1.4}
.px-cen .n{font-weight:600}
.px-cen .d{color:var(--mut);font-size:11.5px}
.px-tot{font-weight:700;font-size:13px;white-space:nowrap}
/* Cuánto difiere del monto que se buscó. Va en ámbar y no en rojo: no es un
   error, es un dato para mirar — el pago viejo casi nunca trae el monto fino. */
.px-dif{display:block;font-weight:600;font-size:11px;color:var(--amber);text-align:right}
.px-plan{background:var(--soft);border-radius:10px;padding:11px 13px;font-size:12.5px;line-height:1.6;margin-top:10px}
.px-plan .si{color:var(--olive);font-weight:600}
.px-plan .no{color:var(--terra);font-weight:600}
/* La mercadería se decide con el resto del plan, no en un confirm() posterior. */
.px-merc{display:flex;gap:9px;align-items:flex-start;margin-top:9px;padding:11px 13px;
  background:var(--olive-t);border:1px solid var(--olive);border-radius:10px;
  font-size:12.5px;line-height:1.55;cursor:pointer}
.px-merc input{margin-top:2px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--olive)}
.px-merc-nota{color:var(--mut);margin-top:3px}
/* Pantalla de cámara del teléfono. Un botón grande y nada más: en el celular se
   captura, no se procesa (decisión de Juan, 30-jul). */
.mv-wrap{padding:14px 12px 90px}
.mv-tit{font-size:18px;font-weight:700;letter-spacing:-.3px;margin:2px 0 4px}
.mv-sub{font-size:12.5px;color:var(--mut);line-height:1.5;margin-bottom:14px}
.mv-cam{width:100%;padding:20px 16px;border-radius:16px;border:none;background:var(--terra);color:#fff;
  font-family:inherit;font-size:17px;font-weight:700;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:10px}
.mv-cam:active{transform:scale(.99)}
.mv-guardar{width:100%;padding:15px;border-radius:14px;border:none;background:var(--olive);color:#fff;
  font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;margin-top:12px}
.mv-guardar[disabled]{opacity:.45}
.mv-sec{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);
  margin:22px 0 9px}
.mv-msg{background:var(--olive-t);color:var(--olive);border-radius:12px;padding:12px 14px;
  font-size:13.5px;line-height:1.5;margin-bottom:14px}
.mv-msg.mal{background:var(--amber-t);color:var(--terra)}
/* La cámara de facturas (14-sep): la misma pantalla que la foto de cédula de Bogö
   Staff. Siempre oscura, como toda cámara, en los dos temas: el papel se ve claro
   sobre negro y el contorno oliva dice que ya lo encontró. Encima de todo, incluso
   del menú del teléfono (210) y del botón de la IA (200). */
.mv-camara{position:fixed;inset:0;z-index:250;background:var(--bogo-negro);color:var(--bogo-blanco);
  display:flex;flex-direction:column;overflow:hidden}
.mv-camara video,.mv-camara svg{position:absolute;inset:0;width:100%;height:100%}
/* contain y no cover: con cover la pantalla recortaba los costados del video y
   el papel parecía salirse aunque la foto lo tuviera entero. Lo que se ve es lo
   que se toma. */
.mv-camara video{object-fit:contain}
.mv-camara polygon{fill:none;stroke:var(--bogo-oliva);stroke-width:4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mv-cam-txt{position:relative;padding:calc(20px + env(safe-area-inset-top)) 24px 16px;text-align:center;
  font-size:15px;font-weight:500;line-height:1.4;
  background:linear-gradient(color-mix(in srgb,var(--bogo-negro) 70%,transparent),transparent)}
.mv-cam-nota{font-size:13px;font-weight:400;color:var(--text-on-inverse-muted);margin-top:4px}
.mv-cam-marco{position:relative;flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:0 16px}
.mv-cam-rev{display:block;width:100%;height:auto;margin:auto 0;border-radius:10px}
.mv-cam-pie{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 24px calc(28px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,color-mix(in srgb,var(--bogo-negro) 70%,transparent))}
.mv-cam-disparo{width:72px;height:72px;flex:none;border-radius:50%;background:var(--bogo-blanco);cursor:pointer;
  border:6px solid color-mix(in srgb,var(--bogo-blanco) 35%,transparent);background-clip:padding-box}
.mv-cam-lado{width:88px;background:none;border:0;color:var(--bogo-blanco);font:inherit;font-size:15px;padding:12px 0;cursor:pointer}
.mv-cam-btn{flex:1;min-height:48px;border-radius:14px;border:0;font:inherit;font-size:16px;font-weight:600;cursor:pointer;
  background:var(--bogo-blanco);color:var(--bogo-negro)}
.mv-cam-btn.sec{background:none;color:var(--bogo-blanco);border:1px solid color-mix(in srgb,var(--bogo-blanco) 45%,transparent)}
:root{--sw-block:150px}
.sw{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mut);cursor:pointer;user-select:none;flex:0 0 72px}
.sw input{display:none}
.sw .track{width:32px;height:19px;border-radius:20px;background:var(--line);position:relative;transition:background .15s;flex:0 0 auto}
.sw .track::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--card);transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.sw input:checked+.track{background:var(--olive)}
.sw input:checked+.track::after{left:15px}
.sw input:checked~.swtxt{color:var(--ink);font-weight:600}
.sw.ed input:checked+.track{background:var(--terra)}
@media (max-width:640px){
  /* Compacto: nombre y toggles SIEMPRE en el mismo renglon, toggles a la derecha */
  :root{--sw-block:132px}
  .sw{flex:0 0 63px;gap:5px;font-size:11.5px}
  .sw .track{width:28px;height:17px}
  .sw .track::after{width:13px;height:13px}
  .sw input:checked+.track::after{left:13px}
  .pu-row{padding:7px 10px;gap:8px}
  .pu-modh{padding:8px 10px}
  .pu-modq .mini{padding:5px 9px;font-size:11.5px;white-space:nowrap}
}
@media (max-width:380px){
  :root{--sw-block:82px}
  .sw{flex:0 0 38px}
  .swtxt{display:none}          /* bajo 380px se dejan solo los interruptores */
}

.tk-fbtn.on{background:var(--olive);color:#fff;border-color:var(--olive)}

.tk-chev.op{transform:rotate(90deg)}

.tk-item.open{border-color:var(--olive)}

.tk-item.open .tk-caret{transform:rotate(180deg)}

.tk-savehint.ok{color:var(--green)}
.tk-savehint.err{color:var(--red)}

/* ================= Responsive / mobile ================= */
@media (max-width:820px){

  .areahdr{gap:6px}
  .kpis{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr}

  .toolbar{gap:8px}
  table{min-width:560px}
  main{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:480px){
  .kpis{grid-template-columns:1fr}

}
.mapa-sub{font-size:12px;color:var(--mut);margin-bottom:14px}
/* Botón de info (i) + popover al clic — reemplaza notas instructivas largas para no generar ruido visual */
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--mut);font:italic 700 11px/1 Georgia,serif;cursor:pointer;vertical-align:middle;margin-left:6px;padding:0;flex:none}
/* La «i» pasa a AZUL (13-ago): es información que se consulta, no una acción, y
   en terracota prometía que al tocarla algo iba a cambiar. Es el primer uso del
   token nuevo y la razón por la que se creó. */
.ibtn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-t)}
.ibtn.on{border-color:var(--blue);color:var(--blue);background:var(--blue-t)}
.ipop{position:fixed;z-index:3000;max-width:320px;background:var(--card,var(--soft));color:var(--ink);border:1px solid var(--line);font-size:12px;line-height:1.5;padding:11px 14px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);display:none}
.ipop.show{display:block}

/* Guía paso a paso por pantalla (18-sep-2026, Contabilidad): mismo mecanismo del tour de
   Bogö Staff (.guia/.globo/.dots) -- el globo se ancla junto al elemento real, como ya hace
   iPop() arriba, en vez de fijo abajo de la pantalla (Staff es movil, esto es escritorio con
   tablas anchas). Benchmark 18-sep: QuickBooks/Toast usan un "?" fijo en la esquina superior
   de cada pantalla, siempre visible, sin limite de repeticiones -- Appcues/Intercom coinciden
   en "un tour por pantalla, no uno solo para todo el modulo». */
.cbg-scrim{z-index:5000}
.cbg-on{outline:3px solid var(--terra);outline-offset:3px;position:relative;z-index:5001}
.cbg-globo{position:fixed;z-index:5002;max-width:320px;background:var(--ink);color:var(--bg);font-size:13px;line-height:1.5;padding:14px 16px;border-radius:14px;box-shadow:var(--shadow)}
.cbg-pie{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:10px}
.cbg-dots{display:flex;gap:4px;align-items:center}
.cbg-dots i{width:6px;height:6px;border-radius:3px;background:var(--mut);display:block;opacity:.5}
.cbg-dots i.on{width:16px;opacity:1;background:var(--bg)}
.cbg-sig{height:28px;padding:0 14px;border-radius:999px;background:var(--bg);color:var(--ink);font-size:13px;font-weight:600;border:0;cursor:pointer;flex:none}
.cbg-atr{background:none;border:0;padding:0;color:var(--bg);opacity:.7;font-size:13px;cursor:pointer}
.cbg-atr:hover{opacity:1}
.cbg-x{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--bg);opacity:.6;font-size:16px;line-height:1;cursor:pointer;padding:4px}
.cbg-x:hover{opacity:1}
/* 18-sep, tarde: Juan no vio cómo volver a abrir una guía ya vista -- un "?" solo,
   sin texto, no bastaba para alguien que la ve por primera vez. Pasa a pastilla con
   rótulo, como .mini, para que sea inconfundible en vez de un ícono a adivinar. */
.cbg-ver{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--mut);font-size:12px;font-weight:600;cursor:pointer;flex:none;margin-left:8px;font-family:inherit}
.cbg-ver:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-t)}

.mapa-badge{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.03em}
.mb-vivo{background:var(--green-t);color:var(--green)}
.mb-const{background:var(--amber-t);color:#9e6a1a}
.mb-prox{background:var(--soft);color:var(--mut2)}
/* ===== Buzón: sub-pestañas (Mi día / Roadmap) ===== */

.bzt a.on{color:var(--ink);border-bottom-color:var(--ink)}
/* ===== Roadmap (mapa de desarrollo, solo superadmin) ===== */
.rm-grp{margin-bottom:18px}
.rm-grph{display:flex;align-items:center;gap:9px;padding:0 2px 8px;border-bottom:1px solid var(--line);margin-bottom:8px}
.rm-grpn{font-weight:700;font-size:13px}
.rm-grpd{font-size:11.5px;color:var(--mut);font-weight:500}
.rm-grpc{margin-left:auto;font-size:11.5px;color:var(--mut);font-weight:600}
.rm-card{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);margin-bottom:7px;cursor:pointer}
.rm-card:hover{border-color:var(--mut)}
.rm-card.done{opacity:.5}
.rm-card.done .rm-tl{text-decoration:line-through}
.rm-tl{font-weight:600;font-size:13px;line-height:1.35}
.rm-dt{font-size:11.5px;color:var(--mut);margin-top:3px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rm-meta{font-size:10.5px;color:var(--mut);margin-top:5px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.rm-p{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:10px;color:#fff;flex:0 0 auto;letter-spacing:.02em}
.rm-tools{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.rm-chip{border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.rm-chip.on{border-color:var(--ink);background:var(--ink);color:var(--bg)}
/* El ancho del menú es una variable para poder arrastrarlo (Juan, 14-ago): «cuando hago hover
   aquí quiero que mi mouse se convierta en una flecha de dos lados para poder modificar el ancho
   del menú, o si hago doble clic que se esconda para leer tablas anchas full screen». */
:root{--side-w:212px}
.side{width:var(--side-w);flex:0 0 var(--side-w);background:var(--bogo-negro);position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
/* La manija: 6px sobre el borde derecho. Invisible hasta que te acercas. */
/* 🔴 Juan, 17-ago: «la línea del menú debe ser muy delgada, no quiero que
   tengan ningún relieve fuera de lo común, solo al hacer hover quiero
   descubrir que la puedo manipular». La manija tiene que ser invisible en
   reposo y solo delatarse al acercarse — hoy no lo era porque una regla mas
   abajo en el archivo (capa de roles) le pintaba `--r-line-fuerte` SIEMPRE,
   sin esperar el hover, y esa gana por venir despues en la cascada. */

/* ===== Explicaciones plegadas (regla del sistema de diseño, Juan 14-ago) =====
   «Todas las explicaciones son una i escondida o un acordeón cuando son muy grandes. Es
   demasiado ruido. Y cuando quiera borrarlas definitivamente pueda hacerlo con una X.»
   Se aplica sola a cada .fl-coach del dashboard: no hay que tocar las 13 pantallas. */
.fl-coach.coach{padding:0;border:1px solid var(--line);background:transparent}
.coach-head{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:12px;color:var(--mut)}
.coach-head:hover{color:var(--ink)}
.coach-i{flex:0 0 auto;width:16px;height:16px;border-radius:50%;border:1px solid currentColor;
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;font-style:italic}
.coach-t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coach-x{flex:0 0 auto;border:0;background:transparent;color:var(--mut);cursor:pointer;font-size:14px;line-height:1;padding:4px;border-radius:6px}
.coach-x:hover{color:var(--terra);background:var(--soft)}
.coach-body{display:none;padding:0 12px 12px;font-size:12.5px;line-height:1.6}
.coach.open .coach-body{display:block}
.coach.open .coach-t{white-space:normal;overflow:visible}

/* ===== Personal › Modelo =====
   La tabla tiene 16 columnas y no cabe: al desplazarla a la derecha se perdía de quién era la
   fila (Juan, 14-ago: «cuando hago scroll hacia la derecha necesito que la primera columna
   quede fija»). Se congela la columna Persona, cabecera incluida. */
.mo-tabla{position:relative}
.mo-tabla th:first-child,.mo-tabla td:first-child{position:sticky;left:0;z-index:2;background:var(--card)}
/* El encabezado va azul ENTERO (Juan, 14-ago: «coloca el color azul en todo el encabezado»).
   `.cc-table th` ya lo pinta azul en toda la app; acá lo perdía en dos zonas, las dos por
   especificidad: la columna congelada, que necesita fondo opaco y lo tomaba de --card, y las
   columnas de totales, que se teñían de --soft2 también en la cabecera. Se les devuelve el azul. */
.mo-tabla thead th:first-child{z-index:3;background:var(--blue)}
.mo-tabla th:first-child::after,.mo-tabla td:first-child::after{content:'';position:absolute;top:0;right:0;
  width:1px;height:100%;background:var(--line)}
/* La zona de totales se distingue por el FONDO, no por una raya (Juan, 14-ago). Va en --soft2 y no
   en ámbar: el ámbar se usa 55 veces en el dashboard y siempre significa «atención» — teñir los
   totales de ámbar los haría leer como un error. --soft2 es un beige cálido y existe en los dos temas.
   Solo el CUERPO de la tabla: en la cabecera manda el azul. */
.mo-tabla td.mo-tot{background:var(--r-banda)}
/* El filtro por área NO inventa un chip: usa .cc-presets + .cc-chip, que ya existen y ya están
   unificados con .fl-chip y .rm-chip. Lo único propio es el contador dentro del chip. */
.cc-chip .n{opacity:.6;margin-left:4px;font-size:11px;font-weight:400}
/* Chips de área más chicos (Juan, 14-ago: «achica la letra para que se lea»). Acotado a
   #modelo_body A PROPÓSITO: .cc-chip comparte la regla de tamaño con .fl-chip y .rm-chip, que
   viven en otras pantallas, y bajarla desde acá las movería sin que nadie lo haya pedido. */
#modelo_body .cc-chip{font-size:11px}
#modelo_body .cc-chip .n{font-size:10px}

/* Las pestañas ahora viven en la fila de la cabecera (Juan, 14-ago): ocupan el hueco entre el
   nombre del módulo y el botón de tema, y si no caben se desplazan solas en vez de partir la
   fila en dos renglones. */
.areahdr .tabsnav{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;padding-bottom:0;scrollbar-width:thin}
.areahdr .tabsnav::-webkit-scrollbar{height:4px}
.areahdr .tabsnav::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
@media(max-width:1024px){
  /* en teléfono la fila envuelve y las pestañas vuelven a su propio renglón, que es donde caben */
  .areahdr>div:first-child{flex-wrap:wrap}
  .areahdr .tabsnav{flex:1 0 100%;order:5;padding-bottom:8px}
}
.side-grip{position:absolute;top:0;right:-1px;width:2px;height:100%;cursor:col-resize;z-index:30;background:transparent!important;transition:background .12s}
.side-grip:hover,.side.resizing .side-grip{background:var(--terra)!important;opacity:.6}
body.side-resizing{cursor:col-resize;user-select:none}
@media(max-width:1024px){.side-grip{display:none}}   /* en teléfono el menú se pliega, no se arrastra */
.side .brand{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:24px 20px 16px}
.brandmark{display:inline-flex;flex-direction:column;align-items:stretch;gap:7px;width:fit-content}
.side-close{display:none}
.side .brand .logo{height:24px;width:auto;display:block}
.side .brand .logo[style*="--logo-src"]{background-color:var(--bogo-blanco)}
.side .brand .bttl{display:flex;justify-content:space-between;width:100%;font-size:10.5px;font-weight:700;line-height:1;color:var(--ink)}
.side .brand .bsub{font-size:10.5px;color:var(--mut);margin-top:2px}

.areanav{display:flex;flex-direction:column;gap:2px;padding:2px var(--space-3);flex:1 1 auto;min-height:0;overflow-y:auto}
.areanav a{display:flex;align-items:center;gap:var(--space-3);height:40px;padding:0 var(--space-3);border-radius:var(--radius-pill);font-size:var(--size-body-sm);font-weight:500;color:var(--text-on-inverse-muted);cursor:pointer;text-decoration:none;position:relative;transition:var(--transition-control)}
.areanav a svg{width:18px;height:18px;flex:0 0 18px;stroke-width:2}
.areanav a:hover{background:var(--bogo-negro-2);color:var(--bogo-blanco)}
.areanav a.on{background:var(--bogo-negro-2);color:var(--bogo-blanco);font-weight:700}
.areanav a.on::before{content:'';position:absolute;left:-12px;top:8px;bottom:8px;width:3px;background:var(--bogo-terracota);border-radius:0 var(--radius-xs) var(--radius-xs) 0}
.areanav a.soon{opacity:.55;cursor:default}
.areanav a.soon:hover{background:transparent;color:var(--text-on-inverse-muted)}

.navbz{margin-left:auto;background:#e0453a;color:#fff;font-size:10.5px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.mainwrap{flex:1;min-width:0}
.mainwrap .wrap{max-width:none;padding:0 30px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:6px 0}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 16px;box-shadow:var(--shadow)}
.kpi .lb{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.kpi .v{font-size:26px;font-weight:700;letter-spacing:-1px;margin-top:8px;font-variant-numeric:tabular-nums;line-height:1}
.kpi .d{font-size:11.5px;color:var(--mut);margin-top:7px}
.kpi .v.g{color:var(--green)}
.kpi .v.a{color:var(--amber)}
.kpi .v.r{color:var(--red)}
.kpi.hero{background:linear-gradient(180deg,var(--soft),var(--soft))}
.callout{margin:16px 0;background:var(--amber-t);border:1px solid #e7cfc7;border-radius:10px;padding:13px 15px;font-size:12px;line-height:1.5;color:var(--terra)}
.callout b{color:var(--terra)}
.fcbanner{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:10px;margin:2px 0 14px;font-weight:600;font-size:13px}
.fcbanner .big{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.fcbanner.g{background:var(--green-t);color:var(--green)}
.fcbanner.a{background:var(--amber-t);color:#b06a1f}
.fcbanner.r{background:var(--amber-t);color:var(--red)}
main{padding:28px 0 60px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.filterbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:-4px 0 16px}
.filterbar .flabel{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.filterbar select{padding:8px 12px;font-size:12px;font-weight:600;background:var(--card);border:1px solid var(--line);color:var(--mut)}
.filterbar select.on{background:var(--olive-t);border-color:var(--olive);color:var(--olive)}
.filterbar .count{margin-left:auto;color:var(--mut);font-weight:600}
.napill{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:6px;background:var(--line);color:var(--mut);cursor:pointer;letter-spacing:.02em}
.natog{border:1px solid var(--line);background:var(--card);color:var(--mut);font-size:10.5px;font-weight:700;padding:2px 5px;border-radius:6px;cursor:pointer;font-family:inherit;letter-spacing:.03em;margin-left:2px}
.natog:hover{border-color:var(--olive);color:var(--olive)}
.nacheck{font-size:11.5px;font-weight:500;text-transform:none;letter-spacing:0;display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--mut);cursor:pointer}
.nacheck input{width:auto}
.fcat{min-width:200px;font-weight:600}
@keyframes okflash{0%,55%{box-shadow:0 0 0 2px var(--olive)}100%{box-shadow:0 0 0 2px rgba(0,0,0,0)}}
.flash{animation:okflash .75s ease-out}
.search{flex:1;min-width:200px;padding:10px 13px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit;background:var(--card);color:var(--ink)}
select,.selin{padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit;background:var(--card);color:var(--ink);cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none}
.count{font-size:13px;color:var(--mut);margin-left:auto}
/* M1 · La acción principal del sistema. Terracota, y es lo único que se
   pinta con el color de marca. El olivo se retira de todo lo accionable y
   queda solo como estado: foco de teclado y switch encendido. */
.btn{padding:10px 16px;border-radius:10px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;border:1px solid var(--terra);background:var(--terra);color:#fff}
.btn.ghost{background:var(--card);color:var(--terra)}
.tablewrap{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:auto;box-shadow:var(--shadow)}
.ie{padding:4px 5px;border:1px solid var(--line);border-radius:6px;font-size:12px;font-family:inherit;background:var(--card);color:var(--ink);cursor:pointer;max-width:100%;appearance:none;-webkit-appearance:none;-moz-appearance:none}
#bulkbar select{padding:5px 8px;border:1px solid var(--olive);border-radius:6px;font-size:12px;font-family:inherit;background:var(--card);color:var(--ink);cursor:pointer}
table{width:100%;border-collapse:collapse;font-size:13px}
/* ===== LA FILA PRINCIPAL DE UNA TABLA, EN AZUL · TODA LA APP (13-ago) =====
   Juan lo pidió tres veces y las dos primeras lo apliqué mal. La regla es:
   **la fila de arriba de la tabla —la que rotula las columnas— va en azul.**
   «DÍA», «BENEFICIARIO Y CONCEPTO», «2026»: ésa es la fila principal.
   Yo había pintado las filas de ABAJO —secciones y totales— y él lo dijo con
   todas las letras: «aquí debe ir el azul, no abajo».
   Esta sola regla cubre las 30 tablas de la app porque todas usan <thead>.
   ÚNICA excepción, y es del propio Juan: en el Cuadre hay una fila de DÍA por
   encima de los rótulos. Ahí la principal es el día y los rótulos bajan a gris
   — es `.cc-colhdr`, más abajo. */
thead th{text-align:left;padding:8px 8px;background:var(--blue);color:var(--mut);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
tbody td{padding:7px 8px;border-top:1px solid var(--line)}
tbody tr:hover{background:var(--soft)}
tr.arch{opacity:.5}
.nm{font-weight:600}
.nmcell{display:inline-flex;align-items:center;gap:6px}
.editname{opacity:0;border:none;background:none;cursor:pointer;font-size:13px;color:var(--mut);padding:1px 5px;border-radius:6px;font-family:inherit;line-height:1}
tr:hover .editname{opacity:.65}
.editname:hover{opacity:1;color:var(--olive);background:var(--olive-t)}
.nminput{padding:5px 7px;border:1px solid var(--olive);border-radius:6px;font-size:13px;font-family:inherit;min-width:200px}
.hint{font-size:10.5px;color:var(--mut);margin-top:3px;white-space:nowrap;letter-spacing:.02em}
.pxwrap{display:inline-flex;align-items:center;gap:4px}
.pxsep{font-size:10.5px;color:var(--mut)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.badge{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:20px}
.badge.on{background:var(--olive-t);color:var(--olive)}
.badge.off{background:var(--amber-t);color:var(--terra)}
.badge.no{background:var(--line);color:var(--mut)}
.mini{padding:6px 12px;border:1px solid var(--line);background:var(--card);border-radius:10px;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit}
.mini:hover{border-color:var(--olive);color:var(--olive)}
.empty{text-align:center;color:var(--mut);padding:34px}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.scrim.show{display:flex}
.modal{background:var(--card);width:100%;max-width:520px;border-radius:14px;padding:22px;max-height:92vh;overflow-y:auto;overflow-x:hidden}
.modal h3{margin:0 0 16px;font-size:18px;letter-spacing:-.3px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}  /* sin esto una etiqueta larga ensancha la columna y el modal desborda 49px */
/* Barra de búsqueda de contactos — reemplaza al <datalist> nativo, que
   mostraba todo sin filtrar de verdad y no dejaba estilarlo (Juan, 20-ago:
   «esta debe ser una barra de búsqueda, no un drop down infinito»). Prefijo
   `tkp-` reusado a propósito — el guardián de diseño no deja sumar uno
   nuevo si ya hay uno de la misma pantalla (§5, «no se inventa un prefijo»). */
.tkp-drop{position:absolute;left:0;right:0;top:100%;margin-top:4px;max-height:220px;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:5}
.tkp-drop-item{padding:8px 12px;font-size:13px;cursor:pointer}
.tkp-drop-item:hover{background:var(--soft)}
.field.full{grid-column:1/-1;min-width:0}
.modal input,.modal select,.modal textarea{max-width:100%}
.field label{font-size:11.5px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.field input,.field select{padding:10px 11px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit;background:var(--bg);color:var(--ink)}
.acts{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
/* Borrar y anular NO son botones: son enlaces. Un boton compite con Guardar por
   la mirada, y esto tiene que costar un poco encontrarlo. */
.rg-acts-peligro{margin-right:auto;display:flex;gap:12px;align-items:center}
.rg-peli{border:0;background:transparent;font-family:inherit;font-size:12px;font-weight:600;color:var(--mut);cursor:pointer;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.rg-peli:hover{color:var(--ink)}
.rg-peli.mal:hover{color:var(--red)}
/* Modal de conteo: columna flex con tabla scrolleable y botones anclados */
.cmodal{display:flex;flex-direction:column;height:88vh;max-height:88vh;overflow:hidden;padding-bottom:16px}
.cmodal h3,.cmodal #csummary,.cmodal .cbar,.cmodal #cwarn,.cmodal .acts{flex:0 0 auto}
.cmodal .tablewrap.cscroll{flex:1 1 auto;min-height:0;overflow:auto}
.cmodal thead th{position:sticky;top:0;background:var(--blue);z-index:2}
.cmodal .acts{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.cbar{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.cbar input{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit;background:var(--bg);color:var(--ink);}
.cbar input:focus{border-color:var(--terra)}
.cbar .csc{font-size:12px;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:10px;font-size:13px;font-weight:500;z-index:60;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.app-toast-fija{display:flex;align-items:center;gap:10px;max-width:min(86vw,520px)}
.app-toast-x{background:transparent;border:none;color:inherit;opacity:.75;font-size:16px;line-height:1;cursor:pointer;padding:2px 4px;font-weight:700}
.app-toast-x:hover{opacity:1}
.tabsnav a{display:inline-flex;align-items:center;white-space:nowrap;transition:color .12s ease,box-shadow .12s ease}
.app .tabsnav a:hover{background:var(--soft);color:var(--ink)}
/* 🔴 n49 · «tengo aqui un fondo amarillo... no hay armonia entre los
   acentos» (Juan, 17-ago). Medido: la pestaña activa se pintaba con `--amber-t`,
   que en el sistema 2026 es `--r-ojo-t` — el tinte de ATENCION. O sea el color
   de «ojo, mira esto» usado para decir «estas aqui». Dos significados en un
   color es como una paleta deja de tener armonia.
   SISTEMA-VISUAL-2026 §4 · C1: navegar no lleva color, y el marcador de «esta»
   es tinta (`--seg-on`).
   ⚠️ Primer intento: superficie de tarjeta + barra arriba + esquinas curvas.
   Juan: «aplicaste un estilo absurdamente antiguo... deja activa solo la linea
   inferior, la marca superior curva eliminala por completo». Tenia razon: eso
   era una pestaña de carpeta, y el sistema no tiene ese objeto. Queda UNA linea
   abajo y el texto en tinta. Sin fondo, sin curva, sin caja.

   ⚠️ 17-ago · ERAN DOS LINEAS, NO UNA — y de colores distintos. Esta regla
   agregaba una barra de TINTA con box-shadow inset justo encima del
   border-bottom TERRACOTA que .nav a.on ya pintaba (linea 213). Medido
   ejecutando la pagina: border 2px rgb(147,57,42) mas sombra inset 2px
   rgb(22,25,31), apiladas. Juan lo vio sin medir nada: «la linea debe ser un
   solo terracota, me parece que es un mix de colores de la paleta».
   Se quita la sombra y queda la terracota sola, que es lo que este comentario
   venia diciendo desde el principio. El color de texto se queda como estaba:
   --seg-on y --ink valen los dos --r-t1, asi que ahi no cambia nada. */
.app .tabsnav a.on{background:transparent;color:var(--text-title)}
.fxdot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:7px}
.d-const{background:var(--amber)}.d-prox{background:#c9c9ce}
.ph{border:1px dashed #d8d8dd;border-radius:14px;padding:50px 34px;text-align:center;background:var(--card);box-shadow:var(--shadow);max-width:760px}
.ph .badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 11px;border-radius:20px}
.ph .b-const{background:var(--amber-t);color:var(--amber)}.ph .b-prox{background:var(--bg);color:var(--mut);border:1px solid var(--line)}
.ph .fname{font-size:26px;font-weight:700;letter-spacing:-.5px;margin:15px 0 6px}
.ph .fdesc{font-size:14px;color:var(--mut);max-width:540px;margin:10px auto 0;line-height:1.55}
/* ===== Cuadre de caja ===== */
.cc-wrap{max-width:1120px;margin:0 auto}
.cc-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}

.cc-presets{display:flex;gap:8px;flex-wrap:wrap}
.cc-chip{padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13px;font-family:inherit;cursor:pointer;color:var(--ink);transition:.12s}
.cc-chip:hover{border-color:var(--terra)}
.cc-chip.on{background:var(--terra);border-color:var(--terra);color:#fff}
.cc-range{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut);flex-wrap:wrap}
.cc-range input{padding:7px 10px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:13px;color:var(--ink);background:var(--bg)}

.cc-box{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}

.cc-badge{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px}
.cc-badge.prog{background:var(--amber-t);color:var(--terra)}
.cc-badge.done{background:var(--green-t);color:var(--green)}
.pg-pill{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pg-pill.pg-pagado{background:var(--green-t);color:var(--green)}
.pg-pill.pg-pend{background:var(--amber-t);color:var(--red)}
.pg-pill.pg-futuro{background:var(--amber-t);color:var(--amber)}
.pg-table{width:100%;table-layout:fixed}
.pg-table td,.pg-table th{padding:8px 12px;overflow:hidden}
.pg-table td:nth-child(1),.pg-table th:nth-child(1){width:98px}
.pg-table td:nth-child(2),.pg-table th:nth-child(2){width:88px}
.pg-table td:nth-child(4),.pg-table th:nth-child(4){width:180px}
.pg-table td:nth-child(5),.pg-table th:nth-child(5){width:100px}
.pg-table td:nth-child(6),.pg-table th:nth-child(6){width:150px;white-space:nowrap;overflow:visible}
.pg-table td:nth-child(3){word-break:break-word}
.pg-table tbody tr[data-pgrow]{cursor:pointer}
.pg-row-pend td{background:var(--soft)}
.pg-row-sens td{background:var(--soft);color:#8b8b83}
.pg-row-sens td b{color:#6f6f68;font-weight:600}
.pg-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.cc-box.pg-scrollx{overflow:auto;-webkit-overflow-scrolling:touch}
.cc-box.cc-scrollx{overflow:auto;-webkit-overflow-scrolling:touch}
/* Contactos: la tabla se ajusta al ancho, sin scroll horizontal */
.cc-table.ct-fit{min-width:0}
/* 8-sep · La flecha de orden va en ::after y NUNCA en el texto: el test del plano
   compara los nombres de las doce columnas, y «Fecha ↓» no es el nombre de una
   columna sino su estado. Con ::after no entra en textContent. */
th[data-bioorden]{cursor:pointer}
th[data-bioorden][data-dir="asc"]::after{content:' ↑';opacity:.75}
th[data-bioorden][data-dir="desc"]::after{content:' ↓';opacity:.75}
.cc-table.ct-fit td,.cc-table.ct-fit th{white-space:normal;word-break:break-word}
.cc-table.ct-fit td.l,.cc-table.ct-fit th.l{text-align:left}
.pg-tabs{display:flex;gap:4px;background:var(--soft);padding:4px;border-radius:10px;width:fit-content;margin-bottom:8px}
.pg-tab{padding:7px 16px;font-size:13px;font-weight:600;color:var(--mut);border-radius:10px;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.pg-tab:hover{color:var(--ink)}
.pg-tab.on{background:var(--bg);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.pg-tabsub{font-size:12px;color:var(--mut);margin-bottom:14px}
.pg-oculto{font-size:12px;color:var(--mut);background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:-4px 0 16px;line-height:1.5}
.pg-oculto b{color:var(--ink);font-weight:600}
.pg-chk{display:flex;align-items:center;gap:7px;font-weight:600;font-size:13px;cursor:pointer}
/* --- Contactos: ficha de identidad --- */
.ct-hint{font-size:12px;color:var(--mut);margin-top:5px;line-height:1.4}
.ct-hint b{color:var(--ink);font-weight:600}
/* ===== Contactos · un renglón por contacto (13-ago) =====
   Las etiquetas iban en una línea propia debajo del nombre y cada contacto
   ocupaba dos renglones. Ahora van al lado, en la misma línea. */
.ct-linea{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap}
/* El ojo abre la ficha, que es donde viven RUC, banco y cuenta desde que
   salieron de la tabla. */
.ct-ojo{font-size:13px}
/* WhatsApp reemplaza a la columna «Persona»: un clic y estás hablando. */
.ct-wa{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--green-t);color:var(--green);text-decoration:none;
  font-size:12px;flex:none}
.ct-wa:hover{background:var(--green);color:var(--fab-ink)}
/* La búsqueda, con lupa y más contraste, arriba de los filtros. */
.ct-top{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
/* Chips de Contactos -- 23-ago, antes 100% inline y sin regla propia, la única
   pantalla así (el resto ya usa .fx-tab/.rg-seg/etc). Mismo par fondo+texto en
   UNA sola regla por estado (§12 del sistema visual), calcado de .fx-tab. */
.ct-tab{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--mut);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.ct-tab.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* El número va PEGADO al título, como en Registro (.rg-n) -- una insignia
   chica, no texto en negrita suelto. */
.ct-n{display:inline-block;min-width:16px;padding:0 4px;border-radius:6px;background:var(--line);color:var(--ink);font-size:10px;font-weight:700;line-height:15px;text-align:center;margin-left:4px}
.ct-tab.on .ct-n{background:var(--bg);color:var(--ink)}
/* Pestañas (.tabsnav dentro de Contactos): la regla del sistema visual (§4·C4)
   dice que el tab activo va "en tinta, peso 500 y barra de 2px" -- la clase
   compartida .tabsnav a.on solo traía el color, que acá coincide con el color
   base y quedaba invisible. Se completa acá, beneficia a cualquier pantalla
   que use pestañas de módulo. */
.tabsnav a{font-weight:400;border-bottom:2px solid transparent;padding-bottom:6px}
.app .tabsnav a.on{font-weight:700;border-bottom-color:var(--bogo-terracota)}
.tabsnav a .ct-n{margin-left:5px}
.ct-buscar{display:flex;align-items:center;gap:6px;border:1px solid var(--mut2);border-radius:10px;
  background:var(--card);padding:0 10px;min-width:260px}
.ct-buscar:focus-within{border-color:var(--blue)}
.ct-lupa{font-size:12px;opacity:.6}
.ct-buscar input{border:0;background:none;color:var(--ink);font-family:inherit;
  font-size:13px;padding:8px 0;flex:1;min-width:0}
.ct-dup{font-size:12px;color:#b5701f;background:var(--amber-t);border-radius:8px;padding:7px 10px;margin-top:6px;line-height:1.45}
.ct-dup button{border:none;background:none;color:#b5701f;font:inherit;font-weight:600;text-decoration:underline;cursor:pointer;padding:0}
.ct-box{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:2px 0 14px}
.ct-box-t{font-size:11px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.03em;margin-bottom:9px}
.ct-bp{display:flex;align-items:flex-start;gap:8px;font-size:13px;cursor:pointer;padding:4px 0;line-height:1.4}
.ct-bp input{margin-top:2px;flex:none}
.ct-bp em{font-style:normal;color:var(--mut)}
.ct-mas{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;padding:9px 0;font:inherit;font-size:13px;font-weight:600;color:var(--mut);cursor:pointer;text-align:left}
.ct-mas:hover{color:var(--ink)}
.ct-mas-n{font-weight:400;font-size:12px;color:var(--mut)}
.ct-prov{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:10px;cursor:pointer;font-size:13px;line-height:1.4}
.ct-prov input{margin-top:2px;flex:none}
.ct-prov-s{color:var(--mut);font-size:12px}
.ct-prov-av{font-size:12px;color:var(--mut);background:var(--soft);border-radius:8px;padding:8px 11px;margin-top:8px;line-height:1.45}
.ct-prov-av b{color:var(--ink);font-weight:600}
#ctscrim.per .ct-emp,#ctscrim.emp .ct-per{display:none}
/* ===================== Tareas v2 ===================== */
.tq-amb{display:flex;gap:4px;background:var(--soft);padding:4px;border-radius:12px;width:fit-content;max-width:100%;margin-bottom:14px;overflow-x:auto}
.tq-ab{display:flex;align-items:center;gap:7px;padding:8px 16px;border:none;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--mut);border-radius:10px;cursor:pointer;white-space:nowrap}
.tq-ab:hover{color:var(--ink)}
.tq-ab.on{background:var(--bg);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.tq-ab .n{font-weight:500;font-size:12px;opacity:.65}
.tq-addwrap{margin-bottom:14px}
.tq-add{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:4px 4px 4px 14px;background:var(--card);transition:border-color .12s}
.tq-add:focus-within{border-color:var(--ink)}
/* El «+» dejo de ser un adorno y es EL boton de guardar (Juan, 14-ago): «este boton a la
   izquierda con un simple +, la tarea se puede guardar al dar clic ahi o al dar un
   simple enter». Antes habia un + decorativo a la izquierda y un boton «Anadir» a la
   derecha: dos elementos para una sola accion, y el que parecia botón no lo era. */
.tq-add-p{color:var(--mut);font-size:20px;font-weight:400;line-height:1;flex:none;
  border:none;background:none;cursor:pointer;padding:0 4px;font-family:inherit}
.tq-add-p:hover{color:var(--ink)}
/* Los desplegables de la captura: sin borde para no partir la caja en tres. */
.tq-add .tq-sel{border:none;background:none;font-size:12px;color:var(--mut);max-width:120px}
.tq-add .tq-sel:hover{color:var(--ink)}
.tq-add input{flex:1;min-width:0;border:none;background:none;font:inherit;font-size:14px;color:var(--ink);padding:10px 0;}
.tq-hint{font-size:12px;color:var(--mut);margin-top:7px;line-height:1.5;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tq-tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;background:var(--soft);color:var(--ink)}
.tq-tag.p1{background:#fbe9e7;color:#b3261e}.tq-tag.p2{background:var(--amber-t);color:var(--amber)}
.tq-tag.p3{background:#e9f0fb;color:#2f5a99}.tq-tag.p4{background:var(--soft);color:var(--mut)}
.tq-tag.no{background:#fbe9e7;color:#b3261e}
.tq-bar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.tq-chip{border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.tq-chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tq-chip .n{opacity:.65;font-weight:500}
.tq-sel{padding:6px 10px;border:1px solid var(--line);border-radius:20px;font-family:inherit;font-size:12px;font-weight:600;background:var(--bg);color:var(--ink);max-width:190px}
.tq-q{padding:6px 12px;border:1px solid var(--line);border-radius:20px;font-family:inherit;font-size:12px;background:var(--bg);color:var(--ink);min-width:150px;flex:1;max-width:260px}
.tq-gh{display:flex;align-items:center;gap:8px;margin:20px 0 4px;cursor:pointer;user-select:none}
.tq-gh:first-child{margin-top:2px}
.tq-gh-t{font-size:13px;font-weight:700;color:var(--ink)}
.tq-gh-n{font-size:12px;color:var(--mut)}
/* El «debía estar hecho» de Vencido: dice por que ese bloque va primero. */
.tq-gh-s{font-size:12px;font-weight:400;color:var(--mut)}
/* Lo vencido es lo unico que se marca: ya fallo, y el resto son plazos que corren. */
.tq-gh.venc .tq-gh-t{color:var(--terra)}
.tq-gh-c{font-size:10px;color:var(--mut);transition:transform .12s}
.tq-gh-c.op{transform:rotate(90deg)}
.tq-it{display:flex;align-items:flex-start;gap:11px;padding:11px 2px;border-bottom:1px solid var(--line)}
.tq-it.sub{padding-left:30px}
.tq-it:hover{background:var(--soft)}
.tq-ck{flex:none;width:19px;height:19px;border-radius:50%;border:1.5px solid var(--mut2,#bbb);background:none;cursor:pointer;margin-top:1px;position:relative;padding:0}
.tq-ck:hover{background:var(--soft)}
.tq-ck::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;opacity:0;transition:opacity .1s}
.tq-ck:hover::after{opacity:.45}
.tq-ck.p1{border-color:#b3261e}.tq-ck.p2{border-color:#b5701f}.tq-ck.p3{border-color:#2f5a99}
.tq-ck.done{background:var(--mut2,#bbb);border-color:var(--mut2,#bbb)}
.tq-ck.done::after{opacity:1;color:#fff}
.tq-body{flex:1;min-width:0;cursor:pointer}
.tq-t{font-size:14px;line-height:1.4;color:var(--ink);word-break:break-word}
.tq-it.hecha .tq-t{text-decoration:line-through;color:var(--mut)}
.tq-m{font-size:12px;color:var(--mut);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tq-venc{color:#b3261e;font-weight:600}
.tq-hoy{color:#2f7a3e;font-weight:600}
.tq-who{display:inline-flex;align-items:center;gap:5px}
.tq-av{width:17px;height:17px;border-radius:50%;background:var(--soft2,#e6e2d8);color:var(--ink);font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.tq-sn{font-size:11px;color:var(--mut);background:var(--soft);border-radius:20px;padding:1px 8px}
.tq-acc{padding:4px 2px 16px 32px;border-bottom:1px solid var(--line);background:var(--soft)}
.tq-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tq-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.tq-f.full{grid-column:1/-1}
.tq-f label{font-size:11px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.03em}
.tq-f input,.tq-f select,.tq-f textarea{padding:8px 10px;border:1px solid var(--line);border-radius:9px;font-family:inherit;font-size:13px;background:var(--bg);color:var(--ink);width:100%;min-width:0}
.tq-f textarea{resize:vertical}
.tq-acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;align-items:center}
.tq-del{margin-left:auto;border:none;background:none;color:var(--terra);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:6px}
.tq-vacio{padding:44px 20px;text-align:center;color:var(--mut);font-size:13px;line-height:1.6}
.tq-undo{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:var(--ink);color:var(--bg);border-radius:12px;padding:11px 16px;display:flex;align-items:center;gap:14px;font-size:13px;z-index:900;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.tq-undo button{border:none;background:none;color:#fff;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:0}
@media(max-width:640px){
  .tq-grid{grid-template-columns:1fr}
  .tq-add{padding-left:11px}
  .tq-add input{font-size:16px}
  .tq-q{max-width:none}
  .tq-acc{padding-left:8px}
  .tq-it.sub{padding-left:22px}
}
@media(max-width:640px){
  #contactos_body .ct-linea{flex-wrap:wrap}
  #contactos_body .ct-det{display:none}
  #contactos_body .cc-table td,#contactos_body .cc-table th{padding:9px 8px}
  #contactos_body .cc-table .mini{display:block;width:100%;margin:0 0 5px!important}
}
.pg-chk input{width:auto}
.ts-hero{border-radius:14px;padding:20px 22px;margin-bottom:16px;color:#fff}
.ts-hero.ok{background:linear-gradient(135deg,var(--green),#5a9c42)}
.ts-hero.bad{background:linear-gradient(135deg,#b5432a,#cf5636)}
.ts-hero-q{font-size:13px;opacity:.92;font-weight:600}
.ts-hero-a{font-size:26px;font-weight:800;margin:4px 0 6px;line-height:1.15}
.ts-hero-sub{font-size:12px;opacity:.92}

.ts-kpi-v.ok{color:var(--green)}.ts-kpi-v.warn{color:var(--amber)}.ts-kpi-v.bad{color:var(--red)}

.ts-note{font-size:11.5px;color:var(--mut);margin-top:10px;line-height:1.5}
.ts-foot{font-size:11.5px;color:var(--mut);margin-top:14px;line-height:1.6;border-top:1px solid var(--line);padding-top:10px}
.ts-col{max-width:680px;margin:0 auto}
.ts-panel{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:15px 18px;margin-bottom:14px}

.ts-panel-t{font-weight:800;font-size:14px}
.ts-panel-sub{font-size:11.5px;color:var(--mut);margin-bottom:8px}
.ts-acct{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.ts-acct:last-child{border-bottom:none}
.ts-acct-name{font-weight:600;font-size:13px}
.ts-acct-tipo{font-size:11.5px;color:var(--mut);margin-top:1px}
.ts-acct-val{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:7px;white-space:nowrap}
.ts-acct-fecha{font-size:10.5px;color:var(--mut);font-weight:400}
.ts-def{color:var(--terra);font-weight:700;cursor:pointer;border-bottom:1px dashed var(--terra)}
.ts-src{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:1px 6px;border-radius:999px;background:var(--soft);color:var(--mut);vertical-align:middle}
.ts-src.edit{background:var(--amber-t);color:var(--amber)}
.ts-tot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;padding-top:11px;border-top:2px solid var(--line);font-weight:800;font-size:14px}
.ts-tot .v{font-size:18px;font-variant-numeric:tabular-nums}
.ts-tot.big .v{font-size:20px}
/* ===== Las tarjetas de Cuentas se pliegan (Juan, 17-ago) =====
   «Quiero el balance en acordeón y encogido por default» · «al encoger el
   acordeón debo poder ver el total… esto no se esconde» · y para Futuros:
   «misma mecánica… se lee el título y el total».
   🔴 Por eso el total vive FUERA del cuerpo plegable, no adentro: plegado se
   leen el título y la cifra, que es exactamente a lo que uno entra. Si el total
   estuviera dentro del cuerpo, plegar lo escondería y la tarjeta no diría nada.
   El galón separador solo tiene sentido cuando hay filas encima: plegada, la
   cifra queda pegada al título sin línea de por medio. */
.ts-acc-h{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;user-select:none}
.ts-acc-chev{flex:none;color:var(--mut);font-size:11px;line-height:1;transition:transform .15s ease}
.ts-panel.abierto .ts-acc-chev{transform:rotate(90deg)}
.ts-acc-body{display:none}
.ts-panel.abierto .ts-acc-body{display:block}
.ts-panel:not(.abierto) .ts-tot{margin-top:12px;padding-top:0;border-top:none}
/* El colchón lleva su señal en el BORDE, no en el fondo: el fondo de tarjeta
   es superficie del sistema y teñirlo la sacaría de la familia. */
.ts-colchon{border-left:3px solid var(--line)}
.ts-colchon.sube{border-left-color:var(--green)}
.ts-edbtn{border:1px solid var(--line);background:var(--bg);border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:12px;line-height:1;color:var(--mut)}
.ts-edbtn:hover{border-color:var(--terra);color:var(--terra)}
.ts-sinput{width:118px;padding:5px 8px;border:1px solid var(--terra);border-radius:10px;font-family:inherit;font-size:14px;font-weight:700;text-align:right;background:var(--bg);color:var(--ink)}

.ger-down{color:var(--red);font-weight:800}

.ger-alert{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.ger-alert:last-child{border-bottom:none}
.ger-alert-t{font-weight:600;font-size:13px}
.ger-alert-s{font-size:11.5px;color:var(--mut);margin-top:1px}
.ger-badge{font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap}
.ger-badge.bad{background:var(--amber-t);color:var(--red)}.ger-badge.warn{background:var(--amber-t);color:var(--amber)}.ger-badge.ok{background:var(--green-t);color:var(--green)}

@media(max-width:720px){.ger-kpis{grid-template-columns:1fr}.ger-scale{grid-template-columns:1fr}}
/* ===== Piloto bento (base neutra fría + paleta pastel solo en datos) — scoped a Gerencia ===== */
.bento{--b-card:var(--card);--b-ink:var(--ink);--b-mut:var(--mut);--b-line:var(--line);--b-accent:#8b7ff0;--b-green:var(--green);--b-coral:#e0685f;font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;color:var(--b-ink);max-width:1120px;margin:0 auto}
.b-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:13px;align-items:stretch}
.b-tile{background:var(--b-card);border:1px solid var(--b-line);border-radius:14px;padding:17px 19px;box-shadow:0 1px 2px rgba(30,30,50,.03),0 10px 26px -18px rgba(40,40,70,.22);transition:box-shadow .18s ease,transform .18s ease;animation:bIn .45s cubic-bezier(.22,.61,.36,1) both}
.b-tile:hover{box-shadow:0 2px 4px rgba(30,30,50,.05),0 16px 34px -16px rgba(40,40,70,.30)}
.b-hov:hover{transform:translateY(-3px)}
@keyframes bIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.b-grid>*:nth-child(1){animation-delay:0s}.b-grid>*:nth-child(2){animation-delay:.04s}.b-grid>*:nth-child(3){animation-delay:.08s}.b-grid>*:nth-child(4){animation-delay:.12s}.b-grid>*:nth-child(5){animation-delay:.16s}.b-grid>*:nth-child(6){animation-delay:.20s}.b-grid>*:nth-child(7){animation-delay:.24s}.b-grid>*:nth-child(8){animation-delay:.28s}.b-grid>*:nth-child(9){animation-delay:.32s}.b-grid>*:nth-child(n+10){animation-delay:.36s}
@media(prefers-reduced-motion:reduce){.b-tile{animation:none}.b-hov:hover{transform:none}}
.b-q{grid-column:span 3}.b-2{grid-column:span 4}.b-3{grid-column:span 6}.b-4{grid-column:span 8}.b-6{grid-column:span 12}
.b-liq{background:linear-gradient(180deg,var(--soft),#fff)}
.b-liq .b-kv{color:var(--b-ink)}

.b-acc-h{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.b-acc-t{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--b-ink);display:flex;align-items:center;gap:8px}
.b-acc.b-alert-red{position:relative}
.b-acc-n{font-size:11.5px;font-weight:800;color:#fff;background:#9aa0aa;border-radius:999px;padding:1px 9px}
.b-alert-red .b-acc-n{background:var(--b-coral)}
.b-acc-chev{margin-left:auto;font-size:12px;color:var(--b-mut);transition:transform .18s}
.b-acc.collapsed .b-acc-chev{transform:rotate(-90deg)}
.b-alertbox{background:var(--soft);border-color:#ececf0}
.b-acc-body{margin-top:11px;overflow:hidden;transition:max-height .22s ease,opacity .2s ease;max-height:420px}
.b-acc.collapsed .b-acc-body{max-height:0;opacity:0;margin-top:0}

.b-sk{min-height:104px}
.b-sk>div{background:linear-gradient(90deg,var(--line) 25%,var(--soft) 37%,var(--line) 63%);background-size:400% 100%;animation:bShim 1.3s ease infinite;border-radius:6px}
.b-sk-l{width:52%;height:10px;margin-bottom:15px}.b-sk-n{width:72%;height:22px;margin-bottom:11px}.b-sk-s{width:40%;height:9px}
@keyframes bShim{0%{background-position:100% 0}100%{background-position:-100% 0}}
.b-hero{grid-column:span 6;border-radius:20px;padding:22px 26px;color:var(--b-ink);background:var(--card);border:1px solid var(--b-line);box-shadow:0 1px 2px rgba(30,30,50,.03),0 12px 30px -20px rgba(40,40,70,.28);position:relative;overflow:hidden}
.b-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(139,127,240,.10),transparent 70%);pointer-events:none}

.b-hero-chip{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 11px;border-radius:999px;background:var(--green-t);color:var(--b-green);margin-bottom:10px}
.b-hero-chip.bad{background:var(--amber-t);color:var(--b-coral)}

.b-kl{font-size:10.5px;font-weight:700;color:var(--b-mut);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-kv{font-size:26px;font-weight:800;letter-spacing:-.7px;margin-top:8px;font-variant-numeric:tabular-nums;line-height:1.03;color:var(--b-ink)}
.b-ks{font-size:11.5px;color:var(--b-mut);margin-top:6px;line-height:1.4}
.b-up{color:var(--b-green);font-weight:800}.b-down{color:var(--b-coral);font-weight:800}
.b-tt{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--b-ink);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.b-tt::before{content:none}
.b-foot{grid-column:span 6;font-size:11.5px;color:var(--b-mut);line-height:1.6;padding:2px 6px}

.bento .ger-alert{border-color:var(--b-line);padding:10px 0}
.bento .ger-alert-t{color:var(--b-ink)}
.bento .ger-badge.bad{background:var(--amber-t);color:var(--terra)}
.bento .ger-badge.ok{background:var(--green-t);color:#3f8a4c}
.bento .ger-badge.warn{background:var(--amber-t);color:#977216}
.b-chart-inner{background:var(--soft);border:1px solid var(--b-line);border-radius:14px;padding:11px 12px 7px}

.b-arc{cursor:pointer;transition:stroke-width .12s}
.b-arc:hover{stroke-width:7.5}
.b-tip{position:fixed;z-index:9999;display:none;background:var(--ink);color:var(--bg);font-size:11.5px;font-weight:600;padding:6px 9px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.24);pointer-events:none;line-height:1.35;white-space:nowrap}
.b-tip b{font-weight:800}

.b-donutwrap{display:flex;align-items:center;gap:14px}
.b-donutbox{position:relative;width:92px;height:92px;flex:none}
.b-donut{width:92px;height:92px;display:block}

.b-donutc .n{font-size:13px;font-weight:800;color:var(--b-ink);line-height:1;letter-spacing:-.3px}
.b-donutc .l{font-size:9px;color:var(--b-mut);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}

.b-dleg .dot{display:inline-block;width:9px;height:9px;border-radius:6px;margin-right:7px;vertical-align:middle}

.b-ks .b-hero-chip{margin:0 3px 0 0;vertical-align:middle}
.b-ks b{color:var(--b-ink);font-weight:700}

.b-pend{background:var(--soft);border-style:dashed}
.b-pendv{display:inline-block;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#8a8f99;background:var(--soft2);padding:3px 10px;border-radius:999px;margin:8px 0}
.b-pend .b-ks{color:var(--b-mut);line-height:1.5}
.b-motlist{margin-top:10px;display:flex;flex-direction:column;gap:5px}
.b-motrow{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--b-mut)}
/* n6 · tiles de encabezado más compactos (menos alto bajo el número) */
.b-tile.b-q{padding-top:14px;padding-bottom:13px}
.b-q .b-kv{margin-top:5px}
.b-q .b-ks{margin-top:4px;font-size:11.5px;line-height:1.35}
/* n10 · color sutil del box de ventas vs mes previo (al box, no al texto) */
.b-box-up{background:var(--soft);border-color:#d8ead9}
.b-box-flat{background:var(--amber-t);border-color:#efe6c9}
.b-box-down{background:var(--amber-t);border-color:#f2ddd8}
/* n5 · gráfico de barras diario */
.b-bars{display:flex;align-items:flex-end;gap:3px;height:104px;padding-top:4px}
/* chart que llena la altura de su tarjeta (nota Juan: la tabla se ajusta a la tarjeta) */
.b-chartcard{display:flex;flex-direction:column}
.b-chartcard .b-chart-inner{flex:1;display:flex;flex-direction:column}
.b-chartcard .b-bars{flex:1;height:auto;align-items:stretch}
.b-chartcard .b-bar-col{justify-content:flex-end}
.b-chartcard .b-bar-track{flex:1;height:auto}
.b-bar-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.b-bar-col.b-wk{margin-left:8px;border-left:1px dashed #dcdce4;padding-left:4px}
.b-bar-track{width:100%;height:84px;display:flex;align-items:flex-end;justify-content:center}
.b-bar{width:74%;max-width:16px;background:#3fa7de;border-radius:6px 6px 0 0;transition:opacity .15s}
.b-bar.wknd{background:#a9d2ea}
.b-bar-col:hover .b-bar{opacity:.72}
.b-bar-lbl{font-size:9px;color:var(--b-mut);margin-top:4px;font-variant-numeric:tabular-nums}
.b-bar-lbl.wknd{color:#a7b6c6}
/* n7 · tarjeta clicable + modal de detalle */
.b-clic{cursor:pointer}
.b-more{font-size:9px;font-weight:800;color:var(--b-accent);text-transform:uppercase;letter-spacing:.04em;margin-left:6px}
.gdm-ov{position:fixed;inset:0;background:rgba(20,20,28,.5);z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}
.gdm-card{background:var(--card);border-radius:14px;width:100%;max-width:420px;max-height:80vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.3);font-family:'Instrument Sans',system-ui,-apple-system,sans-serif}
.gdm-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 18px 10px;font-size:14px;font-weight:800;color:var(--ink)}
.gdm-x{border:none;background:transparent;font-size:16px;cursor:pointer;color:var(--mut);padding:0 4px}
.gdm-body{padding:4px 18px}
.gdm-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink)}
.gdm-row b{color:var(--ink)}
.gdm-empty{padding:16px 0;color:var(--mut);font-size:13px}
.gdm-tot{display:flex;justify-content:space-between;padding:12px 18px 18px;font-size:14px;font-weight:800;color:var(--ink);border-top:1px solid var(--line);margin-top:4px}
/* Captura de saldos de banco desde Gerencia */
.b-banks{margin-top:7px;font-size:11.5px;font-weight:700;color:var(--b-mut);cursor:pointer;display:inline-flex;align-items:center;gap:7px;border-radius:6px;padding:2px 4px;margin-left:-4px;transition:.12s}
.b-bank-dot{width:9px;height:9px;border-radius:50%;background:#39a85a;flex:none;box-shadow:0 0 0 3px rgba(57,168,90,.22),0 0 7px 1px rgba(57,168,90,.6);animation:bankPulse 1.8s ease-in-out infinite}
@keyframes bankPulse{0%,100%{box-shadow:0 0 0 3px rgba(57,168,90,.22),0 0 7px 1px rgba(57,168,90,.55)}50%{box-shadow:0 0 0 5px rgba(57,168,90,.10),0 0 10px 2px rgba(57,168,90,.75)}}
@media(prefers-reduced-motion:reduce){.b-bank-dot{animation:none}}
.b-banks:hover{color:var(--b-ink);background:var(--soft)}
.b-banks.stale{color:#a9781f;background:var(--amber-t)}
.b-banks.stale:hover{background:var(--amber-t)}
.gsm-hint{padding:2px 18px 10px;font-size:11.5px;color:var(--mut);line-height:1.4}
.gsm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 18px;border-bottom:1px solid #f0f0f3}
.gsm-nm{font-size:13px;font-weight:600;color:var(--ink);display:flex;flex-direction:column}
.gsm-sub{font-size:11.5px;font-weight:500;color:#8b8b93;margin-top:1px}
.gsm-inp{width:130px;padding:8px 10px;border:1px solid #dcdce4;border-radius:10px;font-family:inherit;font-size:14px;text-align:right;background:var(--card);color:var(--ink)}
.gsm-inp:focus{outline:none;border-color:var(--terra)}
.gsm-foot{display:flex;align-items:center;gap:10px;padding:14px 18px 18px}
.gsm-save{background:var(--terra);color:#fff;border:none;border-radius:10px;padding:10px 18px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.gsm-save:disabled{opacity:.6;cursor:default}
.gsm-msg{font-size:12px;color:var(--red)}
.b-motrow b{color:var(--b-ink);font-weight:700;font-variant-numeric:tabular-nums}

.pm-wrap{max-width:1120px;margin:0 auto;font-family:'Instrument Sans',system-ui,-apple-system,sans-serif}
.pm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.pm-title{font-size:18px;font-weight:800;letter-spacing:-.3px;color:var(--b-ink)}
.pm-sub{font-size:12px;color:var(--b-mut);margin-top:3px}
.pm-ctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pm-sel{padding:7px 11px;border:1px solid var(--b-line);border-radius:10px;font-family:inherit;font-size:13px;font-weight:600;background:var(--card);color:var(--b-ink);cursor:pointer}
.pm-badge{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:4px 10px;border-radius:999px}
.pm-badge.live{background:var(--violet-t);color:#2f7bb0}
.pm-badge.frozen{background:var(--soft2);color:#7a8290}
.pm-scatterbox{background:var(--card);border:1px solid var(--b-line);border-radius:14px;box-shadow:0 1px 2px rgba(30,30,50,.03),0 10px 26px -18px rgba(40,40,70,.22);padding:10px 12px}
.pm-scatter{width:100%;height:auto;display:block}
.pm-dot{cursor:pointer;transition:r .1s}
.pm-dot:hover{r:7.5}
.pm-axl{font-size:11.5px;fill:#8b8f99;font-weight:600}
.pm-cq{font-size:12px;font-weight:800;opacity:.85}
.pm-qcard{display:flex;flex-direction:column}
.pm-qh{font-size:12px;font-weight:800;color:var(--b-ink);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.pm-qico{font-size:14px}
.pm-qn{margin-left:auto;font-size:12px;font-weight:800;color:var(--b-mut);background:var(--soft);border-radius:999px;padding:1px 9px}
.pm-qrec{font-size:11.5px;color:var(--b-mut);line-height:1.45;margin-bottom:9px}
.pm-qrow{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--b-ink);padding:3px 0;border-top:1px solid var(--b-line)}
.pm-qrow b{font-weight:700;color:var(--b-mut);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:900px){.b-grid{grid-template-columns:repeat(6,1fr)}.b-q{grid-column:span 3}.b-2{grid-column:span 3}.b-3{grid-column:span 6}.b-4{grid-column:span 6}.b-6{grid-column:span 6}}
@media(max-width:520px){.b-grid{grid-template-columns:1fr}.b-q,.b-2,.b-3,.b-4,.b-6{grid-column:span 1}}
/* ══ Costeo (view-recetas) · PR A, plano de Design 28-ago ══════════════════
   KPIs y el banner de modo edición se van (contrato: viven en Cuadre / la fila
   ya se explica sola). Chips de categoría pasan de N pastillas sueltas a dos
   desplegables -- once categorías no caben en un renglón (regla 1). */
/* Costeo (view-recetas) usa las clases canónicas de docs/APP-ELEMENTOS.css
   (.app-aviso, .app-chip, .app-chip-x, .app-th, .app-fc, .app-tfoot) directo,
   sin reescribirlas -- el "● hora" (.app-guardado) salió en la ronda 11 y el
   separador (.app-barra-sep) en el paquete 14; ninguna otra pantalla del
   admin lo usaba, así que la clase queda en el archivo canónico sin consumo
   propio por ahora. Lo de acá abajo
   es SOLO lo que la tabla todavía necesita y que el archivo canónico no
   cubre porque asume filas en flex, no <table> real -- eso queda pendiente
   de resolver con Design, ver el aviso en el reporte del 28-ago. */
/* Con el renglón interno borrado (paquete 14), la barra es el primer
   elemento del área de trabajo -- el aire de arriba se declara acá, no se
   hereda del bloque que se fue (regla 19: se devuelve al vecino). */
.rc-barra{position:relative;display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-top:20px;margin-bottom:var(--space-4)}
/* "Meta": mismo popover que Configuración le pedía a "Reglas de costeo" --
   .rc-cfgrow/.rc-cfglabel/.rc-cfgval se reusan tal cual, solo cambia el
   contenedor que los envuelve. */
.rc-metawrap{position:relative;flex:0 0 auto}
.rc-metabtn{flex:0 0 auto;height:34px;padding:0 14px;border:1px solid var(--border-subtle);background:transparent;border-radius:var(--radius-pill);cursor:pointer;font-family:var(--font-sans);font-size:13px;font-weight:400;white-space:nowrap;color:var(--text-body);display:flex;align-items:center;gap:6px}
.rc-metabtn:hover{background:var(--bogo-gris-3)}
.rc-metabtn svg{flex:0 0 auto}
.rc-metascrim{position:fixed;left:0;top:0;right:0;bottom:0;z-index:40}
.rc-metapop{position:absolute;top:46px;right:0;width:344px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-lg);z-index:41;padding:4px 20px 8px;display:flex;flex-direction:column}
.rc-ddchip{position:relative;display:inline-flex;flex:none}
/* .app-chip como <select>: el foco (doble contorno) ya lo resuelve la ZONA
   SISTEMA con :focus-visible + --focus-ring, instalado tal cual Design lo
   mandó. Lo que queda acá es lo unico que APP-ELEMENTOS.css no cubre porque
   el archivo no distingue un chip-boton de un chip-select: las <option>
   heredan el fondo terracota del chip con valor puesto y la lista abierta
   sale pintada entera. Sin scope de pantalla: es del COMPONENTE. */
.app-chip option{background:var(--surface-card);color:var(--text-body)}
/* "Nuevo producto": en este sistema todo control es píldora. Es forma, no
   color -- el fondo/borde de .btn no se toca (Juan confirma el terracota
   actual). Escala solo Costeo, no el .btn global de las otras 31 pantallas. */
.rc-barra .btn{height:34px;padding:0 var(--space-4);border-radius:var(--radius-pill);display:inline-flex;align-items:center}
/* La X vive DENTRO de la píldora (APP-ELEMENTOS.css la da por sibling en
   flujo normal, pero acá el chip es un <select> nativo -- no puede llevar
   hijos propios -- así que se superpone con position:absolute en vez de
   flotar afuera como un control aparte. */
.rc-ddchip .app-chip-x{position:absolute;right:6px;top:50%;transform:translateY(-50%)}
.rc-ddchip .app-chip-x[data-puesto]{color:var(--text-on-brand)}
/* Enfasis por columna (contrato tabla.columnas[].enfasis, agregado por Design
   28-ago): las cifras que se DECIDEN -PVP, Margen- van en tinta fuerte; las
   que solo se consultan -Precio, Costo, Cód- van livianas. Así la fila se lee
   de un golpe en vez de pesar todo igual. */
/* Una sola medida para el cuerpo de la fila: 14px (MEDIDAS-costeo.md,
   corregido 26-ago). .cc-table trae font-size:13px de fabrica para OTRAS
   pantallas; sin un font-size propio acá, cinco columnas heredaban ese 13
   sin que nadie lo pidiera -- lo encontro tools/verificar_medidas_costeo.js,
   no un ojo mirando una foto. Cod es la unica excepcion real (11px, MICRO).*/
.rc-table td.rc-cod{color:var(--text-muted);font-size:var(--size-micro);font-weight:700}
.rc-nombre-cel b{font-size:var(--size-body-sm)}
.rc-table td.rc-cat{color:var(--text-body);font-weight:400;font-size:var(--size-body-sm)}
.rc-table td.cc-total.rc-muted{color:var(--text-muted);font-weight:400;font-size:var(--size-body-sm)}
.rc-table td.cc-total.rc-body{color:var(--text-body);font-weight:400;font-size:var(--size-body-sm)}
.rc-table td.cc-total.rc-w6{color:var(--text-title);font-weight:600;font-size:var(--size-body-sm)}
/* .app-th asume que gana por especificidad normal; el thead global de esta
   tabla lleva !important (línea ~4450: `thead th,.s-tabla th{color:var(--r-t2)!important}`),
   así que hace falta igualar el arma acá, no solo importar la clase.
   text-align: .cc-table th trae right de fabrica (para las pantallas todo-
   numericas que la usan); acá Cód/Producto/Categoría lo heredaban sin
   pedirlo -- mismo hallazgo del verificador, misma causa que el font-size. */
.rc-table.rc-table thead th.app-th{color:var(--text-muted)!important;font-weight:600!important;text-align:left}
.rc-table.rc-table thead th.app-th[data-activo]{color:var(--text-title)!important;font-weight:700!important}
.rc-table.rc-table thead th.app-th--num{text-align:right}
/* PVP en la fila cerrada: texto normal en reposo, el borde aparece recien
   al pasar el mouse o enfocar. Con 150 filas, un borde siempre visible
   convierte la columna en una pila de cajas -- se descubre editable igual,
   el cursor de texto ya lo dice. */
.rc-pvpwrap{display:inline-flex;align-items:center;justify-content:flex-end;gap:1px}
.rc-pvprow{text-align:right;padding:0;border:0;border-bottom:1px dashed transparent;background:transparent;color:inherit;font-weight:inherit;font-size:inherit;font-family:inherit}
.rc-pvprow:hover,.rc-pvprow:focus{border-bottom-color:var(--border-subtle);outline:none}
.rc-pvprow:focus{border-bottom-color:var(--bogo-terracota)}
/* Aire para el botón flotante de IA (.ai-fab, abajo a la derecha): sin esto
   tapa la última fila al hacer scroll hasta el fondo. Va en el margen de la
   tabla, no en el botón -- .ai-fab es transversal a toda la app. */
.rc-table{margin-bottom:76px}
.rc-table.rc-table tbody tr.rc-row{cursor:pointer;height:60px}
.rc-table.rc-table tbody tr.rc-row>td{vertical-align:middle}
/* Modo agrupado (30-ago, rediseño): el encabezado de grupo comparte fondo
   con la fila abierta -- es "ubicación", misma regla 13 de siempre -- y su
   chevron SI rota (a diferencia del de una fila de producto, que navega a
   otra vista y no vuelve sobre si mismo). Escala solo a .rc-grpchevron para
   no revivir la rotación que se sacó del chevron de producto en PR B1. */
.rc-table.rc-table tbody tr.rc-grprow{cursor:pointer;background:var(--bogo-gris-3);height:52px}
.rc-table.rc-table tbody tr.rc-grprow>td{vertical-align:middle}
.rc-grpchevron .rc-caret{display:inline-flex;transition:transform var(--dur,180ms) var(--ease-standard,ease)}
.rc-grpchevron.abierto .rc-caret{transform:rotate(90deg)}
.rc-grpnombre{font-size:var(--size-body-sm);font-weight:700;color:var(--text-title);letter-spacing:var(--tracking-label)}
.rc-grpconteo{font-size:var(--size-caption);font-weight:400;color:var(--text-muted);margin-left:4px}
/* Va en un <span> DENTRO del <td>, nunca en el <td> mismo: display:block ahi
   apaga el vertical-align:middle de la fila (deja de ser table-cell) y el
   texto sube 8px, dejando el borde inferior normal de la fila leyendose como
   un subrayado propio. */
.rc-grpmeta{display:block;font-size:var(--size-caption);font-weight:400;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rc-openbtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:none;background:none;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm)}
.rc-openbtn:hover{background:var(--surface-accent-soft);color:var(--bogo-negro)}
/* El icono de actividad usa el mismo boton que Agrupar (.app-icon-btn) --
   solo el icono cambia de tinta, porque es una utilidad transversal (vive
   en el renglón 1 de la cáscara, ver #app_act_btn) y no una acción de esta
   pantalla. */
.rc-actbtn{color:var(--bogo-terracota)}
.rc-cfgrow{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--bogo-gris-2)}
.rc-cfgrow:last-child{border-bottom:0}
.rc-cfglabel{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rc-cfglabel b{font-size:var(--size-body-sm);font-weight:600;color:var(--text-title)}
.rc-cfglabel span{font-size:var(--size-caption);font-weight:300;color:var(--text-muted)}
.rc-cfgval{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.rc-cfginp{width:88px;text-align:right;height:var(--control-h);padding:0 14px;border:1px solid var(--border-subtle);border-radius:var(--radius-pill);outline:none;background:var(--surface-card);font-family:var(--font-sans);font-size:var(--size-body-sm);font-weight:600;color:var(--text-title);font-variant-numeric:tabular-nums}
.rc-cfginp:focus-visible{box-shadow:var(--ring-focus);border-color:var(--border-strong)}
.rc-cfgpct{font-size:var(--size-body-sm);font-weight:600;color:var(--text-muted);width:12px}
/* Era el caracter unicode ▸ a 11px -- a ese tamaño se lee como un punto, no
   como una flecha. Nunca fue un icono de Lucide que "no cargó": nunca hubo
   icono. Reemplazado por el SVG real (chevron-right), 16px, --text-muted. */
.rc-caret{display:inline-flex;color:var(--text-muted)}
.rc-nombre-cel{display:flex;align-items:baseline;gap:var(--space-2);min-width:0}
.rc-nombre-cel b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ── Maestro-detalle (PR B1): el acordeón se fue, la tabla se contrae a esta
   lista de 300px y la ficha ocupa el resto, separadas por 24px. ── */
.rc-md{display:flex;gap:24px;align-items:flex-start}
.rc-angosta{flex:0 0 300px;width:300px;border:1px solid var(--border-subtle);border-radius:var(--radius-card);background:var(--surface-card);overflow:hidden}
.rc-acab{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--bogo-gris-3);border-bottom:1px solid var(--border-subtle);font-size:var(--size-micro);font-weight:600;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.rc-alist{max-height:70dvh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--bogo-gris) transparent}
.rc-alist::-webkit-scrollbar{width:6px}
.rc-alist::-webkit-scrollbar-track{background:transparent}
.rc-alist::-webkit-scrollbar-thumb{background:var(--bogo-gris);border-radius:var(--radius-pill)}
.rc-arow{display:block;width:100%;text-align:left;padding:12px 16px;border:0;border-bottom:1px solid var(--bogo-gris-2);background:transparent;cursor:pointer;font-family:inherit}
.rc-arow:hover{background:var(--bogo-gris-3)}
.rc-arow.rc-aopen{background:var(--bogo-gris-3);box-shadow:inset 3px 0 0 var(--bogo-terracota)}
.rc-arow b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--size-body-sm);color:var(--text-title)}
.rc-asub{display:flex;gap:8px;align-items:center;margin-top:2px;font-size:12px;color:var(--text-muted)}
.rc-asub .app-fc{font-size:12px}
.rc-avacio{padding:20px 16px;color:var(--text-muted);font-size:13px}

.rc-ficha{flex:1 1 auto;min-width:0;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-md);display:flex;flex-direction:column;max-height:calc(70dvh + 44px)}
.rc-fscroll{overflow-y:auto;padding:20px;flex:1 1 auto}
.rc-fhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px dashed var(--border-subtle);margin-bottom:16px}
.rc-fbadge{font-size:var(--size-micro);font-weight:700;color:var(--text-title);margin-bottom:4px}
.rc-fbadge span{color:var(--text-muted);font-weight:400;margin:0 2px}
.rc-fnombre{font-size:var(--size-h3);font-weight:700;color:var(--text-title);border:0;border-bottom:1px dashed var(--border-subtle);background:transparent;font-family:inherit;padding:0 0 4px;width:100%}
.rc-fnombre:focus{outline:none;border-bottom-color:var(--bogo-terracota)}
.rc-fnombre-ro{font-size:var(--size-h3);font-weight:700;color:var(--text-title);padding-bottom:4px}

.rc-favisos{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.rc-faviso{display:flex;gap:8px;color:var(--bogo-terracota-oscuro)}
.rc-faviso b{display:block;font-size:var(--size-body-sm);font-weight:600}
.rc-favisod{font-size:12.5px;font-weight:400;color:var(--text-body);margin-top:1px}

.rc-fmetrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.rc-fcard{position:relative;border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:12px 16px}
.rc-flabel{font-size:var(--size-micro);font-weight:600;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:2px}
.rc-fval{font-size:19px;font-weight:900;color:var(--text-title);font-variant-numeric:tabular-nums}
.rc-fval .app-fc{font-size:19px;font-weight:900}
.rc-fpvpinp{font:inherit;font-weight:inherit;color:inherit;border:0;background:transparent;width:76px;padding:0}
.rc-fpvpinp:focus{outline:none}
.rc-fmedidor{position:relative;height:6px;border-radius:var(--radius-pill);background:var(--bogo-gris-2);margin-top:8px;overflow:visible}
.rc-fmedbar{height:100%;border-radius:var(--radius-pill)}
.rc-fmedtick{position:absolute;top:-2px;width:2px;height:10px;background:var(--bogo-negro)}

/* Popover del PVP: superpuesto para que la fila de metricas no cambie de
   alto al abrirse. Oculto por defecto -- rcWire lo muestra/oculta tocando
   el DOM directo, nunca via rcRender (perderia el foco del campo). */
.rc-pop{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:5;width:268px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-md);padding:14px 16px}
.rc-poprow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;font-size:13px;color:var(--text-body)}
.rc-poprow+.rc-poprow{border-top:1px solid var(--bogo-gris-2)}
.rc-poprow b{font-weight:600;color:var(--text-title)}
.rc-popinp{font:inherit;font-weight:600;color:var(--text-title);border:0;border-bottom:1px dashed var(--border-subtle);background:transparent;width:64px;text-align:right}
.rc-popinp:focus{outline:none;border-bottom-color:var(--bogo-terracota)}
.rc-popcarta{font-weight:700}
.rc-popnota{font-size:11.5px;color:var(--text-muted);margin-top:6px}
.rc-popmetawrap{border-top:1px solid var(--bogo-gris-2);margin-top:8px;padding-top:8px}
.rc-popmeta{font:inherit;font-size:12.5px;font-weight:600;color:var(--text-link);background:none;border:0;padding:0;cursor:pointer;text-align:left}
.rc-popmeta:hover{color:var(--text-link-hover);text-decoration:underline}

.rc-frecetahead{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.rc-frecetahead>span:first-child{font-size:var(--size-h4);font-weight:700;color:var(--text-title)}
.rc-frecetacount{font-size:12.5px;font-weight:400;color:var(--text-muted)}
.rc-freceta{margin-bottom:20px}
.rc-frecetabox{border:1px solid var(--border-subtle);border-radius:var(--radius-card);overflow:hidden}
/* Rejilla real, no <table>: encabezado y filas comparten la MISMA
   grid-template-columns (MEDIDAS-costeo.md), asi caen siempre alineados. */
.rc-rechead,.rc-recrow{display:grid;column-gap:12px;align-items:center;padding:0 16px}
.rc-rechead{height:36px;background:var(--bogo-gris-3);border-bottom:1px solid var(--border-subtle)}
.rc-rechead span{font-size:var(--size-micro);font-weight:600;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.rc-recrow{min-height:44px;padding-top:6px;padding-bottom:6px;border-bottom:1px solid var(--bogo-gris-2);font-size:var(--size-body-sm);color:var(--text-body)}
.rc-recrow .n,.rc-rechead .n{text-align:right;font-variant-numeric:tabular-nums}
.rc-frecetafoot{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--bogo-gris-3);font-weight:900;border-top:1px solid var(--border-subtle)}
.rc-pctcel{white-space:nowrap;display:inline-block}
.rc-pctbar{display:block;height:4px;border-radius:var(--radius-pill);background:var(--bogo-gris-2);margin-top:3px;overflow:hidden}
.rc-pctbar>span{display:block;height:100%;background:var(--bogo-cafe-claro);border-radius:var(--radius-pill)}
.rc-puntosincosto{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--bogo-terracota);margin-left:4px;vertical-align:middle}
.rc-sugwrap{display:flex;flex-wrap:wrap;gap:6px}
.rc-suging{font:inherit;font-size:12.5px;padding:5px 10px;border:1px solid var(--border-subtle);border-radius:var(--radius-pill);background:var(--surface-card);cursor:pointer;color:var(--text-body)}
.rc-suging:hover{border-color:var(--border-strong)}
.rc-suging span{color:var(--text-muted);margin-left:4px}

.rc-fhist{margin-bottom:4px}
.rc-fhistlink{font:inherit;font-size:13px;font-weight:600;color:var(--text-title);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.rc-fhistvacio{font-size:13px;color:var(--text-muted)}

.rc-ffoot{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--bogo-gris-3);border-top:1px solid var(--border-subtle)}
.rc-ffootspacer{flex:1 1 auto}
.rc-ffootconf{font-size:13px;color:var(--text-body)}
.rc-ffootbtns{display:flex;align-items:center;gap:12px;white-space:nowrap}
.pr-u{color:var(--text-muted)}
/* 10-sep · Teléfono. La ficha abierta de Costeo y de Preparaciones se salía de
   la pantalla: la lista angosta (300px) y la ficha iban lado a lado en 390px.
   En teléfono la ficha ocupa todo el ancho y la lista se esconde (se vuelve con
   Cerrar). La receta se queda con Ingrediente · Cantidad · Subtotal y la ✕:
   Costo, Unidad y % costo no entran en 390px sin scroll horizontal. El
   !important es contra el grid que la ficha escribe en style=. */
@media (max-width:640px){
  .rc-md{display:block}
  .rc-md>.rc-angosta{display:none}
  .rc-ficha{max-height:none}
  .rc-fscroll{padding:16px}
  .rc-fmetrics{grid-template-columns:repeat(2,1fr)}
  .rc-rechead,.rc-recrow{grid-template-columns:minmax(0,1fr) 84px 72px 28px!important;column-gap:8px;padding-left:12px;padding-right:12px}
  .rc-rechead>:nth-child(3),.rc-rechead>:nth-child(4),.rc-rechead>:nth-child(6),
  .rc-recrow>:nth-child(3),.rc-recrow>:nth-child(4),.rc-recrow>:nth-child(6){display:none}

  /* En la receta de Preparaciones la unidad de la cantidad NO se esconde: sin
     ella no se sabe si «350» son gramos o mililitros. Se van Costo y % costo. */
  /* En 390px los cinco títulos no entran sin montarse; la fila se lee sola
     (campo = cantidad, unidad al lado, $ = subtotal) y el título se va. */
  .rc-rechead.pr-rec{display:none}
  .rc-recrow.pr-rec{grid-template-columns:minmax(0,1fr) 64px 26px 52px 24px!important;column-gap:6px}
  .rc-recrow.pr-rec>:nth-child(3){display:block}
  .rc-recrow.pr-rec>:nth-child(4){display:none}
  /* La lista de Preparaciones se queda con el nombre y el costo del lote. */
  .pr-table th:nth-child(2),.pr-table th:nth-child(3),.pr-table th:nth-child(4),
  .pr-table td:nth-child(2),.pr-table td:nth-child(3),.pr-table td:nth-child(4){display:none}
}
.rc-fcancel{font:inherit;font-size:13px;font-weight:600;color:var(--text-title);background:none;border:0;cursor:pointer}
.rc-fconfirmar{font:inherit;font-size:13px;font-weight:600;color:#fff;background:var(--bogo-terracota);border:0;border-radius:var(--radius-pill);padding:8px 16px;cursor:pointer}
.rc-fconfirmar:hover{background:var(--bogo-terracota-hover)}
/* Regla 14: el terracota lleno es del CTA primario y de nada mas. "Cerrar"
   solo cierra un panel -- si tambien va relleno, hay dos superficies
   terracota peleando por la atencion y "Nuevo producto" deja de ganar de un
   golpe. Mismo padding/radio que .btn, cambia solo el relleno. */
.rc-btnsec{padding:10px 16px;border-radius:10px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;border:1px solid var(--border-subtle);background:transparent;color:var(--text-title)}
.rc-btnsec:hover{border-color:var(--border-strong);background:var(--bogo-gris-2)}
.rc-inp{padding:4px 7px;border:1px solid var(--bogo-terracota);border-radius:6px;font-family:inherit;font-size:var(--size-body-sm);background:var(--bg);color:var(--ink)}
@media(max-width:720px){.ts-kpis{grid-template-columns:1fr}.ts-grid{grid-template-columns:1fr}}
/* Atajos de caja chica. Grandes a propósito: se usan con el teléfono en una mano
   y el recibo en la otra, y compiten contra la comodidad de dejarlo vacío. */
.pg-atajos{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.pg-atajo{border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:11px;padding:9px 13px;font-family:inherit;font-size:12.5px;
  font-weight:600;cursor:pointer;line-height:1.3;text-align:left}
.pg-atajo:active,.pg-atajo.on{background:var(--olive);border-color:var(--olive);color:#fff}
.pg-atajo span{display:block;font-weight:400;font-size:10.5px;opacity:.72;margin-top:1px}
.pg-clasif{font-size:12px;color:var(--mut);margin-top:6px;min-height:0}
.pg-clasif b{color:var(--ink);font-weight:600}
.pg-vende{font-size:12px;color:var(--mut);margin-top:6px;line-height:1.6}
.pg-vende b{color:var(--ink);font-weight:600}
.pg-ins{display:inline-block;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:20px;padding:2px 10px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit;margin:2px 4px 2px 0}
.pg-ins:hover{background:var(--soft)}
.pg-clasif.ok{background:var(--green-t);border-color:#bcd7ab;color:var(--green)}

.fc-tabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.fc-cols{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:14px;align-items:start}
.fc-col{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg)}
.fc-col-h{padding:9px 12px;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);background:var(--soft);border-bottom:1px solid var(--line)}
.fc-item{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 10px;border-bottom:1px solid #efece5}
.fc-item-sel{background:var(--green-t)}
.fc-name{cursor:default;font-size:13px;flex:1}
.fc-name[data-fcsel]{cursor:pointer}
.fc-acts{display:flex;gap:3px;white-space:nowrap}
.fc-add{display:flex;gap:5px;padding:8px 10px;background:var(--soft)}
.fc-add input,.fc-ed input{flex:1;padding:6px 9px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:13px;background:var(--bg);color:var(--ink)}
.fc-ed{display:flex;gap:5px;flex:1;align-items:center}
.fc-hint{padding:16px 12px;color:var(--mut);font-size:13px;text-align:center}
@media(max-width:820px){.fc-cols{grid-template-columns:1fr}}
.cj-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px;margin-bottom:20px}

.cc-badge.none{background:transparent;color:var(--r-t2);box-shadow:inset 0 0 0 1px var(--r-line-fuerte)}
/* tabla horizontal responsive: scrollea dentro del box, el layout nunca se rompe */
.cc-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cc-table{width:100%;border-collapse:collapse;font-size:13px;min-width:0}
/* Esta regla tiene MÁS PESO que la global `thead th` —una clase le gana a dos
   elementos— y por eso durante un rato la cabecera de Ventas siguió gris y la
   de Flujo quedó a medias: «2026» azul y los meses grises. Toda cabecera de
   `.cc-table` es fila principal y va en azul. */
.cc-table th{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:600;text-align:right;padding:9px 7px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap;background:var(--blue)}
.cc-table th.l{text-align:left}
.cc-table td{padding:8px 8px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.cc-table tr:last-child td{border-bottom:none}
.cc-table td.mut{color:var(--mut)}
.cc-table .mut{color:var(--mut)}
.cc-table td.l{text-align:left}
.cc-table thead th{position:sticky;top:0;z-index:3}
.cc-table thead th.cc-col-medio{z-index:4}
.cc-table .cc-total{font-weight:700}
/* ===== LA FILA PRINCIPAL DE UNA TABLA · una sola en toda la app (13-ago) =====
   Es el renglón que AGRUPA: el día en el cuadre, la sección en el flujo, el
   total de una tabla. Lleva la banda porque es el nivel que organiza; los
   rótulos de columna son metadato y quedan en gris.
   Estuvo negra media hora y Juan la sintió agresiva. Tenía razón, y se puede
   medir: el negro contrasta 16,60 contra el fondo y el botón de acción 5,36,
   así que la banda pesaba TRES VECES más que lo único accionable de la
   pantalla. El azul mide 4,88 — menos de un tercio del negro, y por debajo del
   terracota, que es la regla del sistema: la estructura no le grita más fuerte
   que la acción. Texto blanco encima: 5,31, pasa AA. En oscuro, 6,80.
   Se descartó el olivo (5,21) porque el sistema lo reserva para ESTADO y avisa
   expresamente de no ponerlo sobre una superficie. */
.cc-grp td{background:var(--r-banda);color:var(--r-t1);padding:9px 14px;border-top:2px solid var(--line);border-bottom:1px solid var(--line);text-align:left}
.cc-grp td .cc-gdate,.cc-grp td .cc-gright{color:var(--r-t1)}
/* 🔴 Esta gana por especificidad a `.ve-total td` de la capa de roles —dos
   clases contra una—, así que si se queda con --soft2 la banda nueva no llega
   nunca. Medido el 17-ago: la fila seguía en 1,19 con el token ya cambiado. */
.cc-table tr.ve-total td{background:var(--r-banda);border-top:2px solid var(--line);font-weight:700}
.cc-grp .cc-ghead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cc-grp .cc-gdate{font-size:13px;font-weight:600;text-transform:capitalize;letter-spacing:-.2px}
/* La fecha del día se queda 100% fija a la izquierda al hacer scroll horizontal del cuadre (sin salto ni golpe con el borde) */
/* 🔴 n54 · «alinear esta columna con la D de domingo y asi para cada dia...
   falta aire al lado izquierdo del copy» (Juan). La banda tenia padding-left:0
   dentro del scroll, asi que la fecha arrancaba pegada al borde y desalineada
   respecto de la columna de medios. Ahora las dos llevan 8px — el mismo aire, y
   ademas el paso de la escala base 4 del sistema, que el 7px de antes no era. */
.cc-tscroll .cc-grp td{padding-left:8px}
/* La fecha queda fija al hacer scroll horizontal y por eso lleva su propio
   fondo: tiene que ser el MISMO de la banda o aparece un parche claro encima. */
.cc-tscroll .cc-grp .cc-gdate{position:sticky;left:0;z-index:2;background:var(--r-banda);padding:0 10px 0 14px}
/* Cuadre compacto (móvil, solo lectura): 2 columnas que caben al 100%, SIN scroll horizontal.
   La cabecera del día ENVUELVE (11-ago): «POS 11 ago, 02:00 a. m.» más el candado en una
   sola línea obligaban a la tabla a ser más ancha que el teléfono y la Diferencia salía
   cortada — con overflow escondido, cortada para siempre. */
.cc-tscroll.cc-noscroll{overflow-x:hidden}
.cc-table.cc-compact{min-width:0;width:100%;table-layout:auto}
.cc-table.cc-compact td:nth-child(2),.cc-table.cc-compact td:nth-child(3){white-space:nowrap;text-align:right;width:1%}
.cc-table.cc-compact .cc-col-medio{position:static;box-shadow:none}
.cc-table.cc-compact .cc-ghead{flex-wrap:wrap;row-gap:4px}
.cc-table.cc-compact .cc-gright{white-space:normal;flex-wrap:wrap;justify-content:flex-end;row-gap:4px}
.cc-table.cc-compact .cc-grp td{white-space:normal}
.cc-grp .cc-gright{display:flex;align-items:center;gap:10px;white-space:nowrap}
.cc-badge.lock{background:var(--soft);color:var(--ink)}
.cc-lockbtn{font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;font-family:inherit;transition:.12s}
/* La accion principal del dia. Relleno solido; el resto de la fila, contorno. */
.cc-lockbtn.principal{background:var(--terra);border-color:var(--terra);color:#fff}
.cc-lockbtn.principal:hover{filter:brightness(1.06)}
.cc-lockbtn:hover{border-color:var(--terra);color:var(--terra)}
.cc-medioname{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.cc-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
/* columna Medio fija al hacer scroll horizontal */
.cc-col-medio{position:sticky;left:0;text-align:left;background:var(--card);box-shadow:1px 0 0 var(--line)}
th.cc-col-medio{background:var(--r-s1)}
.cc-delta{display:inline-block;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;padding:3px 9px;border-radius:999px}
.cc-delta.g{background:var(--green-t);color:var(--green)}
.cc-delta.a{background:var(--amber-t);color:#a9791f}
.cc-delta.r{background:var(--amber-t);color:var(--amber)}
.cc-delta.n{background:transparent;color:var(--mut)}
/* Anchos angostos y con clamp (Juan, 11-ago): los montos son máximo miles con dos
   decimales —«9.999,99», ocho caracteres—, así que 90px sobran. Y CADA DÍA CALZA AL
   ANCHO DE LA PANTALLA, sin scroll horizontal: el botón Reabrir quedaba escondido en
   un scroll minúsculo a la derecha. Notas absorbe el espacio que sobre. */
/* 🔴 n56 · «ajustar tamaño de font al tamaño del box o crecer este box, no
   se lee el numero entero» (Juan). Se crece la caja, que es lo que N2 del
   sistema manda: la cifra no se parte NI se recorta, y la pista se mide contra
   el texto. Achicar la letra habria sido resolverlo al reves. */
.cc-in{width:clamp(88px,7vw,116px);padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-size:13px;font-family:inherit;text-align:right;font-variant-numeric:tabular-nums;background:var(--bg);color:var(--ink)}
.cc-in:focus{border-color:var(--terra);outline:none}
.cc-in.real{border-width:1.5px;font-weight:600;width:clamp(84px,6vw,104px)}
/* n56 (2/2) · «el cuadro de notas se podria hacer mas angosto para ganar
   espacio en pantalla» (Juan). Ese ancho es el que le sobraba a las cifras. */
.cc-in.notas{width:100%;min-width:60px;text-align:left}
.cc-table:not(.cc-compact) td:last-child{width:24%}
.cc-sel{max-width:clamp(100px,11vw,150px)}
/* Escritorio angosto (1025-1280, con el menú lateral abierto): se aprieta todo un
   punto más para que el día siga calzando entero. Bajo 1025 ya manda la vista móvil. */
@media (max-width:1280px){
  .cc-table td{padding:8px 3px}
  .cc-table th{padding:9px 3px}
  /* Las cabeceras envuelven: «TOTAL ESPERADO» en una línea obligaba 107px de columna. */
  .cc-table tr.cc-colhdr td{white-space:normal;line-height:1.2;font-size:10px;letter-spacing:0;padding:5px 4px}
  .cc-medioname{font-size:11.5px;gap:6px}
  .cc-in{width:clamp(54px,4.5vw,78px);padding:5px 5px}
  .cc-in.real{width:clamp(72px,5vw,90px)}
  .cc-in.notas{min-width:44px}
  .cc-sel{max-width:82px;font-size:11.5px}
  .cc-delta{padding:3px 4px;font-size:11px}
  .cc-total{font-size:12.5px}
}
/* «Obligatorio» dejo de pintarse de amarillo (Juan, 3-ago). El ambar es una
   SEÑAL del sistema —sobre meta, a medias, pendiente— y gastarlo en «este campo
   hay que llenarlo» lo dejaba sin significado, ademas de teñir medio formulario
   de un color de alerta que no alertaba de nada.
   Ahora se dice con el borde, que es lo que de verdad distingue un campo de
   otro sin gritar. Los cuatro hex sueltos (#e6cf6a, #d4b73f, #b09a3e) se van
   con el: eran ambar escrito a mano y en tema oscuro no se adaptaban. */
.cc-in.cc-must,.field input.cc-must,.field select.cc-must{border-color:var(--mut)}
.cc-in.cc-must:focus,.field input.cc-must:focus,.field select.cc-must:focus{border-color:var(--ink)}
#pg_pagado.est-pend{background:var(--amber-t);border-color:#e0a99b;color:var(--amber);font-weight:700}
#pg_pagado.est-pag{background:var(--green-t);border-color:#bcd7ab;color:var(--green);font-weight:700}
#pg_notas.req-red{background:var(--amber-t);border-color:#e0a99b}
#pg_notas.req-red::placeholder{color:#c07a68}
.cc-sel{padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-size:12px;font-family:inherit;background:var(--bg);color:var(--ink)}
/* ===== RESKIN GLOBAL v1 — capa aditiva (sistema bento) ===== */
body{font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}

.nav a.on{color:var(--ink);border-color:var(--terra)}
.subtab.on{color:var(--ink);border-color:var(--terra)}
.fl-chip{border-radius:999px;transition:.12s}
.fl-chip.on{background:var(--terra);border-color:var(--terra);color:#fff}

.utilbtn.on{background:var(--terra-t);border-color:var(--terra);color:var(--terra)}
.lgbtn{background:var(--terra);border-radius:10px}
.lgin:focus{border-color:var(--terra)}
.kpi{border-radius:14px}.kpi .v{letter-spacing:-.6px}
.loginbox{border-radius:20px}
.areaname{letter-spacing:-.5px}

/* ===== Modo edición del menú (superadmin, apagado por defecto) ===== */

.side-editbtn.on{background:var(--terra);color:#fff;border-color:var(--terra)}
.edit-hint{font-size:10.5px;color:var(--text-on-inverse-muted);padding:6px var(--space-3) 2px;line-height:1.4;display:none}
.app.editmode .edit-hint{display:block}
.app.editmode .areanav a{cursor:grab}
.app.editmode .areanav a.dragover{box-shadow:inset 0 2px 0 var(--terra)}
.app.editmode .areanav a.dragging{opacity:.45}
.app.editmode .tabsnav a{cursor:grab}
.app.editmode .tabsnav a.dragover{box-shadow:inset 0 -2px 0 var(--terra)}
.app.editmode .tabsnav a.dragging{opacity:.45}
.edit-name[contenteditable]{border-bottom:1px dashed transparent}
.app.editmode .edit-name[contenteditable]{border-bottom-color:var(--terra);cursor:text}
/* Edición visual de contenido (títulos/leyendas + drag-drop de tarjetas) */
.app.editmode .ui-editing{outline:1px dashed var(--terra);outline-offset:2px;border-radius:6px;cursor:text;min-width:14px}
.app.editmode .ui-editing:focus{outline:1.5px solid var(--terra);background:rgba(193,102,63,.06)}
.app.editmode .ui-draggable{cursor:grab;position:relative}
.app.editmode .ui-draggable:hover{outline:1px dashed var(--terra);outline-offset:3px;border-radius:10px}
.app.editmode .ui-dragging{opacity:.45}
.app.editmode .ui-dragover{box-shadow:0 0 0 2px var(--terra) inset;border-radius:10px}
/* Ojo ocultar/mostrar tarjeta (modo edición) */
.ui-eye{position:absolute;top:6px;right:6px;z-index:5;width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:13px;line-height:1;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.12);display:none}
.app.editmode [data-uicard]{position:relative}
.app.editmode .ui-eye{display:inline-flex;align-items:center;justify-content:center}
.app.editmode .ui-hidden{opacity:.38;filter:grayscale(.4)}
.app.editmode .ui-hidden::after{content:'oculta';position:absolute;left:8px;top:8px;font-size:10.5px;font-weight:700;color:var(--terra);background:var(--card);border:1px solid var(--terra);border-radius:6px;padding:1px 6px;z-index:4}
/* Notas ancladas para Claude (solo modo edición) */
#ui-nota-layer{position:absolute;top:0;left:0;width:100%;height:0;overflow:visible;pointer-events:none;z-index:70}
#ui-nota-layer .ui-nota,#ui-nota-layer .ui-nota-pin{pointer-events:auto}
.ui-nota-pin{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#e6b800;border:2px solid var(--card);box-shadow:0 1px 4px rgba(0,0,0,.35);z-index:2}
.ui-nota-line{position:absolute;overflow:visible;pointer-events:none;z-index:1}
.ui-nota{position:absolute;width:210px;background:var(--amber-t);border:1px solid #e6d878;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.18);font-size:12px;z-index:3}
.ui-nota-bar{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px;background:var(--amber-t);border-radius:10px 10px 0 0;user-select:none}
.ui-nota-grip{font-size:10.5px;font-weight:800;color:#8a7a1e;letter-spacing:.02em;cursor:grab;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-nota-del{border:none;background:transparent;color:#8a7a1e;font-size:14px;cursor:pointer;padding:0 4px;line-height:1;flex:none}
.ui-nota-del:hover{color:var(--red)}
body.ui-picking, body.ui-picking *{cursor:crosshair !important}
.ui-nota-tx{padding:8px 9px;min-height:52px;color:var(--amber);line-height:1.4;white-space:pre-wrap;word-break:break-word}
.ui-nota-tx:empty::before{content:'Escribe aquí lo que quieres que cambie…';color:#a9995a}
#ui-nota-fab{position:fixed;right:18px;bottom:18px;z-index:71;background:var(--terra);color:#fff;border:none;border-radius:20px;padding:11px 18px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.22);display:none}
/* 18-sep: botón de reportar para Karina/Rubén. Rediseñado el mismo día: Juan lo
   quería icono redondo y sutil abajo a la derecha, no la píldora con texto de
   abajo. Mismo patrón que .ai-fab (el otro FAB de un solo icono de la app) —
   nunca compiten: .ai-fab y #ui-nota-fab son solo superadmin, este es solo
   quien tiene puede_notar_equipo, jamás coinciden en el mismo usuario. */
#equipo-nota-fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:71;
  width:52px;height:52px;border-radius:999px;border:none;background:var(--bogo-negro);color:var(--bogo-blanco);
  display:none;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;
  box-shadow:var(--shadow-lg);transition:box-shadow var(--dur) var(--ease-standard)}
#equipo-nota-fab:hover{box-shadow:0 6px 22px rgba(0,0,0,.3)}
#equipo-nota-fab svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#equipo-nota-fab.on{background:var(--r-mal)}
#ui-nota-clear{position:fixed;right:18px;bottom:62px;z-index:71;background:var(--card);color:var(--red);border:1px solid var(--red);border-radius:20px;padding:8px 15px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.14);display:none}
/* 18-sep: historial de reportes del equipo (Pulso → «Ver historial») */
.eqh-vacio{color:var(--mut);font-size:13px;padding:14px 2px}
.eqh-card{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.eqh-card.pend{border-color:#c9a227;background:#fffdf5}
.eqh-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.eqh-badge{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.eqh-meta{font-size:11.5px;color:var(--mut)}
.eqh-txt{font-size:13px;line-height:1.5;color:var(--ink);margin-top:3px}
.eqh-txt b{font-weight:600}
.eqh-txt a{color:var(--terra)}
/* Tarjetas de nota de contenido (Módulo C) */
.ui-notecard{background:var(--olive-t,var(--soft))}
.ui-nc-b{margin-top:6px;font-size:13px;color:var(--ink);line-height:1.45;white-space:pre-wrap;word-break:break-word}
.ui-nc-del{border:none;background:transparent;color:var(--mut);font-size:13px;cursor:pointer;padding:0 2px;line-height:1;display:none}
.app.editmode .ui-nc-del{display:inline-block}
.app.editmode .ui-nc-t,.app.editmode .ui-nc-b{outline:1px dashed var(--terra);outline-offset:2px;border-radius:6px;min-width:16px}
.ui-addnote{margin-top:12px;background:var(--card);color:var(--terra);border:1px dashed var(--terra);border-radius:10px;padding:9px 14px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.ui-addnote:hover{background:var(--olive-t,var(--soft))}
/* Conteos · iniciar */
#ct_startbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ct-startbtn{font-size:14px;padding:11px 18px;font-weight:700;text-decoration:none;display:inline-block}
.ct-starthint{font-size:12px;color:var(--mut);flex:1;min-width:180px}
.ct-choose{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:14px 16px;width:100%;box-shadow:var(--shadow)}
.ct-choose-t{font-size:14px;font-weight:700;margin-bottom:12px}

/* ===== NAV RESPONSIVE v2 · cajón a pantalla completa =====
   Va al final del <style> a propósito: gana por orden de fuente y por especificidad
   (.app .side) sobre las reglas base de .side definidas más arriba. */
@media (max-width:1024px){
  html,body{overflow-x:hidden;max-width:100vw}
  .app{display:block;max-width:100vw;overflow-x:hidden}
  header{display:block}
  .app .mainwrap,.app main{max-width:100vw;overflow-x:hidden}
  .app .side{position:fixed;top:0;left:0;height:100vh;height:100dvh;width:100%;max-width:100vw;z-index:210;flex:none;display:flex;transform:translateX(-100%);transition:transform .22s ease;box-shadow:none;overflow-y:auto}
  .app.navopen .side{transform:translateX(0)}
  .app .navscrim{display:none}
  .app .side-close{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:36px;height:36px;border:none;background:transparent;color:var(--text-on-inverse-muted);font-size:18px;cursor:pointer;border-radius:10px;flex:none}
  .app .side-close:hover{background:var(--bogo-negro-2);color:var(--bogo-blanco)}
  .app .mainwrap{width:100%;min-width:0;flex:none}
  .app .mainwrap .wrap{padding:0 16px;max-width:none}
  .app .tabsnav{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* ===== MOBILE-FIRST · CIMIENTO (≤640px) · aditivo, no toca escritorio ===== */
@media (max-width:640px){
  /* Contenedores */
  .wrap{padding:0 14px}
  main{padding:16px 0 84px}
  .areaname{font-size:18px}
  .areahdr{padding-top:4px}

  /* Toolbars y controles → NO saltan a 2 renglones: una sola fila que se desliza (sin barra visible) */
  .toolbar{gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .toolbar::-webkit-scrollbar{display:none}
  .toolbar > *{flex:0 0 auto}
  .selin,select.selin,input.selin{min-width:0}

  /* Filas de pestañas (subtabs) → una fila deslizable, sin envolver */
  .tabsnav,.subnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .tabsnav::-webkit-scrollbar,.subnav::-webkit-scrollbar{display:none}

  /* Filtros de Pagos → una sola fila deslizable (sin envolver) */
  .pg-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
  .pg-filters::-webkit-scrollbar{display:none}
  .pg-filters>*{flex:0 0 auto}
  .pg-filters .cc-range{flex-wrap:nowrap}
  .pg-filters #pg_new{margin-left:8px!important}

  /* Tablas densas → el scroll horizontal se queda DENTRO de la tabla; la página no se corre; sin barra gris */
  main{overflow-x:hidden}
  .tablewrap{-webkit-overflow-scrolling:touch;border-radius:10px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .tablewrap::-webkit-scrollbar{display:none}
  table{font-size:12px}
  th,td{padding:8px 10px}
  /* Flujo (comparativo por mes): columnas FIJAS y compactas → cada valor cae bajo su mes; 3 meses caben en pantalla */
  .fl-table{table-layout:fixed;min-width:0;width:auto}
  .fl-table th.fl-lbl,.fl-table td.fl-lbl{width:132px;min-width:132px;max-width:132px;white-space:normal;overflow-wrap:break-word}
  .fl-table th.num,.fl-table td.num{width:80px;min-width:80px;padding-left:6px;padding-right:8px}

  /* Objetivos táctiles más cómodos con el pulgar */
  .mini{padding:8px 12px;font-size:12px}
  .btn{padding:11px 16px}
  /* 16px en campos evita el zoom automático de iOS al enfocar */
  input,select,textarea{font-size:16px}

  /* Modales → hoja inferior a pantalla completa (vence a los max-width en línea) */
  .scrim{padding:0;align-items:flex-end}
  .scrim .modal{max-width:100%!important;width:100%!important;max-height:94vh;max-height:94dvh;border-radius:14px 14px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom))}
  .modal h3{font-size:16px}
}
/* ===== Inicio móvil (consulta + captura rápida) ===== */
#hometoggle{display:none;align-items:center;justify-content:center;background:transparent;border:none;border-radius:10px;width:34px;height:34px;cursor:pointer;color:var(--mut);flex:none;margin:0 0 0 -6px;transition:background .15s ease,color .15s ease}
#hometoggle:hover{background:var(--soft2);color:var(--ink)}
#hometoggle svg{width:20px;height:20px}
.ini{display:flex;flex-direction:column;gap:14px;max-width:560px;margin:0 auto;padding-bottom:24px}
.ini-cards{display:flex;flex-direction:column;gap:14px}
.ini-h{font-size:13px;color:var(--mut);font-weight:600;letter-spacing:.02em;margin:2px 0 -4px}
.ini-card{border:1px solid var(--line);border-radius:14px;padding:16px 16px 14px;background:var(--bg);box-shadow:0 1px 2px rgba(0,0,0,.03)}
.ini-card.tap{cursor:pointer}
.ini-card.tap:active{transform:scale(.99)}
.ini-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ini-card-t{font-size:12px;color:var(--mut);font-weight:600}
.ini-card-go{font-size:12px;color:var(--olive);font-weight:600}
.ini-hero-q{font-size:13px;color:var(--mut);margin-bottom:2px}
.ini-hero-a{font-size:26px;font-weight:800;letter-spacing:-.5px;line-height:1.15}
.ini-hero-a.ok{color:var(--green)}.ini-hero-a.bad{color:var(--red)}
.ini-hero-sub{font-size:12px;color:var(--mut);margin-top:6px;line-height:1.4}
.ini-big{font-size:26px;font-weight:800;letter-spacing:-.5px;line-height:1.15}
.ini-sub{font-size:12px;color:var(--mut);margin-top:4px}
.ini-delta{font-weight:700}.ini-delta.up{color:var(--green)}.ini-delta.down{color:var(--red)}

.ini-rowline .v{font-weight:700}
.ini-actions{display:flex;gap:10px;flex-wrap:wrap}
.ini-act{flex:1 1 auto;min-width:130px;display:flex;align-items:center;justify-content:center;gap:7px;padding:13px 12px;border-radius:14px;border:1px solid var(--line);background:var(--bg);font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:none}
.ini-act:active{background:var(--soft)}
.ini-act .plus{font-size:16px;line-height:1;color:var(--olive)}
.ini-sk{height:88px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(90deg,var(--soft2) 25%,var(--line) 37%,var(--soft2) 63%);background-size:400% 100%;animation:iniShimmer 1.2s ease-in-out infinite}
@keyframes iniShimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media(max-width:1024px){ #hometoggle{display:none} }
/* ===== Móvil: solo Inicio (consulta). Logo arriba, usuario/editar/salir abajo, sin menú de escritorio. ===== */
@media(max-width:1024px){ .ini-card.tap{cursor:default} .ini-card.tap:active{transform:none} .ini-card-go{display:none} }
.ini-brand{display:flex;align-items:center;gap:11px;padding:14px 2px 8px}
.ini-brand .ini-logo{height:28px;width:auto;display:block}
.ini-brand-t{font-size:10.5px;font-weight:800;letter-spacing:.34em;color:var(--ink)}
.ini-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px;padding:14px 2px 8px;border-top:1px solid var(--line)}
.ini-foot-u{font-size:13px;font-weight:700;color:var(--ink)}
.ini-foot-a{display:flex;gap:8px}
.ini-foot-b{font-size:12px;font-weight:600;color:var(--mut);background:none;border:1px solid var(--line);border-radius:10px;padding:7px 12px;cursor:pointer;font-family:inherit}
.ini-foot-b.ini-foot-out:hover{color:var(--red);border-color:var(--red)}
/* ===== Flujo móvil: estado vertical de un mes ===== */
.flm-hero{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:12px;background:var(--soft,var(--soft2))}
.flm-hero-l{font-size:12px;color:var(--mut);font-weight:600}
.flm-hero-v{font-size:26px;font-weight:800;letter-spacing:-.5px;margin-top:2px}
.flm-list{margin-top:6px}
.flm-sec{font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--mut);text-transform:uppercase;margin:14px 0 4px;padding-bottom:3px;border-bottom:1px solid var(--line)}
.flm-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:7px 2px}
.flm-row .v{font-weight:600;white-space:nowrap}
.flm-row.head{font-weight:800;font-size:14px;border-top:2px solid var(--line);margin-top:4px;padding-top:9px}
.flm-row.sub{font-weight:700;border-top:1px solid var(--line)}
.flm-row.mut{color:var(--mut)}
/* ===== Descuentos móvil: tarjeta por ticket ===== */
/* ===== Descuentos · la dona del mes y los días (13-ago) =====
   La pantalla mostraba UN día y para comparar con ayer había que cambiar la
   fecha y perder lo que veías. Ahora: la distribución del mes arriba, y abajo
   los dos últimos días, cada uno con su bloque — igual que el Cuadre. */
.dsc-mes{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}
/* `capitalize` sube TODAS las palabras y dejaba «Agosto De 2026». Solo la
   primera letra: en español el mes y el «de» van en minúscula. */
.dsc-mes-l{min-width:160px;text-align:center;font-size:14px}
.dsc-mes-l::first-letter{text-transform:uppercase}
.dsc-dona{display:flex;align-items:center;gap:24px;flex-wrap:wrap;position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:16px}
.dsc-svg{width:160px;height:160px;flex:none}
/* El total va en el hueco de la dona: es el número que se busca primero. */
.dsc-dona-c{position:absolute;left:20px;top:0;bottom:0;width:160px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.dsc-dona-t{font-size:18px;font-weight:700;color:var(--ink)}
.dsc-dona-s{font-size:10px;color:var(--mut2);text-transform:uppercase;letter-spacing:.04em}
.dsc-legs{flex:1;min-width:220px;display:flex;flex-direction:column;gap:4px}
.dsc-leg{display:flex;align-items:center;gap:8px;font-size:12.5px}
.dsc-punto{width:10px;height:10px;border-radius:3px;flex:none}
.dsc-leg-n{flex:1;min-width:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsc-leg-v{color:var(--mut);font-variant-numeric:tabular-nums}
.dsc-leg-p{width:36px;text-align:right;color:var(--mut2);font-variant-numeric:tabular-nums}
/* ===== Ventas · el mes en barras y el día a día plegado (13-ago) ===== */
/* El aire de arriba (Juan, 17-ago): «la tarjeta está extremadamente pegada a la
   parte de arriba». La vista trae `padding-top:6px` y la tarjeta no traía margen
   propio, así que nacía contra el borde. 16 es el paso de tarjeta del sistema;
   el 18 de abajo era un valor a ojo, fuera de la escala 4·8·12·16·24·32. */
.ve-mes{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:16px 0}
/* 🔴 EL ANCHO QUE SOBRA NO ENTRA EN LA TABLA  (17-ago · regla del sistema)
   Una tabla de datos tenía `width:100%` y su contenido casi nunca da para
   tanto: en Ventas son 328px de texto dentro de 1.118px. Ese sobrante tiene que
   ir a algún lado y solo hay tres destinos, dos de ellos malos:
     · repartido entre todas las columnas → todo flota, cada cifra lejos de la
       siguiente. Así estaba, y Juan: «por qué hay un espacio tan grande vacío».
     · todo a una columna → un hueco de media página. Así quedó el primer
       arreglo del 17-ago: la columna del día en 615px para un texto de 72px, y
       Juan: «ahora hay DEMASIADO aire en esta columna».
     · FUERA de la tabla → la tabla mide lo que mide y la tarjeta se le ciñe.
   El tercero es el correcto y es el que queda escrito en SISTEMA-VISUAL §4.
   `max-content` da a cada columna su ancho natural; el relleno de celda pone el
   aire, que es lo que la regla de Juan pide: un dato nunca pegado al borde.
   ⚠️ `max-width:100%` impide romper la otra regla, la de que la página NUNCA
   scrollea de lado: una tabla ancha sigue cabiendo y scrollea dentro de su
   propia caja, como ya hacía.
   ⚠️ Y `width:auto` NO sirve: el reparto automático de la tabla le da a la
   última columna lo que sobre.
   🔴 Va como clase OPT-IN, no sobre `.cc-table` a secas: son 18 cajas repartidas
   por el dashboard y no todas se comportan igual —`.fl-table` trae su propio
   `min-width:640px`—, así que se aplica tabla por tabla mirando la captura de
   cada una. Aplicarla a ciegas a las 18 es repetir el error que la originó.

   🔴 Y VA CENTRADA. Regla de Juan, 17-ago: «todas las tablas deben ocupar la
   pantalla entera y ser responsive al tamaño de la pantalla; o, en el caso de
   quedar muy angostas como el caso de ventas, la tabla debe quedar centrada».
   Ceñida y pegada a la izquierda deja un vacío enorme a la derecha, que es el
   mismo defecto de antes movido de sitio. `margin:auto` lo reparte a los dos
   lados y la tabla queda como un bloque deliberado, no como algo que sobró. */
.cc-cenida{margin-left:auto;margin-right:auto}
.cc-cenida,.cc-cenida>.cc-table{width:max-content;max-width:100%}
/* El aire de celda SÍ es global: es la regla de Juan del 17-ago —«un dato nunca
   puede estar pegado a la izquierda ni a la derecha sin dejar aire»—. Solo suma
   relleno, no cambia anchos de columna, y una tabla ancha sigue scrolleando
   dentro de su caja como ya hacía. Antes eran 7px de cabecera y 8px de celda. */
.cc-table th,.cc-table td{padding-left:12px;padding-right:12px}
.ve-mes-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ve-mes-h b{font-size:22px;font-weight:700;color:var(--ink)}
.ve-mes-s{font-size:12.5px;color:var(--mut)}
.ve-bars{display:flex;align-items:flex-end;gap:4px;height:76px}
.ve-bcol{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative}
.ve-bar{width:100%;border-radius:3px 3px 0 0;background:var(--ch1);opacity:.55}
/* La venta del día, al hover — antes solo el title nativo del navegador, lento
   y sin estilo (Juan, 18-ago). */
.ve-bv{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:4px;
  font-size:10px;font-weight:700;white-space:nowrap;background:var(--ink);color:var(--bg);
  padding:2px 6px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .1s}
.ve-bcol:hover .ve-bv{opacity:1}
.ve-bar.hoy{opacity:1;outline:1px solid var(--ink);outline-offset:1px}
.ve-bd{font-size:9px;color:var(--mut2);margin-top:4px}
.ve-bd.hoy{color:var(--ink);font-weight:700}
/* La fila del total ES el control del acordeón (Juan, 17-ago). El galón dice
   hacia dónde va antes de tocarlo; sin él la fila no se ve clickeable. */
.ve-toggle{cursor:pointer}
.ve-toggle:hover td{filter:brightness(.985)}
.ve-chev{color:var(--mut);font-size:11px;margin-right:2px}

.dsc-barra{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
/* Cada control dice qué hace: un input de fecha suelto no se lee como «buscar
   un día», y menos junto a un desplegable de motivos. */
.dsc-lb{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--mut)}
.dsc-barra input[type=date],.dsc-barra select{padding:8px 10px;border:1px solid var(--line);
  border-radius:10px;font-family:inherit;font-size:13px;background:var(--bg);color:var(--ink)}
/* Fila 1 = .cbar, fila 2 = .filterbar (SISTEMA-VISUAL-2026 §C1b) — las dos ya
   existían; no se inventa un componente nuevo por pantalla. */
.dsc-gestion{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:16px;background:var(--card)}
.dsc-mlist{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.dsc-mrow{display:flex;align-items:center;gap:8px}
.dsc-mrow.off{opacity:.5}
.dsc-mrow .lgin{flex:1}
.dsc-leg[data-dscleg]{cursor:pointer;border-radius:6px;padding:2px 4px;margin:0 -4px}
.dsc-leg[data-dscleg]:hover{background:var(--soft2)}
/* La nota, a la vista y en línea. El borde avisa cuando falta: es el dato que
   el POS no trae y sin él el descuento queda sin explicar. */
.dsc-nin{width:100%;box-sizing:border-box;padding:6px 10px;border:1px solid var(--line);
  border-radius:9px;font-family:inherit;font-size:12.5px;background:var(--bg);color:var(--ink)}
.dsc-nin:focus{border-color:var(--blue);outline:none}
.dsc-nin.falta{border-color:var(--terra);background:var(--terra-t)}
/* El dato pegado al filo se leía mal (Juan, 13-ago): la tabla necesita aire. */
.dsc-tabla td,.dsc-tabla th{padding-left:12px;padding-right:12px}
.dsc-tabla td{padding-top:8px;padding-bottom:8px}
.dsc-msg{color:var(--mut);font-size:12px}
.dsc-dia{margin-bottom:20px}
.dsc-dia-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.dsc-dia-f{font-size:13.5px;font-weight:700;color:var(--ink)}
.dsc-dia-f::first-letter{text-transform:uppercase}
.dsc-dia-n{font-size:12px;color:var(--mut)}
.dsc-dia-p{font-size:11px;font-weight:700;color:var(--terra)}
.dsc-dia-ok{font-size:11px;font-weight:600;color:var(--green)}
.dsc-vacio{font-size:12.5px;color:var(--mut2);padding:16px;text-align:center;
  border:1px dashed var(--line);border-radius:10px}
.dsc-pend{background:var(--terra-t)}
@media(max-width:640px){ .dsc-dona{gap:12px;justify-content:center} }

.dsc-cards{display:flex;flex-direction:column;gap:10px}
.dsc-card{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--bg)}
.dsc-card.pend{border-color:var(--terra);background:rgba(203,75,50,.04)}
.dsc-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dsc-doc{font-size:12px;color:var(--mut);font-weight:600}
.dsc-desc{font-size:18px;font-weight:800;color:var(--terra);white-space:nowrap}
.dsc-card-sub{font-size:12px;color:var(--mut);margin-top:2px}
.dsc-card-act{display:flex;gap:8px;align-items:center;margin-top:10px}
.dsc-motsel{flex:1 1 auto;min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:13px;background:var(--bg);color:var(--ink)}
.dsc-mottxt{flex:1 1 auto;font-size:13px}
.dsc-nota{flex:0 0 auto;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-family:inherit;font-size:13px;cursor:pointer}

/* ================= Consolidación UX (commit 2) =================
   fl-chip / cc-chip / rm-chip eran el MISMO componente con 3 geometrías
   distintas. Se unifican aquí (al final, para no reescribir sus bloques
   originales y poder revertir borrando este bloque). Solo geometría —
   los colores de estado de cada familia se respetan. */
.fl-chip,.cc-chip,.rm-chip{padding:6px 13px;border-radius:999px;font-size:12px;font-weight:600;font-family:inherit;line-height:1.35;white-space:nowrap;cursor:pointer}
.cc-lockbtn{padding:6px 13px;border-radius:999px;font-size:12px;line-height:1.35}
.fl-segbtn{font-size:12px;padding:6px 13px;border-radius:6px}
.mini{padding:6px 13px;border-radius:10px;font-size:12px}
/* Celdas que SÍ pueden envolver: texto libre en tablas densas.
   .cc-table td es nowrap global (correcto para columnas numéricas del Cuadre);
   esto libera las de texto y elimina el scroll horizontal de Caja Chica. */
.cc-table td.w,.cc-table th.w{white-space:normal;min-width:0}
.cc-table td.w{line-height:1.4}

/* ================= Commit 3 · jerarquia, aire y complementos moviles =================
   OJO: el patron de bottom sheet YA EXISTIA (.scrim .modal en @media 640px,
   con safe-area). Este bloque NO lo reimplementa: lo completa con lo que le
   faltaba, y usa el MISMO breakpoint de 640px para que todo active junto. */

/* --- Aire y jerarquia (escritorio) --- */
.acts{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.cc-box+.cc-box,.rm-grp+.rm-grp{margin-top:16px}
.cc-table th{padding-top:11px;padding-bottom:9px}

/* --- Complementos del bottom sheet ya existente --- */
@media (max-width:640px){
  /* agarradera: le dice al pulgar que esto se desliza */
  .scrim .modal::before{
    content:'';display:block;width:36px;height:4px;border-radius:999px;
    background:var(--line);margin:-4px auto 14px
  }
  .scrim .modal{animation:sheetUp .22s cubic-bezier(.32,.72,0,1)}
  /* las acciones se quedan al alcance aunque el formulario sea largo */
  .scrim .modal .acts{
    position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom,0px));
    background:var(--card);margin-top:18px;
    padding:14px 0 calc(4px + env(safe-area-inset-bottom,0px))
  }
  .scrim .modal .acts .btn{flex:1;justify-content:center;text-align:center}
  /* 16px es el umbral bajo el cual el navegador movil hace zoom al enfocar */
  .field input,.field select,.field textarea,.modal input,.modal select,.modal textarea{font-size:16px}
  /* tablas densas: ganar ancho antes de recurrir al scroll */
  .cc-table td,.cc-table th{padding-left:8px;padding-right:8px}
  .cc-table td{font-size:12px}
  .cc-wrap,.wrap{padding-left:14px;padding-right:14px}
  /* filtros y chips: envolver en vez de empujar scroll lateral */
  .rm-tools,.cc-presets,.cc-controls{flex-wrap:wrap}
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.scrim .modal{animation:none}}

/* --- Safe area en la superficie general --- */
body{padding-bottom:env(safe-area-inset-bottom,0px)}

/* ================= Barra del asistente · solo superadmin =================
   Paleta Google bajada a bento: menos saturación, más superficie. Nada de negro. */
.ai-fab{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:200;
  width:52px;height:52px;border-radius:999px;border:none;background:var(--bogo-negro);color:var(--bogo-blanco);
  display:none;align-items:center;justify-content:center;cursor:grab;font-family:inherit;
  box-shadow:0 4px 16px rgba(0,0,0,.22);transition:box-shadow .15s,transform .12s;touch-action:none}
.ai-fab:hover{box-shadow:0 6px 22px rgba(0,0,0,.22)}
.ai-fab.on{display:inline-flex}
.ai-fab.drag{cursor:grabbing;transform:scale(1.08);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.ai-fab svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ai-panel{position:fixed;z-index:201;width:420px;max-width:calc(100vw - 40px);max-height:72vh;
  background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);
  display:none;flex-direction:column;overflow:hidden}
.ai-panel.on{display:flex}
.ai-hd{display:flex;align-items:center;gap:9px;padding:13px 15px;border-bottom:1px solid var(--line);flex:0 0 auto}
.ai-hd b{font-size:13px;font-weight:700}
.ai-hd span{font-size:11.5px;color:var(--mut);font-weight:500}
.ai-x{margin-left:auto;border:none;background:none;color:var(--mut);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:6px;font-family:inherit}
.ai-x:hover{background:var(--soft);color:var(--ink)}
.ai-body{flex:1 1 auto;overflow-y:auto;padding:14px 15px;min-height:120px}
.ai-msg{margin-bottom:14px;font-size:13px;line-height:1.55}
.ai-msg.u{text-align:right}
.ai-msg.u .ai-b{display:inline-block;background:var(--terra-t);border:1px solid var(--terra);
  color:var(--ink);padding:8px 12px;border-radius:14px 14px 6px 14px;text-align:left;max-width:85%}
.ai-msg.a .ai-b{white-space:pre-wrap}
.ai-tz{margin-top:8px;font-size:11.5px;color:var(--mut)}
.ai-tz summary{cursor:pointer;font-weight:600;list-style:none}
.ai-tz pre{margin:6px 0 0;padding:8px 10px;background:var(--soft);border:1px solid var(--line);border-radius:10px;
  font-size:10.5px;line-height:1.5;overflow-x:auto;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ai-empty{color:var(--mut);font-size:12px;line-height:1.6;text-align:center;padding:22px 8px}
.ai-sug{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}
.ai-sug button{border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:6px 13px;border-radius:999px;
  font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;line-height:1.35}
.ai-sug button:hover{border-color:var(--terra);color:var(--terra)}
.ai-foot{flex:0 0 auto;border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));display:flex;gap:8px;align-items:flex-end}
.ai-in{flex:1;min-width:0;resize:none;border:1px solid var(--line);border-radius:10px;padding:9px 11px;
  font-family:inherit;font-size:13px;line-height:1.45;background:var(--bg);color:var(--ink);max-height:110px}
.ai-in:focus{outline:none;border-color:var(--terra)}
.ai-mic,.ai-go{flex:0 0 auto;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--bg);
  color:var(--ink);cursor:pointer;font-family:inherit;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
.ai-go{background:var(--terra);color:var(--fab-ink);border-color:var(--terra)}
.ai-mic.rec{background:var(--terra);border-color:var(--terra);color:var(--fab-ink);animation:aiPulse 1.1s ease-in-out infinite}
@keyframes aiPulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.ai-mic.rec{animation:none}.ai-fab{transition:none}}
.ai-dots{display:inline-block;color:var(--mut);font-size:13px}
@media (max-width:640px){
  .ai-panel{right:0 !important;left:0 !important;bottom:0 !important;top:auto !important;
    width:auto;max-width:none;max-height:88vh;max-height:88dvh;border-radius:20px 20px 0 0;border-bottom:none}
  .ai-in{font-size:16px}
}
/* Selector de tema */
/* Oculto (Juan, 18-ago) hasta tener el modo claro pulido al 100% — la lógica
   de tema sigue viva, solo se esconde el interruptor manual. */
.thm{display:none}
.thm:hover{border-color:var(--mut);color:var(--ink)}

/* ================= Mi día · tareas personales (prefijo md- para no chocar
   con el módulo Equipo, que ya existía con prefijo tk-) ================= */
.md-q{display:flex;gap:8px;align-items:center;border:1px solid var(--line);background:var(--card);
  border-radius:12px;padding:8px 10px;margin-bottom:10px}
.md-q input{flex:1;min-width:0;border:none;background:none;font-family:inherit;
  font-size:14px;color:var(--ink);padding:4px 2px}
.md-q input::placeholder{color:var(--mut2)}
.md-hint{font-size:11.5px;color:var(--mut);margin:0 2px 14px;line-height:1.6}
.md-hint code{background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:1px 5px;font-size:10.5px;font-family:ui-monospace,Menlo,monospace}
.md-prev{display:flex;gap:6px;flex-wrap:wrap;margin:0 2px 10px}
.md-tag{font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 9px;border:1px solid var(--g-blue);color:var(--g-blue)}
.md-sec{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--mut);margin:16px 2px 8px;display:flex;align-items:center;gap:8px}
.md-sec b{color:var(--ink)}
.md-sec.venc{color:var(--red)}
.md-row{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:11px;background:var(--card);margin-bottom:6px}
.md-row:hover{border-color:var(--mut2)}
.md-ck{flex:0 0 auto;width:19px;height:19px;border-radius:50%;border:2px solid var(--mut2);
  background:none;cursor:pointer;padding:0;margin-top:1px;position:relative}
.md-ck:hover{border-color:var(--green)}
.md-ck.p1{border-color:var(--red)}.md-ck.p2{border-color:var(--amber)}.md-ck.p3{border-color:var(--g-blue)}
.md-ck::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--green);opacity:0;transition:opacity .12s}
.md-ck.on::after{opacity:1}
.md-bd{flex:1 1 auto;min-width:0;cursor:pointer}
.md-tl{font-size:13px;font-weight:500;line-height:1.4}
.md-dt{font-size:11.5px;color:var(--mut);margin-top:2px;line-height:1.45}
.md-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:5px;font-size:11.5px;color:var(--mut)}
.md-fch{font-weight:600}
.md-fch.venc{color:var(--red)}.md-fch.hoy{color:var(--green)}

.md-vacio{padding:26px 12px;text-align:center;color:var(--mut);font-size:13px;line-height:1.7}
@media (max-width:640px){ .md-q input{font-size:16px} }

/* n9 (Juan, 14-ago): «esta barra podría ser gris y letra + número en terracota con
   acordeón». Los avisos venían en azul y con alto fijo arriba de todo, antes incluso
   de las tareas — un canal de sistema pisando el trabajo del día. Ahora es una barra
   gris plegada: el número en terracota dice cuántos hay, y se abren si los quieres
   leer. Vive en Tareas desde la fusión de «Mis tareas» (n13). */
.tq-avs{border:1px solid var(--line);background:var(--soft);border-radius:14px;margin-bottom:16px;overflow:hidden}
.tq-avs-h{display:flex;align-items:center;gap:8px;width:100%;padding:12px;border:none;background:none;
  font:inherit;text-align:left;cursor:pointer;color:var(--terra);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em}
.tq-avs-h:hover{background:var(--soft2)}
.tq-avs-c{font-size:10px;color:var(--mut);transition:transform .12s;flex:none}
.tq-avs.ab .tq-avs-c{transform:rotate(90deg)}
.tq-avs-n{color:var(--terra);font-weight:700}
.tq-avs-b{padding:0 12px 12px}
.tq-avs-d{font-size:12px;line-height:1.6;color:var(--mut);white-space:normal;
  padding:8px 0 12px;border-bottom:1px solid var(--line)}
/* De que reunion salio la tarea. Terracota flojo: informa de donde viene, no reclama. */
.tq-sn.reu{color:var(--terra)}
.md-avisos{border:1px solid var(--g-blue-line);background:var(--g-blue-t);border-radius:12px;padding:11px 13px;margin-bottom:14px}
.md-av-t{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--g-blue);margin-bottom:7px}
.md-av{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.5;padding:4px 0;cursor:pointer}
.md-av:hover .md-av-x{text-decoration:underline}
.md-av-x{flex:1;min-width:0}
.md-av-c{border:none;background:none;color:var(--mut);cursor:pointer;font-size:13px;padding:0 4px;font-family:inherit}
.md-mas{flex:0 0 auto;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--bg);
  color:var(--mut);cursor:pointer;font-family:inherit;font-size:18px;line-height:1;display:inline-flex;
  align-items:center;justify-content:center}
.md-mas:hover{border-color:var(--g-blue);color:var(--g-blue)}

/* ---- Modales en movil: una sola columna de verdad ----
   La regla base .grid{1fr 1fr} esta declarada DESPUES del bloque responsive
   de 820px, asi que lo anulaba: en el telefono los formularios seguian a dos
   columnas y la columna derecha quedaba cortada. Esta va al final del archivo
   para ganar por orden, sin !important. */
@media (max-width:820px){
  .modal .grid{grid-template-columns:1fr;gap:11px}
}
@media (max-width:640px){
  .modal .grid{gap:10px}
  .field{min-width:0}
  .field input,.field select,.field textarea{width:100%;min-width:0}
  .modal input[type="date"]{-webkit-appearance:none;appearance:none}
  /* dvh = alto REAL disponible: cuando sube el teclado, vh no se encoge y la
     hoja se iba debajo del teclado. Los navegadores viejos ignoran dvh y se
     quedan con el 94vh de arriba. */
  .scrim .modal{max-height:92dvh}
}

/* ===== Insumo <-> Proveedor ===== */
.ip-wrap{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--soft)}
.ip-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.ip-hd b{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700}
.ip-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--line);font-size:13px}
.ip-row:first-of-type{border-top:none}
.ip-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip-meta{font-size:11px;color:var(--mut);white-space:nowrap}
.ip-pr{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ip-pr.best{color:var(--green);font-weight:600}
.ip-star{border:none;background:none;cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;color:var(--mut2);font-family:inherit}
.ip-star.on{color:var(--terra)}
.ip-x{border:none;background:none;cursor:pointer;color:var(--mut2);font-size:14px;padding:2px 5px;font-family:inherit}
.ip-x:hover{color:var(--red)}
.ip-tag{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:2px 7px;white-space:nowrap}
.ip-tag.pri{background:var(--terra-t);color:var(--terra)}
.ip-tag.pin{background:var(--violet-t);color:var(--violet)}
.ip-tag.new{background:var(--amber-t);color:var(--amber)}
.ip-add{display:flex;gap:6px;margin-top:9px}
.ip-add input{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:9px;font-size:13px;font-family:inherit;background:var(--card);color:var(--ink)}
.ip-empty{font-size:12px;color:var(--mut);padding:6px 0}
.ip-alert{display:flex;align-items:center;gap:9px;border:1px solid var(--amber);background:var(--amber-t);
  border-radius:11px;padding:9px 12px;margin-bottom:12px;font-size:12.5px;color:var(--ink)}
.ip-alert b{color:var(--amber)}
.ip-alert button{margin-left:auto}
.ip-sub{display:flex;align-items:center;gap:9px;flex:0 0 auto}
/* Bandeja de vinculos: cada fila tiene DOS salidas, no una. Hasta el 8-ago solo
   estaba «Es este», asi que un vinculo equivocado no tenia forma de irse y la
   bandeja no se vaciaba nunca. «No es este» va en secundario —quitar es lo raro—
   y el rojo aparece recien al pasar por encima: un boton rojo permanente asusta
   y se termina leyendo como decoracion. */
.ipb-act{display:flex;gap:6px;flex:0 0 auto}
.ipb-no{color:var(--mut2)}
.ipb-no:hover{border-color:var(--red);color:var(--red)}
.ipb-nota{font-size:11.5px;color:var(--mut);line-height:1.5;padding:0 0 8px}
.ipb-nota b{color:var(--ink);font-weight:600}
@media (max-width:640px){
  .ip-row{flex-wrap:wrap;row-gap:3px;padding:9px 0}
  .ip-nm{flex:1 1 0;white-space:normal}
  .ip-sub{order:1;flex:1 1 100%;padding-left:27px;justify-content:space-between}
  /* Los dos botones a la fila de abajo, completos. Apretados al lado del nombre
     obligaban a desplazar de lado, y eso no se hace. */
  .ipb-act{order:2;flex:1 1 100%;justify-content:flex-end}
}

/* ===== X de cerrar (todos los modales) ===== */
.scrim > .modal{position:relative}
.scrim > .modal h3{padding-right:36px}
.mclose{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:9px;
  border:1px solid transparent;background:transparent;color:var(--mut2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0;font-family:inherit;
  transition:background .13s ease,color .13s ease,border-color .13s ease;z-index:3}
.mclose.inline{position:static}
.mclose:hover{background:var(--soft2);color:var(--ink);border-color:var(--line)}
.mclose:active{transform:scale(.93)}
.mclose:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.mclose svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (max-width:640px){
  /* en hoja inferior la X baja un poco para no chocar con la agarradera */
  .mclose{top:14px;right:12px;width:34px;height:34px}
  .mclose svg{width:16px;height:16px}
}

/* ===== Precios (comparador) ===== */
.px-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:14px 0 18px}
.px-kpi{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--card)}
.px-kpi .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700}
.px-kpi .v{font-size:26px;font-weight:700;letter-spacing:-.5px;margin-top:5px;font-variant-numeric:tabular-nums}
.px-kpi .s{font-size:12px;color:var(--mut);margin-top:3px;line-height:1.45}
.px-kpi.good .v{color:var(--green)}
.px-kpi.warn .v{color:var(--terra)}
.px-card{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;margin-bottom:14px}
.px-hd{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--soft)}
.px-hd b{font-size:13px}
.px-hd .s{font-size:12px;color:var(--mut)}
.px-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.px-row:last-child{border-bottom:none}
.px-nm{flex:1 1 auto;min-width:0}
.px-nm b{font-size:13.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-nm .s{font-size:11.5px;color:var(--mut);display:block;margin-top:2px;line-height:1.45}
.px-vs{flex:0 0 auto;font-size:12px;text-align:right;font-variant-numeric:tabular-nums;line-height:1.6}
.px-vs .hoy{color:var(--mut)}
.px-vs .mejor{color:var(--green);font-weight:600}
.px-amt{flex:0 0 auto;text-align:right;min-width:92px}
.px-amt .n{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.px-amt .n.up{color:var(--terra)}
.px-amt .n.save{color:var(--green)}
.px-amt .l{font-size:10.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.03em}
.px-flag{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:2px 7px;
  background:var(--amber-t);color:var(--amber);white-space:nowrap}
.px-note{font-size:12px;color:var(--mut);line-height:1.55;padding:11px 16px;background:var(--amber-t);
  border-top:1px solid var(--line)}
/* La evidencia de una fila marcada: la ficha y la factura, una al lado de la otra.
   Sin esto la marca solo dice «desconfia» y no da con que decidir. */
.px-ev{font-size:11.5px;color:var(--mut);line-height:1.55;margin-top:4px;
  border-left:2px solid var(--amber);padding-left:8px}
.px-ev b{color:var(--ink);font-weight:600}
.px-rep{align-items:flex-start}
@media (max-width:640px){
  .px-row{flex-wrap:wrap;row-gap:8px;padding:12px 14px}
  .px-nm{flex:1 1 100%}
  .px-vs{flex:1 1 auto;text-align:left}
  .px-amt{flex:0 0 auto;min-width:0}
  /* Los botones a su propia fila: apretados al lado del monto obligaban a
     desplazar de lado, y eso no se hace. */
  .px-rep .ipb-act{flex:1 1 100%;justify-content:flex-end}
}

/* ===== Pagos fijos ===== */
.fj-nav{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.fj-mes{font-size:16px;font-weight:700;letter-spacing:-.01em}
.fj-est{border-radius:11px;padding:12px 16px;margin-bottom:14px;font-size:13px;line-height:1.5}
.fj-est.pend{background:var(--amber-t);border:1px solid var(--amber)}
.fj-est.ok{background:var(--green-t);border:1px solid var(--green)}
.fj-est-s{margin-top:6px;color:var(--mut);font-size:12px}
.fj-tabla{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--card)}
.fj-hd,.fj-r{display:grid;grid-template-columns:1fr 108px 92px 108px 62px 168px;gap:10px;
  align-items:center;padding:0 14px}
/* Fijos NO usa <table>: es una grilla de divs, así que la regla global de
   `thead th` no la alcanza. Es la misma fila principal y lleva el mismo azul —
   si no, la app queda con dos lenguajes según cómo se armó cada pantalla. */
.fj-hd{height:34px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--mut);background:var(--blue);font-weight:700;
  border-bottom:2px solid var(--line);border-radius:10px 10px 0 0}
.fj-r{min-height:46px;border-bottom:1px solid var(--line);font-size:13px}
.fj-r:last-child{border-bottom:none}
/* Un fijo apagado sigue a la vista, atenuado: esconderlo hace que nadie recuerde
   que existe y que un día vuelva a encenderse sin querer. */
.fj-r.off{opacity:.5}
.fj-r.hecho{background:var(--soft)}
.fj-del{background:none;border:0;cursor:pointer;font-size:15px;opacity:.45;padding:0 4px}
.fj-del:hover{opacity:1}
.fj-hd .r,.fj-r .r{text-align:right}
.fj-hd .c,.fj-r .c{text-align:center}
.fj-nm{display:flex;flex-direction:column;gap:2px;min-width:0}
.fj-nm .c{font-size:11.5px;color:var(--mut);text-align:left}
.fj-tot{font-weight:700;font-variant-numeric:tabular-nums}
.fj-in{width:100%;height:30px;padding:0 8px;border:1px solid var(--line);border-radius:6px;
  background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;text-align:right;
  font-variant-numeric:tabular-nums}
.fj-in:focus{border-color:var(--ink);outline:none}
.fj-dia{text-align:center}
.fj-tag{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.03em}
.fj-tag.va{background:var(--amber-t);color:var(--amber)}
.fj-tag.hecho{background:var(--green-t);color:var(--green)}
.fj-tag.off{background:var(--soft2);color:var(--mut)}
.fj-sw{margin-left:8px;background:none;border:none;color:var(--mut);font:inherit;font-size:11px;
  text-decoration:underline;cursor:pointer;padding:0}
.fj-sw:hover{color:var(--ink)}
.fj-go{margin-top:16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.fj-go-s{font-size:12px;color:var(--mut)}
@media(max-width:640px){
  .fj-hd{display:none}
  .fj-r{grid-template-columns:1fr 1fr;row-gap:6px;padding:12px}
  .fj-nm{grid-column:1/-1}
}
/* ===== Caja chica ===== */
.cj-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:4px 0 16px}
.cj-c{display:flex;flex-direction:column;gap:3px;text-align:left;border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;background:var(--card);cursor:pointer;font-family:inherit;
  transition:border-color .13s,box-shadow .13s}
.cj-c:hover{border-color:var(--mut2)}
.cj-c.on{border-color:var(--terra);box-shadow:0 0 0 1px var(--terra) inset}
.cj-c.sana .cj-c-v{color:var(--green)}
.cj-c.warn .cj-c-v{color:var(--red)}
.cj-c.warn .cj-c-s{color:var(--red)}
.cj-c.warn{border-color:var(--red)}
.cj-c.warn.on{box-shadow:0 0 0 1px var(--red) inset}
.cj-c-k{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700}
.cj-c-v{font-size:26px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:var(--ink)}
.cj-c-s{font-size:11.5px;color:var(--mut);line-height:1.45}
.cj-aviso{border:1px solid var(--amber);background:var(--amber-t);border-radius:11px;
  padding:10px 13px;margin-bottom:14px;font-size:12.5px;line-height:1.55}
.cj-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:16px}
.app.editmode .cj-bar [data-uicard]{padding-right:32px}
.cj-rango{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mut);margin-left:auto}
.cj-rango input{padding:6px 9px;border:1px solid var(--line);border-radius:9px;font-size:12.5px;
  font-family:inherit;background:var(--card);color:var(--ink)}
.cj-buscar{padding:6px 14px!important;font-size:12.5px!important}
/* ===== Valor del inventario ===== */
.iv-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;margin-bottom:16px}
.iv-card{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;background:var(--card)}
.iv-k{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700}
.iv-v{font-size:34px;font-weight:700;letter-spacing:-1px;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.1}
.iv-s{font-size:12px;color:var(--mut);line-height:1.5}
.iv-s2{font-size:12px;color:var(--mut);line-height:1.5;margin-top:3px;border-top:1px solid var(--line);padding-top:7px}
.iv-s2 b{color:var(--ink);font-weight:600}
.iv-d{font-weight:600;margin-left:4px}
.iv-d.up,.iv-h-d.up{color:var(--green)}
.iv-d.down,.iv-h-d.down{color:var(--terra)}
.iv-hist{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.iv-hist-t{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700;
  padding:11px 15px;border-bottom:1px solid var(--line);background:var(--soft)}
.iv-h{display:flex;align-items:center;gap:10px;padding:7px 15px;border-bottom:1px solid var(--line);font-size:12.5px}
.iv-h:last-child{border-bottom:none}
.iv-h-f{flex:1;color:var(--mut)}
.iv-h-v{font-variant-numeric:tabular-nums;font-weight:600}
.iv-h-d{font-variant-numeric:tabular-nums;font-size:11.5px;min-width:74px;text-align:right;color:var(--mut)}
/* ===== Rendimientos (mermas) ===== */
.ok-x{position:absolute;top:6px;right:8px;border:none;background:none;color:var(--mut);
  font-size:13px;line-height:1;cursor:pointer;padding:3px 5px;border-radius:6px;opacity:0;
  transition:opacity .12s}
[data-ok]:hover > .ok-x{opacity:.55}
.ok-x:hover{opacity:1!important;color:var(--red);background:var(--soft)}
.ipop-x{display:block;margin:12px 0 0;padding:6px 10px;border:1px solid var(--line);
  background:var(--card);color:var(--mut);border-radius:8px;font-family:inherit;font-size:11.5px;cursor:pointer}
.ipop-x:hover{color:var(--red);border-color:var(--red)}
.av-r{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.av-r:last-of-type{border-bottom:none}
.av-r>span:first-child{flex:1;min-width:0}
.av-k{font-size:10.5px;color:var(--mut);font-family:ui-monospace,monospace}
.iva-alerta{border:1px solid var(--red);background:var(--amber-t);border-radius:12px;padding:12px 15px;
  font-size:13px;line-height:1.6;margin-bottom:16px}
.iva-lista{margin-top:8px;font-size:12.5px}
.iva-lista>div{display:flex;gap:12px;align-items:baseline;padding:3px 0}
.iva-lista>div>span:first-child{flex:1;min-width:0;font-weight:600}
.iva-t{color:var(--red);font-weight:700;white-space:nowrap}
.iva-m{color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.iva-tot{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:12.5px}
.desc-split{display:flex;gap:22px;flex-wrap:wrap;font-size:12.5px;line-height:1.6;
  background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:10px 14px;margin:12px 0 4px}
.desc-split .r{color:var(--red);font-weight:700}
.desc-split .g{color:var(--green);font-weight:700}
.pantalla-que{font-size:12.5px;line-height:1.6;color:var(--mut);background:var(--soft);
  border:1px solid var(--line);border-radius:11px;padding:11px 14px;margin-bottom:16px}
.pantalla-que b{color:var(--ink)}
.pq-vs{display:block;margin-top:5px;font-size:11.5px;opacity:.8}
.repo-tot{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;font-size:12.5px;line-height:1.6;
  background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:10px 14px;margin-bottom:12px}
.repo-n{font-size:11px;font-weight:700;color:var(--terra);background:var(--terra-t);border-radius:6px;padding:2px 8px;margin-left:6px}
.repo-p{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;white-space:nowrap}
.repo-p.ya{color:#fff;background:var(--red)}
.repo-p.pronto{color:var(--amber);background:var(--amber-t)}
.repo-p.ok{color:var(--green);background:var(--soft)}
.repo-p.nada{color:var(--mut);background:var(--soft)}
.cr-sub{font-size:11px;color:var(--mut);font-weight:400;margin-top:2px;line-height:1.35}
.cr-act{white-space:nowrap;text-align:right}
.mr-r{display:flex;align-items:center;gap:12px;padding:11px 15px;border-bottom:1px solid var(--line);font-size:13px}
.mr-r:last-child{border-bottom:none}
.mr-r.sin{background:var(--soft)}
.mr-n{flex:1;min-width:0;font-weight:600;display:flex;flex-direction:column;gap:2px}
.mr-c{font-size:11px;color:var(--mut);font-weight:400}
.mr-top{display:inline-block;font-size:9px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  color:var(--terra);background:var(--terra-t);border-radius:5px;padding:1px 6px;vertical-align:middle}
.mr-imp,.mr-rd,.mr-ex{display:flex;flex-direction:column;gap:1px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.mr-imp{min-width:96px}.mr-rd{min-width:82px}.mr-ex{min-width:88px;color:var(--terra)}
.mr-sub{font-size:10.5px;color:var(--mut);font-weight:400}
.mr-nd{color:var(--mut);font-weight:400}
.mr-b{padding:6px 13px!important;font-size:12.5px!important;flex:0 0 auto}
.mr-calc{font-size:12.5px;line-height:1.6;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.mr-calc .s{color:var(--mut)}
.mr-calc .mal{color:var(--terra)}
.mr-h{display:flex;align-items:center;gap:10px;font-size:12px;padding:5px 0;border-bottom:1px solid var(--line)}
.mr-h:last-child{border-bottom:none}
.mr-h span:first-child{color:var(--mut);min-width:38px}
.mr-h .mr-sub{margin-left:auto;text-align:right}
@media (max-width:640px){
  .mr-r{flex-wrap:wrap;gap:8px 12px}
  .mr-n{flex-basis:100%}
  .mr-imp,.mr-rd,.mr-ex{min-width:0;flex:1;text-align:left}
  .mr-b{flex-basis:100%}
}
tr.ing-mal td{background:var(--amber-t)}
.ing-mal-msg{font-size:12.5px;line-height:1.55;color:var(--terra);padding:2px 0}
.iv-brecha{grid-column:1/-1;border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.iv-b{display:flex;align-items:center;gap:12px;padding:9px 15px;border-bottom:1px solid var(--line);font-size:13px}
.iv-b:last-child{border-bottom:none}
.iv-b-f{flex:1;color:var(--mut);font-size:12.5px}
.iv-b-p{font-weight:700;font-variant-numeric:tabular-nums;min-width:62px;text-align:right}
.iv-b-p.ok{color:var(--green)} .iv-b-p.warn{color:var(--amber)} .iv-b-p.bad{color:var(--red)}
.iv-b-m{font-variant-numeric:tabular-nums;color:var(--mut);font-size:12px;min-width:86px;text-align:right}
@media (max-width:820px){ .iv-wrap{grid-template-columns:1fr} }
.fc-busca{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.fc-busca input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:13px;background:var(--bg);color:var(--ink)}
.fc-busca-n{font-size:11.5px;color:var(--mut);white-space:nowrap}
.fc-res{border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
.fc-res-r{display:flex;align-items:center;gap:11px;padding:9px 14px;border-bottom:1px solid var(--line);font-size:13px}
.fc-res-r:last-child{border-bottom:none}
.fc-res-n{flex:1;min-width:0;font-weight:600}
.fc-res-p{font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.fc-cols.fc-2{grid-template-columns:1fr 1fr}
@media(max-width:640px){.fc-cols.fc-2{grid-template-columns:1fr}}
.fcmv-imp{font-size:12.5px;line-height:1.55;background:var(--soft);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px}
.fcmv-imp .s{color:var(--mut)}
@media (max-width:640px){ .fc-res-p{max-width:none;flex-basis:100%;order:3} .fc-res-r{flex-wrap:wrap;gap:4px 10px} }
.cj-libro{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.cj-l-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 15px;
  border-bottom:1px solid var(--line);background:var(--soft);font-size:13px}
.cj-seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--card)}
.cj-sg{border:none;background:none;padding:5px 12px;font-size:12px;font-family:inherit;color:var(--mut);
  cursor:pointer;border-right:1px solid var(--line)}
.cj-sg:last-child{border-right:none}
.cj-sg.on{background:var(--terra-t);color:var(--terra);font-weight:600}
.cj-res{display:flex;gap:26px;padding:12px 15px;border-bottom:1px solid var(--line);background:var(--soft2)}
.cj-res-i{display:flex;flex-direction:column;gap:1px}
.cj-res-i .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700}
.cj-res-i .v{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.cj-res-i .v.in{color:var(--green)}
.cj-res-i .v.out{color:var(--terra)}
.cj-r{display:flex;align-items:center;gap:11px;padding:10px 15px;border-bottom:1px solid var(--line);font-size:13px}
.cj-r:last-child{border-bottom:none}
/* Un gasto se puede abrir para mirarlo; un abono no tiene documento detrás, así
   que no promete nada que no pueda cumplir. */
.cj-r.ver{cursor:pointer}
.cj-r.ver:hover{background:var(--soft2)}
.cj-r-f{flex:0 0 auto;font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums;min-width:38px}
.cj-r-i{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-size:12px;background:var(--soft2);color:var(--mut)}
.cj-r-i.ingreso{background:var(--green-t);color:var(--green)}
.cj-r-i.gasto{background:var(--terra-t);color:var(--terra)}
.cj-r-d{flex:1 1 auto;min-width:0}
.cj-r-d b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cj-r-d .s{display:block;font-size:11px;color:var(--mut);margin-top:1px}
.cj-r-m{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.cj-r-m.in{color:var(--green)}
.cj-r-m.out{color:var(--ink)}
.cj-r-s{flex:0 0 auto;font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums;
  min-width:76px;text-align:right}
.cj-rep{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13px}
.cj-rep span{flex:1}
.cj-rep input{width:112px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;
  font-size:14px;font-family:inherit;background:var(--bg);color:var(--ink);text-align:right}
.cj-rep-s{font-size:12.5px;margin-top:7px}
.cj-rep-s .ok{color:var(--green)}
.cj-rep-s .mal{color:var(--terra)}
.cj-rep-s .s{color:var(--mut)}
@media (max-width:640px){
  .cj-cards{grid-template-columns:1fr;gap:10px}
  .cj-bar{justify-content:stretch}
  .cj-bar .btn{flex:1 1 auto}
  .cj-rango{margin-left:0;flex:1 1 100%;justify-content:flex-end}
  .cj-l-hd{flex-wrap:wrap;row-gap:8px}
  .cj-res{gap:18px}
  .cj-r{flex-wrap:wrap;row-gap:5px}
  .cj-r-d{flex:1 1 60%}
  .cj-r-s{flex:1 1 100%;text-align:left;padding-left:71px}
}

/* ===== Registro · listado por horizontes + editor de lineas ===== */
.rg-top{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.rg-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)}
.rg-seg button{border:0;background:transparent;padding:0 12px;height:32px;font-family:inherit;font-size:12px;font-weight:600;color:var(--mut);cursor:pointer;white-space:nowrap}
/* Tab activo en NEGRO, no en terracota. Es la decision M5b, que ya estaba
   tomada el 1-ago y el codigo habia contradicho.

   Juan, 3-ago: «terracota es solo para accion». Una pestaña no actua: cambia lo
   que estas mirando. Con esto el unico terracota de la pantalla vuelve a ser
   «Registrar compra», que es lo unico que crea algo.

   El reparo viejo era que el negro competia con .rg-bar, la barra de seleccion,
   que tambien es --ink. No compite: la refuerza. La barra es una SUPERFICIE
   negra con un boton terracota adentro —«Marcar como pagados»— y ese es
   exactamente el patron. Negro dice donde estas parado; terracota, que pasa si
   tocas.

   El negro es el del MANUAL DE MARCA (#161618), no el --ink del sistema
   (#1d1d1f). A ojo son el mismo color —0.0043 de luminancia de diferencia, y el
   contraste pasa de 15.5:1 a 16.6:1— asi que el motivo es de trazabilidad, no
   optico, y Juan lo eligio sabiendolo (3-ago).

   Lo que SI hay que tener presente: este bloque contrasta 16.6:1 contra el
   fondo y el boton terracota 5.4:1. La pestaña activa pesa el triple que la
   unica accion de la pantalla. Se acepta a cambio de que se lea de un golpe
   donde estas parado. Si alguna vez la accion se pierde de vista, la salida no
   es subirle el tono al terracota: es bajarle el peso a esto (riel gris con la
   activa en blanco y sombra, patron iOS/Linear). */
.rg-seg button.on{background:var(--seg-on);color:var(--bg)}
/* 17-ago · Aca vivian .rg-sum y .rg-sumc. Se borran: las reemplaza el componente
   09 del sistema (.s-resumen), que usan Registro, Cuadre de caja e Insumos. Eran
   seis reglas con cinco valores fuera de escala —gap 10, radio 13, cifra 22, texto
   11,5, margenes de 3 y 2— y ninguna pantalla las consumia hasta hoy: se
   escribieron y nunca se enchufaron. Es deuda que sale, no que se mueve. */
/* La grilla es UNA sola para el encabezado de columna, el encabezado de grupo y
   la fila: si el subtotal no cae exactamente sobre la columna Total, el ojo
   tiene que releer, que es justo lo que esta pantalla vino a evitar. */
/* 🔴 n47 · «TODAS las tablas del dashboard tienen el contraste equivocado, NO
   funciona ni en claro ni en oscuro» (Juan). Medido en su pantalla:
     fila contra el fondo de pagina   1,07
     separador contra la fila         1,35   <- no separa nada
   El sistema YA tenia la respuesta y estaba sin usar: `--r-line-fuerte`, que da
   1,70 en claro y 1,92 en oscuro contra la superficie de la fila. No se inventa
   un tono nuevo — SISTEMA-VISUAL-2026 §3: la profundidad de tabla y fila es
   «plano, borde 1px», y el borde tiene dos pesos justamente para esto.
   `--r-line` se queda como estaba para todo lo demas. */
.rg-tabla{border:1px solid var(--r-line-fuerte);border-radius:14px;overflow:hidden;background:var(--card)}
/* Siete columnas: casilla · ojo · beneficiario · estado · pago · total · acciones.
   El ojo sale del bloque de acciones del final y se sienta al principio, junto a
   la casilla: dice si el renglon lo ve todo el equipo o solo gerencia, y eso hay
   que saberlo ANTES de leer el nombre, no despues del monto. */
.rg-hd,.rg-grp-h,.rg-row{display:grid;grid-template-columns:26px 22px 1fr 138px 58px 94px 34px 64px;gap:8px;align-items:center;padding:0 12px}
/* A3 · cuando ninguna fila de la vista trae marca, la pista de «Estado» se va a 0
   y su ancho vuelve al dato. La clase la pone rgCuerpoHTML mirando el HTML armado.
   Va en las TRES rejillas —cabecera, banda de grupo y fila— o el subtotal deja de
   caer sobre su columna, que es justo lo que la pista fija vino a garantizar. */
.rg-sin-estado .rg-hd,.rg-sin-estado .rg-grp-h,.rg-sin-estado .rg-row{
  grid-template-columns:26px 22px 1fr 0 58px 94px 34px 64px}
.rg-sin-estado .rg-hd>:nth-child(4),.rg-sin-estado .rg-grp-h>:nth-child(4),
.rg-sin-estado .rg-row>:nth-child(4){overflow:hidden;visibility:hidden}
/* n62 · «vencido» dejo de ser una etiqueta y es la fecha en la señal roja.
   Juan pidio «rojo y bold», pero SISTEMA-VISUAL-2026 §3 deroga el 700: «mas
   presencia se resuelve con tamaño o color, nunca con peso». 600 es el peso de
   acento que el sistema reserva para la cifra, y el rojo hace el trabajo. */
.rg-fe.venc{color:var(--red);font-weight:600}
/* n61 · el clip, en su propia columna al final. */
.rg-clip{text-align:center}
/* 🧾 el comprobante de pago propio: un botón sin caja, del tamaño del 📎, que
   aparece con la fila (rg-acc ya se muestra al pasar el mouse). */
/* Píldora como .rg-na, con texto: un emoji suelto al lado del clip se leía como otro
   adjunto. Solo aparece en transferencias pagadas. */
.rg-comp{flex:none;border:1px solid var(--line);background:var(--bg);border-radius:var(--radius-sm);padding:1px 5px;font-size:12px;line-height:1.3;color:var(--mut);cursor:pointer;margin-left:6px;vertical-align:middle}
.rg-comp:hover{color:var(--ink);border-color:var(--terra)}
/* ── Los tres niveles de la lista ──────────────────────────────────────────
   Juan, 3-ago: «las tablas no marcan claramente la diferencia entre un titulo,
   un registro in line y un criterio como vencido... todos se confunden».

   La causa, medida: los tres usaban la MISMA grilla, alturas de 28/30/34px y
   tres blancos separados por 2% de luminancia (--soft2 #f4f2ee, --soft #fafafa,
   --card #fff). Peor: la fila alterna (.rg-row.alt) usaba --soft, que es
   EXACTAMENTE el fondo del encabezado de grupo. Una fila par y un titulo de
   grupo eran el mismo color.

   El arreglo no es cambiar los tonos: es dejar de comunicar jerarquia SOLO con
   color. Ahora cada nivel se distingue por tres canales a la vez —espacio,
   tipografia y peso de linea— y el color pasa a ser el ultimo:

     1. ENCABEZADO DE COLUMNA  se aparta. 10px, apagado, sin fondo. Es una
        referencia, no informacion: tiene que desaparecer al leer.
     2. TITULO DE GRUPO        es el ancla. Sale del blanco de la tabla, lleva
        aire arriba y se apoya en una linea gruesa. Es lo que se busca al
        escanear la pantalla.
     3. FILA                   fondo plano y separador fino. Sin zebra: con
        bordes, el rayado solo agrega ruido — y era el que chocaba.
   ──────────────────────────────────────────────────────────────────────── */
/* Registro tampoco usa <table>: sus filas son grillas de divs. Misma fila
   principal, mismo azul. Estaba transparente y era la cabecera más invisible
   de la app. */
.rg-hd{height:30px;background:var(--blue);border-bottom:1px solid var(--line);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);border-radius:10px 10px 0 0}
.rg-hd .r{text-align:right}
.rg-grp{margin:0}
/* El AIRE es el canal que faltaba. Sin separacion entre bloques, ningun tono de
   gris alcanza para decir «acá empieza otra cosa». */
.rg-grp+.rg-grp{margin-top:20px}
.rg-grp-h{height:38px;background:var(--r-banda);border-bottom:2px solid var(--ink);border-top:1px solid var(--line)}
.rg-grp:first-child .rg-grp-h{border-top:0}
.rg-grp-h .t{display:flex;align-items:baseline;gap:8px;min-width:0}
/* 14px/700 contra los 13px/600 de la fila: se lee como titulo, no como un
   renglon mas en negrita. */
.rg-grp-h b{font-size:14px;font-weight:700;white-space:nowrap;letter-spacing:-.01em}
.rg-grp-h .n{font-size:11.5px;color:var(--mut)}
.rg-grp-h .m{text-align:right;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
/* «Vencido» es lo unico urgente de la pantalla y se dice con la señal roja del
   sistema, no con enfasis tipografico: rojo = fuera de rango. */
/* Amarillo tenue, no el rosa pálido de --red-t2 (Juan, 18-ago): «es fatal
   este rojo, ya había pedido no usarlo». Es la única banda de fondo del
   sistema que usaba --red-t2; no aparece en ningún otro lugar del archivo. */
.rg-grp.venc .rg-grp-h{background:var(--amber-t);border-bottom-color:var(--red)}
.rg-grp.venc .rg-grp-h b,.rg-grp.venc .rg-grp-h .m{color:var(--red)}
.rg-row{height:34px;border-bottom:1px solid var(--r-line-fuerte);background:var(--card);cursor:pointer;transition:background .12s ease}
/* El zebra se retira. Usaba --soft, el mismo fondo que tenia el titulo de
   grupo: una fila par y un encabezado se veian iguales. Con separador de 1px el
   rayado no aporta lectura, solo ruido. */
.rg-row.alt{background:var(--card)}
/* El hover deja de pintar el borde de terracota. La terracota es la ACCION; si
   ademas es el hover, lo seleccionado y lo privado, deja de significar algo. */
.rg-row:hover{background:var(--soft)}
.rg-row.sel{background:var(--terra-t);box-shadow:inset 2px 0 0 var(--terra)}
/* PAGO SENSIBLE — el renglon entero se apaga.
   Karina y cualquiera sin `ver_pagos_sensibles` NO recibe estas filas: las corta
   la politica RLS de `pagos` en el servidor, no el CSS. Este gris es para quien
   SI las ve: que a simple vista se distinga lo que el equipo no esta viendo, sin
   dejar de poder leerlo. Por eso --mut sobre --soft2 (4.5:1, sigue legible) y no
   opacity, que apagaria tambien el ojo encendido que es justo la senal. */
.rg-row.priv,.rg-row.priv.alt{background:var(--soft2)}
.rg-row.priv .rg-nm,.rg-row.priv .rg-mt{color:var(--mut);font-weight:500}
.rg-row.priv:hover{background:var(--soft)}
.rg-row.priv:hover .rg-nm,.rg-row.priv:hover .rg-mt{color:var(--ink)}
.rg-row input[type=checkbox]{width:15px;height:15px;cursor:pointer;opacity:.25;transition:opacity .12s ease}
.rg-row:hover input[type=checkbox],.rg-row.sel input[type=checkbox]{opacity:1}
/* Beneficiario y concepto en un renglon: el proveedor solo no se reconoce. */
.rg-nm{min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-nm .c{font-weight:400;color:var(--mut)}
/* Las acciones de fila viven al final y solo al hover: antes eran lo PRIMERO
   que veia el ojo, al 35% de opacidad, tapando el nombre. */
.rg-acc{display:flex;gap:4px;justify-content:flex-end;opacity:0;transition:opacity .12s ease}
.rg-row:hover .rg-acc{opacity:1}
.rg-tags{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Siete pastillas de colores en una fila no comunican siete cosas: comunican
   ruido. Pasan a ser texto en su columna, separadas por punto medio, y el color
   queda SOLO para lo que es plata en riesgo. */
.rg-tag{font-size:12px;font-weight:400;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.rg-tag+.rg-tag::before{content:'·';margin:0 4px;color:var(--line)}
/* Quedo una sola: .venc se fue con n62 y .tarde el 2-sep (ver rgFila). */
.rg-tag.sinfac{color:var(--red);font-weight:600}
/* La casilla que marca el grupo entero. Mismo tamaño que la de la fila para que
   caiga sobre su columna; visible siempre —no solo al pasar el mouse— porque es
   la que se busca cuando hay que sacar diez de una. */
.rg-grp-h input[type=checkbox]{width:15px;height:15px;cursor:pointer}
.rg-mt{font-size:13px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
/* Lo que falta por pagar se ve distinto de un monto ya registrado: es una deuda,
   no un dato historico. El color hace la diferencia; el peso se queda en 700.
   DESIGN.md: «mas presencia se resuelve con tamano o color, nunca con mas peso»
   -- el 800 esta derogado y este lo escribi yo, hoy, sin haber leido el doc. */
.rg-mt.falta{color:var(--terra)}
.rg-fe{font-size:12px;color:var(--mut);text-align:right;font-variant-numeric:tabular-nums}
.rg-bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:11px;padding:11px 14px;border:1px solid var(--ink);border-radius:13px;background:var(--ink);color:var(--bg);margin-top:10px;box-shadow:0 6px 20px rgba(0,0,0,.16)}
.rg-bar b{font-size:14px}
.rg-bar .btn{margin-left:auto}
/* Las dos acciones van juntas a la derecha. Quien empuja es la PRIMERA del par
   —Borrar—; sin este reset, «Marcar» heredaria su propio margin-left:auto y las
   dos quedarian en extremos opuestos de la barra. */
.rg-bar .rg-del~.btn{margin-left:0}
/* Borrar no es la accion de la barra: es la salida. Con el relleno del boton
   primario competiria con «Marcar como pagados», que si es a lo que se viene
   aca. Queda como un contorno — se ve, no llama.
   🔴 Va en `currentColor` y NO en un blanco fijo: .rg-bar es una superficie
   INVERTIDA (`background:var(--ink);color:var(--bg)`), asi que en modo oscuro
   se vuelve clara con texto oscuro. Un contorno blanco desapareceria ahi.
   currentColor hereda el color del texto de la barra y gira con ella sola. */
.rg-bar .rg-del{margin-left:auto;flex:none;padding:0 12px;height:36px;border:1px solid currentColor;
  border-radius:10px;background:transparent;color:inherit;font-family:inherit;font-size:13px;
  font-weight:600;cursor:pointer;opacity:.72;transition:opacity .12s ease}
.rg-bar .rg-del:hover{opacity:1}
/* La ventana de «Pagado». Se apoya en los mismos tokens que los chips finos de
   nivel 2: es un filtro fino y no puede competir con la pestaña de arriba. */
.rg-vent{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 2px}
.rg-vbt{flex:none;padding:0 10px;height:28px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--mut);font-family:inherit;font-size:12px;cursor:pointer}
.rg-vbt:hover{color:var(--ink)}
.rg-vbt.on{border-color:var(--ink);color:var(--ink);font-weight:700}
.rg-vnota{font-size:11.5px;color:var(--mut2)}
/* n67 · el selector de fechas. Mismo alto y radio que el chip de al lado:
   SISTEMA-VISUAL-2026 §3 da 10 para input y el chip vive en la misma fila. */
.rg-vfe{height:28px;padding:0 8px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink);font-family:inherit;font-size:12px}
.rg-opt{font-weight:500;color:var(--mut);text-transform:none;letter-spacing:0}
.rg-sub{font-size:11.5px;font-weight:600;color:var(--mut);display:block;margin-bottom:3px}
.rg-lin-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rg-lin-bt{margin-left:auto;display:flex;gap:5px}
.rg-noinv{flex:none;padding:0 8px;height:34px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--mut2);font-size:11px;cursor:pointer;white-space:nowrap}
.rg-noinv:hover{border-color:var(--mut2);color:var(--ink)}
.rg-lin{display:flex;gap:6px;align-items:center;margin-bottom:5px}
.rg-lin input,.rg-lin select{padding:7px 9px;border:1px solid var(--line);border-radius:9px;font-family:inherit;font-size:12.5px;background:var(--bg);color:var(--ink);min-width:0}
.rg-lin .d{flex:1;min-width:0}
.rg-lin .q{width:66px;text-align:right}
.rg-lin .p{width:88px;text-align:right}
.rg-lin .x{flex:none;border:0;background:transparent;color:var(--mut);cursor:pointer;font-size:15px;padding:0 4px}
.rg-lin .x:hover{color:var(--red)}
.rg-cuadre{font-size:12px;margin-top:6px;padding:7px 10px;border-radius:9px;background:var(--soft);color:var(--mut)}
.rg-cuadre.ok{background:#eaf6ec;color:#1c6b2c}
.rg-cuadre.mal{background:#fdece9;color:var(--red);font-weight:600}
@media(max-width:640px){
  .rg-mt{min-width:70px;font-size:13px}
  .rg-fe{display:none}
  .rg-lin{flex-wrap:wrap}
  .rg-lin .d{flex:1 1 100%}

  /* M9 y M10 NO van acá, y vale explicar por qué para que nadie los vuelva a
     agregar leyendo el documento.
     El 1-ago se escribieron estas dos reglas y el test las tumbó: en Registro,
     `rgRender()` corta antes con `if(ccIsMobile()){ … return; }` —que es
     `max-width:1024px`— y pinta la pantalla de captura de fotos, no la lista.
     Ni `.rg-row` ni `.rg-seg` llegan a existir bajo 1024px, así que una regla
     dentro de este @media de 640 nunca los alcanza.
     El documento auditó el CSS sin ejecutar la app: describió un aplastamiento
     y un desbordamiento que el navegador nunca puede producir. Ver la nota de
     M9/M10 en DASHBOARD DESIGN SYSTEM.md. */
}


/* El ojo ya no vive en el bloque de acciones del final: ocupa su propia columna
   de 22px al principio de la fila. Y no es un boton: es un ojo. Sin fondo, sin
   borde, sin ambar. La grafica ya la lleva el glifo — meterlo en una pastilla de
   color lo convierte en una alerta, y esto no es una alerta.
   · Pago visible para el equipo → no se ve. Aparece en gris al pasar el mouse
     por la fila, para poder ocultarlo.
   · Pago oculto → el ojo esta SIEMPRE, gris y tachado con una raya inclinada.
     Tachado, no encendido: lo que dice es «esto NO se ve», no «esto es especial». */
.rg-ojo{position:relative;width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex:none;padding:0;border:0;background:none;font-size:12px;line-height:1;cursor:pointer;opacity:0;filter:grayscale(1);transition:opacity .12s ease}
.rg-row:hover .rg-ojo{opacity:.5}
.rg-ojo:hover{opacity:.9}
.rg-ojo.on,.rg-row:hover .rg-ojo.on{opacity:.8}
.rg-ojo.on:hover{opacity:1}
/* La raya. Va sobre el glifo, del mismo gris que el texto apagado de la fila. */
.rg-ojo.on::after{content:'';position:absolute;left:1px;right:1px;top:50%;height:1px;background:var(--mut);transform:rotate(-40deg)}
/* «Privado» lo dice el ojo encendido, que ya esta en la fila. Un borde de
   terracota compite con lo seleccionado y con la accion. */

.rg-mas{flex:none;height:34px;padding:0 14px;border:0;border-radius:10px;background:var(--terra);color:var(--fab-ink);font-family:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.rg-mas:hover{filter:brightness(1.12)}
.rg-mas:active{transform:translateY(1px)}
/* 15-sep, Juan sobre Conciliación bancaria: «este botón debe ser igual de
   grande que el de registrar egreso y en el mismo color». Mismo tamaño sí
   — .rg-mas-alt hereda todo de .rg-mas. El mismo COLOR no: el terracota es
   la ÚNICA acción primaria de la pantalla (regla A6, 17-ago — «un icono
   solo no es acción primaria», y por extensión dos botones del MISMO color
   tampoco se leen como dos acciones distintas, se leen como una sola
   repetida). Sólido y del mismo alto, pero en --ink: se ve tan «de verdad»
   como el rojo sin competir con él. */
.rg-mas-alt{background:var(--ink);color:var(--bg)}
.rg-mas-alt:hover{filter:brightness(1.3)}
/* Contador de pestaña. GRIS, no terracota ni rojo (Juan, 3-ago: «rojo
   perturba»): cinco contadores encendidos todo el dia en rojo dejan de
   leerse en una semana. El gris informa sin gritar. */
.rg-n{display:inline-block;min-width:16px;padding:0 4px;border-radius:7px;background:var(--line);color:var(--ink);font-size:10px;font-weight:700;line-height:15px;text-align:center;margin-left:4px}
.rg-seg button.on .rg-n{background:var(--bg);color:var(--ink)}
.rg-nota{font-size:12.5px;line-height:1.55;background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:10px 13px;margin-bottom:12px}
.rg-q-alc{color:var(--mut)}
/* Aviso de conteo, no error: el número puede ser de un comprobante que no sigue
   el formato del SRI y ahí quien manda es el papel. */
.rg-num-ojo{color:var(--mut)}
/* El pie del candado del conteo: qué conteo estorba y qué SÍ se puede guardar.
   Es texto, no acción — a quien le llega este mensaje no le corresponde
   resolverlo, así que un botón en terracota estaría prometiendo de más. */
.rg-reabrir-n{display:block;margin-top:8px;font-size:11.5px;color:var(--mut);line-height:1.5}
/* Mercadería sin su pago. La fila entera se lee de izquierda a derecha como una
   frase: esto entró, esto se pagó, ¿son lo mismo? */
.hu-h{font-size:13px;font-weight:700;margin:2px 0 6px}
.hu-n{font-size:12px;color:var(--mut);line-height:1.55;margin-bottom:12px}
.hu-f{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center;
  padding:10px 12px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px}
.hu-lado{min-width:0}
.hu-t{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hu-s{font-size:11.5px;color:var(--mut);margin-top:2px}
.hu-mid{display:flex;align-items:center;gap:8px;min-width:0}
.hu-fl{color:var(--mut);flex:none}
.hu-pill{display:inline-block;font-size:10.5px;font-weight:600;padding:1px 8px;
  border-radius:999px;margin-left:6px;vertical-align:1px}
.hu-ok{background:var(--green-t);color:var(--green)}
.hu-dud{background:var(--amber-t);color:var(--amber)}
.hu-b{height:30px;padding:0 14px;border-radius:9px;border:1px solid var(--terra);
  background:var(--terra);color:var(--bg);font:inherit;font-size:12px;font-weight:600;cursor:pointer;flex:none}
.hu-b:hover{filter:brightness(1.08)}
.hu-b[disabled]{opacity:.5;cursor:default}
.hu-sin{font-size:11.5px;color:var(--mut)}
.hu-mas{margin-top:10px}
/* En teléfono la fila de tres columnas dejaba los nombres en «ArcaContinent…» y
   se comía el monto, que es justo el dato con el que se decide. Va después de la
   regla base a propósito: declarada antes, la cascada la ignora.
   Apilada, la fila se lee de arriba abajo como lo que es —entró esto, se pagó
   esto, ¿son lo mismo?— y el botón ocupa el ancho, que en el pulgar importa. */
@media(max-width:640px){
  .hu-f{grid-template-columns:1fr;gap:8px}
  .hu-t{white-space:normal}
  .hu-mid{align-items:flex-start;padding-left:2px}
  .hu-fl{transform:rotate(90deg);line-height:1}
  .hu-b{width:100%;height:36px}
  .hu-pill{margin-left:0;margin-top:4px}
}
/* Los contactos parecidos: cada uno con su motivo y sus pagos, que es el dato
   que decide cuál es el bueno. */
.ct-dup-b{display:block;width:100%;text-align:left;margin-top:8px;padding:8px 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.ct-dup-b:hover{border-color:var(--ink)}
.ct-dup-b span{display:block;font-weight:400;font-size:11.5px;color:var(--mut);margin-top:4px}
.ct-dup-n{font-size:11.5px;color:var(--mut);margin-top:8px;line-height:1.5}
/* «Buscar en todo el registro» aparece justo donde alguien no encontró lo que
   buscaba. No es un toggle en la barra: no ocupa lugar mientras no hace falta. */
.rg-ampliar{margin-top:12px;height:32px;padding:0 16px;border-radius:9px;
  border:1px solid var(--terra);background:transparent;color:var(--terra);
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.rg-ampliar:hover{background:var(--terra-t)}
/* Pestañas que son un icono. El cuadrado las mantiene del mismo alto que las
   de texto para que la fila no se descuadre. */
.rg-seg .rg-ico{display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-width:40px;padding:0 12px}
.rg-seg .rg-ico svg{width:17px;height:17px;display:block}
/* El botón de crear: solo el signo, en terracota. */
.rg-mas-i{width:40px;padding:0;font-size:20px;line-height:1;font-weight:400}
/* Corte transversal de «Pendiente»: proveedores de mercaderia contra todo lo
   demas. Va en su propio renglon y no dentro de .rg-top porque NO es un estado
   mas — es otra pregunta sobre la misma lista. */
.rg-cls{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
 /* Los rotulos van en OLIVO sobre su tinte (Juan, 3-ago). Dos correcciones en
    una:

    1. COLOR. El olivo es el color de estado del sistema —foco de teclado,
       switch «Ver»— y estos rotulos son exactamente eso: nadie los toca. Deja
       el terracota libre para la accion.
    2. FORMA. Con el mismo tamaño y peso que los botones, «TIPO» se leia como
       una opcion mas de la tira y el ojo no encontraba donde empieza cada
       grupo. Un rotulo tiene que PARECER rotulo: mas chico, mas apretado, y
       sobre una pastilla que lo saca del renglon de opciones.

    Contraste medido sobre el tinte: 4.92:1 en claro y 4.75:1 en oscuro. AA en
    los dos. Ningun hex nuevo: --olive y --olive-t ya existian. */
.rg-cls .rg-cls-l{flex:none;font-size:10px;font-weight:700;color:var(--olive);background:var(--olive-t);border-radius:6px;padding:4px 8px;text-transform:uppercase;letter-spacing:.06em;line-height:1}
/* Un filete entre los dos ejes. La pastilla sola no alcanzaba: sin una linea
   que corte, ocho botones seguidos se leen como una sola tira por mucho que el
   rotulo este pintado. */
.rg-cls .rg-cls-sep{flex:none;width:1px;height:16px;background:var(--line);margin:0 4px}
/* Los filtros de segundo nivel NO son pastillas y NO son terracota (Juan,
   3-ago: «es demasiado terracota»). El terracota es el color de la accion —lo
   gastan el boton de registrar y la pestaña activa de arriba— y repetirlo en
   ocho botones finos lo deja sin significado. Aca el estado activo se dice con
   tipografia: el texto se enciende y se subraya. Ademas los separa a la vista
   de las pestañas de arriba, que era la otra mitad del pedido. */
.rg-fina{display:inline-flex;align-items:center;gap:4px}
.rg-fina button{border:0;background:transparent;padding:0 4px;height:28px;font-family:inherit;font-size:12px;font-weight:500;color:var(--mut);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent}
.rg-fina button:hover{color:var(--ink)}
.rg-fina button.on{color:var(--ink);font-weight:700;border-bottom-color:var(--ink)}
/* El foco se ve: quitarlo sin reemplazo deja la barra inservible con teclado. */
.rg-fina button:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}

.rg-na{flex:none;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:2px 6px;font-size:10px;font-weight:700;color:var(--mut);cursor:pointer;opacity:.5}
.rg-na:hover{opacity:1;border-color:var(--terra)}
.rg-na.on{opacity:1;background:var(--soft);color:var(--ink);border-color:var(--mut)}

.rg-lin .rg-un{flex:none;font-size:11.5px;color:var(--mut);white-space:nowrap;padding:0 2px}
.rg-lin .rg-eq{flex:none;font-size:13px;color:var(--terra);font-weight:700;white-space:nowrap;padding:2px 8px;border-radius:6px;background:var(--state-danger-soft)}
@media(max-width:640px){ .rg-lin .rg-eq{flex:1 1 100%;text-align:right} }

/* El bloque de mercaderia se distingue del resto del formulario: lo que esta
   aqui adentro toca el INVENTARIO, no solo el pago. */
.rg-merc{border:1px solid var(--olive);border-left:3px solid var(--olive);border-radius:12px;
  padding:11px 13px 12px;margin:8px 0 10px;background:rgba(96,108,56,.055)}
.rg-merc-t{font-size:11px;font-weight:700;color:var(--olive);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:9px}
.rg-merc-g{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rg-merc-g>div{flex:1;min-width:170px;display:flex;flex-direction:column}
.rg-merc .selin{width:100%}
.rg-merc .pg-vende{margin:2px 0 0}
[data-theme="dark"] .rg-merc{background:rgba(143,160,90,.09)}
@media(max-width:640px){ .rg-merc-g>div{flex:1 1 100%} }

/* Los chips viven sobre el fondo verde del bloque de mercaderia: con el estilo
   general se perdian. Aqui van en blanco con borde olivo y un + al frente, para
   que se lean como BOTONES que agregan una linea, no como etiquetas. */
.rg-merc .pg-vende{font-size:12.5px;line-height:2.1}
.rg-merc .pg-ins{background:#fff;border:1.5px solid var(--olive);color:var(--olive);
  border-radius:9px;padding:5px 11px 5px 8px;font-size:12.5px;font-weight:700;
  margin:3px 6px 3px 0;box-shadow:0 1px 2px rgba(96,108,56,.16)}
.rg-merc .pg-ins::before{content:'+';font-weight:700;margin-right:5px;opacity:.75}
.rg-merc .pg-ins:hover{background:var(--olive);color:#fff;box-shadow:0 2px 6px rgba(96,108,56,.3)}
.rg-merc .pg-ins:active{transform:translateY(1px)}
[data-theme="dark"] .rg-merc .pg-ins{background:var(--card);border-color:var(--olive);color:var(--olive)}
[data-theme="dark"] .rg-merc .pg-ins:hover{background:var(--olive);color:var(--bg)}

/* El tipo de egreso es una NOTA, no un campo: sin recuadro, sin fondo. */
.rg-nota-in{font-size:12px;color:var(--mut);line-height:1.6;margin-top:5px}
.rg-nota-in.ok{color:var(--ink)}
.rg-nota-in b{font-weight:700}
.rg-priv{color:var(--terra)}
.rg-quien-ve{color:var(--mut)}
.rg-cat2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:640px){.rg-cat2{grid-template-columns:1fr}}
.rg-cambiar{border:0;background:transparent;color:var(--terra);font-family:inherit;font-size:11.5px;
  font-weight:600;cursor:pointer;text-decoration:underline;padding:0 2px}
/* Sugerencia de proveedor a partir de un insumo: consulta, no campo. */
/* margin-top 8: pegada al campo, la nota se lee como parte de él y no como el
   resultado de haberlo llenado. */
.rg-quien{display:none;margin-top:8px;font-size:12px;line-height:2}
.rg-quien-l{color:var(--mut);margin-right:3px}
.rg-quien-b{border:1px solid var(--terra);background:var(--amber-t);color:var(--ink);border-radius:9px;
  padding:4px 10px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;margin:0 5px 4px 0}
.rg-quien-b span{font-weight:500;color:var(--mut);font-size:11px}
.rg-quien-b:hover{background:var(--terra);color:#fff}
.rg-quien-b:hover span{color:rgba(255,255,255,.8)}
.rg-lin-bt2{margin-top:7px;display:flex;gap:7px;flex-wrap:wrap}
/* «Comprobante» y su zona de arrastre, en una sola fila (15-sep, Juan: «estas
   dos pastillas podrían ser una sola para no ocupar dos renglones»). Con
   flex-wrap, si no cabe en angosto la zona de arrastre baja sola a su
   propia fila — nunca scroll horizontal. */
#rg_arch_wrap{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:12px}
#rg_arch_wrap>label{flex:none;white-space:nowrap}
#rg_arch_wrap .rg-drop{flex:1 1 230px}
.rg-drop{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 11px;
  border:1px dashed var(--line);border-radius:10px;background:var(--soft)}
.rg-drop.on{border-color:var(--g-blue);background:var(--soft2)}
.rg-drop-t{font-size:11.5px;color:var(--mut)}
.rg-arch{display:flex;align-items:center;gap:8px;margin-top:6px;padding:7px 10px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);font-size:12.5px}
.rg-arch .cl{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;
  border-radius:999px;background:var(--soft2);color:var(--mut)}
.rg-arch .cl.xml{background:#e3f0e6;color:#2c6b3c}
.rg-arch .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-arch .x{background:none;border:none;color:var(--mut);cursor:pointer;font-size:15px;line-height:1;padding:0 3px}
.rg-arch a{color:var(--g-blue);text-decoration:none;font-size:11.5px}
/* El ROL dice QUE es el archivo: la factura del proveedor o el comprobante con el
   que el banco confirma que la plata salio. Son dos documentos distintos que
   viven en el mismo renglon, y hasta el 14-ago solo se podia guardar el primero. */
.rg-arch .rol{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;
  border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--mut);
  cursor:pointer;white-space:nowrap;font-family:inherit}
.rg-arch .rol.banco{background:var(--soft2);border-color:var(--g-blue);color:var(--g-blue)}
.rg-arch .rol.fijo{cursor:default}

.rg-mini{width:46px;height:46px;object-fit:cover;border-radius:8px;border:1px solid var(--line);
  background:var(--soft);flex:0 0 auto}
/* 15-sep, Juan: primero «esta enorme barra de búsqueda se achica» — con
   flex:1 tomaba TODO el resto de .rg-top. Luego, ya achicada a un tope fijo:
   «la barra puede ocupar el ancho de la pantalla sobrante... de manera
   responsive» — un tope fijo la dejaba corta en una pantalla ancha con
   espacio de sobra. flex:1 sigue tomando el sobrante como siempre, pero con
   un techo: no vuelve a estirarse a lo enorme aunque el sobrante sea mucho. */
.rg-q{flex:1;max-width:420px;min-width:150px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;
  font-family:inherit;font-size:12.5px;background:var(--card);color:var(--ink)}
.rg-q:focus{border-color:var(--g-blue)}
.rg-parcial-link{background:none;border:none;padding:0;font-family:inherit;font-size:11.5px;
  color:var(--mut);text-decoration:underline;cursor:pointer}
.rg-parcial-link:hover{color:var(--ink)}

/* «Sale de»: tres botones, no un desplegable. El color viene del TIPO de cuenta
   —banco negro de marca, efectivo oliva— no de una lista de nombres.
   Ninguno es terracota: elegir de dónde sale la plata no cambia el mundo,
   cambia lo que se va a guardar. Eso es un campo, no una acción. */
/* «Estado» con halo de color. Juan lo pidió dos veces: «inserta un halo rojo
   junto a por pagar y cuando elijo pagado que salga un halo verde, necesito que
   sea más visual ese campo».
   Es el único campo del formulario que dice si la plata YA SALIÓ, y hasta ahora
   se veía igual que «Notas». Rojo y verde son las señales del sistema —fuera de
   rango y en orden— y no compiten con terracota, que es solo acción: un halo no
   se puede tocar, así que no promete nada.
   El halo va sobre el <select>, no sobre la fila: lo que importa es el valor
   elegido, y ahí es donde está el ojo al elegirlo. */
/* El halo usa los TINTES de la paleta (--red-t2, --green-t), no un rgba a mano
   ni color-mix: los dos tintes ya están definidos para tema claro y oscuro, así
   que el halo se adapta solo y no se suma a la deuda de colores sueltos. */
/* ── Encabezado del formulario: estado + visibilidad ──
   Juan, 3-ago: «en vez de jugar con los colores del recuadro que sea simplemente
   dos botones que se eligen… el que no se elige se apaga en gris. El que se
   marca que tenga un círculo o rojo o verde según corresponda, con un halo».
   El halo sobre un <select> teñía el campo entero y no se leía como una
   elección; dos botones sí, porque se ve al mismo tiempo lo elegido y lo otro. */
/* `flex-direction:row` explícito: .field impone `column` a todos sus hijos y sin
   esto el renglón se apila —los botones arriba, el ojo debajo— y con
   `align-items:center` queda todo flotando en el medio de la pantalla.
   Y el contenedor NO se llama .rg-seg: esa clase ya es la píldora de las
   pestañas de Registro, con su borde redondeado y su fondo negro para el
   activo. Reusar el nombre hacía que los dos botones de estado heredaran el
   aspecto de una pestaña. */
.rg-cab{display:flex;flex-direction:row;align-items:center;gap:12px;
  flex-wrap:wrap;padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--line);
  padding-right:36px}
/* El título vive ahora DENTRO de .rg-cab (15-sep): hereda el margen de
   `.modal h3` (0 0 16px) y descuadra la fila entera si no se lo quita, y el
   padding-right ya lo da .rg-cab — duplicarlo en el h3 solo abre un hueco de más. */
/* flex:none, no flex:1 — si el título creciera para llenar la fila competiría
   por el mismo espacio libre que el margin-left:auto del ojo, y el ojo
   perdería la separación que lo distingue de ser «una tercera opción». El
   título se queda del ancho de su texto; el hueco libre sigue siendo del ojo. */
.rg-cab h3{margin:0;padding-right:0;font-size:16px;flex:none}
.rg-estados{display:flex;gap:8px;flex:none;align-items:center}
.rg-est-n{font-size:11.5px;color:var(--mut);margin-left:4px;white-space:nowrap}
/* El ojo al otro extremo: es otra pregunta —quién puede ver esto— y pegado a
   los botones de estado se leería como una tercera opción del mismo grupo. */
.rg-cab .rg-ojo-f{margin-left:auto}
.rg-est{display:flex;align-items:center;gap:8px;height:36px;padding:0 16px;
  border-radius:9px;border:1px solid var(--line);background:var(--card);
  color:var(--mut);font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:border-color .15s,box-shadow .15s,color .15s}
.rg-est:hover:not(.on){border-color:var(--ink);color:var(--ink)}
/* El punto va SIEMPRE, encendido o no: si apareciera solo al elegir, el botón
   apagado cambiaría de ancho al hacer clic y los dos bailarían. */
.rg-est::before{content:'';width:10px;height:10px;border-radius:999px;
  border:1.5px solid currentColor;background:transparent;flex:none}
.rg-est.on{color:var(--ink)}
.rg-est.on.no{border-color:var(--red);box-shadow:0 0 0 3px var(--red-t2);color:var(--red)}
.rg-est.on.si{border-color:var(--green);box-shadow:0 0 0 3px var(--green-t);color:var(--green)}
.rg-est.on::before{background:currentColor;border-color:currentColor}
.rg-est:disabled{cursor:default;opacity:.55}
/* El ojo: encendido = este pago solo lo ve gerencia. Apagado es lo normal, así
   que apagado no grita — solo el estado excepcional pide atención. */
.rg-ojo-f{min-width:36px;height:36px;padding:0 12px;border-radius:9px;
  border:1px solid var(--line);gap:8px;
  background:var(--card);color:var(--mut);cursor:pointer;flex:none;
  font:inherit;font-size:12.5px;font-weight:600;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,color .15s,background .15s}
.rg-ojo-f:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.rg-ojo-f.on{border-color:var(--seg-on);color:var(--bg);background:var(--seg-on)}
.rg-ojo-f:disabled{cursor:default;opacity:.55}
.rg-ojo-f svg{width:18px;height:18px;display:block}
/* Los tres montos, uno junto a otro. Subtotal + IVA = Total se comprueba de un
   vistazo cuando están en la misma línea; apilados hay que recordar el de
   arriba. */
/* Los labels van en BLOCK y los inputs al 100%. `.field label` no los alcanza
   —ahora son nietos, no hijos— así que quedaban `inline`: «IVA $» es corto y
   cabía al lado de su input, «SUBTOTAL sin IVA» no y se iba arriba. Resultado:
   tres campos a tres alturas distintas, que es justo lo que se ve mal cuando el
   sentido de ponerlos juntos era poder compararlos. */
/* 8-sep · Cinco columnas, no cuatro: entra Descuento. Con cuatro, el Total se caia a
   una segunda fila y rompia la regla del plano —los montos van todos en linea, a la
   misma altura y del mismo ancho—, que es justo lo que test_forma vigila. */
.rg-montos{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:end}
.rg-montos>div{min-width:0;display:flex;flex-direction:column;gap:5px}
.rg-montos label{display:block;font-size:11.5px;color:var(--mut);font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.rg-montos input{width:100%;box-sizing:border-box}
/* El total es el número que se compara con el papel: se lee sin buscarlo. */
.rg-tot-in{background:var(--soft);font-weight:700}
/* 4 cajas en 2x2 en vez de 3 en 2+1: con 4 no hay forma de que la ultima
   quede sola ocupando las dos columnas sin dejar un hueco vacio al lado. */
@media(max-width:640px){.rg-montos{grid-template-columns:1fr 1fr}}
/* El aviso al cambiarle el monto a un pago que ya salió.
   Ámbar y no rojo a propósito: no es un error ni un bloqueo, es un alto. Se
   puede seguir — hay que decir por qué. En rojo se lee como «no lo hagas», y
   entonces la gente deja de corregir cosas que HAY que corregir.
   Hereda `flex-direction:column` de .field, que es justo lo que hace falta acá:
   texto, etiqueta, campo y nota, uno debajo del otro. */
.rg-mtaviso{background:var(--amber-t);border:1px solid var(--amber);border-radius:10px;
  padding:12px;gap:6px}
.rg-mt-t{font-size:12.5px;line-height:1.55}
.rg-mt-n{font-size:11.5px;color:var(--mut);line-height:1.5}
.rg-mtaviso input{width:100%;box-sizing:border-box}
/* Una fecha no necesita 382 px. Juan, 3-ago: «el box la fecha del documento no
   necesita ser tan grande». El campo sigue ocupando su celda —si no, el de al
   lado se corre— pero el control se queda del tamaño de lo que muestra. */
.modal .rg-chico input,.modal input.rg-frec-in{max-width:192px}

.rg-estado{transition:box-shadow .15s,border-color .15s}
.rg-estado.no{border-color:var(--red);box-shadow:0 0 0 3px var(--red-t2)}
.rg-estado.si{border-color:var(--green);box-shadow:0 0 0 3px var(--green-t)}
/* El texto también, no solo el borde: un halo se pierde entre campos y el
   daltonismo rojo-verde es el más común que hay. La palabra ya distingue
   («Por pagar» vs «Pagado»); el color la subraya, no la sustituye. */
.rg-estado.no{color:var(--red);font-weight:600}
.rg-estado.si{color:var(--green);font-weight:600}
/* Las tres cuentas en UN renglón. Juan, 3-ago: «estos tres botones pueden
   compartir el mismo renglón en vez de 2». Con `flex-basis:auto` cada botón
   pedía el ancho de su texto, «Caja Mantenimiento» se llevaba media fila y
   «Cuenta Corriente» caía sola abajo ocupando el ancho entero — se veía como si
   fuera otra cosa, no la tercera opción de lo mismo. Con basis 0 se reparten
   por igual; el min-width deja que envuelvan solo si de verdad no caben. */
.rg-fuentes{display:flex;gap:6px;flex-wrap:wrap}
.rg-fu{flex:1 1 0;min-width:84px;height:34px;padding:0 10px;border-radius:9px;
  overflow:hidden;text-overflow:ellipsis;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s}
.rg-fu:hover:not(:disabled){border-color:var(--ink)}
/* En el teléfono los tres no caben con su nombre entero: 358 px entre tres son
   115 y «Caja Mantenimiento» pide 150. Se apilan de a dos antes que cortarse —
   una cuenta a medio nombre es lo que no puede pasar justo en el campo que
   decide de dónde sale la plata. Va DESPUÉS de la regla base: si va antes, el
   min-width de 84 la pisa por orden de cascada, no por especificidad. */
@media(max-width:640px){.rg-fu{min-width:144px}}
/* El texto del botón activo va en --bg, no en un #fff a mano: --bg se invierte
   con el tema (casi blanco en claro, casi negro en oscuro), así que el contraste
   se mantiene sobre el oliva —que en oscuro aclara a #8fa05a— sin una regla
   aparte para cada tema. */
.rg-fu.on.bco{background:var(--seg-on);border-color:var(--seg-on);color:var(--bg)}
.rg-fu.on.caja{background:var(--olive);border-color:var(--olive);color:var(--bg)}
/* Sin scope, una sola cuenta posible: se muestra cuál es y no se deja tocar.
   Esconderla sería peor — quien registra tiene derecho a saber de dónde sale. */
.rg-fu:disabled{cursor:default;opacity:.75}
.rg-fu:disabled:not(.on){opacity:.4}
.rg-row.anul{opacity:.55}
.rg-row.anul .rg-nm{text-decoration:line-through}
/* Un borrado no se puede abrir: sin cursor de mano y sin el fondo del hover, que
   son las dos cosas que prometen que algo va a pasar al hacer clic. */
.rg-row.borrada{cursor:default;height:auto;padding-top:6px;padding-bottom:6px}
.rg-row.borrada:hover{background:transparent}
/* El motivo, en su propio renglón y SIN tachar: es lo único de esta fila que
   sigue siendo verdad. */
.rg-row.borrada .rg-nm{display:block;text-decoration:none;white-space:normal}
.rg-row.borrada .rg-nm .bmot{display:block;margin-top:2px;font-size:11.5px;font-style:italic}

#rg_lineas_ins{margin-top:8px}
#rg_lineas_lib:not(:empty){margin-top:9px}

/* El punto rojo se fue de las pestañas. Cuatro puntos a la vez —sin factura,
   sin detalle, con saldo, por registrar— no son cuatro alertas: son ninguna, y
   ademas no distinguen un tramite pendiente de plata parada hace cinco dias.
   La alerta vive ahora en #rg_resumen, con palabras y con un camino. */
.rg-nota .rg-mal{color:var(--red)}
.rg-nota .rg-mut{color:var(--mut)}

.rg-lin select.u{flex:none;width:auto;min-width:78px;max-width:130px;font-size:12px;padding:7px 6px}
.rg-lin select.u:disabled{opacity:.6}

/* ===== Cuenta en · el mes del Flujo (Tanda B, 5-ago) ===== */
/* Un gasto movido de mes cambia el Flujo de DOS meses a la vez. Si el
   desplegable se ve igual esté como esté, el movimiento queda escondido. */
#rg_mesflujo.movido{border-color:var(--terra);background:color-mix(in srgb,var(--terra) 8%,transparent);font-weight:600}
/* La pregunta va DEBAJO del campo, no detras de un icono: es la unica
   forma de que se lea sin buscarla. Regla del MD: las notas de «de que
   se trata este dato» van inline, en uno o dos renglones. */
.rg-mf-q{display:block;margin-top:4px;font-size:10px;line-height:1.25;color:var(--mut2)}

/* ============================================================
   REPORTE DE CFO · pantalla Flujo, modo Reporte   (5-ago-2026)
   Sistema de diseno: borde primero, sombra despues. Cero terracota
   -no hay ninguna accion en esta pantalla, solo lectura-. El estado
   se dice con tipografia y con el color de la marca de dato, nunca
   con un bloque de color solido (DESIGN.md > Colors > Accion).
   ============================================================ */
.rp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.rp-nav{display:inline-flex;align-items:center;gap:8px}
.rp-nav button{width:30px;height:30px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--ink);font-family:inherit;font-size:14px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.rp-nav button:hover{border-color:var(--mut2)}
.rp-nav button[disabled]{opacity:.35;cursor:default}
.rp-mes{font-size:13px;font-weight:700;color:var(--ink);min-width:112px;text-align:center;text-transform:capitalize}

/* Hero: el margen del mes contra la meta */
.rp-hero{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:12px}
.rp-hero-l{font-size:11.5px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.rp-hero-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:6px}
.rp-hero-v{font-size:26px;font-weight:700;letter-spacing:-.6px;font-variant-numeric:tabular-nums;line-height:1.05}
.rp-hero-meta{font-size:12.5px;color:var(--mut)}
.rp-hero-gap{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.rp-hero-sub{font-size:12.5px;color:var(--mut);margin-top:10px;line-height:1.5}
.rp-hero-sub b{color:var(--ink);font-weight:700}

/* Barra de avance contra meta / presupuesto */
.rp-bar{position:relative;height:8px;border-radius:999px;background:var(--soft2);overflow:hidden;margin-top:12px}
.rp-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;display:block}
.rp-bar-mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);opacity:.55;border-radius:2px}

.rp-grid{display:grid;grid-template-columns:1fr 340px;gap:12px;margin-bottom:12px;align-items:start}
.rp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;align-items:start}
.rp-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.rp-h{font-size:11.5px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px;
  display:flex;align-items:center;justify-content:space-between;gap:8px}

/* La cascada */
.rp-casc{display:flex;flex-direction:column}
.rp-cl{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.rp-cl:last-child{border-bottom:0}
.rp-cl span:first-child{font-size:13px;font-weight:500;color:var(--ink)}
.rp-cl .v{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rp-cl.res{border-top:1px solid var(--line);margin-top:2px}
.rp-cl.res span:first-child{font-weight:700}
.rp-cl.res .v{font-size:15px}
.rp-cl.mut span:first-child,.rp-cl.mut .v{color:var(--mut);font-weight:500}
.rp-d{font-size:11.5px;color:var(--mut);font-weight:500;font-variant-numeric:tabular-nums;margin-left:8px}

/* Presupuesto */
.rp-pb{padding:12px 0;border-bottom:1px solid var(--line)}
.rp-pb:last-child{border-bottom:0}
.rp-pb-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rp-pb-n{font-size:13px;font-weight:600;color:var(--ink)}
.rp-pb-n em{font-style:normal;font-size:10px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;margin-left:6px}
.rp-pb-v{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.rp-pb-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;font-size:11.5px;color:var(--mut)}
.rp-pb-f b{font-variant-numeric:tabular-nums}

/* Senales */
.rp-sen{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.rp-sen:last-child{border-bottom:0}
.rp-dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;margin-top:6px}
.rp-sen p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink)}
.rp-sen small{display:block;font-size:10px;font-weight:700;color:var(--mut2);text-transform:uppercase;letter-spacing:.04em;margin-top:4px}

/* Movimientos */
.rp-mv{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.rp-mv:last-child{border-bottom:0}
.rp-mv-n{flex:1;min-width:0}
.rp-mv-n b{display:block;font-size:12.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-mv-n small{font-size:10.5px;color:var(--mut)}
.rp-mv-v{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.rp-mv-v small{display:block;font-size:10.5px;font-weight:500;color:var(--mut)}
.rp-spark{width:52px;height:18px;flex:0 0 52px}

.rp-note{font-size:11.5px;color:var(--mut);line-height:1.55;margin-top:14px}
.rp-note b{color:var(--ink)}
.rp-up{color:var(--green)} .rp-dn{color:var(--red)}

@media (max-width:900px){
  .rp-grid,.rp-grid2{grid-template-columns:1fr}
  .rp-hero-v{font-size:22px}
  .rp-mes{min-width:96px;font-size:12.5px}
}

/* ===== EQUIPO · fichas del personal (tkp*) =====
   Una ficha por persona. El APODO manda: es como se llaman en el piso
   (decisión de Juan, 6-ago). El nombre legal vive en la ficha y sale
   solo para certificados. */
.tkp-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
/* Mismo estilo que .rg-q (Registro) — Juan, 18-ago: «las barras de búsqueda
   siempre del mismo estilo», no una por pantalla. */
/* Chica y a la derecha del renglón (Juan, 20-ago) — antes crecía para llenar
   el espacio sobrante; el margin-left:auto la empuja al borde sin importar
   cuánto midan los chips de al lado. */
.tkp-q{flex:0 1 200px;min-width:120px;margin-left:auto;padding:7px 11px;border:1px solid var(--line);border-radius:999px;
  font-family:inherit;font-size:12.5px;background:var(--card);color:var(--ink)}
.tkp-q:focus{border-color:var(--g-blue)}
.tkp-fil{display:flex;gap:8px;flex-wrap:wrap}
/* Aire entre la barra de arriba y la tabla — quedaban pegadas (Juan, 20-ago). */
#rbody{margin-top:14px}
.tkp-fchip{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--mut);font-size:12.5px;cursor:pointer;white-space:nowrap;transition:.12s}
.tkp-fchip:hover{border-color:var(--mut2)}
.tkp-fchip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tkp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:10px}
.tkp-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;
  cursor:pointer;transition:.12s;min-width:0}
.tkp-card:hover{border-color:var(--mut2);transform:translateY(-1px)}
.tkp-card.off{opacity:.5}
.tkp-off{opacity:.5}
#rbody tr[data-tkp]{cursor:pointer}
.tkp-h{display:flex;align-items:baseline;gap:8px;min-width:0}
/* 13px, no 16 — Juan, 21-ago: «no tiene un peso visual correcto... no tengo
   problema que quede en bold pero el tamaño es muy grande». El bold se queda,
   el tamaño baja al de cualquier otra celda de la tabla. La ficha (tkp-dh) la
   pisa aparte a 21px, así que esto solo achica la columna de la tabla. */
.tkp-ap{font-size:13px;font-weight:650;color:var(--ink);letter-spacing:-.01em}
.tkp-ar{font-size:11.5px;color:var(--mut2);text-transform:capitalize}
.tkp-rol{font-size:12.5px;color:var(--mut);margin-top:4px}
.tkp-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.tkp-t{font-size:10.5px;padding:4px 8px;border-radius:6px;background:var(--soft);color:var(--mut);white-space:nowrap}
.tkp-t.pri{background:var(--soft2);color:var(--ink);font-weight:600}
.tkp-t.res{border:1px dashed var(--mut2)}
.tkp-b{display:inline-block;font-size:10.5px;padding:4px 8px;border-radius:6px;margin-left:4px;vertical-align:middle}
.tkp-b.enc{background:var(--soft2);color:var(--mut)}
.tkp-b.jef{background:var(--terra);color:var(--fab-ink)}
.tkp-b.al{background:var(--red);color:var(--fab-ink)}
/* Faltas como columna: el número solo, sin fondo de chip (Juan, 20-ago). */
.tkp-falt{background:none;border:none;padding:0;font:inherit;font-weight:700;color:var(--red);cursor:pointer}
.tkp-falt:hover{text-decoration:underline}
.tkp-th{cursor:pointer;user-select:none;white-space:nowrap}
.tkp-th:hover{color:var(--ink)}
.tkp-empty{grid-column:1/-1;text-align:center;color:var(--mut2);padding:32px 0;font-size:13px}
/* Detalle: bottom sheet en móvil, panel en escritorio (§6.2) */
.tkp-d{padding:2px 0}
.tkp-dh{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.tkp-dn{font-size:12.5px;color:var(--mut);margin-bottom:16px}
.tkp-sec{margin-top:16px}
.tkp-sl{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut2);margin-bottom:8px}
.tkp-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid var(--line);min-width:0}
.tkp-row:last-child{border-bottom:0}
.tkp-k{font-size:12.5px;color:var(--mut);flex:none}
.tkp-v{font-size:12.5px;color:var(--ink);text-align:right;min-width:0;overflow-wrap:anywhere}
.tkp-lock{color:var(--mut2);font-style:italic;font-size:11.5px}
@media(max-width:640px){
  .tkp-grid{grid-template-columns:1fr}
  .tkp-fil{width:100%;overflow-x:auto;padding-bottom:4px}
}

/* --- zona de superadmin del reporte: borrar el día --- */
.rp2-zona{margin-top:32px;padding-top:16px;border-top:1px solid var(--line)}
.rp2-zl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut2);margin-bottom:8px}
.rp2-del{font-size:12.5px;color:var(--mut);background:none;border:0;padding:4px 0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.rp2-del:hover{color:var(--red)}
.rp2-conf{border:1px solid var(--line);border-radius:10px;padding:16px;background:var(--soft)}
.rp2-ct{font-size:13.5px;color:var(--ink);font-weight:600;margin-bottom:4px}
.rp2-cs{font-size:12.5px;color:var(--mut);margin-bottom:12px}
.rp2-cb{display:flex;gap:8px;flex-wrap:wrap}
.rp2-cy{padding:8px 16px;border-radius:10px;border:1px solid var(--red);background:var(--red);
  color:var(--fab-ink);font-size:12.5px;font-weight:600;cursor:pointer}
.rp2-cn{padding:8px 16px;border-radius:10px;border:1px solid var(--line);background:var(--card);
  color:var(--mut);font-size:12.5px;cursor:pointer}

/* ===== ADMINISTRACIÓN · el semáforo del día (sm*) =====
   NO son puntos de colores. El rediseño de los filtros de Registro ya
   enseñó que cuatro puntos a la vez no son cuatro alertas: son ninguna,
   y no distinguen un trámite de hoy de plata parada hace cinco días.
   Acá va con palabras y con un camino. */
.sm-wrap{max-width:760px}
.sm-hero{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;margin-bottom:16px}
.sm-hl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut2)}
.sm-ht{font-size:20px;font-weight:650;color:var(--ink);letter-spacing:-.02em;margin-top:4px}
.sm-hs{font-size:13px;color:var(--mut);margin-top:8px}
.sm-day{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}
.sm-day.ok{opacity:.62}
.sm-dh{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.sm-dd{font-size:14px;font-weight:600;color:var(--ink);text-transform:capitalize}
.sm-dm{font-size:12px;color:var(--mut2)}
.sm-it{display:flex;align-items:flex-start;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.sm-it:last-child{border-bottom:0}
.sm-ic{flex:none;width:20px;height:20px;border-radius:999px;display:flex;align-items:center;
  justify-content:center;font-size:12px;margin-top:1px}
.sm-ic.si{background:var(--soft);color:var(--mut2)}
.sm-ic.no{background:var(--red);color:var(--fab-ink)}
.sm-ic.vieja{background:var(--terra);color:var(--fab-ink)}
.sm-tx{flex:1;min-width:0}
.sm-tt{font-size:13px;color:var(--ink);font-weight:600}
.sm-ts{font-size:12.5px;color:var(--mut);margin-top:2px}
.sm-go{flex:none;font-size:12px;padding:4px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--mut);cursor:pointer;white-space:nowrap}
.sm-go:hover{border-color:var(--mut2);color:var(--ink)}
.sm-open{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px}
.sm-oh{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.sm-ol{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut2)}
.sm-on{flex:none;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--red);
  color:var(--fab-ink);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.sm-on.vieja{background:var(--terra)}
.sm-vent{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.sm-vchip{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--mut);font-size:12.5px;cursor:pointer}
.sm-vchip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media(max-width:640px){ .sm-go{padding:4px 8px} }

/* ===== REPORTE DIARIO (rp2*) =====
   Reemplaza el Google Form. El día normal casi no existe: 55% de los días
   hay algo de mantenimiento y 52% desperdicio. Los chips no ahorran el día
   vacío — acortan el camino a lo que sí pasó. */
.rp2-wrap{max-width:760px}
.rp2-head{margin-bottom:16px}
.rp2-t{font-size:20px;font-weight:650;color:var(--ink);letter-spacing:-.02em}
.rp2-s{font-size:13px;color:var(--mut);margin-top:4px}
.rp2-ask{font-size:14px;font-weight:600;color:var(--ink);margin:20px 0 12px}
.rp2-ctx{display:flex;gap:20px;flex-wrap:wrap;margin:16px 0 4px}
.rp2-cg{flex:1;min-width:220px}
.rp2-cl{font-size:12.5px;color:var(--mut);margin-bottom:8px}
.rp2-seg{display:flex;gap:6px;flex-wrap:wrap}
.rp2-sb{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--mut);font-size:12.5px;cursor:pointer;white-space:nowrap}
.rp2-sb.on{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600}
.rp2-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.rp2-c{padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);
  color:var(--mut);font-size:13px;cursor:pointer;transition:.12s;white-space:nowrap}
.rp2-c:hover{border-color:var(--mut2)}
.rp2-c.on{background:var(--terra);color:var(--fab-ink);border-color:var(--terra);font-weight:600}
.rp2-blk{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}
.rp2-bh{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.rp2-bt{font-size:14px;font-weight:600;color:var(--ink)}
/* Se avisa ANTES de escribir, no después de guardar: quien llena el reporte
   tiene que saber que esto le va a caer a alguien en su lista. */
.rp2-bt-nota{font-size:11px;color:var(--mut2);font-style:italic}
.rp2-x{margin-left:auto;background:none;border:0;color:var(--mut2);font-size:18px;cursor:pointer;padding:0 4px}
.rp2-x:hover{color:var(--ink)}
.rp2-f{margin-bottom:12px;min-width:0}
.rp2-f:last-child{margin-bottom:0}
.rp2-l{display:block;font-size:12px;color:var(--mut);margin-bottom:4px}
/* La nota libre del día quedó sin el subtítulo que la precedía: sin algo de
   peso, el campo más abierto del formulario era el menos visible. */
.rp2-l.fuerte{font-weight:700;color:var(--ink);font-size:13px}
.rp2-sel,.rp2-in,.rp2-ta{width:100%;box-sizing:border-box;min-width:0;font-size:16px;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.rp2-ta{min-height:72px;resize:vertical;font-family:inherit}
/* La pregunta que clasifica: dos botones grandes, no una lista de gravedades */
.rp2-dos{display:flex;gap:8px}
.rp2-d{flex:1;padding:14px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);
  color:var(--mut);font-size:13px;cursor:pointer;text-align:center;min-width:0}
.rp2-d.on{border-color:var(--ink);background:var(--soft2);color:var(--ink);font-weight:600}
.rp2-d small{display:block;font-size:11px;margin-top:4px;color:var(--mut2)}
.rp2-lin{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.rp2-lin input{flex:1 1 120px;min-width:0}
.rp2-lin input.qty{flex:0 0 72px}
.rp2-add{font-size:12px;padding:6px 12px;border:1px dashed var(--mut2);border-radius:10px;
  background:none;color:var(--mut);cursor:pointer}
/* 🔴 n60 · «como hacemos para que este boton sea menos invasivo.. es ENORME.
   y deberia ser azul segun el MD de diseño» (Juan). Las dos cosas eran ciertas:
   ocupaba el ancho entero a 16px de alto, y estaba en tinta cuando C1 de
   SISTEMA-VISUAL-2026 dice que la accion es --r-accion, que es el azul. Cerrar
   el dia SI es accion —cambia el mundo— asi que lleva color; lo que sobraba era
   el tamaño. Pasa a 10/20 y deja de estirarse. */
.rp2-save{width:auto;padding:10px 20px;border:0;border-radius:10px;background:var(--r-accion);color:var(--r-accion-txt);
  font-size:15px;font-weight:650;cursor:pointer;margin-top:20px}
.rp2-save:disabled{opacity:.45;cursor:default}
.rp2-ok{background:var(--soft);border-radius:14px;padding:20px;text-align:center;color:var(--mut);font-size:13px}
.rp2-nav{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.rp2-nb{padding:6px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);
  color:var(--mut);font-size:12px;cursor:pointer}
/* Lo único que sobrevive del subtítulo: que el día ya se cerró. Eso no es un
   título, es estado, y vive junto a la fecha que describe. */
.rp2-cerrado{font-size:11px;color:var(--mut2);font-style:italic}
@media(max-width:640px){ .rp2-c{flex:1 1 auto;text-align:center} .rp2-c.nada{margin-left:0;flex-basis:100%} }

/* ===== el termómetro del día (rp2-tm*) =====
   Ocupa el lugar donde antes se preguntaba «¿cómo estuvo el servicio?». No es
   un adorno: es el denominador. Dos errores en una noche de 300 pizzas no son
   los mismos dos que en una de 130, y ahora ese número no lo pone nadie a ojo.
   Dos ejes, porque uno solo miente: cuánto se despachó (absoluto) y cómo se
   compara ese día contra los mismos días de la semana (un sábado flojo sigue
   despachando más que un lunes bueno). */
.rp2-tm{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;margin:16px 0 4px}
.rp2-tmh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
/* Tres piezas, tres roles, y ninguna repite el color de otra (Juan, 13-ago):
   el nivel en negro, la comparación en oliva y las barras en terracota. */
.rp2-tmn{font-size:19px;font-weight:650;color:var(--ink);letter-spacing:-.02em}
/* Sin etiqueta la frase ocupa el lugar del nivel, así que no puede gritar como
   un nivel: dice qué falta, en el tono de un pie de página. */
.rp2-tmn.vacio{font-size:14px;font-weight:600;color:var(--mut)}
.rp2-tmsync{margin-left:auto;padding:6px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--mut);font-size:12px;cursor:pointer;white-space:nowrap}
.rp2-tmsync:hover{border-color:var(--mut2);color:var(--ink)}
.rp2-tmsync.on{color:var(--mut2);cursor:default}
/* La comparación contra el mismo día de la semana, en oliva. Un solo tono para
   subidas y bajadas: el signo ya dice hacia dónde, y verde-arriba/rojo-abajo
   metía un juicio moral sobre un dato que muchas veces no lo tiene. */
.rp2-tmvs{font-size:12px;font-weight:600;padding:2px 8px;border-radius:20px;
  background:var(--olive-t);color:var(--olive)}
.rp2-tmd{font-size:12.5px;color:var(--mut);margin-top:6px;line-height:1.5}
.rp2-tmd b{color:var(--ink);font-weight:600}
/* Las barras: catorce días a la misma vara. Sin ejes ni números — se mira,
   no se lee. La de hoy va marcada con el borde, no con otro color. */
.rp2-bars{display:flex;align-items:flex-end;gap:4px;height:44px;margin-top:12px}
.rp2-bar{flex:1;min-width:0;border-radius:3px 3px 0 0;background:var(--soft2);
  position:relative;transition:.12s}
/* Un solo color, cuatro intensidades (Juan, 13-ago). El semáforo de tres colores
   hacía leer «rojo = malo» sobre la mejor noche de la semana. Con una sola
   familia, lo que crece es el peso visual y no cambia el significado. Se hace
   con opacidad y no con cuatro hex: así el tono se compone contra la tarjeta y
   sirve igual en claro y en oscuro, donde --ch1 ya viene aclarado.
   El tono salió del terracota y pasó a la paleta de gráficas: esto es un gráfico
   de barras, y ahí no entra ningún color de la marca. La rampa se mantiene
   porque la escala es ordinal —Suave < Movido < Full < Locura—, no categórica:
   los ocho tonos de Google sirven para distinguir, no para ordenar. */
.rp2-bar.Suave {background:var(--ch1);opacity:.26}
.rp2-bar.Movido{background:var(--ch1);opacity:.50}
.rp2-bar.Full  {background:var(--ch1);opacity:.75}
.rp2-bar.Locura{background:var(--ch1);opacity:1}
.rp2-bar.hoy{outline:2px solid var(--ink);outline-offset:1px}
/* El día que todavía no trae ventas: el hueco a la altura completa, para que se
   vea el lugar que le toca en la serie en vez de un gráfico que termina ayer. */
.rp2-bar.pend{background:transparent;border:1px dashed var(--mut2);opacity:.5}
.rp2-barl{display:flex;gap:4px;margin-top:4px}
.rp2-barl span{flex:1;min-width:0;text-align:center;font-size:9px;color:var(--mut2)}
.rp2-tmesc{font-size:11px;color:var(--mut2);margin-top:8px}

/* ===== reporte por área — estados del chip y los incidentes ===== */
.rp2-c.on.sin{background:var(--soft2);color:var(--mut);border-color:var(--mut2);font-weight:500}
.rp2-c b{font-weight:700}
.rp2-item{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:8px;background:var(--bg)}
.rp2-ih{display:flex;align-items:center;margin-bottom:8px}
.rp2-in-n{font-size:11px;color:var(--mut2);font-weight:700}
.rp2-lock2{margin-left:auto;font-size:11px;color:var(--mut2);font-style:italic}
.rp2-vacio{font-size:12.5px;color:var(--mut2);padding:8px 0}
.rp2-hint{font-weight:400;color:var(--mut2)}
.rp2-add.big{width:100%;padding:10px;margin-top:4px}
/* Causa real, aparte de la falta: chips que se marcan, hasta 3. Mismo patrón
   visual de .rp2-d (borde a lleno) pero en línea y compactos -- pueden ser
   hasta 7 por área y una fila de botones grandes no cabía. */
.rp2-causas{display:flex;flex-wrap:wrap;gap:6px}
.rp2-cau{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;
  border:1px solid var(--line);border-radius:20px;background:var(--bg);
  color:var(--mut);font-size:12.5px;cursor:pointer;user-select:none}
.rp2-cau input{margin:0}
.rp2-cau.on{border-color:var(--ink);background:var(--soft2);color:var(--ink);font-weight:600}
.rp2-cau.dis{opacity:.4;cursor:default}

/* ===== Consolidado — histórico del Reporte del día (rp2-cons*) ===== */
.rp2-cons-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.rp2-cons-cajas{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.rp2-cons-caja{flex:1 1 140px;min-width:0;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;text-align:center}
.rp2-cons-n{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.rp2-cons-t{font-size:12px;color:var(--mut);margin-top:2px;line-height:1.4}
.rp2-cons-sec{margin-bottom:22px}
.rp2-cons-barras{margin-top:10px}
.rp2-cons-fila{display:flex;align-items:center;gap:8px;margin-bottom:8px;cursor:pointer;
  padding:4px;margin:-4px -4px 4px;border-radius:10px}
.rp2-cons-fila:hover{background:var(--soft2)}
.rp2-cons-fila.on{background:var(--soft2)}
.rp2-cons-txt{flex:0 0 42%;min-width:0;font-size:12.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp2-cons-b{flex:1 1 auto;min-width:0;height:10px;border-radius:6px;background:var(--soft2)}
.rp2-cons-bi{height:100%;border-radius:6px;background:var(--r-accion);min-width:3px}
.rp2-cons-num{flex:0 0 auto;font-size:12px;color:var(--mut);font-weight:600;min-width:18px;text-align:right}
/* El detalle de una fila: qué incidentes de verdad la componen (18-sep,
   Juan: «saber de qué se compone el total»). Vive pegado a su fila, con el
   mismo acento a la izquierda que ya usan las notas destacadas del día. */
.rp2-cons-det{margin:0 0 10px;padding-left:10px;border-left:2px solid var(--r-accion)}
.rp2-cons-detf{display:flex;gap:8px;align-items:baseline;padding:4px 0;font-size:12px;
  border-bottom:1px solid var(--line)}
.rp2-cons-detf:last-child{border-bottom:0}
.rp2-cons-detd{flex:0 0 44px;color:var(--mut2);font-weight:600}
.rp2-cons-detq{flex:1 1 auto;min-width:0;color:var(--ink)}
.rp2-cons-dete{flex:0 0 auto;color:var(--mut);font-size:11px}

/* Reportar / Consolidado: la misma pantalla, dos modos (Juan, 18-sep). Mismo
   patrón de segmented control que .rp2-dos/.rp2-d, en el ancho que le toca. */
.rp2-modo{display:flex;gap:8px;margin-bottom:16px}
.rp2-md{padding:8px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg);
  color:var(--mut);font-size:13px;font-weight:600;cursor:pointer}
.rp2-md.on{border-color:var(--ink);background:var(--soft2);color:var(--ink)}

/* ===== REUNIONES · el ciclo semanal (rn*) =====
   Pensado en teléfono primero: una sola columna, nada de tablas, y los
   compromisos de la semana pasada ARRIBA de todo lo demás — que es como
   arranca el weekly de Scaling Up y es lo que hoy nadie vuelve a mirar. */
/* Ancho completo (Juan, 14-ago): «hay más ancho de pantalla… que sea responsive este box
   al ancho» y «QUIERO QUE TODO ESTO QUEDE EN UN SOLO RENGLÓN, TIENES AÚN MUCHO ANCHO DE
   PANTALLA». Los 720px venían de cuando la pantalla era una columna de compromisos, que
   se lee mejor angosta. Ahora es un resumen en viñetas y una barra de mando: los dos
   quieren el ancho que haya. El tope alto es para que en un monitor grande el texto no
   quede en renglones de treinta palabras, que tampoco se leen. */
.rn-wrap{max-width:1180px}
.rn-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.rn-head .rn-sel{min-width:200px}
/* Empuja «Nueva reunión» y «Cerrar» a la derecha, separados de la acción del día. */
.rn-head-sp{flex:1;min-width:0}
.rn-h1{font-size:19px;font-weight:700;color:var(--ink);line-height:1.25;flex:1;min-width:180px}
.rn-fecha{font-size:12px;color:var(--mut);margin-top:4px;font-weight:500}
.rn-est{font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;background:var(--soft);color:var(--mut);white-space:nowrap}
.rn-est.abierta{background:var(--green-t);color:var(--green)}
.rn-sel{padding:8px 12px;border:1px solid var(--line);border-radius:11px;font-family:inherit;font-size:12px;background:var(--bg);color:var(--ink);max-width:100%}
.rn-sec{margin-bottom:24px}
.rn-st{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rn-sd{font-size:12px;color:var(--mut);margin-bottom:12px;line-height:1.5}
.rn-n{font-size:11px;font-weight:600;color:var(--mut);background:var(--soft);padding:4px 8px;border-radius:20px}
.rn-ta{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:11px;padding:12px;
  font:inherit;font-size:14px;line-height:1.55;color:var(--ink);background:var(--card);resize:vertical;min-height:96px;}
.rn-ta:focus{border-color:var(--ink)}
.rn-ta.buenas{background:var(--green-t);border-color:var(--line);min-height:64px}
/* Un compromiso es una fila con check grande: en teléfono se marca con el pulgar. */
.rn-c{display:flex;align-items:flex-start;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line)}
.rn-ck{flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--mut2);background:none;cursor:pointer;padding:0;position:relative}
.rn-ck::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;opacity:0;color:var(--card)}
.rn-ck:hover::after{opacity:.4;color:var(--ink)}
.rn-ck.done{background:var(--green);border-color:var(--green)}
.rn-ck.done::after{opacity:1;color:var(--card)}
.rn-cb{flex:1;min-width:0}
.rn-ct{font-size:14px;line-height:1.4;color:var(--ink);word-break:break-word}
.rn-c.hecho .rn-ct{text-decoration:line-through;color:var(--mut)}
.rn-cm{font-size:12px;color:var(--mut);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rn-who{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--ink)}
.rn-av{width:20px;height:20px;border-radius:50%;background:var(--soft2);color:var(--ink);font-size:9px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.rn-tarde{color:var(--red);font-weight:600}
.rn-vacio{padding:24px 16px;text-align:center;color:var(--mut);font-size:13px;line-height:1.6;
  border:1px dashed var(--line);border-radius:11px}
.rn-band{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:11px;
  background:var(--amber-t);color:var(--amber);font-size:13px;line-height:1.45;cursor:pointer}
.rn-band b{font-weight:700}
.rn-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.rn-guardado{font-size:12px;color:var(--green);font-weight:600}
/* Tarjeta de un hecho por decidir. Las dos preguntas separadas y numeradas:
   si se ven como un solo grupo de botones, se contesta una y se cree cerrado. */
.rn-h{border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px;background:var(--card)}
.rn-hh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.rn-hm{font-size:12px;color:var(--mut)}
.rn-hq{font-size:14px;font-weight:600;color:var(--ink);line-height:1.4}
.rn-hd{font-size:13px;color:var(--mut);line-height:1.5;margin-top:4px}
.rn-hh2{font-size:12px;color:var(--mut);margin-top:8px}
/* El historial de la persona en terracota cuando SÍ tiene faltas previas (Juan,
   13-ago): es el dato que cambia la decisión. «Sin faltas previas» sigue gris —
   pintar de alerta una hoja limpia sería exactamente al revés. */
.rn-hh2.tiene{color:var(--terra)}
.rn-hh2.tiene b{color:var(--terra);font-weight:700}
.rn-qg{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.rn-ql{flex:0 0 100%;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:4px}
.rn-q{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;
  padding:8px 12px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.3}
.rn-q small{font-weight:500;font-size:11px;color:var(--mut)}
.rn-q:hover{border-color:var(--mut2)}
.rn-q.on{background:var(--seg-on);color:var(--bg);border-color:var(--seg-on)}
.rn-q.on small{color:var(--bg);opacity:.7}
.rn-tf{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.rn-in{border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-family:inherit;
  font-size:13px;background:var(--card);color:var(--ink);flex:1;min-width:160px;}
.rn-in:focus{border-color:var(--ink)}
.rn-hint{font-size:12px;color:var(--mut);align-self:center}
/* Acordeón. Cerrado, la reunión entera cabe en cinco renglones y se ve dónde
   está el trabajo sin bajar. Abierta una, las demás se pliegan. */
/* n15 (Juan, 14-ago: «dale color a esta barra»). La barra del acordeón era
   transparente y se perdía dentro de su propio contenido: con unas secciones
   abiertas y otras cerradas no se veía dónde empezaba cada una. Ahora es una barra
   gris de verdad, y el hover sube un escalón para que siga respondiendo al toque.
   Sin el hover en soft2, una barra que ya es soft dejaría de acusar recibo. */
.rn-acc{border-bottom:1px solid var(--line)}
.rn-ah{display:flex;align-items:center;gap:12px;width:100%;padding:16px 12px;border:none;
  background:var(--soft);border-radius:10px;font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.rn-ah:hover{background:var(--soft2)}
.rn-acc.ab .rn-ah{border-radius:10px 10px 0 0}
.rn-ah-c{font-size:11px;color:var(--mut);transition:transform .12s;flex:none}
.rn-acc.ab .rn-ah-c{transform:rotate(90deg)}
.rn-ah-t{font-size:14px;font-weight:700;flex:1}
.rn-ab{padding:0 12px 20px}
/* ===== El transcript, la revisión y el historial (Juan, 14-ago) ===== */
/* La espera. El número grande es lo único que se mira mientras corre, así que manda
   sobre el texto — al revés se lee la frase y se busca el dato. */
.rn-proc{text-align:center;padding:32px 16px;background:var(--soft);border-radius:14px;
  margin-bottom:16px}
/* 34px y no 36: ese tamaño ya existe en el sistema y el verificador cuenta cada valor
   nuevo como deuda. La escala apunta a tener pocos tamaños, no el que quede mejor. */
.rn-proc-c{font-size:34px;font-weight:700;color:var(--terra);line-height:1.2;
  font-variant-numeric:tabular-nums}
.rn-proc-t{font-size:14px;font-weight:600;color:var(--ink);margin-top:8px}
.rn-proc-s{font-size:12px;color:var(--mut);margin-top:4px}
/* El aviso de reunion cerrada. Terracota y no rojo: no es un error, es un desvio que
   casi siempre es accidental y que conviene atajar antes y no explicar despues. */
.rn-cerr{border:1px solid var(--terra);background:var(--terra-t,var(--soft));border-radius:10px;
  padding:12px 16px;margin-bottom:16px;font-size:12px;line-height:1.6;color:var(--ink)}
.rn-cerr .btn{margin-top:8px}
/* El botón de subir es un <label> con el input adentro: el input nativo de archivo no
   se puede estilar, y esconderlo detrás del label da el mismo clic con el botón del
   sistema de diseño. El input queda accesible al teclado, no con display:none. */
.rn-sub{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.rn-file{position:relative;overflow:hidden;cursor:pointer}
.rn-file input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.rn-res{background:var(--soft);border-radius:10px;padding:16px 20px;margin-bottom:16px}
.rn-res-t{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--mut);margin-bottom:8px}
.rn-res-b{font-size:13px;line-height:1.7;color:var(--ink)}
.rn-res-b p{margin:0 0 8px}
/* Vinetas redondas de verdad, no guiones. El padding-left es el que deja el punto
   colgando fuera del texto, que es lo que hace legible una lista larga. */
.rn-res-l{margin:0;padding-left:20px;list-style:disc}
.rn-res-l li{margin-bottom:6px}
/* Las flechas de semana y el salto por fecha. */
.rn-nav{border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;
  border-radius:10px;width:30px;height:30px;font-size:16px;line-height:1;font-family:inherit;flex:none}
.rn-nav:hover:not(:disabled){background:var(--soft2)}
.rn-nav:disabled{color:var(--mut2);cursor:default}
.rn-fec{padding:6px 10px;border:1px solid var(--line);border-radius:10px;font-family:inherit;
  font-size:12px;background:var(--bg);color:var(--mut)}
/* Cuando no hay resumen, decir POR QUE. Un espacio en blanco no distingue «no subiste
   nada» de «lo subiste y quedo a medias», y cada una tiene una salida distinta. */
.rn-nada{background:var(--soft);border-radius:10px;padding:16px 20px;margin-bottom:16px;
  font-size:13px;line-height:1.6;color:var(--mut)}
.rn-nada .btn{margin-top:12px}
.rn-pt{font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;
  letter-spacing:.03em;margin:20px 0 8px}
.rn-pc{display:flex;gap:12px;align-items:flex-start;padding:12px 0;
  border-top:1px solid var(--line);cursor:pointer}
.rn-pc input{margin-top:4px;flex:none}
.rn-pc-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.rn-pc-t{font-size:13px;font-weight:600;color:var(--ink);line-height:1.4}
.rn-pc-m{font-size:12px;color:var(--mut)}
/* La cita se lee distinto del título a propósito: es lo que se dijo en la reunión, no
   algo que escribió el sistema. Sin esa diferencia, aprobar la lista se vuelve un acto
   de fe — y el punto de la revisión es justamente que no lo sea. */
.rn-pc-c{font-size:12px;color:var(--mut2);font-style:italic;line-height:1.5}
/* Titulo y detalle editables EN LA FILA. Sin borde hasta que se tocan: una lista de
   quince recuadros parece un formulario, y esto se lee antes de escribirse. */
.rn-pc-ti{border:none;background:none;font:inherit;font-size:13px;font-weight:600;
  color:var(--ink);padding:2px 4px;border-radius:6px;width:100%;}
.rn-pc-de{border:none;background:none;font:inherit;font-size:12px;color:var(--mut);
  padding:2px 4px;border-radius:6px;width:100%;resize:vertical;line-height:1.5}
.rn-pc-ti:hover,.rn-pc-de:hover{background:var(--soft)}
.rn-pc-ti:focus,.rn-pc-de:focus{background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
/* La ✕ quita la propuesta de la lista. Discreta hasta el hover: borrar no es la accion
   principal de esta pantalla, pero tiene que estar a mano. */
.rn-pc-x{border:none;background:none;color:var(--mut2);cursor:pointer;font-size:13px;
  padding:0 4px;font-family:inherit;flex:none;align-self:flex-start;line-height:1.6}
.rn-pc-x:hover{color:var(--terra)}
/* El resumen se toca y se escribe. El fondo al pasar por encima es lo unico que dice
   que es editable — un lapiz seria un clic para pedir permiso de escribir. */
.rn-res.edit{cursor:text}
.rn-res.edit:hover{box-shadow:inset 0 0 0 1px var(--line)}
.rn-ta.res{min-height:180px}
/* El detalle de la tarea: lo que no cabe en el titulo corto. */
.rn-pc-d{font-size:12px;color:var(--mut);line-height:1.5}
/* Los campos editables. Van DEBAJO del titulo y no al lado: en el telefono al lado
   obligaria a scroll horizontal, que es lo unico prohibido sin excepcion. */
.rn-pc-f{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.rn-pc-f .rn-in{font-size:12px;padding:4px 8px;max-width:100%}
/* La marca de lo que NO salio de la reunion: una duda que se decide convertir en tarea,
   o la accion de un cambio. Terracota porque pide una decision, no porque sea un error. */
.rn-bang{display:inline-block;font-weight:700;color:var(--terra);margin-right:6px}
.rn-bang.acc{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.rn-pc.dud .rn-pc-t{font-weight:500}
.rn-dud{font-size:12px;color:var(--mut);line-height:1.6;background:var(--soft);
  border-radius:10px;padding:12px 16px}
.rn-hx{border-top:1px solid var(--line);padding:16px 0}
.rn-hx-h{font-size:13px;color:var(--ink);margin-bottom:8px}
.rn-hx-b{font-size:12px;line-height:1.6;color:var(--mut)}
.rn-hx-b.vacio{font-style:italic;color:var(--mut2)}
/* Las notas viven fijas abajo: se escriben durante toda la reunión, no en una
   fase. Compactas mientras no escribes, crecen al tocarlas. */
.rn-notas{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--line);
  margin-top:16px;padding:12px 0 8px;display:flex;gap:8px;align-items:flex-end}
.rn-notas .rn-ta{min-height:56px;transition:min-height .15s}
.rn-notas .rn-ta:focus{min-height:140px}
@media(max-width:640px){
  /* 6 · Apilados a lo alto, 10 hechos eran un scroll eterno en el teléfono:
     las opciones de cada pregunta comparten fila. */
  .rn-q{flex:1 1 30%;padding:10px 8px}
  .rn-q small{font-size:10px}
  .rn-in{flex:1 1 100%}
}
@media(max-width:640px){
  .rn-h1{font-size:17px}
  .rn-sel{width:100%}
}

/* ===== FALTAS · bandeja de la reunión y expediente (fx*) =====
   Acá —y solo acá— nace una falta. El reporte diario captura el hecho;
   la decisión se toma en la reunión semanal (Juan, 6-ago). */
.fx-wrap{max-width:820px}
/* El «+» de anotar: mismo formato que el de Registro, terracota, en el renglón
   de las pestañas y a la izquierda de todo (Juan, 13-ago). */
.fx-mas{width:34px;height:34px;flex:none;border-radius:999px;border:1px solid var(--terra);
  background:var(--terra);color:var(--fab-ink);font-size:18px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0}
.fx-mas:hover{filter:brightness(1.06)}
/* El contador de pendientes como globo de notificación, no como un número más. */
.fx-bola{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 4px;margin-left:6px;border-radius:999px;background:var(--red);color:var(--fab-ink);
  font-size:11px;font-weight:700;line-height:1}
/* La «i» de esta pantalla es la MISMA `.ibtn` de todo el sistema (arriba, en el
   bloque de componentes): un botón en línea que se cuelga de un renglón que ya
   existe y abre un popover. Acá vivió un segundo patrón durante media hora —un
   bloque plegable con su propio renglón— y era doblemente un error: duplicaba
   algo que ya existía con 21 usos, y en vez de achicar la pantalla la agrandaba
   en un renglón. Juan, 13-ago: «jamás pones un "i" en un renglón entero». */
.fx-form{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px}
.fx-ft{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px}
.fx-fs{font-size:12.5px;color:var(--mut);margin-bottom:16px}
.fx-fr{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.fx-fc{flex:1;min-width:180px}
.fx-fl{display:block;font-size:12px;color:var(--mut);margin-bottom:6px}
.fx-in,.fx-sel,.fx-ta{width:100%;box-sizing:border-box;min-width:0;font-size:16px;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.fx-ta{min-height:72px;resize:vertical;font-family:inherit}
.fx-fb{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.fx-ok{padding:10px 18px;border-radius:10px;border:1px solid var(--ink);background:var(--ink);
  color:var(--bg);font-size:13px;font-weight:600;cursor:pointer}
.fx-ok:disabled{opacity:.4;cursor:default}
.fx-no{padding:10px 18px;border-radius:10px;border:1px solid var(--line);background:var(--card);
  color:var(--mut);font-size:13px;cursor:pointer}
@media(max-width:640px){ .fx-fc{min-width:100%} }
.fx-tabs{display:flex;gap:8px;margin-bottom:16px;align-items:center}
.fx-tab{padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--mut);font-size:13px;cursor:pointer}
.fx-tab.on{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600}
.fx-tab b{margin-left:4px}
.fx-hero{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;margin-bottom:16px}
.fx-ht{font-size:20px;font-weight:650;color:var(--ink);letter-spacing:-.02em}
.fx-hs{font-size:13px;color:var(--mut);margin-top:4px}
.fx-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}
.fx-ch{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.fx-who{font-size:16px;font-weight:650;color:var(--ink)}
.fx-when{font-size:12px;color:var(--mut2)}
.fx-vieja{font-size:11px;padding:0 8px;border-radius:6px;background:var(--terra);color:var(--fab-ink)}
.fx-what{font-size:13.5px;color:var(--ink);margin-bottom:4px}
.fx-desc{font-size:12.5px;color:var(--mut);margin-bottom:12px}
.fx-hist{font-size:11.5px;color:var(--mut2);margin-bottom:12px}
.fx-hist b{color:var(--terra)}
.fx-acts{display:flex;gap:8px;flex-wrap:wrap}
.fx-b{flex:1 1 120px;padding:12px 8px;border:1px solid var(--line);border-radius:10px;background:var(--bg);
  color:var(--mut);font-size:12.5px;cursor:pointer;text-align:center;min-width:0}
.fx-b:hover{border-color:var(--mut2);color:var(--ink)}
.fx-b.leve:hover{border-color:var(--terra);color:var(--terra)}
.fx-b.grave:hover{border-color:var(--red);color:var(--red)}
.fx-b small{display:block;font-size:10.5px;color:var(--mut2);margin-top:4px}
.fx-sug{font-size:11px;color:var(--mut2);margin-bottom:8px}
.fx-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.fx-row:last-child{border-bottom:0}
.fx-t{font-size:10.5px;padding:0 8px;border-radius:6px;font-weight:600}
.fx-t.LEVE{background:var(--soft2);color:var(--mut)}
.fx-t.GRAVE{background:var(--terra);color:var(--fab-ink)}
.fx-t.DESPIDO{background:var(--red);color:var(--fab-ink)}
.fx-cont{display:flex;gap:8px;margin-top:4px}
.fx-n{font-size:11.5px;color:var(--mut2)}
.fx-empty{text-align:center;color:var(--mut2);padding:32px 0;font-size:13px}
.fx-esc{background:var(--soft);border-radius:10px;padding:12px;font-size:12.5px;color:var(--mut);margin-top:12px}
@media(max-width:640px){ .fx-b{flex:1 1 100%} }

/* ===== Afinada de UX del ciclo reporte→reunión→faltas (11-ago) =====
   1 · Un desplegable tiene que PARECER desplegable: la flecha nativa se
   perdía con el fondo plano y el equipo veía una caja de texto muerta. */
select.rp2-sel,select.fx-sel,select.rn-in,.rn-sel{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
/* 14-sep (Juan: «la flecha… arréglalo en toda la plataforma»): la regla general de select le quita la flecha
   nativa a TODOS, y solo las clases de arriba le devolvían la suya. El resto se veía como una caja de texto.
   Todo desplegable lleva la misma flecha; con !important porque varios traen `background:` en su style=,
   que borraría la imagen. El color de fondo de cada uno se respeta. */
select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 10px center!important;padding-right:28px}
/* 2 · Un botón apagado se tiene que VER apagado: se veía igual que uno vivo,
   y tocar sin respuesta se siente como pantalla rota. */
.rn-h .btn[disabled],.rn-acts .btn[disabled]{opacity:.4;cursor:not-allowed}
/* 3 · Un campo lleno sin etiqueta es un misterio: «2 · Masa madre · Rafa» no
   dice qué es cada cosa. Etiqueta chica arriba, visible SIEMPRE — el
   placeholder desaparece justo cuando el campo se llena. */
.rp2-cel{display:flex;flex-direction:column;gap:4px;flex:1 1 120px;min-width:0}
.rp2-cel.qty{flex:0 0 84px}
.rp2-lin .rp2-cel input{flex:1 1 auto;width:100%}
.rp2-cl2{font-size:10.5px;color:var(--mut2)}
.rn-cel{display:flex;flex-direction:column;gap:4px;flex:1;min-width:150px}
.rn-cel .rn-in{width:100%}
.rn-fl{font-size:10.5px;color:var(--mut2)}
.rn-tf{align-items:flex-end}
/* 7 · El acordeón casi no se veía: chevron y contador con más presencia. */
.rn-ah-c{font-size:13px}
.rn-ah-t{font-size:15px}
.rn-n{background:var(--soft2);color:var(--ink);font-weight:700}

/* ═══ ZONA SISTEMA · INICIO ═══ */
/* Todo lo nuevo vive aca dentro. El guardian exige CERO deuda en esta
   zona: ni un hex suelto, ni un espaciado impar, ni un tamano fuera de
   escala. En legacy la vara es "no empeorar"; aca es "no existir".
   Vacia a proposito hasta el Paso 1. Ver docs/SISTEMA-VISUAL-2026.md */

/* ── Paleta primitiva · docs/TOKENS-BOGO.css ────────────────────────────────
   Instalada acá tal cual documenta ese archivo: pegada al inicio de la zona
   sistema. ADITIVA como la capa de roles de abajo — ningún nombre choca con
   uno existente (comprobado por grep antes de pegar). El riel lateral (PR del
   28-ago) es el primer consumidor. */
:root{
/* El terracota de PINTURA es el del LOGO, decision de Juan del 17-ago. En
   admin.html --bogo-terracota APUNTA a --r-accion (mas abajo en este mismo
   <style>, en el puente de la linea ~4900) en vez de repetir el hex: un
   valor, un lugar, y hereda las variantes de tema oscuro que --r-accion ya
   tiene. El resolver de var() no depende del orden de aparicion en el
   archivo -- se resuelve contra el valor YA cascadeado de --r-accion para
   cada elemento, así que da igual que --r-accion se declare mas abajo.
   docs/TOKENS-BOGO.css (la especificacion, que la maqueta carga sola sin
   este puente) sigue con el hex literal #b74127 -- las dos dicen lo mismo,
   pero cada una por la razon que le corresponde. */
--bogo-terracota:var(--r-accion);
--bogo-terracota-hover:#9d3720;
--bogo-terracota-press:#852e1a;
/* El anillo de foco: se quedó el nombre que ya existía, --ring-focus (no
   --focus-ring, que hubiera sido un segundo token para lo mismo), con el
   valor actualizado al terracota nuevo. Sin esto cada control necesita un
   rgba suelto, y eso sube el indicador del guardian en cada pantalla. */
--ring-focus:0 0 0 3px rgba(183,65,39,.28);
--bogo-terracota-oscuro:#7e4936;
--bogo-cafe-claro:#c49f86;
--bogo-rosa-claro:#f4cdb3;
--bogo-gris:#dad4c8;
--bogo-blanco:#ffffff;
--bogo-oliva:#919c6a;
--bogo-oliva-oscuro:#5c6d31;
--bogo-negro:#161618;
--bogo-negro-2:#232326;
--bogo-negro-3:#33333a;
--bogo-gris-2:#eae6de;
--bogo-gris-3:#f5f2ec;
--bogo-rosa-tenue:#fae6d8;
--surface-page:var(--bogo-blanco);
--surface-card:var(--bogo-blanco);
--surface-brand:var(--bogo-terracota);
--surface-accent-soft:#e4e7d7;
--text-title:var(--bogo-negro);
--text-body:#3a3a3f;
--text-muted:#6f6a63;
--text-on-brand:var(--bogo-blanco);
--text-on-inverse:var(--bogo-blanco);
--text-on-inverse-muted:#b9b3aa;
--text-link:var(--bogo-terracota);
--text-link-hover:var(--bogo-terracota-press);
--border-subtle:var(--bogo-gris);
--border-strong:var(--bogo-negro);
--border-inverse:#3d3d43;
--state-success:var(--bogo-oliva-oscuro);
--state-danger:var(--bogo-terracota);
--state-danger-soft:var(--bogo-rosa-tenue);
--weight-light:300;
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
--weight-black:900;
--size-h2:32px;
--size-h3:24px;
--size-h4:19px;
--size-body-lg:18px;
--size-body:16px;
--size-body-sm:14px;
--size-caption:13px;
--size-micro:11px;
--tracking-title:-0.015em;
--tracking-label:0.14em;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--control-h-sm:34px;
--control-h:44px;
--radius-xs:4px;
--radius-sm:8px;
--radius-md:12px;
--radius-lg:18px;
--radius-xl:28px;
--radius-pill:999px;
--radius-card:var(--radius-lg);
--radius-control:var(--radius-pill);
--dur-fast:120ms;
--dur:180ms;
--dur-slow:320ms;
--ease-standard:cubic-bezier(.2,.6,.2,1);
--transition-control:background-color var(--dur) var(--ease-standard),color var(--dur) var(--ease-standard),border-color var(--dur) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);
--press-scale:0.97;
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms;--dur:0ms;--dur-slow:0ms;--press-scale:1}}

/* ── docs/APP-ELEMENTOS.css · instalada tal cual, sin reescribir ───────────
   Forma canónica de los elementos que se repiten en las 32 pantallas,
   escrita en Claude Design. Se usan estas clases; no se inventan variantes.
   Si falta un elemento, se pide y Design lo agrega ahí, no acá. Depende de
   la paleta primitiva de arriba, por eso va después. Primer consumidor:
   Cocina › Costeo (28-ago). */
/* ─── Aviso en una fila de tabla ────────────────────────────────────────────
   Regla 13: un aviso se lee por PESO y COLOR DE LETRA, nunca por superficie
   pintada. Un fondo lo convierte en decoración y a los dos días nadie lo ve.
   Va INLINE, en la misma celda del nombre. Nunca en un renglón propio. */
.app-aviso{
  flex:0 0 auto;
  font-size:var(--size-micro);
  font-weight:700;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--bogo-terracota-oscuro);
  white-space:nowrap;
}

/* ─── Chip de filtro ────────────────────────────────────────────────────────
   Regla 4: un criterio, un chip, y el chip MUESTRA su valor puesto.
   Sin flecha: se descubre en el primer clic y la flecha cuesta 14 px en cada
   barra de las 32 pantallas. */
.app-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  height:var(--control-h-sm);
  padding:0 var(--space-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--text-body);
  font-family:var(--font-sans);
  font-size:var(--size-body-sm);
  font-weight:500;
  white-space:nowrap;
  cursor:pointer;
  transition:var(--transition-control);
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
.app-chip:hover{ border-color:var(--border-strong); }
/* El foco no se borra —hace falta para el teclado— se reemplaza: un solo anillo, del
   sistema. Con el token no hace falta un rgba suelto en cada pantalla. */
.app-chip:focus-visible{ outline:none; box-shadow:var(--ring-focus); }

/* Con valor puesto: la única superficie de color de la barra además del CTA. */
.app-chip[data-puesto]{
  background:var(--surface-brand);
  border-color:var(--surface-brand);
  color:var(--text-on-brand);
}

/* La ✕ vive dentro del chip y aparece SOLO cuando hay valor puesto.
   Regla 4: cada chip se limpia con su propia ✕. */
.app-chip-x{
  display:none;
  flex:0 0 auto;
  width:18px; height:18px;
  align-items:center; justify-content:center;
  border:0; padding:0;
  border-radius:var(--radius-pill);
  background:transparent;
  color:currentColor;
  cursor:pointer;
}
.app-chip[data-puesto] + .app-chip-x,
.app-chip-x[data-puesto]{ display:inline-flex; }

/* ─── El separador de la barra de pantalla ──────────────────────────────────
   Regla 2: la izquierda HACE cosas, la derecha CUENTA cosas. Esto las divide
   y es lo que hace que la barra se lea de un golpe. */
.app-barra-sep{
  flex:0 0 auto;
  width:1px;
  height:24px;
  margin:0 var(--space-1);
  background:var(--border-subtle);
}

/* ─── Indicador de guardado ─────────────────────────────────────────────────
   Regla 5: el punto verde ya significa «guardado». La palabra sobra, la hora
   no. Queda «● 13:42», nunca «● Guardado 13:42». */
.app-guardado{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--size-caption);
  font-weight:300;
  color:var(--text-muted);
  white-space:nowrap;
}
.app-guardado::before{
  content:"";
  width:8px; height:8px;
  border-radius:var(--radius-pill);
  background:var(--state-success);
}

/* ─── Encabezado de tabla ───────────────────────────────────────────────────
   Regla 17: el encabezado vive DENTRO del contenedor que scrollea, como fila
   sticky. Si queda afuera, el canal del scrollbar lo hace más ancho y la
   columna elástica se come la diferencia, corriendo todas las siguientes.
   Compensar con padding-right es un parche que se rompe solo. */
.app-thead{
  position:sticky;
  top:0;
  z-index:2;
  height:44px;
  background:var(--bogo-gris-3);
  border-bottom:1px solid var(--border-subtle);
}
.app-th{
  border:0;
  background:transparent;
  padding:0;
  font-family:var(--font-sans);
  font-size:var(--size-micro);
  font-weight:600;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-muted);
  white-space:nowrap;
  cursor:pointer;
}
.app-th--num{ text-align:right; }
.app-th[data-activo]{ font-weight:700; color:var(--text-title); }

/* ─── Fila de tabla ─────────────────────────────────────────────────────────
   Regla 13, nivel «ubicación»: la fila abierta usa gris cálido y un acento
   recto de 3 px. Nada de color con emoción para decir «estoy acá». */
.app-tr{
  display:flex;
  min-height:60px;
  border-bottom:1px solid var(--bogo-gris-2);
  background:transparent;
}
.app-tr:hover{ background:var(--bogo-gris-3); }
.app-tr[data-abierta]{
  background:var(--bogo-gris-3);
  box-shadow:inset 3px 0 0 var(--bogo-terracota);
}
.app-td-num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ─── Pie de tabla ──────────────────────────────────────────────────────────
   DOS datos, cortos. Nunca una leyenda explicando el código de colores ni
   cómo se abre una fila: si hay que explicarlo, el problema es la pantalla. */
.app-tfoot{
  flex:0 0 44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  padding:0 var(--space-5);
  border-top:1px solid var(--border-subtle);
  font-size:var(--size-caption);
  font-weight:300;
  color:var(--text-muted);
}

/* ─── Cifra de food cost ────────────────────────────────────────────────────
   Regla 14: los dos terracotas no se mezclan. Acá es TINTA
   (--bogo-terracota-oscuro), porque es texto sobre fondo claro. El terracota
   puro queda para pintura: superficies, acentos y barras. */
.app-fc{
  text-align:right;
  font-size:var(--size-body-sm);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.app-fc[data-tono="sin-dato"]{ color:var(--text-muted); }
.app-fc[data-tono="en-meta"]{ color:var(--bogo-oliva-oscuro); }
.app-fc[data-tono="sobre-meta"]{ color:var(--bogo-terracota-oscuro); }
.app-fc[data-tono="alto"]{ color:var(--bogo-terracota-oscuro); }

/* ─── Notificación efímera ─────────────────────────────────────────────────
   Regla 13, nivel 3: el ÚNICO lugar del sistema donde se usa el rosa piel.
   Una por pantalla, como máximo, y siempre descartable. Pintar de rosa un
   aviso permanente lo mata y encima compite con el terracota del CTA. */
.app-notif{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  height:var(--control-h-sm);
  padding:0 var(--space-1) 0 var(--space-3);
  border-radius:var(--radius-pill);
  background:var(--bogo-rosa-tenue);
  color:var(--bogo-terracota-oscuro);
  font-size:12px;
  font-weight:400;
  max-width:264px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ─── Búsqueda ──────────────────────────────────────────────────────────────
   Regla 6: es el ÚNICO elemento elástico de la barra y nunca baja de 220 px.
   Todo lo demás lleva ancho fijo, así ninguna barra puede desbordar. */
.app-buscar{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  height:40px;
  padding:0 var(--space-4);
  flex:1 1 auto;
  min-width:220px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);
  background:var(--surface-card);
}
.app-buscar input{
  flex:1;
  min-width:0;
  border:0;
  outline:none;
  background:transparent;
  font-family:var(--font-sans);
  font-size:var(--size-body-sm);
  font-weight:400;
  color:var(--text-body);
}

/* ─── Botón de icono secundario ─────────────────────────────────────────────
   Regla 5: si el icono es intuitivo, va solo — pero SIEMPRE con title Y
   aria-label con la frase completa. El primario nunca es icono solo. */
.app-icon-btn{
  flex:0 0 auto;
  width:38px; height:38px;
  display:inline-flex;
  align-items:center; justify-content:center;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--text-title);
  cursor:pointer;
  transition:var(--transition-control);
}
.app-icon-btn:hover{ background:var(--bogo-gris-3); border-color:var(--border-strong); }
.app-icon-btn:focus-visible{ outline:none; box-shadow:var(--ring-focus); }
.app-icon-btn[data-activo]{ background:var(--bogo-gris-3); border-color:var(--border-strong); }
/* Pulso › Anotar saldos: el reloj de cada cuenta manual dice de cuándo es el dato (plano Design, 4-sep). */
.pu-tip:hover::after,.pu-tip:focus::after{ content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); height:26px; display:inline-flex; align-items:center; padding:0 12px; border-radius:var(--radius-pill); background:var(--bogo-negro); color:var(--bogo-blanco); font-size:var(--size-micro); font-weight:500; white-space:nowrap; z-index:9; pointer-events:none; }

/* ─── Barra vacía de una pantalla ───────────────────────────────────────────
   Regla 7: en 800 px de alto, todo el encabezado —tabs, barra, filtros— no
   pasa de 300 px. El resto es de los datos. */
.app-barra{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-4) var(--space-6);
}

/* ── Capa de roles · SISTEMA-VISUAL-2026 §2 ────────────────────────────────
   ADITIVA: no renombra ni borra un solo token existente. Los nombres fisicos
   (--terra, --ink, --mut...) quedan para siempre porque cientos de reglas los
   leen por su nombre; los componentes nuevos consumen SOLO roles.
   Nada la consume todavia: pegarla no cambia un pixel, y esa es la prueba.

   El respaldo estatico va ANTES de la linea derivada a proposito: el navegador
   se queda con la ultima declaracion que entiende. Piso Chrome 119 / Safari
   16.4 / Firefox 128. Por debajo, el oscuro deja de derivarse pero no rompe. */
/* 🔴 17-ago · LOS NEUTROS PASAN DE FRIOS A CALIDOS, Y SALEN DEL MANUAL DE MARCA.
   Juan compartio el manual y ahi estaba lo que este archivo no sabia: la paleta de
   Bogo es CALIDA —Gris #dad4c8, Negro #161618— y los neutros de la app eran grises
   AZULADOS: #f6f7f8, #eef0f2, #e1e4e8, #5d636d. Una app entera de grises frios
   debajo de un logotipo terracota no se siente de la marca, y esa distancia es
   buena parte de por que «quedo gris» aunque cada color por separado estuviera
   bien elegido.

   De donde sale cada uno, porque los tonos NO se inventan:
     · --r-t1 es el Negro del manual, exacto (#161618). Antes era #16191f, azulado.
     · --r-s1 es el Blanco del manual (#ffffff), que el manual llama «lienzo».
     · el resto se deriva del Gris #dad4c8 y del Negro, subiendo y bajando
       luminancia sin tocar el matiz.

   MEDIDO ANTES DE ESCRIBIRLO, contra la superficie mas desfavorable como pide C9
   —que es la hundida s2, no el blanco—:
     claro   t1 15,21  ·  t2 4,92  ·  t3 4,56      (minimo 4,5)
     oscuro  t1 13,16  ·  t2 6,96  ·  t3 5,15
   ⚠️ El t3 viejo daba 2,8:1 sobre s2 y el propio documento lo tenia anotado como
   deuda desde M4. Se corrige de paso: ahora pasa. */
:root{
  /* superficie · derivadas del Gris #dad4c8 del manual */
  --r-s0:#f7f5f1; --r-s1:#ffffff; --r-s2:#efebe4;
  /* 🔴 --r-banda es el Gris #dad4c8 del manual, EXACTO, no una derivada.
     Es el relleno de la fila que agrupa: banda de grupo y fila de total.
     Antes esa fila usaba --r-s2 y el encabezado de columna usaba el MISMO tono,
     así que las dos medían 1,19 contra la fila normal y ninguna se distinguía.
     Juan, 17-ago: «las filas de acento prácticamente coinciden con el color de
     fondo». Ahora la banda mide 1,48 y el encabezado no lleva relleno. */
  --r-banda:#dad4c8;
  --r-line:#e2ddd2; --r-line-fuerte:#c6bfb0;
  /* texto · t1 es el Negro #161618 del manual, exacto */
  --r-t1:#161618; --r-t2:#6b6458; --r-t3:#71695c;
  /* accion — una sola en todo el sistema */
  --r-accion:#1b3a6b; --r-accion-txt:#ffffff;
  --r-accion-hover:#2b5390;
  --r-accion-hover:oklch(from var(--r-accion) calc(l + .10) c h);
  --r-accion-tinte:#e8edf5;
  --r-accion-tinte:oklch(from var(--r-accion) .955 calc(c * .28) h);
  /* foco */
  --r-foco:var(--r-accion);
  /* marca — la consume solo el logotipo */
  --r-marca:#b74127;   /* = --r-accion · A7: la marca y la accion, el mismo hex */
  /* El terracota REAL de la marca. C6 lo reserva al INGRESO: la marca en
     la puerta, el sistema adentro. No cambia con el tema: la puerta es la misma. */
  --r-marca-puerta:#93392a;
  /* senal */
  /* 17-ago · #2f7d4f daba 4,41:1 contra --r-s2 y 4,47:1 contra su propio tinte:
     bajo el 4,5 que exige C9, y C9 manda medir contra la superficie MAS
     desfavorable, que es la hundida y no el blanco. Sobre blanco pasaba (5,04) y
     por eso nadie lo vio -- es la misma leccion de M4. Ocho elementos medidos en
     produccion caian por esto: «ok» de Cuadre, el delta de Cuadre de caja, la
     flecha de ingreso de Cajas, «abierta» de Reuniones, el 22,1% grande.
     #2d7849 es el cambio MAS PEQUENO que los saca a todos: 4,72 · 4,78 · 5,39. */
  --r-bien:#2d7849; --r-bien-t:#e9f4ed;
  --r-ojo:#9a6207;  --r-ojo-t:#faf1d8;
  --r-mal:#b23b22;  --r-mal-t:#fbeae5;
  /* profundidad */
  --r-elev-1:0 1px 2px rgba(20,25,34,.05);
  --r-elev-2:0 8px 24px -10px rgba(20,25,34,.22),0 1px 3px rgba(20,25,34,.07);
  --r-elev-3:0 18px 48px -14px rgba(20,25,34,.34);
}
[data-theme="dark"]{
  /* El oscuro parte del Negro #161618 del manual y baja desde ahi, manteniendo el
     matiz calido. La tarjeta s1 se eligio midiendo, no a ojo: el boton de accion
     #b74127 tiene que separarse de ella al menos 3:1 —es un componente, no texto—
     y con el #201f1d que salia natural daba 2,98. Con #1a1918 da 3,18. */
  --r-s0:#121211; --r-s1:#1a1918; --r-s2:#252320;
  /* La banda en oscuro se calculó para dar el MISMO 1,48 contra la tarjeta que
     el Gris del manual da en claro, manteniendo su matiz cálido (las mismas
     proporciones R>G>B del #dad4c8). No se eligió a ojo. */
  --r-banda:#393734;
  --r-line:#3a3730; --r-line-fuerte:#514c43;
  --r-t1:#f5f2ec; --r-t2:#b3aca0; --r-t3:#9a9387;
  --r-accion:#8fb4ee; --r-accion-txt:#0f131a;
  --r-accion-hover:#a9c6f3;
  --r-accion-hover:oklch(from var(--r-accion) calc(l + .07) c h);
  --r-accion-tinte:#232c3a;
  --r-accion-tinte:oklch(from var(--r-accion) .28 calc(c * .5) h);
  --r-foco:var(--r-accion);
  --r-marca:#f2f3f4;
  --r-bien:#6fc292; --r-bien-t:#152420;
  --r-ojo:#e0a83c;  --r-ojo-t:#2a2416;
  --r-mal:#e58a75;  --r-mal-t:#2e1d19;
  --r-elev-1:0 1px 2px rgba(0,0,0,.4);
  --r-elev-2:0 8px 24px -10px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.4);
  --r-elev-3:0 18px 48px -14px rgba(0,0,0,.7);
}

/* ── Paleta de datos · §2 ──────────────────────────────────────────────────
   🔴 PREFIJO --d-, NO --g-. El documento la nombraba --g-, pero admin.html ya
   declara --g-blue/red/yellow/green/blue-t/blue-line para el panel del
   asistente. Ningun nombre chocaba literalmente, pero un barrido de --g- en el
   Paso 8 se habria llevado el asistente por delante, y un grep habria mezclado
   los dos juegos para siempre. Verificado el 15-ago: --d- y --r- estan libres.

   No sigue a la interfaz: el verde es senal, el azul de accion es interfaz, y
   los datos tienen su propia familia. Una sola paleta y cuatro maneras de
   usarla — un tono nuevo en cualquiera la convierte en tres sistemas. */
:root{
  --d-tinta:#16191f;  --d-neutro:#c9dcee;  --d-enfasis:#0870ab;
  --d-1:#0870ab; --d-2:#cd5f09; --d-3:#0a9b74;
  --d-4:#c77ba5; --d-5:#e19f0d; --d-6:#5cb3e3; --d-otros:#d2d6da;
  /* secuencial = --d-1 a cinco luminancias */
  --d-r1:#e1eef5; --d-r2:#b0d1e4; --d-r3:#75afd0; --d-r4:#398dbc; --d-r5:#0870ab;
  /* divergente = --d-2 <-> --d-1 */
  --d-div-neg:#cd5f09; --d-div-pos:#0870ab;
  /* semantica = --d-3 / --d-5 / --d-2, en escalera de severidad */
  --d-bien:#0a9b74; --d-ojo:#996c09; --d-mal:#773705;
}
[data-theme="dark"]{
  --d-tinta:#f2f3f4;  --d-neutro:#2b4d68;  --d-enfasis:#6cc0ea;
  --d-1:#398dbc; --d-2:#d77f3a; --d-3:#3baf90;
  --d-4:#d295b7; --d-5:#e7b23d; --d-6:#7dc2e9; --d-otros:#c3c8cd;
  --d-r1:#14364a; --d-r2:#1d5273; --d-r3:#2b7399; --d-r4:#5aa0c4; --d-r5:#9fcbe2;
  --d-div-neg:#d77f3a; --d-div-pos:#398dbc;
  --d-bien:#93d3c2; --d-ojo:#e7b23d; --d-mal:#d98746;
}

/* ── El foco de teclado · §7 Paso 2 ────────────────────────────────────────
   Dos mitades, y el paso entrega las dos o no entrega nada:
   EL ANILLO, aca abajo. Y EL ALCANCE, que va con el Paso 5: las filas de datos
   no llevan tabindex, asi que hoy a las filas no se llega y ningun anillo las
   puede rescatar. Medido el 15-ago: 13 paradas de Tab en TODA la pantalla de
   Registro.

   🔴 Por que la primera linea existe. La especificacion proponia solo la regla
   :focus-visible con :where(), que tiene especificidad CERO — y perdia contra
   `.cbar input{outline:none}`, que tiene mas. Las 10 peores reglas seguian
   ganando y el paso no habria arreglado nada. Se quitaron esos outline:none de
   la regla base y se reponen aca SOLO para el foco que no es de teclado, que es
   lo que preserva el aspecto: con mouse se sigue viendo exactamente igual. */
:where(a,button,input,select,textarea):focus:not(:focus-visible){outline:none}

/* Solo controles reales. NO se incluye [tabindex]: una fila con tabindex dentro
   de una tarjeta con overflow:hidden se comeria el anillo hacia afuera, y hasta
   el Paso 5 esas filas todavia llevan su clase vieja. */
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--r-foco); outline-offset:2px;
}
/* Filas y celdas piden el anillo por dentro, explicitamente, al migrarse. */
.s-fila:focus-visible,.s-celda:focus-visible{
  outline:2px solid var(--r-foco); outline-offset:-2px;
}
/* Sobre el propio boton de accion el anillo se perderia contra su fondo:
   primero un anillo del color de la superficie, despues el de foco. */
.s-btn-accion:focus-visible{
  outline:none; box-shadow:0 0 0 2px var(--r-s1),0 0 0 4px var(--r-foco);
}

/* ── Los cuatro estados de datos · §7 Paso 3 ───────────────────────────────
   E1: toda superficie de datos tiene cuatro estados y se entregan los cuatro o
   no se entrega: con datos, cargando, vacio y error.
   Todo con tokens y en escala: espaciado 4/8/12/16/24/32, letra 11/12/13/16/20,
   radios 6/10/14. La zona sistema exige CERO deuda y el guardian lo comprueba. */
.s-estado{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:32px 16px; text-align:center; color:var(--r-t2);
}
.s-estado-t{ font-size:13px; font-weight:500; color:var(--r-t1); }
.s-estado-d{ font-size:12px; font-weight:400; color:var(--r-t2); max-width:32rem; }
.s-estado .s-btn-accion{ margin-top:4px; }

/* ERROR — E2: nunca un cero. Dice que no se pudo traer, que eso NO significa
   que no haya nada, y ofrece el ultimo dato bueno con su hora. */
.s-error{ border:1px solid var(--r-mal); background:var(--r-mal-t); border-radius:14px; }
.s-error .s-estado-t{ color:var(--r-mal); }
.s-error-viejo{
  margin-top:8px; padding:8px 12px; border-radius:10px;
  background:var(--r-s1); border:1px solid var(--r-line);
  font-size:12px; color:var(--r-t2);
}

/* VACIO — distinto del error a proposito: aca SI sabemos que no hay nada. */
.s-vacio{ border:1px dashed var(--r-line-fuerte); border-radius:14px; background:var(--r-s0); }

/* CARGANDO — esqueleto, no spinner: mantiene el alto y no salta el contenido. */
.s-cargando{ display:flex; flex-direction:column; gap:8px; padding:16px; }
.s-esq{
  height:16px; border-radius:6px; background:var(--r-s2);
  background-image:linear-gradient(90deg,var(--r-s2) 0%,var(--r-s0) 50%,var(--r-s2) 100%);
  background-size:200% 100%; animation:s-brillo 1.4s ease-in-out infinite;
}
@keyframes s-brillo{ from{background-position:200% 0} to{background-position:-200% 0} }

/* E4: con movimiento reducido, ningun indicador queda a medias. Se apaga el
   brillo pero el bloque sigue visible — un esqueleto sin animacion se lee como
   contenido cargando; uno invisible se lee como pantalla rota. */
@media (prefers-reduced-motion:reduce){
  .s-esq{ animation:none; background-image:none; }
}

/* ══ Los 16 componentes · §5 ════════════════════════════════════════════════
   Reemplazan a los 65 prefijos de pantalla. Nadie los usa todavia: el Paso 4
   los escribe y el Paso 5 los conecta, pantalla por pantalla.
   Escala obligatoria dentro de esta zona: espaciado 4/8/12/16/24/32 · letra
   11/12/13/16/20/28 · peso 400/500/600 · radio 6/10/14/20/999/50%. */

/* 01 · BOTON — C1: la accion es UNA y es fondo. Filtrar, ordenar y navegar NO
   son accion: cambian lo que miro, no el mundo. */
.s-btn,.s-btn-accion{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:36px; padding:8px 16px; border-radius:10px;
  font-family:inherit; font-size:13px; font-weight:500; line-height:1.2;
  cursor:pointer; border:1px solid transparent; white-space:nowrap;
}
.s-btn-accion{ background:var(--r-accion); color:var(--r-accion-txt); border-color:var(--r-accion); }
.s-btn-accion:hover{ background:var(--r-accion-hover); border-color:var(--r-accion-hover); }
.s-btn{ background:var(--r-s1); color:var(--r-t1); border-color:var(--r-line-fuerte); }
.s-btn:hover{ background:var(--r-s0); }
.s-btn-texto{ background:none; border-color:transparent; color:var(--r-accion); padding:8px; }
.s-btn-mal{ background:var(--r-mal); color:var(--r-s1); border-color:var(--r-mal); }
.s-btn[disabled],.s-btn-accion[disabled]{ opacity:.5; cursor:not-allowed; }
.s-btn-curso{ pointer-events:none; opacity:.7; }

/* 02 · CAMPO */
.s-campo{
  width:100%; min-height:36px; padding:8px 12px;
  border:1px solid var(--r-line-fuerte); border-radius:10px;
  background:var(--r-s1); color:var(--r-t1);
  font-family:inherit; font-size:13px; font-weight:400;
}
.s-campo::placeholder{ color:var(--r-t3); }
.s-campo-error{ border-color:var(--r-mal); }
.s-campo[disabled]{ background:var(--r-s2); color:var(--r-t3); cursor:not-allowed; }
.s-campo-calc{ background:var(--r-s2); font-variant-numeric:tabular-nums; text-align:right; }
.s-rotulo{
  display:block; margin-bottom:4px; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; color:var(--r-t2);
}

/* 03 · SENAL — C2: texto o icono sobre su tinte, NUNCA relleno solido. Un
   relleno solido compite con la accion, que es lo unico que se rellena. */
.s-senal{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:6px;
  font-size:11px; font-weight:600; white-space:nowrap;
  background:var(--r-s2); color:var(--r-t2);
}
.s-senal-bien{ background:var(--r-bien-t); color:var(--r-bien); }
.s-senal-ojo{ background:var(--r-ojo-t);  color:var(--r-ojo); }
.s-senal-mal{ background:var(--r-mal-t);  color:var(--r-mal); }
.s-punto{ width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--r-mal); }

/* 04 · CIFRA — C5: una cifra grande va en TINTA, nunca en color. El tamano ya
   dice que importa; pintarla gasta las senales. Unica excepcion: el signo de
   una variacion. N1/N2: tabulares, a la derecha, y nunca parte en dos. */
.s-cifra{
  font-size:28px; font-weight:600; line-height:1.1; color:var(--r-t1);
  font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:-.01em;
}
.s-num{
  font-size:13px; font-weight:500; color:var(--r-t1);
  font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right;
}
.s-delta-bien{ color:var(--r-bien); }
.s-delta-mal{ color:var(--r-mal); }

/* Componente 09 · RESUMEN DE PANTALLA · 17-ago
   Es el envase de A1: la zona de lectura donde vive el heroe. Nace ahora porque
   tres pantallas lo necesitan a la vez —Registro, Cuadre de caja e Insumos— y la
   alternativa era inventar rg-sum, cc-sum e iv-sum. Asi se llego a 66 prefijos.
   La cifra la pone .s-cifra, que ya existia. Esto solo aporta la caja y el rotulo.
   ⚠️ La primera tarjeta es el heroe y va sola: A1 dice UNO, ni dos ni cero. Las que
   siguen son apoyo y llevan cifra de 20, no de 28 — si todas fueran 28 no habria
   heroe, habria cuatro. */
.s-resumen{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.s-resumen-c{
  flex:1; min-width:160px; padding:12px 16px; border-radius:14px;
  border:1px solid var(--r-line); background:var(--r-s1);
}
.s-resumen-c .s-resumen-r{
  font-size:11px; font-weight:600; color:var(--r-t2);
  text-transform:uppercase; letter-spacing:.07em;
}
.s-resumen-c .s-cifra{ margin-top:4px; }
.s-resumen-c .s-resumen-s{ font-size:12px; color:var(--r-t2); margin-top:4px; }
/* Apoyo: mismo envase, cifra un escalon abajo. */
.s-resumen-c.s-resumen-ap .s-cifra{ font-size:20px; }
/* Cuando la tarjeta ES una alerta, el tinte la marca y el texto va en su propia
   senal — C2: la senal es texto sobre su tinte, nunca relleno solido. */
.s-resumen-c.s-resumen-ojo{ background:var(--r-ojo-t); border-color:var(--r-ojo); }
.s-resumen-c.s-resumen-ojo .s-resumen-r,
.s-resumen-c.s-resumen-ojo .s-cifra,
.s-resumen-c.s-resumen-ojo .s-resumen-s{ color:var(--r-ojo); }
.s-nulo{ color:var(--r-t3); }

/* 05 · FILA — absorbe las 15 clases -row. L4: el hover NUNCA comparte valor con
   la banda de grupo, o no se distingue estar encima de estar agrupado.
   L5: la barra de 2px significa siempre esta, y va en tinta. */
.s-fila{
  display:flex; align-items:center; gap:12px;
  padding:8px 12px; border-bottom:1px solid var(--r-line);
  background:var(--r-s1); cursor:pointer;
  border-left:2px solid transparent;
}
.s-fila:hover{ background:var(--r-s0); }
.s-fila-sel{ border-left-color:var(--r-t1); background:var(--r-s0); }
.s-fila-anulada{ opacity:.55; }
.s-fila-anulada .s-fila-nm{ text-decoration:line-through; }
.s-fila-nm{ font-size:13px; font-weight:500; color:var(--r-t1); }
.s-fila-sub{ font-size:12px; font-weight:400; color:var(--r-t2); }

/* 06 · TABLA — L3: la cabecera de columna es METADATO (sin relleno, 11px de
   rotulo); la banda de grupo lleva DATOS y va en caja normal a 13px. */
.s-tabla{ width:100%; border-collapse:collapse; font-size:13px; }
.s-tabla th{
  position:sticky; top:0; z-index:1;
  padding:8px 12px; text-align:left; background:var(--r-s1);
  border-bottom:1px solid var(--r-line-fuerte);
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; color:var(--r-t2); white-space:nowrap;
}
.s-tabla td{ padding:8px 12px; border-bottom:1px solid var(--r-line); vertical-align:middle; }
.s-tabla tbody tr:hover{ background:var(--r-s0); }
.s-tabla-num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.s-tabla-fija td:first-child,.s-tabla-fija th:first-child{
  position:sticky; left:0; background:var(--r-s1);
}
.s-tabla tfoot td{
  position:sticky; bottom:0; background:var(--r-s2);
  font-weight:600; border-top:1px solid var(--r-line-fuerte);
}
/* L6: la accion de fila va DENTRO de una celda existente, nunca en columna
   nueva. Se revela en hover y foco, y en telefono esta siempre.

   🔴 17-ago · DOS DEFECTOS, encontrados por Juan usando Documentos: «di clic en
   un lugar que no tenia nada y se oculto la fila... simplemente porque el icono
   esta escondido».
   1. La regla revelaba solo desde `tr:hover`, y el componente 05 · Fila es un
      DIV, no un <tr>. En cualquier pantalla de filas-div los controles quedaban
      invisibles para siempre.
   2. Y lo caro: con `opacity:0` el boton NO se ve pero SI recibe el clic. Un
      control invisible que igual responde es peor que uno ausente — el usuario
      dispara acciones que no sabe que existen. `opacity` oculta a la vista, no
      al puntero; eso lo hace `pointer-events`, y faltaba. */
.s-fila-acc{ opacity:0; pointer-events:none; }
tr:hover .s-fila-acc,tr:focus-within .s-fila-acc,
.s-fila:hover .s-fila-acc,.s-fila:focus-within .s-fila-acc{ opacity:1; pointer-events:auto; }

/* 07 · ENCABEZADO DE GRUPO */
.s-grupo{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 12px; background:var(--r-banda);
  font-size:13px; font-weight:500; color:var(--r-t1);
}
.s-grupo-n{ font-size:12px; font-weight:400; color:var(--r-t2); }

/* 08 · TARJETA */
.s-tarjeta{
  background:var(--r-s1); border:1px solid var(--r-line);
  border-radius:14px; padding:16px; box-shadow:var(--r-elev-1);
}
.s-tarjeta-plana{ box-shadow:none; }

/* 09 · RESUMEN DE PANTALLA — la zona de LECTURA arriba de una de TRABAJO. */
.s-resumen{ display:flex; flex-wrap:wrap; gap:24px; padding:16px; }
.s-resumen-i{ display:flex; flex-direction:column; gap:4px; }

/* 10 · BARRA DE ACCIONES */
.s-barra{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 0; }
.s-barra-sep{ flex:1; }

/* 11 · FILTRO SEGMENTADO — C4/L5: el activo NO lleva color de accion. Filtrar
   cambia lo que miro, no el mundo. Va en tinta con chip elevado. */
.s-seg{
  display:inline-flex; padding:2px; gap:2px;
  background:var(--r-s2); border-radius:10px;
}
.s-seg button{
  min-height:32px; padding:4px 12px; border:0; border-radius:6px;
  background:none; color:var(--r-t2);
  font-family:inherit; font-size:13px; font-weight:400; cursor:pointer;
  white-space:nowrap;
}
.s-seg button.on{
  background:var(--r-s1); color:var(--r-t1); font-weight:500;
  box-shadow:var(--r-elev-1);
}
/* Item de navegacion: misma forma, mismo color, barra de 2px en tinta. */
.s-nav-i{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-left:2px solid transparent;
  color:var(--r-t2); font-size:13px; font-weight:400; cursor:pointer;
}
.s-nav-i.on{ border-left-color:var(--r-t1); color:var(--r-t1); font-weight:500; }

/* 12 · NOTA — absorbe las 14 clases -sub/-hint. Las explicaciones largas van
   plegadas o detras del boton i, nunca en la celda. */
.s-nota{ font-size:12px; font-weight:400; color:var(--r-t2); line-height:1.5; }
.s-nota-aviso{
  padding:12px; border-radius:10px;
  background:var(--r-ojo-t); color:var(--r-ojo);
}
.s-i{
  width:20px; height:20px; border-radius:50%;
  border:1px solid var(--r-line-fuerte); background:var(--r-s1);
  color:var(--r-t2); font-size:11px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}

/* 14 · MODAL — en telefono es hoja inferior. Alto en dvh, nunca vh. */
.s-modal{
  background:var(--r-s1); border-radius:14px; padding:16px;
  box-shadow:var(--r-elev-3); max-height:90dvh; overflow:auto;
}
.s-modal-velo{ position:fixed; inset:0; background:var(--r-t1); opacity:.4; }

/* 15 · DESPLEGABLE */
.s-menu{
  background:var(--r-s1); border:1px solid var(--r-line);
  border-radius:10px; padding:4px; box-shadow:var(--r-elev-2);
}
.s-menu-i{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:6px;
  font-size:13px; font-weight:400; color:var(--r-t1); cursor:pointer;
}
.s-menu-i:hover{ background:var(--r-s0); }
.s-menu-i.on{ font-weight:500; }

/* 16 · TOAST — el de error no se va solo. */
.s-toast{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:10px;
  background:var(--r-t1); color:var(--r-s1);
  font-size:13px; font-weight:400; box-shadow:var(--r-elev-2);
}
.s-toast-mal{ background:var(--r-mal); }

/* ── Movil · §4 M3/M4/M11 ─────────────────────────────────────────────────
   M3: la fila DOBLA, no se convierte en tarjeta libre. Mismos campos, mismo
   orden. M4: pasa a tarjeta separada — pegadas por un borde, dos filas se leen
   como un bloque. M11: campo y boton a 44px, segmentado 36. */
@media (max-width:640px){
  .s-fila{
    flex-wrap:wrap; row-gap:4px;
    margin-bottom:8px; border:1px solid var(--r-line); border-radius:10px;
    border-left-width:2px;
  }
  .s-btn,.s-btn-accion{ min-height:44px; }
  .s-campo{ min-height:44px; font-size:16px; }
  .s-seg button{ min-height:36px; }
  .s-fila-acc{ opacity:1; pointer-events:auto; }
  .s-modal{ border-radius:20px 20px 0 0; max-height:92dvh; }
}

/* ══ El puente: los tokens fisicos apuntan a los roles ══════════════════════
   §8 lo prescribe: «los tokens fisicos SE QUEDAN apuntando a roles — 553
   funciones los leen por su nombre». Se adelanta al Paso 5 porque es el
   movimiento con mas efecto visible y menos riesgo de todo el upgrade: cambia
   las 31 pantallas a la vez sin tocar una sola funcion de render.

   Va al final del <style>, asi que gana por orden a las declaraciones de :root
   y de [data-theme="dark"] de mas arriba. Y no hace falta un bloque oscuro
   propio: --r-s1 y compania YA cambian con el tema, asi que --card los sigue
   solo. Eso es exactamente lo que la capa de roles vino a comprar.

   Reversible: se borra este bloque y todo vuelve a los valores viejos.

   El selector lleva las tres formas a proposito. El bloque oscuro original es
   :root[data-theme="dark"], que pesa (0,2,0); un :root pelado pesa (0,1,0) y
   PIERDE. Medido: con solo :root las seis pantallas en claro cambiaban y las
   seis en oscuro no se movian. */
:root,:root[data-theme="dark"],[data-theme="dark"]{
  /* superficie */
  --bg:var(--r-s0);
  --card:var(--r-s1);
  --soft:var(--r-s2);
  --soft2:var(--r-s2);
  --line:var(--r-line);
  /* texto */
  --ink:var(--r-t1);
  --mut:var(--r-t2);
  --mut2:var(--r-t3);
  /* accion — aca es donde el terracota pasa a azul marino en toda la app */
  --terra:var(--r-accion);
  --terra-t:var(--r-accion-tinte);
  /* El olivo NO sigue a la accion, aunque a primera vista lo pareciera. Se usa
     en rotulos de nota y encabezados de grupo de filtros, y pintarlos de azul
     ponia el color de accion en texto que no se puede tocar — justo lo que C1
     prohibe. Visto en Mensual, con tres bloques de ayuda en azul. Va a texto
     secundario, que es lo que esos rotulos son: metadato. */
  --olive:var(--r-t2);
  --olive-t:var(--r-s2);
  /* --seg-on era el negro de marca del filtro activo. L5: la marca de «esta»
     va en tinta, que es lo mismo que ya era. */
  --seg-on:var(--r-t1);
  /* senal */
  --green:var(--r-bien);   --green-t:var(--r-bien-t);
  --amber:var(--r-ojo);    --amber-t:var(--r-ojo-t);
  --red:var(--r-mal);
  /* La banda azul de cabecera de tabla desaparece como banda. L3 y el
     componente 06 mandan que la cabecera de columna sea METADATO: sobre la
     superficie de las filas, con rotulo gris de 11px, sin relleno de color.
     Medido antes de tocarlo: el rotulo daba 1,14 de contraste sobre la banda
     —invisible—, y el propio DESIGN.md ya lo advertia («sobre el azul, el gris
     apagado desaparece»). Ahora es la superficie hundida.

     🔴 17-ago · Y ESTE REMAPEO DEJO HUERFANA A --fab-ink, que era su pareja.
     --fab-ink es la tinta que va ENCIMA DE UN RELLENO FUERTE: #fff en claro,
     #1d1d20 en oscuro, porque en oscuro los rellenos se aclaran. Funcionaba
     mientras --blue fuera un azul saturado. Al volverlo SUPERFICIE, cada
     cabecera que decia «background:var(--blue); color:var(--fab-ink)» quedo
     ilegible EN LOS DOS TEMAS -- blanco sobre gris claro, y negro sobre gris
     oscuro. Medido en produccion, en el Chrome de Juan, recorriendo 25
     pantallas: la banda de grupo de Cuadre daba rgb(29,29,32) sobre
     rgb(32,36,41) = 1,08:1, y el titulo del grafico de Flujo lo mismo.
     Juan lo dijo sin medir nada: «el problema es los headings de las tablas o
     de las tarjetas de la app COMPLETA».

     LA REGLA QUE QUEDA: --fab-ink solo se usa sobre --terra, --red, --green y
     demas RELLENOS. Sobre --blue va tinta de superficie -- --mut para rotulo de
     columna (L3: la cabecera es metadato) y --ink para banda de grupo y titulo
     (L3: lo que lleva datos va en tinta, no en rotulo). Si alguna vez --blue
     vuelve a ser un relleno, esto se revisa junto. */
  --blue:var(--r-s2);
  --blue-t:var(--r-s2);
  /* Paso 7 · Graficos. G1: ningun color de grafico es el de accion, y ninguna
     marca lleva relleno de accion — ser pariente no molesta, ser el mismo si.
     G6: la paleta se deriva por tema, no son los mismos hex aclarados a ojo, y
     eso lo resuelve --d-* que ya trae su bloque oscuro.
     G7: una sola paleta. Los ocho --ch* de Google Charts colapsan en los seis
     categoricos; el septimo y el octavo reusan tono porque G4 dice que con mas
     de seis categorias la septima es «Otros» y si no se puede agrupar, el
     grafico esta mal elegido. */
  --ch1:var(--d-1); --ch2:var(--d-2); --ch3:var(--d-3); --ch4:var(--d-4);
  --ch5:var(--d-5); --ch6:var(--d-6); --ch7:var(--d-4); --ch8:var(--d-3);
  /* profundidad */
  --shadow:var(--r-elev-1);
  --shadow-lg:var(--r-elev-3);
}

/* ══ M11 · Los controles de estado dejan de usar el color de accion ═════════
   C4 y L5: el segmento activo, el chip de filtro y el item de nav NO llevan
   color de accion. Navegar y filtrar cambian lo que miro, no el mundo — y con
   la accion permanentemente en pantalla, «una accion por pantalla» es mentira.
   Van al patron del componente 11: chip elevado en tinta, o barra de 2px.

   La auditoria original de M11 listaba 7 selectores porque busco el terracota
   SOLIDO. Los dos que usan el TINTE se le escaparon y estan aca: .cj-sg.on y
   .utilbtn.on. Un token tiene familia; se busca la raiz, no el token exacto. */
.fl-chip.on,.cc-chip.on,.rc-chip.on,.cj-sg.on,.utilbtn.on{
  background:var(--r-s1); color:var(--r-t1); font-weight:500;
  border-color:var(--r-line-fuerte); box-shadow:var(--r-elev-1);
}
/* Los de modo edicion SI cambian el mundo —habilitan escribir— asi que se
   quedan con la accion. No son filtros. */
.rc-openbtn.on{ background:var(--r-s2); color:var(--r-t1); }

/* El switch «Ver» es estado, no accion: verde de senal, no azul de accion.
   El de «Edita» si hace dano y se queda en la accion. */
.sw input:checked+.track{ background:var(--r-bien); }
.sw.ed input:checked+.track{ background:var(--r-accion); }

/* ══ Paso 6 · Movil ═════════════════════════════════════════════════════════
   Va al final de la zona sistema, que a su vez va al final del <style>: el CSS
   es plano y el orden manda, asi que todo override responsive vive aca.

   M5 · Nada scrollea de lado. Ni la pagina, ni una fila de pildoras, ni las
   pestanas. Lo que no cabe, ENVUELVE. Una pildora fuera de vista es un control
   muerto: en 390px no hay forma de saber que existe. Medido antes de tocar: la
   pagina estaba bien pero .wrap scrolleaba en las siete pantallas probadas. */
@media (max-width:640px){
  /* El contenedor de pantalla no scrollea: lo que no entra, baja de renglon. */
  .wrap,.cc-wrap{ overflow-x:visible; }

  /* Toda fila de controles envuelve en vez de esconder. El selector es amplio a
     proposito: son 65 prefijos de pantalla y cada uno bautizo su barra de
     filtros distinto. Migrar clase por clase habria dejado la mitad afuera. */
  .filterbar,.cbar,.rg-seg,.rg-cls,.rg-fina,.fl-chips,.cc-chips,.rc-chips,.rc-barra,
  .tk-filtros,.ct-chips,.px-chips,.ve-chips,.dsc-chips,.s-seg,.s-barra{
    flex-wrap:wrap; overflow-x:visible; row-gap:8px;
  }

  /* M7 · Las pestanas del modulo son un segmentado de ancho completo. */
  .s-seg{ width:100%; }
  .s-seg button{ flex:1; }

  /* L1 · Las regiones scrollean; los hijos no se encogen. En una columna flex
     de alto fijo, todo hijo lleva flex-shrink:0 — sin eso el faltante se
     reparte y la tarjeta con overflow:hidden recorta su ultima fila. */
  .s-tarjeta > *,.s-modal > *{ flex-shrink:0; }

  /* M11 · Toques. La fila de dos renglones queda en 74px por su contenido; lo
     que se fija es el minimo de lo que se toca. */
  .btn,.mini,.lgbtn{ min-height:44px; }
  .selin,.lgin{ min-height:44px; font-size:16px; }
}

/* ══ C6 · El logotipo, enmascarado ══════════════════════════════════════════
   «La marca solo vive en el logotipo»: la marca en la puerta, el sistema
   adentro. --r-marca es ladrillo en claro y papel en oscuro, asi que el logo
   se lee en los dos temas sin tener dos PNG.

   Se pinta ENMASCARANDO el PNG, no con cadenas de filter: asi el color es
   exactamente el token y no una aproximacion que hay que recalibrar cada vez
   que el token cambia. El data-URI del propio <img> se copia a --logo-src
   desde JS, porque vive en el atributo y el CSS no lo puede leer solo.

   @supports con respaldo: sin soporte de mask-image el elemento quedaria como
   un rectangulo solido, asi que el enmascarado solo se activa donde funciona.
   Donde no, se ve el PNG original — peor color, pero logo al fin. */
@supports ((mask-image:none) or (-webkit-mask-image:none)){
  .logo[style*="--logo-src"],.ini-logo[style*="--logo-src"]{
    background-color:var(--r-marca);
    -webkit-mask-image:var(--logo-src); mask-image:var(--logo-src);
    -webkit-mask-size:contain;  mask-size:contain;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center;  mask-position:center;
    /* 🔴 17-ago · SIN ESTAS DOS LINEAS EL ENMASCARADO NO PINTABA NADA, y llevaba
       asi desde que se escribio. Un <img> dibuja su propio bitmap ENCIMA de su
       fondo: la mascara recortaba bien la silueta, pero el color que se veia era
       el del PNG y no el token. Medido muestreando el pixel pintado: el logotipo
       salia #b74127 en los DOS temas mientras --r-marca valia #93392a en claro y
       papel blanco en oscuro. O sea que C6 no se cumplia —ni el color de marca ni
       el logotipo en papel para el tema oscuro— y el token estaba correcto todo
       este tiempo. Juan lo vio como «el terracota de los botones no es el mismo
       color del logo».
       Se reemplaza el contenido del <img> por un pixel transparente: el fondo
       enmascarado pasa a ser lo unico que se ve. Y va DENTRO del @supports a
       proposito, para no tocar el respaldo — donde no hay mascara, el <img> sigue
       mostrando su PNG.
       El aspect-ratio es obligatorio: al cambiar el contenido a 1x1, un
       `width:auto` colapsaria el logo a un cuadrado. 130x48 es el PNG. */
    content:url("data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==");
    aspect-ratio:130/48;
  }
}
/* El ingreso conserva el terracota REAL de la marca, a 34px: es la puerta. */
.ini-logo[style*="--logo-src"]{ background-color:var(--r-marca-puerta); height:34px; }

/* ══ E3 (2/2) · El ALCANCE del teclado ══════════════════════════════════════
   La primera mitad —el anillo— entro en el Paso 2. Esta es la otra: sin
   tabindex, a las filas de datos NO SE LLEGA, y el anillo mas lindo del mundo
   no sirve si el elemento no esta en el recorrido. Medido antes: 13 paradas de
   Tab en toda la pantalla de Registro, ninguna era una fila.

   El anillo va por DENTRO (offset negativo) a proposito: una fila vive dentro
   de una tarjeta con overflow:hidden, y un anillo hacia afuera se recorta. */
[data-s-fila]:focus-visible{
  outline:2px solid var(--r-foco); outline-offset:-2px;
}
[data-s-fila]{ scroll-margin:16px; }

/* ══ Las cuatro notas de Juan del 15-ago ════════════════════════════════════

   NOTA 3 — la grave, y la causé yo. «TODAS las tablas del dashboard tienen el
   contraste equivocado: en claro no hay contraste (todo blanco), en oscuro no
   hay contraste (todo negro)».

   Qué pasó: la cabecera de tabla era una banda azul con texto BLANCO
   (--fab-ink). Al mandar --blue a la superficie hundida —correcto, L3 dice que
   la cabecera es metadato y no una banda de color— el texto se quedó blanco
   sobre gris claro. Arreglé el fondo y me olvidé del texto que iba encima.

   La lección: cambiar el fondo de algo obliga a revisar SU texto. Un token de
   superficie y uno de texto son familias separadas justo por esto (C8), y aun
   así se me pasó. */
/* 🔴 17-ago · LA CABECERA SE QUEDA SIN BANDA, QUE ES LO QUE L3 YA PEDÍA.
   El comentario de arriba dice «la cabecera es metadato y no una banda de
   color» y aun así le daba --r-s2, la superficie HUNDIDA — el mismo tono que
   llevan la banda de grupo y la fila de total. Resultado medido: cabecera 1,19
   contra la fila, fila de total 1,19 contra la fila, y las dos el mismo hex.
   Juan: «el mal contraste del heading en las tablas y las filas de acento que
   prácticamente coinciden con el color de fondo».
   ⚠️ Va --r-s1, la superficie de la TARJETA, no `transparent`: la cabecera es
   pegajosa y con fondo transparente las filas se le pasan por debajo al
   scrollear. Sin banda a la vista, pero opaca. */
thead th,.s-tabla th{
  background:var(--r-s1) !important;
  color:var(--r-t2) !important;
  border-bottom:1px solid var(--r-line-fuerte);
}
/* La fila que AGRUPA sí lleva peso: lleva datos, no rótulos. L3.
   Y ahora es la ÚNICA con relleno, así que se distingue por sí sola. El tono es
   el Gris #dad4c8 del manual, exacto — 1,48 contra la fila, muy por debajo del
   5,53 de la acción, que es la regla: la estructura no le grita más fuerte. */
.cc-grp,.fl-sec,.ve-total,.s-grupo{
  background:var(--r-banda); color:var(--r-t1);
}

/* NOTA 4 — «¿cuál mismo es la paleta? no hay armonía entre los acentos».
   Tenía razón: convivían un fondo ámbar y uno rojo en filas distintas, cada
   uno con su propia intensidad. C2 dice que la señal es texto o ícono sobre su
   TINTE, nunca relleno sólido — y un fondo de fila es lo más cercano a un
   relleno que hay. Los tres pasan a su tinte del sistema, que sí están
   armonizados entre sí porque salen de la misma familia. */
tr.ing-mal td,tr.rg-mal td,.rg-row.mal{ background:var(--r-mal-t); }
tr.ing-ojo td,tr.rg-ojo td,.rg-row.ojo{ background:var(--r-ojo-t); }
tr.ing-bien td,tr.rg-bien td,.rg-row.bien{ background:var(--r-bien-t); }
/* El total de una tabla no es una alarma: es un total. Va en la superficie
   hundida con la cifra en tinta, no en rojo — C5, y el rojo se reserva a lo
   que exige atención ahora. */
.ve-total td,.rg-tot td,tfoot td{ background:var(--r-banda); color:var(--r-t1); }

/* NOTA 2 — «en la pantalla de inicio al hacer login aún indica dashboard, debe
   ser igual que aquí, solo el logo». Es el mismo caso que el sidebar: el texto
   vivía aparte del logo, con letter-spacing de .34em para que se leyera como
   parte de la marca. Fuera: quien entra ya sabe a qué entra. */
.ini-brand-t{ display:none; }

/* ══ La acción en DOS niveles · aprobado por Juan el 17-ago ═════════════════
   Juan: «veo que TODO es azul... creo que sí queda muy bien usar el terracota
   para botones de acción y para ciertos acentos, pero quiero hacerlo de manera
   que respete un buen UX/UI».

   El problema medido no era el tono: era que 215 elementos compartían UN color.
   Devolver el terracota sin más habría dado 215 terracotas — el mismo problema
   que M1 cerró en julio, con otro tinte. Así que se parte en dos niveles:

     PRIMARIA   terracota, fondo sólido   ·  UNA por pantalla
     SECUNDARIA azul marino, contorno     ·  las que hagan falta
     ESTADO     tinta                     ·  ya estaba así

   El ojo va al elemento de mayor saturación. Con una sola acción primaria por
   pantalla, ese elemento SIEMPRE es el que importa; con 215, no lo es ninguno.
   Es el patrón de Airbnb: un color fuerte para «Reservar», contorno para el
   resto. */
:root,:root[data-theme="dark"],[data-theme="dark"]{
  /* 🔴 17-ago · #b74127, EL TERRACOTA DEL MANUAL DE MARCA. Juan, al ver el
     logotipo y el boton juntos por primera vez: «el color que el logo tenia antes
     era el correcto y es el color de terracota que deberia tener la webapp».
     Se mueve la app hacia el logo, no al reves.

     Y el manual explica de donde sale: el Terracota de la carta cromatica es
     #9e4e38 —que es EXACTAMENTE el `--terra` de la linea 139, el que el remapeo
     dio por muerto: no era un residuo, era la marca— y el manual dice que al
     logotipo «le hemos dado un poco mas de fuerza con el fin de hacerlo mas
     llamativo». Esa version con mas fuerza es #b74127, y es la que manda.
     A7: la marca y la accion son el MISMO terracota, o son dos colores.
     Blanco encima da 5,53:1, sobre el minimo de 4,5. */
  --r-accion:#b74127;
  --r-accion-hover:#c94f31;
  --r-accion-hover:oklch(from var(--r-accion) calc(l + .08) c h);
  --r-accion-tinte:#f6ece9;
  --r-accion-tinte:oklch(from var(--r-accion) .955 calc(c * .28) h);
  /* La secundaria es el azul que hasta hoy hacía de todo. No se pierde: se
     queda con lo que nunca tuvo color propio — enlaces, botones de apoyo, y el
     anillo de foco, donde un terracota sobre terracota no se vería. */
  --r-accion-2:#1b3a6b;
  --r-accion-2-tinte:#e8edf5;
  --r-foco:var(--r-accion-2);
}
/* 🔴 17-ago · ESTE BLOQUE NO GANABA, y por eso el tema oscuro usaba los valores
   del tema claro sin que nada avisara. El bloque de arriba lleva
   `:root[data-theme="dark"]` dentro de su lista de selectores, que pesa (0,2,0);
   este pesaba (0,1,0) y perdia el empate ENTERO. Y como la app pone data-theme
   SOLO en <html> (lineas 63 y 22263), no habia ninguna via por la que llegara.

   Lo que costo, medido ejecutando la pagina por el camino del usuario: el boton
   de accion de Registro daba 2,56:1 en oscuro -- fondo del tema claro con texto
   del tema oscuro. Es «el par fondo+texto se despega» de §12, por tercera vez el
   mismo dia. Se iguala la especificidad para que gane el que va despues.

   ⚠️ Y OJO CON MEDIRLO: poner data-theme tambien en el <body> da 7,30:1 y hace
   creer que esta bien. La app no lo hace. Todo chequeo de contraste entra por la
   misma puerta que el usuario o mide otra cosa.

   EL TERRACOTA NO SE ACLARA EN OSCURO. Decision de Juan, 17-ago: «a mi si me
   parece que queda bien cuando se aplica a los botones de accion». Queda #93392a
   en los dos temas, con texto BLANCO: 7,34:1. El #d98f79 que vivia aca no se
   aplico nunca, asi que borrarlo no mueve un pixel — solo deja de mentir. */
:root[data-theme="dark"],[data-theme="dark"]{
  --r-accion-tinte:#33231d;
  --r-accion-txt:#ffffff;
  /* La secundaria SI se aclara, y esto es lo que mas urgia: es el anillo de foco.
     Con #1b3a6b sobre una superficie oscura el anillo era invisible, o sea que E3
     no se cumplia en oscuro en ninguna pantalla. */
  --r-accion-2:#8fb4ee;
  --r-accion-2-tinte:#232c3a;
  --r-foco:var(--r-accion-2);
}

/* ── Nivel 1 · LA acción de la pantalla. Fondo sólido, una sola. ──────────── */
.btn,.rg-mas,.lgbtn,.gsm-save,.ai-go,.s-btn-accion{
  background:var(--r-accion); border-color:var(--r-accion); color:var(--r-accion-txt);
}
.btn:hover,.rg-mas:hover,.lgbtn:hover,.gsm-save:hover,.s-btn-accion:hover{
  background:var(--r-accion-hover); border-color:var(--r-accion-hover);
}

/* ── Nivel 2 · acciones de apoyo. Contorno azul, nunca relleno. ───────────
   «Ingresar abono» al lado de «Registrar un gasto»: las dos cambian el mundo,
   pero solo una es LA de esta pantalla. */
.btn.sec,.btn.ghost,.mini,.s-btn{
  background:var(--r-s1); color:var(--r-accion-2); border-color:var(--r-accion-2);
}
.btn.sec:hover,.btn.ghost:hover,.mini:hover,.s-btn:hover{
  background:var(--r-accion-2-tinte);
}
/* Los 59 usos en TEXTO o BORDE no son la acción primaria: son enlaces, íconos
   y bordes de apoyo. Se los queda el azul, donde no compiten con el botón. */
.ibtn,.rg-q:focus,a.lnk,.lnk{ color:var(--r-accion-2); }

/* ── Lo que NO es acción y todavía usaba el color ─────────────────────────
   Un filtro y un agarrador no cambian el mundo. Los chips ya pasaron en M11;
   aquí van los que se le escaparon a esa auditoría. */
.rp2-c.on{
  background:var(--r-s1); color:var(--r-t1); font-weight:500;
  border-color:var(--r-line-fuerte); box-shadow:var(--r-elev-1);
}
/* Ver arriba, junto a .side-grip: en reposo va transparente, con !important
   —la manija no es un elemento mas de la paleta de roles, es un control que
   se descubre solo al hover, y esta capa pintaba encima de esa intención. */
/* El modo edición SÍ cambia el mundo —habilita escribir encima— así que se
   queda con la primaria. No es un filtro. */
.foot-editb.on,.side-editbtn.on{ background:var(--r-accion); color:var(--r-accion-txt); }

/* ── La regla de conteo, ahora medible ────────────────────────────────────
   Más de un fondo sólido de acción en pantalla es un error, no un gusto. El
   guardián lo cuenta en tests/test_diseno.js: es contable, no opinable. */
/* ══ URGENTE 17-ago · Texto ilegible en toda la web ════════════════════════
   Juan: «hay titulos de tablas y botones con fondo gris claro y letra blanca,
   NO SE LEE. Y en oscuro el fondo es negro y la letra negra».

   Barrido midiendo contraste real sobre la pagina: 8 ilegibles en claro y 11 en
   oscuro. La causa es siempre la misma: una regla fija el color del TEXTO y otra
   el del FONDO, y al mover los tokens dejaron de cambiar juntas.

   Va con :root delante y !important a proposito. Los selectores viejos de estos
   elementos pesan mas que un [data-theme] pelado —el primer intento no gano el
   empate y el texto siguio invisible— asi que aca la especificidad es la
   herramienta, no un atajo. */

/* 1 · BOTONES · el par fondo+texto se fija junto, siempre. El caso roto era un
   .btn cuyo fondo lo pisaba otra regla y se quedaba con el texto claro encima. */
:root .btn,:root .rg-mas,:root .lgbtn,:root .gsm-save,:root .s-btn-accion{
  background:var(--r-accion) !important;
  color:var(--r-accion-txt) !important;
  border-color:var(--r-accion) !important;
}
/* 15-sep · Conciliación bancaria, del mismo tamaño que la acción primaria
   pero NO del mismo color — «más de un fondo sólido de acción en pantalla
   es un error, no un gusto» (arriba). Va DESPUÉS de la regla de :root .rg-mas
   y con el mismo !important: a igual especificidad gana quien viene después. */
:root .rg-mas-alt{ background:var(--ink) !important; color:var(--bg) !important; border-color:var(--ink) !important; }
:root .btn.sec,:root .btn.ghost,:root .mini,:root .s-btn{
  background:var(--r-s1) !important;
  color:var(--r-accion-2) !important;
  border-color:var(--r-accion-2) !important;
}

/* 2 · CABECERAS DE TABLA · el caso que Juan vio: rotulo blanco sobre gris claro.
   La cabecera de columna es METADATO: rotulo gris, SIN banda.
   🔴 17-ago · decia «sobre superficie hundida» y le daba --r-s2, el MISMO tono
   que la banda de grupo y la fila de total. Con las tres iguales nada se
   distinguia: medido, 1,19 en claro y 1,12 en oscuro. La cabecera pasa a la
   superficie de la tarjeta —sin banda, pero opaca porque es pegajosa— y el
   relleno queda solo para la fila que agrupa. Es lo que L3 pedia desde el
   principio; lo que fallaba era el token, no la regla. */
:root thead th,:root .s-tabla th,:root .rg-thead,:root .cc-thead,:root .pu-modh{
  background:var(--r-s1) !important;
  color:var(--r-t2) !important;
}

/* 3 · EL ACTIVO Y LOS ENLACES EN OSCURO · «Registro» salia negro sobre negro:
   la regla fijaba la tinta del tema claro sobre una superficie que si cambiaba.

   ⚠️ 17-ago · SALIA «.on» A SECAS Y PARTIA EL PAR FONDO+TEXTO DE 20 CHIPS.
   «.on» no es una clase de navegacion: la usan tambien los chips de filtro
   (.rg-seg button.on, .fl-chip.on, .rm-chip.on, .tq-chip.on, .cc-chip.on…), que
   fijan fondo Y texto en su PROPIA regla y por eso ya estaban bien en los dos
   temas. Pisarles solo el texto con !important los dejaba del color de su propio
   fondo. Medido ejecutando la pagina: .rg-seg button.on («Por pagar», Registro)
   daba rgb(242,243,244) sobre rgb(242,243,244) = 1,00:1 — invisible.
   Es exactamente la trampa que §12 del sistema visual nombra: «el par fondo+texto
   se fija en la MISMA regla, o se despega».
   El caso que esta regla vino a arreglar, .tabsnav a.on, es un <a> y ya lo cubre
   la ultima linea. .tab.on no existe: cero usos en el markup, medidos. */
:root[data-theme="dark"] a:not(.btn):not(.s-btn):not(.lgbtn):not(.anav){
  color:var(--r-t1) !important;
}

/* 4 · TEXTO SOBRE TINTE · un tinte es claro en los DOS temas, asi que la tinta
   del tema oscuro desaparece encima. Se le quita el fondo al hijo y hereda. */
:root .rg-sub,:root .rg-merc-t{
  background:transparent !important;
  color:var(--r-t2) !important;
}
:root[data-theme="dark"] .rg-sub,:root[data-theme="dark"] .rg-merc-t{
  color:var(--r-t1) !important;
}

/* ═══ ZONA SISTEMA · FIN ═══ */