/* ===========================================================================
   LAS FICHAS DE LA CASA · el único sitio donde se decide cómo se ve el sistema
   ===========================================================================

   Medido en la aplicación de Restaurant.pe con el navegador y escrito en
   docs/sistema_visual_restaurant_pe.md. Lo que hay que saber para usarlas:

   · UN SOLO TAMAÑO DE LETRA. Ellos pintan 14 px en 415 de 445 elementos. La
     jerarquía la hacen con el PESO (400 contra 700, nada de 500/600/800/900) y
     con el COLOR, NUNCA con el tamaño. Aquí hay TRES tamaños y no más:
     --fs (todo), --fs-titulo (el título de la pantalla) y --fs-cifra (la cifra
     grande de un KPI, que es un dibujo, no un texto).
   · AIRE FUERA, APRETADO DENTRO: entre bloques se respira; dentro de una
     rejilla no se regala un píxel (sus filas miden 23 px, las nuestras 26).

   CÓMO SE USAN: `font-size:var(--fs)`, `border-radius:var(--radio)`,
   `border:var(--borde-fino)`, `box-shadow:var(--sombra)`. Si alguien escribe
   otra vez `font-size:12px` a mano, la prueba tests/e2e/test_fichas_visuales.py
   lo cuenta y dice en qué fichero y en qué línea está.

   Y CADA FICHA NUEVA NECESITA SU PAREJA EN OSCURO: el tema oscuro es el POR
   DEFECTO de la casa. Los dos bloques de abajo son la misma lista.
   =========================================================================== */
:root{
  /* ---- las fichas: forma ---- */
  --fs:14px;              /* EL tamaño. Uno solo, como ellos. */
  --fs-titulo:18px;       /* la única excepción de arriba: el título de la pantalla */
  --fs-cifra:22px;        /* y la de abajo: la cifra grande de un KPI */
  --peso:400;             /* el texto normal */
  --peso-fuerte:700;      /* lo que destaca. No hay nada entre medias. */
  --radio:4px;            /* la esquina de casi todo */
  --radio-tarjeta:16px;   /* sólo las tarjetas grandes */
  --radio-pastilla:999px; /* pastillas y chips (los filtros que se quitan) */
  --borde-ancho:.8px;
  --borde-fino:.8px solid var(--border);
  /* ---- las fichas: LA DENSIDAD DE UNA REJILLA ----
     El aire que va DENTRO de una tabla de datos. Son cuatro números y están
     aquí para que no vuelvan a escribirse trece veces (el censo encontró veinte
     paddings distintos a mano en templates/pages/*.html). Los usan la clase
     `.rejilla` y la rejilla de captura `.xgrid`, las dos al final de este
     fichero. `3px` arriba y abajo es lo apretado que se puede estar SIN pegar
     el texto al filo: con 0 no se lee. */
  --rejilla-y:3px;        /* aire arriba y abajo dentro de la celda */
  --rejilla-x:9px;        /* aire a los lados */
  --rejilla-renglon:1.25; /* el renglón CORTO: el de los párrafos engorda la fila */
  --rejilla-fila:26px;    /* el alto de fila. Ellos 23; el tope de la casa, 34. */
  /* La sombra: MÍNIMA y del color del tema, no un manchón gris. La suya es
     `rgba(118,167,225,.2) 0 2px 2px`; sobre la tarjeta azul marino ese azul no
     se ve, así que en oscuro la misma forma con el negro azulado del fondo. */
  --sombra:0 2px 2px rgba(2,6,23,.55);
  /* El acento AZUL de enlaces y marcas. No sustituye a `--accent`, que es el
     verde de la casa (botones, marca): son dos cosas distintas y las dos hacen
     falta. 7.89:1 sobre la tarjeta oscura. */
  --acento:#7fb0e8;

  --bg:#0f172a;
  --card:#0f172a;
  --card2:#111c33;
  /* Gris AZULADO, no blanco de nieve: 13.75:1 sobre la tarjeta oscura. */
  --text:#dbe2f2;
  --muted:#9aa6c2;        /* 7.32:1 sobre la tarjeta oscura */
  --border:#1f2a44;
  --accent:#22c55e;
  --danger:#ef4444;
  --warn:#f59e0b;
  /* Ámbar para TEXTO, que no es el mismo que el ámbar para fondos y bordes.
     `--warn` está pensado para pintar, no para leer: sobre la tarjeta clara da
     3.64:1 y sobre la oscura el ámbar oscuro da 3.56:1 — los dos por debajo del
     4.5:1 que hace falta para leer un importe. Medido con la fórmula WCAG. */
  --warn-text:#f59e0b;   /* 8.31:1 sobre --card #0f172a */
  /* Mismo caso con el verde: `--accent` es para pintar botones y bordes, y
     sobre la tarjeta CLARA da 3.15:1 — un «Cobrado S/…» que no se lee. */
  --accent-text:#22c55e; /* 7.83:1 sobre --card #0f172a */
  --surface:#0a1327;
  --surface2:#12203b;
  --hover:rgba(255,255,255,.08);
  --shadow:0 18px 38px rgba(2,6,23,.28);
}

:root[data-theme="light"]{
  /* LA MISMA LISTA DE FICHAS, en claro. Lo que cambia de tema son los COLORES;
     la forma (tamaños, radios, pesos) es la misma en los dos. */
  --sombra:rgba(118,167,225,.2) 0 2px 2px;   /* la suya, tal cual */
  --acento:#2f6fb5;       /* el azul suyo es rgb(93,151,220): 3.03:1 sobre
                             blanco, no se lee. Éste es el mismo azul bajado de
                             tono hasta 5.17:1, que sí se lee. */

  --bg:#f3f8ff;           /* su fondo de página, azul muy claro */
  --card:#ffffff;
  --card2:#f8fafc;
  /* EL TEXTO NO ES NEGRO. El suyo es rgb(110,118,143) y da 4.52:1 sobre la
     tarjeta blanca y 4.23:1 sobre el fondo de página — por debajo del 4.5:1 de
     la casa en cuanto el texto se sale de la tarjeta. Estos dos son la misma
     familia de gris azulado con margen medido:
       --text  7.90:1 sobre tarjeta · 7.41:1 sobre fondo   (antes #172033: 16.27)
       --muted 5.21:1 sobre tarjeta · 4.88:1 sobre fondo */
  --text:#47516b;
  --muted:#646c86;
  --border:#cad1e1;       /* rgb(202,209,225), el borde suyo */
  --accent:#6e9c72;
  --danger:#dc2626;
  --warn:#b7791f;
  --warn-text:#b45309;   /* 5.02:1 sobre --card #ffffff */
  --accent-text:#15803d; /* 5.02:1 sobre --card #ffffff */
  --surface:#eef3f8;
  --surface2:#e8eef5;
  --hover:#eef3f8;
  --shadow:0 18px 38px rgba(15,23,42,.08);
}

*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}

.app{display:flex;min-height:100vh}
.sidebar{width:260px;background:#070d18;border-right:var(--borde-fino);padding:18px;display:flex;flex-direction:column;gap:18px}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:40px;height:40px;border-radius:var(--radio);background:var(--accent);display:flex;align-items:center;justify-content:center;color:#071018;font-weight:900}
.brand-name{font-weight:800}
.brand-sub{font-size:var(--fs);color:var(--muted);margin-top:2px}

.nav{display:flex;flex-direction:column;gap:10px}
.nav-item{padding:10px 12px;border-radius:var(--radio);background:transparent;border:var(--borde-ancho) solid transparent}
.nav-item:hover{border-color:var(--border);background:#0a1327}
.nav-item.active{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.10)}

.sidebar-footer{margin-top:auto}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{
  position:relative;
  z-index:140;
  overflow:visible;
  padding:18px 22px;
  border-bottom:var(--borde-fino);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.topbar-logo{
  width:132px;
  max-width:28vw;
  height:auto;
  object-fit:contain;
  display:block;
  margin-right:4px;
}
.topbar-heading{min-width:0}
.page-title{font-size:var(--fs-titulo);font-weight:var(--peso-fuerte)}
.page-sub{font-size:var(--fs);color:var(--muted);margin-top:3px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:var(--radio-pastilla);border:var(--borde-fino);background:#0a1327;color:var(--muted);font-size:var(--fs)}

/* Agenda/Tareas: accesos globales fijos en el topbar (transversales a las áreas) */
.topbar-globals{display:inline-flex;align-items:center;gap:6px}
.topbar-global-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:var(--radio-pastilla);
  border:var(--borde-fino);background:#0a1327;
  color:var(--text);font-size:var(--fs);font-weight:var(--peso-fuerte);
  white-space:nowrap;text-decoration:none;
}
.topbar-global-chip:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.topbar-global-chip.active{
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.34);
  color:#f0fdf4;
}
@media (max-width: 980px){
  .topbar-globals{ display:none; }
}

/* Barra de contexto: válvula "Más ▾" para lo que no entra a lo ancho */
.modulebar-context .modulebar-row{ overflow:visible; }
.ctx-more-wrap{ position:relative; display:inline-flex; }
.ctx-more[hidden]{ display:none; }
.ctx-more-panel{
  position:absolute; top:calc(100% + 6px); right:0; z-index:80;
  min-width:200px; display:flex; flex-direction:column; gap:4px;
  padding:8px; border-radius:var(--radio);
  background:var(--card); border:var(--borde-fino);
  box-shadow:var(--shadow);
}
.ctx-more-panel[hidden]{ display:none; }
.ctx-more-panel .module-trigger{ width:100%; justify-content:flex-start; }

.modulebar{
  position:relative;
  padding:0 24px 14px;
  border-bottom:var(--borde-fino);
  background:rgba(10,19,39,.78);
  backdrop-filter:saturate(140%) blur(6px);
  z-index:70;
}
.topbar-mega{
  flex:1;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  backdrop-filter:none;
  z-index:210;
}
/* Modales de página: deben quedar por encima del topbar (140) y del mega menú (210) */
.rc-modal-bg,
.op-modal-bg,
.mt-modal-bg,
.hk-modal-bg,
.rk-modal-bg{
  z-index:500 !important;
}
.topbar-mega .modulebar-row{
  min-height:42px;
  gap:6px;
  overflow-x:auto;
  overflow-y:visible;
  padding-right:4px;
}
.topbar-mega .module-trigger{
  padding:8px 12px;
  font-size:var(--fs);
}
.modulebar-context{
  padding:8px 24px;
  border-top:var(--borde-fino);
}
.modulebar-context .modulebar-row{
  min-height:48px;
  align-items:center;
}
.modulebar-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:46px;
  overflow:auto;
  scrollbar-width:thin;
}
.module-trigger{
  border:var(--borde-ancho) solid transparent;
  background:transparent;
  color:var(--text);
  border-radius:var(--radio);
  padding:9px 14px;
  font-size:var(--fs);
  font-weight:var(--peso-fuerte);
  letter-spacing:.24px;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
}
.module-trigger:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
}
.module-trigger.active{
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.34);
}
.module-trigger[aria-expanded="true"]{
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.34);
}
@media (min-width: 981px){
  .app{ display:block; }
  .sidebar{ display:none; }

  /* Mega menú: fila propia a ancho completo bajo el logo y controles */
  .topbar{ flex-wrap:wrap; row-gap:0; }
  .topbar-mega{
    order:10;
    flex:0 0 100%;
    width:100%;
    margin-top:10px;
    padding-top:10px;
    border-top:var(--borde-fino);
  }
  .topbar-mega .modulebar-row{
    flex-wrap:wrap;
    overflow:visible;
    gap:4px;
    padding-right:0;
  }
  /* Triggers compactos (sin mayúsculas) para que entren todos los permisos */
  .topbar-mega .module-trigger{
    text-transform:none;
    letter-spacing:.2px;
    font-size:var(--fs);
    font-weight:var(--peso-fuerte);
    padding:8px 12px;
  }
}

