/* ==========================================================================
   NOVA · CAPA DE DISEÑO v1  (2026-09-10)
   Se carga DESPUÉS de base.css. Define una paleta coherente, arregla el
   contraste, la jerarquía, el desbordamiento horizontal y los menús.
   Todo se controla por variables: el editor CSS puede seguir sobrescribiendo.
   ========================================================================== */

/* ---------------------------------------------------------------
   1. TOKENS · MODO CLARO (por defecto)
   --------------------------------------------------------------- */

/* O₂: cuatro tarjetas en una fila de escritorio, controles compactos y contraste fuerte */
.o2-all-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;width:100%}
.o2-inline-card{margin:0!important;padding:.55rem!important;min-width:0;text-align:center}
.o2-state-label{font-size:.7rem;font-weight:900;letter-spacing:.3px;text-transform:uppercase;color:#facc15!important;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.o2-total{float:right;font-size:.6rem;font-weight:600;opacity:.8}
.o2-stepper{display:flex;justify-content:center;gap:.3rem;margin-top:.4rem}
.o2-stepper button{width:2rem;height:2rem;border:1px solid rgba(250,204,21,.55);border-radius:999px;background:linear-gradient(145deg,#334155,#1e293b);box-shadow:0 2px 5px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);color:#facc15!important;font-size:1.15rem;font-weight:900;line-height:1;cursor:pointer;transition:transform .15s,filter .15s,box-shadow .15s}
.o2-stepper button:hover{filter:brightness(1.2);transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.45),0 0 0 2px rgba(250,204,21,.15)}
.o2-stepper button:active{transform:translateY(0) scale(.94)}
@media (max-width:700px){.o2-all-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* O₂ overrides: this file loads last and must win over legacy base.css rules. */
#o2-body .o2-all-row{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.55rem!important;width:100%!important}
#o2-body .o2-inline-card{display:block!important;margin:0!important;padding:.55rem!important;min-width:0!important;text-align:center!important}
#o2-body .o2-state-label{display:block!important;color:#facc15!important;font-weight:900!important;text-shadow:0 1px 2px #000!important}
#o2-body .o2-stepper{display:flex!important;justify-content:center!important;gap:.3rem!important;margin-top:.4rem!important}
#o2-body .o2-stepper button{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:2rem!important;height:2rem!important;border:1px solid rgba(250,204,21,.7)!important;border-radius:999px!important;background:#1e293b!important;color:#facc15!important;font-size:1.15rem!important;font-weight:900!important;cursor:pointer!important}
/* O₂ form controls: keep dark-theme selects readable; the global light rules must not leak here. */
html body:not(.light) #o2-body select{background:#1a2235!important;color:#e2e8f0!important;border-color:#3a4a70!important;color-scheme:dark!important}
html body:not(.light) #o2-body select option{background:#1a2235!important;color:#e2e8f0!important}
html body.light #o2-body select{background:#fff!important;color:#1e293b!important;border-color:#94a3b8!important;color-scheme:light!important}
@media (max-width:700px){#o2-body .o2-all-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

:root {
  /* superficies */
  --bg:            #F4F6FB;
  --surface:       #FFFFFF;
  --surface-2:     #EDF1F8;
  --surface-3:     #E2E8F3;
  --border:        #DCE3EF;
  --border-strong: #B4C0D4;

  /* texto (contraste medido sobre su superficie) */
  --text:          #101828;
  --text-muted:    #475467;
  --text-soft:     #667085;
  --text-invert:   #FFFFFF;

  /* acento */
  --accent:        #2563EB;
  --accent-hover:  #1D4ED8;
  --accent-soft:   #E8F0FE;
  --accent-text:   #1D4ED8;
  --accent-ring:   rgba(37, 99, 235, .35);

  /* semánticos */
  --color-success:  #067647;
  --color-success-bg: #ECFDF3;
  --color-warning:  #B54708;
  --color-warning-bg: #FFFAEB;
  --color-danger:   #B42318;
  --color-danger-bg: #FEF3F2;
  --color-info:     #175CD3;
  --color-info-bg:  #EFF8FF;

  /* formas y sombras */
  --radius-card:    14px;
  --radius-control: 10px;
  --radius-pill:    999px;
  --shadow-card:    0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
  --shadow-pop:     0 12px 32px rgba(16, 24, 40, .14), 0 2px 8px rgba(16, 24, 40, .08);
  --shadow-modal:   0 24px 64px rgba(16, 24, 40, .22);

  /* tipografía */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-base: 15px;
  --font-size-small: .8rem;
  --font-weight-base: 400;

  /* componentes de tema */
  --modal-bg:      #FFFFFF;
  --modal-border:  #DCE3EF;
  --input-bg:      #FFFFFF;
  --input-border:  #B4C0D4;
  --button-bg:     #2563EB;
  --button-text:   #FFFFFF;
  --table-row-even:#FFFFFF;
  --table-row-odd: #F7F9FC;

  /* celdas configurables (valores legibles por defecto) */
  --cell1-fill:#FFFFFF;  --cell1-border:#DCE3EF;  --cell1-text:#101828;
  --cell2-fill:#FFFFFF;  --cell2-border:#DCE3EF;  --cell2-text:#101828;
  --cell3-fill:#F7F9FC;  --cell3-border:#E4E9F2;  --cell3-text:#101828;
  --cell4-fill:#EEF2F9;  --cell4-border:#CFD8E8;  --cell4-text:#344054;
  --cell5-fill:#EEF2F9;  --cell5-border:#CFD8E8;  --cell5-text:#344054;
  --cell10-fill:#F7F9FC; --cell10-border:#DCE3EF; --cell10-text:#344054;
}

/* ---------------------------------------------------------------
   2. TOKENS · MODO OSCURO
   --------------------------------------------------------------- */
body:not(.light) {
  --bg:            #0A0F1C;
  --surface:       #121A2B;
  --surface-2:     #1A2438;
  --surface-3:     #232F47;
  --border:        #263252;
  --border-strong: #3A4A70;

  --text:          #EAEFF9;
  --text-muted:    #A9B6D0;
  --text-soft:     #8391AE;
  --text-invert:   #0A0F1C;

  --accent:        #4E8DF7;
  --accent-hover:  #6BA1FF;
  --accent-soft:   rgba(78, 141, 247, .14);
  --accent-text:   #9DC0FF;
  --accent-ring:   rgba(78, 141, 247, .45);

  --color-success:  #4ADE80;
  --color-success-bg: rgba(74, 222, 128, .12);
  --color-warning:  #FBBF24;
  --color-warning-bg: rgba(251, 191, 36, .12);
  --color-danger:   #F87171;
  --color-danger-bg: rgba(248, 113, 113, .12);
  --color-info:     #7CB2FF;
  --color-info-bg:  rgba(124, 178, 255, .12);

  --shadow-card:  0 1px 2px rgba(0, 0, 0, .4);
  --shadow-pop:   0 12px 32px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, .7);

  --modal-bg:      #16203453;
  --modal-bg:      #162034;
  --modal-border:  #3A4A70;
  --input-bg:      #1A2438;
  --input-border:  #3A4A70;
  --button-bg:     #4E8DF7;
  --button-text:   #0A0F1C;
  --table-row-even:#121A2B;
  --table-row-odd: #162034;

  --cell1-fill:#121A2B;  --cell1-border:#263252;  --cell1-text:#EAEFF9;
  --cell2-fill:#121A2B;  --cell2-border:#263252;  --cell2-text:#EAEFF9;
  --cell3-fill:#162034;  --cell3-border:#263252;  --cell3-text:#EAEFF9;
  --cell4-fill:#1A2438;  --cell4-border:#3A4A70;  --cell4-text:#D6DEED;
  --cell5-fill:#1A2438;  --cell5-border:#3A4A70;  --cell5-text:#D6DEED;
  --cell10-fill:#162034; --cell10-border:#263252; --cell10-text:#D6DEED;
}

/* ---------------------------------------------------------------
   3. BASE Y ANTI-DESBORDAMIENTO
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app, #main { min-width: 0; max-width: 100%; }
#main { flex-direction: column; min-height: 100dvh; }
.ct { min-width: 0; overflow-x: hidden; padding: 1rem; }

/* nunca dejar que un hijo desborde su columna */
#main * { min-width: 0; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: .4rem; }

/* barra de scroll discreta */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------
   4. BARRA SUPERIOR
   --------------------------------------------------------------- */
.tb {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .5rem .7rem;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

.tb-r {
  display: flex; align-items: center; gap: .35rem;
  justify-self: end; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.tb-r::-webkit-scrollbar { display: none; }
.tb-r > * { flex: 0 0 auto; }

/* botones/enlaces de la barra */
.tb select, .tb .fz, .tb .theme-btn, .tb .grp-badge, .tb .us-state {
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: .74rem;
  font-weight: 600;
  padding: .3rem .6rem;
  line-height: 1.2;
}
.tb select { max-width: 34vw; }
.tb .fz { cursor: pointer; padding: .3rem .5rem; }
.tb .grp-badge { letter-spacing: .06em; }
.tb .us-state.ok { color: var(--color-success); border-color: currentColor; background: var(--color-success-bg); }
.tb .us-state.warn { color: var(--color-warning); border-color: currentColor; background: var(--color-warning-bg); }

/* botón «Mi área» — acceso visible al panel del empleado */
.tb .nova-miar { 
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--accent) !important; color: #fff !important;
  border: none !important; font-weight: 700; cursor: pointer;
}
body:not(.light) .tb .nova-miar { color: var(--text-invert) !important; }

/* avatar de usuario */
.tb .user-chip {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  border-radius: var(--radius-pill);
  padding: .25rem .5rem .25rem .3rem;
  display: inline-flex; align-items: center; gap: .35rem;
  cursor: pointer;
}
.tb .user-chip.on { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-ring); }

/* ---------------------------------------------------------------
   5. PESTAÑAS PRINCIPALES
   --------------------------------------------------------------- */
.ts {
  display: flex; align-items: stretch; gap: .15rem;
  padding: 0 .5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.ts::-webkit-scrollbar { display: none; }
.ts div {
  flex: 0 0 auto;
  padding: .6rem .8rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted) !important;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.ts div:hover { color: var(--text) !important; }
.ts div.ac {
  color: var(--accent-text) !important;
  border-bottom-color: var(--accent);
  font-weight: 700;
}

/* ---------------------------------------------------------------
   6. SUBMENÚ
   --------------------------------------------------------------- */
.submenu-bar {
  display: flex; flex-wrap: wrap; gap: .35rem;
  padding: .55rem .7rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.submenu-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  padding: .35rem .75rem;
  font-size: .78rem; font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.submenu-btn:hover { color: var(--text); border-color: var(--border-strong); }
.submenu-btn.on {
  background: var(--accent); border-color: var(--accent);
  color: #fff;
}
body:not(.light) .submenu-btn.on { color: var(--text-invert); }

/* ---------------------------------------------------------------
   7. TARJETAS
   --------------------------------------------------------------- */
.st {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-soft) !important;
  margin: .9rem 0 .45rem;
}
.ca, .mi, .pi {
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.ca { background: var(--surface); padding: .85rem; }
.mi, .pi { background: var(--surface); }
.ca-unidad { border-color: var(--border-strong); }

/* ---------------------------------------------------------------
   8. CHIPS
   --------------------------------------------------------------- */
.base-chip, .eq-chip, .subtab {
  border-radius: var(--radius-pill) !important;
  border-width: 1px !important;
  border-style: solid;
  font-size: .78rem !important;
  font-weight: 600 !important;
  padding: .42rem .8rem !important;
  min-height: 34px;
  color: var(--cell4-text) !important;
  background: var(--cell4-fill);
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.eq-chip { color: var(--cell5-text) !important; background: var(--cell5-fill); }
.subtab  { color: var(--cell10-text) !important; background: var(--cell10-fill); }
.base-chip:hover, .eq-chip:hover, .subtab:hover { border-color: var(--border-strong) !important; }
.base-chip.on, .eq-chip.on, .subtab.on {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.base-dot, .eq-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* ---------------------------------------------------------------
   9. BOTONES
   --------------------------------------------------------------- */
.bt, .adm-btn, button.adm-btn {
  border-radius: var(--radius-control);
  font-weight: 600;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  padding: .5rem .9rem;
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .08s;
}
.bt:hover, .adm-btn:hover { background: var(--surface-2); border-color: var(--text-soft); }
.bt:active, .adm-btn:active { transform: translateY(1px); }
.bt-f { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
body:not(.light) .bt-f { color: var(--text-invert) !important; }
.bt-f:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.bt-ghost { background: transparent !important; border-color: var(--border-strong) !important; color: var(--text) !important; }
.bt-ghost:hover { background: var(--surface-2) !important; }
.adm-btn { font-size: .68rem; padding: .3rem .6rem; letter-spacing: .02em; }

/* foco visible accesible */
.bt:focus-visible, .adm-btn:focus-visible, .submenu-btn:focus-visible,
.ts div:focus-visible, .base-chip:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   10. CAMPOS
   --------------------------------------------------------------- */
.sb, input[type=text], input[type=search], input[type=password], select, textarea {
  border-radius: var(--radius-control);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  padding: .5rem .7rem;
  font-size: .85rem;
}
.sb::placeholder, input::placeholder { color: var(--text-soft); opacity: 1; }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: none;
}
/* Contraste global de controles en modo oscuro: Estadísticas, CSS y todos los formularios. */
html body:not(.light) select,
html body:not(.light) select option,
html body:not(.light) input,
html body:not(.light) input[type="date"],
html body:not(.light) input[type="number"],
html body:not(.light) textarea {
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--input-border) !important;
  color-scheme: dark;
}
html body:not(.light) input::placeholder,
html body:not(.light) textarea::placeholder { color: var(--text-soft) !important; opacity: 1 !important; }
html body:not(.light) .css-editor-input,
html body:not(.light) .css-field input,
html body:not(.light) .css-field select,
html body:not(.light) .est-filtros-grid input,
html body:not(.light) .est-filtros-grid input[type="date"],
html body:not(.light) .est-filtros-grid input[type="number"],
html body:not(.light) .est-filtros-grid select,
html body:not(.light) .est-filtros-grid textarea {
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--input-border) !important;
}
html body:not(.light) .css-editor-input::placeholder,
html body:not(.light) .css-field input::placeholder { color: var(--text-soft) !important; }


/* ---------------------------------------------------------------
   11. BADGES DE ESTADO
   --------------------------------------------------------------- */
.bg {
  border-radius: var(--radius-pill);
  font-size: .68rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border: 1px solid transparent;
  color: var(--text-muted);
  background: var(--surface-2);
}
.bg.bg-ok { color: var(--color-success); background: var(--color-success-bg); border-color: currentColor; }
.bg.bg-w  { color: var(--color-warning); background: var(--color-warning-bg); border-color: currentColor; }
.bg.bg-d  { color: var(--color-danger);  background: var(--color-danger-bg);  border-color: currentColor; }
.pd2 { border-radius: 50%; }
.pd2.dr { background: var(--color-danger); }
.pd2.dy { background: var(--color-warning); }

/* ---------------------------------------------------------------
   12. ESTADÍSTICAS
   --------------------------------------------------------------- */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-card);
  padding: .7rem .8rem;
  box-shadow: var(--shadow-card);
}
.stat-card .num { font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--text); }
.stat-card .lbl { font-size: .72rem; color: var(--text-muted); font-weight: 600; margin-top: .15rem; }
.stat-card .sub { font-size: .65rem; color: var(--text-soft); }
.stat-card.g { border-left-color: var(--color-success); }
.stat-card.g .num { color: var(--color-success); }
.stat-card.r { border-left-color: var(--color-danger); }
.stat-card.r .num { color: var(--color-danger); }
.stat-card.w { border-left-color: var(--color-warning); }
.stat-card.w .num { color: var(--color-warning); }
.stat-card.o { border-left-color: #EA580C; }
.stat-card.o .num { color: #EA580C; }

/* ---------------------------------------------------------------
   13. MENÚ DE USUARIO
   --------------------------------------------------------------- */
.user-dd {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop) !important;
  padding: .3rem;
  min-width: 250px;
  max-width: min(320px, calc(100vw - 1rem));
  overflow: hidden;
}
.user-dd-header {
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .6rem .55rem;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: calc(var(--radius-card) - 2px) calc(var(--radius-card) - 2px) 0 0;
}
.user-dd-header .chip-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .9rem; flex: 0 0 auto;
}
body:not(.light) .user-dd-header .chip-avatar { color: var(--text-invert); }
.user-dd-header .dd-name { color: var(--text) !important; font-weight: 700; font-size: .85rem; }
.user-dd-header .dd-role { color: var(--text-muted) !important; font-size: .68rem; }
.user-dd-item {
  display: flex; align-items: center; gap: .55rem;
  width: 100%; text-align: left;
  padding: .58rem .65rem;
  border: none; background: none;
  border-radius: var(--radius-control);
  color: var(--text) !important;
  font-size: .82rem; font-weight: 500;
  cursor: pointer;
}
.user-dd-item:hover { background: var(--surface-2) !important; }
.user-dd-item.danger { color: var(--color-danger) !important; }
.user-dd-item.danger:hover { background: var(--color-danger-bg) !important; }
.user-dd-divider { height: 1px; background: var(--border) !important; margin: .25rem .3rem; }

/* ---------------------------------------------------------------
   14. MODALES (siempre opacos)
   --------------------------------------------------------------- */
#nova-modal, .login-modal-overlay, .nova-overlay {
  background: rgba(9, 14, 26, .62) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
#nova-modal > div, .nova-modal, .nova-overlay .nova-modal, .login-modal {
  background: var(--modal-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--modal-border) !important;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal) !important;
}
#nova-mbody { color: var(--text) !important; }
#nova-min, #nova-msel { background: var(--input-bg) !important; color: var(--text) !important; border-color: var(--input-border) !important; }

