/* =========================================================
   URBALIMP – Sistema de Gestión
   main.css – Marca UrbaLimp sobre base HAZE v4.0
   ========================================================= */

/* ─── Google Fonts (HAZE) ──────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Bebas+Neue&display=swap');

/* ─── CSS Custom Properties – HAZE-BASE Design Tokens ─────
   Paleta portada 1:1 desde HAZE-BASE (styles.css). Tema CLARO por
   defecto (identidad HAZE); el oscuro se activa con body.dark-mode.
   Se conservan TODOS los nombres de tokens de Pañol (los usan las
   19 vistas) y se agregan los alias nativos de HAZE-BASE para los
   módulos portados (finanzas, calendario, presupuestos, charts). */
:root,
body {
  /* Tipografía — HAZE-BASE */
  --font-family:  'Poppins', 'DM Sans', 'Inter', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --font-display: 'Poppins', 'DM Sans', 'Inter', -apple-system, system-ui, sans-serif;
  --font:         var(--font-family);          /* alias HAZE-BASE */

  /* ── Acentos de marca UrbaLimp (iguales en ambos temas) ── */
  --celeste:        #0087AF;
  /* Color de TEXTO de un enlace. Va aparte de --celeste porque el celeste
     de marca sirve igual de relleno en los dos temas, pero como texto sobre
     panel oscuro se queda en 4,3:1 y no llega al 4,5:1 de AA. */
  --link:           #0087AF;
  --menta:          #A8D6E4;   /* celeste pastel: color de acción (botones, pestaña activa) */
  --azul:           #005069;   /* azul petróleo del logo UrbaLimp */
  --naranja:        #F17E30;   /* naranja del logo UrbaLimp */
  --verde:          #009B44;   /* verde del logo UrbaLimp */
  --text-on-accent: #0B3C4D;
  --project-ink:    #0E2A47;
  --ink-3:          #8A8F98;

  /* Acentos que se aclaran en modo oscuro */
  --azul-hi:        #005069;
  --azul-soft-text: #005069;

  /* ── Neutros HAZE (claro) — alias nativos ── */
  --page:       #F3F4F6;
  --panel:      #FFFFFF;
  --card:       #F3F4F6;
  --row:        #FFFFFF;
  --ink:        #101418;
  --nav-ink:    #3A3F47;
  --ink-muted:  #5B616B;
  --line:       #E3E5EA;
  --cell-empty: #DDDFE4;
  --dashed:     #C3C7CE;
  --avbg:       #EAF2F8;
  --hover-soft: #EAF2F8;
  --shadow-panel: 0 1px 4px rgba(16, 20, 24, 0.06);
  --shadow-overlay: 0 18px 48px rgba(16, 20, 24, 0.18);  /* menús, drawers, modales (R-13) */
  --scrim:        rgba(16, 20, 24, 0.32);             /* velo ÚNICO: modal, drawer, popover (R-13) */
  --hover-accent: rgba(0, 135, 175, 0.14);            /* hover celeste de chips, pestañas y botones */

  /* Radios HAZE */
  --r-panel: 18px;
  --r-card:  16px;
  --r-tile:  14px;
  --r-row:   12px;
  --r-nav:   10px;
  --r-pill:  8px;
  --ease-active: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Tokens Pañol mapeados a la paleta HAZE (claro) ── */
  /* Fondos */
  --bg-color:      var(--page);
  --panel-bg:      var(--panel);
  --panel-bg-2:    var(--card);
  --panel-bg-3:    var(--line);
  --sidebar-bg:    var(--panel);

  /* Textos */
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-muted);
  --text-muted:     var(--ink-3);

  /* Bordes */
  --border-color:   var(--line);
  --border-light:   #EDEEF1;

  /* Marca: el acento primario pasa a ser el azul HAZE */
  --primary-color:  var(--azul);
  --primary-hover:  #003F53;
  --primary-dim:    rgba(0, 80, 105, 0.10);

  /* Sidebar */
  --sidebar-color:  var(--nav-ink);
  --sidebar-hover:  var(--hover-accent);
  --sidebar-active: var(--menta);
  --sidebar-border: var(--line);

  /* Header */
  --header-bg:          var(--panel);
  --header-border:      var(--line);
  --search-bg:          var(--card);
  --search-border:      var(--line);
  --search-text:        var(--ink);
  --search-placeholder: var(--ink-3);

  /* Tablas */
  --table-header-bg:  var(--card);
  --table-row-bg:     var(--row);
  --table-row-alt:    #F8F9FA;
  --table-row-hover:  var(--hover-soft);
  --table-text:       var(--ink);
  --table-border:     var(--line);

  /* Inputs / formularios */
  --input-bg:         var(--card);
  --input-border:     transparent;
  --input-focus:      var(--celeste);
  --input-text:       var(--ink);
  --input-placeholder:var(--ink-3);

  /* Superficies interactivas (reemplazan rgba(255,255,255,*) del tema viejo) */
  --surf-1:  var(--card);        /* superficie sutil sobre panel */
  --surf-2:  var(--hover-soft);  /* hover */

  /* Estados / badges — chips suaves estilo HAZE */
  --status-green:    #0C8F41;
  --status-green-bg: rgba(161, 225, 188, 0.35);
  --status-red:      #C4554D;
  --status-red-bg:   rgba(196, 85, 77, 0.12);
  --status-yellow:   #B86A15;
  --status-yellow-bg:rgba(226, 195, 102, 0.22);
  --status-orange:   #CC782F;
  --status-orange-bg:rgba(204, 120, 47, 0.14);
  --status-blue:     var(--azul-soft-text);
  --status-blue-bg:  rgba(0, 135, 175, 0.25);
  --status-purple:   #8A67AB;
  --status-purple-bg:rgba(138, 103, 171, 0.14);
  --status-gray:     var(--ink-3);
  --status-gray-bg:  rgba(138, 143, 152, 0.16);
  --status-dark-red: #C4554D;
  --status-dark-red-bg: rgba(196, 85, 77, 0.16);

  /* Roles */
  --role-admin:    var(--azul);
  --role-panolero: var(--ink-muted);
  --role-lectura:  var(--ink-3);

  /* Sombras HAZE: sutiles */
  --shadow-sm:  0 1px 2px rgba(16,20,24,0.05);
  --shadow-md:  0 2px 8px rgba(16,20,24,0.07);
  --shadow-lg:  0 4px 16px rgba(16,20,24,0.10);
  --shadow-xl:  0 12px 38px rgba(16,20,24,0.22);

  /* Radios (Pañol) → escala HAZE */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Transición */
  --transition: 0.2s ease;

  /* Acento genérico usado por algunas vistas (maquinaria/vehículos) */
  --accent: var(--primary-color);
}

/* ─── Tema OSCURO (body.dark-mode) — valores exactos de HAZE-BASE ─── */
body.dark-mode {
  --page:       #000000;
  --panel:      #17191D;
  --card:       #24272C;
  --row:        #31353B;
  --ink:        #F2F3F5;
  --nav-ink:    #C6CAD1;
  --ink-muted:  #9BA1AA;
  --line:       #2A2E34;   /* HAZE usa #000; acá un gris para bordes visibles sobre card */
  --cell-empty: #31353B;
  --dashed:     #4A4F57;
  --avbg:       #2E3238;
  --hover-soft: #3A3F47;
  --azul-hi:        #2E9DBD;
  --azul-soft-text: #66B7CF;
  --link:           #66B7CF;   /* 7,4:1 sobre el panel oscuro */
  --shadow-panel: 0 1px 4px rgba(0, 0, 0, 0.5);
  --shadow-overlay: 0 18px 48px rgba(0, 0, 0, 0.55);
  --scrim:        rgba(0, 0, 0, 0.55);

  --border-light: #23262B;
  --primary-color:  #66B7CF;   /* en oscuro el acento legible es el celeste */
  --primary-hover:  #8FCBDD;
  --primary-dim:    rgba(0, 135, 175, 0.14);

  --sidebar-hover:  rgba(0, 135, 175, 0.14);
  --table-row-alt:  #2B2F35;

  --status-green:    #A1E1BC;
  --status-green-bg: rgba(161, 225, 188, 0.16);
  --status-red:      #E08A84;
  --status-red-bg:   rgba(196, 85, 77, 0.22);
  --status-yellow:   #E2C366;
  --status-yellow-bg:rgba(226, 195, 102, 0.16);
  --status-orange:   #E0A46B;
  --status-orange-bg:rgba(204, 120, 47, 0.20);
  --status-blue:     #66B7CF;
  --status-blue-bg:  rgba(0, 135, 175, 0.20);
  --status-purple:   #B394D6;
  --status-purple-bg:rgba(138, 103, 171, 0.22);
  --status-gray:     #9BA1AA;
  --status-gray-bg:  rgba(155, 161, 170, 0.14);
  --status-dark-red: #E08A84;
  --status-dark-red-bg: rgba(196, 85, 77, 0.26);

  --role-admin: #66B7CF;

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.5);
  --shadow-lg:  0 4px 16px rgba(0,0,0,0.55);
  --shadow-xl:  0 12px 38px rgba(0,0,0,0.55);
}

/* ─── Escalas (CRITERIO-DISENO §4.3) ───────────────────────
   Todas las medidas de maquetación y tipografía están en rem: la raíz es
   la ÚNICA perilla de densidad. Monitor grande = 16px (el tamaño con el
   que se diseñó); notebook = 14px, todo baja un 12,5 % en proporción. */
:root {
  /* Espaciado R-10: 4 · 8 · 12 · 16 · 24 · 32 */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  /* Tipografía R-11: T1 título · T2 título de card · T3 cifra · T4 cuerpo ·
     T5 secundario · T6 etiqueta */
  --t1: 1.625rem;
  --t2: 0.9375rem;
  --t3: 1.375rem;
  --t4: 0.8125rem;
  --t5: 0.75rem;
  --t6: 0.6875rem;

  /* Elevación R-13: cinco niveles y nada más */
  --z-sticky:  10;    /* cabecera de tabla, topbar */
  --z-float:   150;   /* flotantes de página (chip de solo lectura) */
  --z-drawer:  200;   /* paneles laterales y el redactor de tareas */
  --z-modal:   300;   /* hojas de carga, diálogos, vistas previas */
  --z-popover: 400;   /* menús, tooltips y popovers: se abren DESDE drawers
                         y modales, así que van por encima de ambos */
  --z-system:  900;   /* esqueleto de arranque, onboarding, aviso de sesión */
  --z-toast:   1000;  /* los avisos se ven siempre */
  /* Entre capas del mismo nivel manda el orden del DOM: lo que se abre
     después queda arriba (un diálogo abierto desde una hoja, etc.). */
}

/* Escala fluida: la raíz es la ÚNICA perilla de densidad y se mueve de forma
   continua con el ancho, sin saltos. 16 px a 1920 (el tamaño con el que se
   diseñó el sistema) · 14 px a 1366 (la notebook de la empresa) · piso de
   13 px, que es donde cae esa misma notebook con el escalado de Windows al
   125 % (1093 px CSS). Por encima de 1920 no crece: el ancho que sobra va a
   márgenes (R-15), no a estirar el contenido.
   Va en rem y no en px para no pisar el tamaño de letra que el usuario haya
   configurado en el navegador: sobre el elemento raíz, 1rem es ese valor. */
html { font-size: clamp(0.8125rem, 0.567rem + 0.361vw, 1rem); }
/* El alto es el recurso escaso en notebook: la IdeaPad FHD al 125 % tiene 1536 px
   de ancho (casi desktop) pero 730 px de alto, un 23 % menos que el monitor, y
   con la perilla de arriba —que sólo mira el ancho— no se compactaba nada.
   Estos cortes toman el valor más chico entre la escala por ancho y la que pide
   el alto. Son parte del contrato de diseño: ver R-15. */
@media (max-height: 859px) { html { font-size: min(clamp(0.8125rem, 0.567rem + 0.361vw, 1rem), 0.9375rem); } }
@media (max-height: 759px) { html { font-size: min(clamp(0.8125rem, 0.567rem + 0.361vw, 1rem), 0.875rem);  } }
@media (max-height: 659px) { html { font-size: min(clamp(0.8125rem, 0.567rem + 0.361vw, 1rem), 0.8125rem); } }
/* En celular y tablet no se achica: ahí el problema es el ancho, no la densidad. */
@media (max-width: 900px) { html { font-size: 100%; } }

/* ─── Reset ────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Reset de botón (HAZE-BASE): sin esto el UA pinta buttonface ─── */
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
img { display: block; }

/* ─── Base Body — lienzo HAZE: 2 paneles flotantes sobre --page ─── */
body {
  font-family: var(--font-family);
  /* R-11: el cuerpo es 500, no el 400 del navegador. Sin esto, cada regla
     que fija tamaño y se olvida del peso queda fina, y el sistema se ve de
     un grosor distinto en cada sección según quién se acordó de ponerlo. */
  font-weight: 500;
  background-color: var(--bg-color);
  color: var(--text-primary);
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3);
  height: 100vh;
  height: 100dvh;   /* sin la barra dinámica del navegador */
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.3s ease, color 0.3s ease;
}

/* ─── Scrollbar (Webkit) ────────────────────────────────── */
::-webkit-scrollbar { width: 0.3125rem; height: 0.3125rem; }
::-webkit-scrollbar-track { background: var(--bg-color); }
::-webkit-scrollbar-thumb { background: var(--dashed); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ═══════════════════════════════════════════════════════════
   UTILIDADES DE COLOR / TEXTO
═══════════════════════════════════════════════════════════ */
.text-green     { color: var(--status-green); }
.text-red       { color: var(--status-red); }
.text-yellow    { color: var(--status-yellow); }
.text-orange    { color: var(--status-orange); }
.text-gray      { color: var(--status-gray); }
.text-dark-red  { color: var(--status-dark-red); }
.text-muted     { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-primary-c { color: var(--text-primary); }
.text-blue      { color: var(--primary-color); }

/* Badges de color semitransparente (pill) */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-2);
  border-radius: 4px;
  font-size: var(--t6);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: var(--font-mono);
}
.badge-green    { background: var(--status-green-bg);    color: var(--status-green);    border: 1px solid rgba(63,185,80,0.3); }
.badge-red      { background: var(--status-red-bg);      color: var(--status-red);      border: 1px solid rgba(248,81,73,0.3); }
.badge-yellow   { background: var(--status-yellow-bg);   color: var(--status-yellow);   border: 1px solid rgba(210,153,34,0.4); }
.badge-orange   { background: var(--status-orange-bg);   color: var(--status-orange);   border: 1px solid rgba(219,109,40,0.3); }
.badge-gray     { background: var(--status-gray-bg);     color: var(--status-gray);     border: 1px solid rgba(110,118,129,0.3); }
.badge-dark-red { background: var(--status-dark-red-bg); color: var(--status-red);                border: 1px solid rgba(185,28,28,0.4); }
.badge-primary  { background: var(--primary-dim);        color: var(--primary-color);   border: 1px solid rgba(0,80,105,0.3); }
.badge-purple   { background: rgba(0,80,105,0.12);    color: #A5A5FF;                border: 1px solid rgba(0,80,105,0.3); }
.badge-cyan     { background: rgba(0,80,105,0.15);    color: #9B9B9B;                border: 1px solid rgba(196,168,80,0.3); }
.badge-propietario { background: rgba(0,80,105,0.18); color: var(--azul);                border: 1px solid rgba(0,80,105,0.55); font-weight: 700; }

/* Layout */
.hidden { display: none !important; }
.flex   { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-4); }
.mt-4 { margin-top: var(--sp-5); }
.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-4); }
.font-bold { font-weight: 700; }
.font-mono { font-family: var(--font-mono); }
.w-full { width: 100%; }

/* ═══════════════════════════════════════════════════════════
   BOTONES
═══════════════════════════════════════════════════════════ */
.btn {
  padding: var(--sp-2) var(--sp-4);
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-weight: 700;
  font-size: var(--t4);
  font-family: var(--font-family);
  transition: filter 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  letter-spacing: 0.2px;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — acción principal HAZE: menta sobre tinta de acento */
.btn-primary {
  background: var(--menta);
  color: var(--text-on-accent);
}
.btn-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/* Success — misma familia que primary */
.btn-success {
  background: var(--menta);
  color: var(--text-on-accent);
}
.btn-success:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Danger */
.btn-danger {
  background: var(--status-red-bg);
  color: var(--status-red);
}
.btn-danger:hover {
  background: rgba(196,85,77,0.22);
  transform: translateY(-1px);
}

/* Warning */
.btn-warning {
  background: var(--status-yellow-bg);
  color: var(--status-yellow);
}
.btn-warning:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

/* Secondary — azul HAZE sólido */
.btn-secondary {
  background: var(--azul-hi);
  color: #FFFFFF;
}
.btn-secondary:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* Outline / Ghost — superficies suaves */
.btn-outline {
  background: var(--card);
  color: var(--nav-ink);
  border: 1.5px solid var(--line);
}
.btn-outline:hover {
  background: var(--hover-soft);
  color: var(--ink);
  border-color: var(--dashed);
}

.btn-ghost {
  background: var(--card);
  color: var(--nav-ink);
}
.btn-ghost:hover {
  background: var(--hover-soft);
  color: var(--ink);
}

/* R-16: el botón chico cambia el ALTO, no la letra. */
.btn-sm { padding: var(--sp-1) var(--sp-3); font-size: var(--t4); font-weight: 600; }
.btn-xs { padding: var(--sp-1) var(--sp-2); font-size: var(--t6); font-weight: 600; }
.btn-block { width: 100%; }
.btn:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════
   LOGIN
═══════════════════════════════════════════════════════════ */
.login-page {
  background: var(--page);
  background-image:
    radial-gradient(ellipse at 30% 40%, rgba(0,80,105,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(0,80,105,0.04) 0%, transparent 50%);
  min-height: 100vh;
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.login-card {
  background: var(--panel);
  border: 1.5px solid var(--line);
  padding: 3rem 2.5rem;
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-overlay);
  width: 100%;
  max-width: 26.25rem;
  text-align: center;
  animation: slideUp 0.4s ease;
  backdrop-filter: blur(20px);
}

.login-logo-wrapper {
  margin-bottom: var(--sp-2);
}

.login-logo-icon {
  width: 3.25rem;
  height: 3.25rem;
  background: rgba(0,80,105,0.15);
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--sp-3);
  box-shadow: none;
  border: 1px solid rgba(0,80,105,0.2);
}

.login-card h1 {
  color: var(--text-primary);
  margin-bottom: var(--sp-1);
  font-size: var(--t1);
  font-weight: 700;
  letter-spacing: 3px;
}

.login-card .login-subtitle {
  color: var(--text-secondary);
  margin-bottom: var(--sp-5);
  font-size: var(--t4); font-weight: 500;
}

.login-hint {
  margin-top: var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(0,80,105,0.06);
  border: 1px solid rgba(0,80,105,0.15);
  border-radius: var(--radius-sm);
  font-size: var(--t5); font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  line-height: 1.6;
}

.login-hint strong { color: var(--primary-color); }

/* ═══════════════════════════════════════════════════════════
   FORMULARIOS
═══════════════════════════════════════════════════════════ */
.form-group {
  margin-bottom: var(--sp-4);
  text-align: left;
}

.form-group label {
  display: block;
  font-size: var(--t5);
  font-weight: 600;
  margin-bottom: var(--sp-2);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.form-control {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surf-1);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--input-text);
  font-size: var(--t4); font-weight: 500;
  font-family: var(--font-family);
  transition: all 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}

.form-control:focus {
  outline: none;
  border-color: rgba(0,80,105,0.4);
  box-shadow: 0 0 0 2px rgba(0,80,105,0.08);
  background: var(--surf-2);
}

.form-control::placeholder { color: var(--ink-3); }

select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555560' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: var(--sp-6);
  cursor: pointer;
}

select.form-control option {
  background-color: var(--panel-bg-2);
  color: var(--text-primary);
}

textarea.form-control {
  resize: vertical;
  min-height: 5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

/* Filter row */
.filter-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.filter-row .form-control {
  max-width: 17.5rem;
}

.form-label {
  display: block;
  font-size: var(--t5);
  font-weight: 600;
  margin-bottom: var(--sp-2);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

/* Section divider dentro de form */
.form-section-title {
  grid-column: span 2;
  font-size: var(--t5);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-color);
  margin-top: var(--sp-1);
}

/* ═══════════════════════════════════════════════════════════
   ALERTAS / MENSAJES — banner legado (error de login y error de vista).
   OJO: el Dashboard reutiliza el nombre `.alert` para su tarjeta de
   notificación; `.hz-dash .alert` neutraliza margin/border/display de acá.
═══════════════════════════════════════════════════════════ */
.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-4);
  display: none;
  font-size: 0.875rem;
  font-weight: 500;
  border-left: 4px solid transparent;
}

.alert-danger {
  background: var(--status-red-bg);
  color: #fca5a5;
  border-left-color: var(--status-red);
}
.alert-success {
  background: var(--status-green-bg);
  color: #86efac;
  border-left-color: var(--status-green);
}
.alert-warning {
  background: var(--status-yellow-bg);
  color: #fde68a;
  border-left-color: var(--status-yellow);
}
.alert-info {
  background: var(--primary-dim);
  color: #93c5fd;
  border-left-color: var(--primary-color);
}

/* ─── Info box dark (reemplaza divs blancos en modales) ─── */
.info-box {
  padding: var(--sp-3) var(--sp-4);
  background: var(--panel-bg-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1.6;
}

.info-box.info-box-blue {
  background: rgba(0,80,105,0.06);
  border-color: rgba(0,80,105,0.2);
}

.info-box strong { color: var(--text-primary); font-weight: 600; }
.info-box .label { color: var(--text-secondary); font-size: var(--t5); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }

/* ─── Aviso del sistema ─────────────────────────────────── */
/* UNO solo, abajo al centro, sobre fondo oscuro. Reemplaza (24/09/2026) la
   pila de tarjetas de colores arriba a la derecha: el sistema habla siempre
   desde el mismo lugar, sea una carga, una validación o un error.
   Capas: ver los tokens --z-* al principio del archivo. El aviso va en el
   nivel más alto: se ve SIEMPRE, incluso sobre modales y el onboarding. */

/* La pila vieja no vuelve ni aunque quede markup suelto en algún HTML. */
#toastWrapper { display: none !important; }

.toast {
  position: fixed;
  bottom: 3.25rem;
  left: 50%;
  z-index: var(--z-toast);
  max-width: min(34rem, calc(100vw - 2rem));
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: #1C2430;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-pill);
  padding: 0.5625rem 1rem;
  font-family: var(--font-family);
  font-size: var(--t4);
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 0.5rem 1.5rem rgba(16, 20, 24, 0.30);
  opacity: 0;
  transform: translateX(-50%) translateY(0.5rem);
  transition: opacity 0.18s ease, transform 0.18s var(--ease-active);
  pointer-events: none;   /* el aviso nunca tapa un clic */
}
.toast.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }
/* .toast trae display:flex, que le gana al [hidden] del navegador. */
.toast[hidden] { display: none; }
.toast__t { min-width: 0; }

/* El tipo NO cambia el fondo ni el lugar: cambia un punto al costado, para
   que un fallo no se lea igual que un guardado. */
.toast[data-tipo="error"]::before,
.toast[data-tipo="warning"]::before {
  content: "";
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
}
.toast[data-tipo="error"]::before   { background: #FF8B80; }
.toast[data-tipo="warning"]::before { background: #F2C063; }

/* Único caso con acción: el aviso de sesión por expirar. */
.toast__b {
  flex: none;
  pointer-events: auto;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-pill);
  padding: 0.1875rem 0.625rem;
  font-family: inherit;
  font-size: var(--t6);
  font-weight: 700;
}
.toast__b:hover { background: rgba(255, 255, 255, 0.26); }

/* En oscuro el #1C2430 se confunde con el panel: sube un escalón y se
   apoya en el borde para seguir siendo una capa por encima. */
body.dark-mode .toast {
  background: #2E343D;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.55);
}

@media (max-width: 720px) {
  .toast { bottom: 1.5rem; max-width: calc(100vw - 1.5rem); }
}

/* ═══════════════════════════════════════════════════════════
   HEADER — contenedor de la barra flotante (patrón HAZE-BASE)
   No es una barra: es una fila sin fondo ni borde dentro del panel,
   con la píldora (.topbar) alineada a la derecha. El alto lo define
   su contenido, igual que `align-self:flex-end` del original.
═══════════════════════════════════════════════════════════ */
/* La barra de día y reloj se muestra SOLO en el Panel General (decisión del
   18/09/2026): es contexto, no navegación, y en el resto de las secciones
   quedaba pegada a los botones de acción de la pantalla. Al liberarse la
   franja, la cabecera de cada sección gana el ancho completo. */
.header { display: none; }
body[data-route="dashboard"] .header {
  background: transparent;
  border: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  flex-shrink: 0;
  z-index: var(--z-sticky);
}

/* Breadcrumb eliminado del sistema: si algún markup viejo lo reintrodujera,
   no debe volver a pintarse ni ocupar espacio. */
.breadcrumb-nav,
.breadcrumb-root,
.breadcrumb-sep,
.breadcrumb-current { display: none !important; }

/* hide legacy search if it ever appears */
.search-bar-container { display: none !important; }
.search-icon { display: none; }

.user-info {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--t4); font-weight: 500;
  color: var(--text-secondary);
}

.user-name-display {
  font-weight: 500;
  color: var(--ink);
  font-size: var(--t4);
  letter-spacing: 0.2px;
}

.user-role-badge {
  padding: var(--sp-1) var(--sp-2);
  border-radius: 4px;
  font-size: var(--t6);
  font-weight: 600;
  color: #191919;
  background: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════════════════════
   HAZE SIDEBAR — Shadcn-style Component
═══════════════════════════════════════════════════════════ */
/* 262px = ancho exacto del sidebar de HAZE-BASE. Verificado que con la
   tipografía agrandada (15px / iconos 20px) ningún nombre se corta. */
.haze-sidebar {
  /* 23/09/2026: 14.5rem en vez de 16.375. La barra ocupaba demasiado y
     desbalanceaba el sistema; con los ítems más compactos entra igual. */
  width: 14.5rem;
  flex: 0 0 14.5rem;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 1.5rem);
  height: calc(100dvh - 1.5rem);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel);
  transition: background 0.3s ease;
}

/* — Header — */
.haze-sidebar-header {
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--line);
}

/* La marca: isotipo + nombre desplegada, sólo isotipo colapsada. El display
   vive acá y no en el atributo style, para que el colapso lo pueda apagar. */
.brand-logo { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.brand-logo img { width: 1.625rem; height: 1.625rem; object-fit: contain; flex: 0 0 auto; }
.brand-logo__txt {
  font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--text-primary); white-space: nowrap;
}
.brand-mark { display: none; width: 1.5rem; height: 1.5rem; object-fit: contain; }

.haze-sidebar-logo {
  width: 2.125rem; height: 2.125rem;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-primary);
}
.haze-sidebar-logo svg { width: 2.125rem; height: 2.125rem; }

.haze-sidebar-company { display: flex; flex-direction: column; min-width: 0; }
.haze-sidebar-company-name {
  font-size: 0.875rem; font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}
.haze-sidebar-company-sub {
  font-size: var(--t6); font-weight: 600; color: var(--ink-3);
  line-height: 1.3;
}

/* — Nav scroll container — */
.haze-sidebar-nav {
  flex: 1;
  min-height: 0;
  padding: var(--sp-2) 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Indicador de "hay más abajo". Las dos capas `local` viajan con el scroll
     y tapan la sombra cuando se llega al borde; las dos `scroll` quedan fijas.
     Sin esto la lista parecía cortada: la barra global mide 5 px y no se ve. */
  background:
    linear-gradient(var(--sidebar-bg) 30%, transparent)  top    / 100% 1.25rem no-repeat local,
    linear-gradient(transparent, var(--sidebar-bg) 70%)  bottom / 100% 1.25rem no-repeat local,
    radial-gradient(farthest-side at 50% 0,    rgba(16, 20, 24, 0.30), transparent) top    / 100% 0.75rem no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(16, 20, 24, 0.30), transparent) bottom / 100% 0.75rem no-repeat scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--dashed) transparent;
}
/* Barra de scroll propia del menú: la global de 5 px era invisible. */
.haze-sidebar-nav::-webkit-scrollbar { width: 0.625rem; }
.haze-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.haze-sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--dashed);
  border-radius: 99px;
  border: 3px solid var(--sidebar-bg);
}
.haze-sidebar-nav:hover::-webkit-scrollbar-thumb { background: var(--ink-3); }

/* ── SidebarGroup ── */
.sb-group { padding: 0 var(--sp-2); margin-bottom: 2px; }

/* Etiqueta de sección (Operación, Personas, Administración, Empresa).
   Vive dentro del .sb-group, así que cuando el rol no deja ver ninguno de
   sus módulos desaparece junto con el grupo (app.js → ocultarGruposVacios). */
.sb-seccion {
  font-size: var(--t6);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-1);
  line-height: 1;
  user-select: none;
}

/* ── SidebarMenu (ul) ── */
.sb-menu {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* ── SidebarMenuButton ── */
.sb-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 0.375rem var(--sp-3);
  min-height: 2.125rem;
  border-radius: var(--r-nav);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--t4);
  font-weight: 500;
  color: var(--nav-ink);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  text-align: left;
}
.sb-btn:hover { background: var(--sidebar-hover); color: var(--ink); }
.sb-btn.active { background: var(--menta); color: var(--text-on-accent); font-weight: 700; transform: none; }

/* ── Icon ── */
.sb-icon {
  width: 1.125rem; height: 1.125rem;
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 0.12s;
  stroke: currentColor;
  fill: none;
}
.sb-btn:hover .sb-icon,
.sb-btn.active .sb-icon { opacity: 1; }

/* ── ChevronRight (rotates 90° on open) ── */
.sb-chevron-r {
  width: 1rem; height: 1rem;
  flex-shrink: 0;
  margin-left: auto;
  opacity: 0.35;
  transition: transform 0.2s ease, opacity 0.12s;
  stroke: currentColor;
  fill: none;
}
.sb-btn--trigger:hover .sb-chevron-r { opacity: 0.65; }
.sb-collapsible[data-open="true"] > .sb-btn--trigger .sb-chevron-r {
  transform: rotate(90deg);
  opacity: 0.65;
}

/* ── Collapsible sub-menu ── */
.sb-sub {
  list-style: none;
  padding: 0; margin: 2px 0 0 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  position: relative;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.sb-collapsible[data-open="true"] > .sb-sub {
  max-height: 31.25rem;
  opacity: 1;
}
/* Vertical tree line connecting sub-items */
.sb-sub::before {
  content: '';
  position: absolute;
  left: 1.3125rem;
  top: 0.1875rem;
  bottom: 0.1875rem;
  width: 1px;
  background: var(--surf-2);
  pointer-events: none;
}

.sb-sub-btn {
  display: flex;
  align-items: center;
  width: calc(100% - 1.125rem);
  margin-left: var(--sp-4);
  padding: 0.3125rem var(--sp-2) 0.3125rem var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--t5);
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background 0.12s, color 0.12s;
}
.sb-sub-btn:hover { background: var(--sidebar-hover); color: var(--ink); }
.sb-sub-btn.active { background: var(--menta); color: var(--text-on-accent); font-weight: 700; transform: none; }

/* ── Subnav de Finanzas: píldora deslizante (patrón .nav__pill de HAZE-BASE) ──
   El indicador es un bloque menta que se traslada al subítem activo; por eso
   el propio subítem activo va con fondo transparente. */
.sb-sub--fin { position: relative; }
.sb-pill {
  position: absolute;
  left: 1.125rem;
  top: 0;
  width: calc(100% - 1.125rem);
  height: 1.75rem;
  background: var(--menta);
  border-radius: var(--r-pill);
  transform: translateY(0);
  transition: transform 0.35s var(--ease-active), height 0.2s ease;
  pointer-events: none;
  z-index: 0;
}
.sb-sub--fin .sb-sub-btn { position: relative; z-index: 1; }
.sb-sub--fin .sb-sub-btn.active { background: transparent; color: var(--text-on-accent); font-weight: 700; }
/* Sin subítem activo (fuera de Finanzas) la píldora no debe verse */
.sb-sub--fin:not(.has-active) .sb-pill { opacity: 0; }
.sb-collapsible--fin[data-open="true"] > .sb-btn--trigger { font-weight: 700; }

/* — Workspace Switcher (shadcn sidebar-07 style) — */
.sidebar-workspace-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2);
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--text-primary);
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
  font-family: var(--font-family);
}
.sidebar-workspace-btn:hover {
  background: var(--surf-2);
  border-color: var(--line);
}
.sidebar-workspace-icon {
  width: 2rem; height: 2rem;
  border-radius: var(--r-pill);
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-primary);
}
.sidebar-workspace-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.sidebar-workspace-name {
  font-size: var(--t4);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-workspace-plan {
  font-size: var(--t6); font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-workspace-chevrons {
  width: 0.875rem; height: 0.875rem;
  opacity: 0.4;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.sidebar-workspace-btn:hover .sidebar-workspace-chevrons {
  opacity: 0.7;
}
/* Update header padding for workspace btn */
.haze-sidebar-header {
  padding: var(--sp-2) var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.sidebar-workspace-btn { flex: 1; min-width: 0; width: auto; }

/* ── Sidebar collapse toggle button ── */
.sb-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem; height: 1.875rem;
  border-radius: var(--r-pill);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-3);
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.sb-sidebar-toggle:hover {
  background: var(--surf-2);
  color: var(--ink);
}

/* ── Sidebar collapsed state ──
   OJO: .haze-sidebar es `flex: 0 0 262px`. En un contenedor flex el flex-basis
   gana sobre width, así que colapsar SOLO con `width` no movía nada (el panel
   se re-estilaba pero seguía midiendo 262px). Hay que tocar flex-basis, y
   transicionar ambos — igual que `.sidebar.is-collapsed` de HAZE-BASE. */
.haze-sidebar {
  transition: width 0.28s var(--ease-active),
              flex-basis 0.28s var(--ease-active),
              background 0.3s ease;
}
.haze-sidebar.collapsed {
  width: 4.5rem;
  flex-basis: 4.5rem;
  overflow: hidden;
}
/* (FASE 6) el btn de marca queda visible colapsado, muestra el isotipo */
.haze-sidebar.collapsed .haze-sidebar-header { justify-content: center; padding: var(--sp-2) var(--sp-1); }
.haze-sidebar.collapsed .sb-sidebar-toggle { width: 2.25rem; height: 2.25rem; }
.haze-sidebar.collapsed .sb-group { padding: 0 var(--sp-1); }
.haze-sidebar.collapsed .sb-btn {
  justify-content: center;
  padding: var(--sp-2) var(--sp-1);
}
.haze-sidebar.collapsed .sb-btn > span { display: none; }
.haze-sidebar.collapsed .sb-chevron-r { display: none; }
.haze-sidebar.collapsed .sb-sub { display: none !important; }
.haze-sidebar.collapsed .sb-icon { opacity: 0.85; width: 1.375rem; height: 1.375rem; }
.haze-sidebar.collapsed .haze-sidebar-footer { padding: var(--sp-1) var(--sp-1); }
.haze-sidebar.collapsed .sb-btn--user { padding: var(--sp-2) var(--sp-1); justify-content: center; }
.haze-sidebar.collapsed .sb-user-text { display: none; }
.haze-sidebar.collapsed .sidebar-workspace-chevrons { display: none; }
.haze-sidebar.collapsed .sb-haze-credit { display: none; }
/* Colapsada queda el isotipo solo: sin el nombre y sin la etiqueta de
   sección, que no tiene dónde entrar en 72px. */
.haze-sidebar.collapsed .sb-seccion { display: none; }
.haze-sidebar.collapsed .brand-logo { display: none; }
.haze-sidebar.collapsed .brand-mark { display: block; }
.haze-sidebar.collapsed .haze-sidebar-header { justify-content: center; gap: var(--sp-1); }

.admin-only { display: none !important; }

/* ── SidebarFooter (NavUser) ── */
.haze-sidebar-footer {
  padding: var(--sp-2);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
/* Campana, tema y Ajustes: una fila de iconos sobre el chip de usuario.
   Colapsado el sidebar (72 px) se apilan en columna y siguen alcanzables. */
.sb-tools {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-1);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.haze-sidebar.collapsed .sb-tools { flex-direction: column; gap: var(--sp-2); }
.sb-tools .alerts-bell-wrapper { display: flex; }

/* ── User button (sb-btn--user) ── */
.sb-btn--user {
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--r-pill);
  gap: var(--sp-2);
}

/* ── Avatar — rounded square (shadcn rounded-lg) ── */
.sb-avatar {
  width: 2rem; height: 2rem;
  border-radius: var(--r-pill);
  background: var(--surf-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-3);
}
.sb-avatar svg { width: 1.0625rem; height: 1.0625rem; }

.sb-user-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  text-align: left;
  line-height: 1.25;
}
.sb-user-name {
  font-size: var(--t4); font-weight: 500;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-user-role {
  font-size: var(--t6); font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── User dropdown ── */
.sb-user-dropdown-wrapper { position: relative; }
.sb-user-dropdown {
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 0; right: 0;
  background: var(--panel);
  border: 1px solid var(--dashed);
  border-radius: var(--r-pill);
  padding: var(--sp-1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.15s, transform 0.15s;
  z-index: var(--z-popover);
  min-width: 11.25rem;
  box-shadow: var(--shadow-overlay);
}
.sb-user-dropdown.open { opacity: 1; pointer-events: all; transform: translateY(0); }

/* Colapsada: el aside mide 72px y recorta lo que se salga. position:fixed no
   lo recorta (el aside no tiene transform), así que el menú sale al costado
   en vez de quedar cortado. */
.haze-sidebar.collapsed .sb-user-dropdown {
  position: fixed;
  left: 4.75rem;
  right: auto;
  bottom: 4.5rem;
  width: 12.5rem;
}

.sb-dropdown-label {
  padding: var(--sp-1) var(--sp-2) var(--sp-1);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.sb-dropdown-label .sb-avatar { width: 1.75rem; height: 1.75rem; }
.sb-dropdown-label .sb-user-text { }
.sb-dropdown-sep { height: 1px; background: var(--surf-2); margin: var(--sp-1) 0; }

.sb-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--t4); font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  font-family: var(--font-family);
}
.sb-dropdown-item svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.sb-dropdown-item:hover { background: var(--surf-2); color: var(--text-primary); }
.sb-dropdown-item--danger { color: var(--status-red); }
.sb-dropdown-item--danger:hover { background: rgba(248,113,113,0.08); color: var(--status-red); }

/* ── SidebarRail ── */
.sb-rail { display: none; }

/* ═══════════════════════════════════════════════════════════
   ÁREA DE CONTENIDO PRINCIPAL
═══════════════════════════════════════════════════════════ */
/* .main-content ES el `.panel` de HAZE-BASE: mismo padding (28/34/34), misma
   altura, mismo radio. Todo el espaciado lateral del sistema nace acá; por eso
   .view-container ya no aporta padding propio (duplicarlo era lo que estiraba
   y desalineaba cada sección respecto del original). */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  min-width: 0;
  position: relative;
  height: calc(100vh - 1.5rem);
  height: calc(100dvh - 1.5rem);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel);
  padding: var(--sp-5) var(--sp-6);
  overflow: hidden;
  transition: background 0.3s ease;
}

.view-container {
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;   /* ancla del esqueleto y de la vista en preparación */
}

/* ---------- Carga en dos etapas ----------
   El esqueleto se apoya sobre la caja del contenedor y la vista se prepara
   debajo, oculta, hasta tener sus datos. Cuando se muestra, `display:contents`
   hace desaparecer el envoltorio: la raíz de la vista queda como hija directa
   de .view-container y vale el mismo contrato de altura de siempre. */
.view-skeleton {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
}
.view-stage { display: contents; }
.view-stage.is-pending {
  display: flex; flex-direction: column;
  position: absolute; inset: 0;
  overflow: hidden;
  visibility: hidden;   /* invisible pero con layout: init() puede medir */
}

/* Las vistas que quieren ocupar el alto disponible (dashboard, calendario,
   finanzas) son hijas directas y heredan el flex del contenedor. */
.view-container > * { flex-shrink: 0; }

.view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* Escala tipográfica de HAZE-BASE para el título de sección
   (.fin-title/.presu h1: 28–32px, 800, -1px). */
.view-header h2,
.view-header h1 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  letter-spacing: -1px;
  line-height: 1.18;
}

/* HAZE-BASE usa un título grande y nada más: sin párrafo descriptivo debajo.
   Ya no hay markup que lo emita; queda como red de seguridad. */
.section-subtitle { display: none !important; }

hr, .divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: var(--sp-4) 0;
}

/* ═══════════════════════════════════════════════════════════
   TARJETAS / PANELES (KPI cards, contenedores)
═══════════════════════════════════════════════════════════ */
/* Sin `backdrop-filter`: con un velo por encima, cada card desenfocaba el
   velo a través de sí misma y el fondo quedaba con manchones grises desparejos
   (captura 5). R-13: la card se separa por fondo y radio, no por desenfoque. */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  transition: all 0.2s ease;
}

.card:hover {
  border-color: var(--line);
}

/* KPI Card */
.kpi-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  transition: all 0.25s ease;
  animation: fadeInUp 0.4s ease both;
  position: relative;
  overflow: hidden;
}

.kpi-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,80,105,0.15);
  box-shadow: var(--shadow-overlay);
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kpi-accent, rgba(0,80,105,0.3)), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.kpi-card:hover::before { opacity: 1; }

.kpi-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--kpi-icon-bg, rgba(0,80,105,0.08));
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
}

.kpi-icon svg { width: 1.25rem; height: 1.25rem; }

.kpi-label {
  font-size: var(--t5);
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  margin-bottom: var(--sp-2);
  font-family: var(--font-family);
}

.kpi-value {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--kpi-accent, var(--text-primary));
  font-family: var(--font-mono);
  letter-spacing: -0.03em;
}

/* ═══════════════════════════════════════════════════════════
   TABLAS OSCURAS
═══════════════════════════════════════════════════════════ */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.dark-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  color: var(--ink);
  background: transparent;
  font-size: var(--t4); font-weight: 500;
}

.dark-table thead tr {
  background: var(--table-header-bg);
}

.dark-table thead th {
  padding: var(--sp-3) var(--sp-4);
  color: var(--ink-3);
  font-size: var(--t6);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  font-family: var(--font-family);
}

.dark-table tbody tr {
  background: transparent;
  border-bottom: 1px solid var(--line);
  transition: all 0.15s ease;
}

.dark-table tbody tr:nth-child(even) {
  background: var(--table-row-alt);
}

.dark-table tbody tr:hover {
  background: rgba(0,80,105,0.04);
}

.dark-table td {
  padding: var(--sp-3) var(--sp-4);
  color: var(--ink);
  vertical-align: middle;
}

.dark-table td .btn { font-size: var(--t6); font-weight: 600; padding: var(--sp-1) var(--sp-2); }

.table-empty {
  padding: 3.5rem var(--sp-4);
  text-align: center;
  color: #404040;
  font-size: var(--t4); font-weight: 500;
}

.table-empty-icon {
  font-size: 2.25rem;
  margin-bottom: var(--sp-2);
  opacity: 0.3;
}

.table-panel {
  background: var(--card);
  border: none;
  border-radius: var(--r-card);
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════════════ */
/* La tarjeta de alta/edición de todos los módulos. Es el `.fmodal` de
   HAZE-BASE (finanzas.css): panel claro, 18px de radio, sin líneas
   separadoras y con el título grande arriba. Antes tenía el fondo negro
   #141418 del tema viejo de Pañol, que dejaba el título ilegible. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--sp-4);
  z-index: var(--z-modal);
  animation: fadeIn 0.18s ease;
}

.modal-box {
  background: var(--panel);
  border-radius: var(--r-panel);
  padding: var(--sp-4) var(--sp-5);
  width: 100%;
  max-width: 35rem;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: var(--shadow-overlay);
  color: var(--ink);
  animation: slideUp 0.2s ease;
}

.modal-header {
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.4px;
}

/* Botón de cerrar = .fmodal__x de HAZE-BASE */
.modal-close {
  background: var(--card);
  border: none;
  border-radius: var(--r-pill);
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--nav-ink);
  font-size: 1.125rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  font-family: var(--font-family);
}
.modal-close:hover {
  background: rgba(0, 135, 175, 0.2);
  color: var(--ink);
}

.modal-body {
  padding: 0 2px 0 0;
  overflow-y: auto;
  min-height: 0;
  flex-grow: 1;
}

.modal-footer {
  padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* ── Contenido de la tarjeta con el vocabulario de HAZE-BASE ──
   Etiquetas .ffield__label y campos .finput; sólo dentro del modal, para no
   tocar los filtros y barras de las pantallas. */
.modal-box .form-group { margin-bottom: var(--sp-3); }
.modal-box .form-group:last-child { margin-bottom: 0; }

.modal-box .form-group label {
  font-size: var(--t5);
  font-weight: 600;
  color: var(--nav-ink);
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: var(--sp-1);
}

.modal-box .form-control {
  background: var(--card);
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--t4); font-weight: 500;
  color: var(--ink);
}
.modal-box .form-control:focus {
  border-color: var(--celeste);
  box-shadow: none;
  background: var(--card);
}

/* En el pie, Cancelar es el botón fantasma de HAZE-BASE (.fbtn--ghost),
   no el azul sólido que se usa en las tablas. */
.modal-footer .btn-secondary {
  background: var(--panel);
  border: 1.5px solid var(--line);
  color: var(--nav-ink);
  font-weight: 600;
}
.modal-footer .btn-secondary:hover {
  background: var(--panel);
  border-color: var(--celeste);
  color: var(--azul-soft-text);
  filter: none;
}

/* Animaciones modal */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   ALERT LIST / PANELS DE ALERTAS (Dashboard)
═══════════════════════════════════════════════════════════ */
.alert-panel {
  background: var(--card);
  border: none;
  border-radius: var(--r-card);
  overflow: hidden;
}

.alert-panel-header {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t5);
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-family: var(--font-family);
}

.alert-panel-body {
  padding: var(--sp-1) 0;
  /* El tope en rem sigue mandando en pantalla grande; el 40vh entra sólo
     cuando el alto escasea. */
  max-height: min(17.5rem, 40vh);
  overflow-y: auto;
  font-size: var(--t4); font-weight: 500;
}

.alert-list-item {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ink);
  transition: all 0.15s ease;
}

.alert-list-item:last-child { border-bottom: none; }
.alert-list-item:hover { background: rgba(0,80,105,0.04); }

.alert-ok {
  padding: var(--sp-5);
  text-align: center;
  color: var(--status-green);
  font-size: var(--t4);
  font-weight: 500;
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════
   PILLS DE ESTADO
═══════════════════════════════════════════════════════════ */
.status-pill {
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
  border-radius: 999px;
  font-size: var(--t6);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: white;
}

/* ═══════════════════════════════════════════════════════════
   HAZE ALERT — Shadcn-style Component
═══════════════════════════════════════════════════════════ */
.haze-alert {
  position: relative;
  display: grid;
  gap: 2px;
  width: 100%;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--panel);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-size: var(--t4); font-weight: 500;
}

.haze-alert.has-icon {
  grid-template-columns: auto 1fr;
  gap: 0 var(--sp-3);
}

.haze-alert-icon {
  grid-row: span 2;
  width: 1rem; height: 1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.haze-alert-title {
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}

.haze-alert-description {
  font-size: var(--t4); font-weight: 500;
  color: var(--ink-3);
  line-height: 1.5;
}

/* Variantes */
.haze-alert-destructive {
  border-color: rgba(248,113,113,0.2);
  color: var(--status-red);
}
.haze-alert-destructive .haze-alert-icon { color: var(--status-red); }
.haze-alert-destructive .haze-alert-description { color: rgba(248,113,113,0.75); }

.haze-alert-warning {
  border-color: rgba(250,204,21,0.2);
  color: #FACC15;
}
.haze-alert-warning .haze-alert-icon { color: #FACC15; }
.haze-alert-warning .haze-alert-description { color: rgba(250,204,21,0.7); }

.haze-alert-success {
  border-color: rgba(74,222,128,0.2);
  color: #4ADE80;
}
.haze-alert-success .haze-alert-icon { color: #4ADE80; }
.haze-alert-success .haze-alert-description { color: rgba(74,222,128,0.7); }

/* Alert con lista interna */
.haze-alert .alert-panel-body {
  grid-column: 1 / -1;
  margin-top: var(--sp-2);
  max-height: min(12.5rem, 40vh);
  overflow-y: auto;
  font-size: var(--t4); font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   HAZE PAGINATION — Shadcn-style Component
═══════════════════════════════════════════════════════════ */
.haze-pagination {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: var(--sp-4) 0 var(--sp-1);
}

.haze-pagination-content {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.haze-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--sp-1);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: none;
  color: #9B9B9B;
  font-size: var(--t4);
  font-weight: 500;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.12s ease;
  text-decoration: none;
}

.haze-page-btn:hover {
  background: var(--surf-1);
  color: var(--ink);
}

.haze-page-btn.active {
  border-color: var(--dashed);
  background: var(--surf-1);
  color: var(--ink);
  font-weight: 500;
}

.haze-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.haze-page-btn svg {
  width: 1rem; height: 1rem;
}

.haze-page-prev,
.haze-page-next {
  gap: var(--sp-1);
  padding: 0 var(--sp-2);
}

.haze-page-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--ink-3);
  font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════
   HEADER — Layout
═══════════════════════════════════════════════════════════ */
.header-left  { display: flex; align-items: center; gap: var(--sp-3); }
.header-right { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }

/* ═══════════════════════════════════════════════════════════
   NOTIFICACIONES — campana, popover e historial
   Réplica del diseño "Notificaciones.dc.html" con los tokens
   del sistema (funciona en claro y oscuro).
═══════════════════════════════════════════════════════════ */

/* ---------- Campana del topbar ---------- */
.alerts-bell-wrapper { position: relative; }

.alerts-bell-btn {
  position: relative;
  width: 2.375rem; height: 2.375rem;
  flex: 0 0 2.375rem;
  border: none;
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.alerts-bell-btn svg {
  width: 1.1875rem; height: 1.1875rem;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.alerts-bell-btn:hover { background: var(--hover-soft); }
.alerts-bell-btn.is-open { background: rgba(0, 135, 175, 0.22); color: var(--azul); }
body.dark-mode .alerts-bell-btn.is-open { color: var(--celeste); }

.alerts-bell-badge {
  position: absolute; top: 0.1875rem; right: 0.1875rem;
  min-width: 1rem; height: 1rem; padding: 0 var(--sp-1);
  background: var(--azul); color: #FFFFFF;
  font-size: var(--t6); font-weight: 700; line-height: 1;
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--panel);
}

/* ---------- Popover ---------- */
/* El panel de notificaciones es un popover: queda por encima de drawers y
   modales (--z-popover); solo los toasts lo superan. */
.ntf-layer { position: fixed; inset: 0; z-index: var(--z-popover); }
.ntf-backdrop { position: absolute; inset: 0; background: var(--scrim); animation: fadeIn 0.18s ease; }

.ntf-pop {
  position: absolute; top: 6rem; right: 1.625rem;
  width: 25.75rem; max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 8rem);
  background: var(--panel);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-overlay);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: ntfPop 0.22s var(--ease-active) both;
}
body.dark-mode .ntf-pop { box-shadow: var(--shadow-overlay); }
@keyframes ntfPop {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ntf-pop__arrow {
  position: absolute; top: -0.4375rem; right: 3.75rem;
  width: 0.875rem; height: 0.875rem;
  background: var(--panel);
  transform: rotate(45deg);
  border-top-left-radius: 3px;
}

.ntf-pop__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  flex: 0 0 auto;
}
.ntf-pop__title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.4px; color: var(--ink);
}
.ntf-pop__count {
  min-width: 1.25rem; height: 1.25rem; padding: 0 var(--sp-2);
  display: flex; align-items: center; justify-content: center;
  background: var(--menta); color: var(--text-on-accent);
  font-size: var(--t5); font-weight: 700; border-radius: var(--r-pill);
}
.ntf-pop__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--sp-3) var(--sp-2); }
.ntf-pop__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1.5px solid var(--line);
  flex: 0 0 auto;
}

/* ---------- Interruptor "Solo sin leer" ---------- */
.ntf-switch {
  display: flex; align-items: center; gap: var(--sp-2);
  border: none; background: transparent;
  font-family: inherit; cursor: pointer; padding: var(--sp-1) 2px;
}
.ntf-switch--boxed { background: var(--card); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-3); }
.ntf-switch__label { font-size: var(--t5); font-weight: 600; color: var(--ink-3); transition: color 0.2s ease; }
.ntf-switch.is-on .ntf-switch__label { color: var(--azul); }
body.dark-mode .ntf-switch.is-on .ntf-switch__label { color: var(--celeste); }
.ntf-switch__track {
  position: relative; width: 2.125rem; height: 1.1875rem; flex: 0 0 2.125rem;
  border-radius: var(--r-pill); background: var(--cell-empty, var(--line));
  transition: background 0.2s ease;
}
.ntf-switch.is-on .ntf-switch__track { background: var(--celeste); }
.ntf-switch__dot {
  position: absolute; top: 2px; left: 2px;
  width: 0.9375rem; height: 0.9375rem; border-radius: 50%;
  background: #FFFFFF;
  box-shadow: var(--shadow-panel);
  transition: left 0.2s var(--ease-active);
}
.ntf-switch.is-on .ntf-switch__dot { left: 1.0625rem; }

/* ---------- Grupos y filas ---------- */
.ntf-group {
  padding: var(--sp-3) var(--sp-2) var(--sp-1);
  font-size: var(--t6); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3);
}
.ntf-group--sticky { position: sticky; top: 0; z-index: 1; background: var(--card); padding: var(--sp-3) var(--sp-1) var(--sp-2); }
.ntf-groupitems { display: flex; flex-direction: column; gap: var(--sp-2); }

.ntf-item {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-row);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ntf-item:hover { background: var(--hover-soft); transform: translateX(2px); }
.ntf-item.is-unread { background: var(--row); }
.ntf-item.is-archived { opacity: 0.62; }

.ntf-item__icon {
  width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem;
  border-radius: 50%;
  display: grid; place-items: center;
}
.ntf-item__icon svg {
  width: 1.125rem; height: 1.125rem;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.ntf-icon--celeste { background: rgba(0, 135, 175, 0.16); color: var(--azul-soft-text, var(--azul)); }
.ntf-icon--menta   { background: rgba(161, 225, 188, 0.42); color: var(--text-on-accent); }
.ntf-icon--azul    { background: rgba(0, 80, 105, 0.10);   color: var(--azul-soft-text, var(--azul)); }
.ntf-icon--gris    { background: var(--card); color: var(--nav-ink); }
body.dark-mode .ntf-icon--menta { color: var(--menta); }

.ntf-item__body { flex: 1 1 auto; min-width: 0; }
.ntf-item__top { display: flex; align-items: baseline; gap: var(--sp-2); }
.ntf-item__title {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--t4); font-weight: 500; color: var(--ink); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ntf-item.is-unread .ntf-item__title { font-weight: 700; }
.ntf-item__time { flex: 0 0 auto; font-size: var(--t6); font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.ntf-item__desc {
  font-size: var(--t5); font-weight: 500; color: var(--nav-ink); margin-top: 2px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ntf-item__acts { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.ntf-item__dot {
  width: 0.5rem; height: 0.5rem; flex: 0 0 0.5rem;
  border-radius: 50%; background: var(--celeste);
  margin-top: var(--sp-3);
}

.ntf-tag {
  font-size: var(--t6); font-weight: 700;
  padding: 2px var(--sp-2); border-radius: var(--r-pill);
  white-space: nowrap;
}
.ntf-tag--celeste { background: rgba(0, 135, 175, 0.28); color: var(--azul-soft-text, var(--azul)); }
.ntf-tag--azul    { background: var(--azul); color: #FFFFFF; }
.ntf-tag--menta   { background: var(--menta); color: var(--text-on-accent); }
.ntf-tag--gris    { background: var(--line); color: var(--nav-ink); }

.ntf-linkbtn {
  border: none; background: transparent;
  font-family: inherit; font-size: var(--t6); font-weight: 600;
  color: var(--ink-3); padding: 2px var(--sp-1); border-radius: var(--r-pill);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.ntf-linkbtn:hover { color: var(--azul); background: var(--hover-soft); }
body.dark-mode .ntf-linkbtn:hover { color: var(--celeste); }
.ntf-linkbtn--accent { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--t4); font-weight: 700; color: var(--azul); }
body.dark-mode .ntf-linkbtn--accent { color: var(--celeste); }
.ntf-linkbtn--accent svg { width: 0.9375rem; height: 0.9375rem; fill: none; stroke: currentColor; stroke-width: 2; }
.ntf-pop__foot .ntf-linkbtn { font-size: var(--t4); font-weight: 500; }

/* ---------- Estado vacío ---------- */
.ntf-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); padding: 2.5rem var(--sp-5); text-align: center;
}
.ntf-empty__mark {
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--card);
  display: grid; place-items: center;
  color: var(--ink-3);
}
.ntf-empty__mark svg { width: 1.625rem; height: 1.625rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ntf-empty__title { font-size: var(--t2); font-weight: 700; color: var(--ink); }
.ntf-empty__sub { font-size: var(--t4); font-weight: 500; color: var(--ink-3); max-width: 17.5rem; line-height: 1.5; }

/* ---------- Historial de notificaciones (sección) ---------- */
.hz-ntf { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.ntf-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  margin: 2px 0 var(--sp-4);
  flex: 0 0 auto;
}
.ntf-head__left { display: flex; align-items: center; gap: var(--sp-3); }
.ntf-back {
  width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem;
  border: none; border-radius: 50%;
  background: var(--card); color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ntf-back:hover { background: var(--hover-soft); }
.ntf-back svg { width: 1.1875rem; height: 1.1875rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ntf-head__title { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -1px; line-height: 1.1; color: var(--ink); }
.ntf-head__status { font-size: var(--t4); font-weight: 500; color: var(--ink-3); margin-top: var(--sp-1); }

.ntf-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: inherit; font-size: var(--t4); font-weight: 700;
  border: none; border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.ntf-btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ntf-btn--primary { background: var(--menta); color: var(--text-on-accent); }
.ntf-btn--primary:hover { filter: brightness(1.05); transform: translateY(-1px); }

.ntf-tools { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex: 0 0 auto; }
.ntf-search {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--card); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-3);
  flex: 1 1 auto;
}
.ntf-search svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ntf-search input {
  flex: 1; border: none; background: transparent; outline: none;
  font-family: inherit; font-size: var(--t4); font-weight: 500; color: var(--ink);
}
.ntf-search input::placeholder { color: var(--ink-3); }

.ntf-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  background: var(--card); border-radius: var(--r-card);
  padding: var(--sp-2) var(--sp-4) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.ntf-list .ntf-item { background: var(--panel); }
.ntf-list .ntf-item:hover { background: var(--hover-soft); transform: translateX(3px); }


/* ---------- Fila compacta del Historial (pantalla completa) ---------- */
.ntf-row {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--panel); border-radius: var(--r-row);
  padding: var(--sp-3) var(--sp-3);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ntf-row:hover { transform: translateX(3px); box-shadow: var(--shadow-panel); }
.ntf-row.is-archived { opacity: 0.6; cursor: default; }
.ntf-row.is-archived:hover { transform: none; box-shadow: none; }
.ntf-row__icon {
  width: 2.375rem; height: 2.375rem; flex: 0 0 2.375rem;
  border-radius: 50%;
  display: grid; place-items: center;
}
.ntf-row__icon svg {
  width: 1.125rem; height: 1.125rem;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.ntf-row__body { flex: 1 1 auto; min-width: 0; }
.ntf-row__top { display: flex; align-items: center; gap: var(--sp-2); }
.ntf-row__title {
  font-size: 0.875rem; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.ntf-row.is-unread .ntf-row__title { font-weight: 700; }
.ntf-row__desc {
  font-size: var(--t4); font-weight: 500; color: var(--nav-ink); margin-top: var(--sp-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ntf-row__acts { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.ntf-row__time { font-size: var(--t5); font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.ntf-iconbtn {
  width: 1.625rem; height: 1.625rem; flex: 0 0 1.625rem;
  border: none; border-radius: 50%;
  background: transparent; color: var(--ink-3);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.ntf-iconbtn:hover { background: var(--card); color: var(--azul); }
body.dark-mode .ntf-iconbtn:hover { color: var(--celeste); }
.ntf-iconbtn svg { width: 0.9375rem; height: 0.9375rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ntf-dot { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; display: block; }
.ntf-dot--unread { background: var(--celeste); }
.ntf-dot--read { border: 1.5px solid var(--dashed); }

/* Scroll fino, como el diseño */
.haze-scroll::-webkit-scrollbar { width: 0.4375rem; }
.haze-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); }
.haze-scroll::-webkit-scrollbar-thumb:hover { background: var(--dashed); }
.haze-scroll::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 900px) {
  .ntf-pop { top: 4.375rem; right: 0.75rem; left: 0.75rem; width: auto; }
  .ntf-pop__arrow { display: none; }
  .ntf-tools { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════
   OT FORM — Sección de Órdenes de Trabajo
═══════════════════════════════════════════════════════════ */
.ot-form-section-header {
  font-size: var(--t5);
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-family: var(--font-family);
  padding: var(--sp-2) 0 var(--sp-1);
  border-top: 1px solid var(--line);
  margin: var(--sp-2) 0 0;
  grid-column: span 2;
}

.ot-form-section-header:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* ─── OT Stat strip ─────────────────────────────────────── */
.ot-stats {
  display: flex;
  gap: 2px;
  margin-bottom: var(--sp-4);
  background: var(--surf-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.ot-stat {
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  border-right: 1px solid var(--line);
}
.ot-stat:last-child { border-right: none; }
.ot-stat-label {
  font-size: var(--t6);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-3);
  font-family: var(--font-family);
}
.ot-stat-value {
  font-size: var(--t3);
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-mono);
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* flex-basis además de width: el sidebar es `flex: 0 0 262px` y sin esto
     el ancho no cambia (mismo motivo por el que fallaba el colapso). */
  .haze-sidebar { width: 13.75rem; flex-basis: 13.75rem; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .haze-sidebar { display: none; }
  /* El padding del panel vive en .main-content (contrato HAZE-BASE) */
  .main-content { padding: var(--sp-4) var(--sp-4) var(--sp-4); }
  .search-bar-container { width: 10rem; }
}

/* ═══════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
═══════════════════════════════════════════════════════════ */
.theme-toggle-btn {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border-light);
  background: transparent;
  border-radius: var(--r-pill);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  background: var(--surf-2);
  color: var(--text-primary);
  border-color: var(--border-color);
}
.theme-toggle-btn svg { width: 0.9375rem; height: 0.9375rem; }
/* Claro por defecto: se muestra la luna (ir a oscuro); en oscuro, el sol */
.icon-sun { display: none; }
.icon-moon { display: block; }
body.dark-mode .icon-moon { display: none; }
body.dark-mode .icon-sun { display: block; }

/* ── View container ─── */

/* ═══════════════════════════════════════════════════════════
   WORKORDERS KANBAN
═══════════════════════════════════════════════════════════ */
.ot-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); align-items: start; }
.ot-column { background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: var(--r-card); overflow: hidden; }
.ot-column-header {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.ot-column-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; }
.ot-column-title { font-size: var(--t6); font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-secondary); flex: 1; }
.ot-column-count { font-family: var(--font-mono); font-size: var(--t6); font-weight: 600; color: var(--text-muted); }
.ot-column-body { padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); min-height: 5rem; }

.ot-card {
  background: var(--panel-bg-2);
  border: 1px solid var(--border-color);
  border-radius: var(--r-pill);
  padding: var(--sp-3);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ot-card:hover { border-color: rgba(0,80,105,0.5); box-shadow: 0 0 0 1px rgba(0,80,105,0.12); }
.ot-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-1); }
.ot-card-code { font-family: var(--font-mono); font-size: var(--t6); color: var(--primary-color); font-weight: 600; }
.ot-card-priority {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 1px;
}
.ot-card-title { font-size: var(--t4); font-weight: 600; color: var(--text-primary); line-height: 1.4; margin-bottom: var(--sp-1); }
.ot-card-meta { font-size: var(--t6); font-weight: 600; color: var(--text-muted); margin-bottom: var(--sp-2); }
.ot-card-footer { display: flex; align-items: center; justify-content: space-between; }
.ot-card-avatar {
  width: 1.375rem; height: 1.375rem; border-radius: 50%;
  background: var(--primary-color); color: var(--ink);
  font-size: var(--t6); font-weight: 700; font-family: var(--font-display);
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0.5px;
}
.ot-column-empty { padding: var(--sp-5) var(--sp-4); text-align: center; font-size: var(--t5); font-weight: 500; color: var(--text-muted); }
@media (max-width: 900px) { .ot-kanban { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════
   WORKER CARDS COMPONENT
═══════════════════════════════════════════════════════════ */
.workers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.875rem, 1fr));
  gap: var(--sp-3);
}

.worker-tab {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--t5);
  font-weight: 500;
  font-family: var(--font-family);
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.2px;
}
.worker-tab:hover { background: var(--surf-1); color: var(--text-secondary); }
.worker-tab.active { background: var(--primary-color); color: var(--panel-bg); }

.worker-card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.worker-card:hover {
  border-color: rgba(0,80,105,0.5);
  box-shadow: 0 0 0 1px rgba(0,80,105,0.15);
}
.worker-card.inactive { opacity: 0.65; }

.worker-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.worker-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 1px;
  color: var(--ink);
  flex-shrink: 0;
}

.worker-meta { flex: 1; min-width: 0; }
.worker-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.worker-role {
  font-size: var(--t6); font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
}

.worker-badge-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
}
.worker-dni {
  font-size: var(--t6); font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.worker-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-color);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.worker-stat {
  background: var(--panel-bg-2);
  padding: var(--sp-2) var(--sp-2);
  text-align: center;
}
.ws-value {
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
  line-height: 1;
}
.ws-label {
  font-size: var(--t6);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-top: var(--sp-1);
}

.wl-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-1);
}
.wl-label {
  font-size: var(--t6);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.wl-pct {
  font-size: var(--t6);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--primary-color);
}
.wl-bar {
  height: 0.1875rem;
  background: var(--border-color);
  border-radius: 2px;
  overflow: hidden;
}
.wl-fill {
  height: 0.1875rem;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.worker-last {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border-color);
}
.worker-last-label {
  font-size: var(--t6);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.worker-last-val {
  font-size: var(--t6);
  color: var(--primary-color);
  font-family: var(--font-mono);
  font-weight: 600;
}

.worker-card-actions {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   MOVEMENTS SPLIT VIEW
═══════════════════════════════════════════════════════════ */
.movements-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}

.movements-col {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.movements-col-header {
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.movements-col-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--sp-1);
}
.movements-col-title {
  font-family: var(--font-display);
  font-size: var(--t3); font-weight: 800;
  letter-spacing: 2px;
  color: var(--text-primary);
  line-height: 1;
}
.movements-col-count {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1;
}
.movements-col-sub {
  font-size: var(--t6); font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.movements-col-body {
  max-height: min(30rem, 40vh);
  overflow-y: auto;
  flex: 1;
}

.movements-row {
  display: flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border-color);
  gap: var(--sp-2);
  transition: background 0.1s ease;
}
.movements-row:last-child { border-bottom: none; }
.movements-row:hover { background: var(--table-row-hover); }

.movements-row-ticket {
  font-family: var(--font-mono);
  font-size: var(--t6);
  color: var(--primary-color);
  font-weight: 600;
  width: 4.25rem;
  flex-shrink: 0;
}
.movements-row-info { flex: 1; min-width: 0; }
.movements-row-name {
  font-size: var(--t4);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.movements-row-sub {
  font-size: var(--t6); font-weight: 600;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.movements-row-right {
  text-align: right;
  flex-shrink: 0;
}
.movements-row-action { flex-shrink: 0; }

.movements-motivos {
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--border-color);
  background: var(--panel-bg-2);
}
.motivo-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.motivo-row:last-child { margin-bottom: 0; }
.motivo-label {
  font-size: var(--t6); font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-muted);
  width: 5rem;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.motivo-bar-wrap {
  flex: 1;
  height: 0.25rem;
  background: var(--border-color);
  border-radius: 2px;
  overflow: hidden;
}
.motivo-bar { height: 0.25rem; border-radius: 2px; transition: width 0.4s ease; }
.motivo-pct {
  font-size: var(--t6); font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  width: 2rem;
  text-align: right;
  flex-shrink: 0;
}

.movements-empty {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--t4); font-weight: 500;
}

@media (max-width: 900px) {
  .movements-split { grid-template-columns: minmax(0, 1fr); }
  .workers-grid { grid-template-columns: repeat(auto-fill, minmax(14.375rem, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════
   DATA TABLE — Alias variable-aware (usado en obras, quality, remitos)
═══════════════════════════════════════════════════════════ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  color: var(--table-text);
  font-size: var(--t4); font-weight: 500;
}
.data-table thead tr { background: var(--table-header-bg); }
.data-table thead th {
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-muted);
  font-size: var(--t6);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--table-border);
  white-space: nowrap;
  font-family: var(--font-family);
}
.data-table tbody tr {
  border-bottom: 1px solid var(--table-border);
  transition: background 0.15s ease;
}
.data-table tbody tr:nth-child(even) { background: var(--table-row-alt); }
.data-table tbody tr:hover { background: var(--table-row-hover); }
.data-table td {
  padding: var(--sp-3) var(--sp-4);
  color: var(--table-text);
  vertical-align: middle;
}
.data-table td .btn { font-size: var(--t6); font-weight: 600; padding: var(--sp-1) var(--sp-2); }

/* ═══════════════════════════════════════════════════════════
   STAT CARD — Tarjeta de KPI compacta
═══════════════════════════════════════════════════════════ */
.stat-card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--r-pill);
  padding: var(--sp-4) var(--sp-4);
}
.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
  line-height: 1;
}
.stat-label {
  font-size: var(--t5);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-muted);
  font-family: var(--font-family);
  margin-top: var(--sp-1);
}

/* ═══════════════════════════════════════════════════════════
   OBRA TAB / MKT TAB — Tabs de filtro (obras, quality, marketing)
═══════════════════════════════════════════════════════════ */
.obra-tab,
.mkt-tab {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--t5);
  font-weight: 500;
  font-family: var(--font-family);
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.2px;
}
.obra-tab:hover,
.mkt-tab:hover { background: var(--surf-1); color: var(--text-secondary); }
.obra-tab.active,
.mkt-tab.active { background: var(--primary-color); color: var(--panel-bg); }

/* Form controls */

/* Buttons */

/* Tabs */

/* Modal box */

/* Dividers */

/* Table wrapper */

/* Stat card */

/* Haze alert */

/* ── Remito tab (igual que .obra-tab / .mkt-tab) ─── */
.remito-tab {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--t5);
  font-weight: 500;
  font-family: var(--font-family);
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.2px;
}
.remito-tab:hover { background: var(--surf-1); color: var(--text-secondary); }
.remito-tab.active { background: var(--primary-color); color: var(--panel-bg); }

/* ═══════════════════════════════════════════════════════════
   TAB PILLS — Obras / Calidad / Marketing
═══════════════════════════════════════════════════════════ */
.mkt-tab, .obra-tab {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--t4);
  font-weight: 500;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  letter-spacing: 0.1px;
}
.mkt-tab:hover, .obra-tab:hover {
  background: var(--surf-2);
  color: var(--text-primary);
}
.mkt-tab.active, .obra-tab.active {
  background: var(--card);
  color: var(--ink);
  border-color: var(--dashed);
}

/* ═══════════════════════════════════════════════════════════
   STAT CARD — usado en Obras, Calidad, etc.
═══════════════════════════════════════════════════════════ */
.stat-card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--r-card);
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
}
.stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
  line-height: 1;
  margin-bottom: var(--sp-1);
}
.stat-card .stat-label {
  font-size: var(--t6);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  font-family: var(--font-family);
}


/* ═══════════════════════════════════════════════════════════════════════
   CALENDARIO OPERATIVO (adaptación del calendario HAZE-BASE al tema Pañol)
   ═══════════════════════════════════════════════════════════════════════ */

/* El calendario llena el panel (no una altura calculada a mano, que era lo que
   lo dejaba corto o estirado según la pantalla). */
.fc { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* .panel--cal de HAZE-BASE: menos padding arriba para subir el mes, y la barra
   global del sistema no se muestra en esta ruta. */
body[data-route="calendar"] .main-content { padding-top: var(--sp-5); }

/* Filtros por categoría */
.fc-filtros { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.fc-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: inherit; font-size: var(--t5); font-weight: 600;
  padding: var(--sp-1) var(--sp-3); border-radius: 999px; cursor: pointer;
  background: var(--panel-bg); color: var(--text-secondary);
  border: 1px solid var(--border-color);
  opacity: 0.45; transition: opacity .18s ease, border-color .18s ease;
}
.fc-chip.is-on { opacity: 1; border-color: var(--cal-c, var(--border-color)); color: var(--text-primary); }
.fc-chip__dot { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--cal-c, var(--text-muted)); flex: none; }
.fc-chip__n { font-size: var(--t6); font-weight: 700; color: var(--text-muted); background: var(--panel-bg-2); border-radius: 999px; padding: 1px var(--sp-2); }

/* Colores por categoría (variable --cal-c por clase) */
.fc-chip--ot, .fc-event--ot, .ev-tag--ot, .fc-rail--ot                             { --cal-c: var(--azul); }
.fc-chip--gi, .fc-event--gi, .ev-tag--gi, .fc-rail--gi                             { --cal-c: #3b82f6; }
.fc-chip--obra, .fc-event--obra, .ev-tag--obra, .fc-rail--obra                     { --cal-c: #10b981; }
.fc-chip--vehiculo, .fc-event--vehiculo, .ev-tag--vehiculo, .fc-rail--vehiculo     { --cal-c: #e05252; }
.fc-chip--maquinaria, .fc-event--maquinaria, .ev-tag--maquinaria, .fc-rail--maquinaria { --cal-c: #8b5cf6; }
.fc-chip--manual, .fc-event--manual, .ev-tag--manual, .fc-rail--manual             { --cal-c: #38bdf8; }

/* Cabecera del calendario */
/* ---------- Barra del calendario (valores exactos de calendario.css) ----------
   El mes va grande a la izquierda; a la derecha SOLO logo, selector de vista,
   Hoy y las dos flechas. En esta ruta reemplaza a la barra global del sistema. */
.fc__bar { display: flex; align-items: center; gap: var(--sp-4); margin: 2px 0 var(--sp-4); }
.fc__title {
  margin: 0; font-size: 1.875rem; font-weight: 800; letter-spacing: -1px;
  line-height: 1.1; color: var(--ink); text-transform: capitalize;
}
.fc__tools { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.fc-menu { position: relative; }
.fc-menu__pop {
  position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: var(--z-popover);
  min-width: 11.875rem; padding: var(--sp-1);
  background: var(--panel); border-radius: var(--r-card);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-overlay);
  display: none; flex-direction: column; gap: 2px;
  animation: rowIn 0.16s var(--ease-active) both;
}
body.dark-mode .fc-menu__pop { box-shadow: var(--shadow-overlay); }
.fc-menu.is-open .fc-menu__pop { display: flex; }

/* Logo-botón + panel de cuenta */
.fc-acct__btn {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; padding: 0;
  display: grid; place-items: center; background: var(--avbg);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.fc-acct__btn:hover { filter: brightness(1.04); transform: translateY(-1px); }
.fc-acct__btn img { width: 1.25rem; height: 1.25rem; object-fit: contain; }
body.dark-mode .fc-acct__btn img,
body.dark-mode .fc-acct__ava img { filter: brightness(0) invert(1); }
.fc-acct__pop { min-width: 14.625rem; }
.fc-acct__card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-3); }
.fc-acct__ava { width: 2.375rem; height: 2.375rem; flex: 0 0 2.375rem; border-radius: 50%; background: var(--avbg); display: grid; place-items: center; }
.fc-acct__ava img { width: 1.375rem; height: 1.375rem; object-fit: contain; }
.fc-acct__meta { display: flex; flex-direction: column; min-width: 0; }
.fc-acct__name { font-size: 0.875rem; font-weight: 800; color: var(--ink); }
.fc-acct__role { font-size: var(--t5); font-weight: 500; color: var(--ink-3); margin-top: 1px; }
.fc-acct__row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill);
  font-size: var(--t4); font-weight: 600; color: var(--nav-ink); text-align: left;
  transition: background 0.18s ease, color 0.18s ease;
}
.fc-acct__row:hover { background: var(--hover-soft); color: var(--ink); }
.fc-acct__row svg { width: 1.0625rem; height: 1.0625rem; flex: 0 0 1.0625rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fc-acct__row--danger { color: var(--status-red); }
.fc-acct__row--danger:hover { background: rgba(226, 75, 74, 0.1); color: var(--status-red); }
.fc-acct__sep { height: 1.5px; background: var(--line); margin: var(--sp-1) var(--sp-1); }
.fc-ic { display: inline-flex; }
.fc-ic--sun, .fc-lbl--light { display: none; }
body.dark-mode .fc-ic--moon, body.dark-mode .fc-lbl--dark { display: none; }
body.dark-mode .fc-ic--sun { display: inline-flex; }
body.dark-mode .fc-lbl--light { display: inline; }

/* Selector de vista (Día / Mes / Semana) */
.fc-vw__btn {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--t4); font-weight: 700; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink);
  transition: background 0.2s ease;
}
.fc-vw__btn:hover { background: var(--hover-soft); }
.fc-vw__btn svg { width: 0.9375rem; height: 0.9375rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.fc-vw.is-open .fc-vw__btn svg { transform: rotate(180deg); }
.fc-vw__pop { min-width: 10.5rem; }
.fc-vw__opt {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill);
  font-size: var(--t4); font-weight: 600; color: var(--nav-ink); text-align: left;
  transition: background 0.18s ease, color 0.18s ease;
}
.fc-vw__opt:hover { background: var(--hover-soft); color: var(--ink); }
.fc-vw__opt.is-active { background: var(--menta); color: var(--text-on-accent); font-weight: 700; }

/* Botón Hoy + flechas */
.fc__today {
  font-size: var(--t4); font-weight: 700; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  background: var(--card); color: var(--nav-ink);
  transition: background 0.2s ease, color 0.2s ease;
}
.fc__today:hover { background: var(--hover-soft); color: var(--ink); }
.fc__navbtn {
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--card); color: var(--nav-ink);
  transition: background 0.2s ease, color 0.2s ease;
}
.fc__navbtn:hover { background: var(--hover-soft); color: var(--ink); }
.fc__navbtn svg { width: 1.0625rem; height: 1.0625rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Encabezado días de semana */
.fc__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); }
.fc__weekdays span {
  padding: var(--sp-2) var(--sp-2) var(--sp-3); text-align: center;
  font-size: var(--t5); font-weight: 700; color: var(--ink-3); text-transform: capitalize;
}

/* Grilla del mes */
.fc__grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr);
  border-left: 1.5px solid var(--line); border-top: 1.5px solid var(--line);
  border-radius: var(--r-tile); overflow: hidden;
}
.fc-cell {
  position: relative;
  border-right: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line);
  padding: var(--sp-2) var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1);
  min-height: 0; overflow: hidden; background: var(--panel); text-align: left;
  transition: background 0.15s ease;
}
.fc-cell:hover { background: rgba(0, 135, 175, 0.07); cursor: pointer; }
.fc-cell.is-other { background: var(--card); }
.fc-cell.is-other .fc-cell__num { color: var(--ink-3); }
.fc-cell__num {
  align-self: flex-end; min-width: 1.625rem; height: 1.625rem; padding: 0 var(--sp-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 600; color: var(--ink);
}
.fc-cell.is-today .fc-cell__num { background: var(--azul-hi); color: #FFFFFF; border-radius: 999px; padding: 0; width: 1.625rem; }
.fc-cell__add {
  position: absolute; top: 0.375rem; left: 0.4375rem; width: 1.25rem; height: 1.25rem; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--card); color: var(--ink-3);
  opacity: 0; transition: opacity 0.15s ease, background 0.2s ease, color 0.2s ease;
  pointer-events: none;
}
.fc-cell:hover .fc-cell__add { opacity: 1; pointer-events: auto; }
.fc-cell__add svg { width: 0.8125rem; height: 0.8125rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.fc-events { display: flex; flex-direction: column; gap: var(--sp-1); overflow: hidden; }
/* Chip sólido como el original. Urbalimp tiene 6 categorías (HAZE-BASE 3), así
   que el color de relleno lo aporta la categoría; forma, tipografía y truncado
   son los del original. */
.fc-event {
  text-align: left; width: 100%;
  font-size: var(--t4); font-weight: 600; line-height: 1.3;
  padding: var(--sp-1) var(--sp-2); border: none; border-radius: var(--r-pill);
  background: var(--cal-c); color: #FFFFFF;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: filter 0.2s ease;
}
.fc-event--obra { color: var(--text-on-accent); }
.fc-event:hover { filter: brightness(1.05); }
.fc-more { text-align: left; font-size: var(--t6); font-weight: 600; color: var(--ink-3); padding: 1px var(--sp-1); background: none; border: none; cursor: pointer; }
.fc-more:hover { color: var(--celeste); }

/* Popup flotante (crear / editar / detalle) */
.ev-pop {
  position: fixed; z-index: var(--z-modal);
  width: 22.5rem; max-width: calc(100vw - 1.5rem); max-height: calc(100vh - 1.5rem);
  overflow-y: auto;
  background: var(--panel-bg-2); border: 1px solid var(--border-color); border-radius: var(--r-card);
  box-shadow: var(--shadow-overlay);
  padding: var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3);
}
.ev-pop__head { display: flex; align-items: center; gap: var(--sp-2); cursor: grab; user-select: none; touch-action: none; }
.ev-pop.is-dragging, .ev-pop.is-dragging .ev-pop__head { cursor: grabbing; }
.ev-pop__title { font-size: var(--t2); font-weight: 800; letter-spacing: -0.3px; color: var(--text-primary); }
.ev-pop__grip { margin-left: auto; display: grid; place-items: center; color: var(--text-muted); }
.ev-pop__grip svg { width: 0.9375rem; height: 0.9375rem; fill: currentColor; }
.ev-pop__close { width: 1.625rem; height: 1.625rem; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; background: var(--panel-bg); color: var(--text-secondary); transition: background .18s ease; }
.ev-pop__close:hover { background: var(--panel-bg-3); }
.ev-pop__close svg { width: 0.8125rem; height: 0.8125rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ev-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.ev-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.ev-label { font-size: var(--t5); font-weight: 600; color: var(--text-secondary); }
.ev-input, .ev-textarea {
  font-family: inherit; font-size: var(--t4); font-weight: 500; color: var(--text-primary);
  background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-3); outline: none; transition: border-color .18s ease;
}
.ev-input:focus, .ev-textarea:focus { border-color: var(--primary-color); }
.ev-textarea { resize: vertical; min-height: 3.75rem; }
.ev-switchrow { display: flex; align-items: center; gap: var(--sp-3); padding: 2px 0; }
.ev-switchrow__title { flex: 1; font-size: var(--t4); font-weight: 600; color: var(--text-primary); }
.ev-switch { position: relative; width: 2.5rem; height: 1.375rem; flex: 0 0 2.5rem; }
.ev-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ev-switch__track { position: absolute; inset: 0; border-radius: 999px; background: var(--panel-bg); border: 1px solid var(--border-color); transition: background .2s ease; pointer-events: none; }
.ev-switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; border-radius: 50%; background: var(--text-secondary); transition: transform .2s ease, background .2s ease; }
.ev-switch input:checked + .ev-switch__track { background: var(--primary-dim); }
.ev-switch input:checked + .ev-switch__track::after { transform: translateX(18px); background: var(--primary-color); }
.ev-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-1); }
.ev-btn { font-family: inherit; font-size: var(--t5); font-weight: 700; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; transition: background .18s ease, color .18s ease; }
.ev-btn--ghost { background: var(--panel-bg); color: var(--text-secondary); border-color: var(--border-color); }
.ev-btn--ghost:hover { background: var(--panel-bg-3); color: var(--text-primary); }
.ev-btn--primary { background: var(--primary-color); color: var(--bg-color); }
.ev-btn--primary:hover { filter: brightness(0.92); }
.ev-btn--del { margin-right: auto; background: transparent; color: var(--status-red); }
.ev-btn--del:hover { background: rgba(224, 82, 82, 0.12); }
.ev-hide { display: none; }
.fc-event--block { white-space: normal; line-height: 1.4; padding: var(--sp-2) var(--sp-2); }

/* Detalle de evento automático */
.ev-detail { display: flex; flex-direction: column; gap: var(--sp-2); }
.ev-detail__desc { font-size: var(--t4); font-weight: 700; line-height: 1.45; color: var(--text-primary); }
.ev-tag { display: inline-flex; align-items: center; gap: var(--sp-2); align-self: flex-start; font-size: var(--t6); font-weight: 700; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); background: color-mix(in srgb, var(--cal-c) 16%, transparent); color: var(--cal-c); }
.ev-tag .fc-chip__dot { background: var(--cal-c); }
.ev-kv { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--t4); font-weight: 500; }
.ev-kv span { color: var(--text-muted); flex: none; }
.ev-kv strong { color: var(--text-primary); font-weight: 600; text-align: right; word-break: break-word; }

/* Vista SEMANA */
.fc__week { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr); border-left: 1px solid var(--border-color); border-top: 1px solid var(--border-color); border-radius: var(--r-pill); overflow: hidden; }
.fc-wk-col { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); background: var(--panel-bg); }
.fc-wk-col.is-today { background: var(--primary-dim); }
.fc-wk-head { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-2) var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--border-color); }
.fc-wk-day { font-size: var(--t6); font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.fc-wk-num { font-size: var(--t2); font-weight: 800; color: var(--text-primary); width: 1.75rem; height: 1.75rem; display: grid; place-items: center; }
.fc-wk-col.is-today .fc-wk-num { background: var(--primary-color); color: var(--bg-color); border-radius: 50%; }
.fc-wk-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-2) var(--sp-1); display: flex; flex-direction: column; gap: var(--sp-1); }
.fc-wk-ev { font-family: inherit; text-align: left; border: none; border-left: 3px solid var(--cal-c); border-radius: 5px; cursor: pointer; padding: var(--sp-1) var(--sp-2); font-size: var(--t6); font-weight: 600; line-height: 1.3; display: flex; flex-direction: column; gap: 1px; background: color-mix(in srgb, var(--cal-c) 16%, transparent); color: var(--text-primary); transition: filter .15s ease; }
.fc-wk-ev:hover { filter: brightness(1.25); }
.fc-wk-ev__t { font-size: var(--t6); font-weight: 700; opacity: 0.75; }
.fc-wk-ev__x { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-wk-add { font-family: inherit; margin: 0 var(--sp-1) var(--sp-2); font-size: var(--t6); font-weight: 700; color: var(--text-muted); padding: var(--sp-1); border-radius: var(--r-pill); border: 1px dashed var(--border-color); background: none; cursor: pointer; transition: border-color .18s ease, color .18s ease; }
.fc-wk-add:hover { border-color: var(--text-secondary); color: var(--text-primary); }

/* Vista DÍA */
.fc__day { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: var(--r-pill); overflow: hidden; }
.fc-day-head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-4); border-bottom: 1px solid var(--border-color); background: var(--panel-bg-2); }
.fc-day-head.is-today { background: var(--primary-dim); }
.fc-day-head__date { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
.fc-day-head__dow { font-size: 0.875rem; font-weight: 700; color: var(--text-secondary); }
.fc-day-head__num { font-size: 1.875rem; font-weight: 800; letter-spacing: -1px; color: var(--text-primary); }
.fc-day-add { font-family: inherit; margin-left: auto; flex: none; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t4); font-weight: 700; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); border: none; cursor: pointer; background: var(--primary-color); color: var(--bg-color); transition: filter .18s ease; }
.fc-day-add:hover { filter: brightness(0.92); }
.fc-day-add svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.fc-day-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); background: var(--panel-bg); }
.fc-day-ev { font-family: inherit; display: flex; align-items: stretch; gap: var(--sp-3); text-align: left; padding: var(--sp-3) var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--border-color); background: var(--panel-bg-2); cursor: pointer; transition: transform .15s ease, background .18s ease; }
.fc-day-ev:hover { transform: translateX(3px); background: var(--panel-bg-3); }
.fc-day-ev__rail { width: 0.25rem; flex: 0 0 0.25rem; border-radius: 3px; background: var(--cal-c, var(--text-muted)); }
.fc-day-ev__time { flex: 0 0 6.75rem; font-size: var(--t5); font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
.fc-day-ev__box { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fc-day-ev__title { font-size: var(--t4); font-weight: 700; color: var(--text-primary); }
.fc-day-ev__loc { font-size: var(--t5); font-weight: 500; color: var(--text-muted); }
.fc-day-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); text-align: center; padding: 2.5rem var(--sp-4); }
.fc-day-empty__mark { width: 2.625rem; height: 2.625rem; border-radius: var(--r-row); display: grid; place-items: center; background: var(--panel-bg-2); color: var(--text-muted); margin-bottom: var(--sp-1); }
.fc-day-empty__mark svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fc-day-empty__t { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); }
.fc-day-empty__s { font-size: var(--t4); font-weight: 500; color: var(--text-muted); }

@media (max-width: 900px) {
  .ev-row2 { grid-template-columns: 1fr; }
  .fc { height: auto; min-height: 30rem; }
}


/* ═══════════════════════════════════════════════════════════
   MÓDULO FINANZAS — port de HAZE-BASE (finanzas.css)
   Global (los modales/menús fmodal/fmenu se montan en <body>).
   Única adaptación: .fitems→.fin-items (colisión con presupuestos)
   y tema oscuro via body.dark-mode.
═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   HAZE FINANZAS — estilos del módulo
   Traducción EXACTA de finanzas/Finanzas Haze.dc.html (Claude Design)
   a clases CSP-safe sobre los tokens del sistema (light/dark).
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Tokens locales del módulo ---------- */
:root {
  --fin-pos: #0B3C4D;   /* importes que entran */
  --fin-neg: #005069;   /* importes que salen */
}
body.dark-mode {
  --fin-pos: #A1E1BC;
  --fin-neg: #66B7CF;
}

/* ---------- Subnav Finanzas (píldora deslizante) ---------- */
.nav__group--fin[data-open="true"] > .nav__item--trigger { font-weight: 700; }
.nav__sub--fin { position: relative; }
.nav__pill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2.0625rem;
  background: var(--menta);
  border-radius: var(--r-pill);
  transform: translateY(0);
  transition: transform 0.35s var(--ease-active), height 0.2s ease;
  pointer-events: none;
  z-index: 0;
}
.nav__sub--fin .nav__subitem { position: relative; z-index: 1; }
.nav__sub--fin .nav__subitem.is-active { background: transparent; color: var(--text-on-accent); font-weight: 700; }

/* ---------- Pantallas ---------- */
/* En HAZE-BASE las .fin-screen son hijas directas de `.panel`; acá la SPA
   necesita un wrapper, que debe reenviar el mismo contrato de altura. */
.hz-fin { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fin-screen { display: none; flex: 1; min-height: 0; flex-direction: column; }
.fin-screen.is-active { display: flex; animation: finFade 0.25s ease; }
@keyframes finFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Encabezados ---------- */
/* Finanzas usa la misma cabecera que el resto: un solo tamaño de título en
   todo el sistema (T1 = 26px), no uno propio. */
.fin-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin: 0 0 var(--sp-4); }
.fin-title { margin: 0; font-size: var(--t1); font-weight: 800; letter-spacing: -0.4px; line-height: 1.15; }
.fin-title--panel { margin: 0 0 var(--sp-4); }
.fin-actions { display: flex; gap: var(--sp-2); align-items: center; }

/* ---------- Botones ---------- */
.fbtn {
  background: var(--menta);
  color: var(--text-on-accent);
  font-size: var(--t4);
  font-weight: 700;
  font-family: inherit;
  padding: var(--sp-2) var(--sp-4);
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.fbtn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.fbtn--sm { font-size: var(--t4); font-weight: 600; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); }
.fbtn--sm:hover { transform: none; }
.fbtn--ghost {
  background: var(--panel);
  border: 1.5px solid var(--line);
  color: var(--nav-ink);
  font-size: var(--t4);
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.fbtn--ghost:hover { border-color: var(--celeste); color: var(--azul-soft-text); filter: none; transform: none; }
.fbtn--dashed {
  background: transparent;
  border: 2px dashed var(--dashed);
  color: var(--ink-muted);
  font-size: var(--t6);
  font-weight: 600;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.fbtn--dashed:hover { border-color: var(--celeste); color: var(--azul-soft-text); filter: none; transform: none; }

/* Selector (Conciliación) */
.fsel {
  background: var(--card);
  color: var(--nav-ink);
  font-size: var(--t4);
  font-weight: 600;
  font-family: inherit;
  padding: var(--sp-2) var(--sp-3);
  border: none;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
}
.fsel svg { width: 0.8125rem; height: 0.8125rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }

/* ---------- Segmented (Me deben / Debo) ---------- */
.fseg { background: var(--card); border-radius: var(--r-pill); padding: var(--sp-1); display: flex; gap: 2px; }
.fseg__btn {
  background: transparent;
  border: none;
  color: var(--nav-ink);
  font-size: var(--t4);
  font-weight: 500;
  font-family: inherit;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.2s ease;
}
.fseg__btn:hover:not(.is-active) { background: var(--hover-accent); }
.fseg__btn.is-active { background: var(--menta); color: var(--text-on-accent); font-weight: 700; }

/* ---------- Chips de filtro ---------- */
.fchips { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.fchip {
  background: var(--card);
  border: none;
  color: var(--nav-ink);
  font-size: var(--t5);
  font-weight: 500;
  font-family: inherit;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  transition: background 0.2s ease;
}
.fchip:hover:not(.is-active) { background: var(--hover-accent); }
.fchip.is-active { background: var(--menta); color: var(--text-on-accent); font-weight: 700; }
.fchip--lg { padding: var(--sp-2) var(--sp-3); }
.fchip svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
/* Dentro de una card gris, los chips inactivos son blancos */
.fin-card .fchip:not(.is-active),
.ftable .fchip:not(.is-active) { background: var(--row); }
.fin-card .fchip:hover:not(.is-active),
.ftable .fchip:hover:not(.is-active) { background: var(--hover-accent); }

/* ---------- KPIs ---------- */
.fkpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); }
.fkpi {
  background: var(--card);
  border-radius: var(--r-card);
  padding: var(--sp-4) var(--sp-4);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s ease;
}
.fkpi:hover { transform: translateY(-3px); }
.fkpi__label { font-size: var(--t4); font-weight: 500; color: var(--ink-3); margin-bottom: var(--sp-2); }
.fkpi__row { display: flex; align-items: center; gap: var(--sp-2); }
.fkpi__value { font-size: var(--t3); font-weight: 800; letter-spacing: -0.5px; white-space: nowrap; }
.fkpi__value--danger { color: var(--fin-neg); }
.fkpi__badge { font-size: var(--t5); font-weight: 700; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); }
.fkpi__badge--danger { background: var(--azul-hi); color: #FFFFFF; }
.fkpi__badge--info { background: rgba(0, 135, 175, 0.3); color: var(--azul-soft-text); }
.fkpi__badge--ok { background: var(--menta); color: var(--text-on-accent); }

/* ---------- Grilla del panel ---------- */
.fin-panelgrid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

/* ---------- Cards genéricas ---------- */
.fin-card {
  background: var(--card);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  transition: background 0.3s ease;
}
.fin-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); }
/* En Configuración la card CRECE con su contenido y no recorta. Se descartó
   ponerle techo al cuerpo con scroll propio: las listas de esta pantalla mezclan
   renglones de dos alturas (etiquetas de 28 px y filas de lista de 36), así que
   cualquier techo fijo termina cortando media fila en alguna de las dos —que es
   justo lo que había que sacar—. La pantalla entera ya se desplaza dentro de
   `.fconfig`, así que crecer no empuja la página. */
.fconfig .fin-card { overflow: visible; min-height: 12.5rem; }
.fconfig .card__body { min-height: 0; }
.fin-card__head--tight { margin-bottom: var(--sp-3); }
.fin-card__title { font-size: var(--t4); font-weight: 500; color: var(--ink-3); }
.fin-card__link { font-size: var(--t4); font-weight: 500; color: var(--ink-3); text-decoration: none; background: none; border: none; font-family: inherit; cursor: pointer; padding: 0; }
.fin-card__link:hover { color: var(--azul-soft-text); }
.fin-card__foot { margin-top: auto; padding-top: var(--sp-3); font-size: var(--t4); font-weight: 500; color: var(--ink-3); }
.fin-card__foot--split { display: flex; justify-content: space-between; }
.fin-card__foot strong { font-weight: 700; color: var(--ink); }
.fin-card__foot strong.is-neg { color: var(--fin-neg); }
.fin-card--disabled { opacity: 0.6; }
.fnote { margin: 0; font-size: var(--t4); font-weight: 500; color: var(--ink-muted); line-height: 1.5; }

/* ---------- Gráfico Entró vs salió ---------- */
.fin-legend { display: flex; gap: var(--sp-3); font-size: var(--t6); font-weight: 600; color: var(--ink-3); align-items: center; }
.fin-legend > span { display: flex; gap: var(--sp-1); align-items: center; }
.fin-legend .dot { width: 0.5rem; height: 0.5rem; border-radius: 3px; }
.dot--in  { background: var(--celeste); }
.dot--out { background: var(--azul-hi); }
/* Contenedor del gráfico del panel. Lo puebla HAZE.chart (fit-to-width):
   toma el alto natural del componente, sin estirar la tarjeta. */
#finChart { width: 100%; }
/* Envoltorio de los gráficos de reportes y antigüedad (espaciado). */
.fin-chart-box { position: relative; width: 100%; margin: 0.25rem 0 var(--hz-gap-secc); }
/* El punto "dona" de la línea de neto se rellena con --haze-surface para
   fundirse con el fondo real detrás del gráfico. Acá el fondo real es
   --card (fin-card/fin-chart-box), no --panel (default del componente). */
.fin-card, .fin-chart-box { --haze-surface: var(--card); }

/* ---------- Listas de items (atención / movimientos / conciliación) ---------- */
.fin-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.fin-item {
  background: var(--row);
  border-radius: var(--r-row);
  padding: var(--sp-3) var(--sp-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  transition: transform 0.2s ease, background 0.3s ease;
}
.fin-item--click { cursor: pointer; }
.fin-item--click:hover { transform: translateX(3px); }
.fin-item--match { outline: 1.5px solid var(--celeste); }
.fin-item--mov { padding: var(--sp-2) var(--sp-3); }
.fin-item__name { font-size: var(--t4); font-weight: 600; }
.fin-item__sub { font-size: var(--t5); font-weight: 500; color: var(--ink-3); }
.fin-item--mov .fin-item__name { font-size: var(--t4); font-weight: 500; }
.fin-item--mov .fin-item__sub { font-size: var(--t6); font-weight: 600; }
.fin-amount { font-size: var(--t4); font-weight: 700; white-space: nowrap; }
.fin-amount--pos { color: var(--fin-pos); }
.fin-amount--neg { color: var(--fin-neg); }

/* ---------- Badges de estado ---------- */
.fbadge { font-size: var(--t6); font-weight: 600; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); white-space: nowrap; }
.fbadge--danger { background: var(--azul-hi); color: #FFFFFF; }
.fbadge--info { background: rgba(0, 135, 175, 0.3); color: var(--azul-soft-text); font-weight: 700; }
.fbadge--ok { background: var(--menta); color: var(--text-on-accent); }
.ftag { font-size: var(--t5); font-weight: 700; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); white-space: nowrap; }
.ftag--in { background: var(--menta); color: var(--text-on-accent); }
.ftag--out { background: var(--status-blue-bg); color: var(--azul-soft-text); }
.ftag--sm { font-size: var(--t6); font-weight: 600; padding: var(--sp-1) var(--sp-2); }

/* ---------- Tablas (grid) ---------- */
.ftable {
  background: var(--card);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background 0.3s ease;
}
/* ── Cuentas por cobrar / por pagar: tabla real (R-19) ──────────────────
   table-layout:fixed + colgroup: el ancho lo decide la columna, nunca el
   contenido. Antes eran grillas de divs y un badge largo ("Vencida hace 21
   días") empujaba y pisaba la columna de al lado. */
.ui .ftabla { table-layout: fixed; }
/* Las tablas de Finanzas que no declaran tamaño heredaban el de la raíz
   (1rem) en vez del T4 del cuerpo. */
.fin-screen table:not(.table) th,
.fin-screen table:not(.table) td,
.fin-screen table caption { font-size: var(--t4); font-weight: 500; }
.ui .ftabla .fcol-dot    { width: 1.5rem; }
.ui .ftabla .fcol-fecha  { width: 6.5rem; }
.ui .ftabla .fcol-doc    { width: 14.25rem; }
.ui .ftabla .fcol-num    { width: 7.5rem; }
.ui .ftabla .fcol-estado { width: 10rem; }
.ui .ftabla .fcol-acc    { width: 5rem; }
/* Con table-layout:fixed la celda NO recorta sola: el contenido se sale y se
   monta sobre la columna siguiente. Pasaba con el número de comprobante más
   el chip "Cta. Cte." (se montaba sobre el proveedor) y con el botón
   Cobrar/Pagar (se montaba sobre el badge de estado). El ancho de arriba ya
   alcanza para el caso largo; esto es el cinturón de seguridad. */
.ui .ftabla td { overflow: hidden; }
/* Ni la fecha ni el número de comprobante ni el importe envuelven. */
.ui .ftabla td.c-date,
.ui .ftabla td.c-num { white-space: nowrap; }
.ui .ftabla td.c-num { font-variant-numeric: tabular-nums; }
.ui .ftabla td.c-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui .ftabla .c-doc { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; }
.ui .ftabla td.c-estado .badge { max-width: 100%; }
.ui .ftabla td.fempty { text-align: center; color: var(--ink-muted); padding: var(--sp-5) var(--sp-4); }
/* La tabla se desplaza dentro de su caja, sin empujar la página. */
.ui .ftable > .table-wrap { max-height: none; }

.frow { display: grid; gap: var(--sp-3); align-items: center; }
.frow--cobrar { grid-template-columns: 0.875rem 5.75rem 9.375rem 1fr 6.875rem 6.875rem 6.875rem 6.25rem 10.625rem; }
.frow--pagar  { grid-template-columns: 0.875rem 5.75rem 9.375rem 1fr 7.5rem 6.25rem 10rem; }
.frow--mov    { grid-template-columns: 5rem 1fr 9.375rem 8.75rem 8.125rem; }
.ftable__head {
  padding: 0 var(--sp-4) var(--sp-3);
  font-size: var(--t6);
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ftable__head .r { text-align: right; }
.ftable__body { display: flex; flex-direction: column; gap: var(--sp-2); overflow-y: auto; min-height: 0; }
.ftable__row {
  background: var(--row);
  border-radius: var(--r-row);
  padding: var(--sp-3) var(--sp-4);
  transition: transform 0.2s ease, background 0.3s ease;
}
.ftable__row:hover { transform: translateX(3px); }
.ftable__row--mov { padding: var(--sp-3) var(--sp-4); }
.ftable__row--mov:hover { transform: none; }
.ftable__row--done { opacity: 0.65; }
.ftable__foot {
  margin-top: auto;
  padding-top: var(--sp-3);
  display: flex;
  justify-content: space-between;
  font-size: var(--t4); font-weight: 500;
  color: var(--ink-3);
}
.ftable__foot strong { font-weight: 700; color: var(--ink); }

/* Celdas */
.c-dot { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; }
.c-dot--danger { background: var(--azul-hi); }
.c-dot--info { background: var(--celeste); }
.c-dot--ok { background: var(--menta); }
.c-date { font-size: var(--t4); font-weight: 500; color: var(--nav-ink); }
.c-doc { font-size: var(--t4); font-weight: 600; display: flex; align-items: center; gap: var(--sp-1); }
.c-doc svg { width: 0.8125rem; height: 0.8125rem; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.c-name { font-size: 0.875rem; font-weight: 600; }
.c-num { font-size: var(--t4); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.c-num--muted { color: var(--ink-3); }
.c-num--strong { font-weight: 700; }
.c-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; align-items: center; }
.c-cell { font-size: var(--t4); font-weight: 600; }
.c-acct { font-size: var(--t5); font-weight: 500; color: var(--ink-3); }
.c-mov-amount { font-size: var(--t4); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.c-mov-amount--pos { color: var(--fin-pos); }
.c-mov-amount--neg { color: var(--fin-neg); }
.c-mov-amount--muted { color: var(--ink-3); }

/* ---------- Vencimientos de la semana (Pagar) ---------- */
.fweek {
  background: var(--card);
  border-radius: var(--r-card);
  padding: var(--sp-4) var(--sp-4);
  margin-bottom: var(--sp-3);
  transition: background 0.3s ease;
}
.fweek__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-3); }
.fweek__title { font-size: var(--t4); font-weight: 500; color: var(--ink-3); }
.fweek__meta { font-size: var(--t4); font-weight: 500; color: var(--ink-3); }
.fweek__meta strong { font-weight: 700; color: var(--ink); }
.fweek__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-2); }
.fday { background: var(--row); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-3); transition: background 0.3s ease; }
.fday__label { font-size: var(--t6); font-weight: 600; color: var(--ink-3); }
.fday__amount { font-size: var(--t4); font-weight: 700; margin-top: var(--sp-1); }
.fday__amount--empty { color: var(--dashed); }
.fday--today { background: var(--azul-hi); }
.fday--today .fday__label { color: rgba(255, 255, 255, 0.75); }
.fday--today .fday__amount { color: #FFFFFF; }

/* ═══════════════════════════════════════════════════════════
   CAJA Y BANCOS (23/09/2026)
   Izquierda: la tarjeta de la cuenta elegida y las cuentas agrupadas por
   tipo con su total. Derecha: los movimientos. Reemplaza a la tira de
   cuatro tarjetas .facct, que con más de cuatro cuentas se iba de la fila.
═══════════════════════════════════════════════════════════ */
.fin-head--caja { align-items: flex-start; }
.fcaja-head { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.fcaja-tot { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.fcaja-tot__i { display: flex; flex-direction: column; gap: 1px; }
.fcaja-tot__k { font-size: var(--t5); color: var(--ink-3); font-weight: 600; }
.fcaja-tot__v { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; color: var(--ink); }
.fcaja-tot__v--neg { color: var(--status-red); }

.fcaja { flex: 1; min-height: 0; display: grid; grid-template-columns: 21rem minmax(0, 1fr); gap: var(--sp-5); align-items: start; overflow-y: auto; }
.fcaja-lado { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

/* — Tarjeta de la cuenta — */
.fcaja-card {
  position: relative; overflow: hidden;
  aspect-ratio: 1.586; border-radius: var(--r-card); padding: var(--sp-4);
  display: flex; flex-direction: column; justify-content: space-between;
  color: #FFFFFF; box-shadow: 0 0.875rem 1.875rem -0.75rem rgba(10, 40, 55, 0.45);
  background: var(--fcaja-t, var(--azul-hi));
  transition: background 0.3s ease;
}
.fcaja-card::before, .fcaja-card::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, 0.08);
}
.fcaja-card::before { width: 13.75rem; height: 13.75rem; right: -3.75rem; top: -4.375rem; }
.fcaja-card::after { width: 13.75rem; height: 13.75rem; right: 1.875rem; bottom: -6.875rem; background: rgba(255, 255, 255, 0.06); }
.fcaja-card--consolidado { --fcaja-t: linear-gradient(135deg, #003A4C 0%, #0087AF 100%); }
.fcaja-card--azul       { --fcaja-t: linear-gradient(135deg, #003A4C 0%, #00587A 100%); }
.fcaja-card--celeste    { --fcaja-t: linear-gradient(135deg, #005069 0%, #0087AF 100%); }
.fcaja-card--verde      { --fcaja-t: linear-gradient(135deg, #04673A 0%, #009B44 100%); }
.fcaja-card--naranja    { --fcaja-t: linear-gradient(135deg, #8A4212 0%, #F17E30 100%); }
.fcaja-card--violeta    { --fcaja-t: linear-gradient(135deg, #3B3079 0%, #6C5CE7 100%); }
.fcaja-card--menta      { --fcaja-t: linear-gradient(135deg, #0B5348 0%, #1E9E86 100%); }
.fcaja-card__top, .fcaja-card__bot { position: relative; display: flex; flex-direction: column; gap: 2px; }
.fcaja-card__kind { font-size: var(--t6); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; font-weight: 600; }
.fcaja-card__name { font-size: var(--t2); font-weight: 600; }
.fcaja-card__lbl { font-size: var(--t5); font-weight: 500; opacity: 0.8; }
.fcaja-card__saldo { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.fcaja-card__sub { font-size: var(--t5); font-weight: 500; opacity: 0.75; }

/* — Lista de cuentas — */
.fcaja-ctas { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.fcaja-grupo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fcaja-grupo__h {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  padding: 0 var(--sp-3) var(--sp-2);
  font-size: var(--t6); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); font-weight: 700;
}
.fcaja-grupo__t { font-variant-numeric: tabular-nums; }
.fcaja-grupo__t--neg { color: var(--status-red); }
.fcta {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; padding: var(--sp-2) var(--sp-3);
  border: none; background: none; border-radius: var(--r-nav);
  cursor: pointer; font-family: var(--font-family); text-align: left; min-width: 0;
  transition: background 0.12s;
}
.fcta:hover { background: var(--hover-soft); }
.fcta.is-sel { background: var(--hover-accent); }
.fcta__ini {
  width: 2.25rem; height: 1.5rem; flex: none; border-radius: 5px;
  display: grid; place-items: center; color: #FFFFFF;
  font-size: var(--t6); font-weight: 800; letter-spacing: 0.02em;
}
.fcta__ini--azul { background: #00587A; } .fcta__ini--celeste { background: #0087AF; }
.fcta__ini--verde { background: #009B44; } .fcta__ini--naranja { background: #F17E30; }
.fcta__ini--violeta { background: #6C5CE7; } .fcta__ini--menta { background: #1E9E86; }
.fcta__n { flex: 1; min-width: 0; font-size: var(--t4); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcta__meta { font-size: var(--t5); font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.fcta__s { font-size: var(--t4); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.fcta__s--neg { color: var(--status-red); }
.fcta__s--cero { color: var(--ink-3); font-weight: 600; }
.fcta--todas .fcta__n { font-weight: 700; }
.fcta--new {
  justify-content: center; border: 1px dashed var(--dashed);
  color: var(--ink-muted); font-size: var(--t4); font-weight: 600;
  padding: var(--sp-3); border-radius: var(--r-card);
}
.fcta--new:hover { border-color: var(--celeste); color: var(--azul-soft-text); background: none; }

/* — Movimientos — */
.fcaja-movs { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.fcaja-movs__h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.fcaja-movs__t { margin: 0; font-size: var(--t2); font-weight: 700; color: var(--ink); }
.fcaja-movs__t span { color: var(--ink-3); font-weight: 500; }
.fcaja-movs .fchips { margin-bottom: 0; align-items: center; }
.fchip--quitar { background: var(--hover-accent); color: var(--azul-soft-text); font-weight: 700; }
.fcaja-lista { display: flex; flex-direction: column; min-width: 0; }
.fmov {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; padding: var(--sp-3) var(--sp-1);
  border: none; border-bottom: 1px solid var(--line); background: none;
  cursor: pointer; font-family: var(--font-family); text-align: left; min-width: 0;
}
.fmov:hover { background: var(--hover-soft); }
.fmov__ico {
  width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%;
  display: grid; place-items: center;
}
.fmov__ico svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fmov__ico--in  { background: rgba(0, 155, 68, 0.14); color: var(--verde); }
.fmov__ico--out { background: var(--status-red-bg); color: var(--status-red); }
.fmov__ico--tr  { background: var(--hover-accent); color: var(--azul-soft-text); }
.fmov__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fmov__txt b { font-size: var(--t4); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmov__txt span { font-size: var(--t5); font-weight: 500; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmov__cat {
  flex: none; padding: 3px var(--sp-2); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink-muted);
  font-size: var(--t6); font-weight: 600; white-space: nowrap;
}
.fmov__der { flex: 0 0 8.125rem; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.fmov__m { font-size: var(--t4); font-weight: 700; font-variant-numeric: tabular-nums; }
.fmov__m--in  { color: var(--verde); }
.fmov__m--out { color: var(--status-red); }
.fmov__m--tr  { color: var(--ink-3); }
.fmov__f { font-size: var(--t5); font-weight: 500; color: var(--ink-3); }

/* Sin ancho para las dos columnas, la lista de cuentas va arriba. */
@media (max-width: 1200px) {
  .fcaja { grid-template-columns: minmax(0, 1fr); }
  .fcaja-lado { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .fcaja-card { flex: 0 0 18.75rem; }
  .fcaja-ctas { flex: 1 1 18.75rem; }
  .fmov__cat { display: none; }
}

/* ---------- Conciliación ---------- */
.fconc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); flex: 1; min-height: 0; }

/* ---------- Reportes: flujo de fondos ---------- */
.fflujo {
  background: var(--row);
  border-radius: var(--r-row);
  padding: var(--sp-1) 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  transition: background 0.3s ease;
}
.frow--flujo {
  grid-template-columns: 1.6fr repeat(6, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--t4); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.frow--flujo .r { text-align: right; }
.fflujo__head {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--t6);
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.fflujo__cat { font-weight: 600; }
.frow--muted { color: var(--ink-3); }
.frow--bold { font-weight: 700; }
.fflujo .neg { color: var(--fin-neg); }
.fflujo .pos { color: var(--fin-pos); }
.fflujo__sep { height: 1.5px; background: var(--line); margin: var(--sp-1) var(--sp-4); }

/* ---------- Configuración ---------- */
/* Configuración: seis tarjetas iguales en tres columnas. Las filas son de alto
   natural y la grilla scrollea, así ninguna se recorta cuando su contenido
   crece (clientes, proveedores o categorías). */
/* Cada card mide lo que necesita: `align-items: start` evita que la fila le
   imponga el alto de la vecina más grande, y las filas son `auto` de verdad.
   (Antes eran `minmax(12.5rem, auto)`, pero `.fin-card` recorta con
   `overflow: hidden`, así que aportaba 0 de alto intrínseco y el `auto`
   nunca se usaba: todas quedaban en el piso y la que tenía más contenido lo
   perdía a mitad de fila.) */
.fconfig {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: auto;
  align-items: start;
  gap: var(--sp-4);
  overflow-y: auto;
  padding-bottom: 2px;
}
@media (max-width: 900px) {
  .fconfig { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   CONFIGURACIÓN DE FINANZAS (23/09/2026)
   Dos paneles: las secciones a la izquierda, la elegida a la derecha.
   Reemplaza a .fconfig, que apilaba las siete tarjetas en una grilla.
═══════════════════════════════════════════════════════════ */
.fcfg {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: stretch;
}

/* — Sub-navegación — */
.fcfg-nav { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-y: auto; padding-right: var(--sp-1); }
.fcfg-nav__head { padding: 0 var(--sp-2) var(--sp-3); }
.fcfg-nav__title { font-size: var(--t3); font-weight: 800; }
.fcfg-auto {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  margin-top: var(--sp-2); padding: 3px var(--sp-2);
  border-radius: var(--r-pill); background: rgba(0, 155, 68, 0.12);
  color: var(--verde); font-size: var(--t6); font-weight: 700;
}
.fcfg-auto i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.fcfg-nav__b {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; padding: var(--sp-2) var(--sp-3);
  border: none; background: none; border-radius: var(--r-nav);
  cursor: pointer; font-family: var(--font-family);
  font-size: var(--t4); font-weight: 600; color: var(--ink-muted);
  text-align: left; transition: background 0.12s, color 0.12s;
}
.fcfg-nav__b svg { width: 1rem; height: 1rem; flex: none; }
.fcfg-nav__b > span { flex: 1; min-width: 0; }
.fcfg-nav__n { font-variant-numeric: tabular-nums; font-size: var(--t6); font-weight: 600; color: var(--ink-3); }
.fcfg-nav__b:hover { background: var(--hover-soft); color: var(--ink); }
.fcfg-nav__b.is-on { background: var(--hover-accent); color: var(--ink); font-weight: 700; }

/* — Panel de la sección elegida — */
.fcfg-pane { min-width: 0; overflow-y: auto; padding: 2px 2px var(--sp-4); }
.fcfg-sec { display: none; }
.fcfg-sec.is-on { display: block; max-width: 70rem; }

.fcfg-h { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.fcfg-h h2 { margin: 0; font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.3px; color: var(--ink); }
.fcfg-h--sep { margin-top: var(--sp-5); }
.fcfg-h__meta { font-size: var(--t5); font-weight: 600; color: var(--ink-3); }
.fcfg-p { margin: var(--sp-1) 0 var(--sp-3); font-size: var(--t4); font-weight: 500; color: var(--ink-muted); max-width: 70ch; }

.fcfg-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--sp-3); align-items: start; }
.fcfg-box { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--panel); min-width: 0; }
.fcfg-box--pad { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.fcfg-box--ancho { max-width: 46rem; padding: var(--sp-3) var(--sp-4); }
.fcfg-box--num { padding: var(--sp-1) var(--sp-4); max-width: 46rem; }
.fcfg-box--off { background: var(--card); }
.fcfg-box__h {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); background: var(--card);
  border-bottom: 1px solid var(--line);
}
.fcfg-box__h--plano { background: none; border: none; padding: 0 0 var(--sp-3); }
.fcfg-box__t { font-size: var(--t4); font-weight: 800; }
.fcfg-box__sub { font-size: var(--t5); color: var(--ink-3); font-weight: 500; }
.fcfg-n { font-variant-numeric: tabular-nums; font-size: var(--t6); font-weight: 600; color: var(--ink-3); }
.fcfg-sp { flex: 1; }
.fcfg-add {
  border: none; background: none; cursor: pointer; font-family: var(--font-family);
  font-size: var(--t5); font-weight: 700; color: var(--celeste);
  padding: 2px var(--sp-1); border-radius: 6px;
}
.fcfg-add:hover { background: var(--hover-accent); }

/* — Fila de cliente / proveedor — */
.fcfg-lista { display: flex; flex-direction: column; max-height: min(24rem, 40vh); overflow-y: auto; }
.fcfg-lista--2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.fcfg-fila {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; padding: var(--sp-2) var(--sp-3);
  border: none; border-bottom: 1px solid var(--line);
  background: none; cursor: pointer; font-family: var(--font-family);
  text-align: left; min-width: 0;
}
.fcfg-fila:hover { background: var(--hover-soft); }
.fcfg-ini {
  width: 1.5rem; height: 1.5rem; flex: none; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--hover-accent); color: var(--azul-soft-text);
  font-size: var(--t6); font-weight: 800;
}
.fcfg-fila__n {
  flex: 1; min-width: 0; font-size: var(--t4); font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fcfg-fila__c { font-size: var(--t6); font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.fcfg-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--surf-2); }
.fcfg-dot--ok { background: var(--verde); }
/* Deuda viva y límite de crédito pasado, las mismas señales de antes. */
.fcfg-fila--debe .fcfg-ini { background: rgba(241, 126, 48, 0.16); color: var(--naranja); }
.fcfg-fila--alerta .fcfg-ini { background: var(--status-red-bg); color: var(--status-red); }
.fcfg-vacio { padding: var(--sp-4); font-size: var(--t4); font-weight: 500; color: var(--ink-3); text-align: center; }

/* — Categorías: signo de entra/sale — */
.fcfg-sig { width: 1.25rem; height: 1.25rem; border-radius: 6px; display: grid; place-items: center; font-size: var(--t6); font-weight: 800; }
.fcfg-sig--in { background: rgba(0, 155, 68, 0.14); color: var(--verde); }
.fcfg-sig--out { background: var(--status-red-bg); color: var(--status-red); }

/* — Numeración: sigla + tipo + próximo número — */
.fcfg-sigla {
  flex: none; padding: 2px 6px; border-radius: 5px;
  background: var(--card); color: var(--ink-3);
  font-size: var(--t6); font-weight: 800; letter-spacing: 0.3px;
}
.fcfg-box--num .fin-list { gap: 0; }
.fcfg-box--num .fkv { background: none; border-radius: 0; border-bottom: 1px solid var(--line); padding: var(--sp-2) 2px; }
.fcfg-box--num .fkv:last-child { border-bottom: none; }
.fcfg-box--num .fkv__k { flex: 1; min-width: 0; color: var(--ink); font-weight: 600; }

/* — Integraciones — */
.fcfg-int { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.fcfg-int__ico {
  width: 2rem; height: 2rem; flex: none; border-radius: 9px;
  display: grid; place-items: center; background: var(--card); color: var(--ink-3);
  font-size: var(--t5); font-weight: 800;
}
.fcfg-int__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fcfg-int__txt b { font-size: var(--t2); font-weight: 800; }
.fcfg-int__txt span { font-size: var(--t5); font-weight: 500; color: var(--ink-3); }

/* Sin ancho para la columna de secciones, pasa a ser una fila de pestañas. */
@media (max-width: 1100px) {
  .fcfg { grid-template-columns: minmax(0, 1fr); }
  .fcfg-nav { flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .fcfg-nav__head { width: 100%; }
  .fcfg-nav__b { width: auto; }
  .fcfg-nav__b > span { flex: none; }
}
.fkv {
  background: var(--row);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t4); font-weight: 500;
  gap: var(--sp-2);
  transition: background 0.3s ease;
}
.fkv__k { color: var(--ink-3); }
.fkv__v { font-weight: 600; }
.fkv__v--num { font-variant-numeric: tabular-nums; }
.fcat-h {
  font-size: var(--t6);
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: var(--sp-2);
}
.fwrap { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.fwrap--mb { margin-bottom: var(--sp-3); }
.fcond { background: var(--row); font-size: var(--t5); font-weight: 600; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); transition: background 0.3s ease; }
.fadd-dashed {
  background: none;
  border: 2px dashed var(--dashed);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
  font-size: var(--t5); font-weight: 500;
  font-family: inherit;
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.fadd-dashed:hover { border-color: var(--celeste); color: var(--azul-soft-text); }

/* ═══════════════════════════════════════════════════════════════════════
   FUNCIONALIDAD — modales, formularios, menús flotantes y vistas de
   reportes. Mismos tokens del sistema (light/dark automático).
   ═══════════════════════════════════════════════════════════════════════ */

.is-hidden { display: none !important; }

/* ---------- Modales ---------- */
.fmodal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--scrim);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  animation: finFade 0.18s ease;
}
.fmodal {
  background: var(--panel);
  border-radius: var(--r-panel);
  padding: var(--sp-4) var(--sp-5);
  width: 32.5rem;
  max-width: calc(100vw - 2.5rem);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.fmodal--wide { width: 42.5rem; }
.fmodal__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.fmodal__title { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.4px; }
.fmodal__x {
  background: var(--card);
  border: none;
  border-radius: var(--r-pill);
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--nav-ink);
  transition: background 0.2s ease;
}
.fmodal__x:hover { background: rgba(0, 135, 175, 0.2); }
.fmodal__x svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.fmodal__body { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-4); padding-right: var(--sp-1); }
.fmodal__foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
/* Mensaje de estado (cierre del comprobante) a la izquierda de los botones */
.fmodal__foot .fdes-cierre { margin-right: auto; max-width: 28.75rem; }

/* ---------- Formularios ---------- */
.fform-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.fform-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fform-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ffield { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.ffield__label { font-size: var(--t5); font-weight: 600; color: var(--nav-ink); }
.finput, .fselect, .ftextarea {
  background: var(--card);
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-3);
  font-family: inherit;
  font-size: var(--t4); font-weight: 500;
  color: var(--ink);
  width: 100%;
  transition: border-color 0.2s ease, background 0.3s ease;
}
.finput:focus, .fselect:focus, .ftextarea:focus { outline: none; border-color: var(--celeste); }
.fselect { cursor: pointer; }
.fselect:disabled { opacity: 0.6; cursor: default; }
.ftextarea { min-height: 6.875rem; resize: vertical; font-variant-numeric: tabular-nums; }
.ffile { font-size: var(--t5); font-weight: 500; color: var(--ink-3); }
.ffile::file-selector-button {
  background: var(--card);
  border: none;
  border-radius: var(--r-pill);
  color: var(--nav-ink);
  font-family: inherit;
  font-size: var(--t5);
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
  margin-right: var(--sp-2);
  cursor: pointer;
}
.fhint { margin: 0; font-size: var(--t5); font-weight: 500; color: var(--ink-3); line-height: 1.5; }
.fhint--lg { font-size: var(--t4); font-weight: 500; color: var(--ink); }
.fchkrow { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--t4); font-weight: 600; cursor: pointer; }
input[type="checkbox"] { accent-color: var(--azul-hi); width: 0.9375rem; height: 0.9375rem; cursor: pointer; }

/* Ítems de factura (detalle · cant · precio · IVA → importe) */
.fin-items { display: flex; flex-direction: column; gap: var(--sp-1); }
.fitem-row { display: grid; grid-template-columns: 1fr 3.5rem 6.5rem 5.125rem 5.625rem 1.625rem; gap: var(--sp-1); align-items: center; }
.fin-items--noiva .fitem-row { grid-template-columns: 1fr 3.75rem 6.875rem 5.75rem 1.625rem; }
.fin-items--noiva .fitem-iva { display: none; }
.fitem-iva { padding: var(--sp-2) var(--sp-1); font-size: var(--t5); font-weight: 500; }
.fitem-amt { font-size: var(--t4); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; color: var(--nav-ink); }
.fitem-del {
  background: none;
  border: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink-3);
}
.fitem-del:hover { color: var(--fin-neg); background: var(--card); }
.fitem-del svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ftotal-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 700;
  padding-top: var(--sp-2);
  border-top: 1.5px solid var(--line);
}

/* Imputación de cobros/pagos */
.fimps { display: flex; flex-direction: column; gap: var(--sp-1); }
.fimp {
  display: grid;
  grid-template-columns: 1.25rem 9.375rem 1fr auto;
  gap: var(--sp-2);
  align-items: center;
  background: var(--card);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--t4); font-weight: 500;
  transition: background 0.3s ease;
}
.fimp__doc { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fimp__falta { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fimp__asig { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 6rem; }
.fanticipo {
  background: rgba(161, 225, 188, 0.28);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t4);
  font-weight: 600;
}
.fresto { margin: 0; font-size: var(--t4); font-weight: 600; color: var(--azul-soft-text); }

/* ---------- Menú flotante ---------- */
.fmenu {
  position: fixed;
  z-index: var(--z-popover);
  background: var(--panel);
  border-radius: var(--r-row);
  padding: var(--sp-1);
  box-shadow: var(--shadow-overlay);
  min-width: 11.25rem;
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: finFade 0.12s ease;
}
.fmenu__item {
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: var(--t4);
  font-weight: 600;
  color: var(--ink);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
}
.fmenu__item:hover { background: var(--card); }
.fmenu__item.is-active { background: var(--menta); color: var(--text-on-accent); }
.fmenu__item--danger { color: var(--fin-neg); }
.fmenu__sep { height: 1.5px; background: var(--line); margin: var(--sp-1) var(--sp-2); }

/* ---------- Complementos de tablas y badges ---------- */
.fbadge--muted { background: var(--line); color: var(--nav-ink); }
.fbtn--ghost.fbtn--sm { font-size: var(--t4); font-weight: 600; padding: var(--sp-1) var(--sp-2); }
.fempty {
  font-size: var(--t4); font-weight: 500;
  color: var(--ink-3);
  background: var(--row);
  border-radius: var(--r-row);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  transition: background 0.3s ease;
}
.facct--sel { outline: 3px solid var(--menta); }
.ftable__row { cursor: pointer; }

/* ---------- Ficha de clientes y proveedores (Configuración) ---------- */
/* Las etiquetas son las mismas de Categorías. Dos marcas discretas para no
   tener que abrir la ficha: un punto si el contacto tiene deuda viva, y el
   punto en rojo si el cliente pasó su límite de crédito. */
.ftag--debe::after {
  content: '';
  display: inline-block;
  width: 0.3125rem; height: 0.3125rem;
  margin-left: var(--sp-1);
  vertical-align: middle;
  border-radius: 50%;
  background: currentColor;
}
.ftag--alerta { outline: 1.5px solid var(--status-red); }
.ftag--alerta::after { background: var(--status-red); }
/* Bloques del formulario que aparecen/desaparecen según el tipo elegido */
.fcto-bloque {
  border-top: 1.5px solid var(--line);
  padding-top: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
/* Tres columnas; los campos se alinean por abajo para que una etiqueta que
   se parte en dos líneas no desnivele los inputs de la fila. */
.fform-row--doc { grid-template-columns: 1fr 0.7fr 1fr; align-items: end; }
.ftextarea--sm { min-height: 4.375rem; }
/* Validación en línea: el mismo hint, en el color de "algo no cierra" */
.fhint--warn { color: var(--fin-neg); font-weight: 600; }
.fbtn--danger { color: var(--status-red); border-color: rgba(226, 75, 74, 0.45); margin-right: auto; }
.fbtn--danger:hover { border-color: var(--status-red); color: var(--status-red); }
@media (max-width: 900px) {
  .fform-row--doc { grid-template-columns: 1fr; }
}

/* ---------- Reportes: vistas adicionales ---------- */
.frep { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.frep .fflujo { flex: 1; }
.frep-chart { flex: none; height: 13.75rem; width: 100%; }
.frep .fin-chart__months { padding: var(--sp-2) var(--sp-2) var(--sp-3); }
.fflujo--mt { margin-top: var(--sp-1); flex: none; }
.frep-extra { display: flex; gap: var(--sp-2); align-items: center; }
.frow--edoc { display: grid; grid-template-columns: 5.75rem 1fr 7.5rem 7.5rem 7.5rem; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); font-size: var(--t4); font-weight: 500; font-variant-numeric: tabular-nums; align-items: center; }
.frow--edoc .r { text-align: right; }
.frow--iva { display: grid; grid-template-columns: 5.75rem 10.625rem 1fr 6.875rem 6.875rem 6.875rem; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); font-size: var(--t4); font-weight: 500; font-variant-numeric: tabular-nums; align-items: center; }
.frow--iva .r { text-align: right; }

/* ---------- Configuración: tags accionables ---------- */
.ftag-btn { border: none; font-family: inherit; cursor: pointer; transition: filter 0.2s ease; }
.ftag-btn:hover { filter: brightness(0.95); }
.fadd-mini {
  background: none;
  border: 2px dashed var(--dashed);
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--t5); font-weight: 500;
  font-family: inherit;
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.fadd-mini:hover { border-color: var(--celeste); color: var(--azul-soft-text); }
.fkv--click { cursor: pointer; }
.fkv--click:hover { outline: 1.5px solid var(--celeste); }

/* ═════════ REPORTES v2 (spec Argentina) ═════════ */

/* Toolbar de los reportes: controles compactos */
.finput--inline, .fselect--inline {
  padding: var(--sp-2) var(--sp-2);
  font-size: var(--t5); font-weight: 500;
  width: auto;
  min-width: 0;
}
.fbtn--sm { padding: var(--sp-2) var(--sp-3); font-size: var(--t4); font-weight: 600; }
.frep-note {
  margin: var(--sp-2) var(--sp-1) 0;
  font-size: var(--t5); font-weight: 500;
  line-height: 1.5;
  color: var(--ink-3);
  flex: none;
}
.frow--click { cursor: pointer; }
.frow--click:hover { background: var(--card); }
/* Reportes compuestos: scrollea el reporte entero, no cada tabla */
.frep--scroll { overflow-y: auto; }
.frep--scroll .fflujo { flex: none; min-height: 0; overflow-y: visible; }
.frep--scroll .fiva-wrap { flex: none; min-height: 0; overflow-y: visible; }

/* Antigüedad de saldos */
.frow--aging  { grid-template-columns: 1.5fr repeat(7, 1fr); gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); font-size: var(--t4); font-weight: 500; font-variant-numeric: tabular-nums; }
.frow--aging6 { grid-template-columns: 1.5fr repeat(6, 1fr); gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); font-size: var(--t4); font-weight: 500; font-variant-numeric: tabular-nums; }
.frow--aging .r, .frow--aging6 .r { text-align: right; }
.faging-cell {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}
.faging-cell:hover { text-decoration-color: var(--celeste); }
.fkv--btn {
  background: none;
  border: none;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.fkv--btn:hover { outline: 1.5px solid var(--celeste); }
.fkv--total { border-top: 1.5px solid var(--line); margin-top: var(--sp-1); padding-top: var(--sp-2); font-weight: 700; }

/* Estado de cuenta: cabecera con membrete y saldo destacado */
.fedoc-head {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--sp-3);
  background: var(--row);
  border-radius: var(--r-row);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  flex: none;
}
.fedoc-head__col { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.fedoc-head__emp { font-size: var(--t6); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.4px; }
.fedoc-head__cto { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t2); font-weight: 700; flex-wrap: wrap; }
.fedoc-head__fisc { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.fedoc-fisc-btn {
  background: none;
  border: none;
  padding: 2px var(--sp-1);
  border-radius: var(--r-pill);
  font-size: var(--t5); font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
}
.fedoc-fisc-btn:hover { background: var(--card); color: var(--azul-soft-text); }
.fedoc-head__per { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.fedoc-head__saldo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  flex: none;
}
.fedoc-head__lbl { font-size: var(--t6); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.4px; }
.fedoc-head__num { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.fedoc-imps { display: block; font-size: var(--t6); font-weight: 600; color: var(--ink-muted); margin-top: 2px; }

/* Entró vs salió: bloques por categoría + resultado */
.fevs-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-2);
  flex: none;
  margin-top: var(--sp-2);
}
.fevs-block { background: var(--row); border-radius: var(--r-row); padding: var(--sp-2) 0; }
.fevs-block__title {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--t6);
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.frow--evs { grid-template-columns: 1fr auto; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); font-size: var(--t4); font-weight: 500; font-variant-numeric: tabular-nums; }
.frow--evs .r { text-align: right; }
.fevs-row {
  background: none;
  border: none;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.fevs-row:hover { background: var(--card); }
.fevs-res { background: var(--row); border-radius: var(--r-row); padding: var(--sp-2) 0; margin-top: var(--sp-2); flex: none; }
.fevs-res .fkpi__badge { margin-left: var(--sp-2); }
.fevs-res .neg { color: var(--fin-neg); }
.fevs-res .pos { color: var(--fin-pos); }

/* Gráfico EVS: barras + línea de neto en tinta neutra con halo */
.fevs-chart { height: 12.5rem; }
.evs-axis { stroke: var(--line); stroke-width: 1; }
.evs-line { stroke: var(--ink); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.evs-line-halo { stroke: var(--panel); stroke-width: 5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.evs-dot { fill: var(--ink); stroke: var(--panel); stroke-width: 2; }
.fevs-months { justify-content: space-around; }
.fevs-months span { flex: 1; text-align: center; }
.evs-legend {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  padding: 2px 0 var(--sp-1);
  font-size: var(--t5); font-weight: 500;
  color: var(--ink-muted);
  flex: none;
}
.evs-legend__item { display: inline-flex; align-items: center; gap: var(--sp-1); }
.evs-sw { width: 0.625rem; height: 0.625rem; border-radius: 3px; }
.evs-sw--in { background: var(--celeste); }
.evs-sw--out { background: var(--azul-hi); }
.evs-sw--neto { height: 0.15625rem; width: 0.875rem; border-radius: 2px; background: var(--ink); }

/* Libro IVA: tabla ancha con scroll propio + cuadro resumen */
.fiva-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--row);
  border-radius: var(--r-row);
}
.fiva { border-collapse: collapse; width: 100%; min-width: 56.25rem; font-size: var(--t5); font-weight: 500; font-variant-numeric: tabular-nums; }
.fiva th {
  position: sticky;
  top: 0;
  background: var(--row);
  text-align: left;
  padding: var(--sp-2) var(--sp-2);
  font-size: var(--t6);
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.fiva td { padding: var(--sp-2) var(--sp-2); border-top: 1px solid var(--line); white-space: nowrap; }
.fiva th.r, .fiva td.r { text-align: right; }
.fiva-doc { font-weight: 600; }
.fiva-tot { font-weight: 700; }
.fiva-nc td { color: var(--fin-neg); }
.fiva-empty { text-align: center; color: var(--ink-3); padding: var(--sp-5) var(--sp-2); }
.fiva-resumen { background: var(--row); border-radius: var(--r-row); padding: var(--sp-1) 0 var(--sp-2); margin-top: var(--sp-2); flex: none; }
.frow--ivares { grid-template-columns: 1fr 9.375rem 9.375rem; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); font-size: var(--t4); font-weight: 500; font-variant-numeric: tabular-nums; }
.frow--ivares .r { text-align: right; }

/* Compras con varias alícuotas */
.fmix { background: var(--card); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-3) var(--sp-1); }
.fform-row--mix { grid-template-columns: repeat(4, 1fr); }

/* Estado de cuenta imprimible (membrete). En pantalla no existe. */
.fprint { display: none; }
@media print {
  body.fprinting > :not(.fprint) { display: none !important; }
  body.fprinting { background: #fff !important; }
  body.fprinting .fprint {
    display: block;
    color: #111;
    font-size: var(--t5); font-weight: 500;
    padding: var(--sp-5);
    font-family: 'Manrope', 'Segoe UI', sans-serif;
  }
  .fprint__emp { font-size: 1.125rem; font-weight: 800; }
  .fprint__sub { font-size: var(--t6); font-weight: 600; color: #555; margin-top: 2px; }
  .fprint__title { font-size: 0.875rem; font-weight: 700; margin: var(--sp-3) 0 var(--sp-1); text-transform: uppercase; letter-spacing: 0.5px; }
  .fprint__meta { font-size: var(--t5); font-weight: 500; color: #333; line-height: 1.6; margin-bottom: var(--sp-3); }
  .fprint__table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
  .fprint__table th, .fprint__table td { border: 1px solid #bbb; padding: var(--sp-1) var(--sp-2); text-align: left; font-size: var(--t6); font-weight: 600; }
  .fprint__table th.r, .fprint__table td.r { text-align: right; }
  .fprint__table th { background: #f0f0f0; text-transform: uppercase; font-size: var(--t6); font-weight: 600; letter-spacing: 0.4px; }
  .fprint__table tr.muted td { color: #777; }
  .fprint__table tr.bold td { font-weight: 700; background: #f7f7f7; }
  .fprint__foot { margin-top: var(--sp-3); font-size: var(--t4); font-weight: 700; }
}

@media (max-width: 900px) {
  .fevs-cols { grid-template-columns: minmax(0, 1fr); }
  .fform-row--mix { grid-template-columns: 1fr 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   HAZE-CHART — componente de gráfico (port de HAZE-BASE)
═══════════════════════════════════════════════════════════ */
/* ============================================================
   HAZE · componente de gráfico financiero
   Reskin sobre la identidad de marca de HAZE (styles.css):
   toma sus tokens (--celeste, --azul, --menta, --ink, --line…)
   y define arriba los --haze-* que consume el SVG.
   CSP-safe: sin @import externo, sin style="" inline, sin JS inline.
   Fuente de marca (Product Sans) y mono de sistema para los números.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   LAYOUT · medidas editables del envoltorio (lo que controla el CSS).
   La geometría interna del SVG (barras, ejes, filas) vive en
   haze-chart.js → objeto DIM. Cambiá acá lo que rodea al gráfico.
   ════════════════════════════════════════════════════════════ */
:root {
  --hz-pad:        0px;    /* padding interno del contenedor del gráfico   */
  --hz-legend-gap: 0.375rem;    /* separación entre los chips de la leyenda     */
  --hz-legend-mb:  1rem;   /* separación leyenda ↔ área del gráfico        */
  --hz-tooltip-w:  9.375rem;  /* ancho mínimo del tooltip                     */
  --hz-empty-h:    13.75rem;  /* alto del estado "sin datos"                  */
  --hz-gap-secc:   1.375rem;   /* separación del gráfico con la sección de abajo */
}

/* ============================================================
   TOKENS · tema claro (por defecto)
   ============================================================ */
:root,
:root[data-theme='light'] {
  /* superficies y texto — heredan de la marca */
  --haze-bg:            var(--row, #ffffff);
  --haze-surface:       var(--panel, #ffffff);
  --haze-fg:            var(--ink, #131a26);
  --haze-muted:         var(--ink-muted, #5b6875);
  --haze-border:        var(--line, #e4e9f0);

  /* grilla y ejes */
  --haze-grid:          #edf0f5;
  --haze-zero:          #97a4b4;   /* línea de cero: más marcada que la grilla */
  --haze-axis-label:    var(--ink-3, #6b7684);
  --haze-tick:          var(--dashed, #c3ccd8);

  /* colores de datos — convención propia de HAZE (entró celeste, salió azul) */
  --haze-c-entro:       var(--celeste, #6ca8cf);
  --haze-c-salio:       var(--azul, #213f95);
  --haze-c-neto:        var(--ink-muted, #475569);
  --haze-c-neto-pos:    #0f9d63;   /* verde · neto +   */
  --haze-c-neto-neg:    #d92d20;   /* rojo  · neto −   */

  /* estados / superficie de datos */
  --haze-empty:         #dfe5ec;   /* período sin movimiento (peso reducido) */
  --haze-empty-label:   #aab4c0;

  /* tooltip — azul tinta de marca */
  --haze-tt-bg:         var(--project-ink, #0e2a47);
  --haze-tt-fg:         #f4f7fb;
  --haze-tt-muted:      #9aa7b8;
  --haze-tt-border:     rgba(255,255,255,0.08);

  /* skeleton */
  --haze-skeleton:      #eef2f7;
  --haze-skeleton-hi:   #f7f9fc;

  /* foco */
  --haze-focus:         var(--azul, #1f6feb);
  --haze-hover-band:    rgba(0,80,105,0.06);
}

/* ============================================================
   TOKENS · tema oscuro (mismo selector que usa HAZE)
   ============================================================ */
:root[data-theme='dark'],
body.dark-mode {
  --haze-bg:            var(--row, #31353b);
  --haze-surface:       var(--panel, #17191d);
  --haze-fg:            var(--ink, #e7edf5);
  --haze-muted:         var(--ink-muted, #93a1b3);
  --haze-border:        #26313f;

  --haze-grid:          #262b32;
  --haze-zero:          #566577;
  --haze-axis-label:    var(--ink-3, #8b98a9);
  --haze-tick:          var(--dashed, #4a4f57);

  --haze-c-entro:       var(--celeste, #6ca8cf);
  --haze-c-salio:       var(--azul-hi, #4b6bd6);
  --haze-c-neto:        #8695a8;
  --haze-c-neto-pos:    #2fbd84;
  --haze-c-neto-neg:    #f2564a;

  --haze-empty:         #2a2f36;
  --haze-empty-label:   #566577;

  --haze-tt-bg:         #05080d;
  --haze-tt-fg:         #eef3f9;
  --haze-tt-muted:      #7b8798;
  --haze-tt-border:     rgba(255,255,255,0.10);

  --haze-skeleton:      #24272c;
  --haze-skeleton-hi:   #31353b;

  --haze-focus:         var(--celeste, #58a6ff);
  --haze-hover-band:    rgba(0,135,175,0.10);
}

/* ============================================================
   COMPONENTE
   ============================================================ */
.haze-chart,
.haze-chart * {
  box-sizing: border-box;
}

.haze-chart {
  position: relative;
  font-family: var(--font, system-ui, sans-serif);
  color: var(--haze-fg);
  background: transparent;   /* el fondo real lo pone la card que lo contiene */
  width: 100%;
  padding: var(--hz-pad);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Encabezado / leyenda ---------- */
.haze-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hz-legend-gap);
  margin-bottom: var(--hz-legend-mb);
}

.haze-legend__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2);
  border: 1px solid var(--haze-border);
  border-radius: 999px;
  background: var(--haze-bg);
  color: var(--haze-fg);
  font: inherit;
  font-size: var(--t4);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: opacity .15s, border-color .15s, background .15s;
}
.haze-legend__btn:hover { border-color: var(--haze-tick); }
.haze-legend__btn:focus-visible {
  outline: 2px solid var(--haze-focus);
  outline-offset: 2px;
}
.haze-legend__btn[aria-pressed='false'] {
  opacity: .5;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.haze-legend__sw {
  width: 0.75rem; height: 0.75rem;
  border-radius: 3px;
  flex: none;
}
/* la marca de la leyenda de la línea neto usa una barrita */
.haze-legend__sw--line {
  width: 0.875rem; height: 0.1875rem;
  border-radius: 2px;
}
.haze-sw--entro { background: var(--haze-c-entro); }
.haze-sw--salio { background: var(--haze-c-salio); }
.haze-sw--neto  { background: var(--haze-c-neto); }
.haze-sw--c1    { background: var(--haze-c-entro); }
.haze-sw--c2    { background: var(--haze-c-salio); }
.haze-sw--c3    { background: var(--haze-c-neto-pos); }

/* ---------- Cuerpo del gráfico ---------- */
.haze-chart__plot {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.haze-chart__yaxis {
  flex: none;
  display: block;
  overflow: visible;
}

.haze-chart__scrollwrap {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;            /* el gráfico entra en el ancho: sin scroll horizontal */
  display: flex;
  justify-content: center;     /* centra el canvas cuando hay pocas categorías */
}

.haze-chart__canvas {
  display: block;
}
.haze-chart__canvas:focus-visible {
  outline: 2px solid var(--haze-focus);
  outline-offset: -2px;
  border-radius: 4px;
}

/* ---------- Grilla y ejes ---------- */
.haze-grid-line {
  stroke: var(--haze-grid);
  stroke-width: 1;
  stroke-dasharray: 2 5;   /* punteado sutil: presente, no compite con el dato */
}
.haze-zero-line {
  stroke: var(--haze-zero);
  stroke-width: 1.5;
  shape-rendering: crispEdges;
}
.haze-tick-label {
  fill: var(--haze-axis-label);
  font-family: ui-monospace, SFMono-Regular, 'DM Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  font-size: var(--t6);
  font-weight: 500;
}
.haze-cat-label {
  fill: var(--haze-axis-label);
  font-family: var(--font, sans-serif);
  font-size: var(--t5);
  font-weight: 500;
}
.haze-cat-label.is-active  { fill: var(--haze-fg); font-weight: 600; }
.haze-cat-label.is-empty   { fill: var(--haze-empty-label); }
.haze-cat-label.is-current { fill: var(--haze-fg); font-weight: 700; }

/* ---------- Barras ---------- */
.haze-bar {
  transition: opacity .14s;
  cursor: pointer;
}
/* (fill directo: usado por barras horizontales; las verticales usan gradiente url) */
.haze-bar--entro { fill: var(--haze-c-entro); }
.haze-bar--salio { fill: var(--haze-c-salio); }
.haze-bar--neto  { fill: var(--haze-c-neto); }
.haze-bar--c1    { fill: var(--haze-c-entro); }
.haze-bar--c2    { fill: var(--haze-c-salio); }
.haze-bar--c3    { fill: var(--haze-c-neto-pos); }
.haze-bar.is-dim { opacity: .30; }

/* stops del degradado vertical de barra (muy sutil: apenas más claro arriba) */
.hz-bar-stop-0 { stop-opacity: .82; }
.hz-bar-stop-1 { stop-opacity: 1; }
.haze-barstop--entro { stop-color: var(--haze-c-entro); }
.haze-barstop--salio { stop-color: var(--haze-c-salio); }
.haze-barstop--neto  { stop-color: var(--haze-c-neto); }
.haze-barstop--c1 { stop-color: var(--haze-c-entro); }
.haze-barstop--c2 { stop-color: var(--haze-c-salio); }
.haze-barstop--c3 { stop-color: var(--haze-c-neto-pos); }

/* período sin movimiento: marca de peso reducido */
.haze-empty-mark {
  fill: var(--haze-empty);
}

/* ---------- Línea de neto (curva monótona, fiel al dato) ---------- */
.haze-net-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.haze-net-line--pos { stroke: var(--haze-c-neto-pos); }
.haze-net-line--neg { stroke: var(--haze-c-neto-neg); }
/* área bajo la línea, se desvanece; teñida según el signo */
.haze-net-area { stroke: none; }
.hz-area-stop-pos-0 { stop-color: var(--haze-c-neto-pos); stop-opacity: .20; }
.hz-area-stop-pos-1 { stop-color: var(--haze-c-neto-pos); stop-opacity: 0; }
.hz-area-stop-neg-0 { stop-color: var(--haze-c-neto-neg); stop-opacity: 0; }
.hz-area-stop-neg-1 { stop-color: var(--haze-c-neto-neg); stop-opacity: .20; }
/* nodos "dona": relleno = fondo real detrás del gráfico, borde = color de serie.
   Forma = señal secundaria (círculo/rombo). El fill se pisa por sección
   (ver finanzas.css) para que calce con el fondo real de cada card. */
.haze-net-dot {
  fill: var(--haze-surface);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .12s ease;
}
.haze-net-dot--pos { stroke: var(--haze-c-neto-pos); }
.haze-net-dot--neg { stroke: var(--haze-c-neto-neg); }
.haze-net-dot.is-hover { transform: scale(1.7); }

/* ---------- Guía vertical + banda hover ---------- */
.haze-guide {
  stroke: var(--haze-zero);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  pointer-events: none;
}
.haze-hover-band {
  fill: var(--haze-hover-band);
  pointer-events: none;
}
.is-hidden { display: none; }

.haze-overlay {
  fill: transparent;
  cursor: crosshair;
}

/* ---------- Tooltip ---------- */
.haze-tooltip {
  position: absolute;
  top: 0; left: 0;
  z-index: var(--z-popover);
  min-width: var(--hz-tooltip-w);
  padding: var(--sp-3) var(--sp-3);
  background: var(--haze-tt-bg);
  color: var(--haze-tt-fg);
  border: 1px solid var(--haze-tt-border);
  border-radius: var(--r-pill);
  box-shadow: 0 10px 30px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.18);
  font-size: var(--t5); font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -102%);
  transition: opacity .14s ease, transform .14s ease;
}
.haze-tooltip.is-visible { opacity: 1; transform: translate(-50%, -108%); }
.haze-tt__month {
  font-weight: 600;
  font-size: var(--t4);
  letter-spacing: .04em;
  margin-bottom: var(--sp-2);
  color: var(--haze-tt-fg);
}
.haze-tt__row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 2px 0;
  white-space: nowrap;
}
.haze-tt__dot {
  width: 0.5625rem; height: 0.5625rem; border-radius: 2px; flex: none;
}
.haze-tt__dot--line { border-radius: 999px; }
.haze-tt__dot.haze-sw--neto-pos { background: var(--haze-c-neto-pos); }
.haze-tt__dot.haze-sw--neto-neg { background: var(--haze-c-neto-neg); }
.haze-tt__name { color: var(--haze-tt-muted); margin-right: auto; }
.haze-tt__val {
  font-family: ui-monospace, SFMono-Regular, 'DM Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding-left: var(--sp-3);
}
.haze-tt__val--neg { color: var(--haze-c-neto-neg); }
.haze-tt__divider { height: 1px; background: var(--haze-tt-border); margin: var(--sp-2) -0.25rem; }
.haze-tt__row--net .haze-tt__name { color: var(--haze-tt-fg); font-weight: 600; }
.haze-tt__row--net .haze-tt__val  { font-weight: 700; }

/* ---------- Estado: sin datos ---------- */
.haze-chart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
  color: var(--haze-muted);
  min-height: var(--hz-empty-h);
  border: 1px dashed var(--haze-border);
  border-radius: var(--r-pill);
  padding: var(--sp-5);
}
.haze-chart__empty svg { width: 2.125rem; height: 2.125rem; stroke: var(--haze-tick); fill: none; }
.haze-chart__empty-title { font-weight: 600; color: var(--haze-fg); font-size: 0.875rem; }
.haze-chart__empty-sub { font-size: var(--t4); font-weight: 500; max-width: 30ch; }

/* ---------- Estado: cargando (skeleton, SVG) ---------- */
.haze-skel-bar {
  fill: var(--haze-skeleton);
  animation: haze-pulse 1.3s ease-in-out infinite;
}
.haze-skel-bar:nth-child(2n)   { animation-delay: .15s; }
.haze-skel-bar:nth-child(3n)   { animation-delay: .30s; }
@keyframes haze-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* ---------- Animación de entrada (respeta prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .haze-bar--up,
  .haze-bar--down {
    transform-box: fill-box;
    animation: haze-grow .36s cubic-bezier(.22,.61,.36,1) both;
  }
  .haze-bar--up   { transform-origin: bottom; }  /* crece desde el cero */
  .haze-bar--down { transform-origin: top; }     /* barra negativa: desde el cero hacia abajo */
  @keyframes haze-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

  .haze-net-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: haze-draw .7s ease-out .12s forwards;   /* se dibuja de izq. a der. */
  }
  @keyframes haze-draw { to { stroke-dashoffset: 0; } }

  .haze-net-area { animation: haze-fade .5s ease-out .28s both; }
  @keyframes haze-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- Alternativa textual accesible ---------- */
.haze-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ═══════════════════════════════════════════════════════════
   DASHBOARD HAZE-BASE — topbar/tema/skeleton (GLOBAL)
═══════════════════════════════════════════════════════════ */
/* ---------- Barra superior ---------- */
.topbar {
  align-self: flex-end;
  background: var(--card);
  border-radius: var(--r-tile);
  padding: var(--sp-2) var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  transition: background 0.3s ease;
}
.topbar__day {
  background: var(--celeste);
  color: #FFFFFF;
  font-size: var(--t4);
  font-weight: 700;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
}
.topbar__clock {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.topbar__sep {
  width: 1.5px;
  height: 1.5rem;
  background: var(--line);
}
.topbar__user {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--row);
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2);
  transition: background 0.3s ease;
}
.topbar__avatar {
  width: 1.625rem;
  height: 1.625rem;
  flex: 0 0 1.625rem;
  background: var(--avbg);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.topbar__avatar img { width: 1rem; height: 1rem; object-fit: contain; }
.topbar__handle {
  font-size: var(--t4);
  font-weight: 600;
  color: var(--ink);
}
.icon-btn {
  width: 2.375rem;
  height: 2.375rem;
  flex: 0 0 2.375rem;
  background: var(--row);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: background 0.2s ease;
}
.icon-btn:hover { background: var(--hover-soft); }
.icon-btn svg {
  width: 1.1875rem;
  height: 1.1875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ---------- Tema: iconos luna/sol del botón de modo ---------- */
.icon-btn .ico--sun { display: none; }
body.dark-mode .icon-btn .ico--moon { display: none; }
body.dark-mode .icon-btn .ico--sun { display: block; }


/* ---------- Accesibilidad ---------- */
:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}


/* ---------- 1. Bloque base del esqueleto ----------
   Único componente compartido por todos los esqueletos (arranque, sección y
   áreas de datos). La forma de cada sección se arma más abajo, en el bloque
   "ESQUELETOS POR SECCIÓN". */
@keyframes sk-shimmer { from { background-position: -280px 0; } to { background-position: 280px 0; } }
.sk-block {
  display: block;
  background: linear-gradient(90deg, var(--card) 25%, var(--hover-soft) 37%, var(--card) 63%);
  background-size: 560px 100%;
  animation: sk-shimmer 1.3s ease-in-out infinite;
  border-radius: var(--r-row);
}
.sk-main { flex: 1; min-width: 0; height: calc(100vh - 1.5rem); border-radius: var(--r-panel); background: var(--panel); box-shadow: var(--shadow-panel); padding: var(--sp-5) var(--sp-6) var(--sp-6); display: flex; flex-direction: column; }
.sk-topbar { align-self: flex-end; width: 21.25rem; height: 2.875rem; border-radius: var(--r-tile); }
.sk-h1 { height: 2.625rem; width: 20rem; margin: var(--sp-2) 0 var(--sp-6); }
.sk-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 1.04fr 0.96fr; gap: var(--sp-4); }
.sk-card { border-radius: var(--r-card); }
.sk-card--a { grid-column: 1 / 4; grid-row: 1; }
.sk-card--b { grid-column: 4 / 7; grid-row: 1; }
.sk-card--c { grid-column: 1 / 5; grid-row: 2; }
.sk-card--d { grid-column: 5 / 7; grid-row: 2; }



/* ═══════════════════════════════════════════════════════════
   DASHBOARD HAZE-BASE — componentes de la vista (.hz-dash)
═══════════════════════════════════════════════════════════ */
/* En HAZE-BASE el saludo y la grilla son hijos directos de `.panel`, que es
   flex column: la grilla toma `flex:1` y llena el alto. Acá la vista mete un
   wrapper (.hz-dash), así que tiene que propagar ese contrato o la grilla
   colapsa y las cards quedan bajas y estiradas a lo ancho. */
.hz-dash {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Saludo ---------- */
.hz-dash .greeting {
  margin: var(--sp-1) 0 var(--sp-6);
  max-width: 45rem;
  font-size: 2.625rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.18;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}
.hz-dash .greeting__logo {
  width: 2.125rem;
  height: 2.125rem;
  object-fit: contain;
  transform: translateY(4px);
}
/* El saludo medía 36,8 px de letra y 43 px de alto en la IdeaPad HD: un 7 %
   del alto visible para una línea que no aporta un dato. Cuando el alto es el
   recurso escaso, se achica en vez de empujar la grilla fuera de la pantalla. */
@media (max-height: 759px) {
  .hz-dash .greeting { font-size: 2rem; margin-bottom: var(--sp-4); }
  .hz-dash .greeting__logo { width: 1.75rem; height: 1.75rem; }
}
@media (max-height: 659px) {
  .hz-dash .greeting { font-size: 1.625rem; margin-bottom: var(--sp-3); }
  .hz-dash .greeting__logo { width: 1.5rem; height: 1.5rem; transform: translateY(2px); }
}


/* ---------- Grilla de contenido ----------
   Fila 1: Proyectos | Actividad  → 1fr 1fr  (3+3 de 6)
   Fila 2: Tareas    | Acceso ráp. → 2fr 1fr  (4+2 de 6) */
.hz-dash .grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: var(--sp-4);
}
.hz-dash .card--alerts { grid-column: 1 / 4; grid-row: 1; }
.hz-dash .card--calendar { grid-column: 4 / 7; grid-row: 1; }
.hz-dash .card--tasks { grid-column: 1 / 5; grid-row: 2; }
.hz-dash .card--uso { grid-column: 5 / 7; grid-row: 2; }

/* ---------- Card interna ---------- */
.hz-dash .card {
  background: var(--card);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  min-height: 0;
  display: flex;
  flex-direction: column;
  transition: background 0.3s ease;
}
.hz-dash .card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.hz-dash .card__title {
  margin: 0 0 var(--sp-4);
  /* T2, como el título de card de las otras 18 secciones (R-11). */
  font-size: var(--t2);
  font-weight: 700;
  color: var(--ink);
}
.hz-dash .card__header .card__title { margin: 0; }
.hz-dash .card__count { color: var(--ink-3); }
.hz-dash .link {
  font-size: var(--t4);
  font-weight: 600;
  color: var(--ink-3);
  transition: color 0.2s ease;
}
.hz-dash .link:hover { color: var(--celeste); }


/* ---------- Tareas pendientes ---------- */
.hz-dash .tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
.hz-dash .task {
  background: var(--row);
  border-radius: var(--r-row);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  transition: transform 0.2s ease, background 0.3s ease;
}
.hz-dash .task:hover { transform: translateX(3px); }
.hz-dash .task__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
.hz-dash .tag {
  font-size: var(--t5);
  font-weight: 700;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
}
.hz-dash .tag--onne { color: var(--azul-soft-text); background: var(--status-blue-bg); }
.hz-dash .tag--bgv { color: #FFFFFF;               background: var(--azul-hi); }
.hz-dash .due {
  margin-left: auto;
  font-size: var(--t5);
  font-weight: 600;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
}
.hz-dash .due--today { color: #FFFFFF;               background: var(--azul-hi); }
.hz-dash .due--tomorrow { color: var(--azul-soft-text); background: rgba(0, 135, 175, 0.30); }
.hz-dash .due--far { color: var(--text-on-accent); background: var(--menta); }


/* ---------- 2. Calendario mini (dashboard): visualización rápida con actividades ---------- */
/* El contenedor #calendar debe estirarse para que la grilla llene SIEMPRE la tarjeta:
   si no, los meses sin eventos colapsaban a filas finas (se veían "chicos"). */
.hz-dash #calendar { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hz-dash .calendar { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.hz-dash .calendar__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.hz-dash .calendar__month { font-size: 0.875rem; font-weight: 700; color: var(--ink); text-transform: capitalize; }
.hz-dash .calendar__link { margin-left: auto; font-size: var(--t5); font-weight: 600; color: var(--ink-3); text-decoration: none; transition: color 0.2s ease; }
.hz-dash .calendar__link:hover { color: var(--celeste); }
.hz-dash .calendar__nav { display: flex; gap: var(--sp-1); }
.hz-dash .cal-btn {
  width: 1.625rem; height: 1.625rem; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--row); color: var(--nav-ink);
  transition: background 0.2s ease, color 0.2s ease;
}
.hz-dash .cal-btn:hover { background: var(--hover-soft); color: var(--ink); }
.hz-dash .cal-btn svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hz-dash .calendar__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); margin-bottom: var(--sp-1); }
.hz-dash .calendar__weekdays span { text-align: center; font-size: var(--t6); font-weight: 600; color: var(--ink-3); text-transform: uppercase; }
/* Piso por fila: sin esto, en una notebook las seis filas se repartían el alto
   de la card y la celda quedaba en 22 px, menos que una línea de texto. */
.hz-dash .calendar__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, minmax(1.25rem, 1fr));
  gap: var(--sp-1); flex: 1; min-height: 0; overflow-y: auto;
}
.hz-dash .cal-day {
  position: relative;
  /* Dos franjas fijas: el número arriba, los eventos abajo. La celda es el
     contenedor de consulta que decide si el evento entra con texto. */
  container: cal-dia / size;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 2px;
  padding: var(--sp-1) var(--sp-1) 2px;
  border-radius: var(--r-pill);
  background: var(--row);
  text-align: left;
  overflow: hidden;
  min-height: 0;
  transition: outline-color 0.15s ease, background 0.15s ease;
  outline: 1.5px solid transparent; outline-offset: -1.5px;
}
.hz-dash .cal-day:hover:not(.is-empty):not(.is-other) { outline-color: var(--celeste); cursor: pointer; }
.hz-dash .cal-day.is-empty { background: transparent; cursor: default; }
.hz-dash .cal-day.is-other { background: transparent; }
.hz-dash .cal-day.is-other .cal-day__num { color: var(--dashed); }
.hz-dash .cal-day__num { font-size: var(--t6); font-weight: 700; color: var(--ink-3); line-height: 1.1; }
.hz-dash .cal-day.is-today { background: var(--azul-hi); }
.hz-dash .cal-day.is-today .cal-day__num { color: #FFFFFF; }
/* ── Eventos del día ──────────────────────────────────────────────────
   Un evento = barra de 3 px del tono + título en UNA línea con elipsis.
   Cuando la celda no da para una línea de texto (notebook: la card del Panel
   reparte su alto entre seis filas), la consulta de contenedor de más abajo
   la pasa a modo marca: puntos del tono, sin texto. O entra la línea entera,
   o no se dibuja texto; lo que no puede pasar es que quede algo cortado. */
.hz-dash .cal-day__evs {
  display: flex; align-items: center; gap: 2px;
  min-height: 0; min-width: 0; overflow: hidden;
}
.hz-dash .cal-ev { display: flex; align-items: center; gap: 3px; min-width: 0; }
.hz-dash .cal-ev__b { width: 3px; height: 3px; border-radius: 50%; flex: none; background: currentColor; }
.hz-dash .cal-ev__t { display: none; }
.hz-dash .cal-more {
  font-size: var(--t6); font-weight: 700; color: var(--ink-muted);
  line-height: 1.2; white-space: nowrap;
}
.hz-dash .cal-more__w { display: none; }
/* Los cinco tonos de R-14 */
.hz-dash .cal-ev--ok      { color: var(--verde); }
.hz-dash .cal-ev--warn    { color: var(--naranja); }
.hz-dash .cal-ev--danger  { color: var(--status-red); }
.hz-dash .cal-ev--info    { color: var(--celeste); }
.hz-dash .cal-ev--neutral { color: var(--ink-3); }
.hz-dash .cal-day.is-today .cal-ev,
.hz-dash .cal-day.is-today .cal-more { color: rgba(255, 255, 255, 0.92); }

/* Celda alta: cada evento ocupa su línea con el título completo. */
@container cal-dia (min-height: 2.5rem) {
  .hz-dash .cal-day__evs { flex-direction: column; align-items: stretch; gap: 1px; }
  .hz-dash .cal-ev { height: 0.8125rem; gap: var(--sp-1); }
  .hz-dash .cal-ev__b { width: 3px; height: 100%; border-radius: 1.5px; }
  .hz-dash .cal-ev__t {
    display: block; min-width: 0;
    font-size: var(--t6); font-weight: 600; line-height: 0.8125rem;
    color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .hz-dash .cal-day.is-today .cal-ev__t { color: #FFFFFF; }
  .hz-dash .cal-more__w { display: inline; }
}


/* ---------- 3. Alertas (reemplaza Proyectos activos) ---------- */
/* El cuerpo de la card tiene que participar de la columna flex, si no el
   listado interno no tiene contra qué acotarse y se derrama fuera de la card. */
.hz-dash .card__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hz-dash .alerts { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; min-height: 0; overflow-y: auto; }
.hz-dash .alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  background: var(--row); border-radius: var(--r-row);
  /* margin/border explícitos: el `.alert` legado de Urbalimp (arriba en este
     mismo archivo) trae margin-bottom:16px y border-left:4px y se colaba. */
  margin: 0; border: none;
  padding: var(--sp-3) var(--sp-3);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s ease;
  animation: rowIn 0.25s ease both;
}
/* La card de Alertas mide lo que le da la grilla del Dashboard, que depende de
   la altura de la ventana. Siempre son 3 notificaciones + el pie: en pantallas
   bajas la fila se compacta para que entren enteras en vez de quedar cortadas. */
/* Sin saltos por alto de ventana (R-15). La lista ya es una caja con scroll
   contenido: muestra las alertas que entran y el resto se desplazan dentro de
   la card, sin empujar la página. En una ventana angosta se cierra la fila un
   paso, que es ancho y no alto. */
@media (max-width: 1100px) {
  .hz-dash .alerts { gap: var(--sp-2); }
  .hz-dash .alert { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
}
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.hz-dash .alert:hover { transform: translateX(3px); }
.hz-dash .alert__icon { width: 1.875rem; height: 1.875rem; flex: 0 0 1.875rem; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--card); color: var(--nav-ink); }
/* Acento sutil por severidad en el ícono (sin barras laterales genéricas) */
.hz-dash .alert--high .alert__icon { background: rgba(0, 80, 105, 0.12); color: var(--azul-soft-text); }
.hz-dash .alert--mid  .alert__icon { background: rgba(0, 135, 175, 0.16); color: var(--azul-soft-text); }
.hz-dash .alert--low  .alert__icon { background: rgba(161, 225, 188, 0.22); color: var(--text-on-accent); }
body.dark-mode .hz-dash .alert--low .alert__icon { color: var(--menta); }
.hz-dash .alert__icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hz-dash .alert__body { flex: 1; min-width: 0; }
.hz-dash .alert__title {
  font-size: var(--t4); font-weight: 700; color: var(--ink);
  /* una sola línea: la card muestra 3 notificaciones y no debe crecer */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Detalle y antigüedad en la MISMA línea: con tres líneas por fila, la tercera
   notificación no entraba en la card y quedaba cortada. */
.hz-dash .alert__desc {
  margin-top: 2px; font-size: var(--t5); font-weight: 500; color: var(--ink-3); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hz-dash .alert__time { font-size: var(--t6); font-weight: 700; color: var(--ink-3); }
.hz-dash .alert__time::before { content: " · "; font-weight: 500; }
.hz-dash .alert__close {
  width: 1.5rem; height: 1.5rem; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-3);
  transition: background 0.2s ease, color 0.2s ease;
}
.hz-dash .alert__close:hover { background: var(--hover-soft); color: var(--ink); }
.hz-dash .alert__close svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }


/* ---------- 4. Estado vacío genérico (tareas, alertas) ---------- */
.hz-dash .emptybox { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); text-align: center; padding: var(--sp-5) var(--sp-3); }
.hz-dash .emptybox__mark { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--row); display: grid; place-items: center; color: var(--ink-3); margin-bottom: 2px; }
.hz-dash .emptybox__mark svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hz-dash .emptybox__title { font-size: var(--t4); font-weight: 600; color: var(--ink-muted); }
.hz-dash .emptybox__sub { font-size: var(--t5); font-weight: 500; color: var(--ink-3); max-width: 15rem; }
.hz-dash .emptybox__btn {
  margin-top: var(--sp-1); font-size: var(--t4); font-weight: 700;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill);
  background: var(--menta); color: var(--text-on-accent);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.hz-dash .emptybox__btn:hover { filter: brightness(1.05); transform: translateY(-1px); }


/* ---------- 5. Botón "Nueva tarea" de la card (solo propietario) ---------- */
.hz-dash .card__addbtn {
  font-size: var(--t4); font-weight: 700; color: var(--azul-soft-text);
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill);
  transition: background 0.2s ease;
}
.hz-dash .card__addbtn:hover { background: var(--hover-accent); }


/* ---------- 6. Mini-modal global (window.HAZE.prompt) ----------
   Fuera de .hz-dash a proposito: lo usan Dashboard y Finanzas por igual. */
.mini-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--scrim); display: grid; place-items: center; animation: fadeIn 0.18s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.mini-modal {
  width: 23.75rem; max-width: 92vw;
  background: var(--panel); border-radius: var(--r-card);
  box-shadow: var(--shadow-overlay);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);
  animation: rowIn 0.2s var(--ease-active) both;
}
.mini-modal__title { font-size: 1rem; font-weight: 800; letter-spacing: -0.4px; color: var(--ink); }
.mini-modal__field { display: flex; flex-direction: column; gap: var(--sp-1); }
.mini-modal__label { font-size: var(--t4); font-weight: 600; color: var(--nav-ink); }
.mini-input {
  font-family: inherit; font-size: var(--t4); font-weight: 500; color: var(--ink);
  background: var(--card); border: 1.5px solid transparent; border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-3); outline: none; transition: border-color 0.2s ease;
}
.mini-input:focus { border-color: var(--celeste); }
.mini-modal__foot { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: 2px; }
.mini-btn { font-size: var(--t4); font-weight: 700; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); transition: background 0.2s ease, filter 0.2s ease, transform 0.2s ease; }
.mini-btn--ghost { background: var(--card); color: var(--nav-ink); }
.mini-btn--ghost:hover { background: var(--hover-soft); }
.mini-btn--primary { background: var(--menta); color: var(--text-on-accent); }
.mini-btn--primary:hover { filter: brightness(1.05); transform: translateY(-1px); }


/* El isotipo UrbaLimp es a color y se ve bien sobre oscuro: sin inversión. */


/* ═══ FASE 6: LOGO HAZE — marca, colapsado e inversión en oscuro ═══ */
.haze-sidebar.collapsed .sidebar-workspace-btn { display: flex; justify-content: center; padding: var(--sp-2) var(--sp-1); }
.haze-sidebar.collapsed .sidebar-workspace-btn .sidebar-workspace-chevrons { display: none; }
/* Isotipo a color: legible en claro y oscuro, sin filtros. */


/* ═══ FASE 9: SKELETONS de área de datos (shimmer HAZE, sin layout shift) ═══ */
.sk-rows { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-1) 0; }
.sk-rows .sk-block { height: 2.875rem; border-radius: var(--r-row); }
.sk-rows--sm .sk-block { height: 2.125rem; }
.sk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr)); gap: var(--sp-3); padding: var(--sp-1) 0; }
.sk-cards .sk-block { height: 11.25rem; border-radius: var(--r-card); }

/* ═══════════════════════════════════════════════════════════
   ESQUELETOS POR SECCIÓN — la silueta exacta de cada vista
   El esqueleto reutiliza las clases de layout reales (.view-header,
   .table-panel, .workers-grid, .fc__grid, .grid de dashboard…) y sólo
   rellena el contenido con .sk-block. Así la geometría no puede
   desviarse del diseño: es el mismo layout, sin datos.
═══════════════════════════════════════════════════════════ */
.sk {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  pointer-events: none; user-select: none;
}
/* Al entrar, el esqueleto aparece con un fundido corto; al salir, la vista
   real entra con el mismo gesto (.view-in), que es lo que da la sensación de
   "cargó rápido" en vez de un parpadeo seco. */
.sk { animation: sk-in 0.18s ease both; }
@keyframes sk-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* `backwards` y no `both`: con `both` el elemento se queda con el valor de
   transform del último fotograma PARA SIEMPRE, y un transform distinto de
   `none` convierte al elemento en bloque contenedor de `position: fixed`. Eso
   hacía que los cinco drawers (Cuentas Corrientes, Legales, Obras, Laboral,
   Impuestos) se anclaran a la caja de la vista en vez de a la ventana: abrían
   a 520 px de alto en una ventana de 620 y arrancaban 32 px más abajo, que es
   el "el drawer no respeta la altura del shell" de la captura 5. Con
   `backwards` el gesto de entrada es el mismo y, al terminar, el elemento
   vuelve a su estilo normal: sin transform. */
.view-in { animation: view-in 0.22s var(--ease-active) backwards; }

/* Dentro del esqueleto los contenedores reales no pintan fondo ni borde:
   la forma la dan los bloques. */
.sk .card,
.sk .table-panel,
.sk .fc-cell,
.sk .movements-col { background: transparent; box-shadow: none; }

/* ---------- Piezas comunes ---------- */
.sk .sk-title { height: 2.0625rem; border-radius: var(--r-row); }         /* h2 28px/800 */
.sk .sk-sub { height: 0.875rem; margin-top: var(--sp-2); border-radius: var(--r-pill); }
.sk-actions { display: flex; gap: var(--sp-2); align-items: center; }
.sk .sk-btn { height: 2.0625rem; border-radius: var(--r-pill); }
.sk .sk-btn--lg { height: 2.375rem; }
.sk .sk-search { height: 2.5rem; max-width: 100%; border-radius: var(--r-pill); }
.sk-filterrow .sk-block { flex: none; }

.sk-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--sk-min, 7.5rem), 1fr));
  gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.sk .sk-stat { height: 5.125rem; border-radius: var(--r-pill); }

.sk-seg {
  display: flex; gap: var(--sp-1); padding: var(--sp-1); flex-wrap: wrap;
  background: var(--panel-bg-2); border: 1px solid var(--border-color); border-radius: var(--r-pill);
}
.sk .sk-tab { height: 1.75rem; border-radius: 4px; }
.sk-filterbar { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-4); flex-wrap: wrap; }
.sk-filterbar .sk-search { margin-left: auto; }
.sk-modtabs {
  display: flex; gap: var(--sp-1); padding: var(--sp-1); margin-bottom: var(--sp-4); width: fit-content; max-width: 100%;
  overflow: hidden; background: var(--panel-bg-2); border: 1px solid var(--border-color); border-radius: var(--r-pill);
}
.sk .sk-modtab { height: 1.875rem; border-radius: var(--r-pill); }

/* Tabla: el .table-panel real, con celdas fantasma */
.sk-tablepanel { flex: none; }
.sk-tabla { table-layout: auto; }
.sk .sk-th { height: 0.6875rem; border-radius: var(--r-pill); }
.sk .sk-td { height: 0.9375rem; border-radius: var(--r-pill); }
.sk-tabla td { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }

/* Grillas de tarjetas */
.sk-cardgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--sk-min, 18.75rem), 1fr));
  gap: var(--sk-gap, 1rem);
}
.sk .sk-card { height: var(--sk-h, 12.5rem); border-radius: var(--r-card); }
.sk-wgrid .sk-card { height: var(--sk-h, 14.5rem); }

/* ---------- Panel general ---------- */
.sk-dash { flex: 1; min-height: 0; }
.sk .sk-greeting { height: 3.125rem; width: min(26.25rem, 70%); margin: var(--sp-1) 0 var(--sp-6); border-radius: var(--r-row); }
.sk-dash .card { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.sk .sk-cardtitle { height: 1.0625rem; border-radius: var(--r-pill); }
.sk-lines { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.sk .sk-line { flex: 1; min-height: 2.125rem; border-radius: var(--r-row); }
.sk-minical { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: var(--sp-1); }
.sk .sk-day { border-radius: var(--r-pill); }
.sk-quick { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.sk .sk-quickitem { flex: 1; min-height: 2.375rem; border-radius: var(--r-row); }

/* ---------- Calendario ----------
   Usa .fc__bar / .fc__weekdays / .fc__grid reales: mismos bordes, mismo
   radio y las mismas 6 filas de alto flexible que el mes de verdad. */
.sk-fc { flex: 1; min-height: 0; }
.sk .sk-caltitle { width: 15rem; height: 2.0625rem; border-radius: var(--r-row); }
.sk-caltools { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.sk .sk-wd { display: block; height: 0.875rem; width: 2.125rem; margin: 0 auto; border-radius: var(--r-pill); }
.sk-fc .fc-cell { gap: var(--sp-1); }
.sk .sk-cellnum { align-self: flex-end; width: 1.375rem; height: 1.375rem; border-radius: 999px; }
.sk .sk-chip { height: 1.0625rem; border-radius: 5px; }

/* ---------- Finanzas ---------- */
.sk-fin { flex: 1; min-height: 0; }
.sk .sk-fintitle { width: 13.75rem; height: 2.375rem; margin: var(--sp-4) 0 var(--sp-4); border-radius: var(--r-row); }
.sk-fkpis { margin-bottom: var(--sp-4); }
.sk .sk-kpi { height: 5.8125rem; border-radius: var(--r-card); }
.sk-fingrid { flex: 1; min-height: 15rem; display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: var(--sp-4); }
.sk .sk-fincard { border-radius: var(--r-card); }

/* ---------- Historial de notificaciones ---------- */
.sk-ntf { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sk-ntf__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.sk-ntf__left { display: flex; align-items: flex-start; gap: var(--sp-3); }
.sk .sk-group { width: 5.625rem; height: 0.8125rem; margin: var(--sp-1) 0 var(--sp-3); border-radius: var(--r-pill); }
.sk-ntf__list { display: flex; flex-direction: column; gap: var(--sp-2); }
.sk .sk-ntfrow { height: 3.5rem; border-radius: var(--r-row); }

/* ---------- Movimientos (dos columnas) ---------- */
/* .movements-split real es `align-items:start`: alto por contenido, no estirado. */
.sk-split { flex: none; }
.sk-col__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.sk .sk-coltitle { width: 6.875rem; height: 0.9375rem; border-radius: var(--r-pill); }
.sk-col__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) 0 var(--sp-1); }
.sk .sk-movrow { height: 4.625rem; border-radius: var(--r-row); }

/* ---------- Presupuestos ---------- */
.sk-presu { flex: 1; min-height: 0; }
.sk-modhead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.sk-presu__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.sk-presu__card { background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: var(--r-card); padding: var(--sp-4); }
.sk-presu__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.sk-presu__tools { display: flex; align-items: center; gap: var(--sp-2); }

/* ---------- Historial (su CSS lo inyecta la vista: acá va propio) ---------- */
.sk-htl { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.sk-htl__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.sk-htl__chips { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.sk .sk-htlchip { height: 1.625rem; border-radius: 999px; }
.sk-htl__body { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-1); }
.sk-htl__group { display: flex; flex-direction: column; gap: var(--sp-2); }
.sk-htl__items { display: flex; flex-direction: column; gap: var(--sp-2); }
.sk .sk-htlitem { height: 3.625rem; border-radius: var(--r-row); }

/* ═══════════════════════════════════════════════════════════
   ESQUELETO DE ARRANQUE — sidebar + topbar + panel
   Reemplaza al spinner: desde el primer pintado se ve la forma del
   sistema. Se retira cuando el rol ya decidió qué módulos van en el
   menú, así que tampoco parpadean ítems que el usuario no puede ver.
═══════════════════════════════════════════════════════════ */
#appBootSkeleton {
  position: fixed; inset: 0; z-index: var(--z-system);
  background: var(--page, #F3F4F6);
  transition: opacity 0.28s ease;
}
#appBootSkeleton.is-out { opacity: 0; pointer-events: none; }
/* `flex-direction: row` explícito: el contenedor también lleva la clase .sk,
   que apila en columna. */
.sk-boot { display: flex; flex-direction: row; gap: var(--sp-2); padding: var(--sp-3); height: 100%; }
.sk-boot__main {
  flex: 1; min-width: 0;
  background: var(--panel); border-radius: var(--r-panel); box-shadow: var(--shadow-panel);
  padding: var(--sp-5) var(--sp-6) var(--sp-6); display: flex; flex-direction: column;
}
.sk-boot__topbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); height: 3.375rem; margin-bottom: var(--sp-1); }
.sk-boot__panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Sidebar: mismas medidas que .haze-sidebar (262px, panel flotante) */
.sk-side {
  width: 16.375rem; flex: 0 0 16.375rem;
  background: var(--panel); border-radius: var(--r-panel); box-shadow: var(--shadow-panel);
  padding: var(--sp-4) var(--sp-3) var(--sp-3); display: flex; flex-direction: column;
}
.sk-side__brand { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-2) var(--sp-5); }
.sk .sk-logo { width: 5.75rem; height: 1.75rem; border-radius: var(--r-pill); }
.sk .sk-sidetoggle { width: 1.75rem; height: 1.75rem; border-radius: var(--r-pill); }
.sk-side__nav { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-4); overflow: hidden; }
.sk-navgroup { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.sk-navitem { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2); }
.sk .sk-navicon { width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; border-radius: var(--r-pill); }
.sk .sk-navlabel { height: 0.8125rem; border-radius: var(--r-pill); }
.sk-side__user { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-2) var(--sp-1); border-top: 1px solid var(--border-color); margin-top: var(--sp-2); }
.sk .sk-avatar { width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: 50%; }
.sk-side__usertext { flex: 1; min-width: 0; }

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

/* ---------- Sección que no pudo cargar (recuperable, sin recargar) ---------- */
.view-error {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); padding: 3rem var(--sp-5); text-align: center;
}
.view-error svg { width: 2.375rem; height: 2.375rem; color: var(--ink-3); }
.view-error__title { font-size: 1.0625rem; font-weight: 800; color: var(--ink); }
.view-error__desc { font-size: var(--t4); font-weight: 500; color: var(--ink-3); max-width: 42ch; line-height: 1.55; }
.view-error .btn { margin-top: var(--sp-1); }
.view-error__detail {
  margin-top: var(--sp-1); font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--t6); font-weight: 600; color: var(--ink-3); opacity: 0.7; max-width: 60ch; word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════
   AJUSTES HAZE-BASE — estilos st-* (paneles, switches, filas, seg)
═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   HAZE — Ajustes (overlay "carta gigante" sobre el sistema)
   Se inyecta desde ajustes.js en todas las páginas. Layout: menú lateral +
   contenido. Adaptado a la identidad HAZE (tokens de styles.css), light/dark.
   ═══════════════════════════════════════════════════════════════════════ */

/* Paneles propios de Urbalimp dentro del overlay (Perfil, Usuarios, Sistema…).
   Antes vivían en un <style> inline dentro del render() de la vista-página;
   ahora que Ajustes es una carta montada en <body>, viven acá. */
.s-card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
}
.s-card-title {
  font-size: var(--t4); font-weight: 700; color: var(--ink);
  margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2);
}
.s-section-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.6px; margin: 0 0 var(--sp-1); color: var(--ink); }
.s-section-sub { font-size: var(--t4); font-weight: 500; color: var(--ink-3); margin: 0 0 var(--sp-5); }

.st-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--scrim);
  display: grid; place-items: center; padding: var(--sp-5);
  animation: fadeIn 0.18s ease;
}
body.dark-mode .st-overlay { background: rgba(0, 0, 0, 0.6); }
.st-overlay[hidden] { display: none; }

/* [hidden] SIEMPRE gana, aunque el elemento tenga una clase con display propio
   (ej. .st-grid{display:grid}) — misma especificidad que la regla nativa del
   navegador, y sin esto el elemento "oculto" seguía viéndose. */
[hidden] { display: none !important; }

/* Más grande que la carta de HAZE-BASE: acá el menú tiene los 16 módulos y
   secciones como Usuarios necesitan ancho para no amontonarse. */
.st-modal {
  position: relative;
  width: min(78.75rem, 96vw);
  height: min(55rem, 92vh);
  background: var(--panel);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-overlay);
  display: grid;
  grid-template-columns: 16.375rem 1fr;
  overflow: hidden;
  animation: rowIn 0.22s var(--ease-active) both;
}
body.dark-mode .st-modal { box-shadow: var(--shadow-overlay); }

.st-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 1.875rem; height: 1.875rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card); color: var(--nav-ink);
  transition: background 0.2s ease, color 0.2s ease;
}
.st-close:hover { background: var(--hover-soft); color: var(--ink); }
.st-close svg { width: 0.9375rem; height: 0.9375rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* ---------- Menú lateral ---------- */
.st-menu {
  background: var(--card);
  padding: var(--sp-4) var(--sp-3);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.st-menu__group { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-2); }
.st-menu__group.is-hidden { display: none; }
.st-menu__label { padding: var(--sp-1) var(--sp-3) var(--sp-1); font-size: var(--t6); font-weight: 700; letter-spacing: 0.6px; color: var(--ink-3); text-transform: uppercase; }
.st-tab {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-nav);
  font-size: var(--t4); font-weight: 500; color: var(--nav-ink);
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.st-tab svg { width: 1.0625rem; height: 1.0625rem; flex: 0 0 1.0625rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.st-tab:hover:not(.is-active) { background: var(--hover-accent); color: var(--ink); transform: translateX(3px); }
.st-tab.is-active { background: var(--menta); color: var(--text-on-accent); font-weight: 700; }

/* ---------- Contenido ---------- */
/* Scroll interno pero SIN barra visible (se pidió quitar la barra de la derecha). */
.st-content { padding: var(--sp-6) var(--sp-6); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.st-content::-webkit-scrollbar { width: 0; height: 0; display: none; }
.st-panel { display: none; animation: setIn 0.22s ease both; max-width: 38.75rem; }
.st-panel.is-active { display: block; }
@keyframes setIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.st-h { margin: 0 0 var(--sp-1); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.6px; color: var(--ink); }
.st-sub { margin: 0 0 var(--sp-5); font-size: var(--t4); font-weight: 500; color: var(--ink-3); }
.st-section { margin-top: var(--sp-5); }
.st-section--first { margin-top: 0; }
.st-section__title { font-size: var(--t2); font-weight: 800; color: var(--ink); margin: 0 0 var(--sp-1); }
.st-section__desc { font-size: var(--t4); font-weight: 500; color: var(--ink-3); margin: 0 0 var(--sp-3); }
.st-divider { height: 1.5px; background: var(--line); border: none; margin: var(--sp-5) 0; }

/* ---------- Estado vacío (módulos sin ajustes propios todavía) ---------- */
.st-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-2); padding: 3rem var(--sp-5); border: 1.5px dashed var(--line); border-radius: var(--r-card);
}
.st-empty svg { width: 2.125rem; height: 2.125rem; stroke: var(--dashed); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.st-empty__title { font-size: 0.875rem; font-weight: 700; color: var(--ink); }
.st-empty__desc { font-size: var(--t4); font-weight: 500; color: var(--ink-3); max-width: 36ch; line-height: 1.5; }

/* ---------- Perfil: cabecera ---------- */
.st-profile { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.st-avatar { width: 4.5rem; height: 4.5rem; flex: 0 0 4.5rem; border-radius: 50%; background: var(--avbg); display: grid; place-items: center; }
.st-avatar img { width: 2.375rem; height: 2.375rem; object-fit: contain; }
body.dark-mode .st-avatar img { filter: brightness(0) invert(1); }
.st-profile__name { font-size: 1.125rem; font-weight: 800; color: var(--ink); }
.st-profile__role { margin-top: 2px; font-size: var(--t4); font-weight: 500; color: var(--ink-3); }
.st-profile__btn { margin-left: auto; font-size: var(--t5); font-weight: 700; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); background: var(--row); color: var(--nav-ink); transition: background 0.2s ease; }
.st-profile__btn:hover { background: var(--hover-soft); }

/* ---------- Formularios ---------- */
.st-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
.st-field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.st-field--full { grid-column: 1 / -1; }
.st-label { font-size: var(--t4); font-weight: 600; color: var(--nav-ink); }
.st-input, .st-select {
  font-family: inherit; font-size: var(--t4); font-weight: 500; color: var(--ink);
  background: var(--card); border: 1.5px solid transparent; border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-3); outline: none; transition: border-color 0.2s ease;
}
.st-input:focus, .st-select:focus { border-color: var(--celeste); }
.st-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }
.st-actions--start { justify-content: flex-start; }
.st-btn { font-size: var(--t4); font-weight: 700; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); transition: background 0.2s ease, filter 0.2s ease, transform 0.2s ease; }
.st-btn--ghost { background: var(--card); color: var(--nav-ink); }
.st-btn--ghost:hover { background: var(--hover-soft); }
.st-btn--primary { background: var(--menta); color: var(--text-on-accent); }
.st-btn--primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.st-btn--danger { background: transparent; color: var(--status-red); border: 1.5px solid rgba(226,75,74,0.4); }
.st-btn--danger:hover { background: rgba(226,75,74,0.1); }

/* ---------- Filas de opción / acción ---------- */
.st-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) 2px; border-bottom: 1.5px solid var(--line); }
.st-row:last-child { border-bottom: none; }
.st-row__text { flex: 1; min-width: 0; }
.st-row__title { font-size: var(--t4); font-weight: 600; color: var(--ink); }
.st-row__desc { margin-top: 2px; font-size: var(--t5); font-weight: 500; color: var(--ink-3); line-height: 1.45; }
.st-row__val { font-size: var(--t4); font-weight: 500; color: var(--ink-3); margin-top: 2px; }

/* ---------- Switch ---------- */
.st-switch { position: relative; width: 2.625rem; height: 1.5rem; flex: 0 0 2.625rem; }
.st-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.st-switch__track { position: absolute; inset: 0; border-radius: 999px; background: var(--cell-empty); transition: background 0.2s ease; pointer-events: none; }
.st-switch__track::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #FFFFFF; box-shadow: var(--shadow-panel); transition: transform 0.2s var(--ease-active); }
.st-switch input:checked + .st-switch__track { background: var(--menta); }
.st-switch input:checked + .st-switch__track::after { transform: translateX(18px); }
.st-switch input:focus-visible + .st-switch__track { outline: 2px solid var(--celeste); outline-offset: 2px; }

/* ---------- Segmented (tema) ---------- */
.st-seg { display: inline-flex; background: var(--card); border-radius: var(--r-pill); padding: var(--sp-1); gap: 2px; }
.st-seg__btn { font-size: var(--t4); font-weight: 700; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); background: transparent; color: var(--ink-3); transition: background 0.2s ease, color 0.2s ease; }
.st-seg__btn.is-active { background: var(--menta); color: var(--text-on-accent); }

/* ---------- Panel (ancho de lectura del contenido) ----------
   Igual que .st-panel de HAZE-BASE, pero como carta (Usuarios y Sistema piden
   todo el ancho, el resto se lee mejor en columna angosta). */
.st-pane { max-width: 38.75rem; animation: setIn 0.22s ease both; }
.st-pane--wide { max-width: none; }
.st-hint { font-size: var(--t5); font-weight: 500; line-height: 1.5; color: var(--ink-3); margin: var(--sp-1) 0 0; }
/* Estado de sincronización de Finanzas con Firebase: el color dice si hace
   falta hacer algo (rojo) o si sólo está esperando red (ámbar). */
.st-sync { max-width: 58ch; }
.st-sync--ok { color: var(--fin-pos); font-weight: 600; }
.st-sync--error { color: var(--status-red); font-weight: 600; }
.st-sync--aviso { color: #b26a00; font-weight: 600; }
.st-sync--info { color: var(--ink-3); }
.st-status { font-size: var(--t5); font-weight: 500; color: var(--ink-3); margin-right: auto; }
.st-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t4); font-weight: 500; color: var(--ink); }
.st-btn--sm { font-size: var(--t4); font-weight: 600; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); }

/* Perfil: la foto es un input file disfrazado de botón */
.st-avatar { overflow: hidden; }
.st-avatar img { width: 100%; height: 100%; object-fit: cover; }
.st-avatar__ph { width: 2.125rem; height: 2.125rem; color: var(--ink-3); }
.st-profile__btn { cursor: pointer; }

/* ---------- Chips de estado ---------- */
.st-chip { font-size: var(--t6); font-weight: 700; letter-spacing: 0.2px; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); background: var(--row); color: var(--nav-ink); white-space: nowrap; }
.st-chip--ok { background: var(--menta); color: var(--text-on-accent); }
.st-chip--off { background: var(--cell-empty); color: var(--ink-3); }

/* ---------- Tabla (Usuarios) ---------- */
.st-tablewrap { overflow-x: auto; }
.st-table { width: 100%; border-collapse: collapse; }
.st-table th {
  text-align: left; padding: 0 var(--sp-3) var(--sp-2); white-space: nowrap;
  font-size: var(--t6); font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-3);
}
.st-table td { padding: var(--sp-3); border-top: 1.5px solid var(--line); font-size: var(--t4); font-weight: 500; color: var(--ink); vertical-align: middle; }
.st-table__r { text-align: right; }
.st-table__empty { padding: var(--sp-6) var(--sp-3); text-align: center; font-size: var(--t4); font-weight: 500; color: var(--ink-3); }
.st-table__actions { display: flex; gap: var(--sp-1); flex-wrap: wrap; justify-content: flex-end; }
.st-user { display: flex; align-items: center; gap: var(--sp-2); }
.st-thumb { width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem; border-radius: 50%; object-fit: cover; }
.st-thumb--ph { display: grid; place-items: center; background: var(--card); color: var(--ink-3); font-size: var(--t6); font-weight: 700; }

/* ---------- Barra de progreso (backup) ---------- */
.st-bar { height: 0.4375rem; margin-top: var(--sp-2); border-radius: var(--r-pill); background: var(--cell-empty); overflow: hidden; }
.st-bar span { display: block; height: 100%; width: 0; background: var(--celeste); transition: width 0.15s ease; }

/* ---------- Zona de peligro ---------- */
.st-danger { border: 1.5px solid rgba(226, 75, 74, 0.32); background: rgba(226, 75, 74, 0.06); border-radius: var(--r-card); padding: var(--sp-1) var(--sp-4); }
.st-danger .st-row { border-bottom: none; }

/* ---------- ID de usuario ---------- */
.st-userid { display: flex; align-items: center; gap: var(--sp-2); background: var(--card); border-radius: var(--r-pill); padding: var(--sp-3) var(--sp-3); }
.st-userid__val { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t5); font-weight: 500; color: var(--ink-3); word-break: break-all; }
.st-userid__copy { margin-left: auto; flex: none; width: 1.875rem; height: 1.875rem; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--ink-3); background: var(--row); transition: background 0.2s ease, color 0.2s ease; }
.st-userid__copy:hover { background: var(--hover-soft); color: var(--ink); }
.st-userid__copy svg { width: 0.9375rem; height: 0.9375rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 900px) {
  .st-modal { grid-template-columns: 1fr; }
  .st-menu { flex-direction: row; overflow-x: auto; padding: var(--sp-3); gap: var(--sp-1); }
  .st-menu__group { flex-direction: row; margin-bottom: 0; }
  .st-menu__label { display: none; }
  .st-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ═══ FASE 11: MICRO-INTERACCIONES globales (valores HAZE) ═══ */
/* Tooltip liviano por atributo data-tip (mismo tratamiento que el tooltip
   del chart HAZE: tinta azul de marca, radio 10px, fade+rise 180ms ease,
   delay de aparición 350ms) */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  max-width: 15rem;
  width: max-content;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--project-ink, #0E2A47);
  color: #F4F7FB;
  font-size: var(--t5);
  font-weight: 500;
  line-height: 1.4;
  box-shadow: var(--shadow-overlay);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: var(--z-popover);
}
[data-tip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 0.1875rem);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--project-ink, #0E2A47);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s;
  z-index: var(--z-popover);
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: 0.35s; }
[data-tip]:hover::before,
[data-tip]:focus-visible::before { opacity: 1; visibility: visible; transition-delay: 0.35s; }

/* Feedback al presionar (patrón HAZE) */
.btn:active,
.sb-btn:active,
.icon-btn:active,
.cal-btn:active { transform: translateY(0) scale(0.985); }

/* Tooltips del topbar: apuntan hacia abajo (no hay espacio arriba) */
.header [data-tip]::after { bottom: auto; top: calc(100% + 0.5rem); transform: translateX(-50%) translateY(-4px); }
.header [data-tip]:hover::after,
.header [data-tip]:focus-visible::after { transform: translateX(-50%) translateY(0); }
.header [data-tip]::before { bottom: auto; top: calc(100% + 0.1875rem); border-top-color: transparent; border-bottom-color: var(--project-ink, #0E2A47); }
.header { overflow: visible; }

/* ═══════════════════════════════════════════════════════════════════════════
   MÓDULO RRHH — Panel General, Personal, Presentismo, Documentación y
   Capacitaciones.  Namespace .hz-rh / .rh-* ; 100% token-driven: el modo
   oscuro (body.dark-mode) entra solo por los alias re-mapeados.
   ═══════════════════════════════════════════════════════════════════════════ */

.hz-rh { display: flex; flex-direction: column; gap: var(--sp-4); flex: 1; min-height: 0; }

/* ── Cabecera de pantalla ── */
.hz-rh .rh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.hz-rh .rh-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; letter-spacing: -1px; color: var(--text-primary); margin: 0; }
.hz-rh .rh-sub { font-size: var(--t4); font-weight: 500; color: var(--text-muted); margin-top: var(--sp-1); }
.hz-rh .rh-head__acts { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ── Botones ── */
.hz-rh .rh-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: 600 0.8125rem var(--font-family); color: var(--text-primary);
  background: var(--panel-bg); border: 1px solid var(--border-color);
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-3); cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s var(--ease-active);
}
.hz-rh .rh-btn:hover { background: var(--hover-soft); }
.hz-rh .rh-btn:active { transform: scale(.985); }
.hz-rh .rh-btn svg { width: 0.9375rem; height: 0.9375rem; }
.hz-rh .rh-btn--primary { background: var(--azul); border-color: var(--azul); color: #FFFFFF; }
.hz-rh .rh-btn--primary:hover { background: var(--primary-hover); }
.hz-rh .rh-btn--sm { padding: var(--sp-2) var(--sp-3); font-size: var(--t4); font-weight: 500; border-radius: var(--r-pill); }
.hz-rh .rh-btn:disabled { opacity: .55; cursor: default; }

/* Chip del período (Panel) */
.hz-rh .rh-periodo {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--panel-bg); border: 1px solid var(--border-color);
  border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-2);
}
.hz-rh .rh-periodo svg { width: 0.9375rem; height: 0.9375rem; stroke: var(--text-muted); fill: none; }
.hz-rh .rh-periodo select {
  border: none; background: transparent; color: var(--text-primary);
  font: 600 0.8125rem var(--font-family); cursor: pointer; outline: none;
}

/* ── KPIs ── */
.hz-rh .rh-kpis { display: grid; gap: var(--sp-3); }
.hz-rh .rh-kpis--6 { grid-template-columns: repeat(6, 1fr); }
.hz-rh .rh-kpis--5 { grid-template-columns: repeat(5, 1fr); }
.hz-rh .rh-kpi {
  text-align: left; background: var(--panel-bg); border: 1px solid var(--border-color);
  border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); cursor: pointer;
  display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0;
  transition: border-color .15s, box-shadow .15s, transform .12s var(--ease-active);
}
.hz-rh .rh-kpi:hover { border-color: var(--celeste); box-shadow: var(--shadow-panel); }
.hz-rh .rh-kpi:active { transform: scale(.99); }
.hz-rh .rh-kpi--static { cursor: default; }
.hz-rh .rh-kpi--static:hover { border-color: var(--border-color); box-shadow: none; }
.hz-rh .rh-kpi__top { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.hz-rh .rh-kpi__label { font-size: var(--t4); font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-rh .rh-kpi__num { font-family: var(--font-display); font-size: 1.875rem; font-weight: 800; letter-spacing: -1px; color: var(--text-primary); line-height: 1.05; }
.hz-rh .rh-kpi__sub { font-size: var(--t5); font-weight: 500; color: var(--text-muted); }
.hz-rh .rh-kpi__trend { font-size: var(--t5); font-weight: 700; }
.hz-rh .rh-kpi__trend--up { color: var(--status-green); }
.hz-rh .rh-kpi__trend--down { color: var(--status-red); }
.hz-rh .rh-kpi__trend--flat { color: var(--text-muted); }

/* Cuadrados de icono por tono (KPIs, alertas, indicadores, accesos) */
.hz-rh .rh-kpi__ico {
  width: 2.125rem; height: 2.125rem; flex: 0 0 2.125rem; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
}
.hz-rh .rh-kpi__ico svg { width: 1.0625rem; height: 1.0625rem; }
.hz-rh .rh-kpi__ico--green  { background: var(--status-green-bg);  color: var(--status-green); }
.hz-rh .rh-kpi__ico--blue   { background: var(--status-blue-bg);   color: var(--status-blue); }
.hz-rh .rh-kpi__ico--red    { background: var(--status-red-bg);    color: var(--status-red); }
.hz-rh .rh-kpi__ico--orange { background: var(--status-orange-bg); color: var(--status-orange); }
.hz-rh .rh-kpi__ico--violet { background: var(--status-purple-bg); color: var(--status-purple); }
.hz-rh .rh-kpi__ico--teal   { background: rgba(58, 168, 160, .16); color: #2E8B84; }
.hz-rh .rh-kpi__ico--mute   { background: var(--status-gray-bg);   color: var(--status-gray); }
body.dark-mode .hz-rh .rh-kpi__ico--teal { color: #6FC7C0; }

/* ── Tarjetas ── */
.hz-rh .rh-card {
  background: var(--panel-bg); border: 1px solid var(--border-color);
  border-radius: var(--r-panel); padding: var(--sp-4); min-width: 0;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.hz-rh .rh-card__t {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--t2); font-weight: 800; color: var(--text-primary); letter-spacing: -.2px;
}
.hz-rh .rh-card__t svg { width: 1rem; height: 1rem; color: var(--text-muted); }
.hz-rh .rh-card__t--fila { justify-content: space-between; }
.hz-rh .rh-prom { font-size: var(--t5); font-weight: 700; color: var(--celeste); }

/* Grillas del Panel */
.hz-rh .rh-grid { display: grid; gap: var(--sp-3); align-items: stretch; }
.hz-rh .rh-grid--fila2 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 1.25fr); }
.hz-rh .rh-grid--fila3 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.15fr); }
.hz-rh .rh-grid--fila4 { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); }

/* ── Dona SVG ── */
.hz-rh .rh-dona-wrap { display: flex; align-items: center; gap: var(--sp-4); flex: 1; }
.hz-rh .rh-dona { position: relative; flex: 0 0 auto; margin: 0 auto; }
.hz-rh .rh-dona svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hz-rh .rh-dona__centro {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; pointer-events: none;
}
.hz-rh .rh-dona__num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.hz-rh .rh-dona__sub { font-size: var(--t6); font-weight: 600; color: var(--text-muted); max-width: 5.25rem; margin-top: var(--sp-1); line-height: 1.25; }
.hz-rh .rh-indice { display: flex; justify-content: center; }

/* Leyendas con punto */
.hz-rh .rh-dot { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; flex: 0 0 0.5625rem; display: inline-block; background: var(--ink-3); }
.hz-rh .rh-dot--ok   { background: var(--status-green); }
.hz-rh .rh-dot--warn { background: var(--status-yellow); }
.hz-rh .rh-dot--bad  { background: var(--status-red); }
.hz-rh .rh-dot--nov-ok     { background: #4caf7d; }
.hz-rh .rh-dot--nov-warn   { background: #e0b53f; }
.hz-rh .rh-dot--nov-violet { background: #8e7cc3; }
.hz-rh .rh-dot--nov-bad    { background: var(--status-red); }
.hz-rh .rh-dot--nov-info   { background: #66B7CF; }
.hz-rh .rh-dot--nov-mute   { background: #9aa0aa; }
.hz-rh .rh-dot--nov-teal   { background: #3aa8a0; }
.hz-rh .rh-dot--nov-brown  { background: #a97b45; }
.hz-rh .rh-leyenda { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; flex: 1; }
.hz-rh .rh-leyenda__fila { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t4); font-weight: 500; color: var(--text-secondary); }
.hz-rh .rh-leyenda__n { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-rh .rh-leyenda__v { font-weight: 700; color: var(--text-primary); white-space: nowrap; }

/* ── Barras "Estado del personal" ── */
.hz-rh .rh-barras { display: flex; align-items: flex-end; justify-content: space-around; gap: var(--sp-2); flex: 1; min-height: 9.375rem; padding: var(--sp-1) var(--sp-1) 0; }
.hz-rh .rh-barra { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); flex: 1; max-width: 4.75rem; height: 100%; }
.hz-rh .rh-barra__v { font-size: var(--t4); font-weight: 800; color: var(--text-primary); }
.hz-rh .rh-barra__col { flex: 1; width: 100%; max-width: 2.75rem; display: flex; align-items: flex-end; background: var(--card); border-radius: var(--r-pill); overflow: hidden; min-height: 5.625rem; }
.hz-rh .rh-barra__fill { width: 100%; border-radius: var(--r-pill) var(--r-pill) 0 0; transition: height .35s ease; }
.hz-rh .rh-barra__n { font-size: var(--t6); font-weight: 600; color: var(--text-muted); }

/* ── Novedades ── */
.hz-rh .rh-novs { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.hz-rh .rh-nov { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t4); font-weight: 500; color: var(--text-secondary); }
.hz-rh .rh-nov__n { flex: 1; }
.hz-rh .rh-nov__v { font-weight: 800; color: var(--text-primary); }
.hz-rh .rh-nov--total { border-top: 1px solid var(--border-color); padding-top: var(--sp-2); font-weight: 700; color: var(--text-primary); }

/* ── Alertas y pendientes ── */
.hz-rh .rh-alertas { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
.hz-rh .rh-alerta {
  display: flex; align-items: center; gap: var(--sp-2); text-align: left; width: 100%;
  padding: var(--sp-2) var(--sp-2); border-radius: var(--r-pill); cursor: pointer;
  transition: background .13s;
}
.hz-rh .rh-alerta:hover { background: var(--hover-soft); }
.hz-rh .rh-alerta__ico { width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; }
.hz-rh .rh-alerta__ico svg { width: 0.875rem; height: 0.875rem; }
.hz-rh .rh-alerta__n { flex: 1; font-size: var(--t4); font-weight: 500; color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-rh .rh-alerta__c {
  min-width: 1.5rem; height: 1.3125rem; border-radius: var(--r-pill); padding: 0 var(--sp-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t5); font-weight: 800; background: var(--status-red-bg); color: var(--status-red);
}
.hz-rh .rh-alerta__c.is-cero { background: var(--status-gray-bg); color: var(--status-gray); }

/* Chips */
.hz-rh .rh-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--t5); font-weight: 700; color: var(--text-secondary);
  background: var(--card); border: 1px solid var(--border-color);
  border-radius: 999px; padding: var(--sp-1) var(--sp-2); cursor: pointer; white-space: nowrap;
}
.hz-rh .rh-chip:hover { background: var(--hover-soft); }
.hz-rh .rh-chip--rojo { background: var(--status-red-bg); border-color: transparent; color: var(--status-red); }
.hz-rh .rh-chip--naranja { background: var(--status-orange-bg); border-color: transparent; color: var(--status-orange); }
.hz-rh .rh-chip--filtro { cursor: default; }
.hz-rh .rh-chip--filtro button { border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: var(--t5); font-weight: 500; padding: 0 0 0 2px; }
.hz-rh .rh-chip--filtro button:hover { color: var(--status-red); }

/* ── Tablas (grid rows) ── */
.hz-rh .rh-tscroll { overflow-x: auto; }
.hz-rh .rh-thead,
.hz-rh .rh-trow { display: grid; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
.hz-rh .rh-thead {
  font-size: var(--t6); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); background: var(--table-header-bg); border-radius: var(--r-pill);
}
.hz-rh .rh-trow { border-bottom: 1px solid var(--border-light); font-size: var(--t4); font-weight: 500; color: var(--text-primary); border-radius: var(--r-pill); }
.hz-rh .rh-trow:last-child { border-bottom: none; }
.hz-rh .rh-trow:hover { background: var(--table-row-hover); }
.hz-rh .rh-trow.is-sel { background: var(--primary-dim); }
.hz-rh .rh-trow > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hz-rh .rh-mono { font-family: var(--font-mono); font-size: var(--t5); font-weight: 500; }
.hz-rh .rh-trow--5 { grid-template-columns: 1.6fr 1.1fr 0.9fr 0.5fr 0.9fr; min-width: 32.5rem; }
.hz-rh .rh-tabla-mini { display: flex; flex-direction: column; overflow-x: auto; }

/* Persona (avatar + nombre + sub) */
.hz-rh .rh-emp { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.hz-rh .rh-emp > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.hz-rh .rh-emp__n { font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-rh .rh-emp__s { font-size: var(--t6); font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-rh .rh-avatar {
  width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t6); font-weight: 800; color: #FFFFFF; letter-spacing: .3px;
}
.hz-rh .rh-avatar--xl { width: 3.25rem; height: 3.25rem; flex: 0 0 3.25rem; font-size: 1.0625rem; }

/* ── Píldoras de estado ── */
.hz-rh .rh-pill {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--t6); font-weight: 700; border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-2); white-space: nowrap;
}
.hz-rh .rh-pill--ok     { background: var(--status-green-bg);  color: var(--status-green); }
.hz-rh .rh-pill--warn   { background: var(--status-yellow-bg); color: var(--status-yellow); }
.hz-rh .rh-pill--bad    { background: var(--status-red-bg);    color: var(--status-red); }
.hz-rh .rh-pill--mute   { background: var(--status-gray-bg);   color: var(--status-gray); }
.hz-rh .rh-pill--info   { background: var(--status-blue-bg);   color: var(--status-blue); }
.hz-rh .rh-pill--violet { background: var(--status-purple-bg); color: var(--status-purple); }
.hz-rh .rh-pill--teal   { background: rgba(58, 168, 160, .16); color: #2E8B84; }
.hz-rh .rh-pill--brown  { background: rgba(169, 123, 69, .16); color: #8a6236; }
body.dark-mode .hz-rh .rh-pill--teal  { color: #6FC7C0; }
body.dark-mode .hz-rh .rh-pill--brown { color: #D9A96E; }
.hz-rh .rh-pill--conv  { background: var(--status-blue-bg); color: var(--status-blue); }
.hz-rh .rh-pill--conv2 { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); }

/* ── Cumpleaños ── */
.hz-rh .rh-cumples { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.hz-rh .rh-cumple { display: flex; align-items: center; gap: var(--sp-2); }
.hz-rh .rh-cumple__d { flex: 1; min-width: 0; }
.hz-rh .rh-cumple__n { font-size: var(--t4); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-rh .rh-cumple__e { font-size: var(--t6); font-weight: 600; color: var(--text-muted); }
.hz-rh .rh-cumple__f {
  font-family: var(--font-mono); font-size: var(--t5); font-weight: 700;
  color: var(--status-green); background: var(--status-green-bg);
  border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-2);
}
.hz-rh .rh-cumples__pie {
  display: flex; align-items: center; gap: var(--sp-2); border-top: 1px solid var(--border-color);
  padding-top: var(--sp-2); font-size: var(--t5); font-weight: 500; color: var(--text-muted);
}
.hz-rh .rh-cumples__pie svg { width: 0.875rem; height: 0.875rem; }

/* ── Ministats de presentismo ── */
.hz-rh .rh-ministats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.hz-rh .rh-ministat { background: var(--card); border-radius: var(--r-row); padding: var(--sp-2) var(--sp-2); text-align: center; min-width: 0; }
.hz-rh .rh-ministat__l { font-size: var(--t6); font-weight: 600; color: var(--text-muted); display: flex; flex-direction: column; line-height: 1.3; }
.hz-rh .rh-ministat__l small { font-size: var(--t6); font-weight: 600; }
.hz-rh .rh-ministat__v { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 800; color: var(--text-primary); margin-top: 2px; }

/* ── Histórico (haze-chart en tinta celeste) ── */
.hz-rh .rh-histo { flex: 1; min-height: 12.5rem; }
.hz-rh .rh-histo .haze-net-line--pos { stroke: var(--celeste); }
.hz-rh .rh-histo .haze-net-dot--pos { fill: var(--panel-bg); stroke: var(--celeste); }
.hz-rh .rh-histo .hz-area-stop-pos-0 { stop-color: rgba(0, 135, 175, .30); }
.hz-rh .rh-histo .hz-area-stop-pos-1 { stop-color: rgba(0, 135, 175, 0); }
.hz-rh .rh-histo .haze-chart__legend { display: none; }

/* ── Accesos rápidos ── */
.hz-rh .rh-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); flex: 1; }
.hz-rh .rh-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--card); border: 1px solid transparent; border-radius: var(--r-card);
  padding: var(--sp-4) var(--sp-2); font-size: var(--t5); font-weight: 600; color: var(--text-secondary);
  cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s, transform .12s var(--ease-active);
}
.hz-rh .rh-tile:hover { border-color: var(--celeste); background: var(--hover-soft); }
.hz-rh .rh-tile:active { transform: scale(.98); }

/* ── Piezas de UI compartidas ── */
.hz-rh .rh-link {
  align-self: center; border: none; background: none; cursor: pointer;
  font: 600 var(--t4) var(--font-family); color: var(--link); padding: var(--sp-1) var(--sp-1);
}
.hz-rh .rh-link:hover { text-decoration: underline; }
.hz-rh .rh-link--inline { align-self: auto; padding: 0; font-size: var(--t5); font-weight: 500; }


.hz-rh .rh-vacio { padding: var(--sp-5) var(--sp-3); text-align: center; font-size: var(--t4); font-weight: 500; color: var(--text-muted); }
.hz-rh .rh-vacio--panel { margin: auto; }

.hz-rh .rh-search {
  position: relative; display: flex; align-items: center; flex: 0 1 18.75rem; min-width: 10.625rem;
}
.hz-rh .rh-search svg { position: absolute; left: 0.6875rem; width: 0.875rem; height: 0.875rem; color: var(--text-muted); pointer-events: none; }
.hz-rh .rh-search input {
  width: 100%; background: var(--input-bg); border: 1.5px solid var(--input-border);
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-6);
  font: 500 0.8125rem var(--font-family); color: var(--input-text); outline: none;
  transition: border-color .15s;
}
.hz-rh .rh-search input::placeholder { color: var(--input-placeholder); }
.hz-rh .rh-search input:focus { border-color: var(--input-focus); }
.hz-rh .rh-search--ancha { flex: 1 1 20rem; }

.hz-rh .rh-select {
  background: var(--input-bg); border: 1.5px solid var(--input-border);
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-2); min-width: 0;
  font: 500 0.8125rem var(--font-family); color: var(--input-text); outline: none; cursor: pointer;
  transition: border-color .15s;
}
.hz-rh .rh-select:focus { border-color: var(--input-focus); }
.hz-rh .rh-select--sm { padding: var(--sp-1) var(--sp-2); font-size: var(--t5); font-weight: 500; border-radius: var(--r-pill); }

/* Tabs */
.hz-rh .rh-tabs { display: flex; gap: 2px; }
.hz-rh .rh-tabs--panel { background: var(--card); border-radius: var(--r-pill); padding: var(--sp-1); }
.hz-rh .rh-tabs--panel .rh-tab {
  flex: 1; border: none; background: none; cursor: pointer; border-radius: var(--r-pill);
  font: 600 0.75rem var(--font-family); color: var(--text-secondary); padding: var(--sp-2) var(--sp-1);
}
.hz-rh .rh-tabs--panel .rh-tab.is-active { background: var(--panel-bg); color: var(--text-primary); box-shadow: var(--shadow-panel); }
.hz-rh .rh-tabs--linea { gap: var(--sp-4); border-bottom: 1px solid var(--border-color); }
.hz-rh .rh-tabs--linea .rh-tab {
  border: none; background: none; cursor: pointer;
  font: 600 0.8125rem var(--font-family); color: var(--text-muted);
  padding: var(--sp-2) 2px var(--sp-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.hz-rh .rh-tabs--linea .rh-tab:hover { color: var(--text-primary); }
.hz-rh .rh-tabs--linea .rh-tab.is-active { color: var(--azul-soft-text); border-bottom-color: var(--azul); }
body.dark-mode .hz-rh .rh-tabs--linea .rh-tab.is-active { color: var(--celeste); border-bottom-color: var(--celeste); }

/* Paginación */
.hz-rh .rh-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding-top: var(--sp-1); }
.hz-rh .rh-pager__info { font-size: var(--t5); font-weight: 500; color: var(--text-muted); }
.hz-rh .rh-pager__nav { display: flex; align-items: center; gap: var(--sp-1); }
.hz-rh .rh-pgbtn {
  min-width: 1.875rem; height: 1.875rem; border-radius: var(--r-pill); border: 1px solid var(--border-color);
  background: var(--panel-bg); color: var(--text-secondary);
  font: 600 0.8125rem var(--font-family); cursor: pointer; padding: 0 var(--sp-2);
}
.hz-rh .rh-pgbtn:hover:not(:disabled) { background: var(--hover-soft); }
.hz-rh .rh-pgbtn.is-active { background: var(--azul); border-color: var(--azul); color: #FFFFFF; }
.hz-rh .rh-pgbtn:disabled { opacity: .4; cursor: default; }
.hz-rh .rh-pgdots { font-size: var(--t5); font-weight: 500; color: var(--text-muted); padding: 0 var(--sp-1); }
.hz-rh .rh-pager__pp { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t5); font-weight: 500; color: var(--text-muted); }

/* Kebab / icon buttons */
.hz-rh .rh-kebab {
  width: 1.75rem; height: 1.75rem; border-radius: var(--r-pill); border: none; background: none;
  color: var(--text-muted); font-size: var(--t2); font-weight: 800; cursor: pointer; line-height: 1;
}
.hz-rh .rh-kebab:hover { background: var(--hover-soft); color: var(--text-primary); }
.hz-rh .rh-iconbtn {
  width: 1.75rem; height: 1.75rem; border-radius: var(--r-pill); border: none; background: none;
  color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.hz-rh .rh-iconbtn svg { width: 0.875rem; height: 0.875rem; }
.hz-rh .rh-iconbtn:hover { background: var(--hover-soft); color: var(--azul-soft-text); }
.hz-rh .rh-iconbtn--danger:hover { color: var(--status-red); background: var(--status-red-bg); }
body.dark-mode .hz-rh .rh-iconbtn:hover { color: var(--celeste); }

/* Menú contextual (se monta en <body>) */
.rh-menu {
  position: fixed; z-index: var(--z-popover); min-width: 12.1875rem;
  background: var(--panel-bg); border: 1px solid var(--border-color);
  border-radius: var(--r-row); padding: var(--sp-1); box-shadow: var(--shadow-overlay);
  display: flex; flex-direction: column;
}
.rh-menu__item {
  text-align: left; border: none; background: none; cursor: pointer;
  font: 600 0.8125rem var(--font-family); color: var(--text-primary);
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-3);
}
.rh-menu__item:hover { background: var(--hover-soft); }
.rh-menu__item.is-danger { color: var(--status-red); }
.rh-menu__item.is-danger:hover { background: var(--status-red-bg); }
.rh-menu--form { padding: var(--sp-3); gap: var(--sp-2); min-width: 14.375rem; }
.rh-menu__campo { display: flex; flex-direction: column; gap: var(--sp-1); font: 600 0.75rem var(--font-family); color: var(--text-muted); }
.rh-menu--form .rh-select { width: 100%; background: var(--card); }
.rh-menu--form .rh-btn { justify-content: center; }
.rh-menu--form .rh-btn,
.rh-menu .rh-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2); font: 600 0.8125rem var(--font-family);
  color: var(--text-primary); background: var(--card); border: 1px solid var(--border-color);
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-3); cursor: pointer;
}

/* Banner de nota */
.hz-rh .rh-nota {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  background: var(--status-blue-bg); border: 1px solid rgba(0, 135, 175, .35);
  border-radius: var(--r-row); padding: var(--sp-3) var(--sp-3); font-size: var(--t4); font-weight: 500; color: var(--text-secondary);
}
.hz-rh .rh-nota svg { width: 0.9375rem; height: 0.9375rem; flex: 0 0 0.9375rem; color: var(--status-blue); }
.hz-rh .rh-nota b { color: var(--text-primary); }
.hz-rh .rh-nota__act { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--t5); font-weight: 500; color: var(--text-muted); }
.hz-rh .rh-nota__refresh {
  border: none; background: none; cursor: pointer; color: var(--text-muted);
  font-size: var(--t2); font-weight: 700; line-height: 1; padding: 2px var(--sp-1); border-radius: var(--r-pill);
}
.hz-rh .rh-nota__refresh:hover { background: var(--hover-soft); color: var(--text-primary); }

.rh-modal-hint { font-size: var(--t5); font-weight: 500; color: var(--text-muted); margin-top: var(--sp-2); }

/* Cerrar panel */
.hz-rh .rh-panel__x {
  position: absolute; top: 0.75rem; right: 0.75rem; width: 1.625rem; height: 1.625rem;
  border: none; background: var(--card); color: var(--text-muted);
  border-radius: var(--r-pill); cursor: pointer; font-size: var(--t5); font-weight: 500; line-height: 1;
}
.hz-rh .rh-panel__x:hover { color: var(--text-primary); background: var(--hover-soft); }

/* ═════════ PERSONAL ═════════ */
.hz-rh .rhp-cols { display: grid; grid-template-columns: 1fr 21.875rem; gap: var(--sp-3); align-items: start; }
.hz-rh .rhp-main { gap: var(--sp-2); }
.hz-rh .rhp-tools { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.hz-rh .rhp-tools__t {
  display: flex; align-items: center; gap: var(--sp-2); margin-right: auto;
  font-size: 0.875rem; font-weight: 800; color: var(--text-primary);
}
.hz-rh .rhp-tools__t svg { width: 1rem; height: 1rem; color: var(--text-muted); }
.hz-rh .rhp-row { grid-template-columns: 1.875rem 1.8fr 3.875rem 1.1fr 1.15fr 1fr 0.85fr 0.7fr 1.05fr 1.05fr 2.125rem; min-width: 66.25rem; }
.hz-rh .rhp-row input[type="checkbox"] { accent-color: var(--azul); cursor: pointer; }

.hz-rh .rhp-panel { position: sticky; top: 0.625rem; max-height: calc(100vh - 3.75rem); overflow-y: auto; }
.hz-rh .rhp-ficha__head { display: flex; align-items: center; gap: var(--sp-3); padding-right: var(--sp-5); }
.hz-rh .rhp-ficha__nombre { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: 1rem; font-weight: 800; color: var(--text-primary); letter-spacing: -.2px; }
.hz-rh .rhp-ficha__sub { font-size: var(--t5); font-weight: 500; color: var(--text-muted); margin-top: 2px; }
.hz-rh .rhp-ficha__body { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.hz-rh .rhp-ficha__foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); border-top: 1px solid var(--border-color); padding-top: var(--sp-3); }
.hz-rh .rhp-ficha__foot .rh-btn { justify-content: center; }

.hz-rh .rhp-grupo { display: flex; flex-direction: column; gap: var(--sp-2); }
.hz-rh .rhp-grupo__t { font-size: var(--t4); font-weight: 800; color: var(--text-primary); }
.hz-rh .rhp-grupo__t--fila { display: flex; align-items: center; justify-content: space-between; }
.hz-rh .rhp-datos { display: flex; flex-direction: column; gap: 1px; }
.hz-rh .rhp-dato {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--t5); font-weight: 500; padding: var(--sp-1) 0;
}
.hz-rh .rhp-dato span { color: var(--text-muted); flex: 0 0 auto; }
.hz-rh .rhp-dato b { color: var(--text-primary); font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.hz-rh .rhp-apto--ok { color: var(--status-green); }
.hz-rh .rhp-apto--warn { color: var(--status-yellow); }
.hz-rh .rhp-apto--bad { color: var(--status-red); }
.hz-rh .rhp-apto--mute { color: var(--text-muted); }

.hz-rh .rhp-docstats { display: flex; flex-direction: column; gap: var(--sp-2); }
.hz-rh .rhp-docstats > div { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t5); font-weight: 500; color: var(--text-secondary); }
.hz-rh .rhp-docstats b { margin-left: auto; color: var(--text-primary); }

.hz-rh .rhp-doclist { display: flex; flex-direction: column; gap: var(--sp-1); }
.hz-rh .rhp-docrow {
  display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t5); font-weight: 500;
  background: var(--card); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-2);
}
.hz-rh .rhp-docrow__n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 600; }

/* KPI "Por convenio" */
.hz-rh .rhp-conv { display: flex; align-items: center; gap: var(--sp-2); }
.hz-rh .rhp-conv__dona { width: 3.25rem; height: 3.25rem; flex: 0 0 3.25rem; transform: rotate(-90deg); }
.hz-rh .rhp-conv__leg { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; flex: 1; }
.hz-rh .rhp-conv__leg > div { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--t6); font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.hz-rh .rhp-conv__leg b { margin-left: auto; color: var(--text-primary); }

/* ═════════ PRESENTISMO ═════════ */
.hz-rh .rhr-filtros {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2);
  background: var(--panel-bg); border: 1px solid var(--border-color);
  border-radius: var(--r-card); padding: var(--sp-3) var(--sp-3);
}
.hz-rh .rhr-filtro { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.hz-rh .rhr-filtro > span { font-size: var(--t6); font-weight: 700; color: var(--text-muted); }
.hz-rh .rhr-filtro .rh-select { width: 100%; background: var(--card); }

.hz-rh .rhr-cols { display: grid; grid-template-columns: 1fr 17.5rem; gap: var(--sp-3); align-items: start; }
.hz-rh .rhr-main { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.hz-rh .rhr-rail { position: sticky; top: 0.625rem; }

.hz-rh .rhr-row { grid-template-columns: 1.65fr 1.35fr 0.75fr 0.6fr 0.6fr 0.75fr 0.65fr 0.75fr 1fr 1.15fr 0.75fr; min-width: 67.5rem; }
.hz-rh .rhr-rowm { grid-template-columns: 1.65fr 0.9fr 0.8fr 0.85fr 0.9fr 0.75fr 0.85fr 0.85fr 0.6fr 0.65fr 1fr; min-width: 63.75rem; }
.hz-rh .rhr-extra { color: var(--status-orange); font-weight: 700; }
.hz-rh .rhr-tras { color: var(--status-blue); font-weight: 700; }
.hz-rh .rhr-obs { font-size: var(--t5); font-weight: 500; color: var(--text-muted); }
.hz-rh .rhr-acts { display: flex; gap: 2px; }
.hz-rh .rhr-totales { background: var(--card); border-radius: var(--r-pill); border-bottom: none; margin-top: 2px; }
.hz-rh .rhr-totales:hover { background: var(--card); }

.hz-rh .rhr-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--t5); font-weight: 500; color: var(--text-muted); }
.hz-rh .rhr-leyenda { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.hz-rh .rhr-leyenda__item { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--t6); font-weight: 600; color: var(--text-secondary); }

.hz-rh .rhr-inds { display: flex; flex-direction: column; gap: var(--sp-1); }
.hz-rh .rhr-ind { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 2px; }
.hz-rh .rhr-ind .rh-kpi__ico { width: 1.875rem; height: 1.875rem; flex: 0 0 1.875rem; border-radius: var(--r-pill); }
.hz-rh .rhr-ind .rh-kpi__ico svg { width: 0.875rem; height: 0.875rem; }
.hz-rh .rhr-ind__n { flex: 1; font-size: var(--t5); font-weight: 500; color: var(--text-secondary); min-width: 0; }
.hz-rh .rhr-ind__v { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--text-primary); display: flex; align-items: baseline; gap: var(--sp-1); }
.hz-rh .rhr-ind__v small { font-size: var(--t6); font-weight: 700; color: var(--text-muted); }

/* ═════════ DOCUMENTACIÓN ═════════ */
.hz-rh .rhd-cols { display: grid; grid-template-columns: 1fr 18.75rem; gap: var(--sp-3); align-items: start; }
.hz-rh .rhd-main { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.hz-rh .rhd-rail { display: flex; flex-direction: column; gap: var(--sp-3); position: sticky; top: 0.625rem; }
.hz-rh .rhd-rail .rh-card { padding: var(--sp-4); gap: var(--sp-2); }

.hz-rh .rhd-filtros { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.hz-rh .rhd-filtros .rh-select { flex: 0 1 auto; background: var(--panel-bg); border: 1px solid var(--border-color); }
.hz-rh .rhd-filtros .rh-search input { background: var(--panel-bg); border: 1px solid var(--border-color); }
.hz-rh .rhd-chip-emp { display: flex; }

.hz-rh .rhd-row { grid-template-columns: 1.55fr 0.55fr 1.5fr 0.85fr 0.85fr 1.5fr 0.95fr; min-width: 60rem; }
.hz-rh .rhd-doc { display: flex; flex-direction: column; font-weight: 600; }
.hz-rh .rhd-vence--bad { color: var(--status-red); font-weight: 700; }
.hz-rh .rhd-vence--warn { color: var(--status-orange); font-weight: 700; }
.hz-rh .rhd-file { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.hz-rh .rhd-file svg { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.hz-rh .rhd-file > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.hz-rh .rhd-file__n { font-size: var(--t5); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-rh .rhd-acts { display: flex; align-items: center; gap: var(--sp-1); }

.hz-rh .rhd-prox { display: flex; flex-direction: column; gap: var(--sp-2); }
.hz-rh .rhd-prox__fila { display: flex; align-items: flex-start; gap: var(--sp-2); }
.hz-rh .rhd-prox__dot {
  width: 1.625rem; height: 1.625rem; flex: 0 0 1.625rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.hz-rh .rhd-prox__dot svg { width: 0.8125rem; height: 0.8125rem; }
.hz-rh .rhd-prox__dot.is-rojo { background: var(--status-red-bg); color: var(--status-red); }
.hz-rh .rhd-prox__dot.is-naranja { background: var(--status-orange-bg); color: var(--status-orange); }
.hz-rh .rhd-prox__d { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.hz-rh .rhd-prox__d b { font-size: var(--t5); font-weight: 500; color: var(--text-primary); }
.hz-rh .rhd-prox__d span { font-size: var(--t5); font-weight: 500; color: var(--text-secondary); }
.hz-rh .rhd-prox__d small { font-size: var(--t6); font-weight: 600; color: var(--text-muted); }
.hz-rh .rhd-prox .rh-chip { align-self: center; }

.hz-rh .rhd-tipos { display: flex; flex-direction: column; }
.hz-rh .rhd-tipo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  border: none; background: none; cursor: pointer; text-align: left;
  font: 500 0.8125rem var(--font-family); color: var(--text-secondary);
  padding: var(--sp-1) var(--sp-1); border-radius: var(--r-pill);
}
.hz-rh .rhd-tipo:hover { background: var(--hover-soft); color: var(--text-primary); }
.hz-rh .rhd-tipo b { color: var(--text-primary); }

.hz-rh .rhd-quick { display: flex; flex-direction: column; gap: var(--sp-2); }
.hz-rh .rhd-quick__btn {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--card); border: 1px solid transparent; border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-3); cursor: pointer;
  font: 600 0.8125rem var(--font-family); color: var(--text-primary); text-align: left;
  transition: border-color .15s, background .15s;
}
.hz-rh .rhd-quick__btn:hover { border-color: var(--celeste); background: var(--hover-soft); }
.hz-rh .rhd-quick__btn svg { width: 0.9375rem; height: 0.9375rem; color: var(--text-muted); }
.hz-rh .rhd-quick__btn span { margin-left: auto; color: var(--text-muted); }

/* ═════════ CAPACITACIONES ═════════ */
.hz-rh .rhc-filtros { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.hz-rh .rhc-filtros .rh-select { background: var(--panel-bg); border: 1px solid var(--border-color); }
.hz-rh .rhc-filtros .rh-search input { background: var(--panel-bg); border: 1px solid var(--border-color); }

.hz-rh .rhc-row { grid-template-columns: 2fr 0.75fr 0.85fr 1.25fr 1fr 1fr 1fr 0.85fr 0.95fr; min-width: 68.75rem; }
.hz-rh .rhc-curso { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.hz-rh .rhc-curso > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.hz-rh .rhc-curso__ico {
  width: 2.125rem; height: 2.125rem; flex: 0 0 2.125rem; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
}
.hz-rh .rhc-curso__ico svg { width: 1rem; height: 1rem; }
.hz-rh .rhc-emps { display: flex; flex-direction: column; }
.hz-rh .rhc-emps b { font-size: var(--t4); font-weight: 500; color: var(--text-primary); }
.hz-rh .rhc-prox { font-family: var(--font-mono); font-size: var(--t5); font-weight: 500; line-height: 1.3; color: var(--text-secondary); }
.hz-rh .rhc-prox.is-vencido { color: var(--status-red); font-weight: 700; }
.hz-rh .rhc-acts { display: flex; gap: 2px; }

.rhc-checklist { margin-top: var(--sp-3); border-top: 1px solid var(--border-color); padding-top: var(--sp-3); }
.rhc-checklist__t {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  font: 700 0.8125rem var(--font-family); color: var(--text-primary); margin-bottom: var(--sp-2);
}
.rhc-checklist__t label { display: inline-flex; align-items: center; gap: var(--sp-1); font: 600 0.75rem var(--font-family); color: var(--text-muted); cursor: pointer; }
.rhc-checklist__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1) var(--sp-3); max-height: min(13.125rem, 40vh); overflow-y: auto; }
.rhc-checkemp {
  display: flex; align-items: center; gap: var(--sp-2); cursor: pointer;
  font: 500 0.8125rem var(--font-family); color: var(--text-primary);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill);
}
.rhc-checkemp:hover { background: var(--hover-soft); }
.rhc-checkemp small { color: var(--text-muted); font-size: var(--t6); font-weight: 600; }
.rhc-checkemp input { accent-color: var(--azul); }
.rhc-detalle-emps { display: flex; flex-direction: column; gap: var(--sp-1); max-height: min(14.375rem, 40vh); overflow-y: auto; }
.rhc-detalle-emps .rhp-docrow { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t5); font-weight: 500; background: var(--card); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-2); }

/* Los modales de RRHH viven en <body>: dales el vocabulario de datos */
.modal-box .rhp-datos { display: flex; flex-direction: column; }
.modal-box .rhp-dato { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: var(--t4); font-weight: 500; padding: var(--sp-1) 0; }
.modal-box .rhp-dato span { color: var(--text-muted); }
.modal-box .rhp-dato b { color: var(--text-primary); font-weight: 600; text-align: right; }
.modal-box .rhp-docrow__n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 600; }
.modal-box .rh-pill { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--t6); font-weight: 700; border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-2); }
.modal-box .rh-pill--ok { background: var(--status-green-bg); color: var(--status-green); }
.modal-box .rh-pill--warn { background: var(--status-yellow-bg); color: var(--status-yellow); }
.modal-box .rh-pill--bad { background: var(--status-red-bg); color: var(--status-red); }
.modal-box .rh-pill--mute { background: var(--status-gray-bg); color: var(--status-gray); }
.modal-box .rh-pill--info { background: var(--status-blue-bg); color: var(--status-blue); }
.modal-box .rh-avatar { width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--t6); font-weight: 800; color: #fff; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .hz-rh .rh-kpis--6 { grid-template-columns: repeat(3, 1fr); }
  .hz-rh .rh-kpis--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .hz-rh .rh-grid--fila2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hz-rh .rh-grid--fila3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hz-rh .rh-grid--fila3 > :first-child { grid-column: 1 / -1; }
  .hz-rh .rhp-cols { grid-template-columns: 1fr; }
  .hz-rh .rhp-panel { position: static; max-height: none; }
}
@media (max-width: 1100px) {
  .hz-rh .rh-grid--fila4 { grid-template-columns: minmax(0, 1fr); }
  .hz-rh .rhr-cols,
  .hz-rh .rhd-cols { grid-template-columns: 1fr; }
  .hz-rh .rhr-rail,
  .hz-rh .rhd-rail { position: static; }
  .hz-rh .rhr-filtros { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .hz-rh .rh-kpis--6,
  .hz-rh .rh-kpis--5 { grid-template-columns: 1fr 1fr; }
  .hz-rh .rh-grid--fila2,
  .hz-rh .rh-grid--fila3 { grid-template-columns: minmax(0, 1fr); }
  .hz-rh .rh-grid--fila3 > :first-child { grid-column: auto; }
  .hz-rh .rhr-filtros { grid-template-columns: 1fr 1fr; }
  .hz-rh .rh-tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hz-rh .rh-kpis--6,
  .hz-rh .rh-kpis--5 { grid-template-columns: 1fr; }
  .hz-rh .rhr-filtros { grid-template-columns: 1fr; }
  .hz-rh .rhp-ficha__foot { grid-template-columns: 1fr; }
}

/* ═════════ EPP ═════════ */
.hz-rh .rhe-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); }
.hz-rh .rhe-disp { display: flex; align-items: center; }
.hz-rh .rhe-disp__fila { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.hz-rh .rhe-disp__ico {
  width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; border-radius: var(--r-row);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--text-secondary);
}
.hz-rh .rhe-disp__ico svg { width: 1.375rem; height: 1.375rem; }
.hz-rh .rhe-disp__marca { font-family: var(--font-display); font-size: var(--t3); font-weight: 800; letter-spacing: 0.5px; color: var(--text-primary); line-height: 1.1; }
.hz-rh .rhe-disp__estado { font-size: var(--t5); font-weight: 700; }
.hz-rh .rhe-disp__estado.is-ok { color: var(--status-green); }
.hz-rh .rhe-disp__estado.is-off { color: var(--status-red); }

.hz-rh .rhe-cols { display: grid; grid-template-columns: 1fr 20rem; gap: var(--sp-3); align-items: start; }
.hz-rh .rhe-main { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.hz-rh .rhe-rail { display: flex; flex-direction: column; gap: var(--sp-3); position: sticky; top: 0.625rem; }
.hz-rh .rhe-rail .rh-card { padding: var(--sp-4); gap: var(--sp-2); position: relative; }
.hz-rh .rhe-libus .rh-btn { justify-content: center; }

.hz-rh .rhe-row { grid-template-columns: 0.85fr 1.7fr 0.55fr 1.3fr 1.15fr 0.4fr 0.9fr 0.9fr 1.05fr 0.7fr 1fr 0.95fr; min-width: 80rem; }
.hz-rh .rhe-ticket { display: flex; flex-direction: column; }
.hz-rh .rhe-ticket .rh-link { font-family: var(--font-mono); font-size: var(--t5); font-weight: 500; text-align: left; padding: 0; }

.hz-rh .rhe-mini {
  width: 1.625rem; height: 1.625rem; flex: 0 0 1.625rem; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--status-blue-bg); color: var(--status-blue);
}
.hz-rh .rhe-mini svg { width: 0.8125rem; height: 0.8125rem; }

.hz-rh .rhe-plarow {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--card); border-radius: var(--r-row); padding: var(--sp-3) var(--sp-3);
}
.hz-rh .rhe-plarow__ico {
  width: 2.125rem; height: 2.125rem; flex: 0 0 2.125rem; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--status-blue-bg); color: var(--status-blue);
}
.hz-rh .rhe-plarow__ico svg { width: 1rem; height: 1rem; }
.hz-rh .rhe-plarow__d { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.hz-rh .rhe-plarow__d b { font-size: var(--t4); font-weight: 500; color: var(--text-primary); }
.hz-rh .rhe-plarow__d span { font-size: var(--t5); font-weight: 500; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-rh .rhe-nota .rh-nota__act { cursor: pointer; }

/* ═════════ RECIBOS DE SUELDO ═════════ */
.hz-rh .rhs-cols { display: grid; grid-template-columns: 1fr 20.625rem; gap: var(--sp-3); align-items: start; }
.hz-rh .rhs-main { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.hz-rh .rhs-panel { position: sticky; top: 0.625rem; max-height: calc(100vh - 3.75rem); overflow-y: auto; }

.hz-rh .rhs-row { grid-template-columns: 1.7fr 0.55fr 0.65fr 0.85fr 1fr 0.95fr 0.8fr 0.8fr 0.45fr 1.15fr; min-width: 73.75rem; }
.hz-rh .rhs-neto { font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); font-size: var(--t4); }
.hz-rh .rhs-firmaico { color: var(--status-green); display: inline-flex; }
.hz-rh .rhs-firmaico svg { width: 0.9375rem; height: 0.9375rem; }
.hz-rh .rhs-netofila b { color: var(--status-green); font-weight: 800; }

.hz-rh .rhs-estado {
  display: flex; align-items: center; gap: var(--sp-2);
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-3); font-size: var(--t5); font-weight: 500;
}
.hz-rh .rhs-estado--ok   { background: var(--status-green-bg); }
.hz-rh .rhs-estado--warn { background: var(--status-yellow-bg); }
.hz-rh .rhs-estado--info { background: var(--status-blue-bg); }
.hz-rh .rhs-estado__ico { display: inline-flex; color: var(--text-secondary); }
.hz-rh .rhs-estado__ico svg { width: 1rem; height: 1rem; }
.hz-rh .rhs-estado > div { display: flex; flex-direction: column; line-height: 1.35; }
.hz-rh .rhs-estado b { font-size: var(--t4); font-weight: 500; color: var(--text-primary); }
.hz-rh .rhs-estado span { font-size: var(--t5); font-weight: 500; color: var(--text-muted); }

.hz-rh .rhs-firmabox {
  display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2);
  background: var(--card); border: 1px dashed var(--border-color);
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-3);
}
.hz-rh .rhs-firmabox img { max-height: 3.625rem; max-width: 60%; object-fit: contain; }
body.dark-mode .hz-rh .rhs-firmabox img { background: #f4f5f7; border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-1); }
.hz-rh .rhs-firmabox span { font-size: var(--t6); font-weight: 600; color: var(--text-muted); line-height: 1.45; }

/* Pad de firma y auditoría: viven en modales (fuera de .hz-rh) */
.rhs-padinfo { font-size: var(--t4); font-weight: 500; color: var(--text-secondary); margin-bottom: var(--sp-2); }
.rhs-pad { border: 1.5px dashed var(--border-color); border-radius: var(--r-row); background: #FFFFFF; overflow: hidden; }
.rhs-pad canvas { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; }
.rhs-padacts { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }

.rhs-audit { display: flex; flex-direction: column; }
.rhs-audit__fila { display: flex; align-items: flex-start; gap: var(--sp-2); position: relative; padding-bottom: var(--sp-3); }
.rhs-audit__fila:last-child { padding-bottom: 2px; }
.rhs-audit__fila:not(:last-child)::before {
  content: ""; position: absolute; left: 0.28125rem; top: 0.875rem; bottom: 0;
  width: 1.5px; background: var(--border-color);
}
.rhs-audit__dot {
  width: 0.625rem; height: 0.625rem; flex: 0 0 0.625rem; border-radius: 50%;
  background: var(--azul); margin-top: var(--sp-1);
}
.rhs-audit__fila div { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.rhs-audit__fila b { font-size: var(--t4); color: var(--text-primary); font-weight: 600; }
.rhs-audit__fila span { font-size: var(--t6); font-weight: 600; color: var(--text-muted); }

/* Píldoras de licencia en modales */
.modal-box .rh-pill--violet { background: var(--status-purple-bg); color: var(--status-purple); }
.modal-box .rh-pill--teal   { background: rgba(58, 168, 160, .16); color: #2E8B84; }
.modal-box .rh-pill--brown  { background: rgba(169, 123, 69, .16); color: #8a6236; }

/* ═════════ VACACIONES Y LICENCIAS ═════════ */
.hz-rh .rhv-kpis { grid-template-columns: repeat(4, 1fr); }
.hz-rh .rhv-kpis .rh-kpi { gap: var(--sp-2); }
.hz-rh .rhv-cols { display: grid; grid-template-columns: 1fr 18.75rem; gap: var(--sp-3); align-items: start; }
.hz-rh .rhv-main { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.hz-rh .rhv-rail { display: flex; flex-direction: column; gap: var(--sp-3); position: sticky; top: 0.625rem; }
.hz-rh .rhv-rail .rh-card { padding: var(--sp-4); gap: var(--sp-2); }

.hz-rh .rhv-row { grid-template-columns: 0.9fr 1.6fr 0.55fr 1.05fr 0.75fr 0.75fr 0.4fr 0.8fr 1fr 1.15fr 0.85fr; min-width: 77.5rem; }
.hz-rh .rhv-rowsaldo { grid-template-columns: 1.8fr 0.6fr 0.8fr 1fr 0.85fr 0.85fr 0.75fr; min-width: 56.25rem; }

.hz-rh .rhv-calhead { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding-bottom: var(--sp-1); }
.hz-rh .rhv-calhead > b { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 800; color: var(--text-primary); text-transform: capitalize; }
.hz-rh .rhv-calhead .rhr-leyenda { margin-left: auto; }
.hz-rh .rhv-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); }
.hz-rh .rhv-semana span { text-align: center; font-size: var(--t6); font-weight: 700; color: var(--text-muted); text-transform: uppercase; padding: var(--sp-1) 0; }
.hz-rh .rhv-caldias { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); }
.hz-rh .rhv-dia {
  min-height: 5.25rem; border-radius: var(--r-pill); background: var(--card);
  padding: var(--sp-1) var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0;
}
.hz-rh .rhv-dia.is-otro { background: transparent; }
.hz-rh .rhv-dia.is-otro .rhv-dia__n { color: var(--border-color); }
.hz-rh .rhv-dia.is-hoy { outline: 2px solid var(--azul); outline-offset: -2px; }
.hz-rh .rhv-dia__n { font-size: var(--t6); font-weight: 700; color: var(--text-muted); }
.hz-rh .rhv-chip {
  font-size: var(--t6); font-weight: 700; border-radius: var(--r-pill); padding: 2px var(--sp-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hz-rh .rhv-mas { font-size: var(--t6); font-weight: 700; color: var(--text-muted); }

/* ═════════ ADELANTOS ═════════ */
.hz-rh .rha-cols { display: grid; grid-template-columns: 1fr 21.25rem; gap: var(--sp-3); align-items: start; }
.hz-rh .rha-main { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.hz-rh .rha-rail { display: flex; flex-direction: column; gap: var(--sp-3); position: sticky; top: 0.625rem; }
.hz-rh .rha-rail .rh-card { padding: var(--sp-4); gap: var(--sp-2); position: relative; }

.hz-rh .rha-row { grid-template-columns: 1.7fr 0.55fr 0.9fr 0.8fr 0.8fr 0.85fr 1.1fr 0.85fr 0.85fr 0.85fr; min-width: 73.75rem; }
.hz-rh .rha-kpimonto { font-size: 1.5rem; color: var(--status-green); }
.hz-rh .rha-aviso { background: var(--status-yellow-bg); border-color: rgba(224, 181, 63, .4); }
.hz-rh .rha-aviso svg { color: var(--status-yellow); }
.hz-rh .rha-panel .rhp-dato b .rh-btn { font-size: var(--t5); font-weight: 500; }

/* ── Responsive parte 2 ── */
@media (max-width: 1100px) {
  .hz-rh .rhe-kpis { grid-template-columns: repeat(3, 1fr); }
  .hz-rh .rhv-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .hz-rh .rhe-cols,
  .hz-rh .rhs-cols,
  .hz-rh .rhv-cols,
  .hz-rh .rha-cols { grid-template-columns: 1fr; }
  .hz-rh .rhe-rail,
  .hz-rh .rhv-rail,
  .hz-rh .rha-rail { position: static; }
  /* relative y no static: la ✕ del panel es absolute y necesita su ancla */
  .hz-rh .rhs-panel { position: relative; top: 0; max-height: none; }
  .hz-rh .rhe-rail,
  .hz-rh .rhv-rail,
  .hz-rh .rha-rail { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .hz-rh .rhv-rail { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 900px) {
  .hz-rh .rhe-kpis { grid-template-columns: 1fr 1fr; }
  .hz-rh .rhe-rail,
  .hz-rh .rhv-rail,
  .hz-rh .rha-rail { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hz-rh .rhe-kpis,
  .hz-rh .rhv-kpis { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   SECCIONES O.T. — Trabajos en Obra + Gestión Interna
   Lenguaje visual compartido (.hz-ot): cabecera con subtítulo,
   KPIs clickeables, pestañas de línea, buscador y tarjetas.
═══════════════════════════════════════════════════════════ */
.hz-ot { display: flex; flex-direction: column; gap: var(--sp-4); }

.hz-ot .ot-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.hz-ot .ot-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; letter-spacing: -1px; color: var(--text-primary); margin: 0; }
.hz-ot .ot-sub { font-size: var(--t4); font-weight: 500; color: var(--text-muted); margin-top: var(--sp-1); }
.hz-ot .ot-head__acts { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* KPIs */
.hz-ot .ot-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr)); gap: var(--sp-3); }
.hz-ot .ot-kpi {
  background: var(--panel-bg); border: 1px solid var(--border-color);
  border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0;
  transition: border-color .15s, box-shadow .15s, transform .12s var(--ease-active, ease);
}
.hz-ot .ot-kpi:hover { border-color: var(--celeste, var(--primary-color)); box-shadow: var(--shadow-panel); }
.hz-ot .ot-kpi:active { transform: scale(.99); }
.hz-ot .ot-kpi--static { cursor: default; }
.hz-ot .ot-kpi--static:hover { border-color: var(--border-color); box-shadow: none; }
.hz-ot .ot-kpi__num { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; letter-spacing: -1px; color: var(--text-primary); line-height: 1.05; }
.hz-ot .ot-kpi__num.is-ok     { color: var(--status-green); }
.hz-ot .ot-kpi__num.is-info   { color: var(--status-blue); }
.hz-ot .ot-kpi__num.is-warn   { color: var(--status-yellow); }
.hz-ot .ot-kpi__num.is-bad    { color: var(--status-red); }
.hz-ot .ot-kpi__num.is-violet { color: var(--status-purple); }
.hz-ot .ot-kpi__label { font-size: var(--t5); font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Pestañas de línea */
.hz-ot .ot-tabs { display: flex; gap: var(--sp-4); border-bottom: 1px solid var(--border-color); }
.hz-ot .ot-tab {
  border: none; background: none; cursor: pointer;
  font: 600 0.8125rem var(--font-family); color: var(--text-muted);
  padding: var(--sp-2) 2px var(--sp-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.hz-ot .ot-tab:hover { color: var(--text-primary); }
.hz-ot .ot-tab.active { color: var(--azul-soft-text, var(--primary-color)); border-bottom-color: var(--azul, var(--primary-color)); }
body.dark-mode .hz-ot .ot-tab.active { color: var(--celeste, var(--primary-color)); border-bottom-color: var(--celeste, var(--primary-color)); }

/* Toolbar */
.hz-ot .ot-toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.hz-ot .ot-search { position: relative; display: flex; align-items: center; flex: 0 1 21.25rem; min-width: 12.5rem; }
.hz-ot .ot-search svg { position: absolute; left: 0.6875rem; width: 0.875rem; height: 0.875rem; color: var(--text-muted); pointer-events: none; }
.hz-ot .ot-search input {
  width: 100%; background: var(--input-bg); border: 1.5px solid var(--input-border);
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-6);
  font: 500 0.8125rem var(--font-family); color: var(--input-text); outline: none;
  transition: border-color .15s;
}
.hz-ot .ot-search input::placeholder { color: var(--input-placeholder); }
.hz-ot .ot-search input:focus { border-color: var(--input-focus); }

/* Tarjetas */
.hz-ot .ot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr)); gap: var(--sp-3); }
.hz-ot .ot-card {
  position: relative; cursor: pointer; min-width: 0;
  background: var(--panel-bg); border: 1px solid var(--border-color);
  border-radius: var(--r-card); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .12s var(--ease-active, ease);
}
.hz-ot .ot-card:hover { border-color: var(--celeste, var(--primary-color)); box-shadow: var(--shadow-panel); }
.hz-ot .ot-card:active { transform: scale(.995); }
.hz-ot .ot-card__borde { position: absolute; left: 0; top: 0; bottom: 0; width: 0.25rem; background: var(--border-color); }
.hz-ot .ot-card__borde.is-ok     { background: var(--status-green); }
.hz-ot .ot-card__borde.is-info   { background: var(--status-blue); }
.hz-ot .ot-card__borde.is-warn   { background: var(--status-yellow); }
.hz-ot .ot-card__borde.is-bad    { background: var(--status-red); }
.hz-ot .ot-card__borde.is-violet { background: var(--status-purple); }
.hz-ot .ot-card__borde.is-mute   { background: var(--status-gray, var(--border-color)); }
.hz-ot .ot-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.hz-ot .ot-card__code { font-family: var(--font-mono); font-size: var(--t4); font-weight: 700; color: var(--primary-color); letter-spacing: .3px; }
.hz-ot .ot-card__cliente { font-size: var(--t2); font-weight: 700; color: var(--text-primary); margin-bottom: 2px; word-break: break-word; }
.hz-ot .ot-card__area { font-size: var(--t5); font-weight: 500; color: var(--text-muted); }
.hz-ot .ot-card__meta { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.hz-ot .ot-card__meta .ot-card__area { margin-left: 2px; }
.hz-ot .ot-card__desc { font-size: var(--t4); font-weight: 500; color: var(--text-secondary); line-height: 1.45; margin-bottom: var(--sp-2); min-height: 1.125rem; }
.hz-ot .ot-card__datos {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2);
  border-top: 1px solid var(--border-light, var(--border-color)); padding-top: var(--sp-2);
}
.hz-ot .ot-card__datos > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hz-ot .ot-card__datos span { font-size: var(--t6); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.hz-ot .ot-card__datos b { font-size: var(--t5); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-ot .ot-card__acts { display: flex; justify-content: flex-end; gap: 2px; margin-top: var(--sp-2); }

/* Píldoras de estado */
.ot-pill {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--t6); font-weight: 700; border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-2); white-space: nowrap;
}
.ot-pill--ok     { background: var(--status-green-bg);  color: var(--status-green); }
.ot-pill--warn   { background: var(--status-yellow-bg); color: var(--status-yellow); }
.ot-pill--bad    { background: var(--status-red-bg);    color: var(--status-red); }
.ot-pill--mute   { background: var(--status-gray-bg);   color: var(--status-gray); }
.ot-pill--info   { background: var(--status-blue-bg);   color: var(--status-blue); }
.ot-pill--violet { background: var(--status-purple-bg); color: var(--status-purple); }
.ot-pill--linea  { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); }

.hz-ot .ot-vacio { grid-column: 1 / -1; padding: 2.5rem var(--sp-3); text-align: center; font-size: var(--t4); font-weight: 500; color: var(--text-muted); }

@media (max-width: 900px) {
  .hz-ot .ot-kpis { grid-template-columns: 1fr 1fr; }
  .hz-ot .ot-tabs { gap: var(--sp-3); overflow-x: auto; }
}
@media (max-width: 900px) {
  .hz-ot .ot-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROLES Y PERMISOS — Ajustes → Usuarios (tarjetas con foto + ficha),
   Ajustes → Roles y permisos (editor por sección), chip global de solo
   lectura y foto de perfil del onboarding.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- Chips de rol (vocabulario st-chip) ---- */
.st-chip--violet { background: var(--status-purple-bg); color: var(--status-purple); }
.st-chip--azul   { background: var(--status-blue-bg);   color: var(--status-blue); }
.st-chip--gris   { background: var(--cell-empty);       color: var(--ink-3); }

/* ---- Avatares de usuario (iniciales con tono estable por usuario) ---- */
.stu-avatar {
  width: 2.125rem; height: 2.125rem; flex: 0 0 2.125rem; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; font-weight: 800; font-size: var(--t4);
  background: var(--cell-empty); color: var(--ink-3); user-select: none;
}
.stu-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stu-avatar--lg { width: 3.5rem; height: 3.5rem; flex-basis: 3.5rem; font-size: 1.25rem; }
.stu-avatar--xl { width: 4.75rem; height: 4.75rem; flex-basis: 4.75rem; font-size: var(--t1); font-weight: 800; }
.stu-avatar--t0 { background: rgba(0, 135, 175, .28); color: var(--status-blue); }
.stu-avatar--t1 { background: var(--status-purple-bg);  color: var(--status-purple); }
.stu-avatar--t2 { background: rgba(161, 225, 188, .48); color: var(--text-on-accent); }
.stu-avatar--t3 { background: rgba(202, 138, 4, .16);   color: var(--status-yellow); }
.stu-avatar--t4 { background: rgba(224, 82, 82, .14);   color: var(--status-red); }
.stu-avatar--t5 { background: var(--cell-empty);        color: var(--ink-3); }
body.dark-mode .stu-avatar--t2 { color: var(--menta); background: rgba(161, 225, 188, .20); }

/* ---- Usuarios: grilla de tarjetas ---- */
.stu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.125rem, 1fr)); gap: var(--sp-3); }
.stu-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); text-align: center;
  padding: var(--sp-4) var(--sp-3) var(--sp-3); border: 1px solid var(--border-color); border-radius: var(--r-card);
  background: var(--panel-bg); cursor: pointer; font-family: inherit;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.stu-card:hover { transform: translateY(-2px); border-color: var(--menta); box-shadow: 0 10px 26px rgba(16, 20, 24, .10); }
.stu-card .stu-avatar--lg { margin-bottom: var(--sp-1); }
.stu-card__name { font-size: var(--t4); font-weight: 700; color: var(--text-primary); line-height: 1.25; }
.stu-card__user { font-family: var(--font-mono); font-size: var(--t6); font-weight: 600; color: var(--text-muted); margin-bottom: var(--sp-1); }
.stu-card__chips { display: flex; gap: var(--sp-1); flex-wrap: wrap; justify-content: center; }
.stu-card.is-off { opacity: .62; }
.stu-vos { font-size: var(--t6); font-weight: 800; letter-spacing: .4px; text-transform: uppercase; background: var(--menta); color: var(--text-on-accent); border-radius: 5px; padding: 1.5px var(--sp-1); vertical-align: 2px; }

/* ---- Ficha de usuario ---- */
.stu-back {
  display: inline-flex; align-items: center; gap: var(--sp-1); border: none; background: transparent;
  font: 700 0.75rem var(--font-family); color: var(--text-muted); cursor: pointer; padding: 0 0 var(--sp-3);
}
.stu-back:hover { color: var(--text-primary); }
.stu-back svg { width: 0.9375rem; height: 0.9375rem; }
.stu-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-1); }
.stu-head__name { font-family: var(--font-display, 'Poppins', sans-serif); font-size: 1.25rem; font-weight: 800; color: var(--text-primary); }
.stu-head__meta { font-size: var(--t5); font-weight: 500; color: var(--text-muted); margin: 2px 0 var(--sp-2); }

/* ---- Radios de rol: píldoras cortas en fila ---- */
.str-radios { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.str-radio {
  display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-color); border-radius: 999px; cursor: pointer;
  background: var(--panel-bg); transition: border-color .12s ease, background .12s ease;
}
.str-radio:hover { border-color: var(--menta); }
.str-radio.is-active { border-color: var(--menta); background: rgba(161, 225, 188, .14); }
.str-radio.is-locked { opacity: .6; cursor: default; }
.str-radio input { position: absolute; opacity: 0; pointer-events: none; }
.str-radio__dot {
  width: 1rem; height: 1rem; flex: 0 0 1rem; border-radius: 50%;
  border: 2px solid var(--border-color); display: grid; place-items: center;
}
.str-radio.is-active .str-radio__dot { border-color: var(--menta); }
.str-radio.is-active .str-radio__dot::after { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--menta); }
.str-radio__title { display: block; font-size: var(--t4); font-weight: 700; color: var(--text-primary); white-space: nowrap; }

/* ---- Roles y permisos: usuarios en columna + editor a la derecha ---- */
.stp-layout { display: grid; grid-template-columns: 13.625rem minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.stp-users { display: flex; flex-direction: column; gap: var(--sp-2); }
.stp-user {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left;
  border: 1px solid var(--border-color); background: var(--panel-bg); border-radius: var(--r-row);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); cursor: pointer; font-family: inherit;
  transition: border-color .12s ease, background .12s ease;
}
.stp-user:hover { border-color: var(--menta); }
.stp-user.is-active { border-color: var(--menta); background: rgba(161, 225, 188, .16); }
.stp-user__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; min-width: 0; }
.stp-user__name { font-size: var(--t4); font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.stp-user__rol { font-size: var(--t6); font-weight: 600; color: var(--text-muted); white-space: nowrap; }

.stp-rows { border: 1px solid var(--border-color); border-radius: var(--r-row); padding: 2px var(--sp-3); margin-bottom: var(--sp-3); }
.stp-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-color); }
.stp-row:last-child { border-bottom: none; }
.stp-row__title { font-size: var(--t4); font-weight: 700; color: var(--text-primary); }
.stp-row__desc { font-size: var(--t5); font-weight: 500; color: var(--text-muted); line-height: 1.35; margin-top: 1px; }
.stp-sensible { color: var(--status-yellow); font-size: var(--t6); font-weight: 600; margin-left: var(--sp-1); vertical-align: 2px; }

.stp-seg {
  display: inline-flex; flex: 0 0 auto; gap: var(--sp-1); padding: var(--sp-1);
  background: var(--row, var(--cell-empty)); border: 1px solid var(--border-color); border-radius: var(--r-pill);
}
.stp-seg__btn {
  border: none; background: transparent; cursor: pointer;
  font: 700 0.75rem var(--font-family); color: var(--text-muted);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); white-space: nowrap;
  transition: background .1s ease, color .1s ease;
}
.stp-seg__btn:hover { color: var(--text-primary); }
.stp-seg__btn--no.is-active     { background: rgba(224, 82, 82, .15); color: var(--status-red); }
.stp-seg__btn--ver.is-active    { background: var(--status-blue-bg); color: var(--status-blue); }
.stp-seg__btn--editar.is-active { background: var(--menta); color: var(--text-on-accent); }

.stp-owner {
  display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4);
  border: 1px solid var(--border-color); border-radius: var(--r-row); background: var(--row, var(--cell-empty));
}
.stp-owner svg { width: 1.875rem; height: 1.875rem; flex: 0 0 1.875rem; color: var(--status-purple); }
.stp-owner__title { font-size: 0.875rem; font-weight: 800; color: var(--text-primary); margin-bottom: var(--sp-1); }
.stp-owner__desc { font-size: var(--t5); font-weight: 500; color: var(--text-secondary); line-height: 1.5; }

/* ---- Chip global de solo lectura (app.js lo muestra en secciones 'ver') ---- */
.hz-readonly-chip {
  position: fixed; left: 50%; bottom: 1.125rem; transform: translateX(-50%); z-index: var(--z-float);
  display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: 999px;
  background: var(--panel-bg); border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(16, 20, 24, .18);
  font-size: var(--t5); font-weight: 700; color: var(--text-secondary); pointer-events: none;
}
.hz-readonly-chip svg { width: 0.9375rem; height: 0.9375rem; color: var(--status-blue); }

/* ---- Onboarding: foto de perfil ---- */
.ob-foto { position: relative; width: 5.5rem; height: 5.5rem; display: block; cursor: pointer; }
.ob-foto__ring {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--cell-empty, #EEF0F4);
  border: 2px dashed var(--border-color, #E3E5EA); color: var(--text-muted, #8A8F98);
  transition: border-color .12s ease;
}
.ob-foto:hover .ob-foto__ring { border-color: var(--menta, #A1E1BC); }
.ob-foto__ring img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-foto__ring svg { width: 2.125rem; height: 2.125rem; }
.ob-foto__badge {
  position: absolute; right: -2px; bottom: -2px; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--menta, #A1E1BC); color: var(--text-on-accent, #14331F);
  display: grid; place-items: center; border: 2px solid var(--panel-bg, #FFFFFF);
}
.ob-foto__badge svg { width: 0.875rem; height: 0.875rem; }

@media (max-width: 900px) {
  .stp-layout { grid-template-columns: 1fr; }
  .stp-users { flex-direction: row; flex-wrap: wrap; }
  .stp-user { width: auto; }
}
@media (max-width: 900px) {
  .stp-row { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}

/* ═══ Crédito HAZE — linkea a hazecore.app, tipografía del sistema ═══ */
.powered-haze { font-size: var(--t6); font-weight: 700; letter-spacing: 0.02em; color: var(--text-muted); text-decoration: none; opacity: 0.75; }
.powered-haze b { color: var(--azul); font-weight: 800; }
.powered-haze:hover { opacity: 1; }
.powered-haze:hover b { text-decoration: underline; }
body.dark-mode .powered-haze b { color: var(--azul-hi); }
.powered-haze--portal { font-size: var(--t5); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════════
   TAREAS ASIGNADAS — botón flotante + panel (js/tareas.js), carta del Panel
   General y vista completa `mis_tareas` (js/views/mis-tareas.js)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Piezas compartidas: prioridad, vencimiento, vínculo, avatar ── */
.tsk-prio { width: 0.5rem; height: 0.5rem; border-radius: 50%; display: inline-block; margin-right: var(--sp-2); vertical-align: 1px; flex: 0 0 auto; }
.tsk-prio--alta  { background: var(--status-red, var(--status-red)); }
.tsk-prio--media { background: var(--naranja); }
.tsk-prio--baja  { background: var(--verde); }

.tsk-venc { font-size: var(--t6); font-weight: 700; color: var(--text-muted); }
.tsk-venc.is-pronto  { color: var(--naranja); }
.tsk-venc.is-vencida { color: var(--status-red, var(--status-red)); }

.tsk-vinc {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: var(--hover-soft); color: var(--azul);
  border: none; border-radius: 999px; padding: var(--sp-1) var(--sp-2);
  font-size: var(--t6); font-weight: 700; font-family: inherit; cursor: pointer;
  max-width: 13.75rem; transition: filter 0.15s ease;
}
.tsk-vinc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsk-vinc svg { width: 0.6875rem; height: 0.6875rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tsk-vinc:hover { filter: brightness(0.96); }
.tsk-vinc.is-off { cursor: default; color: var(--text-muted); }
body.dark-mode .tsk-vinc { color: var(--azul-hi); }

.tsk-ava {
  width: 2.375rem; height: 2.375rem; flex: 0 0 2.375rem; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  font-size: var(--t4); font-weight: 800; color: #FFFFFF; background: var(--azul);
}
.tsk-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tsk-ava--sm { width: 1.875rem; height: 1.875rem; flex-basis: 1.875rem; font-size: var(--t5); font-weight: 500; }
.tsk-ava--t0 { background: #005069; } .tsk-ava--t1 { background: #0087AF; }
.tsk-ava--t2 { background: #009B44; } .tsk-ava--t3 { background: #F17E30; }
.tsk-ava--t4 { background: #6C7A89; } .tsk-ava--t5 { background: #B86A15; }

/* (El compositor, la vista Tareas y la card del Panel están al final del archivo.) */

/* ═══════════════════════════════════════════════════════════════════════════
   FINANZAS · DESAGREGACIÓN IMPOSITIVA (modal de compras) + LIBRO IVA COMPRAS
   ═══════════════════════════════════════════════════════════════════════════ */

.fmodal--wide { width: 55rem; max-width: calc(100vw - 3rem); }
.fmodal--xl { width: 65rem; max-width: calc(100vw - 3rem); }
.fnum-split { display: flex; align-items: center; gap: var(--sp-1); }
.fnum-split .finput { min-width: 0; }
.fnum-split .finput--pv { flex: 0 0 4.75rem; }
.fnum-split__sep { color: var(--ink-3); font-weight: 700; }
.finput--papel { border-color: var(--celeste); font-weight: 700; }

/* Grilla de conceptos: Concepto | Detalle | monto | Alíc | IVA | importe | × */
.fdes { display: flex; flex-direction: column; gap: var(--sp-2); }
.fdes-row { display: grid; grid-template-columns: 11rem minmax(7.5rem, 1fr) 8.25rem 5.75rem 8.25rem 7.25rem 1.875rem; gap: var(--sp-2); align-items: center; }
.fdes-row--head { padding: 0 2px; }
.fdes-row--head span { font-size: var(--t6); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.fdes-row--head span:nth-child(n+3):not(:last-child) { text-align: right; }
.fdes-row .fselect, .fdes-row .finput { padding: var(--sp-2) var(--sp-2); font-size: var(--t4); font-weight: 500; }
.fdes-alic { text-align: right; }
.fdes-monto, .fdes-iva { text-align: right; font-variant-numeric: tabular-nums; }
.fdes-imp { font-size: var(--t4); text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--nav-ink); white-space: nowrap; }
.fdes-row--manual .fdes-iva { border-color: var(--naranja); }
.fdes-det { color: var(--ink-muted); }
.fdes-row--det { grid-template-columns: 8.125rem 1fr 6.25rem 3.75rem 6.25rem 6.25rem; padding: var(--sp-2) var(--sp-2); background: var(--card); border-radius: var(--r-pill); font-size: var(--t4); font-weight: 500; font-variant-numeric: tabular-nums; }
.fdes-row--det.fdes-row--head { background: transparent; padding: 0 var(--sp-2); }
.fdes--detalle { gap: var(--sp-1); }

.fdes-tot { background: var(--card); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.fdes-tot__row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--t5); font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.fdes-tot__row .r { font-weight: 600; color: var(--ink); }
.fdes-tot__row--sub { border-top: 1px dashed var(--dashed); padding-top: var(--sp-1); margin-top: 2px; }
.fdes-tot__row--total { border-top: 1.5px solid var(--line); padding-top: var(--sp-1); margin-top: var(--sp-1); font-size: var(--t4); font-weight: 800; color: var(--ink); }
.fdes-tot__row--total .r { font-weight: 800; }

.fdes-cierre { font-weight: 700; font-size: var(--t4); }
.fdes-cierre--ok { color: var(--verde); }
.fdes-cierre--mal { color: var(--fin-neg); }

/* Libro IVA Compras: totales al pie, descuadres */
.fiva-totrow td { font-weight: 800; border-top: 1.5px solid var(--line); }
.fiva-descuadre td { background: rgba(241, 126, 48, 0.09); }
.fiva-warn { background: rgba(241, 126, 48, 0.1); border: 1px solid rgba(241, 126, 48, 0.35); border-radius: var(--r-row); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-3); }
.fiva-warn__title { font-size: var(--t4); font-weight: 700; color: var(--ink); margin-bottom: var(--sp-1); }
.fiva-warn__row { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* Tonos nuevos de badge para el pipeline documental */
.fbadge--warn { background: rgba(241, 126, 48, 0.18); color: #B85E1D; font-weight: 700; }
.fbadge--celeste { background: rgba(0, 135, 175, 0.16); color: var(--celeste); font-weight: 700; }
.fbadge--violeta { background: rgba(108, 92, 231, 0.16); color: #6C5CE7; font-weight: 700; }
body.dark-mode .fbadge--warn { color: #F2A56B; }
body.dark-mode .fbadge--celeste { color: var(--azul-hi); }
body.dark-mode .fbadge--violeta { color: #A99CF5; }

/* ═══════════════════════════════════════════════════════════════════════════
   FINANZAS · SECCIONES NUEVAS (OC/remitos/facturas · Costos por obra ·
   Servicios y gastos fijos) — piezas compartidas fx-*
   ═══════════════════════════════════════════════════════════════════════════ */

.fx-sub { margin: var(--sp-1) 0 0; font-size: var(--t4); font-weight: 500; color: var(--ink-muted); max-width: 47.5rem; }

/* KPIs con baldosa de icono (estilo de las maquetas) */
.fx-kpis { display: grid; gap: var(--sp-3); margin: 2px 0 var(--sp-4); }
.fx-kpis--5 { grid-template-columns: repeat(5, 1fr); }
.fx-kpis--6 { grid-template-columns: repeat(6, 1fr); }
.fx-kpis--tot { margin-top: var(--sp-4); }
.fx-kpi { background: var(--card); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); display: flex; gap: var(--sp-3); align-items: flex-start; min-width: 0; }
.fx-kpi__ico { width: 2.375rem; height: 2.375rem; border-radius: var(--r-pill); display: grid; place-items: center; flex: 0 0 auto; }
.fx-kpi__ico svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fx-kpi__ico--celeste { background: var(--hover-accent); color: var(--celeste); }
.fx-kpi__ico--verde { background: rgba(0, 155, 68, 0.14); color: var(--verde); }
.fx-kpi__ico--naranja { background: rgba(241, 126, 48, 0.15); color: var(--naranja); }
.fx-kpi__ico--azul { background: rgba(0, 80, 105, 0.12); color: var(--azul); }
.fx-kpi__ico--violeta { background: rgba(108, 92, 231, 0.14); color: #6C5CE7; }
.fx-kpi__ico--menta { background: var(--menta); color: var(--text-on-accent); }
.fx-kpi__ico--rojo { background: var(--status-red-bg); color: var(--status-red); }
body.dark-mode .fx-kpi__ico--azul { color: var(--azul-hi); }
body.dark-mode .fx-kpi__ico--violeta { color: #A99CF5; }
.fx-kpi__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-kpi__label { font-size: var(--t6); font-weight: 600; color: var(--ink-3); line-height: 1.3; }
.fx-kpi__value { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.4px; white-space: nowrap; color: var(--ink); }
.fx-kpi__sub { font-size: var(--t6); font-weight: 600; color: var(--ink-3); }
.fx-kpi__sub .fbadge { font-size: var(--t6); font-weight: 600; padding: 2px var(--sp-2); }

/* Cuerpo con carril lateral */
.fx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20.625rem; gap: var(--sp-4); align-items: start; }
.fx-main { min-width: 0; display: flex; flex-direction: column; }
.fx-rail { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.fx-card { padding: var(--sp-4) var(--sp-4); }
.fx-card__title { font-size: var(--t4); font-weight: 700; color: var(--ink); }
.fx-tablecard { display: flex; flex-direction: column; }
.fx-scroll { overflow-x: auto; }
/* El ancho lo dicta la suma real de las columnas de cada fila, no un número
   fijo: con min-width:56.25rem las filas que medían más (servicios, docs)
   desbordaban su propia caja y la última columna —el kebab de acciones—
   quedaba fuera del scroll, imposible de alcanzar en notebooks. */
.fx-scroll .ftable__head, .fx-scroll .ftable__body { width: max-content; min-width: 100%; }

/* Filtros en línea (Servicios / Costos) */
.fx-filtros { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; padding: 2px 2px var(--sp-3); }
.fx-filtros--card { background: var(--card); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.fx-filtro { display: flex; flex-direction: column; gap: var(--sp-1); }
.fx-filtro label { font-size: var(--t6); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.fx-filtro .fselect { padding: var(--sp-2) var(--sp-2); font-size: var(--t4); font-weight: 500; background: var(--panel); }
.fx-filtro--ancha .fselect { min-width: 17.5rem; max-width: 26.25rem; }
.fx-filtro__ro { font-size: var(--t4); font-weight: 700; color: var(--ink); padding: var(--sp-2) 2px; }
.fx-filtros__sp { flex: 1; }

/* Celdas compuestas de tabla */
.fx-cel { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fx-cel--srv { flex-direction: row; align-items: center; gap: var(--sp-2); }
.fx-cel__num { font-size: var(--t4); font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-cel__fecha { font-size: var(--t6); font-weight: 500; color: var(--ink-3); }
.fx-cel__vacio { color: var(--dashed); font-weight: 600; }
.fx-row { cursor: pointer; }
.fx-row--sel { outline: 1.5px solid var(--celeste); }
.fx-row--total { font-weight: 800; cursor: default; background: var(--card); }
.fx-row--total:hover { transform: none; }
.fx-adj { display: inline-flex; align-items: center; gap: var(--sp-1); align-self: flex-start; border: none; background: var(--status-red-bg); color: var(--status-red); font-family: inherit; font-size: var(--t6); font-weight: 800; border-radius: var(--r-pill); padding: 2px var(--sp-2); cursor: pointer; margin-top: 2px; }
.fx-adj svg { width: 0.625rem; height: 0.625rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fx-adj:hover { background: rgba(196, 85, 77, 0.2); }
body.dark-mode .fx-adj { color: #E58983; }
.fx-saldo--atencion { color: var(--naranja); }

/* Grillas por sección */
.frow--docs { grid-template-columns: minmax(10.625rem, 1.4fr) 6.875rem 7.5rem 6.875rem 8.125rem 6.875rem 7.375rem 6.875rem; gap: var(--sp-2); }
.frow--serv { grid-template-columns: minmax(10.625rem, 1.4fr) 5.5rem 7.25rem 6.25rem 6.875rem 7.75rem minmax(6.25rem, 1fr) 2.25rem; gap: var(--sp-2); }
.frow--costos { grid-template-columns: minmax(12.5rem, 1.4fr) 8.125rem 8.125rem 5.625rem 5.625rem minmax(8.75rem, 1fr); gap: var(--sp-2); }
.frow--consumo { grid-template-columns: minmax(8.75rem, 1fr) 3.75rem 5rem 6.875rem 2.25rem; gap: var(--sp-2); }
.fx-scroll .frow--consumo { min-width: 0; }

/* Paginador del pie */
.fx-pager { display: inline-flex; gap: var(--sp-1); }
.fx-pager__btn { min-width: 1.625rem; height: 1.625rem; border: none; border-radius: var(--r-pill); background: var(--card); color: var(--nav-ink); font-family: inherit; font-size: var(--t5); font-weight: 700; cursor: pointer; }
.fx-pager__btn.is-active { background: var(--menta); color: var(--text-on-accent); }
.fx-pager__btn:disabled { opacity: 0.4; cursor: default; }

/* Nota de regla de control */
.fx-regla { margin-top: var(--sp-3); background: rgba(0, 135, 175, 0.08); border: 1px solid rgba(0, 135, 175, 0.25); border-radius: var(--r-row); padding: var(--sp-3) var(--sp-4); font-size: var(--t5); font-weight: 500; color: var(--ink-muted); line-height: 1.55; }
.fx-regla b { color: var(--ink); }

/* Alertas del carril */
.fx-alerta { padding: var(--sp-2) var(--sp-3); }
.fx-alerta__txt { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t5); font-weight: 600; color: var(--ink-muted); min-width: 0; }
.fx-alerta__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: 0 0 auto; }
.fx-alerta__dot--naranja { background: var(--naranja); }
.fx-alerta__dot--verde { background: var(--verde); }
.fx-alerta__dot--celeste { background: var(--celeste); }
.fx-alerta__dot--azul { background: var(--azul); }
.fx-alerta__dot--violeta { background: #6C5CE7; }
.fx-alerta__dot--rojo { background: var(--status-red); }
body.dark-mode .fx-alerta__dot--azul { background: var(--azul-hi); }
.fx-alerta__n { font-size: var(--t5); font-weight: 800; background: rgba(241, 126, 48, 0.16); color: #B85E1D; border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-2); }
.fx-alerta__n--cero { background: var(--line); color: var(--nav-ink); }
body.dark-mode .fx-alerta__n { color: #F2A56B; }

/* Embudo documental */
.fx-embudo { display: flex; flex-direction: column; gap: var(--sp-2); }
.fx-emb { display: grid; grid-template-columns: 5.75rem 1fr 5.75rem; gap: var(--sp-2); align-items: center; }
.fx-emb__lbl { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--t5); font-weight: 600; color: var(--ink-muted); }
.fx-emb__barra { position: relative; height: 1rem; background: var(--row); border-radius: var(--r-pill); overflow: hidden; display: flex; align-items: center; }
.fx-emb__barra b { position: absolute; right: 0.375rem; font-size: var(--t6); font-weight: 800; color: var(--ink-muted); }
.fx-emb__fill { height: 100%; border-radius: var(--r-pill); min-width: 0.25rem; }
.fx-emb__fill--naranja { background: rgba(241, 126, 48, 0.5); }
.fx-emb__fill--verde { background: rgba(0, 155, 68, 0.45); }
.fx-emb__fill--violeta { background: rgba(108, 92, 231, 0.45); }
.fx-emb__fill--celeste { background: rgba(0, 135, 175, 0.45); }
.fx-emb__fill--azul { background: rgba(0, 80, 105, 0.45); }
body.dark-mode .fx-emb__fill--azul { background: rgba(46, 157, 189, 0.45); }
.fx-emb__monto { font-size: var(--t6); font-weight: 700; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }

/* Detalle del registro (carril) */
.fx-det__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.fx-det__nombre { font-size: var(--t4); font-weight: 800; color: var(--ink); min-width: 0; }
.fx-det__list { margin-bottom: var(--sp-2); }
.fx-det__list .fkv { flex-wrap: wrap; }
.fx-det__acts { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-top: var(--sp-2); }
.fx-btn--danger:hover { border-color: var(--status-red); color: var(--status-red); }
.fx-saldobox { border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-3); font-size: var(--t5); font-weight: 500; line-height: 1.5; color: var(--ink-muted); }
.fx-saldobox b { color: var(--ink); }
.fx-saldobox--ok { background: rgba(0, 155, 68, 0.1); border: 1px solid rgba(0, 155, 68, 0.3); }
.fx-saldobox--atencion { background: rgba(241, 126, 48, 0.1); border: 1px solid rgba(241, 126, 48, 0.35); }

/* Varios */
.fx-ava { width: 1.875rem; height: 1.875rem; border-radius: var(--r-pill); display: grid; place-items: center; font-size: var(--t4); font-weight: 800; flex: 0 0 auto; }
.fx-kebab { width: 1.75rem; height: 1.75rem; border: none; border-radius: var(--r-pill); background: transparent; color: var(--ink-3); display: inline-grid; place-items: center; cursor: pointer; }
.fx-kebab:hover { background: var(--hover-soft); color: var(--ink); }
.fx-kebab svg { width: 0.9375rem; height: 0.9375rem; fill: currentColor; stroke: none; }
.fx-medio { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--t5); font-weight: 600; color: var(--ink-muted); min-width: 0; }
.fx-medio svg { width: 0.875rem; height: 0.875rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.fx-obs { font-size: var(--t5); font-weight: 500; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-txt--rojo { color: var(--status-red); }
.fx-txt--naranja { color: var(--naranja); }
.fx-res--verde { color: var(--verde); }
.fx-res--naranja { color: var(--naranja); }
.fx-desvio { font-size: var(--t6); font-weight: 800; border-radius: var(--r-pill); padding: 2px var(--sp-2); }
.fx-desvio--mal { background: var(--status-red-bg); color: var(--status-red); }
.fx-desvio--bien { background: rgba(0, 155, 68, 0.12); color: var(--verde); }
body.dark-mode .fx-txt--rojo, body.dark-mode .fx-desvio--mal { color: #E58983; }

/* Costos: bloque inferior (consumos + comparativo) */
.fx-abajo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sp-4); margin-top: var(--sp-4); align-items: start; }
.fx-cmp { display: grid; grid-template-columns: minmax(7.5rem, 1fr) minmax(5.625rem, 1.2fr) 5.75rem 5.75rem 4rem; gap: var(--sp-2); align-items: center; padding: var(--sp-1) 0; }
.fx-cmp__head { display: grid; grid-template-columns: minmax(7.5rem, 1fr) minmax(5.625rem, 1.2fr) 5.75rem 5.75rem 4rem; gap: var(--sp-2); font-size: var(--t6); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); margin-bottom: 2px; }
.fx-cmp__head .r, .fx-cmp__monto, .fx-cmp__desv { text-align: right; }
.fx-cmp__lbl { font-size: var(--t5); font-weight: 600; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-cmp__bars { display: flex; flex-direction: column; gap: var(--sp-1); }
.fx-cmp__bar { height: 0.4375rem; border-radius: 4px; min-width: 0.1875rem; }
.fx-cmp__bar--presu { background: rgba(0, 135, 175, 0.45); }
.fx-cmp__bar--real { background: rgba(0, 155, 68, 0.55); }
.fx-cmp__monto { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.fx-cmp__leyenda { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t6); font-weight: 600; color: var(--ink-3); }
.fx-cmp__dot { width: 0.5625rem; height: 0.5625rem; border-radius: 3px; display: inline-block; }
.fx-cmp__dot--presu { background: rgba(0, 135, 175, 0.55); }
.fx-cmp__dot--real { background: rgba(0, 155, 68, 0.6); }

/* Notebooks y pantallas angostas */
@media (max-width: 1100px) {
  .fx-kpis--5 { grid-template-columns: repeat(3, 1fr); }
  .fx-kpis--6 { grid-template-columns: repeat(3, 1fr); }
}
/* El breakpoint mide la ventana, pero el ancho útil es la ventana menos el
   sidebar (262px) y los márgenes: en una notebook de 1440 quedaban 1142px y
   el carril de 20.6rem dejaba la tabla en 758px, menos de lo que mide la
   fila. De 1400 para abajo el carril va debajo y la tabla se queda con todo
   el ancho. */
@media (max-width: 1400px) {
  .fx-grid { grid-template-columns: minmax(0, 1fr); }
  .fx-rail { flex-direction: row; flex-wrap: wrap; }
  .fx-rail .fin-card { flex: 1 1 18.75rem; }
  .fx-abajo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .fx-kpis--5, .fx-kpis--6 { grid-template-columns: repeat(2, 1fr); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   TAREAS — piezas compartidas (js/tareas.js), card del Panel General, vista
   completa (.tk, js/views/mis-tareas.js) y compositor "Redactar" (.tkc)
   ═══════════════════════════════════════════════════════════════════════════ */

.tsk-iconbtn {
  width: 1.875rem; height: 1.875rem; flex: 0 0 auto; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; background: var(--card); color: var(--nav-ink);
  transition: background 0.15s ease;
}
.tsk-iconbtn:hover { background: var(--hover-soft); }
.tsk-iconbtn svg { width: 0.875rem; height: 0.875rem; }
.tsk-iconbtn--xs { width: 1.375rem; height: 1.375rem; }
.tsk-iconbtn--xs svg { width: 0.625rem; height: 0.625rem; }
.tsk-ava--lg { width: 3rem; height: 3rem; flex-basis: 3rem; font-size: 1rem; }

.tsk-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tsk-chip {
  border: 1.5px solid var(--line); background: var(--panel-bg); color: var(--ink-muted);
  border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3); font-family: inherit; font-size: var(--t5); font-weight: 700;
  cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.tsk-chip:hover { border-color: var(--celeste); color: var(--azul); }
body.dark-mode .tsk-chip:hover { color: var(--azul-hi); }
.tsk-chip.is-on { background: var(--menta); border-color: var(--menta); color: var(--text-on-accent); }
.tsk-chip.is-set { border-color: var(--verde); color: var(--verde); }
.tsk-chip--alta.is-on { background: var(--status-red); border-color: var(--status-red); color: #FFFFFF; }

/* Picker de vínculo (compositor) */
.tsk-picker { background: var(--card); border-radius: var(--r-row); padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1); }
.tsk-picker__search { display: flex; align-items: center; gap: var(--sp-2); background: var(--panel-bg); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-2); color: var(--text-muted); }
.tsk-picker__search svg { width: 0.8125rem; height: 0.8125rem; flex: 0 0 auto; }
.tsk-picker__search input { flex: 1; min-width: 0; border: none; background: transparent; font-family: inherit; font-size: var(--t4); font-weight: 600; color: var(--ink); }
.tsk-picker__search input:focus { outline: none; }
.tsk-picker__item { display: flex; flex-direction: column; gap: 1px; text-align: left; border: none; background: transparent; border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-2); cursor: pointer; font-family: inherit; transition: background 0.15s ease; }
.tsk-picker__item:hover { background: var(--hover-soft); }
.tsk-picker__item span { font-size: var(--t4); font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsk-picker__item small { font-size: var(--t6); font-weight: 600; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsk-picker__empty { font-size: var(--t5); font-weight: 600; color: var(--text-muted); padding: var(--sp-2) var(--sp-2); }

/* Adjunto de una tarea (chip que abre el archivo) */
.tsk-adj {
  display: inline-flex; align-items: center; gap: var(--sp-1); max-width: 13.75rem;
  border: none; background: var(--card); color: var(--ink-muted); border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-2); font-family: inherit; font-size: var(--t6); font-weight: 700; cursor: pointer;
}
.tsk-adj svg { width: 0.6875rem; height: 0.6875rem; flex: 0 0 auto; }
.tsk-adj span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsk-adj:hover { background: var(--hover-soft); color: var(--azul); }

/* ── Card "Tareas pendientes" del Panel General ── */
.hz-dash .task--asig { align-items: flex-start; }
.hz-dash .task__check {
  width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; margin-top: 1px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--dashed); background: transparent; color: transparent;
  display: grid; place-items: center; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.hz-dash .task__check svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hz-dash .task__check:hover { border-color: var(--verde); color: var(--verde); background: rgba(0, 155, 68, 0.08); }
.hz-dash .task__body { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.hz-dash .task__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--t5); font-weight: 600; color: var(--ink-3); }
.hz-dash .tasks__all {
  margin-top: var(--sp-2); width: 100%; border: none; cursor: pointer;
  background: var(--card); border-radius: var(--r-pill); padding: var(--sp-2);
  font-family: inherit; font-size: var(--t4); font-weight: 700; color: var(--azul);
  transition: background 0.15s ease;
}
.hz-dash .tasks__all:hover { background: var(--hover-soft); }
body.dark-mode .hz-dash .tasks__all { color: var(--azul-hi); }

/* ── Vista Tareas (.tk): usuarios a la derecha, detalle a la izquierda ── */
.tk { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tk__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.tk__grid--rail { grid-template-columns: minmax(0, 1fr) 18.75rem; }
.tk__main { min-width: 0; }
.tk__rail { background: var(--card); border-radius: var(--r-card); padding: var(--sp-3); position: sticky; top: 0; max-height: calc(100vh - 9.375rem); overflow-y: auto; }
.tk__railhead { font-size: var(--t6); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); padding: var(--sp-1) var(--sp-1) var(--sp-2); }
.tk__railn { font-weight: 600; }
.tk-users { display: flex; flex-direction: column; gap: 2px; }
.tk-u {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left;
  border: none; background: transparent; border-radius: var(--r-row); padding: var(--sp-2); cursor: pointer; font-family: inherit;
  transition: background 0.15s ease;
}
.tk-u:hover { background: var(--hover-soft); }
.tk-u.is-on { background: var(--panel-bg); box-shadow: var(--shadow-panel); }
.tk-u__txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; flex: 1; }
.tk-u__n { font-size: var(--t4); font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-u__n small { font-weight: 600; color: var(--ink-3); margin-left: var(--sp-1); font-size: var(--t6); }
.tk-u__s { font-size: var(--t5); font-weight: 600; color: var(--ink-3); }
.tk-u__n2 { min-width: 1.5rem; height: 1.5rem; padding: 0 var(--sp-2); border-radius: 999px; display: grid; place-items: center; font-size: var(--t5); font-weight: 800; background: var(--card); color: var(--ink-muted); flex: none; }
.tk-u.is-on .tk-u__n2 { background: var(--hover-soft); }
.tk-u__n2.is-danger { background: var(--status-red-bg); color: var(--status-red); }
.tk-u__n2.is-ok { background: var(--status-green-bg); color: var(--status-green); }
.tk-u__vacio { font-size: var(--t5); font-weight: 600; color: var(--ink-3); padding: var(--sp-2); }

.tk-user { display: flex; align-items: center; gap: var(--sp-3); background: var(--card); border-radius: var(--r-card); padding: var(--sp-4) var(--sp-4); }
.tk-user__txt { flex: 1; min-width: 0; }
.tk-user__name { font-size: 1rem; font-weight: 800; letter-spacing: -0.2px; color: var(--ink); }
.tk-user__yo { font-size: var(--t6); font-weight: 700; color: var(--ink-3); background: var(--panel-bg); border-radius: 999px; padding: 2px var(--sp-2); margin-left: var(--sp-1); vertical-align: middle; }
.tk-user__meta { font-size: var(--t5); font-weight: 600; color: var(--ink-3); margin-top: 2px; }
.tk-user__new { flex: none; }

.tk-sum { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); padding: var(--sp-3) var(--sp-1) 2px; font-size: var(--t4); font-weight: 600; color: var(--ink-muted); }
.tk-sum__i b { font-weight: 800; color: var(--ink); }
.tk-sum__i.is-danger, .tk-sum__i.is-danger b { color: var(--status-red); }
.tk-sum__i.is-ok b { color: var(--status-green); }

.tk-sec { font-size: var(--t6); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); margin: var(--sp-4) 2px var(--sp-2); display: flex; align-items: center; gap: var(--sp-1); }
.tk-sec--btn { border: none; background: transparent; cursor: pointer; font-family: inherit; padding: 0; }
.tk-sec--btn:hover { color: var(--azul); }
.tk-sec__chev { font-size: var(--t6); font-weight: 600; }
.tk-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.tk-list--done { opacity: 0.9; }
.tk-row {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  background: var(--panel-bg); border: 1px solid var(--line); border-radius: var(--r-row); padding: var(--sp-3) var(--sp-3);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.tk-row.is-hecha { opacity: 0.62; }
.tk-row.is-hecha .tk-row__title { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.tk-row.is-focus { border-color: var(--celeste); box-shadow: 0 0 0 3px rgba(0, 135, 175, 0.18); outline: none; }
.tk-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.tk-row__title { font-size: var(--t4); font-weight: 600; color: var(--ink); }
.tk-row__desc { font-size: var(--t4); font-weight: 500; color: var(--ink-muted); white-space: pre-line; }
.tk-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--t5); font-weight: 600; color: var(--ink-3); }
.tk-fechas { color: var(--ink-muted); }
.tk-row__acts { display: flex; align-items: center; gap: 2px; }
.tk-check {
  width: 1.625rem; height: 1.625rem; flex: 0 0 1.625rem; margin-top: 1px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--dashed); background: transparent; color: transparent;
  display: grid; place-items: center; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.tk-check svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tk-check:hover { border-color: var(--verde); color: var(--verde); background: rgba(0, 155, 68, 0.08); }
.tk-check.is-on { border-color: var(--verde); background: var(--verde); color: #FFFFFF; }
.tk-check--ro { cursor: default; }
.tk-check--ro:hover { border-color: var(--dashed); color: transparent; background: transparent; }
.tk-check--ro.is-on, .tk-check--ro.is-on:hover { border-color: var(--verde); background: var(--verde); color: #FFFFFF; }
.tk-iconbtn { width: 1.875rem; height: 1.875rem; border-radius: var(--r-pill); border: none; background: transparent; color: var(--text-muted); display: grid; place-items: center; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.tk-iconbtn svg { width: 0.875rem; height: 0.875rem; }
.tk-iconbtn:hover { background: var(--hover-soft); color: var(--azul); }
.tk-iconbtn--danger:hover { color: var(--status-red); background: var(--status-red-bg); }
.tk-aldia { font-size: var(--t4); font-weight: 600; color: var(--ink-muted); background: var(--card); border-radius: var(--r-row); padding: var(--sp-3); text-align: center; margin: 0; }
.tk-badge { display: inline-flex; align-items: center; font-size: var(--t6); font-weight: 700; padding: 2px var(--sp-2); border-radius: var(--r-pill); background: var(--status-gray-bg); color: var(--status-gray); white-space: nowrap; }
.tk-badge--ok { background: var(--status-green-bg); color: var(--status-green); }
.tk-badge--warn { background: var(--status-orange-bg); color: var(--status-orange); }
.tk-badge--danger { background: var(--status-red-bg); color: var(--status-red); }
.tk-badge--info { background: var(--status-blue-bg); color: var(--status-blue); }
.tk-badge--neutral { background: var(--status-gray-bg); color: var(--status-gray); }
.tk .emptybox { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; padding: 3rem var(--sp-4); background: var(--card); border-radius: var(--r-card); margin-top: var(--sp-3); }
.tk .emptybox__mark { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--panel-bg); color: var(--ink-3); display: grid; place-items: center; }
.tk .emptybox__mark svg { width: 1.3125rem; height: 1.3125rem; }
.tk .emptybox__title { font-size: 0.875rem; font-weight: 700; color: var(--ink-muted); }
.tk .emptybox__sub { font-size: var(--t4); font-weight: 500; color: var(--ink-3); max-width: 21.25rem; }
@media (max-width: 1100px) {
  .tk__grid--rail { grid-template-columns: minmax(0, 1fr); }
  .tk__rail { position: static; max-height: none; }
  .tk-users { flex-direction: row; flex-wrap: wrap; }
  .tk-u { width: auto; }
}

/* ── Compositor "Nueva tarea" (ventana anclada abajo a la derecha) ── */
.tkc {
  position: fixed; right: 1.5rem; bottom: 0; z-index: var(--z-drawer);
  width: 32.5rem; max-width: calc(100vw - 2rem);
  max-height: min(45rem, calc(100vh - 2.5rem));
  background: var(--panel-bg); border: 1px solid var(--line); border-bottom: none;
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  box-shadow: var(--shadow-overlay);
  display: flex; flex-direction: column;
  animation: tkcIn 0.18s var(--ease-active);
}
@keyframes tkcIn { from { opacity: 0; transform: translateY(12px); } }
.tkc__head { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); background: var(--azul); color: #FFFFFF; border-radius: var(--r-panel) var(--r-panel) 0 0; }
.tkc__title { flex: 1; font-size: var(--t4); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkc__title-para { font-weight: 600; opacity: 0.85; }
.tkc__hbtn { width: 1.625rem; height: 1.625rem; border: none; border-radius: var(--r-pill); background: transparent; color: #FFFFFF; display: grid; place-items: center; cursor: pointer; }
.tkc__hbtn:hover { background: rgba(255, 255, 255, 0.14); }
.tkc__hbtn svg { width: 0.8125rem; height: 0.8125rem; }
.tkc.is-min .tkc__body, .tkc.is-min .tkc__foot { display: none; }
.tkc__body { padding: var(--sp-2) var(--sp-4) var(--sp-1); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-1); }
.tkc__row { display: flex; align-items: center; gap: var(--sp-2); border-bottom: 1px solid var(--line); padding: var(--sp-1) 0; }
.tkc__lbl { font-size: var(--t5); font-weight: 600; color: var(--ink-3); flex: 0 0 auto; min-width: 3rem; }
.tkc__sel, .tkc__in { flex: 1; min-width: 0; border: none; background: transparent; font-family: inherit; font-size: var(--t4); font-weight: 600; color: var(--ink); padding: var(--sp-1) 0; }
.tkc__sel:focus, .tkc__in:focus, .tkc__text:focus { outline: none; }
.tkc__in::placeholder, .tkc__text::placeholder { color: var(--ink-3); font-weight: 500; }
.tkc__text { width: 100%; min-height: 6rem; resize: vertical; border: none; background: transparent; font-family: inherit; font-size: var(--t4); font-weight: 500; color: var(--ink); padding: var(--sp-2) 0 var(--sp-1); line-height: 1.5; }
.tkc__fechas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--line); }
.tkc__f { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--t5); font-weight: 600; color: var(--ink-3); }
.tkc__f input { background: var(--card); border: 1.5px solid transparent; border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-2); font-family: inherit; font-size: var(--t5); font-weight: 600; color: var(--ink); }
.tkc__f input:focus { outline: none; border-color: var(--celeste); }
.tkc__f input:disabled { opacity: 0.45; }
.tkc__chk { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--t5); font-weight: 600; color: var(--ink-muted); cursor: pointer; margin-left: auto; }
.tkc__chk input { accent-color: var(--celeste); }
.tkc__vinc { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) 0 var(--sp-1); border-top: 1px solid var(--line); }
.tkc__vinc .tkc__lbl { min-width: 0; }
.tkc__vincsel { display: flex; align-items: center; gap: var(--sp-1); }
.tkc__adjs { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-2) 0 var(--sp-1); border-top: 1px solid var(--line); }
.tkc__adj { display: inline-flex; align-items: center; gap: var(--sp-1); background: var(--card); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-2); font-size: var(--t5); font-weight: 600; color: var(--ink); max-width: 100%; }
.tkc__adj svg { width: 0.75rem; height: 0.75rem; flex: none; color: var(--ink-3); }
.tkc__adj-n { max-width: 13.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkc__adj small { color: var(--ink-3); font-weight: 600; }
.tkc__adj-x { width: 1.25rem; height: 1.25rem; border: none; border-radius: 50%; background: transparent; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; }
.tkc__adj-x:hover { background: var(--hover-soft); color: var(--status-red); }
.tkc__adj-x svg { width: 0.625rem; height: 0.625rem; }
.tkc__foot { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4) var(--sp-3); border-top: 1px solid var(--line); }
.tkc__send { border: none; border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-4); background: var(--azul); color: #FFFFFF; font-family: inherit; font-size: var(--t4); font-weight: 700; cursor: pointer; transition: filter 0.15s ease; }
.tkc__send:hover { filter: brightness(1.08); }
.tkc__send:disabled { opacity: 0.55; cursor: default; }
.tkc__prio { display: flex; gap: var(--sp-1); margin-left: var(--sp-1); }
.tkc__prio .tsk-chip { padding: var(--sp-1) var(--sp-2); font-size: var(--t5); font-weight: 500; }
.tkc__trash { margin-left: auto; }
body.dark-mode .tkc { box-shadow: var(--shadow-overlay); }
body.dark-mode .tkc__head { background: var(--azul-hi); }
@media (max-width: 900px) { .tkc { right: 0; width: 100vw; max-width: 100vw; border-radius: 0; } .tkc__head { border-radius: 0; } }

/* ═══ Uso del sistema (card del Panel General, js/uso.js) ═══ */
.hz-dash .card__header--uso { flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.uso__ctl { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.uso__quien { max-width: 9.375rem; background: var(--row); border: 1.5px solid transparent; border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-2); font-family: inherit; font-size: var(--t5); font-weight: 600; color: var(--ink); }
.uso__quien:focus { outline: none; border-color: var(--celeste); }
.uso__seg { display: flex; gap: 2px; background: var(--row); border-radius: var(--r-pill); padding: var(--sp-1); }
.uso__segbtn { border: none; background: transparent; border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-2); font-family: inherit; font-size: var(--t5); font-weight: 700; color: var(--ink-muted); cursor: pointer; }
.uso__segbtn.is-on { background: var(--menta); color: var(--text-on-accent); }
.hz-dash .uso { display: flex; flex-direction: column; gap: var(--sp-2); min-height: 0; }
.uso__head { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.uso__total { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.uso__lbl { font-size: var(--t5); font-weight: 600; color: var(--ink-3); }
.uso__chart { height: 4rem; flex: none; }
.uso__svg { width: 100%; height: 100%; display: block; }
.uso__bar { fill: var(--celeste); opacity: 0.85; }
.uso__bar.is-zero { fill: var(--dashed); opacity: 0.6; }
.uso__bar.is-now { fill: var(--azul); opacity: 1; }
body.dark-mode .uso__bar.is-now { fill: var(--azul-hi); }
.uso__axis { display: grid; font-size: var(--t6); font-weight: 700; color: var(--ink-3); }
.uso__axis span { text-align: center; overflow: hidden; white-space: nowrap; }
/* En "día" sólo 4 de las 24 celdas llevan texto (0h, 6h, 12h, 18h) y en "mes"
   una de cada cinco; las demás van vacías. Recortar cada celda a su fracción
   cortaba "12h" y "18h" a 1366 px: 13 px de caja para 16 px de texto. Se las
   deja desbordar sobre las vecinas, que están vacías. En "semana" no: ahí las
   siete celdas llevan letra y sí tienen que recortar. */
.uso__axis--dia span,
.uso__axis--mes span { overflow: visible; }
.uso__axis--dia { grid-template-columns: repeat(24, 1fr); }
.uso__axis--semana { grid-template-columns: repeat(7, 1fr); }
.uso__axis--mes { grid-template-columns: repeat(31, 1fr); }
.uso__rank { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; flex: 1; margin-top: 2px; }
.uso__row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) 1.2fr auto; align-items: center; gap: var(--sp-2); border: none; background: transparent; border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-1); cursor: pointer; font-family: inherit; text-align: left; }
.uso__row:hover { background: var(--row); }
.uso__row .tsk-ava { width: 1.5rem; height: 1.5rem; flex-basis: 1.5rem; font-size: var(--t6); font-weight: 600; }
.uso__row-n { font-size: var(--t5); font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uso__row-bar { height: 0.375rem; border-radius: 3px; background: var(--row); overflow: hidden; }
.uso__row-fill { display: block; height: 100%; width: 0; background: var(--celeste); border-radius: 3px; }
.uso__row-t { font-size: var(--t5); font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.uso__vacio { font-size: var(--t5); font-weight: 600; color: var(--ink-3); padding: var(--sp-2) 0; }


/* ═══ Calendario unificado: categorías nuevas, filtro "Mostrar", foco de registro ═══ */
.fc-chip--tarea, .fc-event--tarea, .ev-tag--tarea, .fc-rail--tarea                     { --cal-c: var(--naranja); }
.fc-chip--rrhh, .fc-event--rrhh, .ev-tag--rrhh, .fc-rail--rrhh                         { --cal-c: #6C5CE7; }
.fc-chip--ausencia, .fc-event--ausencia, .ev-tag--ausencia, .fc-rail--ausencia         { --cal-c: #A99CF5; }
.fc-chip--presupuesto, .fc-event--presupuesto, .ev-tag--presupuesto, .fc-rail--presupuesto { --cal-c: var(--celeste); }
.fc-chip--calidad, .fc-event--calidad, .ev-tag--calidad, .fc-rail--calidad             { --cal-c: #0C8F41; }
.fc-chip--informe, .fc-event--informe, .ev-tag--informe, .fc-rail--informe             { --cal-c: #6C7A89; }
.fc-chip--deposito, .fc-event--deposito, .ev-tag--deposito, .fc-rail--deposito         { --cal-c: #B86A15; }
.fc-chip--finanzas, .fc-event--finanzas, .ev-tag--finanzas, .fc-rail--finanzas         { --cal-c: var(--verde); }
.fc-flt__pop { padding: var(--sp-2); min-width: 14.375rem; }   /* display/flex-direction/gap los pone .fc-menu__pop; repetir display:flex lo dejaba siempre abierto */
.fc-flt__opt { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); font-size: var(--t4); font-weight: 600; color: var(--ink); cursor: pointer; }
.fc-flt__opt:hover { background: var(--hover-soft); }
.fc-flt__opt input { accent-color: var(--celeste); }
.is-focus { outline: 2px solid var(--celeste); outline-offset: 2px; transition: outline-color 0.3s ease; }


/* ═══════════════════════════════════════════════════════════════════════════
   FINANZAS · FORMULARIOS DE CARGA EN BLOQUES (.fsec)
   Los modales de Cuentas por cobrar / por pagar agrupan los campos por etapa
   (comprobante · fechas · detalle · cierre · respaldo) en vez de apilar una
   pila de inputs pegados. El título del bloque lleva a la derecha lo que
   condiciona esos campos: el modo de carga de importes y las plantillas.
   ═══════════════════════════════════════════════════════════════════════════ */

.fsec { display: flex; flex-direction: column; gap: var(--sp-3); }
.fsec + .fsec { border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.fsec__head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; min-height: 1.875rem; }
.fsec__title {
  font-size: var(--t6); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-3); flex: 1 1 auto;
}
.fsec__acts { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.fsec__body { display: flex; flex-direction: column; gap: var(--sp-3); }
.fsec__act {
  border: 1.5px solid var(--line); background: var(--panel); color: var(--ink-muted);
  border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3); cursor: pointer;
  font-family: inherit; font-size: var(--t5); font-weight: 700;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.fsec__act:hover { border-color: var(--celeste); color: var(--azul); }
body.dark-mode .fsec__act:hover { color: var(--azul-hi); }
.fseg--sm { padding: var(--sp-1); }
.fseg--sm .fseg__btn { padding: var(--sp-1) var(--sp-2); font-size: var(--t5); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════════
   CARGA DE COMPROBANTES A PANTALLA COMPLETA (.fmodal--full)
   Barra superior (título + contexto) · hoja de dos columnas sobre el fondo de
   página: pasos numerados a la izquierda, totales y cierre fijos a la derecha
   · barra inferior con los botones. Reusa .fsec / .ffield / .finput.
   ═══════════════════════════════════════════════════════════════════════════ */
.fmodal-overlay--full { padding: 0; background: var(--page); }
.fmodal--full {
  width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none;
  border-radius: 0; padding: 0; gap: 0; box-shadow: none; background: var(--page);
}
.fmodal--full .fmodal__head {
  flex: none; justify-content: flex-start; gap: var(--sp-4);
  min-height: 4rem; padding: 0 var(--sp-6);
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.fmodal--full .fmodal__x { width: 2.25rem; height: 2.25rem; border-radius: var(--r-pill); }
.fmodal__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fmodal--full .fmodal__title { font-size: 1.125rem; line-height: 1.2; }
.fmodal__sub { font-size: var(--t5); font-weight: 600; color: var(--ink-muted); }
.fmodal--full .fmodal__body { flex: 1 1 auto; padding: 0; gap: 0; }
.fsheet {
  width: 100%; max-width: 1360px; /* tope en px: en notebook la hoja sigue usando el ancho disponible */ margin: 0 auto; padding: var(--sp-5) var(--sp-6) var(--sp-6);
  display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-5); align-items: start;
}
.fsheet__main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.fsheet__aside { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; position: sticky; top: 1.5rem; }

/* Bloques = cartas blancas numeradas */
.fmodal--full .fsec, .fmodal--full .fsec + .fsec {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--sp-4) var(--sp-5) var(--sp-5); gap: var(--sp-4);
}
.fmodal--full .fsec__head { gap: var(--sp-3); min-height: 2rem; }
.fsec__num {
  width: 1.625rem; height: 1.625rem; border-radius: 50%; flex: none;
  background: var(--azul); color: #fff; font-size: var(--t5); font-weight: 700;
  display: grid; place-items: center;
}
body.dark-mode .fsec__num { background: var(--azul-hi); }
.fmodal--full .fsec__title { font-size: 0.875rem; font-weight: 700; text-transform: none; letter-spacing: -0.2px; color: var(--ink); }
.fsec__note { font-size: var(--t5); font-weight: 600; color: var(--ink-muted); }
.fmodal--full .fsec__body { gap: var(--sp-4); }
.fmodal--full .ffield { gap: var(--sp-1); }
.fmodal--full .ffield__label { font-size: var(--t5); font-weight: 600; color: var(--ink-muted); }
.fmodal--full .finput, .fmodal--full .fselect {
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-3); font-size: var(--t4); font-weight: 500;
}
.fmodal--full .finput:focus, .fmodal--full .fselect:focus { border-color: var(--celeste); box-shadow: 0 0 0 3px rgba(0, 135, 175, 0.12); }
body.dark-mode .fmodal--full .finput, body.dark-mode .fmodal--full .fselect { background: var(--card); }
.fmodal--full .finput--papel { border-color: var(--celeste); font-weight: 700; }
.fmodal--full .fhint { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }

/* Grillas de renglones a todo el ancho */
.fmodal--full .fin-items { gap: var(--sp-2); }
.fmodal--full .fitem-row { grid-template-columns: minmax(10rem, 1fr) 5rem 9.375rem 6.25rem 8.125rem 1.875rem; gap: var(--sp-2); }
.fmodal--full .fin-items--noiva .fitem-row { grid-template-columns: minmax(10rem, 1fr) 5rem 9.375rem 8.125rem 1.875rem; }
.fitem-row--head { padding: 0 2px; }
.fitem-row--head span { font-size: var(--t6); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.fitem-row--head span:nth-child(n+2):not(:last-child) { text-align: right; }
.fin-items--noiva .fitem-col-iva { display: none; }
.fitem-num { text-align: right; font-variant-numeric: tabular-nums; }
.fmodal--full .fitem-iva { padding: var(--sp-2) var(--sp-2); }
.fmodal--full .fitem-amt { font-size: var(--t4); font-weight: 700; color: var(--ink); }
.fmodal--full .fdes-row { grid-template-columns: 10.5rem minmax(8.75rem, 1fr) 8rem 5.25rem 8rem 7.5rem 1.875rem; gap: var(--sp-2); }
.fmodal--full .fdes-row .fselect, .fmodal--full .fdes-row .finput { padding: var(--sp-2) var(--sp-3); }
.fmodal--full .fdes-imp { font-size: var(--t4); font-weight: 500; color: var(--ink); }
.fmodal--full .fbtn--dashed {
  align-self: flex-start; height: 2.25rem; padding: 0 var(--sp-3); font-size: var(--t5); font-weight: 500;
  border: 1.5px dashed var(--dashed); color: var(--ink-muted); background: transparent;
}

/* Totales de la columna derecha */
.ftot { display: flex; flex-direction: column; gap: var(--sp-2); }
.ftot__row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--t4); font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ftot__row .r { font-weight: 600; color: var(--ink); }
.ftot__row--total { border-top: 1.5px solid var(--line); padding-top: var(--sp-3); margin-top: var(--sp-1); font-size: var(--t4); font-weight: 700; color: var(--ink); align-items: baseline; }
.ftot__row--total .r { font-size: var(--t3); font-weight: 800; letter-spacing: -0.4px; }
.fsheet__aside .fdes-tot { background: transparent; padding: 0; gap: var(--sp-2); }
.fsheet__aside .fdes-tot__row { font-size: var(--t4); font-weight: 500; }
.fsheet__aside .fdes-tot__row--total { padding-top: var(--sp-3); margin-top: var(--sp-1); align-items: baseline; }
.fsheet__aside .fdes-tot__row--total .r { font-size: var(--t3); font-weight: 800; letter-spacing: -0.4px; }

/* Barra inferior: estado del cierre a la izquierda, botones a la derecha */
.fmodal--full .fmodal__foot {
  flex: none; flex-wrap: nowrap; gap: var(--sp-3); padding: var(--sp-3) var(--sp-6);
  background: var(--panel); border-top: 1px solid var(--line);
}
.fmodal--full .fmodal__foot .fdes-cierre { max-width: none; font-size: var(--t4); font-weight: 500; }
.fmodal--full .fmodal__foot .fbtn {
  height: 2.5rem; padding: 0 var(--sp-4); border-radius: var(--r-pill);
  font-size: var(--t4); font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
.fmodal--full .fbtn:hover { transform: none; filter: none; }
.fbtn--solid { background: var(--azul); color: #fff; }
.fbtn--solid:hover { background: var(--primary-hover); }
body.dark-mode .fbtn--solid { background: var(--azul-hi); color: #fff; }
.fmodal--full .fbtn--ghost { background: var(--panel); border: 1.5px solid var(--line); color: var(--ink); }
.fmodal--full .fbtn--ghost:hover { border-color: var(--ink-3); color: var(--ink); }
.fmodal--full .fbtn--text { border-color: transparent; background: transparent; color: var(--ink-muted); }
.fmodal--full .fbtn--text:hover { border-color: transparent; color: var(--ink); }
.fmodal--full .fbtn:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 1100px) {
  .fsheet { grid-template-columns: minmax(0, 1fr); padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .fsheet__aside { position: static; }
  .fmodal--full .fmodal__head, .fmodal--full .fmodal__foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}
/* Notebooks chicas: las grillas mantienen sus columnas y scrollean de costado */
@media (max-width: 1100px) {
  .fmodal--full .fdes, .fmodal--full .fin-items { overflow-x: auto; padding: var(--sp-1); margin: -0.25rem; }
  .fmodal--full .fdes-row { min-width: 51.25rem; }
  .fmodal--full .fitem-row { min-width: 42.5rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CUENTAS CORRIENTES  (js/views/cuentas.js · cuentas-form.js · cuentas-model.js)

   Esta sección estrena los componentes canónicos de _docs/CRITERIO-DISENO.md
   (§4.4): .btn con 4 variantes, .badge con 5 tonos, .card, .card--item, .kpi,
   .table, .tabs, .chip, .filters, .empty, .drawer, .menu. Se definen bajo la
   raíz `.cc` para no tocar las 37 vistas que todavía usan las familias
   congeladas: cuando la ola 1 migre el resto, alcanza con sacar el prefijo.

   Escalas respetadas: espaciado 4·8·12·16·24·32 (R-10), 6 tamaños de fuente
   (R-11), radios de token (R-12), z-index de 5 niveles (R-13), 5 tonos
   semánticos (R-14) y 3 breakpoints: 1500 · 1100 · 900 (R-15).
   ═══════════════════════════════════════════════════════════════════════════ */

.cc {
  --cc-z-menu:   100;
  --cc-z-drawer: 200;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  font-family: var(--font-family);
  color: var(--ink);
}
.cc-pantalla { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.cc-pantalla[hidden] { display: none; }
.ui [hidden], .fmodal--full [hidden] { display: none !important; }

/* ── Cabecera de pantalla (R-01 / R-02) ───────────────────────────────── */
.page-title {
  font-size: var(--t1);
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.cc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.cc-head__acc { display: flex; align-items: center; gap: var(--sp-2); }

/* ── Migas: fuera del título, como en el resto del sistema ───────────── */
.cc-crumb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.cc-crumb__b {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--ink-muted);
}
.cc-crumb__b:hover { color: var(--ink); }
.cc-crumb__b svg { width: 0.875rem; height: 0.875rem; }
.cc-crumb__sep { color: var(--dashed); }
.cc-crumb__act { color: var(--ink); font-weight: 600; }

/* ── Botón (R-16): 4 variantes, 2 tamaños ────────────────────────────── */
.ui .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  height: 2.25rem; padding: 0 var(--sp-4);
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  font-family: var(--font-family); font-size: var(--t4); font-weight: 600;
  letter-spacing: 0; text-transform: none;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ui .btn:hover { transform: none; filter: none; }
.ui .btn--primary { background: var(--azul); color: #fff; }
.ui .btn--primary:hover { background: var(--primary-hover); }
body.dark-mode .ui .btn--primary { background: var(--azul-hi); color: #06232E; }
.ui .btn--secondary { background: var(--panel); border-color: var(--line); color: var(--ink); }
.ui .btn--secondary:hover { border-color: var(--ink-3); }
.ui .btn--ghost { background: transparent; color: var(--ink-muted); }
.ui .btn--ghost:hover { background: var(--hover-soft); color: var(--ink); }
.ui .btn--danger { background: var(--status-red-bg); color: var(--status-red); }
/* R-16: el tamaño chico cambia el alto y el relleno, no la letra. */
.ui .btn--sm { height: 1.875rem; padding: 0 var(--sp-3); font-size: var(--t4); font-weight: 600; }
.ui .btn--icon { width: 1.875rem; height: 1.875rem; padding: 0; background: transparent; color: var(--ink-muted); }
.ui .btn--icon:hover { background: var(--hover-soft); color: var(--ink); }

/* ── Fila de contexto (R-03 / R-20) ──────────────────────────────────── */
.ui .filters {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.ui .filters__search {
  position: relative; display: flex; align-items: center;
  flex: 1 1 17.5rem; max-width: 23.75rem;
}
.ui .filters__search svg {
  position: absolute; left: 0.75rem; width: 0.9375rem; height: 0.9375rem; color: var(--ink-3); pointer-events: none;
}
.ui .filters__search input {
  width: 100%; height: 2.25rem; padding: 0 var(--sp-3) 0 var(--sp-6);
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-pill);
  font-family: var(--font-family); font-size: var(--t4); font-weight: 500; color: var(--ink);
}
.ui .filters__search input:focus { outline: none; border-color: var(--celeste); }
.ui .select {
  height: 2.25rem; padding: 0 var(--sp-3);
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-pill);
  font-family: var(--font-family); font-size: var(--t4); font-weight: 500; color: var(--ink); cursor: pointer;
}
.ui .chips { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ui .chip {
  height: 1.875rem; padding: 0 var(--sp-3);
  background: var(--card); border: 1.5px solid transparent; border-radius: var(--r-pill);
  font-family: var(--font-family); font-size: var(--t5); font-weight: 600; color: var(--ink-muted);
  cursor: pointer;
}
.ui .chip:hover { color: var(--ink); }
.ui .chip.is-on { background: var(--azul); color: #fff; }
body.dark-mode .ui .chip.is-on { background: var(--azul-hi); color: #06232E; }

/* ── Grilla de cuentas (R-05: card de ítem, 0 botones) ───────────────── */
.cc-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
}
.ui .cc-card, .cc-card {
  position: relative;
  display: grid; align-items: center; gap: var(--sp-3);
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  padding: var(--sp-4);
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-card);
  cursor: pointer; text-align: left;
  transition: border-color .15s ease;
}
.ui .cc-card:hover, .ui .cc-card:focus-visible,
.cc-card:hover, .cc-card:focus-visible { border-color: var(--celeste); outline: none; }
.ui .cc-card--prev, .cc-card--prev { cursor: default; }
.ui .cc-card--prev:hover, .cc-card--prev:hover { border-color: var(--line); }
.cc-card__logo {
  width: 3.25rem; height: 3.25rem; border-radius: var(--r-row);
  background: var(--card); display: grid; place-items: center; overflow: hidden;
}
.cc-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.cc-card__ini { font-size: var(--t2); font-weight: 700; color: var(--ink-muted); }
.cc-card__info { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.cc-card__nom {
  font-size: var(--t2); font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-card__meta { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.cc-card__saldo { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); }
.cc-card__saldolab { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); }
.cc-card__saldoval {
  font-size: var(--t2); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cc-card__saldoval.is-debe { color: var(--naranja); }
.cc-card__badge { grid-column: 1 / -1; }

/* ── Ficha de la cuenta: identidad + las 3 cifras fijas ──────────────── */
.cc-ficha {
  display: grid; align-items: center; gap: var(--sp-5);
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  padding: var(--sp-4) var(--sp-5);
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-card);
}
.cc-ficha__logo {
  width: 4.5rem; height: 4.5rem; border-radius: var(--r-row);
  background: var(--card); display: grid; place-items: center; overflow: hidden;
}
.cc-ficha__logo img { width: 100%; height: 100%; object-fit: contain; }
.cc-ficha__id { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.cc-ficha__meta { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); line-height: 1.5; }
.cc-ficha__tags { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cc-ficha__cifras { display: flex; align-items: stretch; gap: var(--sp-5); }
.cc-cifra {
  display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-end;
  background: none; border: none; padding: 0; font-family: var(--font-family);
}
.cc-cifra--btn { cursor: pointer; }
.cc-cifra--btn:hover .cc-cifra__v { color: var(--celeste); }
.cc-cifra__l { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); }
.cc-cifra__v {
  font-size: var(--t3); font-weight: 800; letter-spacing: -0.4px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cc-cifra__v.is-debe { color: var(--naranja); }
.cc-cifra__v.is-mal  { color: var(--status-red); }

/* ── Pestañas (R-21): una píldora sobre track ────────────────────────── */
.ui .tabs {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1); background: var(--card); border-radius: var(--r-pill);
  align-self: flex-start;
  /* Una sola fila: si no entran, la pista se desplaza de costado en vez de
     partirse en dos renglones y empujar la pantalla hacia abajo. */
  flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: thin;
}
.ui .tabs__b {
  flex-shrink: 0; white-space: nowrap;
  height: 1.875rem; padding: 0 var(--sp-4);
  background: transparent; border: none; border-radius: var(--r-pill);
  font-family: var(--font-family); font-size: var(--t4); font-weight: 600; color: var(--ink-muted);
  cursor: pointer;
}
.ui .tabs__b:hover { color: var(--ink); }
.ui .tabs__b.is-on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-panel); }

.cc-pane { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }

/* ── KPI (R-18): siempre botón, siempre filtra ───────────────────────── */
.ui .kpis { display: grid; gap: var(--sp-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui .kpis:empty { display: none; }
.ui .kpi {
  display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start;
  padding: var(--sp-4); text-align: left;
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-card);
  font-family: var(--font-family); cursor: pointer;
  transition: border-color .15s ease;
}
.ui .kpi:hover { border-color: var(--ink-3); }
.ui .kpi.is-on { border-color: var(--celeste); }
.ui .kpi__l { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); }
.ui .kpi__v {
  font-size: var(--t3); font-weight: 800; letter-spacing: -0.4px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ui .kpi__s { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.ui .kpi--warn .kpi__v   { color: var(--naranja); }
.ui .kpi--danger .kpi__v { color: var(--status-red); }

/* ── Card de bloque (R-24) ───────────────────────────────────────────── */
.ui .card:not(.card--item) {
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-card);
  padding: var(--sp-4); backdrop-filter: none;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.ui .card:not(.card--item):hover { border-color: var(--line); }
.ui .card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 1.875rem; }
.ui .card__t { font-size: var(--t2); font-weight: 700; color: var(--ink); }
.ui .card__body { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.cc-cols { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }

/* ── Estado general de la cuenta: la fórmula visible ─────────────────── */
.cc-form { display: flex; align-items: stretch; gap: var(--sp-3); flex-wrap: wrap; }
.cc-form__c {
  flex: 1 1 9.375rem; display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4); background: var(--card); border-radius: var(--r-row);
}
.cc-form__c--res { background: var(--avbg); }
.cc-form__l { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); }
.cc-form__v { font-size: var(--t3); font-weight: 800; letter-spacing: -0.4px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cc-form__s { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.cc-form__op { align-self: center; font-size: var(--t2); font-weight: 700; color: var(--ink-3); }

/* ── Barras de consumo y evolución ───────────────────────────────────── */
.cc-bars { display: flex; flex-direction: column; gap: var(--sp-3); }
.cc-bar { display: grid; align-items: center; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr) 2fr auto; }
.cc-bar__l { font-size: var(--t4); font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-bar__t { height: 0.5rem; border-radius: var(--r-pill); background: var(--cell-empty); overflow: hidden; }
.cc-bar__f { display: block; height: 100%; width: var(--w, 0%); background: var(--celeste); border-radius: var(--r-pill); }
.cc-bar__v { font-size: var(--t5); font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.cc-evo { display: flex; align-items: flex-end; gap: var(--sp-2); }
.cc-evo__c { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); justify-content: flex-end; }
.cc-evo__v { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; min-height: 1rem; }
/* La pista lleva alto fijo para que el porcentaje de la barra tenga contra qué
   resolverse: dentro de un flex el alto del ítem no es definido y la barra
   terminaba encogida al tamaño de su contenido. */
.cc-evo__t { width: 100%; height: 8.75rem; display: flex; align-items: flex-end; justify-content: center; }
.cc-evo__b { width: 100%; max-width: 2.5rem; height: var(--h, 0%); min-height: 2px; background: var(--celeste); border-radius: var(--r-pill) var(--r-pill) 0 0; }
.cc-evo__l { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); }

/* ── Tabla (R-19): tabla real, cabecera sticky, kebab al final ───────── */
.ui .table-wrap { overflow-x: auto; border: 1.5px solid var(--line); border-radius: var(--r-card); background: var(--panel); }
.ui .card__body > .table-wrap { border: none; border-radius: 0; }
.ui .card__body > .table-wrap .table th { border-top: 1px solid var(--line); }
.ui .table { width: 100%; border-collapse: collapse; font-family: var(--font-family); }
.ui .table th {
  position: sticky; top: 0; z-index: var(--z-sticky);
  padding: var(--sp-2) var(--sp-4); text-align: left;
  background: var(--panel); border-bottom: 1.5px solid var(--line);
  font-size: var(--t6); font-weight: 600; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
}
/* R-19: la fila mide 44 px (2.75rem). El relleno vertical va a --sp-2 para que
   el contenido más alto de la celda (el kebab) entre dentro de esa altura en
   vez de estirarla. */
.ui .table td {
  padding: var(--sp-2) var(--sp-4); height: 2.75rem;
  border-bottom: 1px solid var(--border-light);
  font-size: var(--t4); font-weight: 500; color: var(--ink); vertical-align: middle;
}
.ui .table tbody tr:last-child td { border-bottom: none; }
.ui .table tbody tr { cursor: pointer; }
.ui .table--ro tbody tr { cursor: default; }
.ui .table tbody tr:hover td, .ui .table tbody tr:focus-visible td { background: var(--hover-soft); }
.ui .table tbody tr:focus-visible { outline: none; }
.ui .table th.r, .ui .table td.r { text-align: right; font-variant-numeric: tabular-nums; }
.ui .table td.is-mal { color: var(--status-red); font-weight: 600; }
.ui .table__kebab { width: 2.75rem; text-align: right; }
/* Dentro de la fila el kebab se ajusta a los 44 px de R-19; fuera de la tabla
   (cabeceras de card, carriles) conserva su tamaño de siempre. */
.ui .table__kebab .menu-btn { width: 1.625rem; height: 1.625rem; }
.ui .menu-btn {
  width: 1.875rem; height: 1.875rem; border: none; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-3); cursor: pointer;
  display: inline-grid; place-items: center;
}
.ui .menu-btn:hover { background: var(--card); color: var(--ink); }
.ui .menu-btn svg { width: 1rem; height: 1rem; }
.ui .table__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--t5); font-weight: 500; color: var(--ink-muted);
}
.ui .t-cod { font-family: var(--font-mono); font-size: var(--t4); font-weight: 600; }
.ui .t-mut { color: var(--ink-muted); font-size: var(--t5); font-weight: 500; }
.cc-clip {
  margin-left: var(--sp-2); width: 1.375rem; height: 1.375rem; border: none; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-3); cursor: pointer; display: inline-grid; place-items: center;
  vertical-align: middle;
}
.cc-clip:hover { background: var(--card); color: var(--celeste); }
.cc-clip svg { width: 0.8125rem; height: 0.8125rem; }

/* ── Badge (R-17): 5 tonos, sin mono, sin mayúsculas ─────────────────── */
.ui .badge {
  display: inline-flex; align-items: center;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill);
  font-family: var(--font-family); font-size: var(--t6); font-weight: 600;
  letter-spacing: 0; text-transform: none; white-space: nowrap; border: none;
}
.ui .badge--ok      { background: var(--status-green-bg);  color: var(--status-green); }
.ui .badge--warn    { background: var(--status-orange-bg); color: var(--status-orange); }
.ui .badge--danger  { background: var(--status-red-bg);    color: var(--status-red); }
.ui .badge--info    { background: var(--status-blue-bg);   color: var(--status-blue); }
.ui .badge--neutral { background: var(--status-gray-bg);   color: var(--status-gray); }

/* ── Estado vacío (R-08): un solo componente, sin botón redundante ───── */
.ui .empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4); text-align: center;
  background: var(--panel); border: 1.5px dashed var(--line); border-radius: var(--r-card);
}
.ui .empty__ico { width: 2.5rem; height: 2.5rem; color: var(--ink-3); }
.ui .empty__ico svg { width: 100%; height: 100%; }
.ui .empty__t { font-size: var(--t2); font-weight: 700; color: var(--ink); }
.ui .empty__l { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }

/* ── Drawer (R-22): una sola pieza para ver un registro ──────────────── */
.drawer-wrap { position: fixed; inset: 0; z-index: var(--z-drawer); }
.drawer-wrap[hidden] { display: none; }
.drawer__ov { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .18s ease; }
.drawer-wrap.is-on .drawer__ov { opacity: 1; }
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 30rem; max-width: 100vw;
  display: flex; flex-direction: column;
  background: var(--panel); border-left: 1.5px solid var(--line);
  box-shadow: var(--shadow-overlay);
  transform: translateX(100%); transition: transform .18s var(--ease-active);
}
.drawer-wrap.is-on .drawer { transform: translateX(0); }
.drawer__head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1.5px solid var(--line);
}
.drawer__t { font-size: var(--t2); font-weight: 700; color: var(--ink); }
.drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.drawer__foot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top: 1.5px solid var(--line); }
.drawer__av { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.ui .dato { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.ui .dato--col { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.ui .dato__l { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); flex: none; }
.ui .dato__v { font-size: var(--t4); font-weight: 500; color: var(--ink); text-align: right; }
.ui .dato--col .dato__v { text-align: left; }

/* ── Alertas de la cuenta (dentro del drawer, no en un carril) ───────── */
.cc-alertas { display: flex; flex-direction: column; gap: var(--sp-2); }
.cc-alerta { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-row); background: var(--card); }
.cc-alerta__i { width: 1.25rem; height: 1.25rem; color: var(--ink-3); }
.cc-alerta__i svg { width: 100%; height: 100%; }
.cc-alerta--alta .cc-alerta__i  { color: var(--status-red); }
.cc-alerta--media .cc-alerta__i { color: var(--naranja); }
.cc-alerta__c { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.cc-alerta__t { font-size: var(--t4); font-weight: 600; color: var(--ink); }
.cc-alerta__d { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }

/* ── Menú contextual (R-23) — se monta en <body> ─────────────────────── */
.menu {
  position: fixed; z-index: var(--z-popover); min-width: 12.5rem; padding: var(--sp-1);
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-row);
  box-shadow: var(--shadow-overlay);
  display: flex; flex-direction: column; gap: 2px;
}
.menu__i {
  display: block; width: 100%; text-align: left;
  padding: var(--sp-2) var(--sp-3); border: none; border-radius: var(--r-pill); background: transparent;
  font-family: var(--font-family); font-size: var(--t4); font-weight: 500; color: var(--ink); cursor: pointer;
}
.menu__i:hover { background: var(--hover-soft); }
.menu__i--danger { color: var(--status-red); }

/* ═══════════════ Hojas de carga a pantalla completa ═══════════════════
   Reusan .fmodal--full / .fsheet / .fsec / .ffield / .finput de Finanzas.
   Acá va solo lo propio de Cuentas Corrientes.                         */

.cc-sheet .fsec__body > .fhint { margin-top: -0.5rem; }
.cc-aside .fsec__head { min-height: 1.5rem; }
.finput--ro { background: var(--card) !important; color: var(--ink-muted); }

/* Estado de la validación, a la izquierda de la barra inferior */
.ccv { margin-right: auto; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.ccv__lista { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ccv__txt { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.ccv--ok .ccv__txt      { color: var(--verde); font-weight: 600; }
.ccv--aviso .ccv__txt   { color: var(--naranja); }
.ccv--bloqueo .ccv__txt { color: var(--status-red); font-weight: 600; }
.cc-foot__acc { display: flex; align-items: center; gap: var(--sp-3); }

/* Avisos en la columna derecha */
.ccav { display: flex; flex-direction: column; gap: var(--sp-2); }
.ccav__ok { font-size: var(--t5); font-weight: 600; color: var(--verde); }
.ccav__it { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); background: var(--card); border-left: 3px solid var(--ink-3); }
.ccav__it--aviso   { border-left-color: var(--naranja); }
.ccav__it--bloqueo { border-left-color: var(--status-red); }
.ccav__txt { font-size: var(--t5); font-weight: 500; color: var(--ink); line-height: 1.45; }

/* Totales: verde cuando cierra, rojo cuando no */
.ftot__row--total.is-bien .r { color: var(--verde); }
.ftot__row--total.is-mal .r  { color: var(--status-red); }

/* Checkboxes de reglas */
.ccchk-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ccchk { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t4); font-weight: 500; color: var(--ink); cursor: pointer; }
.ccchk input { width: 1rem; height: 1rem; accent-color: var(--azul); cursor: pointer; }

/* Selector de archivo */
.ccfile { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ccfile__input { display: none; }
.ccfile__btn { height: 2.25rem; padding: 0 var(--sp-3); cursor: pointer; display: inline-flex; align-items: center; }
.ccfile__nom { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }

/* Aplicación de un pago a facturas */
.ccaplic { display: flex; flex-direction: column; gap: var(--sp-2); }
.ccaplic__row {
  display: grid; align-items: center; gap: var(--sp-3);
  grid-template-columns: 1.125rem minmax(7.5rem, 1fr) 7.5rem 7.5rem 8.75rem;
  padding: var(--sp-2) var(--sp-3); background: var(--card); border-radius: var(--r-row);
}
.ccaplic__row input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--azul); cursor: pointer; }
.ccaplic__num { font-family: var(--font-mono); font-size: var(--t4); font-weight: 600; color: var(--ink); }
.ccaplic__vto { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.ccaplic__saldo { font-size: var(--t4); font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.ccaplic__imp { text-align: right; }

/* Conciliación: comprobantes del período */
.ccconc { display: flex; flex-direction: column; gap: var(--sp-1); max-height: min(26.25rem, 40vh); overflow-y: auto; }
.ccconc__row {
  display: grid; align-items: center; gap: var(--sp-3);
  grid-template-columns: 1.125rem 6.25rem minmax(7.5rem, 1fr) 8.75rem 6.875rem;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-row);
}
.ccconc__row:nth-child(odd) { background: var(--card); }
.ccconc__row input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--azul); cursor: pointer; }
.ccconc__f, .ccconc__u { font-size: var(--t4); font-weight: 500; color: var(--ink); }
.ccconc__n { font-family: var(--font-mono); font-size: var(--t5); font-weight: 600; color: var(--ink-muted); }
.ccconc__c { font-size: var(--t4); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* Datos de solo lectura en la hoja de conciliación */
.ccdato-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ccdato { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); background: var(--card); border-radius: var(--r-row); }
.ccdato__l { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); }
.ccdato__v { font-size: var(--t2); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Parámetros por unidad (drawer) */
.ccparam { display: flex; flex-direction: column; gap: var(--sp-2); }
.ccparam__row { display: grid; align-items: center; gap: var(--sp-2); grid-template-columns: minmax(0, 1fr) 6.25rem 6.25rem; }
.ccparam__l { font-size: var(--t4); font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccparam__i { text-align: right; }

/* ── Breakpoints (R-15): 1500 · 1100 · 900 ───────────────────────────── */
@media (max-width: 1100px) {
  .cc-cols { grid-template-columns: minmax(0, 1fr); }
  .ccdato-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .ui .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-ficha { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .cc-ficha__cifras { grid-column: 2 / -1; justify-content: flex-start; }
  .cc-cifra { align-items: flex-start; }
  .cc-grid { grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr)); }
  .ccchk-grid { grid-template-columns: minmax(0, 1fr); }
  .ccaplic__row { grid-template-columns: 1.125rem minmax(6.25rem, 1fr) 6.875rem 8.125rem; }
  .ccaplic__vto { display: none; }
}
@media (max-width: 900px) {
  .ui .kpis { grid-template-columns: minmax(0, 1fr); }
  .cc-grid { grid-template-columns: minmax(0, 1fr); }
  .cc-ficha { grid-template-columns: minmax(0, 1fr); }
  .drawer { width: 100vw; }
  .ccdato-grid { grid-template-columns: minmax(0, 1fr); }
  .ccconc__row { grid-template-columns: 1.125rem 5.625rem minmax(0, 1fr) 5.625rem; }
  .ccconc__u { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PLANTILLA ÚNICA  (raíz .ui)
   ---------------------------------------------------------------------------
   Los componentes canónicos de §4.4 del criterio de diseño se escribieron
   primero para Cuentas Corrientes bajo la raíz `.cc`. Acá esa raíz pasó a ser
   `.ui`, que `app.js` le pone a la caja de cada sección (`.view-stage`) salvo
   en Presupuestos, que queda con su propio dibujo.

   Este bloque es el PUENTE: traduce las familias legadas (`.view-header`,
   `.btn-*`, `.dark-table`, `.data-table`, `.form-control`, `.badge-*`,
   `.rh-*`, `.mkt-tab`, `.remito-tab`, `.stat-card`, `.haze-pagination`) al
   dibujo canónico, para que las 30 secciones se vean iguales sin reescribir su
   marcado. Cuando una vista se reescriba de verdad, deja de necesitar el
   puente y usa directamente `.btn`, `.table`, `.badge`, `.kpi`, `.empty`.

   Nada de esto toca la lógica: son solo reglas de presentación.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cabecera de sección ──────────────────────────────────────────────────
   Un solo título (R-01) y una sola acción primaria a la derecha (R-02).
   Los subtítulos descriptivos de las familias viejas se retiran. */
.ui .view-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin: 0 0 var(--sp-5); padding: 0; border: none; background: none;
}
.ui .view-header > div:first-child { min-width: 0; display: flex; align-items: center; gap: var(--sp-3); }
.ui .view-header h1,
.ui .view-header h2,
.ui .view-header h3 {
  font-family: var(--font-family);
  font-size: var(--t1); font-weight: 800; letter-spacing: -0.4px; line-height: 1.15;
  color: var(--ink); margin: 0; text-transform: none;
}
.ui .view-header p,
.ui .view-header .view-sub,
.ui .rh-sub,
.ui .ot-sub { display: none; }
.ui .view-header > div:last-child { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ── Botones: las variantes legadas entran al dibujo de R-16 ──────────── */
/* Ojo: `.ui .btn` ya está dibujado más arriba (componente canónico). Acá se
   suben al mismo dibujo SOLO las variantes legadas, sin volver a declarar
   `.ui .btn` — si se redeclarara, pisaría el borde de `.btn--secondary`. */
.ui .btn-primary, .ui .btn-secondary, .ui .btn-success,
.ui .btn-danger, .ui .btn-warning, .ui .btn-outline,
.ui .btn-ghost, .ui a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  height: 2.25rem; padding: 0 var(--sp-4);
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  font-family: var(--font-family); font-size: var(--t4); font-weight: 600;
  letter-spacing: 0; text-transform: none; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ui .btn:hover, .ui .btn:active { transform: none; filter: none; box-shadow: none; }
.ui .btn svg { width: 0.875rem; height: 0.875rem; flex: none; }

.ui .btn-primary  { background: var(--azul); color: #fff; border-color: transparent; }
.ui .btn-primary:hover { background: var(--primary-hover); color: #fff; }
.ui .btn-secondary, .ui .btn-outline, .ui .btn-success, .ui .btn-warning {
  background: var(--panel); border-color: var(--line); color: var(--ink);
}
.ui .btn-secondary:hover, .ui .btn-outline:hover,
.ui .btn-success:hover, .ui .btn-warning:hover { background: var(--panel); border-color: var(--ink-3); color: var(--ink); }
.ui .btn-ghost { background: transparent; border-color: transparent; color: var(--ink-muted); }
.ui .btn-ghost:hover { background: var(--hover-soft); color: var(--ink); }
.ui .btn-danger { background: var(--status-red-bg); border-color: transparent; color: var(--status-red); }
.ui .btn-danger:hover { background: var(--status-red-bg); color: var(--status-red); }
.ui .btn-sm, .ui .btn-xs { height: 1.875rem; padding: 0 var(--sp-3); font-size: var(--t4); font-weight: 600; }
.ui .btn-sm svg, .ui .btn-xs svg { width: 0.8125rem; height: 0.8125rem; }
.ui .btn-block { width: 100%; }
.ui .btn:disabled { opacity: .45; cursor: not-allowed; }
body.dark-mode .ui .btn-primary { background: var(--azul-hi); }

/* ── Fila de contexto: búsqueda + filtros (R-03) ──────────────────────── */
.ui .filter-row {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin: 0 0 var(--sp-4);
}
.ui .form-control,
.ui select.form-control,
.ui input.form-control,
.ui textarea.form-control {
  font-family: var(--font-family); font-size: var(--t4); font-weight: 500;
  color: var(--ink); background: var(--panel);
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  padding: 0 var(--sp-3); height: 2.25rem;
  transition: border-color .15s ease;
}
.ui textarea.form-control { height: auto; padding: var(--sp-2) var(--sp-3); line-height: 1.5; }
.ui select.form-control { cursor: pointer; }
.ui .form-control:focus { outline: none; border-color: var(--celeste); box-shadow: none; }
.ui .form-control::placeholder { color: var(--ink-3); font-weight: 500; }
.ui .form-group { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.ui .form-group label,
.ui .form-label {
  font-family: var(--font-family); font-size: var(--t5); font-weight: 600;
  color: var(--ink-muted); text-transform: none; letter-spacing: 0;
}

/* ── Tablas legadas → dibujo de R-19 ──────────────────────────────────── */
.ui .table-panel, .ui .table-wrapper {
  overflow-x: auto; background: var(--panel);
  border: 1.5px solid var(--line); border-radius: var(--r-card);
  box-shadow: none; padding: 0;
}
.ui .dark-table, .ui .data-table {
  width: 100%; border-collapse: collapse; font-family: var(--font-family);
  background: transparent; font-size: var(--t4); font-weight: 500;
}
.ui .dark-table th, .ui .data-table th {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--card); color: var(--ink-muted);
  font-size: var(--t6); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
  text-align: left; padding: var(--sp-2) var(--sp-3); white-space: nowrap;
  border-bottom: 1px solid var(--line); border-top: none;
}
.ui .dark-table td, .ui .data-table td {
  padding: 0 var(--sp-3); height: 2.75rem;
  font-size: var(--t4); font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--line); background: transparent;
}
.ui .dark-table tbody tr:last-child td,
.ui .data-table tbody tr:last-child td { border-bottom: none; }
.ui .dark-table tbody tr:hover td,
.ui .data-table tbody tr:hover td { background: var(--hover-soft); }
.ui .dark-table .font-mono, .ui .data-table .font-mono,
.ui .dark-table code, .ui .data-table code {
  font-family: var(--font-mono); font-size: var(--t4); font-weight: 600;
}

/* Estado vacío dentro de una tabla (R-08) */
.ui .table-empty, .ui td.table-empty {
  text-align: center; padding: 2.5rem var(--sp-3); height: auto;
  font-size: var(--t4); font-weight: 500; color: var(--ink-muted);
}

/* ── Badges: 5 tonos y nada más (R-14) ────────────────────────────────── */
.ui .badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); border: none;
  font-family: var(--font-family); font-size: var(--t6); font-weight: 600;
  text-transform: none; letter-spacing: 0; white-space: nowrap;
}
.ui .badge-green   { background: var(--status-green-bg);  color: var(--status-green); }
.ui .badge-red,
.ui .badge-dark-red { background: var(--status-red-bg);   color: var(--status-red); }
.ui .badge-yellow,
.ui .badge-orange  { background: var(--status-orange-bg); color: var(--status-orange); }
.ui .badge-blue,
.ui .badge-primary,
.ui .badge-purple,
.ui .badge-cyan    { background: var(--status-blue-bg);   color: var(--status-blue); }
.ui .badge-gray    { background: var(--status-gray-bg);   color: var(--status-gray); }

/* ── KPIs legados (`.stat-card`) → dibujo de R-18 ─────────────────────────
   js/plantilla.js les cambia la clase por `.kpi` y reordena rótulo/cifra;
   acá va solo lo que distingue al KPI que no filtra nada (no es un botón). */
.ui .kpi--fijo { cursor: default; text-align: left; }
.ui .kpi--fijo:hover { border-color: var(--line); }
.ui .kpi__s { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.ui .kpi__v { font-family: var(--font-family); }
.ui .stat-icon { display: none; }

/* ── Pestañas legadas (`.mkt-tab`, `.remito-tab`) → R-21 ──────────────── */
.ui .mkt-tab, .ui .remito-tab {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-family); font-size: var(--t4); font-weight: 600;
  color: var(--ink-muted); padding: 0 var(--sp-3); height: 2rem;
  border-radius: var(--r-pill); white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.ui .mkt-tab:hover, .ui .remito-tab:hover { color: var(--ink); }
.ui .mkt-tab.active, .ui .remito-tab.active {
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow-panel);
}
.ui div:has(> .mkt-tab), .ui div:has(> .remito-tab) {
  background: var(--card) !important; border: none !important;
  border-radius: var(--r-pill) !important; padding: var(--sp-1) !important; gap: var(--sp-1) !important;
}

/* ── Paginador ────────────────────────────────────────────────────────── */
.ui .haze-pagination { margin-top: var(--sp-4); }
.ui .haze-page-btn {
  height: 1.875rem; min-width: 1.875rem; padding: 0 var(--sp-2);
  border-radius: var(--r-pill); border: 1.5px solid var(--line);
  background: var(--panel); color: var(--ink-muted);
  font-family: var(--font-family); font-size: var(--t5); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
}
.ui .haze-page-btn:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); }
.ui .haze-page-btn.active { background: var(--azul); border-color: var(--azul); color: #fff; }
body.dark-mode .ui .haze-page-btn.active { background: var(--azul-hi); border-color: var(--azul-hi); }

/* ═══════════════ RRHH: la familia `.rh-*` entra a la plantilla ══════════ */
.ui .hz-rh .rh-head { align-items: center; margin-bottom: var(--sp-5); }
.ui .hz-rh .rh-title {
  font-family: var(--font-family);
  font-size: var(--t1); font-weight: 800; letter-spacing: -0.4px; color: var(--ink);
}
.ui .hz-rh .rh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  height: 2.25rem; padding: 0 var(--sp-4);
  border-radius: var(--r-pill); border: 1.5px solid var(--line);
  background: var(--panel); color: var(--ink);
  font-family: var(--font-family); font-size: var(--t4); font-weight: 600; line-height: 1;
}
.ui .hz-rh .rh-btn:hover { background: var(--panel); border-color: var(--ink-3); }
.ui .hz-rh .rh-btn:active { transform: none; }
.ui .hz-rh .rh-btn--primary { background: var(--azul); border-color: transparent; color: #fff; }
.ui .hz-rh .rh-btn--primary:hover { background: var(--primary-hover); border-color: transparent; }
body.dark-mode .ui .hz-rh .rh-btn--primary { background: var(--azul-hi); }
.ui .hz-rh .rh-btn--sm { height: 1.875rem; padding: 0 var(--sp-3); font-size: var(--t5); font-weight: 500; border-radius: var(--r-pill); }
.ui .hz-rh .rh-kpi, .ui .hz-rh .rhe-disp {
  display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start;
  padding: var(--sp-4); border-radius: var(--r-card);
  background: var(--panel); border: 1.5px solid var(--line); box-shadow: none;
}
.ui .hz-rh .rh-kpi:hover { border-color: var(--ink-3); box-shadow: none; }
.ui .hz-rh .rh-kpi:active { transform: none; }
.ui .hz-rh .rh-kpi__num {
  font-size: var(--t3); font-weight: 800; letter-spacing: -0.4px;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.ui .hz-rh .rh-kpi__label { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); text-transform: none; letter-spacing: 0; }
.ui .hz-rh .rh-card {
  background: var(--panel); border: 1.5px solid var(--line);
  border-radius: var(--r-card); box-shadow: none; padding: var(--sp-4);
}
.ui .hz-rh .rh-card__t { font-size: var(--t2); font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }
/* RRHH dibuja sus tablas con divs. Se les da la misma cabecera pegajosa y la
   misma fila que a `.table`, así se leen igual que las del resto. */
.ui .hz-rh .rh-thead {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--panel); border-radius: 0;
  border-bottom: 1.5px solid var(--line);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--t6); font-weight: 600; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.ui .hz-rh .rh-trow {
  padding: var(--sp-3) var(--sp-4); min-height: 2.75rem;
  font-size: var(--t4); font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--border-light); border-radius: 0;
}
.ui .hz-rh .rh-trow:last-child { border-bottom: none; }
.ui .hz-rh .rh-trow:hover { background: var(--hover-soft); }
.ui .hz-rh .rh-trow.is-sel { background: var(--hover-soft); }
.ui .hz-rh .rh-tscroll {
  border: 1.5px solid var(--line); border-radius: var(--r-card);
  background: var(--panel); overflow: auto;
}
.ui .hz-rh .rh-pill {
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); border: none;
  font-size: var(--t6); font-weight: 600; text-transform: none; letter-spacing: 0;
}
.ui .hz-rh .rh-pill--violet, .ui .hz-rh .rh-pill--conv { background: var(--status-blue-bg); color: var(--status-blue); }
.ui .hz-rh .rh-search input, .ui .hz-rh .rh-select {
  font-family: var(--font-family); font-size: var(--t4); font-weight: 500; color: var(--ink);
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-pill);
  height: 2.25rem;
}
.ui .hz-rh .rh-search input:focus, .ui .hz-rh .rh-select:focus { outline: none; border-color: var(--celeste); }
.ui .hz-rh .rh-tabs { background: var(--card); border-radius: var(--r-pill); padding: var(--sp-1); gap: var(--sp-1); border: none; }
.ui .hz-rh .rh-tab {
  border: none; background: transparent; border-radius: var(--r-pill);
  height: 2rem; padding: 0 var(--sp-3); font-size: var(--t4); font-weight: 600; color: var(--ink-muted);
}
.ui .hz-rh .rh-tab.is-active, .ui .hz-rh .rh-tab.active {
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow-panel);
}
.ui .hz-rh .rh-vacio { font-size: var(--t4); font-weight: 500; color: var(--ink-muted); padding: 2.5rem var(--sp-3); }
.ui .hz-rh .rh-chip {
  border-radius: var(--r-pill); font-size: var(--t5); font-weight: 600;
  border: 1.5px solid var(--line); background: var(--panel); color: var(--ink-muted);
}
.ui .hz-rh .rh-chip.is-active, .ui .hz-rh .rh-chip--filtro.is-active {
  background: var(--azul); border-color: var(--azul); color: #fff;
}

/* ═══════════════ Hoja de carga: el marcado viejo entra a la plantilla ═══
   `createModal` ahora dibuja la hoja a pantalla completa (o la carta chica)
   con las clases `.f*`. Los formularios de las vistas siguen escritos con
   `.form-group` / `.form-control` / `.ot-form-section-header`: estas reglas
   los presentan igual que los campos nativos de la hoja. */
.fmodal .form-group { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; }
.fmodal .form-group > label,
.fmodal .form-label,
.fmodal label.form-label {
  font-family: var(--font-family); font-size: var(--t5); font-weight: 600;
  color: var(--ink-muted); text-transform: none; letter-spacing: 0; margin: 0;
}
.fmodal .form-control {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-family); font-size: var(--t4); font-weight: 500; color: var(--ink);
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-3); height: auto; min-height: 2.5rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fmodal textarea.form-control { line-height: 1.5; min-height: 4.5rem; }
.fmodal select.form-control { cursor: pointer; }
.fmodal .form-control:focus {
  outline: none; border-color: var(--celeste); box-shadow: 0 0 0 3px rgba(0, 135, 175, .12);
}
.fmodal .form-control::placeholder { color: var(--ink-3); }
body.dark-mode .fmodal .form-control { background: var(--card); }
.fmodal .form-control[readonly] { background: var(--card); color: var(--ink-muted); }

/* Encabezado de bloque del formulario viejo: dentro de la hoja ya hay una
   carta numerada por bloque, así que el rótulo interno se retira. */
.fmodal .ot-form-section-header { display: none; }

/* Botones dentro de la hoja (los que trae el marcado de la vista) */
.fmodal .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  height: 2.25rem; padding: 0 var(--sp-4); border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--panel); color: var(--ink);
  font-family: var(--font-family); font-size: var(--t4); font-weight: 600; line-height: 1;
  cursor: pointer;
}
.fmodal .btn:hover { transform: none; filter: none; border-color: var(--ink-3); }
.fmodal .btn-primary { background: var(--azul); border-color: transparent; color: #fff; }
.fmodal .btn-ghost { background: transparent; border-color: transparent; color: var(--ink-muted); }
.fmodal .btn-sm { height: 1.875rem; padding: 0 var(--sp-3); font-size: var(--t4); font-weight: 600; }

/* Carta chica: la misma familia que la hoja, para formularios cortos */
.fmodal--carta {
  width: 38.75rem; max-width: calc(100vw - 3rem);
  padding: 0; gap: 0; background: var(--panel);
  border-radius: var(--r-panel); overflow: hidden;
}
.fmodal--carta .fmodal__head {
  flex: none; justify-content: flex-start; gap: var(--sp-4);
  min-height: 3.75rem; padding: 0 var(--sp-5);
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.fmodal--carta .fmodal__x { width: 2rem; height: 2rem; border-radius: var(--r-pill); }
.fmodal--carta .fmodal__title { font-size: 1.0625rem; }
.fmodal--carta .fmodal__body { flex: 1 1 auto; padding: var(--sp-5); gap: var(--sp-4); }
.fmodal--carta .fmodal__foot {
  flex: none; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5);
  background: var(--panel); border-top: 1px solid var(--line);
}
.fmodal--carta .fmodal__foot .fbtn {
  height: 2.5rem; padding: 0 var(--sp-4); border-radius: var(--r-pill);
  font-size: var(--t4); font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
.fmodal--carta .fbtn:hover { transform: none; filter: none; }
.fmodal--carta .fbtn--text { border-color: transparent; background: transparent; color: var(--ink-muted); }
.fmodal--carta .fbtn--text:hover { color: var(--ink); }
.fmodal--carta .fbtn:disabled { opacity: .45; cursor: not-allowed; }
.fmodal--carta .fsec { gap: var(--sp-4); }
.fmodal--carta .fsec + .fsec { border-top: 1px solid var(--line); padding-top: var(--sp-4); }

/* La hoja completa se pinta sola: sus bloques ya son cartas numeradas.
   Los bloques van en DOS carriles: apilados en una columna, una orden de
   trabajo medía cuatro pantallas y media de scroll y dejaba 230 px muertos a
   cada lado. En dos carriles entra en poco más de dos, y el ancho que sobraba
   ahora es la segunda columna. Se leen como cualquier formulario de dos
   columnas: izquierda, derecha, y se baja. */
.fmodal--full .fsheet--solo { grid-template-columns: minmax(0, 1fr); max-width: min(100%, 68.75rem); }
.fmodal--full .fsheet--dos { max-width: 1400px; }
.fmodal--full .fsheet--dos .fsheet__main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: stretch;   /* las dos cartas de una fila cierran a la misma
                             altura: sin esto queda un escalón gris al lado
                             de cada bloque corto */
}
/* Lo que no se deja angostar (una tabla, un texto que se escribe de corrido)
   toma los dos carriles. Lo decide `createModal` mirando el contenido. */
.fmodal--full .fsheet--dos .fsec--ancho { grid-column: 1 / -1; }

/* Un carril solo cuando ya no hay ancho que repartir. */
@media (max-width: 1100px) {
  .fmodal--full .fsheet--dos .fsheet__main { grid-template-columns: minmax(0, 1fr); }
}

/* Las filas de campos declaradas por CSS (`.form-row`, dos columnas fijas)
   tampoco saben en qué ancho van a caer. Dentro de la hoja acomodan las
   columnas que entren: una carga de un solo bloque deja de ser una tira de
   dos columnas y usa el ancho que tiene. */
.fmodal--full .fsec__body .form-row { grid-template-columns: repeat(auto-fit, minmax(14.375rem, 1fr)); }
/* Piso usable de un campo de carga. Es de los pocos valores que NO acompañan a
   la escala: por debajo de ~120 px reales el campo deja de mostrar lo que se
   escribió, sin importar cuánto mida la letra. Sin esto, una columna declarada
   en rem por el marcado viejo (p. ej. "Duración estimada", 9.375rem) se achica
   con la ventana hasta volverse inútil. */
.fmodal--full .form-control,
.fmodal--full .finput { min-width: 120px; }
.fmodal--full .fsec__body .form-section-title { grid-column: 1 / -1; }

/* Grillas que el marcado viejo declara con `style=""` siguen valiendo:
   solo se les normaliza el espacio para que coincida con la escala (R-10). */
.fmodal .fsec__body > div[style*="grid-template-columns"] { gap: var(--sp-4) !important; }

@media (max-width: 900px) {
  .fmodal .fsec__body > div[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Filas sin cebra: la tabla canónica separa por línea, no por fondo (R-19) */
.ui .dark-table tbody tr:nth-child(even),
.ui .data-table tbody tr:nth-child(even) { background: transparent; }

/* Columna de acciones plegada al kebab por js/plantilla.js */
.ui .tbl-acc__th { width: 2.75rem; }
.ui td.tbl-acc { width: 2.75rem; text-align: right; padding-right: var(--sp-2); }
.ui .tbl-acc__orig { display: none !important; }
.ui .menu-btn {
  width: 1.875rem; height: 1.875rem; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-pill); background: transparent;
  color: var(--ink-3); cursor: pointer;
}
.ui .menu-btn:hover { background: var(--card); color: var(--ink); }
.ui .menu-btn svg { width: 1rem; height: 1rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   TRABAJOS EN OBRA · GESTIÓN INTERNA  (js/views/ot-vista.js)
   Las dos secciones se rehicieron con los componentes canónicos: cabecera con
   una acción, una fila de contexto (pestañas con contador + búsqueda), tabla
   con kebab por fila y ficha lateral ancha con pestañas. Acá va solo lo propio.
   ═══════════════════════════════════════════════════════════════════════════ */

.ot { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }

.ot-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.ot-head__id { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; min-width: 0; }
.ot-head__ctx { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }

/* Contador dentro de la pestaña: el número vive acá y en ningún otro lado */
.ui .tabs__n {
  margin-left: var(--sp-1); padding: 1px var(--sp-1); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink-muted);
  font-size: var(--t6); font-weight: 600; font-variant-numeric: tabular-nums;
}
.ui .tabs__b.is-on .tabs__n { background: var(--avbg); color: var(--azul); }
/* En oscuro el contador quedaba en 4,1:1 sobre su pildora, encendida o no:
   pasa a texto pleno. La pestaña elegida se sigue distinguiendo por el
   fondo de la pildora, que es lo que R-21 dibuja. */
body.dark-mode .ui .tabs__n,
body.dark-mode .ui .tabs__b.is-on .tabs__n { color: var(--ink); }

.ot-lista { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.ot-col-desc { max-width: 20rem; }
.ot-col-desc, .ot-cli { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui .table td.ot-col-desc { color: var(--ink-muted); }
.ot-cli { font-weight: 600; }
.t-venc { color: var(--status-red); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Paginador de la tabla (una sola línea, R-07) */
.pager { display: inline-flex; align-items: center; gap: var(--sp-2); }
.pager__n { font-size: var(--t5); font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ui .pager .btn--icon svg { width: 0.9375rem; height: 0.9375rem; }

/* ── Ficha lateral ──────────────────────────────────────────────────────── */
.drawer--ancho { width: 45rem; }
.ot-ficha__id { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
.ot-ficha__cod { font-family: var(--font-mono); font-size: var(--t4); font-weight: 600; color: var(--azul); }
body.dark-mode .ot-ficha__cod { color: var(--azul-soft-text); }
.ot-ficha__tags {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5) 0;
}
.ot-ficha__tags:empty { display: none; }
.drawer .tabs { margin: var(--sp-3) var(--sp-5) 0; }

.ot-bloque { display: flex; flex-direction: column; gap: var(--sp-3); }
.ot-bloque__t {
  margin: var(--sp-3) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--line);
  font-size: var(--t2); font-weight: 700; color: var(--ink);
}
.ot-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-5); }
.ot-parr { white-space: pre-wrap; line-height: 1.55; }
.ot-nada { margin: 0; font-size: var(--t4); font-weight: 500; color: var(--ink-muted); }

.ot-estrellas {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--t3); font-weight: 800; color: var(--naranja); letter-spacing: 2px;
}
.ot-estrellas__n { font-size: var(--t4); font-weight: 600; color: var(--ink-muted); letter-spacing: 0; }

/* Calificación dentro de la hoja de carga */
.ot-rating { display: flex; gap: var(--sp-1); }
.ot-rating button {
  border: none; background: none; cursor: pointer; padding: 0 2px;
  font-size: var(--t1); font-weight: 800; line-height: 1; color: var(--cell-empty);
  transition: color .12s ease;
}
.ot-rating button.is-on { color: var(--naranja); }

@media (max-width: 1100px) {
  .drawer--ancho { width: min(35rem, 100vw); }
  .ot-datos { grid-template-columns: minmax(0, 1fr); }
}

/* KPI que además avisa (servicio vencido, seguro vencido): borde de alerta */
.ui .kpi--alerta { border-color: var(--status-red); }

/* ═══════════════════════════════════════════════════════════════════════════
   PLANTILLA ÚNICA · ajuste fino de rincones
   Reglas que el puente por familias no alcanza: mayúsculas declaradas en CSS
   (no en `style=`), rótulos en mono y encabezados de columna con display font.
   ═══════════════════════════════════════════════════════════════════════════ */

/* R-11: nada va en mayúsculas salvo la cabecera de tabla. Es la única forma de
   alcanzar de una vez las ~40 reglas legadas que lo declaran en CSS. */
.ui *:not(th) { text-transform: none !important; }

/* Mono solo para identificadores dentro de celdas (R-11) */
.ui .movements-col-count,
.ui .movements-col-sub,
.ui .htl-flabel,
.ui .info-box .label { font-family: var(--font-family); }

/* Cabecera de las dos columnas de Movimientos */
.ui .movements-col-title {
  font-family: var(--font-family);
  font-size: var(--t2); font-weight: 700; letter-spacing: 0; color: var(--ink);
}
.ui .movements-col-count {
  font-size: var(--t3); font-weight: 800; letter-spacing: -0.4px;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.ui .movements-col-sub { font-size: var(--t5); font-weight: 500; letter-spacing: 0; color: var(--ink-muted); }
.ui .movements-col { border-radius: var(--r-card); border-width: 1.5px; }
.ui .movements-empty { font-size: var(--t4); font-weight: 500; color: var(--ink-muted); }

/* Rótulos de filtro del Historial y de las fichas de flota */
.ui .htl-flabel,
.ui .vinfo-label,
.ui .vchk-group-title,
.ui .field-label,
.ui .info-box .label {
  font-size: var(--t5); font-weight: 600; letter-spacing: 0; color: var(--ink-muted);
}

/* Estado vacío legado con caja punteada → un solo `.empty` (R-08) */
.ui .emptybox,
.ui .mkt-empty,
.ui .iso-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); padding: 3rem var(--sp-4); text-align: center;
  border: none; background: none;
  font-size: var(--t4); font-weight: 500; color: var(--ink-muted);
}

/* Cards de ítem: sin sombra ni escala al pasar, separadas por borde (R-24) */
.ui .card--item, .ui .workers-grid > div, .ui .vh-card {
  border-radius: var(--r-card); border: 1.5px solid var(--line);
  background: var(--panel); box-shadow: none;
}
.ui #devMotivos:empty { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   VOCABULARIO DE LA PLANTILLA ÚNICA
   ───────────────────────────────────────────────────────────────────────────
   Los nombres neutros que emite js/views/plantilla-ui.js apuntan al MISMO
   dibujo que Cuentas Corrientes: no hay una segunda versión de nada, sólo el
   alias que evita escribir `cc-` en secciones que no son cuentas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Contrato de altura de una sección (R-26) ─────────────────────────────
   La raíz de la vista toma el alto disponible. Con contenido corto no cambia
   nada —los bloques se siguen apilando arriba—, pero le da a la sección un
   alto conocido, que es lo que hacía falta para poder repartirlo.

   Sin esto, una pantalla nueva con muchas filas crecía sin límite y lo que
   terminaba desplazándose era el contenedor entero: la cabecera, la fila de
   contexto y los KPIs se iban de pantalla con la lista. Es la causa de "si
   agrego algo nuevo no se ajusta".

   Gana por especificidad (0,2,0) a .view-container > * (0,1,0), que declara
   flex-shrink:0 para las vistas que se dibujan a pantalla completa. */
.pantalla {
  display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0;
  /* Crece hasta llenar la caja, pero NO encoge por debajo de su contenido: si
     encogiera, una lista larga quedaría recortada sin barra de desplazamiento.
     Mientras la sección no declare un cuerpo que sepa desplazarse, el que se
     desplaza sigue siendo el contenedor, como hasta ahora. */
  flex: 1 0 auto;
}
/* En cuanto la sección declara su cuerpo, sí puede encoger: el cuerpo se queda
   con el alto que sobra y desplaza adentro. */
.pantalla:has(> .pantalla__cuerpo) { flex: 1 1 auto; min-height: 0; }
.pantalla[hidden] { display: none; }

/* El cuerpo de la sección: se queda con el alto que sobra y desplaza SU
   contenido, así la cabecera y la fila de contexto no se mueven nunca.
   Se marca con `.pantalla__cuerpo`; `plantilla-ui.js` lo emite solo cuando
   se le pide (`cuerpoScroll: true`), para no cambiar de golpe las 23
   secciones que hoy dejan desplazar el contenedor. */
.pantalla__cuerpo {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.pantalla__cuerpo > .table-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* El pie de tabla no se desplaza con las filas: queda debajo, siempre visible. */
.pantalla__cuerpo > .table__foot { flex: none; }

/* ---------- Secciones que ya tenían cuerpo, pero no lo dejaban desplazar ----
   Alertas, Historial, Calidad y RRHH · Personal identifican su cuerpo desde
   hace tiempo, pero heredaban `.pantalla { flex: 1 0 auto }`, que crece y NO
   encoge. Resultado: el cuerpo se estiraba hasta su alto natural y el que
   terminaba desplazándose era .view-container, llevándose fuera de la pantalla
   la cabecera y la fila de filtros. Es el mismo contrato de .pantalla__cuerpo
   de acá arriba, aplicado sin tocar el marcado de las cuatro vistas.
   No se oculta ningún dato: lo que cambia es QUÉ se desplaza. */
.hz-ntf.pantalla,
.pantalla.htl-shell,
.pantalla#isoRoot { flex: 1 1 auto; min-height: 0; }

.hz-ntf.pantalla > .ntf-list,
.pantalla.htl-shell > #htl-timeline,
.pantalla#isoRoot > #isoContent,
.hz-rh .rhp-cols {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* ---------- Los dos paneles de resumen: RRHH y Legales ----------
   Nueve y siete tarjetas de resumen, 750 y 421 px, contra 572 px visibles en
   una IdeaPad HD. Hasta que se decida qué tarjetas se van, lo que se desplaza
   son las tarjetas: cabecera, período y KPIs quedan fijos arriba. */
.hz-rh.rh-panel,
.org.leg,
.org.leg > .pantalla { flex: 1 1 auto; min-height: 0; }

.rh-cuerpo,
.leg-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.page-head__id { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; min-width: 0; }
.page-head__ctx { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.page-head__acc { display: flex; align-items: center; gap: var(--sp-2); }

.crumb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.crumb__b {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--ink-muted);
}
.crumb__b:hover { color: var(--ink); }
.crumb__b svg { width: 0.875rem; height: 0.875rem; }
.crumb__sep { color: var(--dashed); }
.crumb__act { color: var(--ink); font-weight: 600; }

/* La grilla de KPIs se adapta a cuántos hay (R-04 los topea en cuatro). */
.ui .kpis--1 { grid-template-columns: minmax(0, 1fr); }
.ui .kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui .kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui .kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .ui .kpis--3, .ui .kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Contador dentro del chip, mismo trato que el de la pestaña. */
.ui .chip__n { font-variant-numeric: tabular-nums; opacity: .7; }

/* Grilla de cards de ítem: el mismo alto y el mismo respiro que .cc-grid. */
.grid-cards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr)); }
.grid-cards--ancha { grid-template-columns: repeat(auto-fill, minmax(21.25rem, 1fr)); }

/* Dos columnas de bloques, como el Resumen de la cuenta. */
.cols { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.cols--par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cols, .cols--par { grid-template-columns: minmax(0, 1fr); } }

/* Card con su cuerpo en rejilla (fichas de datos). */
.ui .card--cols > .card__body { display: grid; gap: var(--sp-3) var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr)); }

/* El pie de tabla suelto (fuera de una card) respira igual que en cuentas. */
.ui .table-wrap + .table__foot { padding: 0 var(--sp-1); }

/* Tablero de Calidad: los cuatro bloques usan la card canónica; lo único
   propio son la leyenda del gráfico, la lista de dos columnas y el vacío. */
.ui .q-leyenda { display: flex; justify-content: center; gap: var(--sp-4); font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.ui .q-leyenda span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.ui .q-leyenda i, .ui .q-leg__i i { width: 0.5rem; height: 0.5rem; border-radius: 2px; display: inline-block; }
.ui .q-nada { font-size: var(--t4); font-weight: 500; color: var(--ink-muted); text-align: center; padding: var(--sp-5) 0; margin: 0; }
.ui .q-donut { display: flex; align-items: center; gap: var(--sp-4); }
.ui .q-leg { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.ui .q-leg__i { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t4); font-weight: 500; color: var(--ink); }
.ui .q-leg__i b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui .q-lista { display: flex; flex-direction: column; }
.ui .q-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-light);
  font-size: var(--t4); font-weight: 500; color: var(--ink);
}
.ui .q-item:last-child { border-bottom: none; }
.ui .q-avisos { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); margin: 0; }

/* RRHH: las nueve pantallas comparten su propio vocabulario (rh-*). Los KPIs,
   los rieles de tabla y los paginadores se dibujan acá con el componente
   canónico, sin tener que reescribir el marcado de cada pantalla. */
.ui .select--sm { height: 1.875rem; font-size: var(--t5); font-weight: 500; padding: 0 var(--sp-2); }
.ui .filters__search--ancha { flex: 1 1 23.75rem; max-width: 32.5rem; }

/* Cada pantalla de RRHH nombra su propia grilla de KPIs; todas se dibujan
   igual y entran en una sola fila mientras haya lugar. */
.ui .hz-rh .rh-kpis, .ui .hz-rh .rhe-kpis {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}
@media (max-width: 1100px) {
  .ui .hz-rh .rh-kpis, .ui .hz-rh .rhe-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ui .hz-rh .rh-kpi, .ui .hz-rh .rhe-disp {
  display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start;
  padding: var(--sp-4); text-align: left;
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-card);
  font-family: var(--font-family); box-shadow: none;
}
.ui .hz-rh .rh-kpi:hover { border-color: var(--ink-3); }
.ui .hz-rh .rh-kpi--static { cursor: default; }
.ui .hz-rh .rh-kpi--static:hover { border-color: var(--line); }
.ui .hz-rh .rh-kpi__top { display: flex; align-items: center; gap: 0; }
/* El KPI canónico no lleva icono: el rótulo alcanza. */
.ui .hz-rh .rh-kpi__ico { display: none; }
.ui .hz-rh .rh-kpi__label { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); text-transform: none; letter-spacing: 0; }
.ui .hz-rh .rh-kpi__num {
  font-family: var(--font-family); font-size: var(--t3); font-weight: 800;
  letter-spacing: -0.4px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.ui .hz-rh .rh-kpi__sub { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }

/* Las filas de filtros propias de RRHH se comportan como `.filters`. */
.ui .rhd-filtros, .ui .rhp-tools, .ui .rhe-tools, .ui .rhs-tools,
.ui .rhv-tools, .ui .rha-tools, .ui .rhc-tools, .ui .rhpr-tools {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.ui .hz-rh .rh-pager, .ui .hz-rh .rh-pager__nav { display: flex; align-items: center; gap: var(--sp-2); }

/* Paginador de RRHH con el mismo dibujo que el del resto de las tablas. */
.ui .hz-rh .rh-pager {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  font-size: var(--t5); font-weight: 500; color: var(--ink-muted);
}
.ui .hz-rh .rh-pager__pp { display: flex; align-items: center; gap: var(--sp-2); }
.ui .hz-rh .rh-pgbtn {
  min-width: 1.875rem; height: 1.875rem; padding: 0 var(--sp-2);
  border: none; border-radius: var(--r-pill); background: transparent;
  font-family: var(--font-family); font-size: var(--t5); font-weight: 600;
  color: var(--ink-muted); cursor: pointer;
}
.ui .hz-rh .rh-pgbtn:hover:not(:disabled) { background: var(--card); color: var(--ink); }
.ui .hz-rh .rh-pgbtn:disabled { opacity: .4; cursor: default; }
.ui .hz-rh .rh-pgbtn.is-active { background: var(--card); color: var(--ink); }

/* Las notas que sólo explican se van (R-11 y la limpieza de textos); las que
   llevan una acción se quedan, pero como una línea, no como un cartel. */
.ui .hz-rh .rh-nota:not(:has(button)) { display: none; }
.ui .hz-rh .rh-nota {
  display: flex; align-items: center; gap: var(--sp-2);
  background: none; border: none; padding: 0;
  font-size: var(--t5); font-weight: 500; color: var(--ink-muted);
}
.ui .hz-rh .rh-nota svg { width: 0.875rem; height: 0.875rem; }
.ui .hz-rh .rh-nota b { font-weight: 600; color: var(--ink); }

/* Las pestañas de RRHH: la píldora sobre riel, ancha lo justo (R-21). */
.ui .hz-rh .rh-tabs { display: inline-flex; align-self: flex-start; width: fit-content; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.ui .hz-rh .rh-tabs:not(.rh-tabs--panel) > * { flex-shrink: 0; white-space: nowrap; }
/* Las pestañas del panel lateral (angosto) se acomodan en dos renglones. */
.ui .hz-rh .rh-tabs--panel { flex-wrap: wrap; overflow-x: visible; }
.ui .hz-rh .rh-tabs--linea { border-bottom: none; }
.ui .hz-rh .rh-tabs--linea .rh-tab { border-bottom: none; }
.ui .hz-rh .rh-tabs--linea .rh-tab.is-active { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-panel); }

/* Mono sólo para identificadores: las fechas de las tablas van en la
   tipografía del sistema, como en el resto (R-11). */
.ui .hz-rh .rh-mono, .ui .hz-rh .rhc-prox { font-family: var(--font-family); font-size: var(--t4); font-weight: 500; }
.ui .hz-rh .rhe-ticket .rh-link { font-family: var(--font-mono); }

/* ═══════════════════════════════════════════════════════════════════════════
   FINANZAS AL VOCABULARIO ÚNICO
   ───────────────────────────────────────────────────────────────────────────
   Finanzas tenía su propio juego de botones (menta), chips y tablas. La
   sección conserva su estructura —el panel, las cartas, los reportes— pero los
   componentes compartidos pasan a ser los mismos que en Cuentas Corrientes,
   para que no queden dos idiomas visuales en el sistema.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Botones ─────────────────────────────────────────────────────────────── */
.ui .fbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  height: 2.25rem; padding: 0 var(--sp-4);
  background: var(--azul); color: #fff;
  border: 1.5px solid transparent; border-radius: var(--r-pill);
  font-family: var(--font-family); font-size: var(--t4); font-weight: 600;
  letter-spacing: 0; text-transform: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ui .fbtn:hover { filter: none; transform: none; background: var(--primary-hover); }
body.dark-mode .ui .fbtn { background: var(--azul-hi); color: #06232E; }
.ui .fbtn--sm { height: 1.875rem; padding: 0 var(--sp-3); font-size: var(--t5); font-weight: 500; }
.ui .fbtn--ghost {
  height: 2.25rem; padding: 0 var(--sp-4); font-size: var(--t4); font-weight: 600;
  background: var(--panel); border: 1.5px solid var(--line); color: var(--ink);
}
.ui .fbtn--ghost:hover { background: var(--panel); border-color: var(--ink-3); color: var(--ink); }
body.dark-mode .ui .fbtn--ghost { background: var(--panel); color: var(--ink); }
.ui .fbtn--dashed {
  height: 1.875rem; padding: 0 var(--sp-3); border-radius: var(--r-pill);
  border: 1.5px dashed var(--dashed); background: transparent;
  font-size: var(--t5); font-weight: 600; color: var(--ink-muted);
}
.ui .fbtn--solid { background: var(--azul); color: #fff; }
.ui .fbtn--text { background: transparent; color: var(--ink-muted); border-color: transparent; }

/* ── Chips y segmentos: la píldora del sistema ───────────────────────────── */
.ui .fchips { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.ui .fchip {
  height: 1.875rem; padding: 0 var(--sp-3); border-radius: var(--r-pill);
  background: var(--card); border: 1.5px solid transparent;
  font-family: var(--font-family); font-size: var(--t5); font-weight: 600; color: var(--ink-muted);
}
.ui .fchip:hover:not(.is-active) { background: var(--card); color: var(--ink); }
.ui .fchip.is-active { background: var(--azul); color: #fff; font-weight: 600; }
body.dark-mode .ui .fchip.is-active { background: var(--azul-hi); color: #06232E; }
.ui .fchip--lg { height: 1.875rem; padding: 0 var(--sp-3); }

.ui .fseg { background: var(--card); border-radius: var(--r-pill); padding: var(--sp-1); gap: var(--sp-1); }
.ui .fseg__btn {
  height: 1.875rem; padding: 0 var(--sp-4); border-radius: var(--r-pill);
  background: transparent; border: none;
  font-family: var(--font-family); font-size: var(--t4); font-weight: 600; color: var(--ink-muted);
}
.ui .fseg__btn:hover:not(.is-active) { background: transparent; color: var(--ink); }
.ui .fseg__btn.is-active { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-panel); }

/* ── Tabla: el mismo marco, la misma cabecera, el mismo pie ──────────────── */
.ui .ftable {
  background: var(--panel); border: 1.5px solid var(--line);
  border-radius: var(--r-card); padding: 0;
}
.ui .ftable__head {
  padding: var(--sp-3) var(--sp-4); border-bottom: 1.5px solid var(--line);
  font-size: var(--t6); font-weight: 600; color: var(--ink-muted); letter-spacing: 0.02em;
}
.ui .ftable__body { gap: 0; }
.ui .ftable__row {
  background: transparent; border-radius: 0;
  border-bottom: 1px solid var(--border-light);
  padding: var(--sp-3) var(--sp-4); min-height: 2.75rem;
  font-size: var(--t4); font-weight: 500; color: var(--ink);
}
.ui .ftable__row:last-child { border-bottom: none; }
.ui .ftable__row:hover { transform: none; background: var(--hover-soft); }
.ui .ftable__foot {
  margin-top: 0; padding: var(--sp-3) var(--sp-4); border-top: 1.5px solid var(--line);
  font-size: var(--t5); font-weight: 500; color: var(--ink-muted);
}

/* ── Estado vacío ────────────────────────────────────────────────────────── */
.ui .fempty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  margin: var(--sp-4); padding: var(--sp-6) var(--sp-4); text-align: center;
  background: var(--panel); border: 1.5px dashed var(--line); border-radius: var(--r-card);
  font-size: var(--t2); font-weight: 700; color: var(--ink);
}
/* Pero dentro de una tabla real el vacío es una CELDA que ocupa la fila entera
   (R-08). `display: flex` sobre un <td> rompe el modelo de tabla: la celda
   dejaba de respetar el colSpan y el mensaje quedaba encogido en un recuadro
   de 34 px dentro de una fila de 1588, con el texto recortado. Pasaba en las
   cinco pantallas, en Cuentas por cobrar y por pagar. */
.ui td.fempty {
  display: table-cell;
  margin: 0;
  height: 7.5rem;
  vertical-align: middle;
  background: transparent;
  border: 0;
  border-radius: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PANTALLA DE ORGANISMO (.org) — familia compartida
   La usan RRHH · Laboral y Convenios (IERIC, UOCRA, ART, Seguros, Convenios)
   y Finanzas · Impuestos y Organismos (ARCA, ARBA, AMIP): son la misma
   pantalla — un organismo con obligaciones, vencimientos y documentación —,
   así que comparten el marcado en vez de tener una familia cada una.
   Sobre la plantilla única (.ui): usan las piezas canónicas (page-head, tabs,
   card, table, badge, empty, dato, drawer, menu) y agregan lo que las capturas
   del usuario traen y la plantilla no tenía: tarjeta con icono y enlace al
   pie, franja de alerta, mosaico de documentos y las listas del carril
   derecho. Todo sobre tokens: sin colores sueltos.
   ═══════════════════════════════════════════════════════════════════════════ */

.org { display: flex; flex-direction: column; gap: var(--sp-5); font-family: var(--font-family); color: var(--ink); }
.org .pantalla { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.org-titulo { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.org-sub { font-size: var(--t4); font-weight: 500; color: var(--ink-muted); }
.crumb__b--txt { cursor: default; }
.crumb__b--txt:hover { color: var(--ink-muted); }

/* ── Tarjetas: icono + rótulo, cifra, sub y enlace al pie ────────────── */
.org-kpis { display: grid; gap: var(--sp-4); grid-template-columns: repeat(5, minmax(0, 1fr)); }
.org-kpis--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* R-18: label T6 + cifra T3 + sub T5, con el ícono de 36 px a la IZQUIERDA de
   esa pila (no encima, que era lo que sumaba una fila entera de alto). */
.org-kpi {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 0 var(--sp-3);
  padding: var(--sp-3) var(--sp-4); text-align: left; min-width: 0;
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-card);
  font-family: var(--font-family); cursor: pointer;
  transition: border-color .15s ease;
}
.org-kpi:hover { border-color: var(--ink-3); }
.org-kpi__top { display: contents; }
.org-kpi__ico { grid-row: 1 / span 3; }
.org-kpi__l, .org-kpi__v, .org-kpi__s { grid-column: 2; }
.org-kpi__ico {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  background: var(--avbg); color: var(--azul);
}
.org-kpi__ico svg { width: 1.25rem; height: 1.25rem; }
.org-kpi__l { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-kpi__v {
  max-width: 100%;
  font-size: var(--t3); font-weight: 800; letter-spacing: -0.4px; line-height: 1.15; color: var(--ink);
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.org-kpi__s { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); min-height: 1rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-kpi--ok .org-kpi__v, .org-kpi--ok .org-kpi__ico         { color: var(--verde); }
.org-kpi--ok .org-kpi__ico                                    { background: var(--status-green-bg); }
.org-kpi--warn .org-kpi__v, .org-kpi--warn .org-kpi__ico     { color: var(--naranja); }
.org-kpi--warn .org-kpi__ico                                  { background: var(--status-orange-bg); }
.org-kpi--danger .org-kpi__v, .org-kpi--danger .org-kpi__ico { color: var(--status-red); }
.org-kpi--danger .org-kpi__ico                                { background: var(--status-red-bg); }
.org-kpi--info .org-kpi__v                                    { color: var(--celeste); }
.org-kpi--brand .org-kpi__v                                   { color: var(--azul); }
body.dark-mode .org-kpi--brand .org-kpi__v                    { color: var(--azul-hi); }

/* ── Cuerpo: principal + carril de 320 ───────────────────────────────── */
.org-cols { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
.org-main { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
/* El carril no fija el alto de la pantalla: se queda a la vista y desplaza su
   propio contenido. Así la altura de la sección la decide la tabla, que es lo
   que el usuario vino a mirar. Por debajo de 1100 se apila y vuelve a fluir. */
.org-rail {
  display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0;
  position: sticky; top: 0;
  max-height: calc(100dvh - 11rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 1100px) {
  .org-rail { position: static; max-height: none; overflow-y: visible; }
}
.org-filtros__acc { margin-left: auto; }
.org-ver { display: flex; justify-content: flex-start; }

/* ── Franja de alerta (diferencias, casos abiertos, atrasos) ─────────── */
.org-alerta {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--status-red-bg); border: 1.5px solid transparent; border-left: 4px solid var(--status-red);
  border-radius: var(--r-row);
}
.org-alerta__i { width: 1.5rem; height: 1.5rem; color: var(--status-red); }
.org-alerta__i svg { width: 100%; height: 100%; }
.org-alerta__t { font-size: var(--t4); font-weight: 500; color: var(--ink); min-width: 0; line-height: 1.45; }
.org-alerta__t b { color: var(--status-red); font-weight: 700; }
.org-alerta__t--dos { display: flex; flex-direction: column; gap: 2px; }
.ui .org-alerta__b { background: var(--panel); border-color: var(--status-red); color: var(--status-red); }
.ui .org-alerta__b:hover { background: var(--status-red); color: #FFFFFF; }

/* ── Documentación reciente: mosaico de archivos ─────────────────────── */
.org-docs { display: grid; gap: var(--sp-3); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.org-doc {
  display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0;
  padding: var(--sp-3); text-align: left;
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-row);
  font-family: var(--font-family); cursor: pointer;
}
.org-doc:hover { border-color: var(--ink-3); }
.org-doc__ico { position: relative; width: 2.5rem; height: 2.75rem; flex: none; display: grid; place-items: center; color: var(--ink-3); }
.org-doc__ico svg { width: 2.125rem; height: 2.125rem; }
.org-doc__ico span {
  position: absolute; left: 0; bottom: 0.25rem; padding: 1px var(--sp-1); border-radius: 4px;
  font-size: var(--t6); font-weight: 800; color: #FFFFFF; background: var(--ink-3);
}
.org-doc__ico--pdf span { background: var(--status-red); }
.org-doc__ico--xlsx span, .org-doc__ico--xls span, .org-doc__ico--csv span { background: var(--verde); }
.org-doc__ico--jpg span, .org-doc__ico--jpeg span, .org-doc__ico--png span, .org-doc__ico--img span { background: var(--celeste); }
.org-doc__ico--sm { width: 1.25rem; height: 1.25rem; }
.org-doc__ico--sm svg { width: 1.125rem; height: 1.125rem; }
.org-doc__ico--sm span { display: none; }
.org-doc__row { display: inline-flex; align-items: center; gap: var(--sp-2); }
.org-doc__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.org-doc__n { font-size: var(--t4); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-doc__m { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }

/* ── Carril: información general, vencimientos, alertas, acciones ────── */
.org-card__t { display: inline-flex; align-items: center; gap: var(--sp-2); }
.org-card__t svg { width: 1.125rem; height: 1.125rem; color: var(--azul); flex: none; }
.org-card__t--rojo svg { color: var(--status-red); }
body.dark-mode .org-card__t svg { color: var(--azul-hi); }
.org-ficha { display: flex; flex-direction: column; gap: var(--sp-2); }
.org-ficha .dato { padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-light); }
.org-ficha .dato:last-child { padding-bottom: 0; border-bottom: none; }
.org-brand { color: var(--azul); font-weight: 700; }
body.dark-mode .org-brand { color: var(--azul-hi); }
.ui .org-rail__btn { width: 100%; }

.org-vtos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.org-vto__b {
  display: grid; grid-template-columns: 0.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2);
  width: 100%; padding: var(--sp-1) 0; background: none; border: none; text-align: left;
  font-family: var(--font-family); cursor: pointer; color: var(--ink);
}
.org-vto__b:hover .org-vto__t { color: var(--celeste); }
.org-vto--col { display: grid; grid-template-columns: 0.5rem minmax(0, 1fr); gap: 2px var(--sp-2); align-items: center; }
.org-vto--col .org-vto__d { grid-column: 2; }
.org-vto__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ink-3); }
.org-vto__dot--ok     { background: var(--verde); }
.org-vto__dot--warn   { background: var(--naranja); }
.org-vto__dot--danger { background: var(--status-red); }
.org-vto__t { font-size: var(--t4); font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-vto__f { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.org-vto__d { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.org-nada { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }

.ui .card.org-alertcard { border-color: var(--status-red-bg); background: color-mix(in srgb, var(--status-red-bg) 55%, var(--panel)); }
.ui .card.org-benef { border-color: var(--status-green-bg); background: color-mix(in srgb, var(--status-green-bg) 55%, var(--panel)); }
.org-benef__h { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t4); font-weight: 700; color: var(--verde); }
.org-benef__h svg { width: 1.25rem; height: 1.25rem; flex: none; }
.org-benef__p { margin: 0; font-size: var(--t5); font-weight: 500; color: var(--ink); line-height: 1.5; }

.org-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.org-link {
  display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0;
  background: none; border: none; text-align: left;
  font-family: var(--font-family); font-size: var(--t4); font-weight: 600; color: var(--celeste); cursor: pointer;
}
.org-link:hover { text-decoration: underline; }
.org-link svg { width: 1rem; height: 1rem; flex: none; }

/* ── Detalles de tabla ───────────────────────────────────────────────── */
.org-conc { display: inline-flex; align-items: center; gap: var(--sp-1); }
.org-clip, .org-difmark { display: inline-grid; place-items: center; width: 1rem; height: 1rem; color: var(--ink-3); }
.org-clip svg, .org-difmark svg { width: 0.875rem; height: 0.875rem; }
.org-difmark { color: var(--status-red); }
.ui .table tr.is-dif td:first-child { box-shadow: inset 3px 0 0 var(--status-red); }
/* R-19: la celda de tipo se queda en UNA línea. Sin esto, un rótulo largo
   ("Responsabilidad Civil") envuelve y estira la fila de 44 a 75 px, que era
   la causa de que en Seguros sólo se vieran dos filas a 1366. Si no entra, se
   corta con puntos suspensivos; el texto completo queda en el título. */
.org-tipo {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-width: 0; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.org-tipo__i { width: 1.75rem; height: 1.75rem; border-radius: 50%; flex: none; display: inline-grid; place-items: center; background: var(--avbg); color: var(--azul); }
.org-tipo__i svg { width: 0.9375rem; height: 0.9375rem; }
.org-tipo__i--warn   { color: var(--naranja); background: var(--status-orange-bg); }
.org-tipo__i--danger { color: var(--status-red); background: var(--status-red-bg); }
.ui .table tr.org-ro { cursor: default; }

/* ── Sidebar: segundo nivel del desplegable (RRHH → Laboral y Convenios) ── */
.sb-sub-btn--trigger {
  width: calc(100% - 1.125rem); background: none; border: none;
  font-family: inherit; text-align: left; gap: var(--sp-1);
}
.sb-sub-btn--trigger .sb-chevron-r { width: 0.875rem; height: 0.875rem; }
.sb-sub-btn--trigger:hover { transform: none; }
.sb-collapsible--n2[data-open="true"] > .sb-sub-btn--trigger { color: var(--ink); font-weight: 600; }
.sb-sub--n2 { margin-top: 0; }
.sb-sub--n2::before { left: 2.4375rem; }
.sb-sub--n2 .sb-sub-btn { width: calc(100% - 2.25rem); margin-left: var(--sp-6); font-size: var(--t4); font-weight: 500; }
/* Con el segundo nivel abierto, el primero necesita más alto que sus 500px */
.sb-collapsible[data-open="true"] > .sb-sub:has(.sb-collapsible[data-open="true"]) { max-height: 56.25rem; }

/* ── Calendario: color de la categoría ───────────────────────────────── */
.fc-chip--laboral, .fc-event--laboral, .ev-tag--laboral, .fc-rail--laboral { --cal-c: #0E7C86; }

/* ── Breakpoints (R-15): 1500 · 1100 · 900 ───────────────────────────── */
@media (max-width: 1100px) {
  .org-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .org-cols { grid-template-columns: minmax(0, 1fr); }
  .org-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .org-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .org-kpis, .org-docs { grid-template-columns: minmax(0, 1fr); }
  .org-alerta { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .org-alerta__b { grid-column: 2; justify-self: start; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FINANZAS · IMPUESTOS Y ORGANISMOS (.imp)
   Pantalla del subnav de Finanzas: un selector de organismo arriba (ARCA,
   ARBA, AMIP…) y, debajo, la pantalla de organismo compartida (.org): las
   tarjetas con icono, el cuerpo con carril y las listas del carril salen de
   ahí. Este bloque agrega SOLO lo que las capturas traen y .org no tenía:
   el selector de organismo, la celda de obligación con icono, la barra de
   cuotas del plan de pago y el resumen fiscal del carril.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Selector de organismo (arriba de todo, como en la captura) ───────── */
.imp-orgs {
  display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap;
  border-bottom: 1.5px solid var(--line);
}
.imp-org {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); margin-bottom: -1.5px;
  background: none; border: none; border-bottom: 2px solid transparent;
  font-family: var(--font-family); font-size: var(--t4); font-weight: 600;
  color: var(--ink-muted); cursor: pointer; white-space: nowrap;
}
.imp-org svg { width: 1.125rem; height: 1.125rem; flex: none; }
.imp-org:hover { color: var(--ink); }
.imp-org.is-on { color: var(--celeste); border-bottom-color: var(--celeste); }
.imp-org__n {
  min-width: 1.125rem; padding: 0 var(--sp-1); border-radius: 999px;
  background: var(--status-red); color: #FFFFFF;
  font-size: var(--t6); font-weight: 800; line-height: 1rem; text-align: center;
}
.imp-orgs__acc { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-1); }

/* ── Celda de obligación: icono, nombre y la línea chica de abajo ─────── */
.imp-ob { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.imp-ob__i {
  width: 1.875rem; height: 1.875rem; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  background: var(--avbg); color: var(--azul);
}
.imp-ob__i svg { width: 1rem; height: 1rem; }
.imp-ob__i--ok     { color: var(--verde); background: var(--status-green-bg); }
.imp-ob__i--warn   { color: var(--naranja); background: var(--status-orange-bg); }
.imp-ob__i--danger { color: var(--status-red); background: var(--status-red-bg); }
body.dark-mode .imp-ob__i { color: var(--azul-hi); }
.imp-ob__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.imp-ob__n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-ob__s { font-size: var(--t6); font-weight: 500; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Pie de tabla: totales a la derecha ──────────────────────────────── */
.imp-tot { display: inline-flex; align-items: baseline; gap: var(--sp-2); }
.imp-tot__l { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.imp-tot__v { font-size: 0.875rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Resumen fiscal del carril (IVA, IIBB o tasa municipal) ───────────── */
.imp-res { display: flex; flex-direction: column; gap: var(--sp-2); }
.imp-res .dato { padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-light); }
.imp-res__saldo {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding-top: var(--sp-1);
}
.imp-res__saldo span { font-size: var(--t5); font-weight: 600; color: var(--ink-muted); }
.imp-res__v { font-size: 1.125rem; font-weight: 800; color: var(--azul); font-variant-numeric: tabular-nums; }
.imp-res__v--favor { color: var(--verde); }
body.dark-mode .imp-res__v { color: var(--azul-hi); }
.imp-res__nota { font-size: var(--t6); font-weight: 500; color: var(--ink-muted); text-align: right; }
.imp-res__pie { font-size: var(--t6); font-weight: 500; color: var(--ink-muted); line-height: 1.5; }

/* ── Plan de pago: cuotas cumplidas sobre el total ────────────────────── */
.imp-cuotas { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 5.625rem; }
.imp-cuotas__n { font-size: var(--t5); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.imp-cuotas__b { height: 0.3125rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.imp-cuotas__f { height: 100%; border-radius: 999px; background: var(--verde); }

/* ── Ficha del organismo (pestaña Configuración) ──────────────────────── */
.imp-cfg { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.imp-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.imp-tag {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill);
  background: var(--avbg); border: 1.5px solid var(--line);
  font-size: var(--t5); font-weight: 600; color: var(--ink);
}
.imp-tag button {
  background: none; border: none; padding: 0; line-height: 1;
  color: var(--ink-muted); font-size: 0.875rem; cursor: pointer;
}
.imp-tag button:hover { color: var(--status-red); }

@media (max-width: 1100px) {
  .org-kpis--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .imp-cfg { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .org-kpis--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .org-kpis--6 { grid-template-columns: minmax(0, 1fr); }
}

/* ── Calendario: color de la categoría ───────────────────────────────── */
.fc-chip--impuestos, .fc-event--impuestos, .ev-tag--impuestos, .fc-rail--impuestos { --cal-c: #7A5AF8; }
.fc-chip--legales, .fc-event--legales, .ev-tag--legales, .fc-rail--legales { --cal-c: #6C5CE7; }

/* ═══════════════════════════════════════════════════════════════════════
   FINANZAS · CIRCUITO COMPLETO (17/09/2026)
   Cobros y pagos con varios medios, lo que llega de Cuentas Corrientes,
   IVA mensual, vínculos de la factura y el circuito de documentos.
   ═══════════════════════════════════════════════════════════════════════ */

/* Lo que viene de Cuentas Corrientes: marca chica al lado del número */
.forigen {
  font-size: var(--t6); font-weight: 700; padding: 2px var(--sp-2); border-radius: var(--r-pill);
  background: var(--hover-accent); color: var(--celeste); white-space: nowrap;
}

/* Medios de pago del modal de cobro/pago de Finanzas */
.fmedios { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.fmedio {
  display: grid; grid-template-columns: minmax(9.375rem, 1.3fr) minmax(7.5rem, 1fr) 8.75rem minmax(7.5rem, 1fr) 2rem;
  gap: var(--sp-2); align-items: center;
}
.fmedio .finput, .fmedio .fselect { min-width: 0; }
.fmedio__del {
  width: 2rem; height: 2rem; border-radius: var(--r-pill); border: none; background: transparent;
  color: var(--ink-3); cursor: pointer; display: grid; place-items: center; font-size: 1.125rem; line-height: 1;
}
.fmedio__del svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fmedio__del:hover { background: var(--card); color: var(--ink); }
.fresto--tot { font-weight: 700; color: var(--ink); }

/* Lo mismo en la hoja de pago de Cuentas Corrientes */
.ccmedios { display: flex; flex-direction: column; gap: var(--sp-2); }
.ccmedio {
  display: grid; grid-template-columns: minmax(10.625rem, 1.4fr) minmax(8.125rem, 1fr) 9.375rem minmax(8.75rem, 1fr) 2.25rem;
  gap: var(--sp-2); align-items: center;
}
.ccmedio .finput, .ccmedio .fselect { min-width: 0; }
.ccmedio__del {
  width: 2.25rem; height: 2.25rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent;
  color: var(--ink-3); cursor: pointer; font-size: 1.125rem; line-height: 1;
}
.ccmedio__del:hover { color: var(--ink); border-color: var(--ink-3); }
.ccmedios__add { align-self: flex-start; margin-top: var(--sp-2); }

/* IVA · posición mensual (Cuentas por pagar / por cobrar) */
.fiva {
  background: var(--card); border-radius: var(--r-card); padding: var(--sp-4) var(--sp-4); margin-bottom: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.fiva__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-1); }
.fiva__title { font-size: var(--t4); font-weight: 700; color: var(--ink); }
.fiva__meta { font-size: var(--t4); font-weight: 500; color: var(--ink-3); }
.fiva__row {
  display: grid; grid-template-columns: minmax(8.125rem, 1fr) 7.5rem 7.5rem 7.5rem 7.5rem 5.625rem 11.25rem;
  gap: var(--sp-3); align-items: center; font-size: var(--t4); font-weight: 500;
  background: var(--row); border-radius: var(--r-row); padding: var(--sp-2) var(--sp-4); font-variant-numeric: tabular-nums;
}
.fiva__row .r { text-align: right; }
.fiva__row--head { background: transparent; padding: 0 var(--sp-4); font-size: var(--t6); font-weight: 600; color: var(--ink-3); }
.fiva__per { font-weight: 700; }
.fiva__saldo { font-weight: 700; }

/* Factura: bloque "Origen del comprobante" */
.fvinc { display: flex; flex-direction: column; gap: var(--sp-3); }
.fvinc__rems { display: flex; flex-direction: column; gap: var(--sp-1); }

/* Circuito de documentos: pestañas, paneles y tablas */
.fdoc-tabs { margin-bottom: var(--sp-3); display: flex; }
.fdoc-panel { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.fdoc-panel > .fchips { margin-bottom: 0; }
.fdoc-legacy-acts { justify-content: flex-end; }
.frow--circ {
  grid-template-columns: minmax(8.125rem, 1fr) minmax(10rem, 1.4fr) 6.875rem minmax(7.5rem, 1fr) minmax(8.125rem, 1fr) 7.5rem 7.5rem 8.75rem;
  gap: var(--sp-2);
}
.frow--circ.ftable__row { cursor: pointer; }
.frow--circ .c-doc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.fdoc-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.c-actions .fbtn { white-space: nowrap; }

/* Orden de compra: renglones */
.foc-items { display: flex; flex-direction: column; gap: var(--sp-2); }
.foc-row { display: grid; grid-template-columns: minmax(12.5rem, 1fr) 5.625rem 8.75rem 8.125rem 2rem; gap: var(--sp-2); align-items: center; }
.foc-row--head { font-size: var(--t6); font-weight: 600; color: var(--ink-3); }
.foc-row .r, .foc-row--head .r { text-align: right; }
.foc-imp { font-size: var(--t4); font-weight: 600; font-variant-numeric: tabular-nums; }
.foc-items > .fbtn { align-self: flex-start; }
.foc-tot {
  display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--sp-2);
  padding-top: var(--sp-2); border-top: 1.5px solid var(--line); font-size: var(--t4); font-weight: 500;
}
.foc-tot strong { font-size: 1.125rem; font-weight: 800; }

@media (max-width: 1100px) {
  .fiva__row { grid-template-columns: 1fr 1fr 1fr; }
  .fiva__row--head { display: none; }
  .frow--circ { grid-template-columns: 1fr 1fr 1fr; }
  .frow--circ.ftable__head { display: none; }
  .fmedio, .ccmedio { grid-template-columns: 1fr 1fr; }
  .foc-row { grid-template-columns: 1fr 4.375rem 6.875rem; }
  .foc-row .foc-imp, .foc-row--head span:nth-child(4) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LEGALES (17/09/2026) — seis pantallas sobre la familia .org
   Panel General · Contratos · Cartas Documento · Reclamos / Expedientes ·
   Vencimientos y Audiencias · Documentación Societaria. Reusa .org-kpi,
   .org-cols, .org-rail, .org-tipo__i y las piezas canónicas (card, table,
   badge, drawer). Acá va solo lo que las capturas traen y no existía:
   dona, barras, calendario, flujo, bloques de fecha y la franja de
   actividad. Todo sobre tokens.
   ═══════════════════════════════════════════════════════════════════════ */

.leg { --leg-violeta: #6C5CE7; --leg-gris: var(--ink-3); }

/* Colores por tono (sirven a dona, puntos, barras y flujo) */
.leg .leg-t--ok      { --leg-c: var(--verde); }
.leg .leg-t--warn    { --leg-c: var(--naranja); }
.leg .leg-t--danger  { --leg-c: var(--status-red); }
.leg .leg-t--info    { --leg-c: var(--celeste); }
.leg .leg-t--celeste { --leg-c: #2FB5C9; }
.leg .leg-t--azul    { --leg-c: var(--azul); }
.leg .leg-t--violeta { --leg-c: var(--leg-violeta); }
.leg .leg-t--gris, .leg .leg-t--neutral { --leg-c: var(--leg-gris); }

/* Cabecera: el período va antes de los botones */
.leg .page-head__acc { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.leg .page-head__acc .btn svg { width: 1rem; height: 1rem; }
.leg-per { min-width: 9.375rem; }

/* Tarjetas: sin enlace al pie, un poco más bajas que las de Laboral */
.leg-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.leg-kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.leg-kpis--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.leg-kpi { padding: var(--sp-4); gap: 2px; }
.leg-kpi.is-on { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul) inset; }
.leg-kpi .org-kpi__s { white-space: normal; }
.leg-kpi .org-kpi__l { white-space: normal; line-height: 1.3; }
/* En el carril (320 px) la dona se achica para que la leyenda entre entera */
.org-rail .leg-dona { gap: var(--sp-3); }
.org-rail .leg-dona__svg { width: 6.5rem; height: 6.5rem; }
.org-rail .leg-ley__i { font-size: var(--t5); font-weight: 500; gap: var(--sp-1); }
.org-rail .leg-ley__l { white-space: normal; line-height: 1.25; }

/* Cards */
.leg-card { min-width: 0; }
.leg-card .card__body { min-width: 0; }
.leg-card--tabla .card__body { padding-left: 0; padding-right: 0; }
.leg-card--tabla .table-wrap { overflow-x: auto; }
.leg-card .card__head { gap: var(--sp-2); }
.leg-link {
  display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-3);
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-family); font-size: var(--t4); font-weight: 600; color: var(--link);
}
.leg-link svg { width: 0.875rem; height: 0.875rem; }
.leg-link:hover { text-decoration: underline; }
.leg-chipbtn, .leg-contador {
  border: 1.5px solid var(--line); background: var(--panel); border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-3); font-family: var(--font-family); font-size: var(--t5); font-weight: 600; color: var(--ink);
  cursor: pointer; white-space: nowrap;
}
.leg-chipbtn:hover { border-color: var(--ink-3); }
.leg-contador { border-color: transparent; background: var(--status-red-bg); color: var(--status-red); }
.leg-nota { display: flex; align-items: center; gap: var(--sp-1); margin: var(--sp-4) 0 0; font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.leg-nota svg { width: 0.875rem; height: 0.875rem; }
.leg-foot { margin: var(--sp-3) var(--sp-4) 0; font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }

/* Grillas del panel y de la agenda */
.leg-grid { display: grid; gap: var(--sp-4); align-items: stretch; }
.leg-grid--4 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); }
.leg-grid--3 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); }
.leg-grid--agenda { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

/* Dona */
.leg-dona { display: flex; align-items: center; gap: var(--sp-4); }
.leg-dona__svg { width: 9.375rem; height: 9.375rem; flex: none; }
.leg-dona__base { fill: none; stroke: var(--card); stroke-width: 16; }
.leg-dona__seg { fill: none; stroke: var(--leg-c); stroke-width: 16; }
.leg-dona__n { font-family: var(--font-family); font-size: 1.5rem; font-weight: 800; fill: var(--ink); }
.leg-dona__c { font-family: var(--font-family); font-size: var(--t6); font-weight: 500; fill: var(--ink-muted); }
.leg-ley { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; flex: 1; }
.leg-ley__i { display: grid; grid-template-columns: 0.625rem minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; font-size: var(--t4); font-weight: 500; }
.leg-ley__l { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leg-ley__n { font-weight: 700; font-variant-numeric: tabular-nums; }
.leg-ley__p { font-weight: 500; color: var(--ink-muted); }
.leg-dot { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--leg-c, var(--ink-3)); display: inline-block; flex: none; }

/* Barras (estado de los contratos) */
.leg-barras { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-3); height: 11.25rem; align-items: end; padding-top: var(--sp-2); }
.leg-barra { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); height: 100%; min-width: 0; }
.leg-barra__n { font-size: var(--t5); font-weight: 700; font-variant-numeric: tabular-nums; }
.leg-barra__col { flex: 1; width: 2.125rem; display: flex; align-items: flex-end; border-radius: var(--r-pill) var(--r-pill) 0 0; background: var(--card); }
.leg-barra__fill { width: 100%; border-radius: var(--r-pill) var(--r-pill) 0 0; background: var(--leg-c); min-height: 2px; }
.leg-barra__l { font-size: var(--t6); font-weight: 500; color: var(--ink-muted); text-align: center; white-space: nowrap; }

/* Listas con cantidad (novedades, casos por tipo, resumen semanal) */
.leg-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.leg-lista__i { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-light); font-size: var(--t4); font-weight: 500; }
.leg-lista__i:last-child { border-bottom: none; }
.leg-lista__l { flex: 1; min-width: 0; }
.leg-lista__i b { font-variant-numeric: tabular-nums; }
.leg-lista__i--tot { font-weight: 700; }
.leg-lista .org-tipo__i { width: 1.625rem; height: 1.625rem; }

/* Alertas (panel, cartas, agenda) */
.leg-alertas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.leg-alerta {
  width: 100%; display: flex; align-items: center; gap: var(--sp-2); text-align: left;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-row); border: 1.5px solid var(--line); background: var(--panel);
  font-family: var(--font-family); font-size: var(--t4); font-weight: 500; color: var(--ink); cursor: pointer;
}
.leg-alerta:hover { border-color: var(--ink-3); }
.leg-alerta > svg { width: 0.875rem; height: 0.875rem; color: var(--ink-3); flex: none; }
.leg-alerta__ico { width: 1.75rem; height: 1.75rem; border-radius: var(--r-pill); flex: none; display: grid; place-items: center; }
.leg-alerta__ico svg { width: 1rem; height: 1rem; }
.leg-alerta__ico--warn { background: var(--status-orange-bg); color: var(--naranja); }
.leg-alerta__ico--danger { background: var(--status-red-bg); color: var(--status-red); }
.leg-alerta__ico--info, .leg-alerta__ico--ok { background: var(--avbg); color: var(--azul); }
.leg-alerta__l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.leg-alerta__l span { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.leg-alerta__n { min-width: 1.625rem; height: 1.375rem; padding: 0 var(--sp-1); border-radius: var(--r-pill); display: grid; place-items: center; background: var(--card); font-size: var(--t5); font-weight: 700; }

/* Celdas de tabla */
.leg-celda { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.leg-celda__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.leg-celda__t span { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.leg .org-tipo__i { width: 1.875rem; height: 1.875rem; }
.leg .leg-tipo--ok, .leg .leg-tipo--cumplido { color: var(--verde); background: var(--status-green-bg); }
.leg .leg-tipo--warn, .leg .leg-tipo--otro { color: var(--naranja); background: var(--status-orange-bg); }
.leg .leg-tipo--danger, .leg .leg-tipo--vencimiento { color: var(--status-red); background: var(--status-red-bg); }
.leg .leg-tipo--audiencia, .leg .leg-tipo--violeta { color: var(--leg-violeta); background: rgba(108, 92, 231, 0.12); }
.leg .leg-tipo--mediacion, .leg .leg-tipo--info, .leg .leg-tipo--celeste, .leg .leg-tipo--azul { color: var(--azul); background: var(--avbg); }
.leg-dias { font-size: var(--t5); font-weight: 700; font-variant-numeric: tabular-nums; }
.leg-dias--ok { color: var(--verde); }
.leg-dias--warn { color: var(--naranja); }
.leg-dias--danger { color: var(--status-red); }
.leg-rojo { color: var(--status-red); font-weight: 700; }

/* Bloque de fecha (04 / SEP) */
.leg-fecha {
  width: 2.875rem; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--sp-1) 0; border: 1.5px solid var(--line); border-radius: var(--r-pill); line-height: 1.1;
}
.leg-fecha b { font-size: 1.0625rem; font-weight: 800; }
.leg-fecha span { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); }

/* Agenda y listas con fecha */
.leg-agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.leg-agenda__i {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border: 1.5px solid var(--line); border-radius: var(--r-row); background: var(--panel); cursor: pointer;
}
.leg-agenda__i:hover { border-color: var(--ink-3); }
.leg-agenda__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.leg-agenda__txt b { font-size: var(--t4); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leg-agenda__txt span { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leg-agenda__h { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--t5); font-weight: 500; color: var(--ink-muted); white-space: nowrap; }
.leg-agenda__h svg { width: 0.875rem; height: 0.875rem; }
.leg-agenda__f { font-size: var(--t5); font-weight: 700; white-space: nowrap; }
.leg-agenda .menu-btn { flex: none; }

/* Actividad (franja de abajo y drawer) */
.leg-act { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.leg-act--h { flex-direction: row; gap: 0; }
.leg-act--h .leg-act__i { flex: 1; min-width: 0; padding: 0 var(--sp-4); border-left: 1px solid var(--line); }
.leg-act--h .leg-act__i:first-child { padding-left: 0; border-left: none; }
.leg-act__i { display: flex; align-items: flex-start; gap: var(--sp-2); }
.leg-act__i--obs { cursor: pointer; }
.leg-act__i--obs .leg-dot { margin-top: var(--sp-1); }
.leg-act__ico { width: 2rem; height: 2rem; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--avbg); color: var(--azul); }
.leg-act__ico svg { width: 1rem; height: 1rem; }
.leg-act__ico--contratos { background: var(--status-green-bg); color: var(--verde); }
.leg-act__ico--casos { background: rgba(108, 92, 231, 0.12); color: var(--leg-violeta); }
.leg-act__ico--eventos { background: var(--status-orange-bg); color: var(--naranja); }
.leg-act__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--t4); font-weight: 500; }
.leg-act__txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.leg-act__txt span { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }

/* Próximos vencimientos del carril */
.leg-vtos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.leg-vto {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto 2.5rem; gap: var(--sp-2); align-items: center;
  padding: var(--sp-2) 0; background: none; border: none; border-bottom: 1px solid var(--border-light);
  font-family: var(--font-family); text-align: left; cursor: pointer; color: var(--ink);
}
.leg-vtos li:last-child .leg-vto { border-bottom: none; }
.leg-vto__t { font-size: var(--t4); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leg-vto__f { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.leg-vto .leg-dias { text-align: right; }

/* Flujo de la carta documento */
.leg-flujo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); position: relative; }
.leg-flujo::before { content: ''; position: absolute; left: 0.4375rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--line); }
.leg-flujo__i { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--t4); font-weight: 500; position: relative; }
.leg-flujo__p { width: 1rem; height: 1rem; border-radius: 50%; border: 3px solid var(--leg-c); background: var(--panel); flex: none; }
.leg-flujo__l { flex: 1; }

/* Filtros */
.leg-filters { flex-wrap: wrap; }

/* Calendario */
.leg-cal { display: flex; flex-direction: column; gap: var(--sp-3); }
.leg-cal__nav { display: flex; align-items: center; gap: var(--sp-2); }
.leg-cal__nav b { flex: 1; text-align: center; font-size: 0.875rem; }
.leg-cal__nav .btn--icon svg { width: 1rem; height: 1rem; }
.leg-cal__hoy { height: 2rem; }
.leg-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.leg-cal__dow { padding: var(--sp-2) 0; text-align: center; font-size: var(--t6); font-weight: 600; color: var(--ink-muted); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.leg-cal__d {
  min-height: 2.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
  background: var(--panel); border: none; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: var(--font-family); font-size: var(--t4); font-weight: 600; color: var(--ink); cursor: pointer;
}
.leg-cal__d:hover { background: var(--card); }
.leg-cal__d.is-fuera { color: var(--ink-3); font-weight: 500; }
.leg-cal__d.is-hoy span:first-child { background: var(--azul); color: #fff; border-radius: 50%; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; }
.leg-cal__d.is-sel { box-shadow: inset 0 0 0 2px var(--celeste); }
.leg-cal__dots { display: flex; gap: var(--sp-1); height: 0.375rem; }
.leg-cal__dots .leg-dot { width: 0.375rem; height: 0.375rem; }
.leg-cal__ley { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.leg-cal__ley li { display: inline-flex; align-items: center; gap: var(--sp-1); }
.leg .leg-tipo-dot--vencimiento { background: var(--status-red); }
.leg .leg-tipo-dot--audiencia { background: var(--leg-violeta); }
.leg .leg-tipo-dot--mediacion { background: var(--celeste); }
.leg .leg-tipo-dot--otro { background: var(--naranja); }
.leg .leg-tipo-dot--cumplido { background: var(--verde); }
.leg-sem { margin: 0 0 var(--sp-2); font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }

/* Archivo rápido (carpetas por categoría) */
.leg-carpetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.leg-carpeta {
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); text-align: left;
  border: 1.5px solid var(--line); border-radius: var(--r-row); background: var(--panel);
  font-family: var(--font-family); font-size: var(--t4); font-weight: 600; color: var(--ink); cursor: pointer;
}
.leg-carpeta:hover, .leg-carpeta.is-on { border-color: var(--azul); }
.leg-carpeta__i { color: var(--leg-c); display: grid; }
.leg-carpeta__i svg { width: 1.5rem; height: 1.5rem; fill: var(--leg-c); fill-opacity: .25; }

/* Historial dentro del drawer */
.leg-hist { list-style: none; margin: var(--sp-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.leg-hist li { display: flex; flex-direction: column; gap: 2px; padding-left: var(--sp-3); border-left: 2px solid var(--line); }
.leg-hist__f { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.leg-hist__t { font-size: var(--t4); font-weight: 500; color: var(--ink); }

/* Breakpoints (R-15): 1500 · 1100 · 900 */
@media (max-width: 1100px) {
  .leg-kpis--5, .leg-kpis--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leg-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .leg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leg-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .leg-grid--agenda, .leg-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .leg-act--h { flex-direction: column; gap: var(--sp-3); }
  .leg-act--h .leg-act__i { padding: 0; border-left: none; }
}
@media (max-width: 900px) {
  .leg-kpis--4, .leg-kpis--5, .leg-kpis--6, .leg-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .leg-dona { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTADOS QUE FALTABAN EN LOS COMPONENTES CANÓNICOS (auditoría 17/09/2026)
   Deshabilitado, foco visible y hover en los controles que no los tenían.
   ═══════════════════════════════════════════════════════════════════════════ */
.finput:disabled, .ftextarea:disabled, .fselect:disabled,
.ui .select:disabled, .form-control:disabled {
  opacity: 0.55; cursor: not-allowed;
}
.ui .select:hover:not(:disabled) { border-color: var(--dashed); }
.ui .tabs__b:disabled, .ui .chip:disabled, .fchip:disabled,
.menu-btn:disabled, .menu__i:disabled {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}
/* Estos dos controles apagan el contorno del navegador y no tenían reemplazo:
   con teclado no se veía dónde estaba el foco. */
.ntf-search:focus-within { box-shadow: 0 0 0 2px var(--celeste); }
.hz-rh .rh-periodo select:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; border-radius: var(--r-pill); }


/* ═══════════════════════════════════════════════════════════════════════════
   HISTORIAL DE ACTIVIDAD  (js/views/history.js)

   Vivía dentro del JS de la vista, con escalas propias. Acá está con las del
   sistema: rem, --sp-*, --t1..t6, --r-*, y los cuatro colores sueltos
   (#ef4444, #10b981, #f97316, #6366f1) llevados a los tonos de R-14.
   ═══════════════════════════════════════════════════════════════════════════ */
.htl-shell { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ── Cabecera ── */
.htl-hdr { display: flex; flex-direction: column; gap: var(--sp-3); }
.htl-hdr-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.htl-hdr-title h2 { margin: 0; font-size: var(--t1); font-weight: 800; color: var(--ink); letter-spacing: -0.4px; line-height: 1.18; }
.htl-hdr-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.htl-seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.htl-seg button {
  appearance: none; background: transparent; border: 0;
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-muted); cursor: pointer; font-size: var(--t4); font-weight: 500; transition: background .12s, color .12s;
}
.htl-seg button.htl-on { background: var(--hover-accent); color: var(--ink); }
.htl-seg button:not(.htl-on):hover { background: var(--hover-soft); color: var(--ink); }
.htl-seg button:disabled { opacity: .45; cursor: not-allowed; }
.htl-search-wrap {
  position: relative; display: flex; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 0 var(--sp-3); transition: border-color .12s;
}
.htl-search-wrap:focus-within { border-color: var(--celeste); }
.htl-search-wrap i { color: var(--ink-muted); font-size: var(--t2); font-weight: 700; }
.htl-search-wrap input { flex: 1; height: 2.25rem; border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink); padding: 0 var(--sp-2); font-size: var(--t4); }
.htl-search-wrap input::placeholder { color: var(--ink-muted); }
.htl-search-clear {
  appearance: none; border: 0; background: transparent; color: var(--ink-muted); cursor: pointer;
  padding: var(--sp-1); border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--t4); font-weight: 500;
}
.htl-search-clear:hover { background: var(--hover-soft); color: var(--ink); }

/* ── Filtros: una sola fila (R-03) ── */
.htl-filters {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-row);
  padding: var(--sp-3) var(--sp-4);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: flex-end;
}
.htl-fg { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.htl-flabel { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); }
.htl-select {
  appearance: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-pill);
  height: 2rem; padding: 0 1.75rem 0 var(--sp-3); font: inherit; font-size: var(--t5); color: var(--ink);
  cursor: pointer; max-width: 12.5rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right var(--sp-2) center;
}
.htl-select:focus-visible { outline: 2px solid var(--celeste); outline-offset: 1px; }
.htl-select:disabled { opacity: .55; cursor: not-allowed; }
.htl-check { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--t5); font-weight: 500; color: var(--ink); height: 2rem; cursor: pointer; user-select: none; }
.htl-check input { position: absolute; opacity: 0; pointer-events: none; }
.htl-check-box {
  width: 0.9375rem; height: 0.9375rem; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--panel); display: inline-flex; align-items: center; justify-content: center;
  color: transparent; transition: background .12s, border-color .12s, color .12s; font-size: var(--t6); font-weight: 600; flex-shrink: 0;
}
.htl-check.htl-checked .htl-check-box { background: var(--celeste); border-color: var(--celeste); color: #FFFFFF; }
.htl-check input:focus-visible + .htl-check-box { outline: 2px solid var(--celeste); outline-offset: 2px; }
.htl-count-badge { margin-left: auto; display: inline-flex; align-items: baseline; gap: var(--sp-1); font-size: var(--t5); font-weight: 500; color: var(--ink-muted); padding-bottom: var(--sp-2); }
.htl-count-badge .htl-cn { font-size: var(--t3); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.htl-count-badge .htl-ct { color: var(--ink-muted); }
.htl-custom-dates { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.htl-custom-dates input { height: 2rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0 var(--sp-2); font: inherit; font-size: var(--t5); color: var(--ink); }
.htl-dotsep { color: var(--line); }

/* ── Línea de tiempo ── */
.htl-timeline { display: flex; flex-direction: column; gap: var(--sp-4); }
.htl-day-hd { display: flex; align-items: center; gap: var(--sp-2); padding-left: 2.625rem; margin-bottom: var(--sp-1); }
.htl-day-label { font-size: var(--t4); font-weight: 700; color: var(--ink); }
.htl-day-date { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); }
.htl-day-count { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); padding: 0 var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--panel); }
.htl-day-line { flex: 1; height: 1px; background: var(--line); }
.htl-list { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: var(--sp-2); }
.htl-list::before { content: ''; position: absolute; top: 1rem; bottom: 1rem; left: 0.9375rem; width: 1px; background: var(--line); }
.htl-item { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--sp-2); align-items: flex-start; }
.htl-dot {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); position: relative; z-index: 1; flex-shrink: 0; font-size: var(--t2); font-weight: 700;
}
/* R-14: los cuatro colores escritos a mano pasan a los tonos del sistema. */
.htl-item--critical .htl-dot   { background: var(--status-red); color: #FFFFFF; border-color: var(--status-red); }
.htl-item--stock-up .htl-dot   { background: var(--verde);      color: #FFFFFF; border-color: var(--verde); }
.htl-item--stock-down .htl-dot { background: var(--naranja);    color: #FFFFFF; border-color: var(--naranja); }
.htl-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-row);
  padding: var(--sp-2) var(--sp-3); transition: background .14s, border-color .14s; min-width: 0;
}
.htl-card--exp { cursor: pointer; }
.htl-card--exp:hover { background: var(--hover-soft); border-color: var(--ink-3); }
.htl-card--exp:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; }
.htl-item--critical .htl-card   { border-left: 3px solid var(--status-red); }
.htl-item--stock-up .htl-card   { border-left: 3px solid var(--verde); }
.htl-item--stock-down .htl-card { border-left: 3px solid var(--naranja); }
.htl-card-row { display: flex; align-items: flex-start; gap: var(--sp-2); justify-content: space-between; }
.htl-card-left { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.htl-meta { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--t6); font-weight: 600; color: var(--ink-muted); flex-wrap: wrap; }
.htl-avatar {
  width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: var(--avbg); border: 1px solid var(--line); color: var(--ink-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.5rem; font-weight: 700; flex-shrink: 0;
}
.htl-user { font-size: var(--t5); font-weight: 600; color: var(--ink); }
.htl-action-lbl { color: var(--ink-muted); }
.htl-module { color: var(--ink-muted); font-weight: 600; }
.htl-title { font-size: var(--t4); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.htl-desc { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); line-height: 1.4; }
.htl-card-right { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
.htl-time { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); font-family: var(--font-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.htl-exp-btn {
  appearance: none; border: 0; background: transparent;
  width: 1.375rem; height: 1.375rem; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-muted); cursor: pointer; font-size: var(--t4); font-weight: 500;
}
.htl-card--exp:hover .htl-exp-btn { color: var(--ink); }

/* Densidad compacta (el segmentado de la cabecera) */
.htl-timeline.htl-compact .htl-card { padding: var(--sp-1) var(--sp-3); }
.htl-timeline.htl-compact .htl-list { gap: var(--sp-1); }
.htl-timeline.htl-compact .htl-desc { display: none; }

/* Detalle desplegado */
.htl-detail { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: var(--sp-3); cursor: default; }
.htl-frase { margin: 0; font-size: var(--t5); font-weight: 500; color: var(--ink); line-height: 1.5; }
.htl-frase b { font-weight: 700; }
.htl-diff-hd { font-size: var(--t6); font-weight: 700; color: var(--ink-muted); margin-bottom: var(--sp-1); }
.htl-diff-tbl { width: 100%; max-width: 42.5rem; border-collapse: collapse; font-size: var(--t6); font-weight: 600; }
/* R-11: las mayúsculas quedan sólo en la cabecera de tabla. */
.htl-diff-tbl th {
  text-align: left; font-size: var(--t6); font-weight: 700; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: 0.02em;
  padding: var(--sp-1) var(--sp-2) var(--sp-1) 0; border-bottom: 1px solid var(--line);
}
.htl-diff-tbl td { padding: var(--sp-1) var(--sp-2) var(--sp-1) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.htl-diff-tbl tr:last-child td { border-bottom: 0; }
.htl-diff-field { color: var(--ink-muted); font-weight: 500; width: 28%; }
.htl-diff-before { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--line); width: 28%; }
.htl-diff-arrow { width: 1.125rem; color: var(--ink-muted); font-size: var(--t6); font-weight: 600; }
.htl-diff-after { color: var(--ink); font-weight: 600; }
.htl-tech { display: flex; flex-direction: column; gap: 3px; }
.htl-tech-row { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--t6); font-weight: 600; padding: 1px 0; }
.htl-tech-lbl { color: var(--ink-muted); min-width: 6.875rem; flex-shrink: 0; }
.htl-tech-val { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.htl-tech-val--mono { font-family: var(--font-mono); font-size: var(--t6); font-weight: 600; }

/* Vacío y pie */
.htl-empty { text-align: center; padding: var(--sp-6) var(--sp-5); color: var(--ink-muted); }
.htl-empty i { font-size: 2.5rem; opacity: .35; display: block; margin-bottom: var(--sp-3); }
.htl-empty h3 { margin: 0 0 var(--sp-1); font-size: var(--t2); font-weight: 700; color: var(--ink); }
.htl-empty p { margin: 0; font-size: var(--t5); font-weight: 500; }
.htl-foot { text-align: center; padding-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; }
.htl-more {
  appearance: none; font: inherit; font-size: var(--t5); font-weight: 600; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-pill);
  height: 2.125rem; padding: 0 var(--sp-5); cursor: pointer; transition: background .12s, border-color .12s;
}
.htl-more:hover { border-color: var(--ink-3); background: var(--hover-soft); }
.htl-more:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; }
.htl-more:disabled { opacity: .55; cursor: not-allowed; }
.htl-foot-info { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }


/* ══════════════════════════════════════════════════════════════════
   COMPRAS (22/09/2026) — seis pantallas sobre la familia .org
   Capturas del usuario en assets/COMPRAS. Todo lo propio va bajo `.cmp`, que
   el motor le pone a la raíz de la sección; las piezas compartidas (KPI con
   icono, columnas con carril, card, tabla, badge, tabs, filtros) son las de
   .org y las canónicas de plantilla-ui.js.
   ══════════════════════════════════════════════════════════════════ */

/* Tono → color. Un solo lugar, igual que .leg-t--*. */
.cmp .cmp-t--ok      { --cmp-c: var(--verde); }
.cmp .cmp-t--warn    { --cmp-c: var(--naranja); }
.cmp .cmp-t--danger  { --cmp-c: var(--status-red); }
.cmp .cmp-t--info    { --cmp-c: var(--celeste); }
.cmp .cmp-t--brand   { --cmp-c: var(--azul); }
.cmp .cmp-t--neutral { --cmp-c: var(--ink-3); }

/* ── KPI ── */
.cmp-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cmp-kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cmp-kpi.is-on { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul) inset; }
.cmp-kpi .org-kpi__l { white-space: normal; line-height: 1.3; }
.cmp-kpi .org-kpi__s { white-space: normal; }

/* ── Cards ── */
.cmp-card { min-width: 0; }
.cmp-card .card__body { min-width: 0; }
.cmp-card--tabla .card__body { padding-left: 0; padding-right: 0; padding-top: 0; }
.cmp-card--tabla .table-wrap { overflow-x: auto; }
.cmp-card--det .card__body { display: flex; flex-direction: column; gap: var(--sp-3); }
.cmp-link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-family); font-size: var(--t4); font-weight: 600; color: var(--link);
}
.cmp-link svg { width: 0.875rem; height: 0.875rem; }
.cmp-link:hover { text-decoration: underline; }
.cmp-per { margin-right: var(--sp-2); }
.cmp-filters__acc { margin-left: auto; }

/* Sub-pestañas del carril (dentro de la ficha del registro elegido) */
.tabs--sub { margin: 0 0 var(--sp-2); }
.tabs--sub .tabs__b { font-size: var(--t6); font-weight: 600; padding: var(--sp-1) var(--sp-2); }

/* ── Accesos rápidos del panel ── */
.cmp-accesos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.cmp-acceso {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); min-width: 0;
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-card);
  font-family: var(--font-family); font-size: var(--t4); font-weight: 600; color: var(--ink);
  cursor: pointer; transition: border-color .15s ease;
}
.cmp-acceso:hover { border-color: var(--ink-3); }
.cmp-acceso span:not(.cmp-acceso__ico) { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-acceso__ico {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center; background: var(--avbg); color: var(--azul);
}
.cmp-acceso__ico svg { width: 1.125rem; height: 1.125rem; }
.cmp-acceso > svg { width: 0.875rem; height: 0.875rem; flex: none; color: var(--ink-muted); }

/* ── Alertas del carril ── */
.cmp-alertas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.cmp-alerta {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-3); align-items: center; text-align: left;
  background: none; border: none; padding: var(--sp-1) 0; cursor: pointer; font-family: var(--font-family);
}
.cmp-alerta:hover .cmp-alerta__txt b { color: var(--azul); }
.cmp-alerta__ico {
  width: 1.75rem; height: 1.75rem; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  color: var(--cmp-c, var(--celeste)); background: var(--card);
}
.cmp-alerta__ico svg { width: 1rem; height: 1rem; }
.cmp-alerta__txt { display: flex; flex-direction: column; min-width: 0; }
.cmp-alerta__txt b { font-size: var(--t4); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-alerta__txt span { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-alerta__n { font-size: var(--t4); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cmp-c, var(--ink)); }

/* ── Aprobaciones pendientes ── */
.cmp-aprob { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.cmp-aprob__i {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-3); align-items: center; text-align: left;
  background: none; border: none; padding: var(--sp-1) 0; cursor: pointer; font-family: var(--font-family);
}
.cmp-aprob__i:hover b { color: var(--azul); }
.cmp-aprob__ico { width: 1.5rem; height: 1.5rem; flex: none; color: var(--ink-muted); }
.cmp-aprob__ico svg { width: 100%; height: 100%; }
.cmp-aprob__txt { display: flex; flex-direction: column; min-width: 0; }
.cmp-aprob__txt b { font-size: var(--t4); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-aprob__txt span { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-aprob__m { font-size: var(--t5); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ── Dona del gasto ── */
.cmp-dona { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.cmp-dona__svg { width: 7.5rem; height: 7.5rem; flex: none; }
.cmp-dona__base { fill: none; stroke: var(--card); stroke-width: 16; }
.cmp-dona__seg { fill: none; stroke: var(--cmp-c); stroke-width: 16; }
.cmp-dona__n { font-family: var(--font-family); font-size: 1.0625rem; font-weight: 800; fill: var(--ink); }
.cmp-dona__c { font-family: var(--font-family); font-size: var(--t6); font-weight: 500; fill: var(--ink-muted); }
.cmp-ley { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }
.cmp-ley__i { display: grid; grid-template-columns: 0.625rem minmax(0, 1fr) auto auto; gap: var(--sp-2); align-items: center; font-size: var(--t5); font-weight: 500; }
.cmp-ley__l { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-ley__n { font-weight: 700; font-variant-numeric: tabular-nums; }
.cmp-ley__p { font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cmp-dot { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--cmp-c, var(--ink-3)); display: inline-block; flex: none; }

/* ── Barra de progreso (recepción, indicadores) ── */
.cmp-barra { display: flex; align-items: center; gap: var(--sp-2); min-width: 5.5rem; }
.cmp-barra__n { font-size: var(--t5); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); min-width: 2.25rem; }
.cmp-barra__riel { flex: 1; height: 0.375rem; border-radius: var(--r-pill); background: var(--card); overflow: hidden; min-width: 2.5rem; }
.cmp-barra__fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--cmp-c, var(--ink-3)); }

/* ── Desempeño del proveedor ── */
.cmp-score { display: flex; align-items: center; gap: var(--sp-2); min-width: 6rem; }
.cmp-score__v { font-size: var(--t4); font-weight: 700; font-variant-numeric: tabular-nums; }
.cmp-score__ico { width: 0.875rem; height: 0.875rem; color: var(--cmp-c); flex: none; }
.cmp-score__ico svg { width: 100%; height: 100%; fill: currentColor; }
.cmp-nd { color: var(--ink-muted); }

/* ── Proveedor en la tabla ── */
.cmp-prov { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.cmp-prov__ini {
  width: 1.75rem; height: 1.75rem; border-radius: var(--r-pill); flex: none;
  display: inline-grid; place-items: center; background: var(--azul); color: #fff;
  font-size: var(--t6); font-weight: 700;
}
.cmp-prov__ini--g { width: 2.5rem; height: 2.5rem; font-size: var(--t4); font-weight: 500; }

/* ── Celdas ── */
.cmp-num { font-family: var(--font-mono); font-size: var(--t4); font-weight: 600; }
.cmp-desc { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-vencido { color: var(--status-red); font-weight: 700; }
.cmp-pronto { color: var(--naranja); font-weight: 700; }
.cmp-pago { display: inline-flex; color: var(--cmp-c, var(--verde)); }
.cmp-pago svg { width: 1.125rem; height: 1.125rem; }
.cmp-tipo { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
.cmp-tipo svg { width: 1rem; height: 1rem; flex: none; color: var(--ink-muted); }
.cmp-tipo--solicitudes svg { color: var(--celeste); }
.cmp-tipo--oc svg { color: var(--naranja); }
.cmp-tipo--remitos svg { color: var(--azul); }
.cmp-tipo--facturas svg { color: var(--verde); }
.cmp .table tbody tr.is-sel { background: var(--avbg); }

/* ── Ficha del registro elegido (carril) ── */
.cmp-det__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.cmp-det__prov { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.cmp-det__l { display: block; font-size: var(--t6); font-weight: 600; color: var(--ink-muted); }
.cmp-det__n { display: block; font-size: var(--t2); font-weight: 700; color: var(--ink); }
.cmp-det__sub { display: block; font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.cmp-det__body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.cmp-det__acc { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cmp-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.cmp-items li { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--t4); font-weight: 500; }
.cmp-items li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-items li b { font-variant-numeric: tabular-nums; flex: none; }

/* ── Circuito de aprobación ── */
.cmp-circuito { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cmp-paso { display: grid; grid-template-columns: 0.875rem minmax(0, 1fr); gap: var(--sp-3); padding-bottom: var(--sp-4); position: relative; }
.cmp-paso:last-child { padding-bottom: 0; }
.cmp-paso::before {
  content: ''; position: absolute; left: 0.375rem; top: 1rem; bottom: 0;
  width: 2px; background: var(--line);
}
.cmp-paso:last-child::before { display: none; }
.cmp-paso__pt {
  width: 0.875rem; height: 0.875rem; border-radius: 50%; margin-top: 0.125rem;
  border: 2px solid var(--line); background: var(--panel); z-index: 1;
}
.cmp-paso--ok .cmp-paso__pt { border-color: var(--verde); background: var(--verde); }
.cmp-paso--mal .cmp-paso__pt { border-color: var(--status-red); background: var(--status-red); }
.cmp-paso--pendiente .cmp-paso__pt { border-color: var(--azul); }
.cmp-paso__txt { display: flex; flex-direction: column; min-width: 0; }
.cmp-paso__txt b { font-size: var(--t4); font-weight: 600; color: var(--ink); }
.cmp-paso__txt span { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }

/* ── Ubicación en el almacén ── */
.cmp-ubic { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.cmp-ubic__l { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--t6); font-weight: 600; color: var(--ink-muted); }
.cmp-ubic__l svg { width: 1rem; height: 1rem; }
.cmp-ubic__v { font-size: var(--t4); font-weight: 600; color: var(--ink); }
.cmp-ubic__ruta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.cmp-ubic__p {
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill);
  background: var(--card); font-size: var(--t6); font-weight: 600; color: var(--ink);
}
.cmp-ubic__s { color: var(--ink-muted); font-size: var(--t5); font-weight: 500; }

/* ── Indicadores del proveedor ── */
.cmp-ind { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.cmp-ind__t { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); }
.cmp-ind__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.cmp-ind__i { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.cmp-ind__l { font-size: var(--t6); font-weight: 500; color: var(--ink-muted); }
.cmp-ind__i b { font-size: var(--t4); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Totales de la factura ── */
.cmp-totales { display: flex; flex-direction: column; gap: var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.cmp-tot { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--t4); font-weight: 500; }
.cmp-tot span { color: var(--ink-muted); }
.cmp-tot b { font-variant-numeric: tabular-nums; }
.cmp-tot--fin { padding-top: var(--sp-1); border-top: 1px solid var(--line); }
.cmp-tot--fin b { font-size: var(--t3); font-weight: 800; }

/* ── Una sola columna cuando el carril se apila ── */
@media (max-width: 1100px) {
  .cmp-accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-kpis--5, .cmp-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cmp-accesos { grid-template-columns: minmax(0, 1fr); }
  .cmp-kpis--5, .cmp-kpis--4 { grid-template-columns: minmax(0, 1fr); }
}

/* El aviso del arranque: sólo aparece si verificar la sesión se demora. */
.sk-boot__msg {
    position: fixed;
    left: 50%;
    bottom: 3.25rem;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    margin: 0;
    padding: 0.5625rem 1rem;
    border-radius: var(--r-pill);
    background: #1C2430;
    color: #FFFFFF;
    font-family: var(--font-family);
    font-size: var(--t4);
    font-weight: 600;
    line-height: 1.35;
}
.sk-boot__msg:empty { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAÑOL  ·  .pn-*
   El pañol es una pantalla de Compras, así que el armazón (page-head, org-kpi,
   filters, tabs, table, badge, empty, org-cols, org-rail, card, dato) es el
   mismo que usa el resto de Compras y no se redefine acá. Esto es sólo lo que
   el diseño trae y la plantilla no tenía: el dibujo del ítem, la ficha con el
   contenido del cajón, la estantería y las tres tarjetas del carril.
   Alto: la tabla desplaza sola y acota con min(x, vh) (R-15); las dos tarjetas
   de abajo se alcanzan desplazando la zona de trabajo, no la página.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Armado de la pantalla ───────────────────────────────────────────── */
.pn-cols { grid-template-columns: minmax(0, 1fr) 21rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; align-items: start; }
.pn-main { gap: var(--sp-4); }
.pn-tabla { max-height: min(24.75rem, 46vh); overflow-y: auto; }
.pn-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.pn-rail { position: static; max-height: none; overflow: visible; display: flex; flex-direction: column; gap: var(--sp-4); }

/* ── El dibujo del ítem ──────────────────────────────────────────────── */
/* El fondo llega por `--pn-bg`, que lo pone cada dibujo: son ilustraciones con
   color propio y no siguen el tema (un guante verde es verde también de noche). */
.pn-th {
  display: grid; place-items: center; flex: none;
  width: 1.75rem; height: 1.75rem; border-radius: var(--r-row);
  background: var(--pn-bg, var(--card)); overflow: hidden;
}
.pn-th--xs { width: 1.5rem; height: 1.5rem; border-radius: 0.3125rem; }
.pn-th--xl { width: 6.5rem; height: 6.5rem; border-radius: var(--r-card); border: 1px solid var(--line); }
.pn-tdth { width: 2.25rem; }
.pn .table tbody td.pn-tdth { padding-right: 0; }

/* ── Tabla ───────────────────────────────────────────────────────────── */
.pn .pn-item { font-weight: 600; color: var(--ink); }
.pn .pn-mut { color: var(--ink-muted); }
.pn .pn-mal { color: var(--status-red); font-weight: 700; }
.pn .pn-ubic { display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.pn .pn-ubic svg { width: 0.875rem; height: 0.875rem; flex: none; color: var(--azul); }
.pn .table tbody tr { cursor: pointer; }
.pn .table tbody tr.is-sel > td { background: var(--hover-soft); }
.pn .table tbody tr.is-sel > td:first-child { box-shadow: inset 3px 0 0 var(--azul); }
.pn-chip { flex: none; }

/* ── Detalle del ítem ────────────────────────────────────────────────── */
.pn-ficha__id { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.pn-ficha__txt { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.pn-ficha__nom { font-size: var(--t2); font-weight: 700; color: var(--ink); line-height: 1.25; }
.pn-ficha__cod { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.pn-datos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin-top: var(--sp-2); }
.pn-datos .dato { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sp-2); align-items: baseline; }
.pn-datos .dato__v { text-align: left; }

/* Contenido del cajón: los vecinos del ítem, como al abrir el cajón de verdad. */
.pn-bin { border-top: 1px solid var(--line); padding-top: var(--sp-3); margin-top: var(--sp-3); }
.pn-bin__t { font-size: var(--t5); font-weight: 600; color: var(--ink); margin-bottom: var(--sp-2); }
.pn-bin__t span { font-weight: 500; color: var(--ink-3); }
.pn-bin__g { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pn-bin__i {
  position: relative; width: 2.75rem; height: 2.75rem; padding: 0;
  display: grid; place-items: center; overflow: hidden;
  border: 2px solid transparent; border-radius: var(--r-row);
  background: var(--card); cursor: pointer;
}
.pn-bin__i:hover { border-color: var(--line); }
.pn-bin__i.is-on { border-color: var(--azul); }
.pn-bin__i .pn-th { width: 100%; height: 100%; border-radius: 0; }
.pn-bin__n {
  position: absolute; right: 0; bottom: 0;
  padding: 0 var(--sp-1); border-radius: var(--r-row) 0 0 0;
  background: var(--verde); color: #fff;
  font-size: var(--t6); font-weight: 700; line-height: 1.15;
}
.pn-bin__n--mal { background: var(--status-red); }

/* ── Ubicación física ────────────────────────────────────────────────── */
.pn-rack .card__head { gap: var(--sp-2); }
.pn-rack.is-moviendo { border-color: var(--naranja); }
.pn-rack__tabs { display: inline-flex; gap: 1px; padding: 2px; border-radius: var(--r-pill); background: var(--card); flex: none; }
.pn-rack__tab {
  height: 1.625rem; padding: 0 var(--sp-2);
  border: 0; border-radius: var(--r-pill); background: transparent;
  color: var(--ink-muted); font-size: var(--t6); font-weight: 600; cursor: pointer;
}
.pn-rack__tab:hover { color: var(--ink); }
.pn-rack__tab.is-on { background: var(--azul); color: #fff; }

.pn-rack__ruta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); font-size: var(--t5); font-weight: 600; color: var(--ink-muted); min-height: 1.25rem; }
.pn-rack__via { color: var(--azul); }
body.dark-mode .pn-rack__via { color: var(--azul-hi); }
.pn-rack__ruta i { color: var(--dashed); font-style: normal; }

/* La caja: un mueble gris con sus cajones. El cuerpo y los frentes son grises
   propios (no tokens de tema) porque es un dibujo de un objeto, no una
   superficie de la interfaz; lo que sí sigue al tema es lo que va encima. */
.pn-rack__caja { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); gap: var(--sp-1); margin-top: var(--sp-2); }
.pn-rack__lado {
  display: grid; place-items: center; border-radius: var(--r-row);
  background: var(--card); color: var(--ink-muted);
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: var(--t6); font-weight: 600;
}
.pn-rack__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem var(--sp-2); padding: var(--sp-2) var(--sp-3);
  min-height: min(9.375rem, 22vh);
  border: 4px solid #3f474f; border-radius: var(--r-row);
  background: linear-gradient(#5d6670, #4b545e);
}
.pn-rack__c {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  padding: 0 0 var(--sp-1); min-height: 3.25rem;
  border: 3px solid transparent; border-radius: var(--r-row);
  background: linear-gradient(#8c959e, #6c757e);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.35); cursor: pointer;
}
.pn-rack__c:hover { filter: brightness(1.1); }
.pn-rack__c.is-vacio { opacity: 0.75; }
.pn-rack__c.is-on { border-color: var(--azul-hi, var(--azul)); box-shadow: 0 0 0 2px rgb(30 200 216 / 0.35), 0 2px 4px rgb(0 0 0 / 0.35); }
.pn-rack__c.is-filtro { border-color: #f4c23c; }
.pn-rack.is-moviendo .pn-rack__c { border-style: dashed; border-color: #f4c23c; opacity: 1; }
.pn-rack__tirador { position: absolute; top: 5px; width: 1.875rem; height: 0.4375rem; border-radius: 2px; background: #4b545e; }
.pn-rack__n {
  position: absolute; top: 3px; right: 4px;
  min-width: 1rem; height: 1rem; padding: 0 var(--sp-1);
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--azul); color: #fff; font-size: var(--t6); font-weight: 700;
}
.pn-rack__l { padding: 2px var(--sp-2); border-radius: 3px; background: #f4c23c; color: #1c2430; font-size: var(--t6); font-weight: 700; white-space: nowrap; }
.pn-rack__c.is-vacio .pn-rack__l { background: #c9c4a8; }

.pn-rack__pie { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.pn-rack__dato { flex: 1 1 0; min-width: 0; font-size: var(--t6); font-weight: 600; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-rack__cancel { color: var(--status-red); }

/* ── Carril: alertas, movimientos y remitos ──────────────────────────── */
.pn-card .card__body { padding-top: var(--sp-2); }
.pn-card__n { color: var(--status-red); }
.pn-card__de { font-size: var(--t6); font-weight: 600; color: var(--ink-3); }

.pn-lista { list-style: none; margin: 0; padding: 0; max-height: min(14.75rem, 30vh); overflow-y: auto; }
.pn-lista__i {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-2); align-items: center; text-align: left;
  padding: var(--sp-2) var(--sp-1); border: 0; border-bottom: 1px solid var(--line);
  background: transparent; cursor: pointer;
}
.pn-lista li:last-child .pn-lista__i { border-bottom: 0; }
.pn-lista__i:hover { background: var(--hover-soft); }
.pn-lista__i.is-on { background: var(--avbg); }
.pn-lista__txt { display: flex; flex-direction: column; min-width: 0; }
.pn-lista__txt b { font-size: var(--t5); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-lista__txt span { font-size: var(--t6); font-weight: 600; color: var(--ink-3); }

.pn-mov { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pn-mov__i {
  display: grid; grid-template-columns: 1.125rem 3.5rem minmax(0, 1fr) auto auto;
  gap: var(--sp-1) var(--sp-2); align-items: center;
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--line);
}
.pn-mov__i:last-child { border-bottom: 0; }
.pn-mov__ico { width: 1.125rem; height: 1.125rem; border-radius: 50%; display: grid; place-items: center; }
.pn-mov__ico svg { width: 0.625rem; height: 0.625rem; }
.pn-mov__ico--in { background: var(--status-green-bg); color: var(--verde); }
.pn-mov__ico--out { background: var(--status-red-bg); color: var(--status-red); }
.pn-mov__tag { text-align: center; border-radius: var(--r-row); padding: 2px 0; font-size: var(--t6); font-weight: 600; }
.pn-mov__tag--in { background: var(--status-green-bg); color: var(--verde); }
.pn-mov__tag--out { background: var(--status-red-bg); color: var(--status-red); }
.pn-mov__nom { font-size: var(--t6); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-mov__n { font-size: var(--t6); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pn-mov__n span { font-weight: 500; color: var(--ink-muted); }
.pn-mov__n--in { color: var(--verde); }
.pn-mov__n--out { color: var(--status-red); }
.pn-mov__f { font-size: var(--t6); font-weight: 600; color: var(--ink-3); white-space: nowrap; }

.pn-rem { display: flex; flex-direction: column; }
.pn-rem__h, .pn-rem__f {
  display: grid; grid-template-columns: 3.25rem 4.75rem minmax(0, 1fr) 3.5rem 1.75rem 4.5rem;
  gap: 2px; align-items: center; padding: var(--sp-2) 2px;
}
/* Las seis columnas entran en el carril porque ninguna puede crecer: lo que no
   entra se recorta con puntos suspensivos, incluidas las marcas de estado. */
.pn-rem__h > *, .pn-rem__f > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-rem .badge { display: block; text-align: center; padding-left: var(--sp-1); padding-right: var(--sp-1); }
.pn-rem__h { border-radius: var(--r-row) var(--r-row) 0 0; background: var(--card); font-size: var(--t6); font-weight: 600; color: var(--ink-muted); }
.pn-rem__f { border-bottom: 1px solid var(--line); font-size: var(--t6); font-weight: 600; }
.pn-rem__f:last-child { border-bottom: 0; }
.pn-rem__q { color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-rem .r { text-align: right; }

/* ── El elegidor de dibujo del formulario ────────────────────────────── */
.form-group--full { grid-column: 1 / -1; }
.pn-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
  gap: var(--sp-1); max-height: min(10.75rem, 30vh); overflow-y: auto; padding: 2px;
}
.pn-picker__b {
  height: 2.625rem; padding: 0; display: grid; place-items: center; overflow: hidden;
  border: 2px solid transparent; border-radius: var(--r-row);
  background: var(--pn-bg, var(--card)); cursor: pointer;
}
.pn-picker__b:hover { filter: brightness(1.05); }
.pn-picker__b.is-on { border-color: var(--azul); }
.pn-picker__sel { margin: var(--sp-2) 0 0; font-size: var(--t5); font-weight: 600; color: var(--azul); }

/* ── Angosto ─────────────────────────────────────────────────────────── */
@media (max-width: 1400px) {
  .pn-cols { grid-template-columns: minmax(0, 1fr) 19rem; }
  .pn-rem__h, .pn-rem__f { grid-template-columns: 3.25rem 4rem minmax(0, 1fr) 3rem 1.5rem 4rem; }
}
@media (max-width: 1200px) {
  .pn-dos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .pn-cols { grid-template-columns: minmax(0, 1fr); }
  .pn-tabla { max-height: min(24.75rem, 40vh); }
}
@media (max-width: 900px) {
  .pn-datos .dato { grid-template-columns: minmax(0, 1fr); }
}
/* ═══════════════════════════════════════════════════════════════════════════
   OPERACIONES · las dos vistas del rediseño
   `.ot--split`  Trabajos en Obra: lista agrupada por cliente + detalle al lado.
   `.ot--filas`  Gestión Interna: filas que se abren en el lugar.
   Las dos salen del mismo motor (ot-vista.js) y reutilizan las piezas
   canónicas: page-title, tabs, badge, empty, dato, table, btn, menu. Lo de
   acá es sólo el armado de la pantalla.
   Alto: ninguna de las dos estira la sección. Cada panel desplaza su propio
   contenido, así la cabecera y las pestañas no se van nunca de la vista
   (contrato de R-15 / escalado del 23-09).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Vista partida ───────────────────────────────────────────────────── */
.ot--split { flex: 1 1 auto; min-height: 0; }
.ot-split {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: 0 var(--sp-5);
  border-top: 1px solid var(--line);
}
.ot-split__lista {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp-2) var(--sp-3) var(--sp-4) 0;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.ot-split__det {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp-4) var(--sp-1) var(--sp-4) 0;
  display: flex; flex-direction: column; gap: var(--sp-4);
}

/* Encabezado de grupo: se queda pegado arriba mientras se recorre el cliente. */
.ot-grupo {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  background: var(--panel);
  padding: var(--sp-3) var(--sp-2) var(--sp-1);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-1);
}
.ot-grupo__n { font-size: var(--t6); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-grupo__c { font-size: var(--t6); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ot-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "cod nom est" "meta meta pie";
  gap: var(--sp-1) var(--sp-2);
  align-items: center;
  padding: var(--sp-3); border-radius: var(--r-row);
  cursor: pointer; border: 1.5px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.ot-item:hover { background: var(--hover-soft); }
.ot-item.is-on { background: var(--avbg); border-color: var(--azul); }
.ot-item:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.ot-item__cod { grid-area: cod; font-family: var(--font-mono); font-size: var(--t6); font-weight: 600; color: var(--azul); white-space: nowrap; }
body.dark-mode .ot-item__cod { color: var(--azul-soft-text); }
.ot-item__nom { grid-area: nom; font-size: var(--t4); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-item__est { grid-area: est; justify-self: end; }
.ot-item__meta { grid-area: meta; font-size: var(--t5); font-weight: 500; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-item__pie { grid-area: pie; justify-self: end; display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--t6); font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.ot-item__ini { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--card); color: var(--ink-muted); display: grid; place-items: center; font-size: var(--t6); font-weight: 700; }

/* Detalle */
.ot-det__id { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.ot-det__t { margin: 0; font-size: var(--t1); font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; color: var(--ink); }
.ot-det__sub { font-size: var(--t4); font-weight: 500; color: var(--ink-muted); }
.ot-det__body { display: flex; flex-direction: column; gap: var(--sp-5); }
.ot-det__foot {
  position: sticky; bottom: 0;
  display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap;
  background: var(--panel); border-top: 1px solid var(--line);
  padding: var(--sp-3) 0 var(--sp-1); margin-top: auto;
}

/* Tira de cuatro datos de la cabecera del detalle. */
.ot-tira {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-row); overflow: hidden;
}
.ot-tira__c { background: var(--panel); padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ot-tira__l { font-size: var(--t6); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.ot-tira__v { font-size: var(--t4); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-tira__v--mal { color: var(--naranja); }

/* ── Vista de filas que se abren ─────────────────────────────────────── */
.ot--filas { flex: 1 1 auto; min-height: 0; }
.ot--filas .ot-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; gap: var(--sp-1); }

.ot-fx__head, .ot-fx__fila {
  display: grid; gap: 0 var(--sp-4); align-items: center;
}
.ot-fx__head {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--t6); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3);
  position: sticky; top: 0; z-index: 1; background: var(--panel);
}
.ot-fx { border: 1.5px solid transparent; border-radius: var(--r-row); overflow: hidden; }
.ot-fx.is-on { border-color: var(--line); background: var(--card); }
.ot-fx__fila {
  width: 100%; padding: var(--sp-3); cursor: pointer;
  font-size: var(--t4); font-weight: 500; color: var(--ink);
  border: 0; background: transparent; text-align: left; font-family: inherit;
}
.ot-fx__fila:hover { background: var(--hover-soft); }
.ot-fx__fila:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.ot-fx__fila > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-fx__t { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-fx__sub { display: block; font-size: var(--t6); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.ot-fx__marca { width: 0.625rem; height: 0.625rem; border-radius: 3px; justify-self: center; background: var(--ink-3); }
.ot-fx__marca--danger { background: var(--status-red); }
.ot-fx__marca--warn { background: var(--naranja); }
.ot-fx__marca--ok { background: var(--verde); }
.ot-fx__marca--info { background: var(--celeste); }
.ot-fx__marca--neutral { background: var(--dashed); }
.ot-fx__chev { justify-self: center; color: var(--ink-3); display: grid; place-items: center; transition: transform .2s ease; }
.ot-fx__chev svg { width: 0.875rem; height: 0.875rem; }
.ot-fx.is-on .ot-fx__chev { transform: rotate(180deg); }
.ot-fx__cuerpo {
  padding: var(--sp-1) var(--sp-4) var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
  border-top: 1px solid var(--line);
}
.ot-fx__cuerpo .ot-det__foot { position: static; background: transparent; }

/* La grilla de columnas la fija cada sección: acá no se adivina cuántas son. */
.ot--gi .ot-fx__head, .ot--gi .ot-fx__fila {
  grid-template-columns: 1.25rem 7.5rem minmax(0, 2.2fr) minmax(0, 1fr) 6rem 7rem 1.5rem;
}

/* ── Angosto ─────────────────────────────────────────────────────────── */
/* Por debajo de 1100 la lista deja de ser una columna y pasa arriba, acotada:
   el detalle es lo que se vino a leer y necesita el ancho entero. */
@media (max-width: 1100px) {
  .ot-split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .ot-split__lista {
    max-height: min(18rem, 35vh);
    border-right: 0; border-bottom: 1px solid var(--line);
    padding-right: 0;
  }
  .ot-split__det { padding-right: 0; }
  .ot--gi .ot-fx__head, .ot--gi .ot-fx__fila {
    grid-template-columns: 1.25rem 6.5rem minmax(0, 2fr) 6rem 6rem 1.5rem;
  }
  .ot--gi .ot-fx__head > span:nth-child(5),
  .ot--gi .ot-fx__fila > span:nth-child(5) { display: none; }  /* Responsable: está en la ficha */
}
@media (max-width: 900px) {
  .ot--gi .ot-fx__head { display: none; }
  .ot--gi .ot-fx__fila {
    grid-template-columns: 1.25rem minmax(0, 1fr) 1.5rem;
    gap: var(--sp-1) var(--sp-3);
  }
  .ot--gi .ot-fx__fila > span:nth-child(2) { grid-column: 2; }
  .ot--gi .ot-fx__fila > span:nth-child(4),
  .ot--gi .ot-fx__fila > span:nth-child(5),
  .ot--gi .ot-fx__fila > span:nth-child(6) { grid-column: 2; }
  .ot-fx__cuerpo { padding-left: var(--sp-3); }
}

/* ── Informes Técnicos: la misma fila que Gestión Interna, distinta de un
   vistazo. El semáforo es redondo y va por estado del informe, no cuadrado
   por prioridad de la tarea; y la fila lleva la cuenta de fotos, que es el
   dato que separa un informe de otro. ─────────────────────────────────── */
.ot--inf .ot-fx__head, .ot--inf .ot-fx__fila {
  grid-template-columns: 1.25rem 7.5rem minmax(0, 2.4fr) minmax(0, 1fr) 6rem 4.5rem 7rem 1.5rem;
}
.ot-fx__marca--dot { border-radius: 50%; }

.it-fotos { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.it-fotos svg { width: 0.875rem; height: 0.875rem; flex: none; }

/* Evidencias */
.it-evid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--sp-2); }
.it-evid__i { position: relative; margin: 0; border: 1px solid var(--line); border-radius: var(--r-row); overflow: hidden; background: var(--card); }
.it-evid__i img { display: block; width: 100%; height: 7rem; object-fit: cover; }
.it-evid__i figcaption { padding: var(--sp-1) var(--sp-2); font-size: var(--t6); font-weight: 600; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-evid__x {
  position: absolute; top: var(--sp-1); right: var(--sp-1);
  width: 1.375rem; height: 1.375rem; border: 0; border-radius: 50%;
  background: rgba(16, 20, 24, 0.65); color: #fff;
  font-family: inherit; font-size: var(--t6); font-weight: 600; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.it-evid__x:hover { background: var(--status-red); }
.it-subir { align-self: flex-start; cursor: pointer; }

@media (max-width: 1100px) {
  .ot--inf .ot-fx__head, .ot--inf .ot-fx__fila {
    grid-template-columns: 1.25rem 6.5rem minmax(0, 2fr) 6rem 4rem 6.5rem 1.5rem;
  }
  .ot--inf .ot-fx__head > span:nth-child(4),
  .ot--inf .ot-fx__fila > span:nth-child(4) { display: none; }  /* Responsable: está en el panel */
}
@media (max-width: 900px) {
  .ot--inf .ot-fx__head { display: none; }
  .ot--inf .ot-fx__fila {
    grid-template-columns: 1.25rem minmax(0, 1fr) 1.5rem;
    gap: var(--sp-1) var(--sp-3);
  }
  .ot--inf .ot-fx__fila > span:nth-child(n+2):nth-child(-n+7) { grid-column: 2; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CALENDARIO v2 · la vista de mes
   Lo que el rediseño cambia: el evento deja de ser un chip macizo de color y
   pasa a ser una línea de texto con un filete de su categoría. Con 17
   categorías, 4 chips llenos por celda eran una mancha; el filete conserva el
   color —que sigue distinguiendo la categoría— sin comerse la celda.
   El día elegido abre a la derecha, entero y sin recortar.
   ═══════════════════════════════════════════════════════════════════════════ */

.fc-mes { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-4); }
.fc-mes__cal { min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* Tantas filas como semanas tenga el mes: las 6 fijas dejaban una fila vacía
   en los meses de 5 semanas, que en notebook es alto tirado. */
.fc__grid--s4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.fc__grid--s5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.fc__grid--s6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }

.fc-cell__top { display: flex; align-items: center; gap: var(--sp-1); min-height: 1.625rem; }
.fc-cell__top .fc-cell__num { align-self: auto; margin-right: auto; }
.fc-cell__vence { width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--status-red); flex: none; }
.fc-cell__top .fc-cell__add { position: static; opacity: 0; }
.fc-cell:hover .fc-cell__top .fc-cell__add { opacity: 1; }
.fc-cell.is-sel { box-shadow: inset 0 0 0 2px var(--azul); }
body.dark-mode .fc-cell.is-sel { box-shadow: inset 0 0 0 2px var(--azul-hi); }

/* La línea de evento dentro de la celda. */
.fc-fila {
  display: flex; align-items: baseline; gap: var(--sp-2);
  width: 100%; text-align: left; min-width: 0;
  padding: 1px var(--sp-1) 1px var(--sp-2);
  border: 0; border-left: 2px solid var(--cal-c, var(--dashed));
  background: none; color: var(--ink); font-family: inherit;
  font-size: var(--t5); font-weight: 500; line-height: 1.45; cursor: pointer;
}
.fc-fila:hover { background: var(--hover-soft); }
.fc-fila__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-fila__n { flex: none; font-size: var(--t6); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fc-cell.is-other .fc-fila { color: var(--ink-3); }

/* ── Panel del día elegido ───────────────────────────────────────────── */
.fc-panel {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  border: 1.5px solid var(--line); border-radius: var(--r-card);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.fc-panel__head { display: flex; flex-direction: column; gap: 2px; }
.fc-panel__dow { font-size: var(--t6); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.fc-panel__fecha { font-size: var(--t3); font-weight: 700; letter-spacing: -0.3px; color: var(--ink); }
.fc-panel__n { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.fc-panel__vacio { margin: 0; padding: var(--sp-5) 0; text-align: center; font-size: var(--t4); font-weight: 500; color: var(--ink-3); border-top: 1px solid var(--line); }
.fc-panel__g { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.fc-panel__gh {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  font-size: var(--t6); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); padding-bottom: var(--sp-1);
}
.fc-panel__i {
  display: flex; align-items: baseline; gap: var(--sp-2);
  width: 100%; text-align: left; padding: var(--sp-1) 0;
  border: 0; background: none; font-family: inherit; cursor: pointer;
}
.fc-panel__i:hover .fc-panel__t { color: var(--azul); }
body.dark-mode .fc-panel__i:hover .fc-panel__t { color: var(--azul-hi); }
.fc-panel__t { flex: 1; min-width: 0; font-size: var(--t4); font-weight: 500; line-height: 1.4; color: var(--ink); }
.fc-panel__d { flex: none; font-size: var(--t6); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fc-panel__v { flex: none; font-size: var(--t6); font-weight: 600; color: var(--status-red); }

/* ── Angosto ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .fc-mes { grid-template-columns: minmax(0, 1fr); }
  /* El panel pasa abajo y deja de competir por el ancho con la grilla. */
  .fc-panel { max-height: min(20rem, 40vh); }
}

/* ═══ Importes que no se pierden (28/09/2026) ═══════════════════════════
   Un importe que no se puede leer exacto se marca en el campo y bloquea el
   guardado (js/dinero.js). La factura de Cuentas Corrientes muestra el
   desglose por alícuota y la cuenta "neto + IVA + … = total" a la vista. */
.finput.finput--mal,
.ui .finput.finput--mal { border-color: var(--status-red); box-shadow: 0 0 0 2px var(--status-red-bg); }

.cc-alics { gap: var(--sp-2); }
.fdes-row.cc-alic,
.fmodal--full .fdes-row.cc-alic { grid-template-columns: 8.5rem minmax(8rem, 1fr) minmax(7rem, 1fr) minmax(7rem, 1fr) 1.875rem; }
.fdes-row--head.cc-alic span:nth-child(n+2):not(:last-child) { text-align: right; }
.cc-alic__calc { text-align: right; font-size: var(--t4); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; padding-right: var(--sp-2); }
.cc-alics > .fbtn--dashed { align-self: flex-start; }
.cc-unico { max-width: 20rem; }
.cc-ecuacion {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill); background: var(--card);
  font-size: var(--t5); font-weight: 600; color: var(--ink-muted);
  font-variant-numeric: tabular-nums; text-align: right; line-height: 1.5;
}
.cc-ecuacion span { white-space: nowrap; }
.cc-aviso-viejo { color: var(--status-red); font-weight: 600; }
/* Cinco columnas angostas entran en cualquier ancho: la fila de alícuotas no
   necesita el piso de 51rem de la grilla de desagregación de Finanzas. */
.fmodal--full .fdes-row.cc-alic { min-width: 0; }
@media (max-width: 900px) {
  .fdes-row.cc-alic,
  .fmodal--full .fdes-row.cc-alic { grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 1.875rem; }
}


/* ══════════════════════════════════════════════════════════════════
   COMERCIAL (06/10/2026) — siete pantallas sobre la familia .org + .cmp
   Capturas del usuario en assets/COMERCIAL. Reemplaza al módulo
   Presupuestos (.hz-presu / .hz-pw, eliminado). La raíz lleva
   `org cmp com`: lo compartido (KPI con icono, columnas con carril,
   ficha del carril, alertas, dona, circuito) es de .org/.cmp; acá sólo
   lo que las capturas traen y Compras no tenía.
   ══════════════════════════════════════════════════════════════════ */

/* ── Cabecera, acciones y filtros ── */
.com-per { flex: none; }
.com .page-head__acc { flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
.ui .btn.com-btn-suave { background: var(--avbg); border-color: transparent; color: var(--azul); }
.ui .btn.com-btn-suave:hover { border-color: var(--celeste); }
body.dark-mode .ui .btn.com-btn-suave { color: var(--link); }
.com-acc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.com-acc .btn { min-height: 2.5rem; padding-left: var(--sp-4); padding-right: var(--sp-4); }
.com-acc .btn svg { width: 1.125rem; height: 1.125rem; }
.com-acc__der { margin-left: auto; }
.com-acc__der .btn svg { width: 0.875rem; height: 0.875rem; }
.com-filters .btn.is-on { border-color: var(--azul); color: var(--azul); }
.com-filters .btn svg { width: 1rem; height: 1rem; }
.com-orden { margin-left: auto; min-width: 10rem; }
.com-filters-mas { margin-top: calc(-1 * var(--sp-3)); }
.com-kpi.is-on { border-color: var(--azul); }

/* Paginador numerado */
.com-pager { gap: var(--sp-1); }
.com-pag { min-width: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui .btn.com-pag.is-on { background: var(--azul); border-color: var(--azul); color: #fff; }
body.dark-mode .ui .btn.com-pag.is-on { background: var(--azul-hi); color: #06232E; }

/* Enlaces de las cards ("Ver todas", "Editar") */
.com-ver {
  display: inline-flex; align-items: center; gap: var(--sp-1); flex: none;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); border: none; cursor: pointer;
  background: var(--avbg); color: var(--azul);
  font-family: var(--font-family); font-size: var(--t5); font-weight: 600;
}
.com-ver:hover { background: var(--status-blue-bg); }
.com-ver svg { width: 0.875rem; height: 0.875rem; }
body.dark-mode .com-ver { color: var(--link); }

/* ── Celdas ── */
.com-ava {
  width: 1.75rem; height: 1.75rem; flex: none; border-radius: 0.4375rem;
  display: inline-grid; place-items: center;
  background: var(--avbg); color: var(--azul); font-size: var(--t5); font-weight: 800;
}
.com-ava--g { width: 3rem; height: 3rem; border-radius: 50%; font-size: var(--t2); }
body.dark-mode .com-ava { color: var(--azul-hi); }
.com-cli { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.com-cli b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-fh { display: flex; flex-direction: column; line-height: 1.25; }
.com-fh b { font-weight: 500; color: var(--link); }
.com-fh span { font-size: var(--t5); color: var(--ink-muted); }
.com-adj { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.com-adj svg { width: 0.875rem; height: 0.875rem; }
.com-desc2 { white-space: normal; max-width: 13rem; line-height: 1.3; }
.com .table tbody tr { cursor: pointer; }
.com .table tbody tr.is-sel > td:first-child { box-shadow: inset 3px 0 0 var(--azul); }

/* ── Ficha del carril ── */
/* Cuatro sub-pestañas en un carril de 20rem: se acomodan en dos renglones
   antes que cortarse (las capturas las muestran enteras). */
.ui .com-det .tabs--sub { flex-wrap: wrap; overflow: visible; border-radius: var(--r-row); }
.ui .com-det .tabs--sub .tabs__b { font-size: var(--t4); padding: 0 var(--sp-2); }
.com-det .card__head { align-items: center; }
.com-det__id { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.com-det__id--ava { flex-direction: row; align-items: center; gap: var(--sp-3); }
.com-det__id--ava > div { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.com-det__n { font-size: var(--t2); font-weight: 700; color: var(--ink); line-height: 1.25; }
.com-det__t { font-size: var(--t2); font-weight: 600; color: var(--ink); line-height: 1.3; }
.com-det__cod { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.com-det__cod--g { justify-content: space-between; }
.com-det__ir { display: flex; justify-content: flex-start; padding-top: var(--sp-1); }
.com-det__pie { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.com-det__pie .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
.com-det .dato { align-items: baseline; }
.com-det .dato--col .dato__v { white-space: pre-wrap; }
.com-sub { display: block; font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.com-prox { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.com-prox svg, .com-prox__f svg { width: 0.875rem; height: 0.875rem; color: var(--azul); }
.com-prox__f { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--ink-muted); }
.com-nota { display: flex; flex-direction: column; gap: var(--sp-1); }
.com-nota p { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-row); background: var(--card); font-size: var(--t5); font-weight: 500; color: var(--ink); }
.com-notas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.com-notas li { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-row); background: var(--card); }
.com-notas p { margin: 0 0 var(--sp-1); font-size: var(--t4); font-weight: 500; white-space: pre-wrap; }
.com-notas span { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); }
.com-aviso { display: flex; gap: var(--sp-2); margin: 0; font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.com-aviso svg { width: 1rem; height: 1rem; flex: none; color: var(--celeste); }
.com-chips { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }

/* Alertas del carril con número y flecha (las de las capturas) */
.com-alerta { grid-template-columns: auto minmax(0, 1fr) auto; }
.com-alerta > svg { width: 1rem; height: 1rem; color: var(--ink-muted); }
.com-alerta__ico {
  width: 2rem; height: 2rem; border-radius: 0.5rem; flex: none;
  display: inline-grid; place-items: center; color: #fff; background: var(--cmp-c, var(--celeste));
}
.com-alerta__ico svg { width: 1.0625rem; height: 1.0625rem; }
.com-alerta__n { color: var(--cmp-c, var(--ink)); font-weight: 800; }
.com-alerta .cmp-alerta__txt b, .com-alerta .cmp-alerta__txt span { white-space: normal; }

/* Documentos adjuntos */
.com-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--sp-2); }
.com-doc {
  display: flex; align-items: center; gap: var(--sp-2); min-width: 0; text-align: left;
  padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-row);
  background: var(--panel); cursor: pointer; font-family: var(--font-family);
}
.com-doc:hover { border-color: var(--ink-3); }
.com-doc__ico { width: 1.75rem; height: 1.75rem; flex: none; display: grid; place-items: center; border-radius: 0.375rem; color: #fff; background: var(--ink-3); }
.com-doc__ico svg { width: 1rem; height: 1rem; }
.com-doc__ico--pdf { background: var(--status-red); }
.com-doc__ico--xls { background: var(--verde); }
.com-doc__txt { display: flex; flex-direction: column; min-width: 0; }
.com-doc__txt b { font-size: var(--t6); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-doc__txt span { font-size: var(--t6); font-weight: 500; color: var(--ink-muted); }

/* Listas del carril (plantas, contactos, oportunidades) */
.com-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.com-items li { display: flex; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
.com-items li > span:not(.com-items__ico), .com-items__b > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.com-items b { font-size: var(--t4); font-weight: 600; color: var(--ink); }
.com-items li span span { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.com-items__ico { width: 1.75rem; height: 1.75rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--avbg); color: var(--azul); }
.com-items__ico svg { width: 0.9375rem; height: 0.9375rem; }
.com-items__b {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) 0; background: none; border: none; text-align: left; cursor: pointer; font-family: var(--font-family);
}
.com-items__b:hover b { color: var(--azul); }

/* ── Presupuesto: detalle económico y observaciones ── */
.com-eco { display: flex; flex-direction: column; gap: 2px; }
.com-eco__f { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) var(--sp-2); font-size: var(--t4); font-weight: 500; border-radius: 0.375rem; }
.com-eco__f span { color: var(--ink-muted); }
.com-eco__f b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.com-eco__f--sub { border-top: 1px solid var(--line); border-radius: 0; margin-top: var(--sp-1); padding-top: var(--sp-2); }
.com-eco__f--margen { background: var(--status-green-bg); }
.com-eco__f--margen b { color: var(--verde); }
.com-eco__f--total { background: var(--status-blue-bg); }
.com-eco__f--total span, .com-eco__f--total b { color: var(--ink); font-weight: 800; }
.com-obs { display: flex; gap: var(--sp-2); }
.com-obs svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--celeste); }
.com-obs p { margin: 0; font-size: var(--t5); font-weight: 500; color: var(--ink-muted); line-height: 1.45; white-space: pre-wrap; }

/* Versiones de la oferta */
.com-vers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.com-vers li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; font-size: var(--t5); font-weight: 500; }
.com-vers__f { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.com-vers__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.com-vers__a { color: var(--ink-muted); }

/* Interacciones del cliente */
.com-inter { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.com-inter li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; }
.com-inter__ico { width: 2rem; height: 2rem; border-radius: 0.5rem; display: grid; place-items: center; color: #fff; background: var(--cmp-c, var(--celeste)); }
.com-inter__ico svg { width: 1rem; height: 1rem; }
.com-inter__txt { display: flex; flex-direction: column; min-width: 0; }
.com-inter__txt b { font-size: var(--t4); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-inter__txt span, .com-inter__f span { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-inter__f { display: flex; flex-direction: column; align-items: flex-end; }

/* ── Visitas ── */
.com-tabsfil { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.com-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.com-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.com-lista__i {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--sp-3); align-items: center;
  padding: var(--sp-2) 0; border: none; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer;
  font-family: var(--font-family);
}
.com-lista li:last-child .com-lista__i { border-bottom: none; }
.com-lista__i:hover .com-lista__t b { color: var(--azul); }
.com-lista__i > svg { width: 0.875rem; height: 0.875rem; color: var(--ink-muted); }
.com-lista__f { display: flex; flex-direction: column; min-width: 2.75rem; font-variant-numeric: tabular-nums; }
.com-lista__f b { font-size: var(--t4); font-weight: 700; color: var(--ink); }
.com-lista__f span { font-size: var(--t6); font-weight: 500; color: var(--ink-muted); }
.com-lista__t { display: flex; flex-direction: column; min-width: 0; }
.com-lista__t b { font-size: var(--t4); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-lista__t span { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.com-lista__hace { font-size: var(--t5); font-weight: 600; color: var(--status-red); white-space: nowrap; }

.com-check { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }
.com-check li { display: flex; align-items: center; gap: var(--sp-2); }
.com-check li.is-ok { color: var(--ink); }
.com-check__b {
  width: 1rem; height: 1rem; flex: none; display: inline-grid; place-items: center;
  border-radius: 0.25rem; border: 1.5px solid var(--line); color: #fff;
}
.com-check__b.is-ok, .com-check li.is-ok .com-check__b { background: var(--azul); border-color: var(--azul); }
.com-check__b svg { width: 0.75rem; height: 0.75rem; }
.com-check__b svg circle { display: none; }
.com-rec { display: flex; flex-direction: column; gap: var(--sp-1); }
.com-rec ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.com-rec li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; font-size: var(--t5); font-weight: 500; }

.com-fotos__h { display: flex; justify-content: space-between; align-items: center; }
.com-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.com-fotos--todas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.com-foto { padding: 0; border: none; border-radius: var(--r-row); overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; background: var(--card); }
.com-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Calendario de visitas */
.com-card--cal .card__body { padding-top: 0; }
.com-cal__nav { display: inline-flex; gap: var(--sp-1); }
.com-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-row); overflow: hidden; }
.com-cal__h { background: var(--card); padding: var(--sp-1) var(--sp-2); font-size: var(--t6); font-weight: 600; color: var(--ink-muted); }
.com-cal__d { background: var(--panel); min-height: 5.5rem; padding: var(--sp-1); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.com-cal__d.is-fuera { background: var(--card); }
.com-cal__d.is-hoy .com-cal__n { background: var(--azul); color: #fff; }
.com-cal__n { align-self: flex-start; min-width: 1.375rem; padding: 0 var(--sp-1); border-radius: var(--r-pill); font-size: var(--t6); font-weight: 700; color: var(--ink-muted); text-align: center; }
.com-cal__v {
  width: 100%; padding: 2px var(--sp-1); border: none; border-left: 3px solid var(--celeste); border-radius: 0.25rem;
  background: var(--avbg); color: var(--ink); text-align: left; cursor: pointer;
  font-family: var(--font-family); font-size: var(--t6); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.com-cal__v i { font-style: normal; color: var(--ink-muted); }
.com-cal__v--realizada { border-left-color: var(--verde); }
.com-cal__v--pendiente_inf { border-left-color: var(--status-red); }
.com-cal__v--cancelada { opacity: .55; text-decoration: line-through; }
.com-cal__v.is-on { outline: 2px solid var(--azul); outline-offset: -1px; }
.com-cal__mas { font-size: var(--t6); font-weight: 600; color: var(--ink-muted); }

/* ── Reportes ── */
.com-rep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-4); align-items: stretch; }
.com-rep > .card { min-width: 0; }
.com-rep__evo { grid-column: span 2; }

.com-embudo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.com-embudo__f { display: grid; grid-template-columns: minmax(0, 1fr) 2rem 2.75rem; gap: var(--sp-2); align-items: center; font-variant-numeric: tabular-nums; }
.com-embudo__f > b { font-size: var(--t4); font-weight: 800; text-align: right; }
.com-embudo__f > span:last-child { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); text-align: right; }
.com-embudo__b {
  justify-self: center; width: var(--ancho); height: 2.125rem; display: grid; place-items: center;
  clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%);
  color: #fff; font-size: var(--t5); font-weight: 700; background: var(--azul);
}
.com-embudo__b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 var(--sp-3); }
.com-embudo__b--1 { background: #005F7D; }
.com-embudo__b--2 { background: #0A6C8C; }
.com-embudo__b--3 { background: #17769A; }
.com-embudo__b--4 { background: #0A7A3B; }

.com-barras {
  display: flex; align-items: flex-end; gap: var(--sp-3); height: 12.5rem; padding-top: var(--sp-2);
  background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), var(--line) calc(25% - 1px), var(--line) 25%);
}
.com-barras__c { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--sp-1); }
.com-barras__v { font-size: var(--t6); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.com-barras__b { width: min(2.25rem, 70%); border-radius: 0.25rem 0.25rem 0 0; background: linear-gradient(var(--link), var(--celeste)); }
.com-barras__l { width: 100%; text-align: center; font-size: var(--t6); font-weight: 600; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1rem; }

.com-dona { flex-direction: row; align-items: center; }
.com-dona .cmp-ley__i { grid-template-columns: 0.625rem minmax(0, 1fr) auto; }

/* Resumen de tablero (no es la lista de la pantalla): filas en grilla. */
.com-mini { display: flex; flex-direction: column; font-size: var(--t5); font-weight: 500; color: var(--ink); }
.com-mini__f {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1.4fr) minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--sp-2); align-items: center;
  padding: var(--sp-2); border: none; border-bottom: 1px solid var(--line); background: none; text-align: left;
  font-family: var(--font-family); font-size: var(--t5); font-weight: 500; color: var(--ink); cursor: pointer;
}
.com-mini__f:last-child { border-bottom: none; }
.com-mini__f:hover:not(.com-mini__h) { background: var(--hover-soft); }
.com-mini__f b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-mini__h { cursor: default; font-size: var(--t6); font-weight: 600; color: var(--ink-muted); }
.com-mini .r { text-align: right; font-variant-numeric: tabular-nums; }
.com-mini tbody tr { cursor: pointer; }

.com-cierres { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.com-cierre {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: var(--sp-3); align-items: center;
  padding: var(--sp-1) 0; border: none; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; font-family: var(--font-family);
}
.com-cierres li:last-child .com-cierre { border-bottom: none; }
.com-cierre__c b { font-size: var(--t4); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.com-cierre__m { font-size: var(--t5); font-weight: 600; font-variant-numeric: tabular-nums; }
.com-cierre__e { font-size: var(--t6); font-weight: 500; color: var(--ink-muted); white-space: nowrap; }
.com-fecha { width: 2.5rem; display: flex; flex-direction: column; align-items: center; padding: 2px 0; border-radius: 0.375rem; background: var(--status-red-bg); color: var(--status-red); line-height: 1.1; }
.com-fecha b { font-size: var(--t4); font-weight: 800; }
.com-fecha span { font-size: var(--t6); font-weight: 700; }

.com-ley { display: inline-flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--t6); font-weight: 600; color: var(--ink-muted); }
.com-ley span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.com-ley__bar { width: 0.75rem; height: 0.5rem; border-radius: 2px; background: var(--celeste); display: inline-block; }
.com-ley__bar--o { background: var(--azul); }
.com-ley__lin { width: 0.875rem; height: 2px; background: var(--azul); display: inline-block; }

/* Alto fijo y escala "meet": la letra del eje no crece con el ancho de la card. */
.com-evo { width: 100%; height: 13rem; display: block; }
.com-evo__bar { fill: var(--celeste); opacity: .75; }
.com-evo__lin { fill: none; stroke: var(--azul); stroke-width: 2; }
.com-evo__pt { fill: var(--azul); }
.com-evo__g { stroke: var(--line); stroke-width: 1; }
.com-evo__t { fill: var(--ink-muted); font-family: var(--font-family); font-size: 10px; font-weight: 500; }
body.dark-mode .com-evo__lin { stroke: var(--azul-hi); }
body.dark-mode .com-evo__pt { fill: var(--azul-hi); }

.com-sect { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.com-sect li { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) 2rem 2.75rem; gap: var(--sp-2); align-items: center; font-size: var(--t5); font-weight: 500; }
.com-sect__l { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-sect__riel { height: 0.625rem; border-radius: var(--r-pill); background: var(--card); overflow: hidden; }
.com-sect__b { display: block; height: 100%; border-radius: var(--r-pill); background: var(--celeste); }
.com-sect li > b { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.com-sect__t { text-align: right; font-weight: 700; color: var(--azul); font-variant-numeric: tabular-nums; }
body.dark-mode .com-sect__t { color: var(--azul-hi); }

/* ── Formularios (la hoja de carga es la de createModal) ── */
.com-fchecks { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-2); }
.com-fcheck { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--t4); font-weight: 500; color: var(--ink); cursor: pointer; }
.com-fcheck input { width: 1rem; height: 1rem; accent-color: var(--azul); flex: none; }
.com-nuevo { margin-top: var(--sp-2); }
.com-import p { margin: var(--sp-1) 0; }
.com-import__mal { color: var(--status-red); font-size: var(--t5); font-weight: 500; }

/* ── Cortes ── */
@media (max-width: 1500px) {
  .com-rep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .com-rep__evo { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .com .org-kpis--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .com-dos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .com .org-kpis--6 { grid-template-columns: minmax(0, 1fr); }
  .com-rep { grid-template-columns: minmax(0, 1fr); }
  .com-orden { margin-left: 0; }
  .com-acc__der { margin-left: 0; }
  .com-cal__d { min-height: 3.5rem; }
  .com-cal__v i { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   CALIDAD (07/10/2026) — reemplaza a Marketing y Sistemas
   Cinco pantallas sobre el motor de js/views/calidad.js. La raíz lleva
   `org cmp com cal`: todo lo de Comercial vale (KPI, carril, ficha,
   alertas, filtros, paginador); acá sólo lo que Calidad agrega:
   puntajes 1-5, la escala del formulario, avisos y listas de personal.
   Encuestas a clientes usa la grilla y la ficha de Cuentas Corrientes.
   ══════════════════════════════════════════════════════════════════ */

.cal .t-mut, .cal-muted { color: var(--ink-muted); font-weight: 500; }
small.cal-muted { font-size: var(--t5); }

/* Celda de dos renglones: nombre + dato chico */
.cal-cli__t { display: inline-flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cal-cli__t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18rem; }
.cal-cli__t small { font-size: var(--t5); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18rem; }

/* Nota 4,5 / 5 con su estrella */
.cal-nota-v { display: inline-flex; align-items: baseline; gap: 0.1875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-nota-v svg { width: 0.875rem; height: 0.875rem; align-self: center; color: var(--naranja); fill: currentColor; stroke: none; }
.cal-nota-v b { font-weight: 700; color: var(--ink); }
.cal-nota-v small { font-size: var(--t5); color: var(--ink-muted); }

/* Puntajes por criterio (ficha del carril y de la encuesta) */
.cal-crits, .cal-temas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.cal-crit { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 1.25rem; align-items: center; gap: var(--sp-2); font-size: var(--t4); }
.cal-crit__l { color: var(--ink); min-width: 0; line-height: 1.25; }
.cal-crit__n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-crit__bar { display: block; height: 0.375rem; border-radius: var(--r-pill); background: var(--card); overflow: hidden; }
.cal-crit__bar i { display: block; height: 100%; border-radius: var(--r-pill); }
.cal-crit__i--ok { background: var(--verde); }
.cal-crit__i--warn { background: var(--naranja); }
.cal-crit__i--danger { background: var(--status-red); }
.cal-crit__i--na { background: transparent; }

/* Cumplimiento por tema (plan de capacitación) */
.cal-temas li { display: grid; grid-template-columns: minmax(0, 1fr) 4rem 2.5rem; grid-template-rows: auto auto; align-items: center; column-gap: var(--sp-2); font-size: var(--t4); }
.cal-temas__l { grid-column: 1 / -1; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-temas .cal-crit__bar { grid-column: 1 / 2; }
.cal-temas b { text-align: right; font-variant-numeric: tabular-nums; }
.cal-temas small { text-align: right; font-size: var(--t5); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* Aviso dentro de la ficha (bloqueo de OC, faltantes) */
.cal-aviso {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-row);
  background: var(--status-blue-bg); color: var(--ink); font-size: var(--t4); line-height: 1.35;
}
.cal-aviso svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.0625rem; color: var(--azul); }
.cal-aviso--danger { background: var(--status-red-bg, rgba(196, 85, 77, 0.12)); }
.cal-aviso--danger svg { color: var(--status-red); }
body.dark-mode .cal-aviso svg { color: var(--link); }
body.dark-mode .cal-aviso--danger svg { color: var(--status-red); }

/* Personal (planificados / con el puesto) */
.cal-pers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.cal-pers li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t4); }
.cal-pers li > span:not(.com-ava):not(.badge) { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; color: var(--ink); line-height: 1.25; }
.cal-pers small { font-size: var(--t5); font-weight: 500; color: var(--ink-muted); }

.cal-docs-n { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-docs-n svg { width: 0.9375rem; height: 0.9375rem; color: var(--status-red); }

/* Botón de la fecha anual fija en la cabecera */
.ui .btn.cal-fecha svg { width: 1rem; height: 1rem; }
.ui .btn.cal-fecha:disabled { opacity: 1; cursor: default; }

/* Encuestas: la ficha de Cuentas Corrientes con su franja */
.cal .cc-ficha { margin: 0; }
.cal .cc-card__badge .badge { white-space: nowrap; }

/* ── Formularios: escala 1-5 por criterio ── */
.cal-escala { display: flex; flex-direction: column; gap: var(--sp-2); }
.cal-escala__f {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--line);
}
.cal-escala__l { font-size: var(--t4); font-weight: 600; color: var(--ink); line-height: 1.3; }
.cal-escala__b { display: inline-flex; gap: var(--sp-1); }
.cal-escala__b label { position: relative; cursor: pointer; }
.cal-escala__b input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cal-escala__b span {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg-card, #fff);
  font-size: var(--t4); font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums;
  transition: background .12s, border-color .12s, color .12s;
}
.cal-escala__b label:hover span { border-color: var(--azul); color: var(--azul); }
.cal-escala__b input:checked + span { background: var(--azul); border-color: var(--azul); color: #fff; }
.cal-escala__b input:focus-visible + span { outline: 2px solid var(--celeste); outline-offset: 2px; }
body.dark-mode .cal-escala__b span { background: var(--card); }
body.dark-mode .cal-escala__b input:checked + span { background: var(--azul-hi); border-color: var(--azul-hi); color: #06232E; }

.cal-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--sp-2) var(--sp-4); max-height: 16rem; overflow: auto; padding: var(--sp-1) 0; }
.cal-checks .com-fcheck span { line-height: 1.25; }

@media (max-width: 40rem) {
  .cal-escala__f { grid-template-columns: 1fr; gap: var(--sp-2); }
  .cal-escala__b span { width: 2.5rem; height: 2.5rem; }
}