.mobile-menu-btn{
  display:none;
  width:36px;
  height:36px;
  border-radius:var(--radio);
  border:var(--borde-fino);
  background:rgba(255,255,255,.06);
  color:#eaf2ff;
  cursor:pointer;
  font-size:var(--fs-titulo);
  line-height:1;
  padding:0;
}
.mobile-menu-btn:hover{ background:rgba(255,255,255,.10); }

.sidebar-overlay{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.52);
  z-index:109;
}

.content{padding:22px}
.grid{display:grid;gap:14px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--card);border:var(--borde-fino);border-radius:var(--radio-tarjeta);padding:16px}
.card h3{margin:0 0 8px 0;font-size:var(--fs);color:var(--muted);font-weight:var(--peso-fuerte)}
.big{font-size:var(--fs-cifra);font-weight:var(--peso-fuerte)}
.btn{
  display:inline-flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:var(--radio);
  border:var(--borde-fino);
  background:rgba(255,255,255,.06);
  color:#eaf2ff;
  cursor:pointer;
  transition:.18s ease;
}
.btn.primary{
  border:none;
  background:#6e9c72;
  color:#ffffff;
  font-weight:var(--peso-fuerte);
  box-shadow:var(--sombra);
}
.btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.08);
}
.btn.primary:hover{ background:#5d8864; }
.btn:disabled,
.btn[disabled]{ opacity:.58; cursor:not-allowed; transform:none; }

/* Semantic tone helpers (shared across modules) */
.ok:not(button):not(a):not(input){ color:#86efac; font-weight:700; }
.warn{ color:#fde68a; font-weight:700; }
.err{ color:#fca5a5; font-weight:700; }
.pill.ok{
  border-color:rgba(134,239,172,.35) !important;
  background:rgba(134,239,172,.10) !important;
  color:#86efac !important;
}
.pill.warn{
  border-color:rgba(253,230,138,.35) !important;
  background:rgba(253,230,138,.10) !important;
  color:#fde68a !important;
}
.pill.err{
  border-color:rgba(248,113,113,.35) !important;
  background:rgba(248,113,113,.10) !important;
  color:#fca5a5 !important;
}

:root[data-theme="light"] .ok:not(button):not(a):not(input){ color:#15803d; font-weight:700; }
:root[data-theme="light"] .warn{ color:#b45309; font-weight:700; }
:root[data-theme="light"] .err{ color:#b91c1c; font-weight:700; }
:root[data-theme="light"] .pill.ok{
  border-color:rgba(34,197,94,.36) !important;
  background:rgba(34,197,94,.14) !important;
  color:#166534 !important;
}
:root[data-theme="light"] .pill.warn{
  border-color:rgba(245,158,11,.40) !important;
  background:rgba(245,158,11,.15) !important;
  color:#92400e !important;
}
:root[data-theme="light"] .pill.err{
  border-color:rgba(239,68,68,.36) !important;
  background:rgba(239,68,68,.14) !important;
  color:#991b1b !important;
}

.tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.tab{
  cursor:pointer;
  border:var(--borde-fino);
  background:rgba(255,255,255,.04);
  color:#eaf2ff;
  padding:8px 14px;
  border-radius:var(--radio-pastilla);
  transition:.18s ease;
}
.tab:hover{ background:rgba(255,255,255,.08); }
.tab.active{ background:rgba(255,255,255,.10); }

/* === Estilo unificado de formularios (dashboard style) === */
.content .field input,
.content .field select,
.content .field textarea,
.content input.input,
.content select.input,
.content textarea.input,
.content input[type="text"],
.content input[type="date"],
.content input[type="number"],
.content input[type="email"],
.content input[type="password"],
.content input[type="search"],
.content input[type="time"],
.content input[type="datetime-local"],
.content input[type="month"],
.content input[type="tel"],
.content input[type="url"],
.content input[type="file"],
.content textarea,
.content select {
  border-radius: var(--radio);
  border: var(--borde-fino);
  background: rgba(255,255,255,.04);
  color: #eaf2ff;
  /* 35 px DE ALTO, que es lo que mide el campo suyo: 14 px de letra con renglón
     1,4 (19,6) + 7 arriba + 7 abajo + 0,8 de borde por lado = 35,2. Antes eran
     10 y 10 y el campo salía a 41. */
  padding: 7px 12px;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0);
}

.content .field input:focus,
.content .field select:focus,
.content .field textarea:focus,
.content input.input:focus,
.content select.input:focus,
.content textarea.input:focus,
.content input[type="text"]:focus,
.content input[type="date"]:focus,
.content input[type="number"]:focus,
.content input[type="email"]:focus,
.content input[type="password"]:focus,
.content input[type="search"]:focus,
.content input[type="time"]:focus,
.content input[type="datetime-local"]:focus,
.content input[type="month"]:focus,
.content input[type="tel"]:focus,
.content input[type="url"]:focus,
.content input[type="file"]:focus,
.content textarea:focus,
.content select:focus {
  /* EL FILO DE LA CASILLA ACTIVA ES AZUL, como el de su hoja de cálculo. Era
     dorado (#c89b63) y el dorado en esta casa significa otra cosa. */
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}

.content select,
.content select option {
  background: #0b1220;
  color: #eaf2ff;
}

.content select option:checked {
  background: #0f1b33;
  color: #eaf2ff;
}

:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
.main{background:var(--bg)}
.nav-group { margin: 6px 0 10px; }

.nav-group-title{
  padding: 10px 12px;
  border-radius: var(--radio);
  color: rgba(255,255,255,.85);
  font-weight: 700;
}

.nav-group-title.active{
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.25);
}

.nav-sub{
  margin-top: 6px;
  padding-left: 12px;
  display: grid;
  gap: 6px;
}

.nav-sub-item{
  display:block;
  padding: 10px 12px;
  border-radius: var(--radio);
  color: rgba(255,255,255,.78);
  text-decoration:none;
  background: rgba(255,255,255,.04);
  border: var(--borde-fino);
}

.nav-sub-item:hover{
  background: rgba(255,255,255,.07);
}

.nav-sub-item.active{
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.28);
  color: #fff;
}
/* === Sidebar: grupo + submenú === */
.nav-group { margin: 8px 0 14px; }

.nav-group-title{
  padding: 10px 12px;
  border-radius: var(--radio);
  color: rgba(255,255,255,.9);
  font-weight: 800;
  letter-spacing: .2px;
}

.nav-group-title.active{
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.22);
}

.nav-sub{
  margin-top: 6px;
  padding-left: 14px;
  border-left: var(--borde-fino);
  display: grid;
  gap: 6px;
}

.nav-sub-item{
  display:block;
  padding: 9px 12px;
  border-radius: var(--radio);
  color: rgba(255,255,255,.78);
  text-decoration:none;
  background: rgba(255,255,255,.03);
  border: var(--borde-fino);
}

.nav-sub-item:hover{
  background: rgba(255,255,255,.06);
}

.nav-sub-item.active{
  background: rgba(34,197,94,.16);
  border-color: rgba(34,197,94,.28);
  color: #fff;
}
.brand{ display:flex;
  justify-content: center;
  align-items: center;
  padding: 14px 0 18px 0;
  }
  .brand-logo{
    width: 180px;
    max-width: 90%;
    height: auto;
    object-fit: contain;
    display: block;
    }


/* =========================================================
   IkamLodge — /usuarios tweaks (Feb 2026)
   - Keep existing table/buttons
   - Improve contrast for "Accesos" and "Reset pass"
   - Make "Crear nuevo usuario" look like login/change-password card
   ========================================================= */

/* Card style inspired by login/change-password */
.user-create-card{  background: #111827;
  border: var(--borde-fino);
  border-radius: var(--radio-tarjeta);
  padding: 32px 30px;
  box-shadow: var(--sombra);
}

.user-create-card h2{
  margin:0 0 6px 0;
  font-size:var(--fs-titulo);
  font-weight:var(--peso-fuerte);
  color:#ffffff;
}

.user-create-card .sub{
  color:#9bb3d6;
  font-size:var(--fs);
  margin-bottom:18px;
}

.user-create-card label{
  display:block;
  margin:18px 0 8px;
  font-size:var(--fs);
  color:#cfd9ea;
}

.user-create-card .field{
  width:100%;
  padding:12px 14px;
  border-radius:var(--radio);
  border:var(--borde-fino);
  background:#0a1a30;
  color:#ffffff;
  outline:none;
}

.user-create-card .field:focus{
  border-color:#c89b63;
  box-shadow:0 0 0 2px rgba(200,155,99,0.22);
}

.user-create-card .btn-gold{
  width:100%;
  margin-top:24px;
  padding:14px;
  border-radius:var(--radio);
  border:none;
  background:#6e9c72;
  color:#ffffff;
  font-weight:700;
  cursor:pointer;
  transition:0.2s ease;
}
.user-create-card .btn-gold:hover{ background:#5d8864; }

/* Higher-contrast outline buttons just for specific actions */
.btn-contrast{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: rgba(226,232,240,0.95) !important;
}
.btn-contrast:hover{
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.30) !important;
}

/* Make the "Administrar perfiles" button readable inside the card */
.user-create-card .btn.btn-outline{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}
/* =========================================================
   IkamLodge — SaaS Standard Components (Feb 2026)
   Reusable visual system inspired by /usuarios/{id}/accesos
   - Does NOT change existing .card/.btn defaults
   - Use .saas-card / .saas-section / .btn-gold / .btn-secondary
   ========================================================= */

:root{
  --saas-bg:#0f172a;
  --saas-card:#111827;
  --saas-border:#1f2937;
  --saas-soft:rgba(255,255,255,.05);
  --saas-soft2:rgba(255,255,255,.03);
  --saas-soft-border:rgba(255,255,255,.08);
  --saas-gold:#c89b63;
  --saas-text:#ffffff;
  --saas-muted:#94a3b8;
}

.saas-wrapper{ max-width:1200px; margin:0 auto; }

.saas-card{
  background:var(--saas-card);
  border:var(--borde-ancho) solid var(--saas-border);
  border-radius:var(--radio-tarjeta);
  padding:30px;
  box-shadow:var(--sombra);
}

.saas-section{
  background:var(--saas-soft2);
  border:var(--borde-ancho) solid var(--saas-soft-border);
  border-radius:var(--radio-tarjeta);
  padding:20px;
}

.btn-gold{
  padding:12px 20px;
  border-radius:var(--radio);
  border:none;
  background:#6e9c72;
  color:#ffffff;
  font-weight:var(--peso-fuerte);
  cursor:pointer;
  transition:.2s ease;
}
.btn-gold:hover{ background:#5d8864; }

.btn-secondary{
  padding:12px 20px;
  border-radius:var(--radio);
  border:var(--borde-ancho) solid rgba(255,255,255,.20);
  background:var(--saas-soft);
  color:var(--saas-text);
  cursor:pointer;
  transition:.2s ease;
}
.btn-secondary:hover{ background:rgba(255,255,255,.08); }

.btn-sm{ padding:10px 14px; border-radius:var(--radio); font-size:var(--fs); }

.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border-radius:var(--radio-pastilla);
  border:var(--borde-fino);
  background: rgba(255,255,255,.05);
  font-size:var(--fs);
  opacity:.95;
}

.topbar-right{display:flex;align-items:center;gap:10px;position:relative;z-index:150}
.topbar-theme{
  display:inline-flex;
  align-items:center;
  gap:8px;
  user-select:none;
}
.topbar-theme-label{
  font-size:var(--fs);
  color:var(--muted);
  font-weight:var(--peso-fuerte);
}
.topbar-theme .toggle{
  position:relative;
  width:44px;
  height:24px;
}
.topbar-theme .toggle input{
  opacity:0;
  width:0;
  height:0;
}
.topbar-theme .slider{
  position:absolute;
  cursor:pointer;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:#334155;
  transition:.3s;
  border-radius:var(--radio-pastilla);
}
.topbar-theme .slider:before{
  position:absolute;
  content:"";
  height:18px;
  width:18px;
  left:3px;
  bottom:3px;
  background:white;
  transition:.3s;
  border-radius:50%;
}
.topbar-theme .toggle input:checked + .slider{ background:#c89b63; }
.topbar-theme .toggle input:checked + .slider:before{ transform:translateX(20px); }

.user-menu-wrap{ position:relative; }
.user-menu-btn{
  cursor:pointer;
  border:var(--borde-fino);
  background:#0a1327;
  color:var(--text);
  min-height:38px;
}
.user-menu-caret{ font-size:var(--fs); opacity:.86; }
.user-menu{
  position:absolute;
  right:0;
  top:44px;
  min-width:240px;
  width:min(92vw, 280px);
  max-height:calc(100vh - 110px);
  overflow:auto;
  padding:8px;
  border-radius:var(--radio);
  border:var(--borde-fino);
  background:#0f172a;
  box-shadow:var(--shadow);
  z-index:95;
}
.user-menu-item{
  display:block;
  padding:10px 12px;
  border-radius:var(--radio);
  color:#dbeafe;
  font-size:var(--fs);
  font-weight:var(--peso-fuerte);
}
.user-menu-item:hover{ background:rgba(255,255,255,.06); }
.user-menu-item.danger{
  color:#fecaca;
  border:1px solid rgba(248,113,113,.28);
  background:rgba(248,113,113,.10);
}
.user-menu-item.danger:hover{ background:rgba(248,113,113,.18); }
.user-menu-sep{
  height:1px;
  margin:6px 4px;
  background:rgba(255,255,255,.10);
}

.notif-wrap{position:relative}
.notif-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:var(--radio);
  border:var(--borde-fino);
  background:rgba(255,255,255,.06);
  color:#eaf2ff;
  cursor:pointer;
  text-decoration:none;
}
.notif-count{
  position:absolute;
  top:-6px;
  right:-6px;
  /* La chapa crece a 20 px porque el número pasa a medir 14 como todo lo demás:
     con los 18 px de antes, un «12» tocaba el borde. */
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:var(--radio-pastilla);
  background:#ef4444;
  color:#fff;
  font-size:var(--fs);
  line-height:20px;
  text-align:center;
  border:1px solid rgba(0,0,0,.25);
}
.notif-panel{
  position:absolute;
  right:0;
  top:46px;
  width:min(380px, 86vw);
  max-height:65vh;
  overflow:hidden;
  background:#0f172a;
  border:var(--borde-fino);
  border-radius:var(--radio);
  box-shadow:var(--shadow);
  z-index:80;
}
.notif-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:var(--borde-fino);
}
.notif-read-all{
  border:0;
  background:transparent;
  color:var(--acento);
  cursor:pointer;
  font-size:var(--fs);
}
.notif-list{max-height:54vh; overflow:auto;}
.notif-item{
  display:block;
  padding:10px 12px;
  border-bottom:var(--borde-fino);
  color:#eaf2ff;
}
.notif-item:hover{background:rgba(255,255,255,.05)}
.notif-item.unread{background:rgba(200,155,99,.08)}
.notif-title{font-weight:var(--peso-fuerte); font-size:var(--fs); margin-bottom:2px}
.notif-body{font-size:var(--fs); color:var(--text)}
.notif-time{font-size:var(--fs); color:var(--muted); margin-top:4px}
.notif-empty{padding:14px 12px; font-size:var(--fs); color:var(--muted)}

[hidden]{display:none !important;}

/* === Sidebar colapsable por grupos === */
.nav-group-title{
  width:100%;
  text-align:left;
  cursor:pointer;
  background:transparent;
}

.nav-group .nav-sub{
  display:none;
}

.nav-group.open .nav-sub{
  display:grid;
}

.kpis { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; }
.kpi {
  padding:14px;
  border-radius:var(--radio-tarjeta);
  border:var(--borde-fino);
  background: rgba(255,255,255,.04);
}
.kpi .k { font-size:var(--fs); opacity:.75; }
.kpi .v { font-size:var(--fs-cifra); font-weight:var(--peso-fuerte); margin-top:4px; }

.chartCard{
  padding:16px;
  border-radius:var(--radio-tarjeta);
  border:var(--borde-fino);
  background: rgba(255,255,255,.04);
}

/* ===== Tema claro global ===== */
:root[data-theme="light"] body{ background:var(--bg); color:var(--text); }
:root[data-theme="light"] body{
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.72), rgba(255,255,255,0) 26%),
    linear-gradient(180deg, #fbfcfe 0%, var(--bg) 100%);
}
:root[data-theme="light"] .sidebar{
  background:var(--surface);
  border-right:var(--borde-fino);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.65);
}
:root[data-theme="light"] .brand-logo{ filter:none; }