/* ---------------------------------------------------------------
   15. PORTADA (siempre oscura con estrellas)
   --------------------------------------------------------------- */
html body #login, html body.light #login {
  background: #000810 !important;
  color: #E6EDF8 !important;
}
html body #login::before, html body.light #login::before {
  display: block !important; opacity: .78 !important;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,1) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 71% 30%, rgba(191,219,254,.95) 0 1.2px, transparent 2px),
    radial-gradient(circle at 38% 72%, rgba(255,255,255,.9) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 86% 82%, rgba(147,197,253,.9) 0 1.2px, transparent 2px),
    radial-gradient(circle at 53% 51%, rgba(255,255,255,.86) 0 1px, transparent 1.8px),
    radial-gradient(circle at 24% 64%, rgba(196,181,253,.8) 0 1px, transparent 1.8px),
    radial-gradient(circle at 92% 14%, rgba(125,211,252,.82) 0 1px, transparent 1.8px),
    radial-gradient(circle at 60% 88%, rgba(255,255,255,.76) 0 1px, transparent 1.7px) !important;
  background-size: 180px 150px, 230px 210px, 150px 180px, 210px 170px, 270px 250px, 320px 280px, 190px 230px, 360px 330px !important;
  animation: novaSpaceZoom 18s linear infinite !important;
}
html body #login .space-galaxy, html body.light #login .space-galaxy {
  display: block !important; animation: novaGalaxyFast 26s ease-in-out infinite !important;
}
#login h1 { color: #93C5FD !important; letter-spacing: .12em; }
#login p  { color: #A9B6D0 !important; }
#login .kp { width: min(240px, 78vw) !important; gap: .5rem !important; }
#login .kp button {
  width: 64px !important; height: 64px !important;
  border-radius: 50% !important;
  background: rgba(230, 238, 250, .07) !important;
  border: 1px solid rgba(230, 238, 250, .55) !important;
  color: #E6EDF8 !important;
  font-size: 1.15rem !important; font-weight: 600 !important;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .15s, border-color .15s, transform .1s;
}
#login .kp button:hover { background: rgba(230, 238, 250, .16) !important; border-color: #E6EDF8 !important; }
#login .kp button:active { transform: scale(.95); background: rgba(78,141,247,.45) !important; }
#login .kp button.kd { font-size: .95rem !important; color: #A9B6D0 !important; border-color: rgba(230,238,250,.32) !important; }
#login .pd-dot { border-color: rgba(230,238,250,.6) !important; }
#login .pd-dot.f { background: #4E8DF7 !important; border-color: #4E8DF7 !important; box-shadow: 0 0 10px rgba(78,141,247,.7); }

/* ---------------------------------------------------------------
   16. RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 1023px) {
  #login { margin-left: 0 !important; margin-right: 0 !important; }
}
@media (min-width: 1024px) {
  .tb { padding: .5rem 1.2rem; }
  .ct { padding: 1.2rem 1.4rem; }
  .ts div { font-size: .86rem; padding: .65rem 1rem; }
}
@media (min-width: 1440px) {
  .ct { max-width: 1300px; margin: 0 auto; width: 100%; }
}

/* ---------------------------------------------------------------
   17. RED DE SEGURIDAD de contraste (textos claros fijos en tema claro)
   --------------------------------------------------------------- */
body.light [style*="color:#e2e8f0"], body.light [style*="color: #e2e8f0"] { color: var(--text) !important; }
body.light [style*="color:#cbd5e1"], body.light [style*="color: #cbd5e1"] { color: #344054 !important; }
body.light [style*="color:#94a3b8"], body.light [style*="color: #94a3b8"] { color: var(--text-muted) !important; }
body.light [style*="color:#64748b"], body.light [style*="color: #64748b"] { color: var(--text-soft) !important; }
#login [style*="color:#94a3b8"], #login [style*="color: #94a3b8"] { color: #A9B6D0 !important; }

/* ============================================================
   FIX v2 · MOVIL Y ROBUSTEZ (10/09 noche)
   ============================================================ */

/* A) Las filas de navegacion NUNCA se ocultan ni se solapan */
.ts {
  display: flex !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  min-height: 42px;
  align-items: center;
}
.ts > div { flex: 0 0 auto; }
#main-ts:empty, #emp-ts:empty { display: none !important; }
.submenu-bar.show { display: flex !important; }

/* B) En movil, las estadisticas pasan a carrusel lateral
      (mismo gesto que el dial de unidades del Taller) */
@media (max-width: 760px) {
  .stats-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: .55rem;
    padding: .15rem .15rem .5rem;
    margin: 0 -.2rem;
  }
  .stat-card {
    flex: 0 0 46%;
    min-width: 132px;
    scroll-snap-align: start;
    padding: .6rem .7rem;
  }
  .stat-card .num { font-size: 1.35rem; }
  .stat-card .lbl { font-size: .68rem; }
  /* pista visual de que se puede deslizar */
  .stats-row::after { content: ''; flex: 0 0 .25rem; }
}

/* C) Vehiculos: la barra de herramientas se parte en 2 lineas en movil */
@media (max-width: 760px) {
  .veh-tool, #veh-toolbar .veh-tool {
    flex-wrap: wrap !important;
    gap: .4rem !important;
    justify-content: center;
  }
  .veh-brush, .veh-size { white-space: nowrap; }
  .veh-tool .lbl { flex: 0 0 100%; text-align: center; }
  .veh-hint { white-space: normal; margin: 0 auto; text-align: center; flex: 0 0 100%; color: var(--text-soft); }
  .veh-color { width: 28px; height: 28px; flex: 0 0 28px; }
  /* miniaturas del visor: en columna, a lo ancho */
  .veh-layout { flex-direction: column !important; gap: .7rem !important; }
  .veh-thumbs { flex: 1 1 auto !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: .5rem !important; }
  .veh-thumbs .veh-thumb img { height: 86px !important; }
}

/* D) Botones y chips: que nunca se salgan de su tarjeta */
.ca, .mi, .pi { min-width: 0; }
.ca .bt, .ca .adm-btn, .mi .bt, .pi .bt { max-width: 100%; }

/* E) En movil, evita que algo obligue a hacer scroll horizontal de pagina */
@media (max-width: 760px) {
  body, #app, #main, .ct { max-width: 100vw; overflow-x: hidden; }
  .ca, .mi, .pi, .stat-card { overflow-wrap: anywhere; }
}

/* botón «Mi área» activo */
.tb .nova-miar.on {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 0 0 3px var(--accent-ring) !important;
  filter: brightness(1.05);
}

/* ============================================================
   FIX v3 · GANA A base.css (usa su misma especificidad #cd.ac / #cst.ac)
   En base.css hay reglas con #id y !important que anulaban lo de arriba.
   ============================================================ */

/* A) MOVIL · estadísticas en carrusel lateral + etiquetas legibles */
@media (max-width: 760px) {
  #cd.ac .stats-row, #cst.ac .stats-row, #cd .stats-row, .stats-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: none !important;
    gap: .55rem !important;
    padding: .15rem .15rem .65rem !important;
    margin-bottom: .5rem !important;
    width: auto !important;
    max-width: none !important;
  }
  #cd.ac .stats-row .stat-card, #cst.ac .stats-row .stat-card, .stats-row .stat-card {
    flex: 0 0 46% !important;
    min-width: 142px !important;
    width: auto !important;
    min-height: 0 !important;
    scroll-snap-align: start !important;
    padding: .7rem .75rem !important;
    border-radius: var(--radius-card) !important;
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .15rem !important;
  }
  #cd.ac .stats-row .stat-card .num, #cst.ac .stats-row .stat-card .num, .stats-row .stat-card .num {
    font-size: 1.6rem !important;
    line-height: 1.05 !important;
  }
  #cd.ac .stats-row .stat-card .lbl, #cst.ac .stats-row .stat-card .lbl, .stats-row .stat-card .lbl {
    font-size: .78rem !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    max-width: 100% !important;
    margin-top: .1rem !important;
    text-align: left !important;
  }
  /* la fila de pestañas deja solo lo esencial; el resto va al menú ☰ */
  #main-ts #th, #main-ts #tst, #main-ts #te, #main-ts #ttr, #main-ts #tcss {
    display: none !important;
  }
  .tb { padding: .5rem .55rem; }
  .nova-miar { display: none !important; }
}

/* B) Botón ☰ (menú vertical) */
.nova-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 36px; flex: 0 0 auto;
  border-radius: var(--radius-control);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.nova-burger:hover { border-color: var(--accent); color: var(--accent-text); }

/* C) Cajón vertical */
.nova-drawer-ov {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(6, 10, 20, .55);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.nova-drawer-ov.show { opacity: 1; pointer-events: auto; }
.nova-drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(330px, 88vw);
  background: var(--surface);
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .2s ease;
}
.nova-drawer.show { transform: translateX(0); }
.nova-drawer-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem .9rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.nova-drawer-head .chip-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .95rem;
}
body:not(.light) .nova-drawer-head .chip-avatar { color: var(--text-invert); }
.nova-drawer-head .dd-name { color: var(--text); font-weight: 700; font-size: .9rem; }
.nova-drawer-head .dd-role { color: var(--text-muted); font-size: .7rem; margin-top: .1rem; }
.nova-drawer-body { flex: 1; overflow-y: auto; padding: .5rem .55rem 1.2rem; }
.nova-drawer-sec {
  font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-soft); padding: .7rem .5rem .3rem;
}
.nova-drawer-it {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; text-align: left;
  padding: .65rem .6rem; margin-bottom: .12rem;
  border: none; background: none; border-radius: var(--radius-control);
  color: var(--text); font-size: .88rem; font-weight: 500; cursor: pointer;
}
.nova-drawer-it:hover { background: var(--surface-2); }
.nova-drawer-it .ic { width: 20px; text-align: center; flex: 0 0 auto; }
.nova-drawer-it.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 700; }
.nova-drawer-it.danger { color: var(--color-danger); }
.nova-drawer-it.danger:hover { background: var(--color-danger-bg); }
.nova-drawer-sep { height: 1px; background: var(--border); margin: .55rem .4rem; }
.nova-drawer-close {
  margin-left: auto; width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
}

/* ============================================================
   FIX v4 · ESTADÍSTICAS (gana de verdad a base.css)
   base.css usa «#cd.ac > #stats-row» (DOS ids + !important).
   Aquí se replica esa especificidad y se aplica DESPUÉS.
   ============================================================ */

/* 1) Etiquetas y números legibles SIEMPRE (PC y móvil) */
#cd.ac > #stats-row .stat-card .lbl,
#cst.ac > #stats-row .stat-card .lbl,
#cd.ac .stats-row .stat-card .lbl,
#cst.ac .stats-row .stat-card .lbl,
#cd.ac > #stats-row > .stats-row .stat-card .lbl {
  font-size: .8rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  max-width: 100% !important;
  margin-top: .2rem !important;
  color: var(--text-muted) !important;
}

#cd.ac > #stats-row .stat-card .num,
#cst.ac > #stats-row .stat-card .num,
#cd.ac .stats-row .stat-card .num,
#cst.ac .stats-row .stat-card .num {
  font-size: 1.6rem !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
}

/* 2) MÓVIL: carrusel lateral (mismo gesto que el dial del Taller) */
@media (max-width: 760px) {
  #cd.ac > #stats-row, #cst.ac > #stats-row,
  #cd.ac .stats-row, #cst.ac .stats-row, .stats-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: none !important;
    gap: .55rem !important;
    padding: .2rem .2rem .7rem !important;
    margin: 0 0 .6rem 0 !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  #cd.ac > #stats-row > .stat-card, #cst.ac > #stats-row > .stat-card,
  #cd.ac .stats-row .stat-card, #cst.ac .stats-row .stat-card {
    flex: 0 0 46% !important;
    min-width: 145px !important;
    width: auto !important;
    min-height: 0 !important;
    scroll-snap-align: start !important;
    padding: .75rem .8rem !important;
    border-radius: var(--radius-card) !important;
    border-left-width: 3px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: .1rem !important;
  }
}

/* ============================================================
   FIX v5 · ESTADÍSTICAS con el DOM REAL de dos niveles
   El dashboard genera:  <div id="stats-row"><div class="stats-row">…
   base.css manda con «#cd.ac > #stats-row > .stats-row» (dos ids).
   Aquí se replica esa ruta exacta.
   ============================================================ */

/* etiquetas legibles en TODOS los niveles */
#cd.ac > #stats-row > .stats-row .stat-card .lbl,
#cst.ac > #stats-row > .stats-row .stat-card .lbl,
#cd.ac > #stats-row > .stats-row > .stat-card .lbl,
#cd.ac > #stats-row > .stat-card > .lbl {
  font-size: .8rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  max-width: 100% !important;
  margin-top: .2rem !important;
  color: var(--text-muted) !important;
}
#cd.ac > #stats-row > .stats-row .stat-card .num,
#cst.ac > #stats-row > .stats-row .stat-card .num,
#cd.ac > #stats-row > .stats-row > .stat-card .num {
  font-size: 1.6rem !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
}

@media (max-width: 760px) {
  /* El envoltorio y la rejilla interna pasan a carrusel */
  #cd.ac > #stats-row, #cst.ac > #stats-row,
  #cd.ac > #stats-row > .stats-row, #cst.ac > #stats-row > .stats-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: none !important;
    gap: .55rem !important;
    padding: .2rem .2rem .7rem !important;
    margin: 0 0 .6rem 0 !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
  }
  /* las tarjetas */
  #cd.ac > #stats-row > .stats-row > .stat-card,
  #cst.ac > #stats-row > .stats-row > .stat-card,
  #cd.ac > #stats-row > .stats-row .stat-card {
    flex: 0 0 46% !important;
    min-width: 148px !important;
    width: auto !important;
    min-height: 0 !important;
    scroll-snap-align: start !important;
    padding: .8rem .85rem !important;
    border-radius: var(--radius-card) !important;
    border-left-width: 3px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: .1rem !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   FIX v6 · nada se sale de su tarjeta (móvil)
   ============================================================ */
@media (max-width: 760px) {
  #cd.ac, #cst.ac, .ct { padding-left: .7rem !important; padding-right: .7rem !important; }
  #cd.ac .ca, #cd.ac .mi, #cd.ac .pi,
  #cst.ac .ca, #cst.ac .mi, #cst.ac .pi,
  .ca, .mi, .pi {
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere;
  }
  .dash-grid { display: flex !important; flex-direction: column !important; gap: .8rem !important; }
}

/* ============================================================
   v7 · móvil: estadísticas al final + barra fina de arrastre
        (y limpieza de la barra superior)
   ============================================================ */

/* El punto de estado y la flecha del nombre ya no se usan */
#us-state, .us-state { display: none !important; }
.user-chip .chip-arrow { display: none !important; }

/* El ☰ queda a la derecha del nombre */
.tb .nova-burger { margin-left: .15rem; }

@media (max-width: 760px) {
  /* #cd pasa a columna y las estadísticas van al final.
     OJO: SOLO con .ac (pestaña activa). Sin .ac, #cd debe seguir oculto. */
  #cd.ac, #cst.ac {
    display: flex !important;
    flex-direction: column !important;
  }
  #cd.ac > #stats-row, #cst.ac > #stats-row {
    order: 2 !important;
    margin-top: 1rem !important;
    margin-bottom: .3rem !important;
  }
  #cd.ac > .dash-grid, #cst.ac > .dash-grid {
    order: 1 !important;
  }
  /* barra fina de desplazamiento lateral (izquierda-derecha) */
  #cd.ac > #stats-row, #cst.ac > #stats-row,
  #cd.ac > #stats-row > .stats-row, #cst.ac > #stats-row > .stats-row {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
  #cd.ac > #stats-row::-webkit-scrollbar,
  #cst.ac > #stats-row::-webkit-scrollbar,
  #cd.ac > #stats-row > .stats-row::-webkit-scrollbar,
  #cst.ac > #stats-row > .stats-row::-webkit-scrollbar {
    height: 4px;
    display: block;
  }
  #cd.ac > #stats-row::-webkit-scrollbar-track,
  #cd.ac > #stats-row > .stats-row::-webkit-scrollbar-track {
    background: var(--surface-2);
    border-radius: 99px;
  }
  #cd.ac > #stats-row::-webkit-scrollbar-thumb,
  #cd.ac > #stats-row > .stats-row::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 99px;
  }
}

/* ============================================================
   v9 · submenú fuera, botones del informe y planilla
   ============================================================ */

/* 1) El submenú inferior ya no se usa (todo está en el ☰) */

/* 2) Botones del informe: 3 en UNA fila (también en móvil) con degradado azul→morado */
.emp-inf-btns {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: .4rem !important;
}
.emp-inf-btn {
  width: 100% !important;
  border: none !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: var(--radius-control) !important;
  padding: .5rem .45rem !important;
  font-size: .74rem !important;
  line-height: 1.15 !important;
  min-height: 42px !important;
  letter-spacing: .01em;
  box-shadow: 0 1px 2px rgba(16,24,40,.18);
  transition: filter .15s, transform .08s;
}
.emp-inf-btn:active { transform: translateY(1px); }
.emp-inf-btn:hover { filter: brightness(1.08); }
.emp-inf-btn.b1 { background: linear-gradient(135deg, #2563EB 0%, #4F46E5 55%, #6366F1 100%) !important; }
.emp-inf-btn.b2 { background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 60%, #8B5CF6 100%) !important; }
.emp-inf-btn.b3 { background: linear-gradient(135deg, #7C3AED 0%, #9333EA 55%, #A855F7 100%) !important; }
@media (max-width: 760px) {
  .emp-inf-btn { font-size: .68rem !important; padding: .5rem .3rem !important; min-height: 40px !important; }
}

/* 3) Avisos de planilla: dos botones, el activo iluminado */
.pl-toggles { display: inline-flex; gap: .35rem; align-items: center; }
.pl-toggle {
  width: auto !important;
  padding: .42rem .8rem !important;
  font-size: .7rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--border-strong) !important;
  background: var(--surface-2) !important;
  color: var(--text-soft) !important;
  opacity: .55;
  cursor: pointer;
  transition: all .15s;
}
.pl-toggle:disabled { cursor: default; }
.pl-toggle.is-on {
  opacity: 1;
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  border-color: #16a34a !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.28), 0 0 12px rgba(34,197,94,.45);
}
.pl-toggle.is-off {
  opacity: 1;
  background: linear-gradient(135deg, #64748b, #475569) !important;
  border-color: #475569 !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(100,116,139,.25);
}

/* 4) Botón «Enviar ahora» con degradado azul */
.bt.pl-enviar {
  width: auto !important;
  padding: .5rem .95rem !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--radius-control) !important;
  background: linear-gradient(135deg, #0EA5E9 0%, #2563EB 55%, #3B82F6 100%) !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.18);
}
.bt.pl-enviar:hover { filter: brightness(1.08); }

/* ============================================================
   Página de daños (vehículo): 4 vistas arriba, herramientas
   debajo en 2 líneas, y el dibujo a continuación.
   ============================================================ */

/* Las 4 vistas: fila de 4 (PC) / rejilla 2x2 (móvil) */
#cv .veh-thumbs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: .5rem !important;
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto .6rem !important;
  padding: 0 !important;
}
#cv .veh-thumbs .veh-thumb { width: 100% !important; padding: .4rem !important; }
#cv .veh-thumbs .veh-thumb img { height: 84px !important; width: auto !important; max-width: 100% !important; }

/* Herramientas: dos filas compactas */
#cv #veh-toolbar { margin: 0 auto; }
#cv .veh-tool {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .4rem !important;
  padding: .25rem 0 !important;
}
#cv .veh-tool-b { gap: .5rem !important; padding-top: .35rem !important; }
#cv .veh-tool .lbl { margin-left: .2rem; }

/* El dibujo ocupa el ancho completo */
#cv #damage-viewer { width: 100% !important; max-width: 100% !important; margin: 0 auto; }

@media (max-width: 760px) {
  #cv .veh-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #cv .veh-thumbs .veh-thumb img { height: 74px !important; }
  #cv .veh-tool { gap: .35rem !important; }
  #cv .veh-brush, #cv .veh-size { font-size: .7rem !important; padding: .38rem .6rem !important; }
  #cv .veh-color { width: 26px !important; height: 26px !important; flex: 0 0 26px !important; }
}

/* ============================================================
   Zonas de la unidad (Material): botones iguales, 3 columnas
   (movil: 3 + 3 = dos filas). Antes flex: se veian desiguales.
   ============================================================ */
.zonas-chip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: .45rem !important;
  align-items: stretch !important;
}
.zonas-chip > span[style] { grid-column: 1 / -1; }   /* la etiqueta "Zonas de ..." ocupa toda la fila */
.zonas-chip .base-chip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: .6rem .5rem !important;
  min-height: 54px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
  gap: .35rem !important;
  overflow-wrap: anywhere;
}
.zonas-chip .base-chip .base-dot { flex: 0 0 auto; }

@media (max-width: 760px) {
  .zonas-chip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .35rem !important; }
  .zonas-chip .base-chip {
    font-size: .68rem !important;
    padding: .5rem .3rem !important;
    min-height: 58px !important;
    flex-direction: column;   /* punto encima del texto: mas sitio para el nombre */
    gap: .2rem !important;
  }
  .zonas-chip .base-chip .base-dot { width: 8px; height: 8px; }
}

/* ============================================================
   FIX · submenú fuera DE VERDAD (antes perdía contra .show)
   y logo a la IZQUIERDA.
   ============================================================ */

/* base.css tiene `.submenu-bar.show { display:flex }` (2 clases) que ganaba
   a `.submenu-bar` (1 clase). Aquí se cubren todas las variantes. */
.submenu-bar,
.submenu-bar.show,
.submenu-bar.show.act,
#submenu-bar,
#submenu-bar.show,
body.light .submenu-bar,
body:not(.light) .submenu-bar,
body.tsnu-app .submenu-bar {
  display: none !important;
}

/* Logo a la izquierda: pasa a la 2ª columna y se ancla al inicio */
.tb { grid-template-columns: auto auto 1fr !important; }
.tb img.logo {
  margin: 0 !important;
  justify-self: start !important;
  align-self: center !important;
}
/* el bloque derecho sigue pegado a la derecha */
.tb .tb-r { justify-self: end !important; }

/* ============================================================
   Bases · celdas pequenas (unidades asignadas y equipamientos):
   6 columnas en UNA linea, tambien en movil.
   ============================================================ */
.mini-chips {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: .35rem !important;
  align-items: stretch !important;
}
.mini-chips .base-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: .22rem !important;
  padding: .26rem .3rem !important;
  min-height: 26px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.mini-chips .base-chip .base-dot { width: 6px !important; height: 6px !important; flex: 0 0 auto; }

@media (max-width: 760px) {
  .mini-chips { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .35rem !important; }
  .mini-chips .base-chip {
    font-size: .68rem !important;
    padding: .36rem .3rem !important;
    min-height: 36px !important;
    flex-direction: row;          /* punto al lado del texto: mas sitio para la letra */
    gap: .25rem !important;
  }
  .mini-chips .base-chip .base-dot { width: 7px; height: 7px; }
}

/* ============================================================
   FIX CRÍTICO · base.css tiene `.chip-wrap > span[style] { grid-column: 1 / -1 }`
   y los chips SON span[style] -> cada chip ocupaba TODA la fila (de ahí los
   "botones enormes" de Bases). Se devuelve grid-column: auto a los chips.
   ============================================================ */
.mini-chips > .base-chip,
.mini-chips > span.base-chip,
.zonas-chip > .base-chip,
.zonas-chip > div.base-chip {
  grid-column: auto !important;
}
/* la etiqueta de texto (la que SÍ debe ocupar la fila) sigue a lo suyo */
.mini-chips > span[style]:not(.base-chip),
.zonas-chip > span[style]:not(.base-chip) {
  grid-column: 1 / -1 !important;
}

/* ============================================================
   FIX · pantalla FIJA (sin scroll sobrante)
   Causas:
     1) body { padding: 1rem }  -> 16px arriba + 16px abajo SUMADOS a la altura
     2) min-height: 100vh       -> en móvil 100vh es más alto que lo visible
   Solución: quitar el padding del body y usar 100dvh (alto dinámico real).
   ============================================================ */

/* ============================================================
   FIX DEFINITIVO · pantalla FIJA, sin scroll de página
   - html/body al 100% y sin desbordar
   - #app / #login / #main con altura EXACTA (no min-height)
   - el contenido scrollea SOLO dentro de .ct
   - se usa 100dvh cuando el navegador lo soporta (móvil moderno)
   ============================================================ */