:root[data-theme="light"] .nav-item{
  color:var(--text);
  border-color:transparent;
}
:root[data-theme="light"] .nav-item:hover{
  border-color:var(--border);
  background:var(--hover);
}
:root[data-theme="light"] .nav-item.active{
  border-color:rgba(110,156,114,.30);
  background:rgba(110,156,114,.15);
  color:#46704d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}

:root[data-theme="light"] .nav-group-title,
:root[data-theme="light"] .nav-sub-item{ color:#0f172a; }
:root[data-theme="light"] .nav-group-title.active{
  background:rgba(110,156,114,.12);
  border:1px solid rgba(110,156,114,.22);
}
:root[data-theme="light"] .nav-sub{ border-left:var(--borde-fino); }
:root[data-theme="light"] .nav-sub-item{
  background:rgba(255,255,255,.88);
  border:var(--borde-fino);
}
:root[data-theme="light"] .nav-sub-item:hover{ background:var(--hover); }
:root[data-theme="light"] .nav-sub-item.active{
  background:rgba(110,156,114,.15);
  border-color:rgba(110,156,114,.30);
  color:#46704d;
}

:root[data-theme="light"] .topbar{
  background:rgba(255,255,255,.88);
  border-bottom:var(--borde-fino);
  backdrop-filter:saturate(160%) blur(12px);
}
:root[data-theme="light"] .chip{
  background:var(--card2);
  color:#334155;
  border-color:var(--border);
}
:root[data-theme="light"] .topbar-global-chip{
  background:var(--card2);
  color:#334155;
  border-color:var(--border);
}
:root[data-theme="light"] .topbar-global-chip:hover{
  background:#eef3f8;
  border-color:var(--border);
}
:root[data-theme="light"] .topbar-global-chip.active{
  background:rgba(34,197,94,.16);
  border-color:rgba(34,197,94,.45);
  color:#166534;
}
:root[data-theme="light"] .topbar-theme-label{ color:#64748b; }
:root[data-theme="light"] .topbar-theme .slider{ background:#cbd5e1; }
:root[data-theme="light"] .user-menu-btn{
  background:var(--card2);
  border-color:var(--border);
  color:#0f172a;
}
:root[data-theme="light"] .user-menu{
  background:#ffffff;
  border-color:var(--border);
  box-shadow:var(--shadow);
}
:root[data-theme="light"] .user-menu-item{ color:#0f172a; }
:root[data-theme="light"] .user-menu-item:hover{ background:#eef3f8; }
:root[data-theme="light"] .user-menu-item.danger{
  color:#b91c1c;
  border-color:rgba(239,68,68,.28);
  background:rgba(239,68,68,.10);
}
:root[data-theme="light"] .user-menu-sep{ background:rgba(148,163,184,.24); }
:root[data-theme="light"] .notif-btn{
  border-color:var(--border);
  background:var(--card2);
  color:#0f172a;
}
:root[data-theme="light"] .mobile-menu-btn{
  border-color:var(--border);
  background:var(--card2);
  color:var(--text);
}
:root[data-theme="light"] .mobile-menu-btn:hover{ background:var(--hover); }
:root[data-theme="light"] .modulebar{
  background:rgba(255,255,255,.84);
  border-bottom:var(--borde-fino);
}
:root[data-theme="light"] .topbar-mega{
  background:transparent;
  border-bottom:0;
}
:root[data-theme="light"] .modulebar-context{
  border-top:var(--borde-fino);
}
:root[data-theme="light"] .module-trigger{
  color:#0f172a;
}
:root[data-theme="light"] .module-trigger:hover{
  background:#f8fafc;
  border-color:var(--border);
}
:root[data-theme="light"] .module-trigger.active{
  background:rgba(110,156,114,.16);
  border-color:rgba(110,156,114,.34);
  color:#46704d;
}
:root[data-theme="light"] .module-trigger[aria-expanded="true"]{
  background:rgba(110,156,114,.16);
  border-color:rgba(110,156,114,.34);
  color:#46704d;
}
:root[data-theme="light"] .card,
:root[data-theme="light"] .kpi,
:root[data-theme="light"] .chartCard,
:root[data-theme="light"] .saas-card,
:root[data-theme="light"] .saas-section,
:root[data-theme="light"] .user-create-card{
  background:var(--card) !important;
  border-color:var(--border) !important;
  color:var(--text) !important;
  /* La sombra de la ficha, no el manchón de 38 px: la tarjeta se levanta 2 px
     del fondo y ya. `--shadow` se queda para lo que FLOTA (menús, modales). */
  box-shadow:var(--sombra) !important;
}

:root[data-theme="light"] .user-create-card h2,
:root[data-theme="light"] .user-create-card .sub,
:root[data-theme="light"] .user-create-card label,
:root[data-theme="light"] .kpi .k,
:root[data-theme="light"] .notif-body,
:root[data-theme="light"] .notif-time,
:root[data-theme="light"] .notif-empty,
:root[data-theme="light"] .page-sub,
:root[data-theme="light"] .card h3{ color:var(--muted) !important; }

:root[data-theme="light"] .btn,
:root[data-theme="light"] .btn-secondary,
:root[data-theme="light"] .btn-contrast,
:root[data-theme="light"] .tab{
  background:var(--card2) !important;
  border:var(--borde-fino) !important;
  color:var(--text) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
:root[data-theme="light"] .btn:hover,
:root[data-theme="light"] .btn-secondary:hover,
:root[data-theme="light"] .btn-contrast:hover,
:root[data-theme="light"] .tab:hover{ background:var(--hover) !important; }
:root[data-theme="light"] .btn.primary,
:root[data-theme="light"] .btn-gold,
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .rt-btn.primary,
:root[data-theme="light"] .cal-btn.primary,
:root[data-theme="light"] .rf-btn.primary,
:root[data-theme="light"] .face-btn.primary,
:root[data-theme="light"] .padron-btn-primary,
:root[data-theme="light"] #caja-page .btn-primary{
  background:#6e9c72 !important;
  border-color:#6e9c72 !important;
  color:#ffffff !important;
  box-shadow:var(--sombra) !important;
}
:root[data-theme="light"] .btn.primary:hover,
:root[data-theme="light"] .btn-gold:hover,
:root[data-theme="light"] .btn-primary:hover,
:root[data-theme="light"] .rt-btn.primary:hover,
:root[data-theme="light"] .cal-btn.primary:hover,
:root[data-theme="light"] .rf-btn.primary:hover,
:root[data-theme="light"] .face-btn.primary:hover,
:root[data-theme="light"] .padron-btn-primary:hover,
:root[data-theme="light"] #caja-page .btn-primary:hover{
  background:#5d8864 !important;
  border-color:#5d8864 !important;
}

:root[data-theme="light"] .content .field input,
:root[data-theme="light"] .content .field select,
:root[data-theme="light"] .content .field textarea,
:root[data-theme="light"] .content input.input,
:root[data-theme="light"] .content select.input,
:root[data-theme="light"] .content textarea.input,
:root[data-theme="light"] .content input[type="text"],
:root[data-theme="light"] .content input[type="date"],
:root[data-theme="light"] .content input[type="number"],
:root[data-theme="light"] .content input[type="email"],
:root[data-theme="light"] .content input[type="password"],
:root[data-theme="light"] .content input[type="search"],
:root[data-theme="light"] .content input[type="time"],
:root[data-theme="light"] .content input[type="datetime-local"],
:root[data-theme="light"] .content input[type="month"],
:root[data-theme="light"] .content input[type="tel"],
:root[data-theme="light"] .content input[type="url"],
:root[data-theme="light"] .content input[type="file"],
:root[data-theme="light"] .content textarea,
:root[data-theme="light"] .content select,
:root[data-theme="light"] .user-create-card .field,
:root[data-theme="light"] .content .user-form input,
:root[data-theme="light"] .content .user-form select,
:root[data-theme="light"] .content .reset-input,
:root[data-theme="light"] .content .perm-filter-select{
  background:var(--card2) !important;
  color:var(--text) !important;
  border:var(--borde-fino) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}

:root[data-theme="light"] .content select,
:root[data-theme="light"] .content select option{
  background:var(--card2) !important;
  color:var(--text) !important;
}
:root[data-theme="light"] .content .field input:focus,
:root[data-theme="light"] .content .field select:focus,
:root[data-theme="light"] .content .field textarea:focus,
:root[data-theme="light"] .content input.input:focus,
:root[data-theme="light"] .content select.input:focus,
:root[data-theme="light"] .content textarea.input:focus,
:root[data-theme="light"] .content input[type="text"]:focus,
:root[data-theme="light"] .content input[type="date"]:focus,
:root[data-theme="light"] .content input[type="number"]:focus,
:root[data-theme="light"] .content input[type="email"]:focus,
:root[data-theme="light"] .content input[type="password"]:focus,
:root[data-theme="light"] .content input[type="search"]:focus,
:root[data-theme="light"] .content input[type="time"]:focus,
:root[data-theme="light"] .content input[type="datetime-local"]:focus,
:root[data-theme="light"] .content input[type="month"]:focus,
:root[data-theme="light"] .content input[type="tel"]:focus,
:root[data-theme="light"] .content input[type="url"]:focus,
:root[data-theme="light"] .content input[type="file"]:focus,
:root[data-theme="light"] .content textarea:focus,
:root[data-theme="light"] .content select:focus,
:root[data-theme="light"] .content .reset-input:focus,
:root[data-theme="light"] .content .user-form input:focus,
:root[data-theme="light"] .content .user-form select:focus,
:root[data-theme="light"] .content .perm-filter-select:focus{
  border-color:var(--acento) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.75) !important;
}

:root[data-theme="light"] .notif-panel{
  background:var(--card);
  border:var(--borde-fino);
  box-shadow:var(--shadow);
}
:root[data-theme="light"] .notif-head{ border-bottom:var(--borde-fino); }
:root[data-theme="light"] .notif-read-all{ color:#2563eb; }
:root[data-theme="light"] .notif-item{ color:var(--text); border-bottom:var(--borde-fino); }
:root[data-theme="light"] .notif-item:hover{ background:var(--hover); }
:root[data-theme="light"] .notif-item.unread{ background:rgba(200,155,99,.18); }

/* ===== Refuerzo de contraste (modo claro) ===== */
:root[data-theme="light"] .content,
:root[data-theme="light"] .content p,
:root[data-theme="light"] .content span:not([class]),
:root[data-theme="light"] .content strong,
:root[data-theme="light"] .content b,
:root[data-theme="light"] .content li,
:root[data-theme="light"] .content td,
:root[data-theme="light"] .content th,
:root[data-theme="light"] .content label,
:root[data-theme="light"] .content .title,
:root[data-theme="light"] .content .big,
:root[data-theme="light"] .content .status,
:root[data-theme="light"] .content .statusBox,
:root[data-theme="light"] .content .table,
:root[data-theme="light"] .content .table td,
:root[data-theme="light"] .content .table th,
:root[data-theme="light"] .content .pill,
:root[data-theme="light"] .content .badge,
:root[data-theme="light"] .content .nps-pill,
:root[data-theme="light"] .content .perm-title,
:root[data-theme="light"] .content .perm-desc,
:root[data-theme="light"] .content .text-muted{
  /* AQUÍ VIVÍA EL NEGRO. Estas 24 líneas clavaban #0f172a —casi negro, 16,3:1
     sobre la tarjeta— en TODO el texto del tema claro, con !important, así que
     cambiar la ficha `--text` no movía ni un píxel. Con la variable puesta, el
     texto de la casa pasa a ser el gris azulado de la ficha (7,9:1) en las 163
     pantallas de golpe. */
  color:var(--text) !important;
}

:root[data-theme="light"] .content .muted,
:root[data-theme="light"] .content .page-sub,
:root[data-theme="light"] .content .perm-desc,
:root[data-theme="light"] .content small,
:root[data-theme="light"] .content .sub,
:root[data-theme="light"] .content [style*="color:#94a3b8"],
:root[data-theme="light"] .content [style*="color:#cbd5e1"]{
  color:var(--muted) !important;
  opacity:1 !important;
}

:root[data-theme="light"] .content [style*="color:#eaf2ff"],
:root[data-theme="light"] .content [style*="color:#fff"],
:root[data-theme="light"] .content [style*="color: white"],
:root[data-theme="light"] .content [style*="color:#ffffff"]{
  color:var(--text) !important;
}

:root[data-theme="light"] .content .divider,
:root[data-theme="light"] .content hr{
  background:rgba(15,23,42,.12) !important;
  border-color:rgba(15,23,42,.12) !important;
}

:root[data-theme="light"] .content .tableWrap,
:root[data-theme="light"] .content .miniTable,
:root[data-theme="light"] .content table,
:root[data-theme="light"] .content .status,
:root[data-theme="light"] .content .statusBox,
:root[data-theme="light"] .content .pill,
:root[data-theme="light"] .content .badge,
:root[data-theme="light"] .content .nps-pill,
:root[data-theme="light"] .content .section-box,
:root[data-theme="light"] .content .reset-card,
:root[data-theme="light"] .content .access-card,
:root[data-theme="light"] .content .subCard,
:root[data-theme="light"] .content .panel{
  border-color:var(--border) !important;
}

:root[data-theme="light"] .content .table th,
:root[data-theme="light"] .content .table td,
:root[data-theme="light"] .content .miniTable th,
:root[data-theme="light"] .content .miniTable td,
:root[data-theme="light"] .content th,
:root[data-theme="light"] .content td{
  border-bottom-color:var(--border) !important;
}

:root[data-theme="light"] .content .status,
:root[data-theme="light"] .content .statusBox,
:root[data-theme="light"] .content .pill,
:root[data-theme="light"] .content .badge,
:root[data-theme="light"] .content .nps-pill,
:root[data-theme="light"] .content .kpi,
:root[data-theme="light"] .content .chartCard,
:root[data-theme="light"] .content .section-box,
:root[data-theme="light"] .content .reset-card,
:root[data-theme="light"] .content .access-card,
:root[data-theme="light"] .content .subCard,
:root[data-theme="light"] .content .panel,
:root[data-theme="light"] .content .perm-item,
:root[data-theme="light"] .content .rt-status,
:root[data-theme="light"] .content .rt-card,
:root[data-theme="light"] .content .cal-card,
:root[data-theme="light"] .content .cal-status,
:root[data-theme="light"] .content .rf-card,
:root[data-theme="light"] .content .rf-status{
  background:var(--card2) !important;
}

:root[data-theme="light"] .content .cellBtn,
:root[data-theme="light"] .content .tab,
:root[data-theme="light"] .content .btn-outline{
  color:var(--text) !important;
  border-color:var(--border) !important;
}
:root[data-theme="light"] .content .tableWrap,
:root[data-theme="light"] .content .miniTable,
:root[data-theme="light"] .content table,
:root[data-theme="light"] .content .access-card,
:root[data-theme="light"] .content .reset-card{
  background:var(--card) !important;
  box-shadow:var(--shadow) !important;
}
:root[data-theme="light"] .content .table th,
:root[data-theme="light"] .content th{
  /* OPACO (mismo tono que el rgba .08 sobre tarjeta): un fondo translúcido
     deja ver las filas debajo de las cabeceras sticky al hacer scroll. */
  background:color-mix(in srgb, #94a3b8 8%, var(--card)) !important;
}
:root[data-theme="light"] .content .perm-item:hover{
  background:var(--hover) !important;
}
:root[data-theme="light"] .content .user-create-title,
:root[data-theme="light"] .content .section-title,
:root[data-theme="light"] .content .reset-title,
:root[data-theme="light"] .content .access-card h3{
  color:var(--text) !important;
}
:root[data-theme="light"] .content .user-create-sub{
  color:var(--muted) !important;
}
:root[data-theme="light"] .content .perm-module-title{
  color:#314056 !important;
}
:root[data-theme="light"] .content .perm-badge{
  background:#eef3f8 !important;
  color:#3f4b5d !important;
}
:root[data-theme="light"] .content .perm-badge.excepcion{
  color:#7c4a14 !important;
  border-color:rgba(200,155,99,.44) !important;
}
:root[data-theme="light"] .content .perm-badge.denegado{
  color:#b91c1c !important;
  border-color:rgba(220,38,38,.32) !important;
}
:root[data-theme="light"] .content [style*="background:#111827"],
:root[data-theme="light"] .content [style*="background: #111827"],
:root[data-theme="light"] .content [style*="background:#0b1220"],
:root[data-theme="light"] .content [style*="background: #0b1220"]{
  background:var(--card2) !important;
}
:root[data-theme="light"] .content [style*="border:1px solid rgba(255,255,255"],
:root[data-theme="light"] .content [style*="border: 1px solid rgba(255,255,255"]{
  border-color:var(--border) !important;
}
:root[data-theme="light"] .content [style*="background:rgba(255,255,255,.03)"],
:root[data-theme="light"] .content [style*="background: rgba(255,255,255,.03)"],
:root[data-theme="light"] .content [style*="background:rgba(255,255,255,.04)"],
:root[data-theme="light"] .content [style*="background: rgba(255,255,255,.04)"],
:root[data-theme="light"] .content [style*="background:rgba(255,255,255,.05)"],
:root[data-theme="light"] .content [style*="background: rgba(255,255,255,.05)"],
:root[data-theme="light"] .content [style*="background:rgba(255,255,255,.06)"],
:root[data-theme="light"] .content [style*="background: rgba(255,255,255,.06)"]{
  background:var(--card2) !important;
}

:root[data-theme="light"] .caja-detalle .detail-topbar{
  border-bottom:var(--borde-fino) !important;
}
:root[data-theme="light"] .caja-detalle .page-title .title,
:root[data-theme="light"] .caja-detalle .gasto-summary .main,
:root[data-theme="light"] .caja-detalle .gasto-detail-box .value{
  color:var(--text) !important;
}
:root[data-theme="light"] .caja-detalle .page-title .subtitle,
:root[data-theme="light"] .caja-detalle .muted,
:root[data-theme="light"] .caja-detalle .gasto-summary .sub,
:root[data-theme="light"] .caja-detalle .gasto-detail-box .label,
:root[data-theme="light"] .caja-detalle .gasto-items th{
  color:var(--muted) !important;
}
:root[data-theme="light"] .caja-detalle .card,
:root[data-theme="light"] .caja-detalle .gasto-detail-card,
:root[data-theme="light"] .caja-detalle .gasto-detail-cell,
:root[data-theme="light"] .caja-detalle .gasto-detail-box{
  background:var(--card) !important;
  border-color:var(--border) !important;
  box-shadow:none !important;
}
:root[data-theme="light"] .caja-detalle .gasto-detail-card{
  border-top:var(--borde-fino) !important;
}
:root[data-theme="light"] .caja-detalle .gasto-items td,
:root[data-theme="light"] .caja-detalle th,
:root[data-theme="light"] .caja-detalle td{
  color:var(--text) !important;
  border-bottom-color:var(--border) !important;
}
:root[data-theme="light"] .caja-detalle .preview-card{
  background:#f8fafc !important;
  border:var(--borde-fino) !important;
}
:root[data-theme="light"] .caja-detalle .preview-top{
  border-bottom:var(--borde-fino) !important;
}
:root[data-theme="light"] .caja-detalle .preview-body{
  background:#ffffff !important;
}

@media (max-width: 980px){
  .app{display:block;min-height:100vh}

  .modulebar{ display:none; }

  .sidebar{
    display:flex;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(84vw, 320px);
    max-width:320px;
    transform:translateX(-110%);
    transition:transform .22s ease;
    z-index:120;
    overflow-y:auto;
    padding:14px;
  }
  .app.sidebar-open .sidebar{ transform:translateX(0); }

  .mobile-menu-btn{ display:inline-flex; align-items:center; justify-content:center; }

  .topbar{
    padding:12px 14px;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:8px;
  }
  .topbar-left{ width:100%; gap:10px; }
  .topbar-logo{ display:none; }
  .topbar-right{
    width:100%;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
  }

  .user-menu{
    top:42px;
    right:0;
  }

  .content{
    padding:12px;
    overflow-x:auto;
  }

  .content [style*="display:grid"]{
    grid-template-columns: 1fr !important;
  }

  .content [style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }

  .content [style*="display:flex"]{
    flex-wrap: wrap !important;
  }

  .content [style*="min-width"]{
    min-width: 0 !important;
  }

  .content input,
  .content select,
  .content textarea,
  .content .btn,
  .content .btn-gold,
  .content .btn-secondary{
    max-width: 100%;
  }

  .grid.cols-2,
  .grid.cols-3,
  .kpis{ grid-template-columns:1fr; }

  .card,
  .saas-card,
  .saas-section,
  .user-create-card{
    border-radius:var(--radio);
    padding:14px;
  }

  .btn,
  .btn-secondary,
  .btn-gold{
    min-height:40px;
  }

  .content table{
    display:block;
    max-width:100%;
    overflow-x:auto;
  }

  .content pre{ overflow:auto; }

  .notif-panel{
    width:min(94vw, 380px);
    right:0;
  }

.brand-logo{ width:150px; }
}

/* ===== Responsive "table → cards" utility (opt-in via .rcards) =====
   En teléfonos (≤640px) cada fila de una tabla con clase .rcards se
   convierte en una tarjeta etiqueta:valor (sin scroll horizontal). El
   <thead> se oculta accesiblemente y cada <td> muestra su rótulo desde
   data-label. Es aditivo: en desktop la tabla se ve igual que siempre.
   IMPORTANTE: todas las reglas usan combinador de hijo directo
   (> tbody > tr > td) para NO filtrarse a tablas anidadas dentro de una
   celda (p.ej. la tabla .gasto-items del "Detalle extraído" en caja). */
@media (max-width: 640px){
  table.rcards{ display:block; width:100%; border:0; }
  table.rcards > thead{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  table.rcards > tbody{ display:block; width:100%; }
  table.rcards > tbody > tr{
    display:block; width:100%; box-sizing:border-box;
    border:var(--borde-fino); border-radius:var(--radio);
    background:var(--card2);
    margin:0 0 10px; padding:6px 12px;
  }
  table.rcards > tbody > tr > td{
    display:flex; align-items:flex-start; gap:14px;
    justify-content:space-between;
    padding:8px 0; border:0 !important; text-align:right;
    min-width:0; word-break:break-word;
  }
  table.rcards > tbody > tr > td + td{ border-top:var(--borde-fino) !important; }
  table.rcards > tbody > tr > td::before{
    content:attr(data-label);
    flex:0 0 38%; text-align:left;
    font-size:var(--fs); font-weight:var(--peso-fuerte); color:var(--muted);
    text-transform:none; letter-spacing:0; white-space:normal;
  }
  /* Celdas sin rótulo (data-label vacío) ocupan toda la fila */
  table.rcards > tbody > tr > td[data-label=""]::before{ content:""; flex:0 0 0; }
  /* Celdas anchas: rótulo arriba, contenido abajo a todo el ancho */
  table.rcards > tbody > tr > td.rc-wide{ display:block; text-align:left; }
  table.rcards > tbody > tr > td.rc-wide::before{ display:block; margin-bottom:6px; flex:none; }
  /* Celdas con colspan (cargando / vacío / detalle) a todo el ancho */
  table.rcards > tbody > tr > td[colspan]{ display:block; text-align:left; }
  table.rcards > tbody > tr > td[colspan]::before{ content:""; display:none; }
  /* Tap targets cómodos para botones de acción dentro de tarjetas */
  table.rcards > tbody > tr > td .btn,
  table.rcards > tbody > tr > td .btn.xs,
  table.rcards > tbody > tr > td a.btn{ min-height:36px; }
}

/* ===== Semantic colors parity for light theme (cross-module) ===== */
:root[data-theme="light"] .content .pill.ok,
:root[data-theme="light"] .content .chip.ok,
:root[data-theme="light"] .content .chip.approved,
:root[data-theme="light"] .content .badge.ok,
:root[data-theme="light"] .content .badge.approved,
:root[data-theme="light"] .content .badge.closed,
:root[data-theme="light"] .content .badge.bg-success{
  color:#166534 !important;
  border-color:rgba(34,197,94,.40) !important;
  background:rgba(34,197,94,.16) !important;
}

:root[data-theme="light"] .content .pill.warn,
:root[data-theme="light"] .content .chip.warn,
:root[data-theme="light"] .content .chip.pending,
:root[data-theme="light"] .content .chip.pen,
:root[data-theme="light"] .content .badge.warn,
:root[data-theme="light"] .content .badge.pending,
:root[data-theme="light"] .content .badge.open,
:root[data-theme="light"] .content .badge.bg-warning,
:root[data-theme="light"] .content .badge.bg-warning.text-dark{
  color:#92400e !important;
  border-color:rgba(245,158,11,.42) !important;
  background:rgba(245,158,11,.17) !important;
}

:root[data-theme="light"] .content .pill.err,
:root[data-theme="light"] .content .chip.err,
:root[data-theme="light"] .content .chip.bad,
:root[data-theme="light"] .content .chip.rejected,
:root[data-theme="light"] .content .badge.err,
:root[data-theme="light"] .content .badge.rejected{
  color:#991b1b !important;
  border-color:rgba(239,68,68,.40) !important;
  background:rgba(239,68,68,.15) !important;
}

:root[data-theme="light"] .content td.ok,
:root[data-theme="light"] .content .ok{
  color:#166534 !important;
}
:root[data-theme="light"] .content td.warn,
:root[data-theme="light"] .content .warn{
  color:#92400e !important;
}
:root[data-theme="light"] .content td.err,
:root[data-theme="light"] .content .err{
  color:#991b1b !important;
}

/* ============================================================
   Inventario / Activos (módulo inv_*)
   ============================================================ */
.iv-wrap { display:grid; gap:14px; }
.iv-card { padding:16px; border-radius:var(--radio-tarjeta); background:var(--card); border:var(--borde-fino); }
.iv-title { font-size:var(--fs-titulo); font-weight:var(--peso-fuerte); margin:0 0 10px 0; display:flex; align-items:center; gap:8px; }
.iv-sub { font-size:var(--fs); color:var(--muted); margin:0 0 10px 0; }
.iv-input, .iv-select, .iv-textarea {
  padding:9px 11px; border-radius:var(--radio); border:var(--borde-fino);
  background:var(--card2); color:var(--text); width:100%; box-sizing:border-box; font-size:var(--fs);
}
.iv-input::placeholder, .iv-textarea::placeholder { color:var(--muted); }
.iv-textarea { min-height:54px; resize:vertical; }
.iv-btn { padding:9px 14px; border-radius:var(--radio); border:var(--borde-ancho) solid transparent;
  background:#2563eb; color:#fff; cursor:pointer; font-weight:var(--peso-fuerte); font-size:var(--fs); }
.iv-btn:hover { filter:brightness(1.08); }
.iv-btn.secondary { background:var(--card2); color:var(--text); border-color:var(--border); }
.iv-btn.ok { background:#16a34a; }
.iv-btn.danger { background:#dc2626; }
.iv-btn.sm { padding:5px 9px; font-size:var(--fs); }
.iv-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.iv-kpi { padding:14px; border-radius:var(--radio-tarjeta); background:var(--card2); border:var(--borde-fino); }
.iv-kpi b { font-size:var(--fs-cifra); display:block; line-height:1.1; }
.iv-kpi span { font-size:var(--fs); color:var(--muted); }
.iv-kpi.warn { border-color:rgba(245,158,11,.5); background:rgba(245,158,11,.12); }
.iv-kpi.bad { border-color:rgba(239,68,68,.5); background:rgba(239,68,68,.12); }
.iv-field label { display:block; font-size:var(--fs); color:var(--muted); margin-bottom:4px; }
.iv-field { margin-bottom:2px; }
.iv-toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:end; justify-content:space-between; }
.iv-tableWrap { overflow:auto; border-radius:var(--radio); border:var(--borde-fino); min-width:0; max-width:100%; }
table.iv-table { width:100%; border-collapse:collapse; font-size:var(--fs); }
/* EL AIRE DE LA CELDA BAJA DE 9 A 8 PORQUE LA LETRA SUBE DE 13 A 14. La fila no
   puede crecer: sus filas miden 23 px y las nuestras ya iban por 34. Un píxel
   más de letra por lado se compensa con uno menos de aire por lado, y la fila
   se queda como estaba. Aire fuera, apretado dentro.
   AQUÍ NO SE APRIETA MÁS, y es a propósito: `.iv-table` la usan veinticuatro
   plantillas de Logística e Inventario, de manos distintas. La que quiera la
   densidad de rejilla se pone `class="rejilla"` (al final de este fichero) y la
   pide para ella sola; apretar aquí curaría a espaldas de quien mide otra. */
.iv-table th, .iv-table td { padding:8px 10px; border-bottom:var(--borde-fino); text-align:left; vertical-align:middle; }
.iv-table th { font-size:var(--fs); text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.iv-table tr.clickable { cursor:pointer; }
.iv-table tr.clickable:hover td { background:color-mix(in srgb, var(--text) 6%, transparent); }
.iv-badge { padding:3px 9px; border-radius:var(--radio-pastilla); font-size:var(--fs); font-weight:var(--peso-fuerte); display:inline-block; white-space:nowrap; }
.iv-est-operativo { background:rgba(22,163,74,.30); }
.iv-est-en_reparacion { background:rgba(245,158,11,.30); }
.iv-est-prestado { background:rgba(37,99,235,.28); }
.iv-est-almacen { background:rgba(100,116,139,.28); }
.iv-est-extraviado { background:rgba(217,70,239,.30); }
.iv-est-baja { background:rgba(239,68,68,.28); }
.iv-chip { padding:3px 9px; border-radius:var(--radio-pastilla); font-size:var(--fs); font-weight:var(--peso-fuerte); display:inline-block;
  background:color-mix(in srgb, var(--text) 9%, transparent); }
.iv-chip.bad { background:rgba(239,68,68,.25); }
.iv-chip.warn { background:rgba(245,158,11,.25); }
.iv-code { font-family:ui-monospace,monospace; font-size:var(--fs); color:var(--muted); }
.iv-modal { width:min(640px,100%); max-height:92vh; overflow:auto; background:var(--card); color:var(--text);
  border:var(--borde-fino); border-radius:var(--radio-tarjeta); padding:18px; }
.iv-modal[open] { display:block; }
.iv-modal::backdrop { background:rgba(0,0,0,.6); }
.iv-grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.iv-grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.iv-empty { padding:16px; text-align:center; color:var(--muted); font-size:var(--fs); }
.iv-msg { font-size:var(--fs); min-height:16px; }
.iv-scanbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.iv-scanbar .iv-input { flex:1; min-width:180px; }
.iv-scan-hint { font-size:var(--fs); color:var(--muted); }
.iv-drawer { position:fixed; top:0; right:0; height:100vh; width:min(460px,100%); z-index:400;
  background:var(--card); border-left:var(--borde-fino); box-shadow:-12px 0 40px rgba(0,0,0,.35);
  transform:translateX(100%); transition:transform .22s ease; overflow:auto; padding:0; }
.iv-drawer.open { transform:translateX(0); }
.iv-drawer-bg { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:390; display:none; }
.iv-drawer-bg.open { display:block; }
/* Cabecera fija de la ficha (sticky limpia, sin márgenes negativos) */
.iv-drawer-head { position:sticky; top:0; z-index:6; background:var(--card); padding:14px 18px; border-bottom:var(--borde-fino); }
.iv-drawer-inner { padding:14px 18px 20px; }
/* Lista de opciones seleccionables (Mover / Estado) */
.iv-optlist { display:grid; gap:6px; max-height:50vh; overflow:auto; }
.iv-opt { display:block; width:100%; text-align:left; padding:11px 12px; border:var(--borde-fino); border-radius:var(--radio);
  background:var(--card2); color:var(--text); cursor:pointer; font-size:var(--fs); }
.iv-opt:hover { background:color-mix(in srgb, var(--text) 7%, transparent); }
.iv-opt.current { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.iv-kv { display:grid; grid-template-columns:120px 1fr; gap:6px 10px; font-size:var(--fs); margin:10px 0; }
.iv-kv dt { color:var(--muted); }
.iv-kv dd { margin:0; }
.iv-hist { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.iv-hist li { font-size:var(--fs); padding:8px 10px; border-radius:var(--radio); background:var(--card2);
  border-left:3px solid var(--accent); }
.iv-hist li .t { color:var(--muted); font-size:var(--fs); }
/* Cámara de escaneo: vista cuadrada + recuadro punteado para encuadrar el QR */
.iv-cam-wrap { position:relative; width:min(320px,78vw); aspect-ratio:1/1; margin:8px auto 0; border-radius:var(--radio); overflow:hidden; background:#000; }
.iv-cam-wrap video { width:100%; height:100%; object-fit:cover; display:block; }
.iv-cam-frame { position:absolute; inset:15%; border:2px dashed rgba(255,255,255,.92); border-radius:var(--radio); pointer-events:none;
  box-shadow:0 0 0 9999px rgba(0,0,0,.28); }
/* compat: por si quedara algún .iv-cam suelto */
.iv-cam { width:100%; border-radius:var(--radio); background:#000; }
/* Clasificación y código (sección del formulario de activos) */
.iv-cb-card { margin:10px 0 2px; border:var(--borde-fino); border-radius:var(--radio); background:var(--card2); padding:12px; }
.iv-cb-h { font-size:var(--fs); font-weight:var(--peso-fuerte); color:var(--text); margin-bottom:10px; }
/* Combobox custom (popup estilizado, mismo patrón que .pp-budget-pop de Proveedores) */
.iv-combo { position:relative; }
.iv-combo-pop { position:absolute; top:calc(100% + 4px); left:0; width:min(420px,100%); max-height:240px; overflow:auto;
  border:var(--borde-fino); border-radius:var(--radio); background:var(--card); box-shadow:var(--shadow); z-index:40; display:none; }
.iv-combo-pop.open { display:block; }
.iv-combo-pop.up { top:auto; bottom:calc(100% + 4px); }
.iv-combo-item { display:block; width:100%; border:0; border-bottom:var(--borde-fino); background:transparent; color:var(--text);
  text-align:left; padding:9px 11px; cursor:pointer; font-size:var(--fs); }
.iv-combo-item:last-child { border-bottom:0; }
.iv-combo-item:hover { background:var(--card2); }
.iv-combo-sub { display:block; font-size:var(--fs); color:var(--muted); margin-top:1px; }
@media (max-width:640px){
  .iv-grid2, .iv-grid3 { grid-template-columns:1fr; }
  /* Las tablas .iv-table.rcards se vuelven tarjetas (utilidad .rcards); sin scroll horizontal. */
  table.iv-table.rcards { min-width:0 !important; }
  /* LO MISMO PARA RECEPCIÓN, y esta línea arregla algo que se veía en la foto:
     `recepcion_dashboard.html` fija `table.rc-table{min-width:720px}`. Al pasar
     a tarjetas la tabla sigue midiendo 720 px, así que en un teléfono de 390 se
     leían los RÓTULOS («Habitación», «Huésped», «Salida»…) y los VALORES
     quedaban fuera de la pantalla, a la derecha. Medido con foto a 390x844 en
     Recepción · Hospedados: ocho estadías y ni un nombre a la vista. No lo trajo
     el apretado —pasaba igual antes—; es la misma enfermedad que ya tenía
     resuelta Logística en la línea de arriba. */
  table.rc-table.rcards { min-width:0 !important; }
  .iv-drawer { width:100%; }
}
/* Carga masiva: flujo de pasos (sin cajas anidadas) */
.iv-uprow { display:flex; gap:12px; align-items:flex-start; }
.iv-upbody { flex:1; min-width:0; }
.iv-uph { font-weight:var(--peso-fuerte); font-size:var(--fs); margin:0 0 2px; line-height:1.35; }
.iv-upbody .iv-sub { margin:0 0 10px; }
.iv-updiv { height:1px; background:var(--border); margin:16px 0; }
.iv-step-n { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:var(--radio-pastilla); background:#2563eb; color:#fff; font-size:var(--fs); font-weight:var(--peso-fuerte); flex:0 0 auto; margin-top:1px; }
/* Área de resultado de la carga: colapsa cuando está vacía (sin espacio muerto). */
.iv-result { font-size:var(--fs); }
.iv-result:empty { display:none; }
.iv-result:not(:empty) { margin-top:10px; }
/* Etiquetas imprimibles — etiquetadora 62mm. Etiqueta CUADRADA: nombre / QR / código. */
.iv-labels { display:flex; flex-wrap:wrap; gap:5mm; align-content:flex-start; }
.iv-label {
  width:62mm; height:62mm; box-sizing:border-box; overflow:hidden;
  background:#fff; color:#000; border:1px solid #cfd6df; border-radius:2mm;
  padding:2.5mm; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:1.5mm;
}
.iv-label .nm { font-size:8.5pt; font-weight:700; line-height:1.15; text-align:center; width:100%;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.iv-label .qr { width:42mm; height:42mm; flex:0 0 auto; }
.iv-label .qr svg { width:100%; height:100%; display:block; }
.iv-label .code { font-family:ui-monospace,monospace; font-size:8pt; letter-spacing:.2px; line-height:1.15;
  text-align:center; width:100%; word-break:break-all; }
/* Impresión: cada etiqueta una "página" cuadrada de 62×62mm, sin márgenes. */
@page { size:62mm 62mm; margin:0; }
@media print {
  body * { visibility:hidden; }
  #iv-print, #iv-print * { visibility:visible; }
  #iv-print { position:absolute; left:0; top:0; display:block; }
  .iv-label { width:62mm; height:62mm; border:0; border-radius:0; margin:0; break-inside:avoid; break-after:page; }
  .iv-label:last-child { break-after:auto; }
}

/* ===== .xgrid: grilla editable tipo hoja de cálculo (Logística) =====
   Celdas planas con borde fino, inputs sin caja (anulan el estilo global de
   .content input[...]), foco = rectángulo azul de celda activa.

   SUS NÚMEROS YA NO SON SUYOS: bebe de las fichas `--rejilla-*` del :root, las
   mismas que usa `.rejilla` (abajo). Los valores que salen son EXACTAMENTE los
   que tenía —3px 9px, renglón 1,25, fila de 26 px—; lo que cambia es que ahora
   hay UN sitio donde tocarlos. .xgrid es la rejilla de captura (todas las
   celdas se escriben); `.rejilla` es la de listar, con alguna celda editable. */
table.xgrid{ width:100%; border-collapse:collapse; font-size:var(--fs); }
table.xgrid th{ border:var(--borde-ancho) solid color-mix(in srgb, var(--border) 80%, transparent); padding:4px var(--rejilla-x);
  font-size:var(--fs); font-weight:var(--peso-fuerte); text-align:center; white-space:nowrap;
  background:color-mix(in srgb, var(--bg) 88%, var(--border)); }
/* LA FILA SIGUE MIDIENDO 26 px con la letra a 14: la suya mide 23 y la nuestra
   26; lo que NO puede pasar es que subir el tamaño de letra engorde la rejilla,
   que es justo lo que Kevin vio cuando las filas pasaron de 26 a 46 px. */
table.xgrid td{ border:var(--borde-ancho) solid color-mix(in srgb, var(--border) 80%, transparent); padding:0; height:var(--rejilla-fila); }
table.xgrid td.ro{ padding:var(--rejilla-y) var(--rejilla-x); }
.content table.xgrid input, .content table.xgrid select, table.xgrid input, table.xgrid select{
  width:100%; height:100%; border:0 !important; background:transparent !important;
  box-shadow:none !important; border-radius:0 !important; color:var(--text); font:inherit;
  /* EL RENGLÓN, APRETADO: `font:inherit` se trae también el renglón del cuerpo
     (1,45) y con 14 px de letra eso son 20,3 px que empujaban la fila de 26 a
     27,8. Con 1,25 la letra sube de 13 a 14 y la fila se queda EN 26. Es la
     regla de ellos: aire fuera, apretado dentro. */
  font-size:var(--fs); line-height:var(--rejilla-renglon);
  padding:var(--rejilla-y) var(--rejilla-x) !important; margin:0; box-sizing:border-box; }
table.xgrid input[type=number]{ text-align:right; font-variant-numeric:tabular-nums;
  appearance:textfield; -moz-appearance:textfield; }
table.xgrid input[type=number]::-webkit-outer-spin-button,
table.xgrid input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
table.xgrid input[type=checkbox]{ width:auto; height:auto; margin:0 auto; display:block; }
.content table.xgrid input:focus, .content table.xgrid select:focus,
table.xgrid input:focus, table.xgrid select:focus{
  outline:2px solid var(--acento) !important; outline-offset:-2px; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important; }
table.xgrid td.sub{ text-align:right; padding:var(--rejilla-y) var(--rejilla-x); color:var(--muted); font-variant-numeric:tabular-nums; }
table.xgrid .l-del{ border:0; background:none; color:var(--danger); cursor:pointer; font-size:var(--fs); width:100%; height:100%; }

/* EL AVISO DEL IMPORTE, MIENTRAS ESTÁ CALLADO, NO OCUPA SITIO EN LA REJILLA.
   `static/js/importe.js` YA promete esto en su propio comentario («dentro de una
   rejilla el aviso… no reserva ni un píxel cuando no tiene nada que decir») y lo
   cumple a medias: la clase `.ikimp-flota` —la que pone `min-height:0`— se le
   pega al aviso EN EL MOMENTO DE PINTARLO. Antes de pintar nada por primera vez
   el hueco es un `<div class="ikimp-eco">` VACÍO que sigue trayendo
   `min-height:calc(14px × 1,3)` = 18,2 px más 5 de margen. O sea: una ficha
   recién abierta nace con ~20 px de aire muerto en CADA fila, y se queda así
   hasta que alguien escribe un importe.
   MEDIDO en «Insumo nuevo», rejilla de presentaciones: la fila mide 48,2 px de
   los cuales 26 son la casilla y el resto este hueco reservado por las CUATRO
   columnas de dinero (costo, costo mín., costo máx., precio de venta). Con esta
   línea la fila baja a 28 px.
   `:empty` es exactamente la pregunta que hay que hacer: el aviso se escribe con
   `innerHTML`, así que vacío significa literalmente «no tengo nada que decir».
   En cuanto tiene algo deja de estar vacío, se ve, y se coloca flotando como ya
   hacía.
   LO QUE NO TOCA: la PREGUNTA del importe es `.ikimp-duda`, no esto. Sigue
   saliendo igual y sin contestarla no se cobra. Y va contra `table.xgrid` —la
   rejilla de captura de Logística— y no contra todo `td`, para no encoger a
   espaldas de nadie las pantallas de caja, contabilidad o pago a proveedores,
   que las está midiendo otra mano. Cuando se mida allí, esta línea sube a
   `importe.js`, que es su sitio. */
table.xgrid .ikimp-eco{ display:none; }

/* Y CALLADO DEL TODO, NO SÓLO CUANDO NO TIENE NADA QUE DECIR.
   Kevin, 11-ago-2026: «no me gusta como se muestran los precios en las tablas de
   requerimiento, es mas en las tablas tipo excel no deberia aparecer».
   El eco («Cuesta 210.00 soles · DOSCIENTOS DIEZ CON 00/100 SOLES») nació para
   una casilla SOLA, donde confirmar la lectura del importe vale la pena. En una
   rejilla de treinta filas es un globo que tapa las celdas de abajo justo
   mientras se teclea, que es cuando hay que ver el resto.
   Y no hace falta ahí: en la rejilla el importe se lee de un vistazo en su
   columna, alineado con los demás. Lo que el eco añade —el importe en letras—
   es cosa del papel, no de la captura.
   LO QUE SIGUE SALIENDO, y es innegociable: `.ikimp-duda`, la PREGUNTA de
   «"1.500" son mil quinientos o uno con cincuenta». Ésa no es un adorno de
   confirmación: sin contestarla no se guarda, y es la que impidió que se
   volvieran a ir S/ 1.498,50 de propina. Quitarla sería reabrir el defecto que
   esta casa lleva media docena de tandas cerrando. */

/* ===========================================================================
   .rejilla · «ESTA TABLA ES UNA REJILLA», dicho una sola vez
   ===========================================================================

   CÓMO SE USA, en tres líneas:
     1) `<table class="rejilla">` y ya está: fila de 26 px, celda apretada, la
        celda ES el campo (la casilla pierde borde y fondo) y sólo la activa se
        marca. No hay que escribir ningún padding en la plantilla.
     2) `<td class="num">` el número a la derecha con las cifras alineadas ·
        `<td class="calc">` lo que calcula el sistema, en gris (`.sub` es lo mismo).
     3) ¿La tabla ya lleva `.rcards`? Se ponen LAS DOS: a 390 px manda `.rcards`
        y la fila vuelve a ser una tarjeta con aire, que en el teléfono hace falta.

   POR QUÉ EXISTE, medido. El censo (docs/sistema_visual_restaurant_pe.md §6)
   dejó trece pantallas por encima del tope de 34 px de fila, y cada una con su
   propio número escrito a mano en su plantilla: `padding:8px` en pago a
   proveedores, `9px 8px`, `8px 10px`, `6px 8px`, `10px 12px`… veinte paddings
   distintos para la misma decisión. Eso es la misma regla escrita trece veces y
   corregida una al día. Aquí está una vez, y sale de las fichas `--rejilla-*`.

   LA REGLA, de Restaurant.pe y medida en su aplicación: AIRE FUERA, APRETADO
   DENTRO. Entre bloques se respira —51 px de ritmo entre campos de un
   formulario—; dentro de una rejilla no se regala un píxel: su fila mide 23 px,
   su celda `padding: 0 4px`, y la casilla no tiene caja propia. El tope de la
   casa son 34 px y no es un gusto: es la altura física de una fila de una línea
   (14 px de letra × 1,25 de renglón + 3 de aire arriba + 3 abajo + el filo).

   Y LOS 3 px NO SE BAJAN A 0: pegar el texto al filo es ilegible. El ejemplo
   medido de que esto es barato está en `table.pp-t` de pos_productos: pasó de
   `padding:9px 12px` a `3px 10px` y la fila bajó de 51 a 39 px. Una línea.

   LO QUE NO HACE. No compra ninguna librería: lo de Restaurant.pe viene de una
   comercial y aquí se copia el RESULTADO, que son estas reglas. No pisa
   `.rcards`. Y no toca lo que protege —las cuatro caras del selector, el aviso
   del importe, la puerta del turno—: esto es piel, no es puerta. */

/* NO LLEVA `font-size`, Y ESO ESTÁ MEDIDO. La primera versión ponía
   `font-size:var(--fs)` aquí, que es lo que parece correcto —14 px, EL tamaño—.
   Al medirlo salió al revés: media docena de tablas escriben su propio 13 o
   13,5 px en el `td`, así que forzar 14 en la tabla NO quitaba el 13,5: añadía
   un tamaño más a la pantalla (medido en /usuarios: de 4 tamaños a 5) y engordó
   pos_productos de 27 a 28,1 px. La rejilla es DENSIDAD, no tipografía; el
   tamaño único lo pone `static/css/ikam-fichas.css` en el `body` y se corrige
   pantalla a pantalla. Una capa base que empeora el otro trinquete no vale. */
table.rejilla{ width:100%; border-collapse:collapse; }

/* LA CABECERA. `inherit` y no `var(--fs)` por lo mismo de arriba: así la
   cabecera mide LO MISMO que sus celdas —lo que se carga es el 11,5 px en
   versalitas que media docena de pantallas se inventaron— sin poder añadir
   nunca un tamaño que la pantalla no tuviera. La jerarquía la hace el PESO. */
table.rejilla > thead > tr > th{
  padding:var(--rejilla-y) var(--rejilla-x);
  font-size:inherit; font-weight:var(--peso-fuerte); color:var(--muted);
  line-height:var(--rejilla-renglon); text-align:left; white-space:nowrap;
  border-bottom:var(--borde-fino);
}

/* LA CELDA. Combinador de hijo directo a propósito, como en `.rcards`: sin él
   una tabla metida dentro de una celda se llevaría la densidad de la de fuera. */
table.rejilla > tbody > tr > td{
  padding:var(--rejilla-y) var(--rejilla-x);
  height:var(--rejilla-fila);
  line-height:var(--rejilla-renglon);
  vertical-align:middle;
  border-bottom:var(--borde-fino);
}
table.rejilla > tbody > tr:hover{ background:var(--hover); }

/* LA CELDA ES EL CAMPO. La casilla de dentro pierde su caja —borde, fondo,
   sombra y esquina— y ocupa la celda entera. Es la diferencia entre una hoja de
   cálculo y un formulario, y es lo que el censo cuenta como «casillas con caja
   propia»: 43 de 48 la llevaban. `.content input[...]` de más arriba es (0,2,1)
   y esto (0,1,5), así que hacen falta los `!important` para ganarle. */
table.rejilla > tbody > tr > td input,
table.rejilla > tbody > tr > td select,
table.rejilla > tbody > tr > td textarea{
  width:100%; max-width:100%;
  border:0 !important; background:transparent !important;
  box-shadow:none !important; border-radius:0 !important;
  color:var(--text); font-family:inherit; font-size:inherit;
  line-height:var(--rejilla-renglon);
  padding:0 !important; margin:0; min-height:0; height:auto;
  box-sizing:border-box;
}
/* Las de marcar no se estiran: se quedan de su tamaño y centradas. */
table.rejilla > tbody > tr > td input[type=checkbox],
table.rejilla > tbody > tr > td input[type=radio]{
  width:auto; height:auto; margin:0 auto; display:block;
}

/* «CARGANDO…», «SIN RESULTADOS» Y DEMÁS CARTELES NO SON UNA FILA DE DATOS: son
   un cartel que ocupa la tabla entera, y llevan `colspan`. Apretarlos a 3 px
   deja una frase sola pegada a dos filos en medio de una tabla vacía, que es
   justo la pantalla que ve quien entra por primera vez. `.iv-empty` ya pedía sus
   16 px, pero es (0,1,0) y la celda de la rejilla (0,1,4), así que perdía.
   Aire fuera, apretado dentro: esto es fuera. */
table.rejilla > tbody > tr > td[colspan]{
  padding:16px var(--rejilla-x); height:auto;
}

/* SÓLO LA ACTIVA SE MARCA, y se marca LA CELDA, como Excel y como ellos. Va en
   la celda (`:focus-within`) y no en la casilla para que el filo azul rodee
   todo el hueco y no un rectángulo flotando dentro. */
table.rejilla > tbody > tr > td:focus-within{
  outline:2px solid var(--acento); outline-offset:-2px;
}
table.rejilla > tbody > tr > td input:focus,
table.rejilla > tbody > tr > td select:focus,
table.rejilla > tbody > tr > td textarea:focus{
  outline:none; background:transparent !important; box-shadow:none !important;
}

/* LOS NÚMEROS, A LA DERECHA Y ALINEADOS. `tabular-nums` es lo que hace que las
   unidades caigan debajo de las unidades: sin eso una columna de importes baila
   y hay que leerla cifra a cifra. */
table.rejilla > thead > tr > th.num,
table.rejilla > tbody > tr > td.num,
table.rejilla > tbody > tr > td.calc,
table.rejilla > tbody > tr > td.sub{ text-align:right; font-variant-numeric:tabular-nums; }
table.rejilla > tbody > tr > td input[type=number]{
  text-align:right; font-variant-numeric:tabular-nums;
  appearance:textfield; -moz-appearance:textfield;
}
table.rejilla > tbody > tr > td input[type=number]::-webkit-outer-spin-button,
table.rejilla > tbody > tr > td input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}

/* LO QUE CALCULA EL SISTEMA, EN GRIS. Que se distinga de un vistazo lo que se
   escribe de lo que sale solo: el subtotal, el saldo, el IGV. (`.sub` es el
   nombre que ya usa `.xgrid`; valen los dos para no reescribir plantillas.) */
table.rejilla > tbody > tr > td.calc,
table.rejilla > tbody > tr > td.sub{ color:var(--muted); }

/* LOS BOTONES DE LA ÚLTIMA COLUMNA. Es lo que de verdad engorda una lista: un
   `.btn` con `padding:12px 20px` mide 41 px y arrastra la fila con él por mucho
   que la celda esté apretada. Dentro de una rejilla el botón cabe en la fila. */
/* `.iv-btn` VA EN LA LISTA, y hace falta decir por qué no bastaba con `button`:
   la casa tiene DOS familias de botón, `.btn` y `.iv-btn` (la de Logística e
   Inventario), y `.iv-btn.sm` de más arriba es (0,2,0) mientras que
   `... > td button` es (0,1,4) — o sea que el botón de Logística le ganaba a la
   rejilla y se quedaba con sus 5 px de relleno. MEDIDO en «Stock y valorización»:
   el botón «Kardex» mide 30,2 px él solo y era el ÚNICO motivo de que la fila
   fuera de 47,2 px; con la celda apretada pero el botón intacto se quedaba en
   37,2, todavía por encima del tope. Nombrando `.iv-btn` la regla es (0,2,4) y
   gana. Sólo afecta a las tablas que PIDEN `.rejilla`. */
/* Y EL RELLENO VA CON `!important`, POR LA MISMA RAZÓN QUE LO LLEVA LA CASILLA
   DE ARRIBA. `embed_sobrio.css` fija `.content .btn{ padding:8px 16px
   !important }`, y un `!important` le gana a cualquier especificidad: sin esto
   la regla de aquí sólo funcionaba en Logística —que es la única familia de
   pantallas donde esa hoja NO se carga, por ser la referencia—. MEDIDO en
   Comprobantes de contabilidad: con la celda apretada pero el botón intacto la
   fila se quedaba en 42,5 px, todavía por encima del tope de 34; con esto, 30.
   Sólo afecta a las tablas que PIDEN `.rejilla`: nadie que no se haya apuntado
   cambia de alto por esta línea. */
table.rejilla > tbody > tr > td .btn,
table.rejilla > tbody > tr > td a.btn,
table.rejilla > tbody > tr > td .iv-btn,
table.rejilla > tbody > tr > td button{
  padding:1px 8px !important; min-height:0; height:auto;
  font-size:inherit; line-height:var(--rejilla-renglon);
  border-radius:var(--radio);
}

/* ------------------------------------------------------------ EL TELÉFONO
   AQUÍ SE INVIERTE LA REGLA, y es a propósito: en una pantalla de 390 px la
   fila ya no es una fila, es una tarjeta, y una tarjeta SÍ necesita aire y un
   sitio donde poner el dedo. `.rcards` (arriba, línea ~1513) es quien hace esa
   conversión; estas tres reglas existen sólo para que la densidad de la rejilla
   NO le gane por venir después en el fichero —las dos son (0,1,4) y a igualdad
   manda la última—. Repiten lo que dice `.rcards`, no inventan nada.

   LO QUE AQUÍ **NO** SE HACE, y también está medido: NO se le mete aire a la
   celda de una tabla que no se vuelve tarjeta. La primera versión le ponía 8 px
   «para el dedo» y el resultado fue el contrario del que se buscaba: en
   pos_productos, cuyas filas a 390 px ya miden 63 px porque el texto se parte
   en varias líneas, los 8 px las subieron a 77. Lo que hay que tocar con el
   dedo no es la celda: es la casilla y el botón, y ésos sí crecen. */
@media (max-width:640px){
  table.rejilla.rcards > tbody > tr > td{
    padding:8px 0; height:auto; border-bottom:0;
  }
  /* `!important` por lo mismo que arriba: sin él `embed_sobrio.css` gana y el
     botón del teléfono se queda con el relleno de escritorio. */
  table.rejilla > tbody > tr > td .btn,
  table.rejilla > tbody > tr > td a.btn,
  table.rejilla > tbody > tr > td .iv-btn,
  table.rejilla > tbody > tr > td button{ min-height:36px; padding:6px 12px !important; }

  /* La casilla la toca un DEDO, no un ratón: 36 px de alto es el mínimo que la
     casa ya exige y mide (tests/e2e/test_selector_caja.py, a 390×844). Sin esto
     se queda de una línea —17,5 px— y hay que apuntar para escribir en ella. */
  table.rejilla > tbody > tr > td input:not([type=checkbox]):not([type=radio]),
  table.rejilla > tbody > tr > td select,
  table.rejilla > tbody > tr > td textarea{ min-height:36px; }
}

/* resaltado del resultado activo en autocompletados (ikamPopKeys) */
a.ik-pop-sel{ background:color-mix(in srgb, var(--accent, #2563eb) 22%, var(--card, #111)) !important; }