html, body {
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body { overflow-x: hidden !important; }

#app, #login, #main {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#login { overflow-y: auto !important; }   /* si algún día no cabe, se desplaza la portada */

/* alto dinámico real en móviles que lo soportan */
@supports (height: 100dvh) {
  #app, #login, #main { height: 100dvh !important; max-height: 100dvh !important; }
}

/* #main es columna: barra + pestañas + contenido(flex) + pie.
   OJO: NO forzar display (base.css lo oculta hasta el login; el JS lo muestra). */
#main { flex-direction: column !important; }
#main .ct { min-height: 0 !important; flex: 1 1 auto !important; overflow-y: auto !important; }
#main .tb, #main .ts, #main .ftr { flex: 0 0 auto !important; }

/* la portada es columna; SIN !important en display, para que el JS pueda
   ocultarla tras el login (si no, se queda encima con 'Restaurando sesión...') */
#login { flex-direction: column; }

/* ============================================================
   FIX · la barra horizontal de secciones del panel de empleado
   (#emp-ts) ya no se usa: sus secciones están en el menú ☰.
   Hace falta !important porque el JS le pone style.display='flex'.
   ============================================================ */
#emp-ts { display: none !important; }

/* ==========================================================================
   NOVA · PARTÍCULAS DEL ESPACIO  (cometas + meteoritos)
   Cometas: nacen en el CENTRO y salen hacia un lado.
   Meteoritos: cruzan de LADO A LADO.
   Ciclo 10 s, cruce ~8 s, escalonados. 10 px uniformes, fondo transparente,
   estela que se desvanece, SIN sombra.
   ========================================================================== */

@keyframes novaGalaxyFast {
  0%, 55% { opacity: 0; transform: translate(-50%,-50%) rotate(-18deg) scale(.5); }
  65%     { opacity: .32; }
  85%     { opacity: .14; transform: translate(-50%,-50%) rotate(-6deg) scale(1.05); }
  100%    { opacity: 0; transform: translate(-50%,-50%) rotate(6deg) scale(1.2); }
}

@keyframes novaCometaViaje {
  0%   { opacity: 0; transform: translate(var(--x0,50vw), var(--y0,50vh)) rotate(var(--ca,0deg)) scale(.18); }
  5%   { opacity: 1; }
  88%  { opacity: .92; transform: translate(var(--x1,50vw), var(--y1,-40vh)) rotate(var(--ca,0deg)) scale(1.9); }
  100% { opacity: 0; transform: translate(var(--x1,50vw), var(--y1,-40vh)) rotate(var(--ca,0deg)) scale(2.15); }
}
@keyframes novaMeteoroViaje {
  0%   { opacity: 0; transform: translate(var(--x0,-10vw), var(--y0,30vh)) rotate(var(--ca,0deg)); }
  4%   { opacity: 1; }
  92%  { opacity: .88; }
  100% { opacity: 0; transform: translate(var(--x1,110vw), var(--y1,70vh)) rotate(var(--ca,0deg)); }
}
@keyframes novaGalaxyFast {
  0%, 55% { opacity: 0; transform: translate(-50%,-50%) rotate(-18deg) scale(.5); }
  65%     { opacity: .32; }
  85%     { opacity: .14; transform: translate(-50%,-50%) rotate(-6deg) scale(1.05); }
  100%    { opacity: 0; transform: translate(-50%,-50%) rotate(6deg) scale(1.2); }
}
/* ---- 4 COMETAS: nacen en el CENTRO, vienen de frente, salen por ARRIBA o ABAJO ---- */
html body #login .space-comet, html body.light #login .space-comet { position:fixed !important; z-index:3 !important; pointer-events:none !important; left:0 !important; top:0 !important; width:10px !important; height:10px !important; border-radius:50 !important; opacity:0; background:radial-gradient(circle,#fff 0%,#cfe9ff 40%,#60a5fa 74%,rgba(96,165,250,0) 100%) !important; box-shadow:none !important; --x0:50vw; --y0:50vh; --x1:50vw; --y1:-40vh; --ca:0deg; animation:novaCometaViaje 10s linear infinite !important; animation-delay:0s !important; }
html body #login .space-comet.c2, html body.light #login .space-comet.c2 { position:fixed !important; z-index:3 !important; pointer-events:none !important; left:0 !important; top:0 !important; width:10px !important; height:10px !important; border-radius:50 !important; opacity:0; background:radial-gradient(circle,#fff 0%,#ffeaa3 40%,#fbbf24 74%,rgba(251,191,36,0) 100%) !important; box-shadow:none !important; --x0:50vw; --y0:50vh; --x1:50vw; --y1:-40vh; --ca:0deg; animation:novaCometaViaje 10s linear infinite !important; animation-delay:3s !important; }
html body #login .space-comet.c3, html body.light #login .space-comet.c3 { position:fixed !important; z-index:3 !important; pointer-events:none !important; left:0 !important; top:0 !important; width:10px !important; height:10px !important; border-radius:50 !important; opacity:0; background:radial-gradient(circle,#fff 0%,#f5d0fe 40%,#e879f9 74%,rgba(232,121,249,0) 100%) !important; box-shadow:none !important; --x0:50vw; --y0:50vh; --x1:50vw; --y1:-40vh; --ca:0deg; animation:novaCometaViaje 10s linear infinite !important; animation-delay:6s !important; }
html body #login .space-comet.c4, html body.light #login .space-comet.c4 { position:fixed !important; z-index:3 !important; pointer-events:none !important; left:0 !important; top:0 !important; width:10px !important; height:10px !important; border-radius:50 !important; opacity:0; background:radial-gradient(circle,#fff 0%,#bbf7d0 40%,#34d399 74%,rgba(52,211,153,0) 100%) !important; box-shadow:none !important; --x0:50vw; --y0:50vh; --x1:50vw; --y1:-40vh; --ca:0deg; animation:novaCometaViaje 10s linear infinite !important; animation-delay:9s !important; }
html body #login .space-comet::before, html body.light #login .space-comet::before { content:'' !important; position:absolute !important; top:50% !important; right:50% !important; width:78px !important; height:2.6px !important; margin-top:-1.3px !important; border-radius:999px !important; transform-origin:right center !important; background:linear-gradient(270deg,rgba(255,255,255,.6) 0%,rgba(96,165,250,.34) 40%,rgba(255,255,255,0) 100%) !important; }
html body #login .space-comet.c2::before, html body.light #login .space-comet.c2::before { content:'' !important; position:absolute !important; top:50% !important; right:50% !important; width:78px !important; height:2.6px !important; margin-top:-1.3px !important; border-radius:999px !important; transform-origin:right center !important; background:linear-gradient(270deg,rgba(255,255,255,.6) 0%,rgba(251,191,36,.34) 40%,rgba(255,255,255,0) 100%) !important; }
html body #login .space-comet.c3::before, html body.light #login .space-comet.c3::before { content:'' !important; position:absolute !important; top:50% !important; right:50% !important; width:78px !important; height:2.6px !important; margin-top:-1.3px !important; border-radius:999px !important; transform-origin:right center !important; background:linear-gradient(270deg,rgba(255,255,255,.6) 0%,rgba(232,121,249,.34) 40%,rgba(255,255,255,0) 100%) !important; }
html body #login .space-comet.c4::before, html body.light #login .space-comet.c4::before { content:'' !important; position:absolute !important; top:50% !important; right:50% !important; width:78px !important; height:2.6px !important; margin-top:-1.3px !important; border-radius:999px !important; transform-origin:right center !important; background:linear-gradient(270deg,rgba(255,255,255,.6) 0%,rgba(52,211,153,.34) 40%,rgba(255,255,255,0) 100%) !important; }
/* ---- 2 METEORITOS: cruzan de LADO A LADO, grises, irregulares (roca), SIN estela ---- */
html body #login .space-meteor, html body.light #login .space-meteor { position:fixed !important; z-index:3 !important; pointer-events:none !important; left:0 !important; top:0 !important; width:6.5px !important; height:6.5px !important; border-radius:0 !important; opacity:0; clip-path:polygon(48% 0%,76% 10%,100% 38%,90% 74%,64% 100%,30% 94%,6% 70%,0% 34%,20% 6%) !important; background:radial-gradient(circle at 36% 28%,#f1f5f9 0%,#cbd5e1 42%,#8b95a5 74%,#5b6472 100%) !important; box-shadow:none !important; --x0:-10vw; --y0:30vh; --x1:110vw; --y1:70vh; --ca:20deg; animation:novaMeteoroViaje 10s linear infinite !important; animation-delay:1s !important; }
html body #login .space-meteor.m2, html body.light #login .space-meteor.m2 { position:fixed !important; z-index:3 !important; pointer-events:none !important; left:0 !important; top:0 !important; width:6.5px !important; height:6.5px !important; border-radius:0 !important; opacity:0; clip-path:polygon(38% 4%,70% 0%,96% 26%,100% 62%,74% 92%,44% 100%,12% 84%,0% 52%,14% 20%) !important; background:radial-gradient(circle at 36% 28%,#f1f5f9 0%,#cbd5e1 42%,#8b95a5 74%,#5b6472 100%) !important; box-shadow:none !important; --x0:-10vw; --y0:30vh; --x1:110vw; --y1:70vh; --ca:20deg; animation:novaMeteoroViaje 10s linear infinite !important; animation-delay:6s !important; }
html body #login .space-meteor::before, html body.light #login .space-meteor::before, html body #login .space-meteor::after, html body.light #login .space-meteor::after, html body #login .space-meteor.m2::before, html body.light #login .space-meteor.m2::before, html body #login .space-meteor.m2::after, html body.light #login .space-meteor.m2::after { content: none !important; background: none !important; box-shadow: none !important; }
/* ---- Galaxia ---- */
html body #login .space-galaxy, html body.light #login .space-galaxy { display:block !important; animation:novaGalaxyFast 26s ease-in-out infinite !important; }

/* ---- Destello amarillo-naranja de las teclas del PIN ---- */
#login .kp button {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, border-color .12s, transform .08s;
}
@keyframes novaPinFlash {
  0%   { opacity: .9;  transform: scale(.3); }
  45%  { opacity: .55; transform: scale(1.9); }
  100% { opacity: 0;   transform: scale(2.7); }
}
#login .kp button::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 80%; height: 80%;
  margin: -40% 0 0 -40%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle,
      rgba(255,255,255,.95) 0%,
      rgba(255,236,150,.92) 20%,
      rgba(250,204,21,.78) 42%,
      rgba(249,115,22,.5) 62%,
      rgba(249,115,22,0) 80%);
}
#login .kp button.nova-flash::after { animation: novaPinFlash .55s ease-out 1; }
#login .kp button:active {
  background: rgba(250, 204, 21, .30) !important;
  border-color: rgba(251,191,36,.9) !important;
  box-shadow: 0 0 18px 4px rgba(250,204,21,.35), 0 0 34px 12px rgba(249,115,22,.22) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body #login .space-comet, html body.light #login .space-comet,
  html body #login .space-comet.c2, html body.light #login .space-comet.c2,
  html body #login .space-meteor, html body.light #login .space-meteor,
  html body #login .space-meteor.m2, html body.light #login .space-meteor.m2,
  html body #login .space-meteor.m3, html body.light #login .space-meteor.m3,
  html body #login .space-galaxy, html body.light #login .space-galaxy {
    animation: none !important;
  }
  #login .kp button.nova-flash::after { animation: none; }
}

/* ============================================================
   BASES EN PC · dos columnas y chips compactos.
   Movil ya se ve bien: todo esto vive en min-width:761px.
   (mini-chips solo se usa en Bases -> no afecta a otras pantallas)
   ============================================================ */
@media (min-width: 761px) {
  .base-cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .8rem !important;
    align-items: start !important;
  }
  .base-sec > .st { margin-top: 0 !important; margin-bottom: .35rem !important; }
  .base-cols .ca { margin-bottom: 0 !important; }

  /* chips del tamano de su texto, en fila que se envuelve */
  .mini-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .3rem !important;
  }
  .mini-chips > .base-chip,
  .mini-chips > span.base-chip,
  .mini-chips > div.base-chip {
    width: auto !important;
    grid-column: auto !important;
    min-height: 24px !important;
    padding: .2rem .6rem !important;
    font-size: .7rem !important;
  }
  #alm-info > .adm-btn { justify-self: start !important; }
}
@media (min-width: 761px) {
  /* la tarjeta de la base: texto a la izquierda, fotos/maps a la derecha */
  #alm-info > .ca:first-child {
    display: flex !important;
    gap: 1.2rem !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }
  .bf-txt { flex: 1 1 auto !important; min-width: 0 !important; }
  .bf-media {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: .45rem !important;
  }
  .bf-media .bf-gallery { margin-top: 0 !important; }
}

/* ============================================================
   FIX PIN SIN SCROLL (11/09/2026)
   La pantalla de PIN (voc/vor/tsnu) se podia desplazar hacia abajo ~159 px
   y el pie quedaba "colgando". Causa MEDIDA en Chrome: el pseudo-elemento
   #login::before (campo de estrellas) es absoluto con inset:-35%, y como
   desborda el contenedor, alarga el area desplazable aunque el contenido
   real (logo -> teclado) acabe mucho antes.
   Solucion MEDIDA: ese pseudo pasa a position:fixed -> scroll real = 0 px
   en PC (1440) y en movil (390), sin mover nada de sitio.
   Se conserva overflow-y:auto como red de seguridad en pantallas muy bajas.
   ============================================================ */
html body #login::before,
html body.light #login::before {
  position: fixed !important;
  inset: -35% !important;
}

/* ============================================================
   UNIDADES (bases y fisicas) · acciones en UNA linea y compactas
   Historial/Ver estado + Editar + Eliminar, al tamano del badge OPERATIVA.
   ============================================================ */
.uni-acciones {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .3rem !important;
  margin-top: .35rem !important;
}
.uni-acciones .adm-btn {
  font-size: .58rem !important;
  padding: 2px 7px !important;
  min-height: 0 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}


/* ---------------------------------------------------------------
   23. CUADRO DE MANDO DE ESTADÍSTICAS
   --------------------------------------------------------------- */
#cst.ac { overflow-x: hidden; }
.est-titulo,
.est-filtros-cab,
.est-panel-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
}
.est-titulo { margin: .35rem 0 1rem; align-items: center; }
.est-titulo .st,
.est-filtros .st,
.est-insights .st { margin: 0 0 .2rem; }
.est-titulo h2 { color: var(--text); font-size: 1.45rem; margin: 0; }
.est-titulo p,
.est-filtros-cab p,
.est-panel-cab p { color: var(--text-soft); font-size: .74rem; margin: .2rem 0 0; }
.est-titulo button,
.est-filtros button,
.est-csv,
.est-error-total button {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--text);
  min-height: 36px;
  padding: .48rem .78rem;
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
}
.est-titulo button,
.est-filtros-acciones #est-aplicar { background: var(--accent); border-color: var(--accent); color: var(--text-invert); }
.est-filtros { margin-bottom: 1rem; padding: .9rem; }
.est-filtros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: .65rem;
  margin-top: .8rem;
}
.est-filtros-grid label { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.est-filtros-grid label > span {
  color: var(--text-soft);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.est-filtros-grid input,
.est-filtros-grid select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-control);
  background: var(--input-bg);
  color: var(--text);
  padding: .45rem .55rem;
  font: inherit;
  font-size: .78rem;
}
.est-filtros-grid input:focus,
.est-filtros-grid select:focus { outline: 3px solid var(--accent-ring); border-color: var(--accent); }
.est-filtros-acciones { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .8rem; }
.est-insights { border-left: 4px solid var(--accent); margin-bottom: 1rem; }
.est-insights ul { margin: .45rem 0 0; padding-left: 1.2rem; color: var(--text); }
.est-insights li { margin: .32rem 0; font-size: .8rem; line-height: 1.45; }
.est-aviso {
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-control);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  padding: .6rem .7rem;
  margin: .4rem 0 .7rem;
  font-size: .72rem;
}
.est-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .55rem;
  margin-bottom: 1rem;
}
.est-kpi {
  min-width: 0;
  min-height: 92px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: .7rem;
}
.est-kpi span { display: block; color: var(--text-soft); font-size: .64rem; line-height: 1.2; }
.est-kpi strong { display: block; color: var(--text); font-size: 1.55rem; line-height: 1; margin-top: .35rem; }
.est-spark { width: 72px; min-width: 42px; height: 28px; overflow: visible; }
.est-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.est-panel { min-width: 0; margin: 0; padding: .85rem; overflow: hidden; }
.est-panel-cab { min-height: 48px; padding-bottom: .6rem; border-bottom: 1px solid var(--border); }
.est-panel-cab h3 { color: var(--text); font-size: .92rem; line-height: 1.2; margin: 0; }
.est-csv { min-height: 30px; padding: .32rem .55rem; color: var(--accent-text); }
.est-panel-cuerpo { min-height: 180px; padding-top: .7rem; }
.est-vacio {
  min-height: 170px;
  display: grid;
  place-items: center;
  color: var(--text-soft);
  font-size: .78rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-control);
  padding: 1rem;
}
.est-grafico-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; }
.est-svg { display: block; width: 100%; height: auto; max-height: 360px; }
.est-svg-ancho { min-width: 520px; }
.est-gridline { stroke: var(--border); stroke-width: 1; }
.est-eje { fill: var(--text-soft); font-size: 10px; }
.est-linea { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.est-area { opacity: .12; }
.est-punto { stroke: var(--surface); stroke-width: 2; }
.est-barra { rx: 5px; opacity: .9; }
.est-leyenda { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem .8rem; margin-top: .4rem; color: var(--text-muted); font-size: .67rem; }
.est-leyenda span { display: inline-flex; align-items: center; gap: .3rem; }
.est-leyenda i { width: 8px; height: 8px; border-radius: 50%; }
.est-donut-wrap { display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; }
.est-donut { width: min(220px, 100%); height: auto; transform: rotate(-90deg); }
.est-donut circle { transition: opacity .15s; }
.est-donut circle:hover { opacity: .76; }
.est-donut-num,
.est-donut-lbl { fill: var(--text); transform: rotate(90deg); transform-origin: 110px 110px; font-weight: 800; }
.est-donut-num { font-size: 25px; }
.est-donut-lbl { fill: var(--text-soft); font-size: 11px; font-weight: 600; }
.est-gauge { display: block; width: min(280px, 100%); height: auto; margin: 0 auto .4rem; }
.est-gauge-fondo { fill: none; stroke: var(--surface-3); stroke-width: 18; }
.est-gauge-valor { fill: none; stroke: var(--accent); stroke-width: 18; }
.est-gauge-aguja { stroke: var(--text); stroke-width: 3; }
.est-gauge-centro { fill: var(--text); }
.est-gauge-texto { fill: var(--text-muted); font-size: 11px; font-weight: 700; }
.est-heat-num { fill: var(--text); font-size: 11px; font-weight: 800; pointer-events: none; }
.est-funnel-text { fill: #FFFFFF; font-size: 13px; font-weight: 800; }
.est-box-line { stroke: var(--text-soft); stroke-width: 2; }
.est-box { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.est-box-med { stroke: var(--color-warning); stroke-width: 3; }
.est-scatter { opacity: .76; stroke: var(--surface); stroke-width: 2; }
.est-ranking { display: grid; gap: .55rem; }
.est-rank-fila { display: grid; grid-template-columns: 24px minmax(90px, 1.2fr) minmax(100px, 2fr) 40px; align-items: center; gap: .45rem; }
.est-rank-fila > b { color: var(--text-soft); font-size: .7rem; text-align: center; }
.est-rank-fila > span { min-width: 0; color: var(--text); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-rank-fila > div { height: 12px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.est-rank-fila i { display: block; height: 100%; border-radius: inherit; }
.est-rank-fila strong { color: var(--text); font-size: .75rem; text-align: right; }
.est-aging { display: grid; gap: .65rem; }
.est-aging-fila { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(120px, 2fr) 76px; align-items: center; gap: .55rem; }
.est-aging-fila strong,
.est-aging-fila span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-aging-fila strong { color: var(--text); font-size: .72rem; }
.est-aging-fila span { color: var(--text-soft); font-size: .62rem; margin-top: .12rem; }
.est-aging-track { height: 10px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.est-aging-track i { display: block; height: 100%; border-radius: inherit; }
.est-aging-track i.vig { background: var(--color-success); }
.est-aging-track i.prox { background: var(--color-warning); }
.est-aging-track i.cad { background: var(--color-danger); }
.est-aging-fila > b { font-size: .68rem; text-align: right; }
.est-aging-fila > b.vig { color: var(--color-success); }
.est-aging-fila > b.prox { color: var(--color-warning); }
.est-aging-fila > b.cad { color: var(--color-danger); }
.est-tabla-wrap { width: 100%; overflow-x: auto; }
.est-tabla { width: 100%; min-width: 520px; border-collapse: collapse; color: var(--text); font-size: .72rem; }
.est-tabla th { color: var(--text-soft); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; }
.est-tabla th,
.est-tabla td { padding: .5rem; border-bottom: 1px solid var(--border); text-align: left; }
.est-data-bar { position: relative; min-width: 130px; height: 20px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.est-data-bar i { display: block; height: 100%; background: var(--accent); opacity: .55; }
.est-data-bar span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text); font-size: .65rem; font-weight: 800; }
.est-cargando,
.est-error-total { min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; color: var(--text); text-align: center; }
.est-cargando i { width: 30px; height: 30px; border: 3px solid var(--surface-3); border-top-color: var(--accent); border-radius: 50%; animation: estGiro .8s linear infinite; }
.est-cargando span,
.est-error-total p { color: var(--text-soft); font-size: .75rem; }
@keyframes estGiro { to { transform: rotate(360deg); } }

@media (max-width: 1023px) {
  .est-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .est-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  #cst.ac { padding: .55rem; }
  .est-grid { grid-template-columns: minmax(0, 1fr); }
  .est-filtros-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .est-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .est-kpi { min-height: 78px; padding: .55rem; }
  .est-kpi strong { font-size: 1.25rem; }
  .est-spark { width: 52px; }
  .est-titulo { align-items: flex-start; }
  .est-titulo h2 { font-size: 1.2rem; }
  .est-aging-fila { grid-template-columns: minmax(90px, 1fr) minmax(90px, 1.5fr) 65px; }
}
@media (max-width: 390px) {
  .est-filtros-grid { grid-template-columns: minmax(0, 1fr); }
  .est-titulo { flex-direction: column; }
  .est-titulo button { width: 100%; }
  .est-rank-fila { grid-template-columns: 20px minmax(78px, 1fr) minmax(70px, 1.2fr) 32px; gap: .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .est-cargando i { animation: none; }
  .est-donut circle { transition: none; }
}

.est-bloque-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .45rem; }
.est-kpi-bloque { margin-bottom: 1rem; }
.est-kpi-bloque .est-kpis { margin-bottom: 0; }

/* ============================================================
   BARRA SUPERIOR pegada a los bordes (12 sep 2026)
   El ☰ debe tocar el borde derecho y el logo el izquierdo.
   - #app tiene padding lateral (0 / 2rem / 3rem): se compensa con
     margen negativo SOLO en .tb, para que el aire del contenido
     no cambie.
   - padding lateral del .tb a 0: su último hijo (☰) llega al borde.
   - El logo pasa a la primera columna (order) para quedar en el
     borde izquierdo; el bloque de tamaño A-/A+ va detrás. En móvil
     .tb-l está oculto, así que el logo ya quedaba primero.
   ============================================================ */
/* La barra tenía MÁRGENES NEGATIVOS que la sacaban del contenedor y el
   logo/rayitas quedaban pegados al borde. Ahora lleva el mismo aire
   lateral que el contenido, para que quede alineada (Lauren, 22:41). */
html body .tb { padding-left: 1.6rem !important; padding-right: 1.6rem !important; }
html body .tb img.logo { order: 1 !important; grid-column: 1 !important; grid-row: 1 !important; }
html body .tb .tb-l { order: 2 !important; grid-column: 2 !important; grid-row: 1 !important; }
/* grid-column fijo: en móvil .tb-l está oculto y sin esto el bloque derecho
   caía en la columna 2 (auto) dejando la 3ª vacía → hueco a la derecha. */
html body .tb .tb-r { order: 3 !important; grid-column: 3 !important; grid-row: 1 !important; }
@media (min-width: 1024px) {
  
}
@media (min-width: 1440px) {
  
}
/* el desplegable de usuario conserva un poco de aire al abrirse */
html body .user-dd { right: .6rem !important; }

/* ============================================================
   FIX 12 sep (tarde): la barra superior quedaba RECORTADA en PC.
   El despliegue de la barra usa margen negativo para llegar a los
   bordes, pero #main (pantalla fija) tiene overflow:hidden y recortaba
   2rem por cada lado: el logo perdia la mitad izquierda y el boton de
   las tres rayas casi todo por la derecha.
   En movil no pasaba porque alli #app no lleva padding lateral.
   Aqui se deja que recorte #app (cuyo borde ES el de la pantalla),
   que es justo donde queremos que corte. El ancho util del contenido
   no cambia: #app sigue con su padding lateral.
   ============================================================ */
@media (min-width: 1024px) {
  html body #main { overflow: visible !important; }
}

/* ============================================================
   ESTADISTICAS DE INICIO (movil) — carrusel con flechas
   Mismo formato que el dial de unidades del Taller: flecha
   izquierda + tira + flecha derecha. (12 sep 2026)

   Las flechas van DENTRO del envoltorio #stats-row, asi el
   carrusel es una fila normal y no depende de la rejilla de la
   pantalla (antes se colocaban como hermanas y se solapaban con
   la tarjeta de caducidades).

   CAUSA de que las tarjetas se vieran cortadas: #cd es una
   columna flex y, al no caber el contenido, TODOS sus hijos se
   comprimian (flex-shrink): la tira bajaba a 14 px y las tarjetas
   a 27 px. Arreglo: la tira no puede encogerse -> flex: 0 0 auto.
   ============================================================ */
.nova-car-btn { display: none !important; }   /* las flechas son solo de movil */

@media (max-width: 760px) {
  /* la tira NO se encoge: antes se quedaba en 14 px de alto */
  #cd.ac > #stats-row, #cst.ac > #stats-row,
  #cd.ac > #stats-row > .stats-row, #cst.ac > #stats-row > .stats-row,
  #cd.ac .stats-row, #cst.ac .stats-row, .stats-row {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }
  /* envoltorio = [ < ] [ tira ] [ > ] */
  #cd.ac > #stats-row, #cst.ac > #stats-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: .25rem !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: .25rem 0 .5rem !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  #cd.ac > #stats-row > .stats-row, #cst.ac > #stats-row > .stats-row {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  /* flechas del carrusel */
  .nova-car-btn {
    display: inline-flex !important;
    flex: 0 0 30px !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 54px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    background: var(--surface-2);
    color: var(--text);
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
  }
  .nova-car-btn:active { transform: scale(.94); }
  .nova-car-btn[disabled] { opacity: .3; cursor: default; }
}

/* El Taller (mecanica) tambien usa #cst para sus estadisticas: ahi se deja
   como estaba (ademas su index no carga nova-ui.js). */
body.mecanica-body .nova-car-btn { display: none !important; }
body.mecanica-body #cst.ac > .stats-row { margin: 0 !important; }

/* =====================================================================
   Ficha COMPACTA de trámite (16/09/2026)
   Los mismos datos en pocas líneas: en PC la ficha ocupaba media página.
   ===================================================================== */
.tr-det {
  background: #0b1220; border: 1px solid #334155; border-radius: 10px;
  padding: .6rem .75rem; max-width: 940px; box-sizing: border-box;
}
.tr-det-top {
  display: flex; align-items: center; gap: .5rem; justify-content: space-between;
  flex-wrap: wrap;
}
.tr-ref { font-family: ui-monospace, SFMono-Regular, monospace; font-size: .72rem; color: #94a3b8; }
.tr-det-tit { font-weight: 700; font-size: .95rem; margin: .15rem 0 .35rem; }
.tr-det-meta {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  font-size: .74rem; color: #94a3b8;
}
.tr-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .45rem 0; }
.tr-chip {
  background: #1a2235; border: 1px solid #334155; border-radius: 7px;
  padding: .18rem .5rem; font-size: .74rem; color: #cbd5e1;
}
.tr-chip b { color: #94a3b8; font-weight: 600; margin-right: .25rem; }
.tr-adj { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0; }
.tr-hist {
  margin-top: .4rem; border-left: 2px solid #334155; padding-left: .55rem;
}
.tr-hist-l {
  font-size: .74rem; margin-bottom: .35rem; display: flex;
  flex-wrap: wrap; gap: .4rem; align-items: baseline;
}
.tr-hist-l b { color: #cbd5e1; }
.tr-hist-m { color: #64748b; font-size: .68rem; }
.tr-hist-c { color: #94a3b8; width: 100%; }

@media (max-width: 700px) {
  .tr-det { padding: .55rem .6rem; }
  .tr-det-meta { font-size: .7rem; gap: .25rem .6rem; }
}

/* --- Cabecera: aire lateral para que no toque los bordes (18/09/2026) --- */
html body .tb { box-sizing: border-box; }
@media (max-width: 700px) {
  html body .tb { padding-left: .7rem !important; padding-right: .7rem !important; }
}
@media (min-width: 1600px) {
  html body .tb { padding-left: 2.2rem !important; padding-right: 2.2rem !important; }
}

/* ==========================================================================
   MATERIAL · BOTONES (Lauren, 20/09/2026)
   - Cuadrados (antes eran una pastilla muy redondeada) y SIN el puntito.
   - El marco de color se mantiene, ahora completo en los cuatro lados.
   - Texto mas grande, que se lea.
   - PC: los 4 de arriba en UNA linea; los 6 de zona, en una linea si caben.
   - Movil: 3 y 3.
   - Se aprovecha mejor el ancho (antes quedaba aire a los lados).
   Va al final a proposito: este fichero se carga el ultimo y las reglas de
   arriba llevan !important.
   ========================================================================== */

/* --- Los 4 de arriba: en una linea, cuadrados --- */
/* OJO: acotado a #cm (Material). `.subtabs` lo usa tambien la pagina de
   Unidades con su propio diseno (.uni-subtabs) y no se debe pisar. */
#cm .subtabs {
  grid-template-columns: repeat(4, 1fr) !important; gap: .5rem !important;
}
#cm .subtab {
  border-radius: 7px !important;      /* cuadrado, no pastilla */
  min-height: 46px !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
  padding: .5rem .45rem !important;
  line-height: 1.15 !important;
}
/* Marco de color completo (antes era solo una franja a la izquierda) */
#cm .subtab.st-dot { border: 2px solid #3b82f6 !important; }
#cm .subtab.st-inv { border: 2px solid #22c55e !important; }
#cm .subtab.st-cad { border: 2px solid #f59e0b !important; }
#cm .subtab.st-o2  { border: 2px solid #8b5cf6 !important; }

/* --- Botones de zona: cuadrados, centrados y sin puntito --- */
/* OJO: acotado a los botones de ZONA de Material (.zonas-chip). Los otros
   chips con puntito (equipamiento, unidades asignadas) NO se tocan: ahi el
   punto indica estado (verde = equipado). */
.chip-wrap.zonas-chip .base-chip {
  border-radius: 7px !important;
  min-height: 46px !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
  justify-content: center !important;
  text-align: center !important;
  padding: .5rem .45rem !important;
}
/* El puntito de color: fuera (el color ya lo dice el marco). */
.chip-wrap.zonas-chip .base-dot { display: none !important; }

/* --- Reparto de columnas --- */
.chip-wrap.zonas-chip { grid-template-columns: repeat(6, 1fr) !important; }
@media (max-width:1200px) {
  .chip-wrap.zonas-chip { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width:560px) {
  .chip-wrap.zonas-chip { grid-template-columns: repeat(3, 1fr) !important; }
  #cm .subtabs { grid-template-columns: repeat(2, 1fr) !important; }
  #cm .subtab, .chip-wrap.zonas-chip .base-chip {
    font-size: .76rem !important; min-height: 42px !important;
  }
}

/* --- Aprovechar el ancho: menos aire a los lados --- */
@media (min-width:1024px) {
  #app { padding: 0 .8rem !important; }
  /* OJO: con margen automatico. En la version anterior puse 1500px SIN
     margen y el contenido se pegaba a la izquierda (Lauren, 18:57). */
  #cm.ac, #cm.ac > .subtabs, #cm.ac > [id^="mat-"] {
    max-width: 1180px !important;
    margin-left: auto !important; margin-right: auto !important;
  }
}
@media (min-width:1440px) { #app { padding: 0 1rem !important; } }

/* ===== fin MATERIAL botones ===== */

/* ==========================================================================
   MODO CLARO v2 · revision de la web entera (Lauren, 20/09/2026 18:57)
   Corrige lo que seguia sin leerse en claro y dos cosas que rompi yo antes.
   Todo dentro de body.light: el modo OSCURO no se toca.
   ========================================================================== */

/* 1) Botones de zona de Material: texto oscuro sobre fondo claro */
body.light .chip-wrap.zonas-chip .base-chip {
  background: #eef2f9 !important;
  color: #1e293b !important;
}
body.light .chip-wrap.zonas-chip .base-chip:hover { background: #e2e8f0 !important; }

/* 2) Material de la unidad: nombres y datos legibles */
body.light .mat-item,
body.light .mat-item b,
body.light .mat-item strong { color: #1e293b !important; }
body.light .mat-item .mn { color: #0f172a !important; }
body.light .mat-submenu { color: #1e293b !important; }
body.light #mat-dot .ca, body.light #mat-inv .ca,
body.light #mat-cad .ca, body.light #mat-o2 .ca {
  background: #ffffff !important; border-color: #cbd5e1 !important;
}
body.light .pi { color: #1e293b !important; }

/* 3) Botellas de oxigeno: texto oscuro legible sobre el color de la botella */
body.light .o2-card,
body.light .o2-card.o2-5l-llena, body.light .o2-card.o2-5l-vacia,
body.light .o2-card.o2-10l-llena, body.light .o2-card.o2-10l-vacia {
  color: #0f172a !important;
}
body.light .o2-card b, body.light .o2-card strong { color: #0f172a !important; }

/* 4) Vehiculo: pincel, borrar y fino/medio/grueso con contraste fuerte */
body.light .veh-brush {
  background: #e2e8f0 !important; color: #1e293b !important;
  border-color: #94a3b8 !important;
}
body.light .veh-brush.on {
  background: #d97706 !important; color: #ffffff !important;
  border-color: #b45309 !important;
}
body.light .veh-brush.off { color: #64748b !important; }
body.light .veh-size {
  background: #e2e8f0 !important; color: #1e293b !important;
  border-color: #94a3b8 !important;
}
body.light .veh-size.sel {
  background: #1d4ed8 !important; color: #ffffff !important;
  border-color: #1e3a8a !important;
}
body.light .veh-color.sel {
  border-color: #0f172a !important;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0f172a !important;
}

/* 5) Nota de ambulancia fisica: marco y texto legibles */
body.light .rf textarea, body.light .rf select, body.light .rf input,
body.light #veh-nota-nueva {
  background: #ffffff !important; color: #0f172a !important;
  border: 1px solid #94a3b8 !important;
}
body.light .veh-tool .lbl { color: #475569 !important; }

/* 8) Estadisticas: marcos de seleccion oscuros (no rosas) */
body.light .est-filtros-grid input, body.light .est-filtros-grid select,
body.light .est-titulo button, body.light .est-csv {
  border-color: #94a3b8 !important;
  background: #ffffff !important; color: #1e293b !important;
}
body.light .est-filtros-grid input:focus, body.light .est-filtros-grid select:focus {
  outline: 3px solid rgba(37,99,235,.30) !important; border-color: #2563eb !important;
}

/* 9) Tramites: el formulario en modo claro y aprovechando el ancho */
body.light [style*="background:#0b1220"] {
  background: #ffffff !important; border-color: #cbd5e1 !important; color: #1e293b !important;
}
body.light [style*="background:#1a2235"] {
  background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #1e293b !important;
}
body.light #tramites-form, body.light .tr-form { color: #1e293b !important; }

/* ===== fin MODO CLARO v2 ===== */

/* 7) Historial: calendario ancho y detalle con la misma jerarquía visual que empleado. */
.cal-wrap { max-width: 1120px !important; margin: 0 auto !important; }
#ch.ac .cal-wrap { max-width: 1120px !important; }
#ch.ac .cal-wrap > .ca { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
#ch.ac #day-detail { margin-top: .8rem; }
#ch.ac #day-detail > .ca { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
#ch.ac .cal-nav { padding: .15rem .2rem .45rem; }
#ch.ac .cal-nav-selects{display:flex;align-items:center;gap:.35rem}
#ch.ac .cal-nav-selects select{min-height:32px;padding:.3rem .45rem;border-radius:8px;background:var(--surface-2);color:var(--text);border:1px solid var(--border-strong);font-size:.72rem;font-weight:700}
#ch.ac .cal-nav-selects select option{background:var(--surface-2);color:var(--text)}
#ch.ac .cal-nav button { width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
#ch.ac .cal-nav .t { color: var(--accent-text); font-size: 1rem; }
#ch.ac .cal-d { min-height: 56px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:.35rem .2rem; background:var(--surface-2); border:1px solid #a3e635; color:var(--text-muted); font-size:.95rem; }
#ch.ac .cal-day-labels{display:flex;flex-direction:column;align-items:center;gap:.1rem;margin-top:.18rem;width:100%}
#ch.ac .cal-label{font-size:.54rem;font-weight:900;letter-spacing:.03em;line-height:1.1;text-align:center}
#ch.ac .cal-label.averia{color:#ef4444}.cal-label.material{color:#f59e0b}.cal-label.inspeccion{color:#3b82f6}.cal-label.dano{color:#f97316}.cal-label.cambio{color:#8b5cf6}
body.light #ch.ac .cal-label.averia{color:#b91c1c}body.light #ch.ac .cal-label.material{color:#b45309}body.light #ch.ac .cal-label.inspeccion{color:#1d4ed8}body.light #ch.ac .cal-label.dano{color:#c2410c}body.light #ch.ac .cal-label.cambio{color:#7e22ce}
@media (min-width:1000px){#ch.ac .cal-d{min-height:70px;font-size:1rem}#ch.ac .cal-label{font-size:.6rem}}
#ch.ac .cal-d:hover { background:var(--surface-3); border-color:#bef264; }
#ch.ac .cal-d.sel { background:var(--accent); border-color:#a3e635; color:var(--text-invert); }
#ch.ac .cal-d.has { color:var(--accent-text); border-color:#84cc16; }
#ch.ac .cal-h { color:var(--text-soft); }
#ch.ac .cal-legend { color:var(--text-muted); }
#ch.ac .cal-dots { min-height:7px; }
#ch.ac .cal-dot { width:6px; height:6px; }
@media (max-width:700px){
  #ch.ac .cal-d { min-height:52px; font-size:.72rem; }
  #ch.ac .cal-nav .t { font-size: .9rem; white-space: nowrap; }
  #ch.ac .cal-nav-selects select { min-height:28px; font-size:.66rem; padding:.2rem .3rem; }
  #ch.ac .cal-label { font-size:.46rem; }
}

/* ==========================================================================
   TRAMITES · el formulario aprovecha el ancho (Lauren, 20/09/2026)
   Antes salia con max-width:600px y dejaba media pantalla vacia a la derecha.
   Ademas, en pantallas grandes los campos van en dos columnas: se hace scroll
   mucho menos. Solo CSS: no se toca el JavaScript.
   ========================================================================== */
#tramites-form-area { max-width: 1100px; margin: 0 auto; width: 100%; }
/* el formulario trae `max-width:600px` EN LINEA: hay que ganarle */
#tramites-form-area > div { max-width: none !important; }

@media (min-width: 900px) {
  /* los campos (label + casilla) en dos columnas, menos scroll */
  #tramites-form-area > div > div[style*="margin-bottom"] {
    display: inline-block;
    width: calc(50% - .45rem);
    vertical-align: top;
    margin-right: .45rem;
  }
  /* los campos de texto largo, a lo ancho */
  #tramites-form-area > div > div[style*="margin-bottom"]:has(textarea) {
    display: block; width: 100%;
  }
  /* los botones de accion, a lo ancho */
  #tramites-form-area > div > div:not([style*="margin-bottom"]) { clear: both; }
}

/* ===== fin TRAMITES formulario ===== */

/* ============================================================
   NÓMINA EMPLEADO · el cálculo en DOS COLUMNAS en PC (Lauren, 21/09/2026)
   Izquierda: desglose de la nómina (devengos, deducciones, neto).
   Derecha: las 6 aportaciones de la empresa como BLOQUES (2 col × 3 filas),
   con marco fino de degradado azul → morado. En móvil, una sola columna.
   ============================================================ */
.nom-calc-cols { display: block; }
.nom-calc-main { min-width: 0; }
.nom-calc-side { min-width: 0; }

@media (min-width: 1024px) {
  .nom-calc-cols {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    gap: 1rem !important;
    align-items: start !important;
  }
}

.nom-empresa-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .5rem !important;
}
.nom-empresa-bloque {
  min-width: 0;
  padding: .5rem .6rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--surface, #131c31);
  background-image: linear-gradient(var(--surface, #131c31), var(--surface, #131c31)), linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.nom-empresa-bq-nombre {
  color: var(--text-muted, #94a3b8);
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.2;
}
.nom-empresa-bq-importe {
  color: #60a5fa;
  font-size: .95rem;
  font-weight: 800;
  margin-top: .18rem;
  line-height: 1.15;
}
.nom-empresa-bq-meta {
  color: var(--text-soft, #64748b);
  font-size: .58rem;
  margin-top: .1rem;
}
body.light .nom-empresa-bloque {
  background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
}
body.light .nom-empresa-bq-nombre { color: #475569; }
body.light .nom-empresa-bq-importe { color: #1d4ed8; }
body.light .nom-empresa-bq-meta { color: #64748b; }
@media (max-width: 600px) {
  .nom-empresa-grid { gap: .35rem !important; }
  .nom-empresa-bq-importe { font-size: .85rem; }
}

/* ============================================================
   NÓMINA EMPLEADO · los CUATRO MÓDULOS, homogéneos
   (Lauren, 21/09/2026)
   「tienen que ser los cuatro completamente homogéneos」
   Antes eran tres hijos del grid (Conceptos iba dentro de la columna de
   Datos editables y Cálculo real era hijo suelto), así que el grid de 4
   columnas los repartía desigual: uno ocupaba media fila de más.
   Ahora cada módulo va en SU columna y todos estiran igual.
   ============================================================ */
.nom-cols > .nom-col { min-width: 0; display: flex; }
.nom-cols > .nom-col > * {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0 !important;   /* el margen superior descentraba la columna */
  height: 100%;
}
/* Los cuatro títulos, con la misma altura, para que el contenido arranque alineado. */
.nom-edit-title,
.nom-temp-title,
.nom-sim-title {
  display: flex;
  align-items: center;
  min-height: 1.6rem;
  margin-bottom: .4rem;
}
.nom-temp-help,
.nom-sim-help { min-height: 2.1rem; }

/* Nota de solo lectura / simulador (parámetros que fija nóminas). */
.nom-solo-lectura {
  font-size: .58rem;
  line-height: 1.35;
  padding: .35rem .45rem;
  border-radius: 6px;
  margin-bottom: .4rem;
  background: rgba(148, 163, 184, .12);
  border: 1px solid rgba(148, 163, 184, .35);
  color: var(--text-muted, #94a3b8);
}
.nom-solo-lectura.sim {
  background: rgba(59, 130, 246, .10);
  border-color: rgba(59, 130, 246, .40);
  color: #93c5fd;
}
body.light .nom-solo-lectura { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
body.light .nom-solo-lectura.sim { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
/* Campos no editables: se ven claramente bloqueados. */
.nom-edit input[readonly],
.nom-edit select[disabled],
.nom-edit input[disabled],
.nom-temp-concepts input[readonly],
.nom-temp-concepts select[disabled],
.nom-temp-concepts input[disabled] {
  opacity: .72;
  cursor: not-allowed;
}

/* En móvil, los cuatro módulos en una columna (como antes). */
@media (max-width: 900px) {
  .nom-cols > .nom-col { display: block; }
  .nom-cols > .nom-col > * { height: auto; }
}

/* ===== Nóminas empleado: rediseño 2026-09-24 ===== */
/* KPI: ritmo azul → morado, medidas idénticas y fórmula sin recortes. */
.nom-chips.nom-chips-3 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: .55rem !important;
  align-items: stretch !important;
}
.nom-chips > .nom-chip {
  height: 82px !important;
  min-height: 82px !important;
  max-height: 82px !important;
  padding: .48rem .55rem !important;
  box-sizing: border-box !important;
  border: 1px solid var(--nom-accent, #6366f1) !important;
  border-radius: 11px !important;
  background: rgba(79, 70, 229, .07) !important;
  box-shadow: 0 3px 12px rgba(79, 70, 229, .09) !important;
  overflow: hidden !important;
}
.nom-chips > .nom-chip:nth-child(1)  { --nom-accent:#2563eb; }
.nom-chips > .nom-chip:nth-child(2)  { --nom-accent:#3477f2; }
.nom-chips > .nom-chip:nth-child(3)  { --nom-accent:#4378ed; }
.nom-chips > .nom-chip:nth-child(4)  { --nom-accent:#526fe9; }
.nom-chips > .nom-chip:nth-child(5)  { --nom-accent:#6066e5; }
.nom-chips > .nom-chip:nth-child(6)  { --nom-accent:#6e5fe1; }
.nom-chips > .nom-chip:nth-child(7)  { --nom-accent:#7b57dd; }
.nom-chips > .nom-chip:nth-child(8)  { --nom-accent:#8850d9; }
.nom-chips > .nom-chip:nth-child(9)  { --nom-accent:#9448d4; }
.nom-chips > .nom-chip:nth-child(10) { --nom-accent:#a041cf; }
.nom-chips > .nom-chip:nth-child(11) { --nom-accent:#a93ac9; }
.nom-chips > .nom-chip:nth-child(12) { --nom-accent:#b233c3; }
.nom-chips > .nom-chip:nth-child(13) { --nom-accent:#bb2cbd; }
.nom-chips > .nom-chip:nth-child(14) { --nom-accent:#c326b7; }
.nom-chips > .nom-chip:nth-child(15) { --nom-accent:#7c3aed; }
.nom-chips > .nom-chip .nom-chip-k {
  color: var(--nom-accent) !important;
  font-size: .59rem !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}
.nom-chips > .nom-chip .nom-chip-v {
  color: var(--nom-accent) !important;
  font-size: .72rem !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}
body.light .nom-chips > .nom-chip { background: rgba(99, 102, 241, .045) !important; }
@media (min-width: 1000px) and (max-width: 1399px) {
  .nom-chips.nom-chips-3 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 700px) and (max-width: 999px) {
  .nom-chips.nom-chips-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 699px) {
  .nom-chips.nom-chips-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .4rem !important; }
  .nom-chips > .nom-chip { height: 80px !important; min-height: 80px !important; max-height: 80px !important; }
}

/* Selector de periodo: flechas + mes y año separados. */
.nom-per-head { align-items: center !important; justify-content: space-between !important; gap: .55rem !important; }
.nom-per-controls { display:flex; align-items:center; gap:.35rem; flex-wrap:nowrap; }
.nom-per-select {
  width:auto !important;
  min-width:0 !important;
  padding:.4rem .55rem !important;
  border:1px solid #6475e8 !important;
  border-radius:9px !important;
  background:var(--surface-2,#1e293b) !important;
  color:var(--text,#e2e8f0) !important;
  font-size:.76rem !important;
}
.nom-per-select.nom-per-year { min-width:5.2rem !important; }
.nom-per-arrow {
  width:34px; height:34px; flex:0 0 34px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #526fe9; border-radius:9px;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff; font:700 1rem/1 system-ui; cursor:pointer;
}
.nom-per-arrow:disabled { opacity:.38; cursor:not-allowed; }
body.light .nom-per-select { background:#fff !important; color:#1e293b !important; border-color:#7c6ee6 !important; }
@media (max-width:560px) {
  .nom-per-head { align-items:flex-start !important; flex-direction:column; }
  .nom-per-controls { width:100%; }
  .nom-per-select { flex:1 1 auto; }
}

/* Cuatro módulos: cuatro columnas anchas, dos en tablet y una en móvil. */
.nom-cols.nom-cols-employee {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:.7rem !important;
  align-items:stretch !important;
  margin-top:.65rem !important;
}
.nom-cols-employee > .nom-col { display:flex; min-width:0; }
.nom-cols-employee > .nom-col > * { width:100%; min-width:0; box-sizing:border-box; }
.nom-calc-full { display:block !important; }
.nom-work-stack { display:flex; flex-direction:column; align-items:stretch; gap:.55rem; width:100%; height:100%; }
.nom-work-stack > * { min-width:0; width:100%; box-sizing:border-box; }
.nom-panel-common {
  --nom-panel-a:#2563eb;
  --nom-panel-b:#7c3aed;
  padding:.7rem !important;
  margin:0 !important;
  border:1px solid transparent !important;
  border-radius:12px !important;
  box-sizing:border-box !important;
  background:linear-gradient(var(--surface,#131c31),var(--surface,#131c31)) padding-box,
             linear-gradient(135deg,var(--nom-panel-a),var(--nom-panel-b)) border-box !important;
}
.nom-panel-data { --nom-panel-a:#2563eb; --nom-panel-b:#526fe9; }
.nom-panel-concepts { --nom-panel-a:#526fe9; --nom-panel-b:#7b57dd; }
.nom-panel-cal { --nom-panel-a:#6e5fe1; --nom-panel-b:#9448d4; }
.nom-panel-general { --nom-panel-a:#8850d9; --nom-panel-b:#b233c3; }
.nom-panel-company { --nom-panel-a:#9448d4; --nom-panel-b:#7c3aed; }
body.light .nom-panel-common {
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg,var(--nom-panel-a),var(--nom-panel-b)) border-box !important;
}
.nom-panel-common .nom-edit-title,
.nom-panel-common .nom-temp-title,
.nom-panel-common .nom-sim-title,
.nom-panel-title { color:var(--nom-panel-b) !important; }
.nom-panel-common label { color:var(--nom-panel-b) !important; }
.nom-panel-common input, .nom-panel-common select { border-color:var(--nom-panel-a) !important; }
.nom-panel-divider { border-top:1px solid rgba(99,102,241,.35); margin:.6rem 0 .4rem; }
.nom-panel-subtitle { color:var(--nom-panel-b); font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.3rem; }
.nom-work-stack .nom-temp-concepts,
.nom-work-stack .nom-sim-box { margin:0 !important; }
.nom-temp-row {
  grid-template-columns:minmax(0,1fr) minmax(72px,.55fr) 26px !important;
  grid-template-areas:"name operation delete" "amount active active" !important;
  gap:.36rem !important;
  padding:.35rem 0 !important;
}
.nom-temp-row .nom-temp-name { grid-area:name; }
.nom-temp-row .nom-temp-op { grid-area:operation; }
.nom-temp-row .nom-temp-amount { grid-area:amount; }
.nom-temp-row .nom-temp-active { grid-area:active; justify-self:start; }
.nom-temp-row .nom-temp-delete { grid-area:delete; }
.nom-temp-row input, .nom-temp-row select { min-height:34px; box-sizing:border-box; }
.nom-temp-active { white-space:nowrap; }
.nom-actions.nom-actions-stack { display:flex !important; flex-direction:column !important; gap:.42rem !important; margin:.05rem 0 0 !important; }
.nom-actions-stack .bt { width:100%; min-height:40px; border-radius:10px; font-weight:800; }
.nom-actions-stack .nom-action-calc { background:linear-gradient(135deg,#2563eb,#4f46e5) !important; }
.nom-actions-stack .nom-action-archive { background:linear-gradient(135deg,#4f46e5,#7c3aed) !important; }
.nom-actions-stack .nom-action-history { background:linear-gradient(135deg,#7c3aed,#a855f7) !important; }
.nom-panel-title { font-size:.7rem; font-weight:850; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.5rem; }
.nom-slot-help { color:var(--text-muted,#94a3b8); font-size:.66rem; line-height:1.4; padding:.3rem 0; }
.nom-stat-title { margin:.72rem 0 .4rem; padding-top:.55rem; border-top:1px solid rgba(124,58,237,.25); color:#7c3aed; font-size:.68rem; font-weight:850; text-transform:uppercase; letter-spacing:.04em; }
.nom-stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.38rem; }
.nom-stat-cell { min-width:0; min-height:54px; padding:.45rem .5rem; border:1px solid rgba(124,58,237,.3); border-radius:9px; background:rgba(99,102,241,.055); }
.nom-stat-label { color:var(--text-muted,#94a3b8); font-size:.57rem; font-weight:750; text-transform:uppercase; letter-spacing:.025em; line-height:1.2; }
.nom-stat-value { margin-top:.22rem; color:#8b5cf6; font-size:.85rem; font-weight:850; line-height:1.1; overflow-wrap:anywhere; }
.nom-stat-empty { grid-column:1/-1; }
.nom-empresa-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:.38rem !important; }
.nom-empresa-bloque { padding:.46rem .5rem !important; border-radius:9px !important; }
.nom-empresa-bq-nombre { font-size:.56rem !important; }
.nom-empresa-bq-importe { font-size:.84rem !important; color:#7c3aed !important; }
.nom-empresa-bq-meta { font-size:.52rem !important; }
.nom-empresa-note { font-size:.56rem !important; line-height:1.35; }
@media (min-width:901px) and (max-width:1250px) {
  .nom-cols.nom-cols-employee { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:900px) {
  .nom-cols.nom-cols-employee { grid-template-columns:1fr !important; }
  .nom-work-stack { height:auto; }
}
@media (max-width:480px) {
  .nom-temp-row { grid-template-columns:minmax(0,1fr) 72px 24px !important; }
  .nom-stat-grid { gap:.32rem; }
  .nom-empresa-bq-meta { overflow-wrap:anywhere; }
}


/* ===== Nóminas empleado: refinamiento UI/UX 2026-09-24 (tarde) ===== */

/* 1) KPIs más compactas: menos aire arriba y abajo. */
.nom-chips.nom-chips-3 { gap:.45rem !important; }
.nom-chips > .nom-chip {
  height:62px !important; min-height:62px !important; max-height:62px !important;
  padding:.3rem .5rem !important;
}
.nom-chips > .nom-chip .nom-chip-k {
  font-size:.55rem !important; line-height:1.05 !important;
  overflow:hidden !important; text-overflow:ellipsis !important;
}
.nom-chips > .nom-chip .nom-chip-v { font-size:.68rem !important; line-height:1.12 !important; }

/* 2) Contraste en OSCURO: tinta clara por posición (azul claro -> violeta claro). */
.nom-chips > .nom-chip .nom-chip-k,
.nom-chips > .nom-chip .nom-chip-v { color: var(--nom-ink, #cbd5e1) !important; }
.nom-chips > .nom-chip:nth-child(1)  { --nom-ink:#a9c9ff; }
.nom-chips > .nom-chip:nth-child(2)  { --nom-ink:#b0c4ff; }
.nom-chips > .nom-chip:nth-child(3)  { --nom-ink:#b8beff; }
.nom-chips > .nom-chip:nth-child(4)  { --nom-ink:#c0b8ff; }
.nom-chips > .nom-chip:nth-child(5)  { --nom-ink:#c8b2ff; }
.nom-chips > .nom-chip:nth-child(6)  { --nom-ink:#d0acff; }
.nom-chips > .nom-chip:nth-child(7)  { --nom-ink:#d8a6ff; }
.nom-chips > .nom-chip:nth-child(8)  { --nom-ink:#e0a0ff; }
.nom-chips > .nom-chip:nth-child(9)  { --nom-ink:#e89afb; }
.nom-chips > .nom-chip:nth-child(10) { --nom-ink:#f094f5; }
.nom-chips > .nom-chip:nth-child(11) { --nom-ink:#f88eef; }
.nom-chips > .nom-chip:nth-child(12) { --nom-ink:#ff88e9; }
.nom-chips > .nom-chip:nth-child(13) { --nom-ink:#ff82e3; }
.nom-chips > .nom-chip:nth-child(14) { --nom-ink:#ff7cdd; }
.nom-chips > .nom-chip:nth-child(15) { --nom-ink:#e3d0ff; }

/* Modo CLARO: se invierte a la tinta oscura de cada acento. */
body.light .nom-chips > .nom-chip .nom-chip-k,
body.light .nom-chips > .nom-chip .nom-chip-v { color: var(--nom-accent) !important; }

/* 2b) Títulos, etiquetas y ayudas de los módulos, legibles en oscuro. */
.nom-panel-common .nom-edit-title,
.nom-panel-common .nom-temp-title,
.nom-panel-common .nom-sim-title,
.nom-panel-title { color:#e8ebff !important; }
.nom-panel-common label { color:#c6cee0 !important; }
.nom-panel-common .nom-panel-subtitle { color:#dfe5f7 !important; }
.nom-temp-help, .nom-sim-help, .nom-temp-empty { color:#bcc7dc !important; }
.nom-solo-lectura { color:#cbd5e1 !important; border-color:rgba(148,163,184,.45) !important; }
.nom-solo-lectura.sim { color:#c7dcff !important; }
.nom-slot-help { color:#bcc7dc !important; }
.nom-stat-label { color:#c6cee0 !important; }
.nom-stat-value { color:#e6d5ff !important; }
.nom-empresa-bq-nombre { color:#c9d4e8 !important; }
.nom-empresa-bq-importe { color:#e6d5ff !important; }
.nom-empresa-bq-meta, .nom-empresa-note { color:#bcc7dc !important; }
.nom-cal-mini { color:#a9b6cc !important; }

body.light .nom-panel-common .nom-edit-title,
body.light .nom-panel-common .nom-temp-title,
body.light .nom-panel-common .nom-sim-title,
body.light .nom-panel-title { color:#1e293b !important; }
body.light .nom-panel-common label { color:#334155 !important; }
body.light .nom-panel-common .nom-panel-subtitle { color:#1e293b !important; }
body.light .nom-temp-help, body.light .nom-sim-help, body.light .nom-temp-empty { color:#475569 !important; }
body.light .nom-solo-lectura { color:#475569 !important; }
body.light .nom-slot-help { color:#475569 !important; }
body.light .nom-stat-label { color:#475569 !important; }
body.light .nom-stat-value { color:#6d28d9 !important; }
body.light .nom-empresa-bq-nombre { color:#475569 !important; }
body.light .nom-empresa-bq-importe { color:#6d28d9 !important; }
body.light .nom-empresa-bq-meta, body.light .nom-empresa-note { color:#475569 !important; }
body.light .nom-cal-mini { color:#64748b !important; }

/* 3) Panel de estadísticas como bloque propio. */
.nom-panel-stats .nom-panel-title { margin-bottom:.45rem; }
.nom-stat-title { border-top:none !important; padding-top:0 !important; margin:0 0 .45rem !important; }

/* 4) Importes SIEMPRE en una línea. */
.nom-cal-fila { gap:.4rem; }
.nom-cal-fila b { white-space:nowrap !important; }
.nom-cal-fila span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nom-calc-main table td:last-child { white-space:nowrap !important; }
.nom-base-value { white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:600px) {
  .nom-cal-fila { font-size:.71rem !important; }
  .nom-cal-fila b { font-size:.73rem !important; }
  .nom-cal-neto b { font-size:.84rem !important; }
  .nom-calc-main table td:last-child { font-size:.78rem !important; }
  .nom-calc-main table td:first-child { font-size:.72rem !important; }
  .nom-base-value { font-size:.68rem !important; }
}

/* 5) Selector de periodo: flecha visible y misma altura que los botones. */
.nom-per-head { align-items:center !important; }
.nom-per-controls { align-items:center !important; }
.nom-per-arrow { height:34px !important; }
.nom-per-select,
body.light .nom-per-select {
  -webkit-appearance:none !important;
  appearance:none !important;
  margin:0 !important;
  height:34px !important;
  line-height:1 !important;
  padding:.35rem 1.55rem .35rem .55rem !important;
  background-repeat:no-repeat !important;
  background-position:right .48rem center !important;
  background-size:10px 6px !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23a5b4fc' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}
body.light .nom-per-select {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23475569' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}
.nom-per-select.nom-per-year { min-width:5.4rem !important; }
@media (max-width:560px) {
  .nom-per-controls { width:100%; align-items:center; }
  .nom-per-select { flex:1 1 auto; }
}

/* 6) Móvil: KPIs más densas para reducir scroll. */
@media (max-width:699px) {
  .nom-chips.nom-chips-3 { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:.35rem !important; }
  .nom-chips > .nom-chip { height:56px !important; min-height:56px !important; max-height:56px !important; padding:.24rem .38rem !important; }
  .nom-chips > .nom-chip .nom-chip-k { font-size:.5rem !important; }
  .nom-chips > .nom-chip .nom-chip-v { font-size:.6rem !important; }
}
@media (max-width:420px) {
  .nom-chips.nom-chips-3 { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* ===== Nóminas: colores y fuente pedidos (24/09/2026) ===== */

/* Fuente del modulo, con respaldo si no hay red. */
.nom-root,
.nom-root input,
.nom-root select,
.nom-root button,
.nom-root table {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* 1) Celdas de arriba (KPIs): concepto en ambar claro, valor en blanco rosado. */
.nom-chips > .nom-chip .nom-chip-k { color: #FFEC9D !important; }
.nom-chips > .nom-chip .nom-chip-v { color: #FFECFF !important; }
/* Titulos de los modulos. */
.nom-panel-title,
.nom-root .nom-edit-title,
.nom-root .nom-temp-title,
.nom-root .nom-sim-title { color: #FFECFF !important; }

/* 2) Datos editables y Complementos generales: todo lo editable en verde claro. */
.nom-panel-data label,
.nom-panel-general label { color: #E6FFE6 !important; }
.nom-panel-data input,
.nom-panel-data select,
.nom-panel-general input,
.nom-panel-general select { color: #E6FFE6 !important; }
.nom-panel-data .nom-panel-subtitle { color: #E6FFE6 !important; }
/* Las dos notas informativas de esos modulos, tambien en verde claro. */
.nom-solo-lectura,
.nom-solo-lectura.sim { color: #E6FFE6 !important; }

/* Modo CLARO: los mismos papeles, en tono oscuro legible. */
body.light .nom-chips > .nom-chip .nom-chip-k { color: #7c5a00 !important; }
body.light .nom-chips > .nom-chip .nom-chip-v { color: #6d28d9 !important; }
body.light .nom-panel-title,
body.light .nom-root .nom-edit-title,
body.light .nom-root .nom-temp-title,
body.light .nom-root .nom-sim-title { color: #4c1d95 !important; }
body.light .nom-panel-data label,
body.light .nom-panel-general label { color: #14532d !important; }
body.light .nom-panel-data input,
body.light .nom-panel-data select,
body.light .nom-panel-general input,
body.light .nom-panel-general select { color: #14532d !important; }
body.light .nom-panel-data .nom-panel-subtitle { color: #14532d !important; }
body.light .nom-solo-lectura,
body.light .nom-solo-lectura.sim { color: #14532d !important; }

/* 3) Sin la nota, el cuadro de conceptos no reserva esa linea de alto. */
.nom-temp-concepts .nom-temp-help { min-height: 0 !important; }

/* ===== Nóminas: estadísticas generales (24/09/2026) ===== */

/* La columna de estadísticas ya no comparte espacio con "Cálculo real". */
.nom-panel-stats .nom-stat-grid { gap:.42rem; }
.nom-stat-grid-inner { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.42rem; }
.nom-stat-sep {
  grid-column:1/-1;
  margin-top:.55rem; padding-top:.5rem;
  border-top:1px solid rgba(124,58,237,.28);
  color:#FFECFF; font-size:.58rem; font-weight:800;
  letter-spacing:.045em; text-transform:uppercase;
}
/* Variación positiva / negativa frente al periodo anterior. */
.nom-stat-cell.ok .nom-stat-value { color:#86efac !important; }
.nom-stat-cell.baja .nom-stat-value { color:#fca5a5 !important; }
body.light .nom-stat-cell.ok .nom-stat-value { color:#15803d !important; }
body.light .nom-stat-cell.baja .nom-stat-value { color:#b91c1c !important; }
body.light .nom-stat-sep { color:#4c1d95 !important; }
/* El módulo de estadísticas ocupa la columna entera con holgura. */
.nom-panel-stats { height:100%; }
@media (max-width:900px) {
  .nom-panel-stats { height:auto; }
}

/* ===== Nóminas: ajustes del 24/09 (2.ª tanda) ===== */

/* 1) KPIs de arriba: sin negrita y con la letra mas grande. */
.nom-chips > .nom-chip .nom-chip-k {
  font-size:.66rem !important;
  font-weight:500 !important;
  line-height:1.1 !important;
  letter-spacing:.2px !important;
}
.nom-chips > .nom-chip .nom-chip-v {
  font-size:.84rem !important;
  font-weight:400 !important;
  line-height:1.15 !important;
}
/* La cabecera de la tarjeta, un punto mas marcada que el valor, sin negrita. */
.nom-chips > .nom-chip .nom-chip-k { opacity:.95 !important; }

/* 2) Las celdas del acumulado ocupan TODO el ancho de la columna. */
#nom-stat-anio { grid-column:1 / -1 !important; }
.nom-stat-sep { grid-column:1 / -1 !important; }

/* 3) Las cuatro columnas, exactamente iguales; tarjetas estiradas. */
.nom-cols.nom-cols-employee {
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  align-items:stretch !important;
}
.nom-cols-employee > .nom-col > * { height:100%; }

/* En pantallas medianas siguen siendo iguales entre si (2 y 2). */
@media (min-width:901px) and (max-width:1250px) {
  .nom-cols.nom-cols-employee { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:900px) {
  .nom-cols.nom-cols-employee { grid-template-columns:1fr !important; }
}

/* 4) Las estadisticas, en dos columnas parejas dentro de su bloque. */
.nom-panel-stats .nom-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }

/* ===== Nóminas: títulos de estadística en UNA línea (24/09/2026) ===== */
.nom-stat-grid .nom-stat-label,
.nom-stat-grid-inner .nom-stat-label {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .55rem !important;
}
/* Sin separador: el bloque del año va pegado al del periodo. */
#nom-stat-anio { margin-top: .42rem !important; }

/* ===== Nóminas: 4 columnas homogéneas y botones al fondo (24/09/2026) ===== */

/* Cada columna estira su contenido a TODO el alto de la fila. */
.nom-cols.nom-cols-employee { align-items:stretch !important; }
.nom-cols-employee > .nom-col {
  display:flex !important;
  align-items:stretch !important;
  min-width:0 !important;
}
.nom-cols-employee > .nom-col > * {
  flex:1 1 auto !important;
  height:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* La pila reparte el alto: los paneles crecen y los botones quedan abajo. */
.nom-work-stack {
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  height:100% !important;
  gap:.55rem !important;
}
.nom-work-stack > .nom-panel-common,
.nom-work-stack > .nom-temp-concepts,
.nom-work-stack > .nom-sim-box { flex:1 1 auto !important; }

/* Los botones, pegados al fondo de la ultima columna. */
.nom-work-stack > .nom-actions-stack {
  flex:0 0 auto !important;
  margin-top:auto !important;
}

/* El panel de Complementos (columna 3) tambien llena su columna. */
.nom-cols-employee > .nom-col > .nom-panel-general { height:100% !important; }

/* En movil no se fuerza el alto: cada bloque a su medida. */
@media (max-width:900px) {
  .nom-cols-employee > .nom-col > * { height:auto !important; }
  .nom-work-stack { height:auto !important; }
  .nom-work-stack > .nom-panel-common,
  .nom-work-stack > .nom-temp-concepts,
  .nom-work-stack > .nom-sim-box { flex:0 0 auto !important; }
  .nom-work-stack > .nom-actions-stack { margin-top:0 !important; }
}

/* ===== Nóminas: en móvil, Estadísticas al final; marcos azul→morado ===== */

/* 1) MÓVIL: las columnas pasan a ser hermanas de la estimación y las
   estadísticas se ordenan AL FINAL, después de "Estimación de nómina". */
@media (max-width:900px) {
  .nom-root { display:flex !important; flex-direction:column !important; gap:.6rem !important; }
  .nom-cols.nom-cols-employee { display:contents !important; }
  /* La columna 2 es la de estadísticas: al final de todo. */
  .nom-cols.nom-cols-employee > .nom-col:nth-child(2) { order:99 !important; }
  .nom-cols-employee > .nom-col { order:0; }
}

/* 2) Marcos de las celdas: línea fina con recorrido azul → morado. */
.nom-stat-grid > .nom-stat-cell,
.nom-stat-grid-inner > .nom-stat-cell {
  border-width:1px !important;
  border-style:solid !important;
}
.nom-stat-grid > .nom-stat-cell:nth-child(1),
.nom-stat-grid-inner > .nom-stat-cell:nth-child(1) { border-color:#2563eb !important; }
.nom-stat-grid > .nom-stat-cell:nth-child(2),
.nom-stat-grid-inner > .nom-stat-cell:nth-child(2) { border-color:#315deb !important; }
.nom-stat-grid > .nom-stat-cell:nth-child(3),
.nom-stat-grid-inner > .nom-stat-cell:nth-child(3) { border-color:#3e57ec !important; }
.nom-stat-grid > .nom-stat-cell:nth-child(4),
.nom-stat-grid-inner > .nom-stat-cell:nth-child(4) { border-color:#4a51ec !important; }
.nom-stat-grid > .nom-stat-cell:nth-child(5),
.nom-stat-grid-inner > .nom-stat-cell:nth-child(5) { border-color:#574bec !important; }
.nom-stat-grid > .nom-stat-cell:nth-child(6),
.nom-stat-grid-inner > .nom-stat-cell:nth-child(6) { border-color:#6346ec !important; }
.nom-stat-grid > .nom-stat-cell:nth-child(7),
.nom-stat-grid-inner > .nom-stat-cell:nth-child(7) { border-color:#7040ed !important; }
.nom-stat-grid > .nom-stat-cell:nth-child(8),
.nom-stat-grid-inner > .nom-stat-cell:nth-child(8) { border-color:#7c3aed !important; }
/* El brillo suave acompaña al borde, sin ensuciar el fondo. */
.nom-stat-cell { box-shadow:0 0 6px rgba(79,70,229,.20) !important; }

/* En modo claro el mismo recorrido, con tonos más asentados. */
body.light .nom-stat-grid > .nom-stat-cell, body.light .nom-stat-grid-inner > .nom-stat-cell { border-color:#2563eb !important; }
body.light .nom-stat-grid > .nom-stat-cell:nth-child(2), body.light .nom-stat-grid-inner > .nom-stat-cell:nth-child(2) { border-color:#3157d8 !important; }
body.light .nom-stat-grid > .nom-stat-cell:nth-child(3), body.light .nom-stat-grid-inner > .nom-stat-cell:nth-child(3) { border-color:#3d4bc5 !important; }
body.light .nom-stat-grid > .nom-stat-cell:nth-child(4), body.light .nom-stat-grid-inner > .nom-stat-cell:nth-child(4) { border-color:#4a3fb2 !important; }
body.light .nom-stat-grid > .nom-stat-cell:nth-child(5), body.light .nom-stat-grid-inner > .nom-stat-cell:nth-child(5) { border-color:#56339f !important; }
body.light .nom-stat-grid > .nom-stat-cell:nth-child(6), body.light .nom-stat-grid-inner > .nom-stat-cell:nth-child(6) { border-color:#62278c !important; }
body.light .nom-stat-grid > .nom-stat-cell:nth-child(7), body.light .nom-stat-grid-inner > .nom-stat-cell:nth-child(7) { border-color:#6f1b79 !important; }
body.light .nom-stat-grid > .nom-stat-cell:nth-child(8), body.light .nom-stat-grid-inner > .nom-stat-cell:nth-child(8) { border-color:#7c3aed !important; }
body.light .nom-stat-cell { box-shadow:0 0 6px rgba(37,99,235,.12) !important; }

/* ===== Aviso de planilla: modal limpio y alineado (24/09/2026) ===== */

/* 1) Fuera el DOBLE MARCO: dentro del modal, la tarjeta no dibuja el suyo. */
#pl-prefs-box > .pl-prefs,
#pl-prefs-box > .ca {
  border:0 !important; background:transparent !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important; max-width:none !important; border-radius:0 !important;
}

/* 2) Ancho justo del modal (antes la caja pedía 440px dentro de uno de 340px). */
.login-modal:has(#pl-prefs-box) {
  max-width:min(430px,94vw) !important;
  align-items:stretch !important;
  padding:1rem 1.05rem 1.05rem !important;
}

/* 3) Contenido alineado en rejilla: casilla, nombre y detalle en columna. */
.pl-prefs { display:flex; flex-direction:column; gap:.65rem; width:100%; text-align:left; }
.pl-prefs-tit { font-size:.8rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#e8ebff; }
.pl-prefs-sub { font-size:.72rem; line-height:1.45; color:#94a3b8; }
.pl-canales { display:flex; flex-direction:column; gap:.34rem; }
.pl-canal {
  display:grid !important;
  grid-template-columns:18px minmax(0,1fr) auto;
  align-items:center; column-gap:.55rem;
  padding:.42rem .6rem; border:1px solid #334155; border-radius:9px;
  font-size:.8rem; background:rgba(15,23,42,.35); cursor:pointer;
}
.pl-canal input[type="checkbox"] { margin:0 !important; width:16px !important; height:16px !important; accent-color:#3b82f6; }
.pl-canal-nom { font-weight:700; color:#e2e8f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-canal-nota { font-size:.66rem; color:#94a3b8; text-align:right; white-space:nowrap; }
.pl-canal.is-on { border-color:#3b82f6; }
/* Web: activado de fábrica y NO modificable. */
.pl-canal.pl-fijo { border-color:#22c55e; background:rgba(34,197,94,.10); cursor:default; }
.pl-canal.pl-fijo input[type="checkbox"] { cursor:not-allowed; opacity:1; }
.pl-canal.pl-fijo .pl-canal-nom { color:#bbf7d0; }
.pl-canal-fijo { margin-left:.4rem; font-size:.56rem; font-weight:800; letter-spacing:.3px; color:#22c55e; text-transform:uppercase; }
.pl-prefs-nota { font-size:.68rem; line-height:1.45; color:#94a3b8; }
.pl-prefs-btn { width:100%; background:linear-gradient(135deg,#2563eb,#7c3aed) !important; font-weight:800; }

/* Modo claro. */
body.light .pl-prefs-tit { color:#1e293b; }
body.light .pl-prefs-sub, body.light .pl-prefs-nota { color:#475569; }
body.light .pl-canal { background:#f8fafc; border-color:#cbd5e1; }
body.light .pl-canal-nom { color:#1e293b; }
body.light .pl-canal-nota { color:#64748b; }
body.light .pl-canal.pl-fijo { background:#f0fdf4; border-color:#16a34a; }
body.light .pl-canal.pl-fijo .pl-canal-nom { color:#14532d; }
body.light .pl-canal-fijo { color:#15803d; }

/* En pantallas muy estrechas, el detalle baja debajo del nombre. */
@media (max-width:420px) {
  .pl-canal { grid-template-columns:18px minmax(0,1fr); row-gap:.15rem; }
  .pl-canal-nota { grid-column:2; text-align:left; }
}

/* ===== Técnicos: dos columnas en PC (24/09/2026) ===== */
.emp-pl-cols {
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:.7rem !important;
  align-items:start !important;
}
/* Por debajo de 1180px las dos columnas no caben con holgura: una sola. */
@media (max-width:1179px) {
  .emp-pl-cols { grid-template-columns:1fr !important; }
}


/* Lauren 2026-10-01: Nómina estimación + KPIs, escritorio 50/50. */
.nom-estimate-kpi-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: .8rem !important;
  align-items: start !important;
  min-width: 0;
}
.nom-estimate-kpi-layout > #nom-resultado,
.nom-estimate-kpi-layout > .nom-kpi-panel { min-width: 0; }
.nom-estimate-kpi-layout #nom-resultado .nom-calc-cols {
  display: block !important;
  width: 100% !important;
}
.nom-estimate-kpi-layout #nom-resultado .nom-calc-main { width: 100%; }
.nom-estimate-kpi-layout > .nom-kpi-panel { margin-top: .8rem; }
.nom-estimate-kpi-layout .nom-chips.nom-chips-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: .42rem !important;
  margin: 0 !important;
}
.nom-estimate-kpi-layout .nom-chips > .nom-chip {
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  padding: .35rem .38rem !important;
  min-width: 0 !important;
}
.nom-estimate-kpi-layout .nom-chips > .nom-chip .nom-chip-k {
  white-space: normal !important;
  line-height: 1.1 !important;
  text-overflow: clip !important;
}
.nom-estimate-kpi-layout .nom-chips > .nom-chip .nom-chip-v {
  font-size: .7rem !important;
  line-height: 1.12 !important;
}
/* Las cuatro subcolumnas del desglose se adaptan al ancho de la mitad izquierda. */
@media (min-width: 1100px) {
  .nom-estimate-kpi-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .nom-estimate-kpi-layout > .nom-kpi-panel { margin-top: .8rem; }
  .nom-estimate-kpi-layout #nom-resultado table {
    width: 100% !important;
    table-layout: fixed !important;
  }
  .nom-estimate-kpi-layout #nom-resultado th,
  .nom-estimate-kpi-layout #nom-resultado td { overflow-wrap: anywhere; }
  .nom-estimate-kpi-layout #nom-resultado th:first-child,
  .nom-estimate-kpi-layout #nom-resultado td:first-child { width: 40%; }
  .nom-estimate-kpi-layout #nom-resultado th:not(:first-child),
  .nom-estimate-kpi-layout #nom-resultado td:not(:first-child) { width: 20%; }
}
@media (max-width: 480px) {
  .nom-estimate-kpi-layout .nom-chips.nom-chips-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .nom-estimate-kpi-layout .nom-chips > .nom-chip {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
  }
}
/* T. A DEDUCIR: importe legible en blanco, en los dos temas. */
.nom-base-cell .nom-base-value.neg,
body.light .nom-base-cell .nom-base-value.neg { color: #fff !important; }


/* Lauren 2026-10-01: lower panels aligned + employee calendar weekday cells. */
/* Equal desktop columns; align both panel tops and stretch their outer boxes together. */
@media (min-width: 1100px) {
  .nom-estimate-kpi-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }
}
.nom-estimate-kpi-layout > .nom-kpi-panel {
  margin-top: .8rem !important;
  min-width: 0;
  box-sizing: border-box;
}
/* Light, restrained header; the added lower margin gives the 15 cards more breathing room. */
.nom-estimate-kpi-layout > .nom-kpi-panel > .nom-panel-title {
  display: flex;
  align-items: center;
  min-height: 2.15rem;
  margin: -.7rem -.7rem .8rem !important;
  padding: .48rem .7rem;
  border-bottom: 1px solid rgba(129,140,248,.28);
  border-radius: 11px 11px 0 0;
  background: linear-gradient(100deg, rgba(56,189,248,.11), rgba(139,92,246,.12));
  color: #dbeafe !important;
  letter-spacing: .035em;
}
body.light .nom-estimate-kpi-layout > .nom-kpi-panel > .nom-panel-title {
  border-bottom-color: rgba(99,102,241,.2);
  background: linear-gradient(100deg, rgba(56,189,248,.09), rgba(139,92,246,.09));
  color: #3730a3 !important;
}
.nom-estimate-kpi-layout > .nom-kpi-panel #nom-chips { padding-top: .05rem; }

/* Weekday names are real calendar header cells: pale blue through lavender. */
.emp-cal-grid > .emp-cal-dow {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  min-height: 1.8rem;
  padding: .3rem .1rem;
  border: 1px solid #a5b4fc;
  border-radius: 7px;
  background: linear-gradient(135deg, #bfdbfe 0%, #c7d2fe 52%, #e9d5ff 100%);
  color: #312e81;
  box-shadow: 0 2px 6px rgba(99,102,241,.16);
}
@media (max-width: 700px) {
  .emp-cal-grid > .emp-cal-dow { min-height: 1.55rem; padding: .2rem .05rem; }
}