* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* ===== AZUL de marca (Contabilidad) =====
     WCAG AA con texto blanco encima (5.17:1) y como texto sobre blanco. */
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  /* 🎨 ACENTO DE LA APP ACTIVA (refresco UI 01/11/2026): se define acá
     (azul = Contabilidad) y cada `body[data-app="…"]` lo cambia. Así los
     botones secundarios, los focos y los encabezados usan SIEMPRE el color
     de su aplicación, sin reglas sueltas por módulo. */
  --acento-app: var(--primary);
  /* Color del TEXTO/�CONO sobre un relleno del acento. En claro es blanco;
     en oscuro el acento se aclara y el texto pasa a casi negro (si no,
     blanco sobre celeste/ámbar no se lee). */
  --sobre-acento: #ffffff;
  --bg: #f4f7fb;
  --surface: #ffffff;
  --text: #1e293b;
  /* Fondos de fila resaltada (se usan en JS inline; ver bloque oscuro) */
  --fila-raiz: #f8fafc;
  --fila-inter: #fffbeb;
  --fila-activo: #eff6ff;
  --text-light: #64748b;
  --border: #e2e8f0;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;
  /* ===== 🟢 BANCOS — ESMERALDA serena =====
     (antes verde bosque #15803d; refresco UI 01/11/2026: mismo verde, más
     limpio y luminoso). Elige `#0e7c52`: 5.22:1 con texto blanco.
     Su par en el bloque oscuro es OBLIGATORIO (AGENTS.md). */
  --verde-banco: #0e7c52;
  --verde-banco-suave: rgba(14, 124, 82, 0.07);
  --verde-banco-texto: #0b5c3e;
  --verde-banco-relleno: #d7f0e4;
  /* Tinte del encabezado (degradado suave, ya sin brillo metálico) */
  --banco-inicio: #0e7c52;
  --banco-medio: #2f9e70;
  --banco-fin: #e6f4ec;
  --banco-texto: #06281a;
  --banco-brillo: rgba(255, 255, 255, 0.9);
  --banco-sombra: rgba(14, 124, 82, 0.25);
  /* ===== 🟠 CUENTAS POR PAGAR — BRONCE cálido =====
     (antes marrón sienna #a0522d, que a Diego no le gustaba). Bronce
     `#b45309`: 5.02:1 con texto blanco — cálido y elegante, sin el aire
     de "alarma" de un naranja saturado. Su par oscuro es OBLIGATORIO. */
  --marron-cxp: #b45309;
  --marron-cxp-suave: rgba(180, 83, 9, 0.07);
  --marron-cxp-texto: #8a4308;
  --marron-cxp-relleno: #fdebd2;
  --cxp-inicio: #b45309;
  --cxp-medio: #d9883f;
  --cxp-fin: #fdf1e2;
  --cxp-texto: #3b1d08;
  --cxp-brillo: rgba(255, 255, 255, 0.9);
  --cxp-sombra: rgba(180, 83, 9, 0.25);
  /* ===== 🔵 PLANILLAS — CELESTE profundo =====
     (la identidad celeste se queda; el degradado metálico a plateado se
     cambia por un celeste sereno). `#0a7ba8`: 4.76:1 con blanco.
     Su par oscuro es OBLIGATORIO. */
  --planilla-inicio: #0a76a1;
  --planilla-medio: #3aa8d4;
  --planilla-fin: #e6f2f8;
  --planilla-borde: #c3d7e3;
  --planilla-texto: #0b2733;
  --planilla-titulo: #0a76a1;
  --planilla-brillo: rgba(255, 255, 255, 0.9);
  --planilla-sombra: rgba(10, 123, 168, 0.25);
  /* ===== Colores semánticos (dashboard y badges) ===== */
  --activo: #2563eb;
  --pasivo: #dc2626;
  --capital: #7c3aed;
  --ingreso: #15803d;
  --egreso: #c2410c;
  /* ANCHO ÚNICO de los campos de fecha (regla de Diego 28/10/2026):
     DD/MM/AAAA son 10 caracteres; 92px entra completo y deja el campo
     angosto. Se cambia SOLO acá y todos los calendarios de la app quedan
     iguales (formularios y filtros). */
  --ancho-fecha: 92px;
  /* � ALTO ÚNICO DE TODOS LOS CAMPOS (regla de Diego 02/11/2026):
     todo input/select de cualquier formulario de la app mide esto.
     Se cambia SOLO acá y aplica a toda la aplicación. */
  --alto-campo: 34px;
}

body {
  font-family: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system,
    'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
}

/* Selección de texto con el color de la app (detalle de acabado) */
::selection {
  background: color-mix(in srgb, var(--acento-app) 24%, transparent);
}

/* HEADER */
.header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 6px 24px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* la 2ª barra (secciones) ocupa su propia línea */
  gap: 0 12px;
  min-height: 64px;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Bloque derecho: 🌙 · � compañía · 📅 período (siempre a la derecha de la
   barra de apps; si no cabe, baja COMPLETO a la siguiente línea) */
.header-der {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

/* ===== ACENTO DE LA APP ACTIVA (refresco UI 01/11/2026) =====
   `--acento-app` se define en `:root` (azul) y cada app lo cambia en TODO
   el documento (no solo en `.header`), así los botones secundarios, los
   focos y los encabezados de ventana usan el color de su app. */
body[data-app="bancos"] {
  --acento-app: var(--verde-banco);
}

body[data-app="cxp"] {
  --acento-app: var(--marron-cxp);
}

body[data-app="nomina"] {
  --acento-app: var(--planilla-inicio);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-logo-img {
  height: 48px;
  width: auto;
  border-radius: 12px;
  background: #fff;
  padding: 2px 5px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.header-logo h1 {
  font-size: 1.4rem;
  font-weight: 700;
}

.accent {
  color: var(--primary);
}

.logo-icon {
  font-size: 1.5rem;
}

.nav {
  display: flex;
  gap: 4px;
  flex: 1;
}

.nav-btn {
  background: none;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text-light);
  transition: all 0.2s;
}

.nav-btn:hover {
  background: var(--bg);
  color: var(--text);
}

.nav-btn.active {
  background: var(--primary);
  color: white;
  font-weight: 600;
}

/* ===== BARRA 1: APLICACIONES (siempre visible) ===== */
.nav-apps {
  flex: 1 1 auto;            /* empuja 🌙 · � · 📅 hasta la DERECHA */
  gap: 6px;
}

.nav-app {
  font-weight: 600;
  color: var(--text);
}

.nav-app.active {
  background: var(--acento-app);   /* azul en Contabilidad, verde en Bancos */
  color: var(--sobre-acento);
}

/* Cada dropdown se abre debajo de SU botón (no de la barra entera) */
.nav-apps .nav-dropdown,
.nav-sub .nav-dropdown {
  position: relative;
}

/* ===== BARRA 2: SECCIONES de la app activa ===== */
.nav-sub {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  margin: 6px -24px 0;
  padding: 5px 24px;
}

.nav-sub-btn {
  font-size: 0.86rem;
  padding: 6px 12px;
}

.nav-sub .nav-btn.active {
  background: var(--acento-app);
  color: var(--sobre-acento);
  font-weight: 600;
}

/* La 2ª barra también hereda el acento de la app (borde de pestaña activa) */
.nav-sub .nav-dd-btn.active {
  background: var(--acento-app);
  color: var(--sobre-acento);
}

/* Botón Admin (⚙�): engranaje más grande que el texto del resto de pestañas */
.nav-btn[data-section="admin"] {
  font-size: 1.35rem;
  padding: 6px 14px;
  line-height: 1;
}

/* Submenús de navegación (Catálogos ▾ / ⚙� ▾) */
.nav-dropdown {
  position: relative;
}

.nav-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 245px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  padding: 6px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Botón con submenú: texto y flecha en línea, sin encimarse */
.nav-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.nav-dd-btn .flecha {
  font-size: 0.72em;
  line-height: 1;
}

/* Separador dentro del menú ⚙� (gestión / respaldos) */
.nav-dd-sep {
  border-top: 1px solid var(--border);
  margin: 6px 4px;
}

/* Título de grupo dentro de un menú (ej: Catálogos / Movimientos / Reportes
   dentro de "Contabilidad ▾"). Solo etiqueta: NO es un botón. */
.nav-dd-title {
  display: block;
  padding: 8px 12px 2px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-light);
  user-select: none;
}

.nav-dd-item {
  background: none;
  border: none;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text);
  transition: background 0.15s;
  white-space: nowrap;
}

.nav-dd-item:hover {
  background: var(--bg);
}

.nav-dd-item.active {
  background: var(--acento-app);
  color: var(--sobre-acento);
  font-weight: 600;
}

/* Paginación del historial de tipos de cambio */
.paginacion {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--text-light);
}

.paginacion button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* �cono de Excel en los botones de exportación */
.ico-excel {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

/* ============================================================
   TEMA CLARO / OSCURO  (html[data-theme="oscuro"])
   El tema claro es el :root de arriba; aquí solo se sobreescriben
   variables y los pocos colores fijos (badges, paneles, hovers).
   ============================================================ */
html[data-theme="oscuro"] {
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --bg: #0f172a;
  --surface: #1e293b;
  --text: #e2e8f0;
  --text-light: #94a3b8;
  --border: #334155;
  --activo: #3b82f6;
  --pasivo: #ef4444;
  --capital: #8b5cf6;
  --ingreso: #22c55e;
  --egreso: #f97316;
  /* Par OSCURO del verde de Bancos (mismo tono, aclarado para el fondo) */
  --verde-banco: #34d399;
  --verde-banco-suave: rgba(52, 211, 153, 0.12);
  --verde-banco-texto: #bbf7d0;
  --verde-banco-relleno: #052e16;
  /* Tinte oscuro del encabezado de Bancos */
  --banco-inicio: #0e7c52;
  --banco-medio: #2f9e70;
  --banco-fin: #e6f4ec;
  --banco-texto: #06190e;
  --banco-brillo: rgba(255, 255, 255, 0.95);
  --banco-sombra: rgba(52, 211, 153, 0.25);
  /* Par OSCURO del bronce de Cuentas por pagar */
  --marron-cxp: #fbbf24;
  --marron-cxp-suave: rgba(251, 191, 36, 0.12);
  --marron-cxp-texto: #fde68a;
  --marron-cxp-relleno: #3b2a06;
  --cxp-inicio: #b45309;
  --cxp-medio: #d9883f;
  --cxp-fin: #fdf1e2;
  --cxp-texto: #2e1806;
  --cxp-brillo: rgba(255, 255, 255, 0.95);
  --cxp-sombra: rgba(251, 191, 36, 0.25);
  /* Par OSCURO del celeste de Planillas */
  --planilla-inicio: #38bdf8;
  --planilla-medio: #7dd3fc;
  --planilla-fin: #e0f2fe;
  --planilla-borde: #5b7f93;
  --planilla-texto: #0b2733;
  --planilla-titulo: #7dd3fc;
  --planilla-brillo: rgba(255, 255, 255, 0.95);
  --planilla-sombra: rgba(56, 189, 248, 0.25);
  /* Acento de la app activa en oscuro (Contabilidad) */
  --acento-app: var(--primary);
  /* Sobre relleno de acento: en oscuro el acento es claro → texto oscuro */
  --sobre-acento: #0b1220;
  /* Fondos de fila resaltada (Balance de Comprobación, catálogo, período activo) */
  --fila-raiz: #263449;
  --fila-inter: #3a2f10;
  --fila-activo: #172554;
}

html[data-theme="oscuro"] .tabla tbody tr:hover {
  background: #263449;
}

html[data-theme="oscuro"] .badge {
  background: #334155;
  color: #cbd5e1;
}

html[data-theme="oscuro"] .badge-ok {
  background: #064e3b;
  color: #6ee7b7;
}

html[data-theme="oscuro"] .badge-bad {
  background: #7f1d1d;
  color: #fca5a5;
}

/* (El par oscuro de `.info-periode` vive junto a su regla, más abajo.) */

html[data-theme="oscuro"] .saldo-acumulado {
  background: #263449;
}

html[data-theme="oscuro"] .toast {
  background: #475569;
  color: #f8fafc;
}

html[data-theme="oscuro"] .tipo-Activo  { background: #1e3a5f; color: #93c5fd; }
html[data-theme="oscuro"] .tipo-Pasivo  { background: #450a0a; color: #fca5a5; }
html[data-theme="oscuro"] .tipo-Capital { background: #2e1065; color: #c4b5fd; }
html[data-theme="oscuro"] .tipo-Ingreso { background: #052e16; color: #86efac; }
html[data-theme="oscuro"] .tipo-Egreso  { background: #431407; color: #fdba74; }

html[data-theme="oscuro"] .clasif-Mayor       { background: #1e293b; border-color: #64748b; }
html[data-theme="oscuro"] .clasif-Subauxiliar  { background: #451a03; color: #fcd34d; border-color: #92400e; }
html[data-theme="oscuro"] .clasif-Auxiliar     { background: #1e3a5f; color: #93c5fd; border-color: #1d4ed8; }

html[data-theme="oscuro"] .nivel-badge.nivel-mov     { background: #1e3a5f; color: #93c5fd; border-color: #1d4ed8; }
html[data-theme="oscuro"] .nivel-badge.nivel-no-mov  { background: #1e293b; color: #94a3b8; border-color: #64748b; }

html[data-theme="oscuro"] .estado-abierto { background: #052e16; color: #86efac; }
html[data-theme="oscuro"] .estado-cerrado { background: #450a0a; color: #fca5a5; }

html[data-theme="oscuro"] .login-tarjeta {
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}

html[data-theme="oscuro"] .login-card {
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* ============================================================
   IMPRESIÓN / PDF
   Convención (AGENTS.md): toda impresión DEBE mostrar el login
   del usuario, la fecha y la hora → bloque #encabezadoImpresion
   (clase .print-only) + función imprimirSeccion() en js/app.js.
   ============================================================ */
/* Línea auxiliar "(hija de …)" en el catálogo: visible en pantalla,
   oculta solo al imprimir (regla de reporte) */
.hija-de {
  color: var(--text-light);
  font-size: 0.8rem;
}

.print-only {
  display: none;
}

/* Encabezado de reporte: título a la izquierda, datos a la derecha.
   Regla AGENTS.md: login + fecha + hora y LETRA PEQUEÑA en todo reporte. */
.imp-cab {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 8px;
}

.imp-der {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-light);
}

.imp-empresa-txt {
  font-weight: 700;
  color: var(--text);
}

/* Colores de la naturaleza en las opciones del dropdown */
#naturalezaCuenta option[value="true"]  { background-color: #dbeafe; color: #1e3a8a; }
#naturalezaCuenta option[value="false"] { background-color: #fef9c3; color: #854d0e; }

html[data-theme="oscuro"] #naturalezaCuenta option[value="true"]  { background-color: #1e3a5f; color: #93c5fd; }
html[data-theme="oscuro"] #naturalezaCuenta option[value="false"] { background-color: #422006; color: #fde047; }

/* Movimientos contables: la CUENTA (código) arriba y debajo su descripción
   (pedido de Diego 27/10/2026) */
.cuenta-codigo {
  font-weight: 600;
}

.cuenta-nombre {
  color: var(--text-light);
  font-size: 0.78rem;
}

/* ===== CAMPOS DE FECHA: texto DD/MM/AAAA + botón 📅 =====
   (Diego 27/10/2026: los input[type=date] los formatea el navegador y en su
   PC salían MM/DD/AAAA → el formato lo controla el código) */
.campo-fecha {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;          /* el date invisible se superpone aquí */
}

.campo-fecha .fecha-texto {
  /* Tamaño ÚNICO de todos los campos de fecha (variable --ancho-fecha) y
     alineación a la DERECHA (regla de Diego 28/10/2026): las fechas se leen
     como cifras y quedan en columna. Antes era 118px + min-width 110px. */
  width: var(--ancho-fecha);
  min-width: var(--ancho-fecha);
  max-width: var(--ancho-fecha);
  padding: 7px 8px;
  text-align: right;
  font-family: inherit;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.campo-fecha .fecha-texto:invalid {
  border-color: var(--danger, #dc2626);
}

.btn-fecha {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 6px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  transition: background 0.15s;
}

.btn-fecha:hover {
  background: var(--bg);
}

/* El date nativo queda SIEMPRE fuera de pantalla: ya no se usa para abrir
   calendarios (showPicker() falla con el campo invisible y en el PC de Diego
   se pintaba en MM/DD/AAAA). Lo abre el MINI-CALENDARIO PROPIO de abajo. */
.fecha-calendario {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
}

/* Cualquier input[type=date] que todavía no pasó por migrarCamposFecha()
   (ventana nueva, HTML dinámico) también va a la derecha. */
input[type="date"] {
  text-align: right;
}

/* ===== MINI-CALENDARIO PROPIO (DD/MM/AAAA, en español) =====
   Reemplaza al datepicker nativo: no depende de Chrome ni de la región
   de Windows, y el formato siempre es DD/MM/AAAA (Diego 27/10/2026) */
.mini-cal {
  position: absolute;
  z-index: 900;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  padding: 8px 10px 10px;
  width: 246px;
  font-size: 0.85rem;
  user-select: none;
}

.mini-cal-cab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}

.mini-cal-cab strong {
  font-size: 0.88rem;
}

.mini-cal-cab button {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 9px;
  cursor: pointer;
  color: var(--text);
}

.mini-cal-cab button:hover {
  background: var(--bg);
}

.mini-cal-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.mini-dow {
  text-align: center;
  color: var(--text-light);
  font-size: 0.68rem;
  padding: 3px 0;
}

.mini-cal-dias button {
  border: none;
  background: none;
  padding: 6px 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text);
}

.mini-cal-dias button:hover {
  background: var(--bg);
}

.mini-cal-dias button.hoy {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}

.mini-cal-dias span.vacio {
  visibility: hidden;
}

/* Detalle de UN asiento/movimiento (vista previa para imprimir) */
.panel-detalle {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

/* Encabezado del documento: datos de la cuenta bancaria */
.det-cuenta-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 0.86rem;
}

.det-cuenta-header .dato {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.det-cuenta-header .dato span {
  color: var(--text-light);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.det-mov-montos {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 12px;
}

.det-mov-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

/* Fecha del movimiento en el PDF (el div lleva .print-only → en pantalla
   no aparece: la fecha ya está en los chips y en la tabla) */
.det-fecha-doc {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: var(--text-light);
}

.chip {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.78rem;
  color: var(--text-light);
}

/* Icono de SOLO LECTURA (🖨� ver/imprimir): a diferencia de .btn-icon,
   S� se muestra para CONSULTA (puede imprimir, no puede escribir) */
.btn-ver-icon {
  background: none;
  border: none;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s;
}

.btn-ver-icon:hover {
  background: var(--bg);
}

/* ============================================================
   CUENTAS POR PAGAR — identidad MARRÓN SIENNA (módulo aparte)
   Decisión de Diego (27/10/2026): "marrón o rojizo bajito".
   ============================================================ */
.modulo-cxp {
  background: var(--marron-cxp-suave);
  border-top: 3px solid var(--marron-cxp);
  border-radius: 14px;
  padding: 18px;
}

.modulo-cxp .section-header h2 {
  color: var(--marron-cxp);
}

.modulo-cxp .btn-primary {
  background: var(--marron-cxp);
  border-color: var(--marron-cxp);
}

.modulo-cxp .btn-primary:hover {
  filter: brightness(1.1);
}

.modulo-cxp .tabla thead th {
  color: var(--marron-cxp);
  background: var(--marron-cxp-suave);
}

.modulo-cxp .tabla tbody tr:hover {
  background: var(--marron-cxp-suave);
}

/* Caja de resumen de CxP (totales agrupados por moneda) */
.cxp-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--marron-cxp);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
}

.cxp-resumen .dato {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cxp-resumen .dato span {
  color: var(--text-light);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cxp-resumen .dato strong {
  font-size: 1.02rem;
}

.cxp-resumen .dato strong.en-rojo {
  color: var(--danger);
}

/* ============================================================
   PLANILLAS — identidad CELESTE (refresco UI 01/11/2026)
   La identidad celeste se conserva, pero el degradado metálico a
   plateado se cambió por el ENCABEZADO SUAVE común de todas las apps
   (ver `.section.active > .section-header` más abajo): tinte claro del
   color de la app + barra izquierda + título en el color. Se lee mejor,
   no compite con los botones y sigue siendo inconfundible.
   Las variables tienen su PAR en el bloque oscuro (arriba).
   ============================================================ */
/* Títulos de las tarjetas internas: en celeste (como CxP con su terracota) */
#nominaConfig .card h3,
#nominaCatalogos .card h3,
#nominaPlanillas .card h3,
#nominaEmpleados .card h3 {
  color: var(--planilla-titulo);
}

/* Toque de identidad en las tarjetas (mismo criterio que .modulo-cxp) */
#nominaConfig .card,
#nominaCatalogos .card,
#nominaPlanillas .card,
#nominaEmpleados .card {
  border-left: 4px solid var(--planilla-inicio);
}

/* En impresión el degradado NO se imprime (ahorra tinta y se lee mejor) */
@media print {
  #nominaConfig > .section-header,
  #nominaCatalogos > .section-header,
  #nominaPlanillas > .section-header,
  #nominaEmpleados > .section-header,
  body[data-app="bancos"] .section.active > .section-header,
  body[data-app="cxp"] .section.active > .section-header {
    background: none !important;
    box-shadow: none !important;
    border: 1px solid #999 !important;
  }
}

/* ============================================================
   BANCOS y CUENTAS POR PAGAR — identidad SUAVE (refresco UI 01/11/2026)
   Antes: degradado metálico (verde / cobre) con texto oscuro, que se
   comía los botones del encabezado. Ahora las TRES apps comparten el
   encabezado suave definido en `.section.active > .section-header`
   (tinte claro + barra izquierda + título en el color de la app).
   Cada app solo aporta su color con `--acento-app` (más abajo, en
   `body[data-app="…"]`).
   ============================================================ */

/* Grid de campos de los forms de CxP */
.form-grid-cxp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 16px;
  margin-bottom: 12px;
}

.cxp-subtitulo {
  margin: 16px 0 8px;
  font-size: 0.95rem;
  color: var(--marron-cxp);
}

#tablaCxpLineas select,
#tablaCxpLineas input,
#tablaCxPPagoLineas select,
#tablaCxPPagoLineas input {
  width: 100%;
}

#tablaCxPPendientes td input[type="checkbox"] {
  width: 17px;
  height: 17px;
  cursor: pointer;
}

/* Badges de estado del documento (PEND/PARC/PAG/ANUL) y "vencido" */
.badge-cxp-pend { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.badge-cxp-parc { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.badge-cxp-pag  { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.badge-cxp-anul { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; text-decoration: line-through; }
.badge-cxp-venc { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

html[data-theme="oscuro"] .badge-cxp-pend { background: #3a2f10; color: #fde68a; border-color: #854d0e; }
html[data-theme="oscuro"] .badge-cxp-parc { background: #172554; color: #93c5fd; border-color: #1d4ed8; }
html[data-theme="oscuro"] .badge-cxp-pag  { background: #052e16; color: #86efac; border-color: #15803d; }
html[data-theme="oscuro"] .badge-cxp-anul { background: #1e293b; color: #94a3b8; border-color: #475569; }
html[data-theme="oscuro"] .badge-cxp-venc { background: #450a0a; color: #fca5a5; border-color: #b91c1c; }

/* ============================================================
   LIBRO DE BANCOS — identidad VERDE BOSQUE (módulo aparte)
   Decisión de Diego (26/10/2026): verde apagado en TODA la sección
   para distinguirla de Contabilidad. Cada color tiene su par oscuro.
   ============================================================ */
.modulo-bancos {
  background: var(--verde-banco-suave);
  border-top: 3px solid var(--verde-banco);
  border-radius: 14px;
  padding: 18px;
}

.modulo-bancos .section-header h2 {
  color: var(--verde-banco);
}

/* Pestañas y botones principales del módulo */
.modulo-bancos .pestana-btn.active {
  background: var(--verde-banco);
  border-color: var(--verde-banco);
  color: var(--sobre-acento);
}

.modulo-bancos .btn-primary {
  background: var(--verde-banco);
  border-color: var(--verde-banco);
}

.modulo-bancos .btn-primary:hover {
  filter: brightness(1.1);
}

/* Tablas: encabezado y hover en verde */
.modulo-bancos .tabla thead th {
  color: var(--verde-banco);
  background: var(--verde-banco-suave);
}

.modulo-bancos .tabla tbody tr:hover {
  background: var(--verde-banco-suave);
}

/* Caja de resumen del libro (saldos) */
.ban-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--verde-banco);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 0.88rem;
}

.ban-resumen .dato {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ban-resumen .dato span {
  color: var(--text-light);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ban-resumen .dato strong {
  font-size: 1.02rem;
}

/* Badges del libro: abono (entrada) en verde, cargo (salida) en rojo */
.ban-abono {
  background: var(--verde-banco-relleno);
  color: var(--verde-banco-texto);
}

.ban-cargo {
  background: rgba(220, 38, 38, 0.10);
  color: #b91c1c;
}

html[data-theme="oscuro"] .ban-cargo {
  background: rgba(248, 113, 113, 0.14);
  color: #fca5a5;
}

.ban-pend {
  background: rgba(217, 119, 6, 0.14);
  color: #92400e;
}

html[data-theme="oscuro"] .ban-pend {
  background: rgba(245, 158, 11, 0.16);
  color: #fcd34d;
}

/* Fila de totales del libro */
#tablaBanco tfoot td {
  font-weight: 700;
}

/* Badges de TIPO DE DOCUMENTO: azul = ingreso · rojo = egreso
   (color fijo por DIRECCIÓN, decisión de Diego 27/10/2026) */
.tipo-doc {
  display: inline-block;
  min-width: 32px;
  text-align: center;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.tipo-ingreso {
  background: #dbeafe;
  color: #1d4ed8;
}

.tipo-egreso {
  background: #fee2e2;
  color: #b91c1c;
}

html[data-theme="oscuro"] .tipo-ingreso {
  background: #1e3a5f;
  color: #93c5fd;
}

html[data-theme="oscuro"] .tipo-egreso {
  background: #450a0a;
  color: #fca5a5;
}

/* Libro: partida doble del asiento en 2 líneas (cuenta + D/H) */
.cuentas-asiento {
  font-size: 0.76rem;
  line-height: 1.35;
  min-width: 190px;
}

.pd-linea {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.pd-cuenta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-cuenta strong {
  font-weight: 700;
}

.pd-importe {
  font-weight: 700;
  white-space: nowrap;
  color: var(--text-light);
}

.pd-importe .pd-letra {
  display: inline-block;
  min-width: 15px;
  text-align: center;
  margin-right: 4px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.68rem;
}

/* Campo bloqueado por la dirección del tipo (ingreso⇒sin cargo, etc.) */
input:disabled, select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg);
}

/* Conciliación: 2 tarjetas lado a lado (una sola en pantallas angostas) */.conciliacion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.conciliacion-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--verde-banco);
  border-radius: 10px;
  padding: 16px;
}

.conciliacion-card h4 {
  margin: 0;
  font-size: 0.95rem;
}

@media (max-width: 980px) {
  .conciliacion-grid {
    grid-template-columns: 1fr;
  }
}

@media print {
  /* En papel: modo SIEMPRE claro aunque la app esté en oscuro */
  html[data-theme="oscuro"] {
    --surface: #ffffff;
    --bg: #ffffff;
    --text: #111111;
    --text-light: #555555;
    --border: #cccccc;
  }

  /* Ocultar toda la "cáscara" de la app: queda solo el contenido */
  .header, .user-bar, .periodo-selector, #btnTema, .login-overlay,
  .modal-overlay, .toast, .filtros, .section-header, .nav-dd-menu,
  .pestana-bar, .toolbar-pestana,
  #formCuenta, #formNivel, #formMoneda, #formTC, #formCia, #formUsuario,
  #formPeriodo, #formAnio, #formRecurrente, #formActivo, #formBaja,
  #formConfigActivos, #formCategoria, #formTipoAsiento, #formMovimiento,
  #panelTiposAsiento {
    display: none !important;
  }

  button {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }

  /* Impresión de UN SOLO balance: la tarjeta que no se imprime se oculta
     (la marca imprimirBalance() antes de window.print()) y la otra
     ocupa el ancho completo de la página */
  .no-imprimir {
    display: none !important;
  }

  .balance-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body {
    background: #fff;
    font-size: 0.82rem;
  }

  /* Reportes en LETRA PEQUEÑA (regla AGENTS.md para todo reporte) */
  .print-only h2 {
    font-size: 1.05rem;
    margin: 0;
  }

  .tabla td,
  .tabla th {
    font-size: 0.72rem;
    padding: 3px 6px;          /* compacto: antes 6px 8px (pedido de Diego) */
  }

  .main {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .tabla {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .tabla thead {
    display: table-header-group;
  }

  .tabla tr {
    page-break-inside: avoid;
  }

  /* Chips con colores literales del modo oscuro → papel legible */
  html[data-theme="oscuro"] .badge,
  html[data-theme="oscuro"] .badge-ok,
  html[data-theme="oscuro"] .badge-bad,
  html[data-theme="oscuro"] .nivel-badge,
  html[data-theme="oscuro"] .tipo-badge,
  html[data-theme="oscuro"] .clasif-badge,
  html[data-theme="oscuro"] .estado-badge {
    background: #f1f1f1 !important;
    color: #222222 !important;
    border-color: #bbbbbb !important;
  }

  /* Columna Acciones y columna Naturaleza: solo en pantalla, no en el reporte */
  #tablaCuentas th.col-acciones,
  #tablaCuentas td:last-child,
  .col-naturaleza {
    display: none !important;
  }

  /* Auxiliar "(hija de …)": solo en pantalla, no en el reporte */
  .hija-de {
    display: none !important;
  }

  /* ===== DOCUMENTO COMPACTO: menos separación vertical =====
     (pedido de Diego 27/10/2026: "¿se pueden pegar más los objetos?").
     Solo al imprimir: la pantalla conserva sus espacios de siempre. */
  .panel-detalle {
    padding: 8px 10px;
    margin-bottom: 6px;
  }

  /* La barra con botones del panel de Bancos: ya no lleva título → sobra
     (dejaba un hueco de 16px arriba del documento) */
  #panelDetalleMovBanco .tarjeta-header {
    display: none !important;
  }

  .ban-resumen {
    padding: 6px 10px;
    margin-bottom: 6px;
    gap: 6px 18px;
  }

  .ban-resumen .dato strong {
    font-size: 0.92rem;
  }

  .det-cuenta-header {
    padding: 6px 10px;
    margin-bottom: 6px;
  }

  .det-fecha-doc {
    margin-bottom: 5px;
  }

  .imp-cab {
    margin-bottom: 4px;
    gap: 8px;
  }
}

.btn-export {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--text);
  transition: all 0.18s;
  white-space: nowrap;
}

.btn-export:hover {
  border-color: color-mix(in srgb, var(--acento-app) 45%, var(--border));
  color: var(--acento-app);
  background: color-mix(in srgb, var(--acento-app) 5%, var(--surface));
  transform: translateY(-1px);
}

.btn-export:hover {
  background: var(--bg);
}

/* MAIN */
.main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.section {
  display: none;
}

.section.active {
  display: block;
}

.section h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* ============================================================
   🎨 ENCABEZADO SUAVE DE VENTANA (refresco UI 01/11/2026)
   Reemplaza los degradados metálicos (verde / cobre / celeste) por UN
   solo patrón para las 4 apps:
      · fondo = tinte muy claro del color de la app
      · barra izquierda de 4px en el color de la app
      · título en el color de la app (legible: ≥ 4.5:1 sobre blanco)
   Ventaja: los botones (Excel · Imprimir · + Nuevo) se leen igual que
   antes y cada ventana sigue "vistiendo" el color de su aplicación.
   En impresión se quita (ver @media print). */
.section.active > .section-header {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--acento-app) 9%, var(--surface)) 0%,
    color-mix(in srgb, var(--acento-app) 3%, var(--surface)) 60%,
    var(--surface) 100%);
  border: 1px solid color-mix(in srgb, var(--acento-app) 20%, var(--surface));
  border-left: 4px solid var(--acento-app);
  border-radius: 14px;
  padding: 13px 18px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.section.active > .section-header h2 {
  color: var(--acento-app);
  letter-spacing: -0.01em;
}

html[data-theme="oscuro"] .section.active > .section-header {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--acento-app) 16%, var(--surface)) 0%,
    color-mix(in srgb, var(--acento-app) 6%, var(--surface)) 60%,
    var(--surface) 100%);
  border-color: color-mix(in srgb, var(--acento-app) 32%, var(--surface));
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.section-header h2 {
  margin-bottom: 0;
}

/* CARDS */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}

.card {
  background: var(--surface);
  border-radius: 12px;
  padding: 20px;
  border-left: 4px solid;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.card-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.card-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
}

.card-activo { border-color: var(--activo); }
.card-activo .card-value { color: var(--activo); }
.card-pasivo { border-color: var(--pasivo); }
.card-pasivo .card-value { color: var(--pasivo); }
.card-capital { border-color: var(--capital); }
.card-capital .card-value { color: var(--capital); }
.card-ingreso { border-color: var(--ingreso); }
.card-ingreso .card-value { color: var(--ingreso); }
.card-egreso { border-color: var(--egreso); }
.card-egreso .card-value { color: var(--egreso); }
.card-balance { border-color: var(--text); }
.card-balance .card-value { color: var(--text); }

/* CHART */
.chart-container {
  background: var(--surface);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.chart-container h3 {
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bar-label {
  width: 120px;
  font-size: 0.85rem;
  color: var(--text-light);
  text-align: right;
}

.bar-track {
  flex: 1;
  background: var(--bg);
  border-radius: 6px;
  height: 28px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.6s ease;
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-size: 0.75rem;
  color: white;
  font-weight: 600;
  min-width: fit-content;
  /* Sombra tenue: el blanco se lee sobre cualquier color de barra */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.bar-fill.activo { background: var(--activo); }
.bar-fill.pasivo { background: var(--pasivo); }
.bar-fill.capital { background: var(--capital); }
.bar-fill.ingreso { background: var(--ingreso); }
.bar-fill.egreso { background: var(--egreso); }

/* FORMS */
.form-inline {
  background: var(--surface);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.form-movimiento {
  background: var(--surface);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 160px;
}

.form-group-wide {
  flex: 2;
}

/* Anchaje diferenciado de los campos del form de proveedor
   (pedido de Diego 27/10/2026: Nombre/Correo anchos · Teléfono angosto ·
    Actividad económica a la mitad) */
.form-group-narrow {
  flex: 0.7;
  min-width: 130px;
}

.form-group-half {
  flex: 0.5;
  min-width: 120px;
}

.form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-light);
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

input, select, textarea {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  background: var(--surface);
  color: var(--text);
}

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--acento-app) 35%, var(--border));
}

input:focus, select:focus, textarea:focus, input:focus-visible {
  border-color: var(--acento-app);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento-app) 18%, transparent);
}

input::placeholder, textarea::placeholder {
  color: color-mix(in srgb, var(--text-light) 80%, transparent);
}

input:disabled, select:disabled, textarea:disabled {
  background: var(--bg);
  color: var(--text-light);
  cursor: not-allowed;
}

/* BUTTONS */
.btn-primary {
  background: var(--acento-app);
  color: var(--sobre-acento);
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--acento-app) 86%, #000);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--acento-app) 30%, transparent);
}

html[data-theme="oscuro"] .btn-primary:hover {
  background: color-mix(in srgb, var(--acento-app) 88%, #fff);
}

.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

/* Más visible (Diego 31/10/2026: "Botones de Cerrar o cancelar con un
   color más visible"): borde y texto en el color de la APP activa
   (azul · verde · terracota · celeste) en vez de un gris apagado. */
.btn-secondary {
  background: var(--surface);
  color: var(--acento-app);
  border: 1.5px solid color-mix(in srgb, var(--acento-app) 55%, var(--surface));
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--acento-app) 10%, var(--surface));
  border-color: var(--acento-app);
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0);
}

/* Botón en proceso (p. ej. 📉 Generar depreciación): evita doble disparo */
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary:disabled:hover {
  background: var(--acento-app);
  box-shadow: none;
}

.btn-secondary:disabled:hover {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--acento-app) 55%, var(--surface));
}

/* Foco visible por teclado en TODOS los botones (accesibilidad) */
button:focus-visible,
.nav-btn:focus-visible,
.nav-dd-item:focus-visible,
.pestana-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento-app) 35%, transparent);
}

/* ===================== PESTAÑAS (Activos Fijos) ===================== */
.pestana-bar {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.pestana-btn {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 9px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: color 0.15s, background 0.15s;
}

.pestana-btn:hover {
  color: var(--text);
  background: var(--bg);
}

.pestana-btn.active {
  color: var(--acento-app);
  border-bottom-color: var(--acento-app);
  background: color-mix(in srgb, var(--acento-app) 7%, var(--surface));
}

.pestana-panel {
  animation: pestanaFade 0.15s ease-in;
}

@keyframes pestanaFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Barra de herramientas dentro de una pestaña (Excel + acciones) */
.toolbar-pestana {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: 12px;
}

/* Filas omitidas en la vista previa de depreciación (motivo a la vista) */
.fila-omitida td {
  opacity: 0.65;
}

/* Etiqueta de campo explicativa (formulario de activos: Valor residual) */
.etiqueta-campo {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-light);
  cursor: help;
  white-space: nowrap;
  align-self: center;
}

/* Diferencial cambiario: aviso dentro del formulario de movimientos */
.dif-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin: 2px 0 14px;
  border: 1px dashed var(--primary);
  border-radius: 8px;
  background: var(--bg);
  font-size: 0.85rem;
  color: var(--text);
}

.dif-hint small {
  display: block;
  color: var(--text-light);
  font-size: 0.78rem;
}

/* Cierres: lista de validaciones y acciones */
.validaciones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.validaciones .val {
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 4px solid var(--border);
  background: var(--bg);
  font-size: 0.85rem;
  color: var(--text);
}

.validaciones .val-error { border-left-color: #d9534f; }
.validaciones .val-aviso { border-left-color: #f0ad4e; }
.validaciones .val-ok    { border-left-color: #5cb85c; }

.cierre-acciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* Casillas de días de la semana (control de acceso de usuarios) */
.dias-acceso {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.dias-acceso label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

.dias-acceso input {
  padding: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.btn-danger {
  background: var(--danger);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-danger:hover {
  background: #b91c1c;
}

.btn-danger-sm {
  background: var(--danger);
  color: white;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-danger-sm:hover {
  background: #b91c1c;
}

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  background: #e5e7eb;
  color: #374151;
}

.badge-ok {
  background: #d1fae5;
  color: #065f46;
}

.badge-bad {
  background: #fee2e2;
  color: #991b1b;
}

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s;
}

.btn-icon:hover {
  background: var(--bg);
}

/* TABLE */
.filtros {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;   /* evita que la caja de fecha se ESTIRE a 42px */
}

.filtros input, .filtros select {
  min-width: 200px;
}

/* Checkbox de filtro (Balances): el min-width de arriba no le aplica */
.chk-filtro {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-light);
  cursor: pointer;
}

.chk-filtro input[type="checkbox"] {
  min-width: 0;
  min-height: 0;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--primary, #2563eb);
}

.filtros-nota {
  font-size: 0.78rem;
  color: var(--text-light);
  align-self: center;
}

/* Aviso del origen del Saldo Anterior (se imprime junto al balance) */
.nota-origen {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 3px solid #d97706;
  background: rgba(217, 119, 6, 0.08);
  color: var(--text);
  font-size: 0.8rem;
  border-radius: 0 6px 6px 0;
}

/* Versión informativa (saldo tomado de un cierre real) */
.nota-origen.ok {
  border-left-color: #16a34a;
  background: rgba(22, 163, 74, 0.08);
}

.tabla {
  width: 100%;
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
              0 4px 14px rgba(15, 23, 42, 0.04);
  border-collapse: collapse;
}

.tabla th {
  background: color-mix(in srgb, var(--acento-app) 5%, var(--bg));
  padding: 12px 16px;
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}

.tabla td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.tabla tbody tr {
  transition: background 0.12s;
}

.tabla tbody tr:hover {
  background: color-mix(in srgb, var(--acento-app) 4%, var(--surface));
}

.tabla tbody tr:last-child td {
  border-bottom: none;
}

.tipo-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.tipo-Activo { background: #dbeafe; color: var(--activo); }
.tipo-Pasivo { background: #fee2e2; color: var(--pasivo); }
.tipo-Capital { background: #ede9fe; color: var(--capital); }
.tipo-Ingreso { background: #dcfce7; color: var(--ingreso); }
.tipo-Egreso { background: #ffedd5; color: var(--egreso); }

.clasif-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.clasif-Mayor { background: #f1f5f9; color: var(--text-light); border: 1px dashed #94a3b8; }
.clasif-Subauxiliar { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.clasif-Auxiliar { background: #dbeafe; color: var(--primary); border: 1px solid #93c5fd; }

.nivel-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.nivel-badge.nivel-mov { background: #dbeafe; color: var(--primary); border: 1px solid #93c5fd; }
.nivel-badge.nivel-no-mov { background: #f1f5f9; color: var(--text-light); border: 1px dashed #94a3b8; }

.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}

.checkbox-inline input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.lineas-title {
  margin: 8px 0 12px;
  font-size: 0.95rem;
  color: var(--text-light);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.saldo-pos { color: var(--success); font-weight: 600; }
.saldo-neg { color: var(--danger); font-weight: 600; }

/* BALANCES */
.balance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.balance-card {
  background: var(--surface);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.balance-card h3 {
  margin: 0;
  font-size: 1.1rem;
}

/* Título a la izquierda + botones (Excel / imprimir) a la derecha */
.tarjeta-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.tabla-balance {
  box-shadow: none;
}

.tabla-balance td {
  padding: 10px 16px;
}

.total-row td {
  border-top: 2px solid var(--text);
  font-size: 1rem;
}

.balance-check td {
  padding-top: 14px;
  color: var(--success);
  font-weight: 700;
}

.balance-check.error td {
  color: var(--danger);
}

/* MODAL */
/* ⚠� Por encima de los popups (.pv-overlay = 930 y la lista del
   autocompletar = 1200): si no, la confirmación queda DETR�S y parece
   que "Eliminar" no hace nada (bug Diego 02/11/2026). */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1400;
}

.modal {
  background: var(--surface);
  border-radius: 16px;
  padding: 32px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal h3 {
  margin-bottom: 12px;
}

.modal p {
  color: var(--text-light);
  margin-bottom: 24px;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* TOAST */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--text);
  color: white;
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 0.9rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  z-index: 1500;
  animation: slideIn 0.3s ease;
}

.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }

@keyframes slideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.hidden {
  display: none !important;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .header {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 16px;
    gap: 12px;
  }

  .nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }

  .balance-grid {
    grid-template-columns: 1fr;
  }

  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .main {
    padding: 16px;
  }

  .form-row {
    flex-direction: column;
  }
}

/* PER�ODO SELECTOR */
.periodo-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.periodo-selector label {
  font-size: 1rem;
}

.periodo-selector select {
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--primary);
  cursor: pointer;
  padding: 4px 0;
}

.periodo-selector select:focus {
  border: none;
  outline: none;
}

/* PER�ODOS */
/* Caja informativa: toma el color de la app activa (antes era azul fijo,
   que desentonaba en Bancos / CxP / Nómina). */
.info-periode {
  background: color-mix(in srgb, var(--acento-app) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--acento-app) 22%, var(--surface));
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--acento-app) 62%, var(--text));
}

html[data-theme="oscuro"] .info-periode {
  background: color-mix(in srgb, var(--acento-app) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--acento-app) 30%, var(--surface));
  color: color-mix(in srgb, var(--acento-app) 55%, var(--text));
}

.estado-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.estado-abierto { background: #dcfce7; color: var(--success); }
.estado-cerrado { background: #fee2e2; color: var(--danger); }

.saldo-acumulado {
  background: #f8fafc;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.saldo-acumulado span {
  color: var(--text-light);
  font-size: 0.9rem;
}

.saldo-acumulado strong {
  font-size: 1.1rem;
}

/* ============================================================
   LOGIN — patrón KRONOS (Diego 31/10/2026)
   · UNA tarjeta contenedora centrada: min(1040px, 100%) con esquinas
     redondeadas y sombra — la marca a la izquierda y el form a la
     derecha van DENTRO de la misma tarjeta
   · ≤820px (celular): la tarjeta colapsa a 1 columna → la marca
     queda ARRIBA y el formulario ABAJO (nunca se aprietan)
   · Todos los ids se conservan (la lógica de sesión no cambia)
   ============================================================ */
.login-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  /* margin:auto en la tarjeta centra SIN recortar arriba si hace scroll */
  overflow: auto;
  padding: 24px 16px;
  background: var(--bg);
  z-index: 1000;
}

/* Tarjeta contenedora (estilo Kronos): ambas mitades dentro */
.login-tarjeta {
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(460px, 5.5fr);
  width: min(1040px, 100%);
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 30px 70px rgba(15,23,42,0.18);
  animation: loginEntra 0.4s ease both;
}

/* ---- Panel de marca (izquierda dentro de la tarjeta) ---- */
.login-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 44px;
  color: #fff;
  background: linear-gradient(155deg, #16304f 0%, #1e3a5f 30%, #2563eb 100%);
  overflow: hidden;
}

/* Retícula técnica tenue de fondo */
.login-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 70%);
}

/* Arco decorativo tenue (como el mockup) */
.login-panel::after {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);
  right: -180px;
  top: -140px;
  pointer-events: none;
}

.login-brand {
  position: relative;
  font-size: 2.8rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -1px;
}

.login-brand span {
  font-weight: 300;
  opacity: 0.92;
}

/* Logo de empresa (Diego 31/10/2026): placa blanca redondeada sobre el
   degradado (el PNG tiene fondo blanco) — tamaño contenido para que
   "entre" cómodo en el panel, con sombra suave. */
.login-logo-empresa {
  position: relative;
  width: 156px;
  max-width: 58%;
  padding: 10px 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(10,25,60,0.38);
  margin-bottom: 16px;
  display: block;
}

/* ---- Dibujos 3D de cristal (centro del panel) ---- */
.login-dibujos {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex: 1;
  padding: 24px 0;
}

.cristal {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(255,255,255,0.20), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 18px 40px rgba(10,25,60,0.35),
              inset 0 1px 0 rgba(255,255,255,0.30);
  backdrop-filter: blur(3px);
}

.cristal svg { width: 52%; height: 52%; }

.cristal-doc      { width: 96px;  height: 116px; transform: translateY(18px) rotate(-3deg); }
.cristal-grafico  { width: 150px; height: 176px; z-index: 1; }
.cristal-pastel   { width: 96px;  height: 116px; transform: translateY(18px) rotate(3deg); }

/* ---- Pie del panel ---- */
.login-panel-pie { position: relative; }

.login-panel-titulo {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 14px;
}

.login-panel-features {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
}

.login-panel-sep { opacity: 0.5; }

/* ---- Zona de la tarjeta (derecha dentro de la tarjeta) ---- */
.login-zona {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}

.login-tema {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 2;
}

.login-tema:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.login-card {
  background: var(--surface);
  border-radius: 18px;
  padding: 44px 40px 30px;
  width: 400px;
  max-width: 100%;
  text-align: left;
  box-shadow: 0 10px 30px rgba(15,23,42,0.08);
}

@keyframes loginEntra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-titulo {
  font-size: 1.9rem;
  margin: 0 0 6px;
}

.login-sub {
  color: var(--text-light);
  margin: 0 0 26px;
  font-size: 0.95rem;
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Campo con icono a la izquierda (y ojo a la derecha en la contraseña) */
.login-campo {
  position: relative;
  display: block;
}

.login-campo-ico {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  opacity: 0.6;
  pointer-events: none;
}

.login-card input,
.login-card select {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px 13px 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 1rem;
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-card input:focus,
.login-card select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.login-ojo {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.55;
  padding: 4px;
}

.login-ojo:hover { opacity: 1; }

.btn-login {
  padding: 13px;
  font-size: 1rem;
  border-radius: 12px;
  margin-top: 6px;
  width: 100%;
}

/* Estado de carga (spinner mientras valida el servidor) */
.btn-login.cargando {
  pointer-events: none;
  opacity: 0.75;
}

.btn-login.cargando::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 10px;
  vertical-align: -2px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: loginGira 0.7s linear infinite;
}

@keyframes loginGira {
  to { transform: rotate(360deg); }
}

.login-error {
  color: var(--danger);
  font-size: 0.85rem;
  margin: 14px 0 0;
  text-align: center;
}

.login-copy {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  /* Escalable con la ventana: nunca se corta ni se sale (clamp) */
  font-size: clamp(0.95rem, 2.2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--text);
  white-space: nowrap;
}

/* ---- Media queries del login (patrón Kronos) ----
   ① Ventanas medianas (≤1150px): el panel de marca se compacta.
   ② Celular (≤820px, mismo breakpoint que Kronos): la tarjeta
      colapsa a 1 COLUMNA → la marca queda ARRIBA y el formulario
      ABAJO (la "imagen de la izquierda" no se pierde ni se aprieta:
      se apila, como en kronoserp). */
@media (max-width: 1150px) {
  .login-panel { padding: 36px 32px; }
  .login-brand { font-size: 2.2rem; }
  .cristal-doc, .cristal-pastel { width: 76px; height: 96px; }
  .cristal-grafico { width: 120px; height: 146px; }
  .cristal-doc svg, .cristal-grafico svg, .cristal-pastel svg { width: 48%; height: 48%; }
  .login-panel-titulo { font-size: 1.15rem; }
  .login-card { width: 400px; padding: 36px 30px 26px; }
}

@media (max-width: 820px) {
  .login-overlay { padding: 0; }
  .login-tarjeta {
    grid-template-columns: 1fr;      /* marca ARRIBA + form ABAJO */
    border-radius: 0;                /* a pantalla del celular */
    min-height: 100vh;
    box-shadow: none;
  }
  .login-panel { padding: 30px 22px 24px; }
  .login-brand { font-size: 2rem; }
  /* Como Kronos: lo decorativo se limpia en celular */
  .cristal-doc, .cristal-pastel { display: none; }
  .cristal-grafico { width: 84px; height: 100px; }
  .login-dibujos { flex: 0; padding: 14px 0; }
  .login-panel-titulo { font-size: 1rem; margin-bottom: 8px; }
  .login-panel-features { display: none; }
  .login-zona { padding: 26px 18px 22px; justify-content: flex-start; }
  .login-card { width: min(400px, 100%); padding: 26px 22px 20px; box-shadow: none; }
  .login-copy { margin-top: 18px; position: static; }
  /* Logo de empresa en celular: más chico y TODO centrado (Kronos) */
  .login-logo-empresa { width: 116px; margin: 0 auto 10px; padding: 8px 10px; }
  .login-panel { align-items: center; text-align: center; }
  .login-brand { margin-bottom: 4px; }
}

/* USER BAR */
.user-bar {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 14px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  font-size: 0.85rem;
  color: var(--text-light);
  z-index: 50;
}

/* ============================================================
   PERMISOS POR ROL (clases aplicadas por api.aplicarRol())
   ============================================================ */

/* CONSULTA = solo lectura (el backend además responde 403 en todo POST/PUT/DELETE).
   MECANISMO GENERAL — toda ventana NUEVA queda cubierta automáticamente si:
     1) sus controles de escritura viven dentro de un <form> de #appContainer
        → regla `#appContainer form` de abajo (nada que acordar);
     2) los controles SUELTOS (botón de cabecera, pestaña de edición, botón de
        un panel) llevan la clase `.solo-escritura`;
     3) las acciones de fila de las tablas usan .btn-icon / .btn-danger-sm.
   Regla de proyecto en AGENTS.md → "Reglas" (verificar con un usuario CONSULTA). */
body.rol-consulta #appContainer form,
body.rol-consulta .solo-escritura,
body.rol-consulta #navAdmin,
body.rol-consulta .btn-excel,
body.rol-consulta #btnNuevoActivo,
body.rol-consulta #mnuDepreciacion,
body.rol-consulta #btnGenDep,
body.rol-consulta #btnNuevaCuenta,
body.rol-consulta #btnNuevoNivel,
body.rol-consulta #btnNuevoMovimiento,
body.rol-consulta #btnNuevoPeriodo,
body.rol-consulta #btnNuevoAnio,
body.rol-consulta #btnNuevaMoneda,
body.rol-consulta #btnNuevoTC,
body.rol-consulta #btnNuevoUsuario,
body.rol-consulta #btnNuevaCia,
body.rol-consulta #btnAsignarAcceso,
body.rol-consulta .tabla .btn-icon,
body.rol-consulta .tabla .btn-danger-sm,
body.rol-consulta .tabla [data-hacer-local],
body.rol-consulta .tabla [data-editar-usr],
body.rol-consulta .tabla [data-editar-cia] {
  display: none !important;
}

/* No ADMIN (CONTADOR/CONSULTA): no gestiona usuarios, compañías ni accesos */
body.rol-no-admin #btnNuevaCia,
body.rol-no-admin #btnNuevoUsuario,
body.rol-no-admin #btnAsignarAcceso,
body.rol-no-admin #tablaUsuarios .btn-secondary,
body.rol-no-admin #tablaUsuarios .btn-danger-sm,
body.rol-no-admin #tablaCompanias .btn-secondary,
body.rol-no-admin #tablaCompanias .btn-danger-sm,
body.rol-no-admin #tablaAccesos .btn-danger-sm {
  display: none !important;
}

/* ===================== MONTOS: SIEMPRE A LA DERECHA =====================
   REGLA DE DIEGO (28/10/2026): todo monto —celdas de tablas, filas de
   totales y campos numéricos— va alineado a la DERECHA, con cifras tabulares
   para que los dígitos y los decimales queden en columna. La clase `.monto`
   la pone `marcarMontos()` en public/js/app.js detectando el contenido de la
   celda, así que cubre también las ventanas que se agreguen en el futuro
   (no hay que acordarse de ponerla a mano). Sin `!important`: los textos
   centrados a propósito (p. ej. "Sin datos") conservan su estilo inline. */
.monto,
table td.monto,
table th.monto {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

table td.monto {
  white-space: nowrap;
}

/* Campos de monto: los numéricos y los de solo lectura que muestran cifras
   ya formateadas (localDebe, localHaber, cxpTotal…) */
input[type="number"],
input.monto,
.campo-monto {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- Botón 🧾 de la columna Conceptos en 📋 Planillas (Diego
   31/10/2026: "se ve muy tímido, debe ser algo que el usuario vea de
   inmediato") — botón de COLOR con texto + badge contador ---- */
.btn-ce {
  white-space: nowrap;
  padding: 5px 10px;
  font-size: 0.85rem;
  border-radius: 8px;
}

.ce-num {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 9px;
  padding: 0 6px;
  font-size: 0.78em;
  margin-left: 2px;
}

/* ============================================================
   TANDA DE AJUSTES (Diego 31/10/2026)
   ============================================================ */

/* ---- 📢 Avisos del motor: VENTANA POPUP (solo al clic) ---- */
.btn-avisos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  color: var(--warning);
  border: 1.5px solid var(--warning);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-avisos:hover {
  background: color-mix(in srgb, var(--warning) 14%, var(--surface));
  transform: translateY(-1px);
}

.avisos-popup {
  position: fixed;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(700px, 92vw);
  max-height: 74vh;
  overflow: auto;
  z-index: 950;
  border: 2px solid var(--primary);
  box-shadow: 0 30px 70px rgba(10, 20, 45, 0.45);
  /* animación PROPIA: loginEntra pisaría el translateX(-50%) del
     centrado y el popup se saldría a la derecha */
  animation: popupEntra 0.25s ease both;
}

@keyframes popupEntra {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.avisos-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* ---- �� Forms de edición de la app de Planillas: SOBRESALEN del fondo
   (Diego 31/10/2026: "todos los form de planillas igual de destacados
   que el de conceptos") — la clase la llevan TODOS los <form> de las
   secciones de nómina/catálogos/empleados/parámetros ---- */
.form-destacado {
  background: color-mix(in srgb, var(--acento-app) 5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--acento-app) 45%, var(--surface));
  border-left: 5px solid var(--acento-app);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

/* (🔄 .ico-grande y .btn-recalc se retiraron el 31/10/2026: el popup de
   conceptos ya no trae botón de Recalcular — ese recálculo lo hace
   💾 Guardar del mismo popup) */

/* Flecha para abrir/cerrar el desglose del empleado (Diego 02/11/2026:
   "¿puedes hacer esas flechas bastante más llamativas?"): chip redondo
   relleno con el acento de la app y un triángulo grande dibujado con CSS
   (no depende de la fuente). Cerrada = ▸ · abierta = ▾ girando 90°. */
.fila-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--acento-app);
  color: var(--sobre-acento);
  font-size: 0;                 /* oculta el carácter ▸ del HTML */
  vertical-align: middle;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--acento-app) 40%, transparent);
  transition: transform 0.15s, box-shadow 0.15s;
}

.fila-flecha::before {
  content: '';
  width: 0;
  height: 0;
  margin-left: 3px;             /* centro óptico del triángulo */
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transition: transform 0.15s;
}

/* Al pasar por la fila, el chip crece un poco (invita a hacer clic) */
.fila-empleado:hover .fila-flecha {
  transform: scale(1.12);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--acento-app) 55%, transparent);
}

/* ---- � Form de Compañía: logo y correo uno al lado del otro ---- */
#formCiaExtras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  align-items: start;
}

/* el <hr> separador cruza las 2 columnas */
#formCiaExtras > hr {
  grid-column: 1 / -1;
  margin: 4px 0 12px;
}

/* en pantallas angostas se apilan (como antes) */
@media (max-width: 900px) {
  #formCiaExtras {
    grid-template-columns: 1fr;
  }
}

/* ---- 💾 Guardar + ✗ Cancelar SIEMPRE juntos (Diego 31/10/2026:
   "alinear botón de Cancelar con el de Guardar") — grupo que no se
   separa aunque el contenedor haga wrap ---- */
.grupo-botones {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* ============================================================
   💾 BOTONES DE ACCIÓN DE FORMULARIOS — REGLA GLOBAL (Diego 03/11/2026)
   “Los botones de guardar o cancelar no deben quedar pegados a los
   campos�: el grupo de acciones va en SU PROPIA línea, separado de los
   campos (18 px de aire; en los popups, además, una línea punteada) y
   alineado a la derecha. Aplica a TODOS los formularios —ventanas y
   popups— presentes y futuros: el grupo se marca con
   class="form-acciones" (los antiguos .ce-acciones y .form-actions
   heredan la misma separación). Nunca se deja un Guardar/Cancelar
   suelto dentro de la fila de campos.
   ============================================================ */
.form-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  margin-top: 18px;
}

/* Los grupos ya existentes heredan el AIRE (no se reescribe su HTML) */
.ce-acciones,
.form-actions {
  margin-top: 18px;
}

/* Dentro de un popup la fila de acciones se separa con una línea punteada */
.pv-caja .form-acciones,
.pv-caja .ce-acciones,
.pv-caja .form-actions {
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

/* ============================================================
   TANDA DE AJUSTES 2 (Diego 31/10/2026)
   ============================================================ */

/* ---- � Estado del parámetro: TOGGLE redondeado sin palabras ---- */
.toggle-estado {
  display: inline-block;
  width: 42px;
  height: 23px;
  border-radius: 12px;
  position: relative;
  vertical-align: middle;
  transition: background 0.2s;
}

.toggle-estado::after {
  content: "";
  position: absolute;
  top: 2.5px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: left 0.2s;
}

.toggle-estado.on  { background: #16a34a; }
.toggle-estado.on::after { left: 21px; }
.toggle-estado.off { background: #cbd5e1; }

/* ---- 📖 Avisos del cálculo: más separación y claridad por persona ---- */
#planPendientes li,
#planAvisos li {
  margin-bottom: 10px;
  line-height: 1.6;
  padding-bottom: 8px;
}

#planPendientes li:not(:last-child),
#planAvisos li:not(:last-child) {
  border-bottom: 1px dashed var(--border);
}

#planPendientes ul,
#planAvisos ul {
  margin-top: 10px !important;
}

/* ---- 🧾 Banda celeste del panel de conceptos (distinta a los forms
   destacados: como la barrita de la vista previa de la planilla) ---- */
#panelCeTitulo {
  background: linear-gradient(90deg, var(--planilla-inicio), var(--planilla-medio));
  color: #fff;
  padding: 9px 16px;
  border-radius: 8px;
  display: inline-block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  box-shadow: 0 4px 14px rgba(23, 168, 234, 0.30);
}

/* Par oscuro del toggle de parámetros */
html[data-theme="oscuro"] .toggle-estado.off { background: #475569; }
html[data-theme="oscuro"] .toggle-estado.on { background: #4ade80; }

/* ---- 📖 DESGLOSE de líneas del empleado (vista previa 📋 Planillas):
   resalte PROPIO con barra celeste — destaca de un vistazo como la
   vista previa de la planilla, distinto a .form-destacado ---- */
.desglose-ce {
  background: var(--bg);
  padding: 0 10px 10px;
  border-top: 3px solid var(--primary);
}

.desglose-ce-titulo {
  background: linear-gradient(90deg, var(--planilla-inicio), var(--planilla-medio));
  color: #fff;
  font-weight: 600;
  font-size: 0.86rem;
  padding: 7px 12px;
  margin: 0 -10px 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.tabla-desglose {
  margin: 0;
  box-shadow: none;
}

.tabla-desglose thead th {
  background: var(--surface-2, rgba(23, 168, 234, 0.10));
  color: var(--primary);
}

/* Par oscuro del desglose */
html[data-theme="oscuro"] .desglose-ce {
  background: var(--surface);
  border-top-color: var(--primary);
}

html[data-theme="oscuro"] .tabla-desglose thead th {
  background: rgba(23, 168, 234, 0.16);
}

/* ============================================================
   🧾 POPUP DE CONCEPTOS POR EMPLEADO (Diego 31/10/2026: "La
   edición o agregar de un concepto en una planilla debe hacerse
   en un popup, es necesario separar visualmente lo que se hace
   en un empleado de la lista de los empleados")
   ============================================================ */
.ce-overlay {
  position: fixed;
  inset: 0;
  /* ⚠� SIN `backdrop-filter`: el desenfoque de fondo hacía PARPADEAR toda
     la ventana al mover el mouse (Diego 02/11/2026) — Chrome/Windows
     recompone el blur en cada repintado. El fondo oscuro hace de foco. */
  background: rgba(10, 20, 45, 0.62);
  z-index: 940;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 12px 24px;
  overflow: auto;
}

.ce-popup {
  width: min(880px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  /* el color lo aporta .ce-cabecera (recortada abajo) */
  border-top: none;
  border-radius: 12px;
  box-shadow: 0 30px 70px rgba(10, 20, 45, 0.45);
  padding: 14px 16px 16px;
  /* recorta la cabecera dentro del radio (mismo bug que .pv-caja) */
  overflow: hidden;
  /* Animación PROPIA: `popupEntra` trae un translateX(-50%) que servía
     para el popup de avisos (centrado con left:50%) — aquí, al ser un
     hijo de un flex centrado, ese desplazamiento lo sacaba de pantalla
     por la izquierda (bug medido: left = -367px).
     ⚠� SIN `both` (Diego 02/11/2026: la ventana parpadeaba al mover el
     mouse): con fill-mode `both` el popup quedaba con un `transform`
     identidad permanente dentro del overlay, y cada repintado por hover
     lo volvía a componer (parpadeo). */
  animation: ceEntra 0.22s ease;
}

@keyframes ceEntra {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* La banda del título: misma identidad celeste de la vista previa */
.ce-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: linear-gradient(90deg, var(--planilla-inicio), var(--planilla-medio));
  color: #fff;
  padding: 10px 14px;
  margin: -14px -16px 12px;
  border-radius: 11px 11px 0 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.ce-cabecera h4 { color: #fff; }

/* Los botones 💾 Guardar / ✗ Cancelar van a la DERECHA del form
   (pedido de Diego 31/10/2026) */
.ce-acciones {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* Par oscuro del popup */
html[data-theme="oscuro"] .ce-popup {
  background: var(--surface);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65);
}

/* ---- 👷 Form de empleados: recuadro del toggle ESTADO (borde celeste,
   pedido de Diego 31/10/2026: "el toggler de Activo debe estar encerrado
   con un borde celeste y con un título Estado") ---- */
.caja-estado {
  border: 2px solid var(--primary);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(23, 168, 234, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 82px;
}

/* Checkbox convertido en switch redondeado (misma identidad visual que
   el toggle de � Parámetros) */
.caja-estado input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  border-radius: 13px;
  background: #cbd5e1;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  vertical-align: middle;
  margin: 0;
}

.caja-estado input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: left 0.2s;
}

.caja-estado input[type="checkbox"]:checked {
  background: var(--primary);
}

.caja-estado input[type="checkbox"]:checked::after {
  left: 23px;
}

.nota-estado {
  margin: 0;
  font-size: 0.74rem;
  color: var(--text-light);
}

/* Par oscuro del recuadro de estado */
html[data-theme="oscuro"] .caja-estado {
  background: rgba(23, 168, 234, 0.14);
}

html[data-theme="oscuro"] .caja-estado input[type="checkbox"] {
  background: #475569;
}

html[data-theme="oscuro"] .caja-estado input[type="checkbox"]:checked {
  background: #38bdf8;
}

/* ---- 👷 Pestaña 🧑 Personal: 4 COLUMNAS ANGOSTAS (Diego 31/10/2026:
   "Primero identificación luego apellidos, nombre, género, todos dentro
   de la primer línea de información, hacerlos más angostos, se pueden
   usar 4 columnas"). Todo el form comparte el MISMO grid → todas las
   columnas quedan en línea. ---- */
.emp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 16px;
  align-items: start;
}

/* Dirección ocupa 2 de las 4 columnas (es el campo más largo) */
.emp-ancho-2 {
  grid-column: span 2;
}

/* Los campos se aprietan para caber en 4: sin el ancho mínimo de
   .form-group (160px) que forzaba el wrap a 3 columnas */
.emp-grid .form-group {
  min-width: 0;
}

/* Ojo con EXCLUIR el checkbox del recuadro Estado: con width:100% el
   switch salía estirado a todo el ancho del recuadro (bug visual) */
.emp-grid .form-group input:not([type="checkbox"]),
.emp-grid .form-group select {
  width: 100%;
  min-width: 0;
}

/* Par oscuro: nada de color fijo, solo consistencia con el tema */
html[data-theme="oscuro"] .emp-grid .form-group input:not([type="checkbox"]),
html[data-theme="oscuro"] .emp-grid .form-group select {
  width: 100%;
}

/* ============================================================
   POPUPS GENERALES (Diego 31/10/2026: "Hacer popups para:
   proveedores · Bancos cuenta · Bancos movimiento ·
   Contabilidad movimiento · Proveedores compra")
   El envoltorio vive en index.html; la VISIBILIDAD la gobierna la
   clase .hidden del <form> de dentro (el TS no cambió): un observer
   en src/core/popups.ts la refleja en el overlay.
   ============================================================ */
.pv-overlay {
  position: fixed;
  inset: 0;
  /* ⚠� SIN `backdrop-filter`: el desenfoque de fondo hacía PARPADEAR la
     ventana al mover el mouse (Diego 02/11/2026, mismo caso que el popup
     de conceptos de la planilla). */
  background: rgba(10, 20, 45, 0.62);
  z-index: 930;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 12px 28px;
  overflow: auto;
}

.pv-caja {
  width: min(940px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  /* el color de la caja lo aporta LA BARRA (abajo); un border-top de 5px
     encima de ella creaba un escalón de color en las esquinas */
  border-top: none;
  border-radius: 12px;
  box-shadow: 0 30px 70px rgba(10, 20, 45, 0.45);
  padding: 0 16px 16px;
  /* CLAVE: recorta .pv-barra (que llega con margen -16px) dentro del
     radio de 12px — sin esto su esquina cuadrada sobresalía y se veía el
     "triángulo" azul en las 2 esquinas superiores (bug de Diego). */
  overflow: hidden;
  /* El popup NUNCA puede ser más alto que la pantalla (Diego 03/11/2026:
     "el popup no cabe en la pantalla"): la caja se limita al 92 % y el
     FORM de adentro hace scroll, dejando la barra del título fija. */
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  /* ⚠� SIN `both`: con fill-mode `both` quedaba un `transform` identidad
     permanente y cada repintado por hover lo recomponía (parpadeo al mover
     el mouse — Diego 02/11/2026). */
  animation: ceEntra 0.22s ease;
}

.pv-caja > form {
  overflow-y: auto;
  min-height: 0;
  padding-right: 6px;
}

/* Popups cuyo contenido NO es un <form> (ej. la explicación de la Renta):
   el contenido se marca con .pv-scroll y hace scroll dentro de la caja,
   dejando la barra del título y los botones SIEMPRE visibles
   (Diego 03/11/2026: "no se logra ver toda la explicación"). */
.pv-caja > .pv-scroll {
  overflow-y: auto;
  min-height: 0;
  padding-right: 6px;
  overscroll-behavior: contain;
}

/* Barra con el título + ✕ — el COLOR lo define el módulo más abajo
   (COLORES DE POPUP POR MÓDULO): default = Contabilidad (azul) */
.pv-barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--sobre-acento);
  padding: 11px 16px;
  /* llega a los bordes de la caja (padding 16px) */
  margin: 0 -16px 14px;
  /* radio del padding-box: 12px de caja − 1px de borde = 11px → las
     esquinas de la barra calzan EXACTAS con las de la caja */
  border-radius: 11px 11px 0 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.pv-titulo {
  font-size: 1rem;
  font-weight: 700;
}

.pv-cerrar {
  background: color-mix(in srgb, var(--sobre-acento) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--sobre-acento) 45%, transparent);
  color: var(--sobre-acento);
  font-size: 1rem;
  font-weight: 700;
  width: 34px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.15s;
}

.pv-cerrar:hover {
  background: color-mix(in srgb, var(--sobre-acento) 28%, transparent);
}

/* Dentro de la caja el form pierde su marco (lo da .pv-caja) y no debe
   apretar el scroll: los forms largos (movimiento, factura) se estiran */
.pv-caja > form {
  background: transparent;
  border: none;
  border-left: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Los forms inline de 1 columna siguen comportándose dentro del popup */
.pv-caja form.form-inline {
  display: block;
}

.pv-caja form.form-inline .form-group {
  margin-bottom: 12px;
}

/* Roles CONSULTA: su regla oculta el <form> pero el overlay quedaría
   como un fondo oscuro VAC�O → se oculta el popup entero */
body.rol-consulta .pv-overlay {
  display: none !important;
}

/* Par oscuro */
html[data-theme="oscuro"] .pv-caja {
  background: var(--surface);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65);
}

/* ============================================================
   COLORES DE POPUP (refresco UI 01/11/2026)
   La barra del popup toma el color de la app desde `--acento-app`
   (se hereda del `body[data-app]`), así que:
     · Contabilidad / Activos / Cuentas → azul
     · Bancos   → esmeralda
     · CxP      → terracota
     · Nómina   → celeste
   Un solo patrón para todas: degradado corto del acento + texto blanco
   (contraste ≥ 4.5:1 en el extremo oscuro). Ya no hay texto oscuro
   sobre metálico: la barra se lee igual en claro y en oscuro.
   ============================================================ */
.pv-barra {
  background: linear-gradient(100deg,
    var(--acento-app) 0%,
    color-mix(in srgb, var(--acento-app) 86%, #fff) 100%);
  color: var(--sobre-acento);
}

html[data-theme="oscuro"] .pv-barra {
  text-shadow: none;
}

/* El borde superior de la caja sigue el color de la app */
.pv-bancos .pv-caja,
.pv-cxp .pv-caja,
.pv-nomina .pv-caja { border-top-color: var(--acento-app); }

/* El ✕ usa el mismo contraste que el título de la barra */
.pv-bancos .pv-cerrar,
.pv-cxp .pv-cerrar,
.pv-nomina .pv-cerrar {
  color: var(--sobre-acento);
  background: color-mix(in srgb, var(--sobre-acento) 16%, transparent);
  border-color: color-mix(in srgb, var(--sobre-acento) 45%, transparent);
}
.pv-bancos .pv-cerrar:hover,
.pv-cxp .pv-cerrar:hover,
.pv-nomina .pv-cerrar:hover {
  background: color-mix(in srgb, var(--sobre-acento) 28%, transparent);
}

/* ============================================================
   GRID DE 3 COLUMNAS (cabecera del asiento de Contabilidad —
   Diego 31/10/2026: "Concepto, Referencia y Tipo de Asiento en la
   primer línea, Fecha, Moneda y tipo de cambio en la segunda… hacer
   3 columnas"). También lo usa cualquier form que quiera 3×N.
   ============================================================ */
.grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 16px;
  align-items: start;
  margin-bottom: 4px;
}

.grid-3col .form-group {
  min-width: 0;
  margin-bottom: 0;
}

.grid-3col .form-group input,
.grid-3col .form-group select {
  width: 100%;
  min-width: 0;
}

/* ---- Popups PEQUEÑOS (forms cortos: Períodos/Años contables) — no se
   estiran a los 940px de los forms grandes ---- */
.pv-chico {
  width: min(560px, 100%);
}

/* ---- 🗂� Activos / 📚 Cuentas: labels de columna alineados ---- */
.grid-3col .form-group label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* .etiqueta-campo venía del viejo flex horizontal con align-self:center;
   dentro de un .form-group (columna) debe quedarse ARRIBA como las demás */
.grid-3col .etiqueta-campo {
  align-self: stretch;
  cursor: help;
}

/* Respiro de los botones respecto a los campos
   (Diego: "Nivel, guardar y cancelar están demasiado juntos") */
.pv-caja .ce-acciones {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

/* ============================================================
   � PERMISOS POR MÓDULO — ocultación de botones (Diego 31/10/2026:
   "ligar las acciones de agregar, modificar y borrar a los respectivos
   botones o íconos de las aplicaciones").

   Esto es SOLO comodidad visual: el que de verdad bloquea es el
   SERVIDOR (`require_permiso(modulo, accion)` → 403).

   Fuente de la regla: `body[data-perm]` lo escribe
   `api.aplicarPermisosModulo()` con "modulo.accion" de lo que el
   usuario NO puede hacer; vacío = sin restricción (no se oculta nada).

   Truco: no hay que etiquetar cada botón —
     · `body[data-app]` ya dice la app activa
     · �� = .btn-icon · 🗑� = .btn-danger-sm (clases existentes)
     · los ➕ "Nuevo" los marca TS con [data-perm-accion="agregar"]
   ============================================================ */
body[data-app="contabilidad"][data-perm~="contabilidad.agregar"] .section.active [data-perm-accion="agregar"] {
  display: none !important;
}
body[data-app="contabilidad"][data-perm~="contabilidad.agregar"] .pv-contabilidad [data-perm-accion="agregar"] {
  display: none !important;
}
body[data-app="contabilidad"][data-perm~="contabilidad.modificar"] .section.active .btn-icon {
  display: none !important;
}
body[data-app="contabilidad"][data-perm~="contabilidad.modificar"] .pv-contabilidad .btn-icon {
  display: none !important;
}
body[data-app="contabilidad"][data-perm~="contabilidad.borrar"] .section.active .btn-danger-sm {
  display: none !important;
}
body[data-app="contabilidad"][data-perm~="contabilidad.borrar"] .pv-contabilidad .btn-danger-sm {
  display: none !important;
}
body[data-app="bancos"][data-perm~="bancos.agregar"] .section.active [data-perm-accion="agregar"] {
  display: none !important;
}
body[data-app="bancos"][data-perm~="bancos.agregar"] .pv-bancos [data-perm-accion="agregar"] {
  display: none !important;
}
body[data-app="bancos"][data-perm~="bancos.modificar"] .section.active .btn-icon {
  display: none !important;
}
body[data-app="bancos"][data-perm~="bancos.modificar"] .pv-bancos .btn-icon {
  display: none !important;
}
body[data-app="bancos"][data-perm~="bancos.borrar"] .section.active .btn-danger-sm {
  display: none !important;
}
body[data-app="bancos"][data-perm~="bancos.borrar"] .pv-bancos .btn-danger-sm {
  display: none !important;
}
body[data-app="cxp"][data-perm~="cxp.agregar"] .section.active [data-perm-accion="agregar"] {
  display: none !important;
}
body[data-app="cxp"][data-perm~="cxp.agregar"] .pv-cxp [data-perm-accion="agregar"] {
  display: none !important;
}
body[data-app="cxp"][data-perm~="cxp.modificar"] .section.active .btn-icon {
  display: none !important;
}
body[data-app="cxp"][data-perm~="cxp.modificar"] .pv-cxp .btn-icon {
  display: none !important;
}
body[data-app="cxp"][data-perm~="cxp.borrar"] .section.active .btn-danger-sm {
  display: none !important;
}
body[data-app="cxp"][data-perm~="cxp.borrar"] .pv-cxp .btn-danger-sm {
  display: none !important;
}
body[data-app="nomina"][data-perm~="nomina.agregar"] .section.active [data-perm-accion="agregar"] {
  display: none !important;
}
body[data-app="nomina"][data-perm~="nomina.agregar"] .pv-nomina [data-perm-accion="agregar"] {
  display: none !important;
}
body[data-app="nomina"][data-perm~="nomina.modificar"] .section.active .btn-icon {
  display: none !important;
}
body[data-app="nomina"][data-perm~="nomina.modificar"] .pv-nomina .btn-icon {
  display: none !important;
}
body[data-app="nomina"][data-perm~="nomina.borrar"] .section.active .btn-danger-sm {
  display: none !important;
}
body[data-app="nomina"][data-perm~="nomina.borrar"] .pv-nomina .btn-danger-sm {
  display: none !important;
}

/* ---- � Toggles del popup de permisos por módulo ---- */
#tablaPermisos input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 22px;
  border-radius: 12px;
  background: #cbd5e1;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  vertical-align: middle;
  margin: 0;
}

#tablaPermisos input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: left 0.2s;
}

#tablaPermisos input[type="checkbox"]:checked {
  background: var(--primary);
}

#tablaPermisos input[type="checkbox"]:checked::after {
  left: 21px;
}

/* "Solo lectura" en rojo/naranja: es una RESTRICCIÓN, no un permiso */
#tablaPermisos input.tg-solo-lectura:checked {
  background: var(--warning, #d97706);
}

/* Par oscuro */
html[data-theme="oscuro"] #tablaPermisos input[type="checkbox"] {
  background: #475569;
}

html[data-theme="oscuro"] #tablaPermisos input[type="checkbox"]:checked {
  background: #38bdf8;
}

/* ============================================================
   ⬆� VISTA PREVIA DE IMPORTACIÓN DE CAT�LOGO (Diego 01/11/2026)
   ============================================================ */
.imp-resumen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}

.imp-bloque {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.86rem;
}

.imp-niveles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.imp-nivel {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--text);
  border-radius: 8px;
  padding: 4px 9px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.imp-nivel b { color: var(--primary); }
.imp-nivel small { color: var(--text-light); }

.imp-tabla-grupos { margin-top: 8px; }
.imp-tabla-grupos th { font-size: 0.72rem; }

.imp-nota {
  margin: 8px 0 0;
  font-size: 0.74rem;
  color: var(--text-light);
}

/* Etiqueta de estado: BAL / RES / MEM */
.imp-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #fff;
}

.imp-BAL { background: #2563eb; }   /* Balance */
.imp-RES { background: #16a34a; }   /* Resultados */
.imp-MEM { background: #64748b; }   /* memoranda */

/* Errores (bloquean) y avisos (no bloquean) */
.imp-errores {
  background: color-mix(in srgb, var(--danger, #dc2626) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 45%, transparent);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 0.85rem;
}

.imp-errores ul { margin: 6px 0 0 18px; padding: 0; }
.imp-errores li { margin-bottom: 5px; line-height: 1.5; }

.imp-avisos {
  background: color-mix(in srgb, var(--warning, #d97706) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning, #d97706) 45%, transparent);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 0.85rem;
}

.imp-avisos ul { margin: 6px 0 0 18px; padding: 0; }
.imp-avisos li { margin-bottom: 5px; line-height: 1.5; }

/* Tabla de cuentas: scrolleable para archivos largos */
.imp-tabla {
  max-height: 34vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.imp-tabla table { margin: 0; }
.imp-tabla thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2, var(--surface));
  z-index: 1;
}

.imp-mala td { background: color-mix(in srgb, var(--danger, #dc2626) 7%, transparent); }

/* Par oscuro */
html[data-theme="oscuro"] .imp-bloque { background: var(--surface); }
html[data-theme="oscuro"] .imp-tabla thead th { background: #1e293b; }

/* ============================================================
   ✨ CONCEPTO PERSONALIZADO en el popup 🧾 (Diego 01/11/2026)
   Bloque que aparece SOLO cuando el código escrito no existe en el
   catálogo: pide Nombre + Naturaleza y el servidor lo crea al guardar.
   ============================================================ */
.ce-nuevo {
  border: 2px dashed var(--primary);
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  padding: 10px 14px;
  margin: 4px 0 10px;
}

.ce-nuevo-aviso {
  margin: 0;
  font-size: 0.83rem;
  color: var(--text);
}

.ce-nuevo label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-light);
}

.ce-nuevo input,
.ce-nuevo select {
  width: auto;
  min-width: 150px;
}

/* El campo de concepto pasa a ser texto libre con datalist → estilo de
   input normal (el placeholder guía: "Elija o escriba un concepto") */
#ceConcepto {
  text-transform: uppercase;
}


/* ============================================================
   🎨 REFRESCO DE INTERFAZ (Diego 01/11/2026)
   Pedido: "que los colores sean pleasant para los ojos, los botones y
   textos y demás del UI/UX".

   Criterio de este bloque (sin cambiar la estructura de ninguna ventana):
     · un solo acento por app (`--acento-app`) usado en botones, focos,
       encabezados, pestañas, tablas y popups;
     · superficies con sombras suaves de dos capas (nada de bordes duros);
     · radios consistentes (10px controles · 14px tarjetas y tablas);
     · TODO tiene su par en el tema oscuro;
     · respeta `prefers-reduced-motion` y no imprime degradados.
   ============================================================ */

/* ---------- 1) Tarjetas del Dashboard ---------- */
.card {
  border-radius: 14px;
  border-left-width: 4px;
  border-left-color: var(--card-color, var(--border));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--card-color, var(--surface)) 7%, var(--surface)) 0%,
    var(--surface) 62%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05),
              0 6px 18px rgba(15, 23, 42, 0.05);
  transition: transform 0.18s, box-shadow 0.18s;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06),
              0 12px 26px rgba(15, 23, 42, 0.09);
}

/* ⚠� POPUP ABIERTO DENTRO DE UNA TARJETA (Diego 02/11/2026: *"si abro el
   popup y muevo el mouse, la ventana parpadea descontroladamente"*).
   El `transform` del hover convierte a la tarjeta en el *containing block*
   del overlay `position: fixed` → el overlay se reposiciona y se recorta
   (medido: de 0,0 1081×742 a 28,203 1029×604), el puntero queda fuera de
   la tarjeta, se apaga el hover, vuelve… y así en cada frame.
   Mientras haya un popup visible dentro, la tarjeta NO se mueve. */
.card:has(.ce-overlay:not(.hidden)):hover,
.card:has(.pv-overlay:not(.hidden)):hover {
  transform: none;
}

.card-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--text-light);
}

.card-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

.card-activo  { --card-color: var(--activo); }
.card-pasivo  { --card-color: var(--pasivo); }
.card-capital { --card-color: var(--capital); }
.card-ingreso { --card-color: var(--ingreso); }
.card-egreso  { --card-color: var(--egreso); }
.card-balance { --card-color: #0f172a; }

html[data-theme="oscuro"] .card-balance { --card-color: #e2e8f0; }

html[data-theme="oscuro"] .card {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--card-color, var(--surface)) 14%, var(--surface)) 0%,
    var(--surface) 65%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.30);
}

/* ---------- 2) Badges: píldoras suaves con borde ---------- */
.badge,
.estado-badge,
.tipo-badge,
.nivel-badge,
.clasif-badge {
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
}

.badge-ok,
.badge-bad {
  border-radius: 999px;
}

/* ---------- 3) Barra de apps: píldora activa con halo ---------- */
.nav-btn {
  border-radius: 10px;
  transition: background 0.16s, color 0.16s, box-shadow 0.16s;
}

.nav-app.active,
.nav-sub .nav-btn.active,
.nav-sub .nav-dd-btn.active {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--acento-app) 28%, transparent);
}

.nav-app:hover:not(.active),
.nav-btn:hover:not(.active),
.nav-dd-btn:hover:not(.active) {
  background: color-mix(in srgb, var(--acento-app) 9%, var(--bg));
  color: var(--text);
}

/* Menú desplegable: sombra más limpia */
.nav-dd-menu {
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16),
              0 2px 6px rgba(15, 23, 42, 0.08);
  animation: menuEntra 0.12s ease-out;
}

@keyframes menuEntra {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 4) Popups: esquinas y sombra ---------- */
.pv-caja,
.ce-popup {
  border-radius: 14px;
}

.pv-overlay,
.ce-modal {
  background: rgba(10, 20, 45, 0.48);
}

/* ---------- 5) Toasts: más legibles y con acento ---------- */
.toast {
  border-radius: 12px;
  border-left: 4px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.30);
  font-weight: 500;
}

/* ---------- 6) Filtros y cajas de resumen ---------- */
.filtros {
  gap: 10px;
}

.filtros input,
.filtros select {
  min-height: var(--alto-campo);
}

/* Tablas anchas (ej. Activos Fijos, CxP, Libro de bancos): scroll horizontal
   propio para que NINGUNA columna quede recortada por el `overflow:hidden`
   del radio de la tabla. `initTablasScroll()` envuelve TODAS las tablas de
   la app en este contenedor; si la tabla entra, se ve igual que antes. */
.tabla-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 14px;
  padding-bottom: 2px;
}

/* En las 3 tablas más anchas el padding se reduce para que entren completas
   en pantallas normales (si no, obligaría a desplazar sin necesidad) */
#tablaActivos th,
#tablaActivos td,
#tablaCxp th,
#tablaCxp td,
#tablaListaActivos th,
#tablaListaActivos td,
#tablaBanco th,
#tablaBanco td {
  padding-left: 8px;
  padding-right: 8px;
}
/* ---------- 7) Filas de totales: línea fina en vez de borde grueso ---------- */
.total-row td {
  border-top: 2px solid color-mix(in srgb, var(--acento-app) 45%, var(--border));
  font-weight: 700;
  background: color-mix(in srgb, var(--acento-app) 4%, var(--surface));
}

/* Columna de acciones: ancho mínimo y en UNA sola línea, para que �� 🗑�
   no se apilen cuando la tabla tiene muchas columnas. */
.tabla th.col-acciones {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.tabla td:has(> .btn-icon, > .btn-danger-sm, > .btn-ver-icon) {
  white-space: nowrap;
  text-align: right;
}

.tabla td:has(> .btn-icon, > .btn-danger-sm, > .btn-ver-icon) > button {
  vertical-align: middle;
}

/* ---------- 8) Scrollbar discreta (solo navegadores WebKit) ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-light) 45%, transparent) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-light) 40%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text-light) 62%, transparent);
  background-clip: content-box;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- 9) Accesibilidad: menos movimiento si el sistema lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 10) Impresión: el encabezado va en blanco ---------- */
@media print {
  .section.active > .section-header {
    background: none !important;
    box-shadow: none !important;
    border: 1px solid #999 !important;
  }

  .section.active > .section-header h2 {
    color: #000 !important;
  }

  .card {
    background: none !important;
    box-shadow: none !important;
  }

    /* El bloque del empleado se imprime con TODOS los empleados legibles */
  #tablaPlanillaDetalle tbody tr.fila-empleado {
    opacity: 1 !important;
  }

/* El scroll de tablas anchas no aplica en papel */
  .tabla-scroll {
    overflow: visible !important;
  }

  .tabla-scroll .tabla {
    min-width: 0 !important;
  }
}


/* ============================================================
   🗂� CONFIGURACIÓN DE ACTIVOS FIJOS (Diego 01/11/2026)
   "hay 5 campos para cuentas, pero ninguno indica el nombre o qué
   cuenta debe ir ahí".
   → Cada campo lleva su ETIQUETA, su ayuda y el tipo de cuenta; arriba
   va una guía con las 5 cuentas y cuándo se usa cada una.
   ============================================================ */
.af-guia {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--acento-app);
  border-radius: 14px;
  padding: 14px 18px 12px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05),
              0 4px 14px rgba(15, 23, 42, 0.04);
}

.af-guia-titulo {
  margin: 0 0 10px;
  font-size: 0.98rem;
  color: var(--acento-app);
}

.tabla-af-guia {
  box-shadow: none;
  border: 1px solid var(--border);
}

.tabla-af-guia th,
.tabla-af-guia td {
  padding: 7px 10px;
  font-size: 0.82rem;
  vertical-align: top;
}

.tabla-af-guia td:nth-child(2) {
  color: var(--text-light);
}

.af-guia-pie {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--text-light);
}

/* Los 5 campos: rejilla que se acomoda sola (2–3 columnas) */
.grid-cuentas-af {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px 20px;
}

.grid-cuentas-af .form-group label {
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--text);
}

.cfg-ayuda {
  display: block;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--text-light);
}

.cfg-ayuda b {
  color: var(--text);
  font-weight: 600;
}

.cfg-ayuda i {
  font-style: normal;
  color: var(--acento-app);
}

/* Modo oscuro: la guía usa las variables del tema, solo suavizamos bordes */
html[data-theme="oscuro"] .af-guia {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.25);
}


/* ============================================================
   🧾 ACCIONES AL PIE DE UN FORMULARIO EN POPUP (Diego 01/11/2026)
   "En un nuevo proveedor, los botones de Guardar y Cancelar están muy
   pegados del campo de Observaciones" → quedaban a 1 px del textarea.
   Regla general para CUALQUIER popup: la fila de acciones (Guardar ·
   Cancelar) deja aire respecto del último campo y sus botones no se
   aprietan entre sí.
   ============================================================ */
.pv-caja form > .form-actions,
.pv-caja form > .ce-acciones {
  margin-top: 18px;
}

.pv-caja form > .form-actions {
  gap: 10px;
  align-items: center;
}

/* El textarea del proveedor no debe quedar pegado a la fila de acciones */
#cxpProvObs {
  min-height: 62px;
}


/* ============================================================
   👤 BLOQUE DEL EMPLEADO ABIERTO EN LA VISTA PREVIA DE PLANILLA
   (Diego 01/11/2026: al editar los conceptos de un empleado, su
   desglose "se confundía" con los otros empleados de la pantalla).

   La FILA del empleado abierto + su DESGLOSE forman UNA sola tarjeta:
     · fila:  fondo tenue del color de la app + barra izquierda de 4px
              + nombre en negrita (deja de parecer una fila más)
     · panel: mismo fondo, CONTINÚA la barra, encabezado propio con
              nombre · cédula · ✕ Cerrar y la tabla interna enmarcada
     · borde inferior que cierra el bloque antes del siguiente empleado
   ============================================================ */

/* Fila del empleado: transición suave al abrir/cerrar */
.fila-empleado {
  transition: background 0.15s;
}

.fila-empleado.abierta {
  background: color-mix(in srgb, var(--acento-app) 9%, var(--surface));
}

/* La fila abierta se funde con el panel (sin borde entre los dos) y lleva
   la barra de color en su primera celda */
.fila-empleado.abierta > td {
  border-bottom: 0;
  font-weight: 600;
}

.fila-empleado.abierta > td:first-child {
  border-left: 4px solid var(--acento-app);
  padding-left: 9px;
}

/* Abierta: el triángulo gira 90° (apunta hacia abajo) y el chip lleva
   un anillo para marcar el estado */
.fila-empleado.abierta .fila-flecha {
  color: var(--sobre-acento);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sobre-acento) 40%, transparent),
              0 2px 6px color-mix(in srgb, var(--acento-app) 40%, transparent);
}

.fila-empleado.abierta .fila-flecha::before {
  transform: rotate(90deg);
  margin-left: 0;
}

/* Panel del desglose: continúa la tarjeta de la fila */
.fila-deta-lineas > .desglose-ce {
  background: color-mix(in srgb, var(--acento-app) 4%, var(--surface));
  border-top: none;
  border-left: 4px solid var(--acento-app);
  padding: 0 12px 14px;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--acento-app) 30%, var(--border));
}

/* Encabezado del panel: nombre + cédula + cerrar */
.desglose-ce-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: none;
  color: var(--acento-app);
  font-weight: 700;
  font-size: 0.84rem;
  padding: 10px 0 8px;
  margin: 0 0 10px;
  border-bottom: 1px dashed color-mix(in srgb, var(--acento-app) 32%, var(--border));
  text-shadow: none;
}

.desglose-ce-cedula {
  font-weight: 600;
  font-size: 0.74rem;
  color: var(--text-light);
  background: color-mix(in srgb, var(--acento-app) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--acento-app) 22%, var(--border));
  border-radius: 999px;
  padding: 1px 9px;
  letter-spacing: 0.02em;
}

.desglose-ce-cerrar {
  margin-left: auto;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-light);
  font-size: 0.85rem;
  line-height: 1;
  padding: 3px 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.desglose-ce-cerrar:hover {
  background: color-mix(in srgb, var(--acento-app) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--acento-app) 28%, var(--border));
  color: var(--acento-app);
}

/* Tabla interna del desglose: enmarcada para separarla de la tarjeta */
.tabla-desglose {
  margin: 0;
  box-shadow: none;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.tabla-desglose thead th {
  background: color-mix(in srgb, var(--acento-app) 7%, var(--surface));
  color: var(--acento-app);
}

/* Los botones �� Editar del desglose quedan un poco más chicos: así la
   tabla interna no compite con la información del empleado */
.tabla-desglose td .btn-secondary {
  padding: 3px 8px;
  font-size: 0.74rem;
}

/* � RENGLONES M�S BAJOS en el desglose del empleado (Diego 03/11/2026:
   "hacer menos altos los renglones del desglose de montos"). Solo afecta a
   la tabla INTERNA del desglose, no a la tabla principal de la planilla. */
.tabla-desglose th,
.tabla-desglose td {
  padding: 5px 10px;
  font-size: 0.84rem;
  line-height: 1.25;
}

.tabla-desglose thead th {
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 0.7rem;
}

.tabla-desglose td .badge {
  padding: 1px 6px;
  font-size: 0.68rem;
}

/* Modo oscuro: el tinte del acento ya trae su par; solo se aclara el
   borde inferior del bloque para que se lea sobre el fondo oscuro */
html[data-theme="oscuro"] .fila-deta-lineas > .desglose-ce {
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--acento-app) 45%, var(--border));
}


/* ============================================================
   👤 BLOQUE DEL EMPLEADO — mejoras aprobadas por Diego (01/11/2026)
   ① Mientras hay un empleado abierto, los DEM�S se atenúan (se ve de
      un vistazo de quién es el desglose); al pasar el mouse recuperan
      su opacidad normal para poder abrir otro.
   ② El encabezado del desglose muestra el NETO del empleado y el botón
      ➕ Agregar (con su contador), así no hay que volver a la fila.
   ============================================================ */

/* â‘  Atenuar a los otros empleados (el abierto y los totales no se tocan) */
#tablaPlanillaDetalle tbody:has(> tr.fila-deta-lineas) > tr.fila-empleado:not(.abierta) {
  opacity: 0.62;
}

#tablaPlanillaDetalle tbody:has(> tr.fila-deta-lineas) > tr.fila-empleado:not(.abierta):hover {
  opacity: 1;
}

/* â‘¡ Neto del empleado en el encabezado del desglose */
.desglose-ce-neto {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-light);
  white-space: nowrap;
}

.desglose-ce-neto strong {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* El ➕ Agregar del encabezado se ve como el de la fila, pero más chico */
.desglose-ce-titulo .btn-ce {
  margin-left: 2px;
}

/* El ✕ siempre a la derecha, aunque el encabezado haga wrap */
.desglose-ce-cerrar {
  order: 99;
}


/* ============================================================
   🌙 BLOQUE DEL EMPLEADO EN OSCURO (Diego 01/11/2026: "en el modo
   oscuro sigue costando distinguir de quién son los conceptos").
   En claro bastaba un tinte suave; sobre el azul casi negro no.
   Acá el bloque abierto se separa con: tinte más marcado, barra más
   gruesa, un CONTORNO del color de la app y el nombre en blanco.
   ============================================================ */
html[data-theme="oscuro"] .fila-empleado.abierta {
  background: color-mix(in srgb, var(--acento-app) 16%, var(--surface));
}

html[data-theme="oscuro"] .fila-empleado.abierta > td {
  color: #f8fafc;
}

html[data-theme="oscuro"] .fila-empleado.abierta > td:first-child {
  border-left-width: 5px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--acento-app) 45%, transparent);
}

html[data-theme="oscuro"] .fila-deta-lineas > .desglose-ce {
  background: color-mix(in srgb, var(--acento-app) 11%, var(--surface));
  border-left-width: 5px;
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--acento-app) 55%, var(--border)),
    0 0 0 1px color-mix(in srgb, var(--acento-app) 32%, transparent);
}

/* El encabezado del desglose, con una franja propia para que no se pierda */
html[data-theme="oscuro"] .desglose-ce-titulo {
  color: color-mix(in srgb, var(--acento-app) 70%, #fff);
  border-bottom-color: color-mix(in srgb, var(--acento-app) 45%, var(--border));
}

/* La tabla de líneas, un escalón más clara que el panel */
html[data-theme="oscuro"] .tabla-desglose {
  border-color: color-mix(in srgb, var(--acento-app) 30%, var(--border));
}

html[data-theme="oscuro"] .tabla-desglose thead th {
  background: color-mix(in srgb, var(--acento-app) 14%, var(--surface));
  color: color-mix(in srgb, var(--acento-app) 65%, #fff);
}

/* Los OTROS empleados se atenúan un poco más en oscuro (0.5) */
html[data-theme="oscuro"] #tablaPlanillaDetalle tbody:has(> tr.fila-deta-lineas) > tr.fila-empleado:not(.abierta) {
  opacity: 0.5;
}


/* ============================================================
   📊 GR�FICO HOMBRES vs MUJERES (Diego 01/11/2026)
   Barras horizontales con el conteo de la compañía. Colores con par
   en modo oscuro (regla de AGENTS.md). Se ve también en CONSULTA.
   ============================================================ */
.emp-genero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05),
              0 4px 14px rgba(15, 23, 42, 0.04);
}

.emp-genero-cab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.92rem;
}

.emp-genero-total {
  font-size: 0.78rem;
  color: var(--text-light);
}

.emp-genero-barras {
  display: grid;
  gap: 9px;
}

.emp-genero-fila {
  display: grid;
  grid-template-columns: 118px 1fr 92px;
  align-items: center;
  gap: 12px;
  font-size: 0.84rem;
}

.emp-genero-et {
  color: var(--text);
  white-space: nowrap;
}

.emp-genero-pista {
  height: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.emp-genero-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s ease;
}

.emp-genero-fill.h {
  background: linear-gradient(90deg, var(--primary),
              color-mix(in srgb, var(--primary) 55%, #fff));
}

.emp-genero-fill.m {
  background: linear-gradient(90deg, #db2777, #f472b6);
}

.emp-genero-fill.x {
  background: var(--text-light);
  opacity: 0.35;
}

.emp-genero-num {
  text-align: right;
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.emp-genero-num small {
  color: var(--text-light);
}

/* Par OSCURO (el rosa y el azul se aclaran sobre el fondo oscuro) */
html[data-theme="oscuro"] .emp-genero-fill.m {
  background: linear-gradient(90deg, #f472b6, #fbcfe8);
}

html[data-theme="oscuro"] .emp-genero {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.25);
}


/* ============================================================
   🧩 CONCEPTOS PERSONALIZADOS DEL EMPLEADO (dentro de su bloque)
   Diego 01/11/2026: "mostrar/agregar/editar conceptos personalizados
   del empleado seleccionado". Lista compacta + botón ➕ en el encabezado
   del desglose (abre el editor 🧾, donde también se editan y quitan).
   ============================================================ */
.desglose-ce-capturas {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--acento-app) 30%, var(--border));
}

.desglose-ce-capturas-cab {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 0.82rem;
  color: var(--acento-app);
}

.desglose-ce-capturas-n {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-light);
}

.desglose-ce-capturas-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.desglose-ce-cap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.8rem;
}

.desglose-ce-cap-desc {
  color: var(--text-light);
}

.desglose-ce-cap-monto {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.desglose-ce-cap-vacio {
  font-size: 0.78rem;
  color: var(--text-light);
  font-style: italic;
}


/* ============================================================
   🧾 CAMPO "CONCEPTO" DEL POPUP (Diego 01/11/2026: "el selector es muy
   angosto y no se entiende lo que se necesita en el campo").
   Ahora va en su PROPIA fila, con etiqueta y ancho completo.
   ============================================================ */
.ce-fila-concepto {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.ce-etiqueta {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.ce-concepto-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  font-size: 0.95rem;
}

.ce-ayuda {
  margin: 0 0 10px;
  font-size: 0.76rem;
  color: var(--text-light);
}

/* ---- 🧩 Conceptos del empleado (pestaña de la ficha) ---- */
.emp-conc-lista {
  margin-top: 10px;
}

/* 🧩 Grilla del formulario de conceptos del empleado (Diego 02/11/2026:
   "Concepto, Monto, Porcentaje y Cantidad en la primera línea, y Cantidad
   más angosta"). La ayuda del % va en su propia línea completa. */
.pv-caja .emp-conc-form,
.emp-conc-form {
  display: grid;
  grid-template-columns: minmax(190px, 2.2fr) minmax(105px, 1fr) minmax(215px, 1.7fr) 92px;
  grid-template-areas:
    "c m p q"
    "h h h h"
    "d d d d"
    "fechas fechas fechas fechas"
    "act botones botones botones";
  gap: 8px 16px;
  align-items: start;
  margin-bottom: 10px;
}

/* Desde + Hasta pegados, con el mismo alto (Diego 03/11/2026) */
.emp-conc-fechas {
  grid-area: fechas;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

/* El `.form-group` global crece (flex:1): acá NO, cada fecha mide lo suyo */
.emp-conc-fechas .form-group {
  flex: 0 0 auto;
  min-width: 0;
}

.emp-conc-form .form-group {
  min-width: 0;
}

.emp-conc-form .emp-conc-q input {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}

.emp-conc-c { grid-area: c; }
.emp-conc-m { grid-area: m; }
.emp-conc-p { grid-area: p; }
.emp-conc-q { grid-area: q; }
.emp-conc-d { grid-area: d; }
.emp-conc-desde { grid-area: desde; }
.emp-conc-hasta { grid-area: hasta; }

.emp-conc-h {
  grid-area: h;
  margin: -2px 0 0;
}

.emp-conc-act {
  grid-area: act;
  align-self: center;
  white-space: nowrap;
}

.emp-conc-botones {
  grid-area: botones;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.emp-conc-form .form-group {
  min-width: 0;
}

.emp-conc-aviso {
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: var(--text-light);
}

/* 🧩 Subtítulos de los grupos del bloque (empleado / capturado) */
.desglose-ce-grupo {
  margin: 10px 0 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-light);
}

/* ============================================================
   🔎 LISTA PROPIA DEL AUTOCOMPLETAR (Diego 01/11/2026: el datalist
   nativo sale angosto y corta los nombres de los conceptos).
   Panel flotante ANCHO, con código + nombre, filtrable y navegable.
   ============================================================ */
.auto-panel {
  position: fixed;
  z-index: 1200;
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22);
  padding: 4px;
}

.auto-panel.hidden {
  display: none;
}

.auto-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text);
}

.auto-item:hover,
.auto-item.sel {
  background: color-mix(in srgb, var(--acento-app) 12%, var(--surface));
}

.auto-cod {
  flex: 0 0 auto;
  min-width: 90px;
  font-weight: 700;
  color: var(--acento-app);
  white-space: nowrap;
}

.auto-nom {
  color: var(--text-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme="oscuro"] .auto-panel {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   📅 AVANCE DE LA CONTABILIDAD DEL AÑO (Diego 02/11/2026)
   12 casillas (una por mes) con el estado real de trabajo:
   cerrado · con asientos · sin movimientos · aún no llega.
   ============================================================ */
.avance-anio {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px 14px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05),
              0 4px 14px rgba(15, 23, 42, 0.04);
}

.avance-anio-vacio {
  font-size: 0.86rem;
  color: var(--text-light);
}

.avance-cab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.avance-titulo {
  font-size: 1rem;
  color: var(--text);
}

.avance-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--text-light);
}

.avance-pct {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--acento-app);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.avance-barra {
  height: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin: 12px 0 12px;
}

.avance-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--acento-app),
              color-mix(in srgb, var(--acento-app) 55%, #fff));
  transition: width 0.5s ease;
}

.avance-meses {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
}

.avance-mes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text-light);
  font-size: 0.72rem;
}

.avance-mes-nom {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.avance-mes-n {
  font-size: 0.68rem;
  opacity: 0.9;
  min-height: 12px;
  font-variant-numeric: tabular-nums;
}

/* Cerrado */
.avance-mes.cer {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

/* Con asientos */
.avance-mes.con {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  color: var(--primary);
}

/* Sin movimientos */
.avance-mes.vac {
  background: var(--bg);
  color: var(--text-light);
}

/* Aún no llega */
.avance-mes.fut {
  border-style: dashed;
  opacity: 0.55;
}

.avance-leyenda {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 0.74rem;
  color: var(--text-light);
}

.avance-leyenda span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.avance-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1px solid var(--border);
}

.avance-dot.cer { background: #dcfce7; border-color: #86efac; }
.avance-dot.con { background: color-mix(in srgb, var(--primary) 25%, var(--surface)); border-color: var(--primary); }
.avance-dot.vac { background: var(--bg); }
.avance-dot.fut { background: transparent; border-style: dashed; }

/* Pares del modo oscuro */
html[data-theme="oscuro"] .avance-mes.cer {
  background: #052e16;
  border-color: #166534;
  color: #86efac;
}

html[data-theme="oscuro"] .avance-dot.cer {
  background: #052e16;
  border-color: #166534;
}

html[data-theme="oscuro"] .avance-anio {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   🧩 TABLA DE CONCEPTOS DEL EMPLEADO (Diego 02/11/2026)
   Tenía 10 columnas dentro de un popup de 940 px → la columna de
   ACCIONES (��/🗑�) quedaba fuera de la vista. Ahora son 8 columnas
   y el padding es compacto: el botón de eliminar SIEMPRE se ve.
   ============================================================ */
#tablaEmpConceptos th,
#tablaEmpConceptos td {
  padding: 8px 9px;
  font-size: 0.84rem;
  vertical-align: top;
}

#tablaEmpConceptos th {
  font-size: 0.72rem;
}

#tablaEmpConceptos td:first-child {
  min-width: 120px;
}

#tablaEmpConceptos td:last-child {
  white-space: nowrap;
  text-align: center;
}

/* % del salario vs % del imponible (Diego 02/11/2026) */
.ec-pct-fila {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ec-pct-fila input {
  width: 90px;
  flex: 0 0 auto;
}

.ec-pct-fila select {
  flex: 1 1 auto;
  min-width: 0;
}


/* ============================================================
   � ALTO ÚNICO DE LOS CAMPOS EN CONCEPTOS DEL EMPLEADO
   (Diego 02/11/2026: "hacer el alto de los campos igual al de la
   fecha Desde y Hasta"). Los campos de fecha miden 34 px; los demás
   quedaban en 42/44 → se igualan todos a 34 px.
   ============================================================ */
.emp-conc-form input:not([type="checkbox"]),
.emp-conc-form select {
  height: var(--alto-campo);
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 0.88rem;
}

/* La caja de la fecha ya mide 34 px: se deja tal cual */
.emp-conc-form .campo-fecha,
.emp-conc-form .campo-fecha .fecha-texto {
  height: var(--alto-campo);
}

/* ============================================================
   � ALTO ÚNICO DE TODOS LOS CAMPOS (Diego 02/11/2026:
   "todos los campos de todos los formularios de la aplicación deben
   tener esa misma altura que acabas de usar" = 34 px).
   Aplica a inputs y selects (NO checkboxes, radios, archivos, botones
   ni textarea —que crecen con su contenido—).
   La pantalla de LOGIN conserva su altura grande (es otra identidad).
   ============================================================ */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
select {
  height: var(--alto-campo);
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Textarea: alto mínimo cómodo, nunca fijo */
textarea {
  min-height: 68px;
}

/* Login: se mantiene la altura original de su diseño */
.login-card input,
.login-card select {
  height: 46px !important;
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}

/* Leyenda de la columna P/D en Conceptos de planilla (Diego 02/11/2026) */
.con-leyenda {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -4px 0 12px;
  font-size: 0.78rem;
  color: var(--text-light);
}

.con-leyenda-sep {
  opacity: 0.6;
}

/* Estado del Libro de bancos (Diego 03/11/2026): la columna queda solo con el
   checkbox y la leyenda arriba de la tabla. VERDE a propósito: el checkbox
   deshabilitado del navegador se ve gris y no se nota. */
.celda-estado-banco {
  text-align: center;
  width: 30px;
  padding-left: 3px !important;
  padding-right: 3px !important;
}

.check-estado-banco,
.leyenda-estado-banco input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  border: 1.5px solid var(--acento-app);
  border-radius: 3px;
  background: var(--surface);
  position: relative;
  opacity: 1;
  cursor: default;
}

.check-estado-banco:checked,
.leyenda-estado-banco input[type="checkbox"]:checked {
  background: var(--acento-app);
}

.check-estado-banco:checked::after,
.leyenda-estado-banco input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  inset: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sobre-acento);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

/* Aviso de la escala de renta: primer tramo cobrando (Diego 02/11/2026) */
.aviso-tramo {
  color: #b91c1c;
  background: #fef2f2;
  padding: 10px 12px;
  font-size: 0.84rem;
}

html[data-theme="oscuro"] .aviso-tramo {
  color: #fca5a5;
  background: #3f1d1d;
}

/* ============================================================
   🧾 LIQUIDACIONES (Diego 03/11/2026): grilla de revisión
   ============================================================ */
.liq-grid { display: grid; grid-template-columns: 1.1fr 1.1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 1150px) { .liq-grid { grid-template-columns: 1fr; } }
.liq-caja { padding: 10px; }
.liq-caja h4 { margin: 0 0 8px; font-size: .88rem; color: var(--text-light); }
.liq-totales { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .85rem; padding: 2px 0; }
.liq-totales strong { font-variant-numeric: tabular-nums; }
.liq-campos label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .85rem; margin: 2px 0; }
.liq-campos input { width: 110px; text-align: right; }
.liq-total-final { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; font-size: 1rem; }
.liq-detalle { display: block; font-size: .72rem; color: var(--text-light); margin: -2px 0 6px; line-height: 1.3; }
/* El check de cesantía va pegado a su texto (no repartido a los extremos) */
.liq-campos label.chk-filtro { justify-content: flex-start; }
/* ============================================================
   🖨� IMPRIMIR SOLO UN REGISTRO (vacación / liquidación)
   ============================================================ */
/* ============================================================
   🧮 POPUP DE LA RENTA — LECTURA F�CIL (Diego 03/11/2026:
   "pensando en un usuario sin conocimientos")
   Pasos numerados, recuadro de introducción y el "en su caso" con
   los números reales. Los colores salen del acento (par oscuro
   automático: color-mix con --surface).
   ============================================================ */
#rentaInfoCuerpo {
  font-size: 0.9rem;
  line-height: 1.5;
}

#rentaInfoCuerpo h4 {
  margin: 16px 0 6px;
  font-size: 0.95rem;
  color: var(--acento-app);
}

#rentaInfoCuerpo p {
  margin: 6px 0 10px;
}

.renta-intro {
  background: color-mix(in srgb, var(--acento-app) 7%, var(--surface));
  border-left: 4px solid var(--acento-app);
  border-radius: 8px;
  padding: 10px 12px;
}

/* Fórmulas del cálculo: una lista numerada con la resta y la
   multiplicación de cada tramo (estilo matemático, compacto). */
.renta-formulas {
  margin: 6px 0 12px;
  padding-left: 22px;
}

.renta-formulas > li {
  margin: 12px 0;
}

.renta-formula {
  margin: 6px 0 0 4px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--acento-app) 5%, var(--surface));
  border-left: 3px solid var(--acento-app);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

.renta-formula div + div {
  margin-top: 4px;
}

.renta-total {
  margin: 12px 0 4px;
  padding: 8px 12px;
  font-size: 1rem;
  background: color-mix(in srgb, var(--acento-app) 7%, var(--surface));
  border: 1px solid var(--border);
  border-left: 4px solid var(--acento-app);
  border-radius: 8px;
}

@media print {
  body.imprimiendo-registro .main > *:not(#encabezadoImpresion):not(#printRegistro) {
    display: none !important;
  }
  body.imprimiendo-registro #printRegistro { display: block !important; }
  .reg-imp { font-size: .82rem; }
  .reg-imp h2 { font-size: 1.05rem; margin: 0 0 6px; }
  .reg-imp table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
  .reg-imp th, .reg-imp td { border: 1px solid #ccc; padding: 3px 6px; text-align: left; }
  .reg-imp th { background: #eee; width: 32%; }
  .reg-imp .der { text-align: right; font-variant-numeric: tabular-nums; }
}


/* ?? GRAFICACIÓN (barras CSS, sin librerías) */
.grafico { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.grafico-fila { display:grid; grid-template-columns: 160px 1fr 110px; align-items:center; gap:10px; }
.grafico-etiqueta { font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.grafico-pista { background: var(--surface); border:1px solid var(--border); border-radius:6px; height:18px; overflow:hidden; }
.grafico-barra { display:block; height:100%; background: var(--acento-app); border-radius:6px; min-width:2px; }
.grafico-valor { font-size:12px; text-align:right; color:var(--text-light); font-variant-numeric: tabular-nums; }
@media print { .grafico-pista { border:1px solid #999; } .grafico-barra { background:#1F4E79 !important; } }


/* ?? GRAFICACIÓN SVG (pastel / barras) */
.grafico-svg { display:block; width:100%; max-width:680px; height:auto; color:var(--text); }
.grafico-svg text { fill:currentColor; font-family:inherit; }
.grafico-svg .grafico-total { font-size:24px; font-weight:700; }
.grafico-svg .grafico-sub { font-size:11px; fill:var(--text-light); }
.grafico-svg .grafico-grid { stroke:var(--border); stroke-width:1; opacity:.6; }
.grafico-svg .grafico-eje { font-size:10px; fill:var(--text-light); }
.grafico-svg .grafico-etiqueta-svg { font-size:11px; fill:var(--text); }
.grafico-svg .grafico-valor-svg { font-size:11px; font-weight:600; fill:var(--text); }
.grafico-svg .grafico-pista-svg { fill:var(--surface); stroke:var(--border); stroke-width:.8; }
.grafico-leyenda { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:10px; }
.grafico-leyenda-item { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text); }
.grafico-dot { width:10px; height:10px; border-radius:3px; display:inline-block; flex:none; }
.grafico-leyenda-nombre { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.grafico-leyenda small { color:var(--text-light); }
@media print { .grafico-svg { max-width:100%; } }


.grafico-svg-pastel { max-width:340px; margin:0 auto; }


body.rol-no-admin #btnAnularAguinaldo { display:none !important; }



/* ============================================================
   MULTI-BD (04/11/2026) - alta de compañías con base propia
   ============================================================ */
body:not(.rol-super) #btnNuevaCia,
body:not(.rol-super) .solo-super { display: none; }

.bloque-base-datos {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.etiqueta-bloque {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-light);
}
.opcion-radio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
}
.opcion-radio input[type="radio"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--acento-app);
}
.opcion-radio em { font-style: normal; color: var(--text-light); }
.campo-prefijo { display: flex; align-items: stretch; max-width: 440px; }
.prefijo-bd {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  height: var(--alto-campo);
  background: color-mix(in srgb, var(--border) 35%, var(--surface));
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 6px 0 0 6px;
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
}
.campo-prefijo input { border-radius: 0 6px 6px 0; flex: 1; min-width: 120px; }
.nota-base-datos { margin: 6px 0 0; font-size: 12px; color: var(--text-light); }
.badge-neutral {
  background: color-mix(in srgb, var(--border) 40%, var(--surface));
  color: var(--text-light);
  border: 1px solid var(--border);
}
html[data-theme="oscuro"] .badge-neutral {
  background: color-mix(in srgb, var(--border) 55%, var(--surface));
  color: var(--text);
}

/* ---- Popup del asiento (reporte de movimientos por cuenta) ---- */
#tablaReporte tbody tr.fila-asiento { cursor: pointer; }
#tablaReporte tbody tr.fila-asiento:hover td { background: var(--fila-activo); }
#tablaAsientoPop tbody tr.cuenta-reporte td { background: var(--fila-activo); font-weight: 600; }
.asiento-pop-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px dashed var(--border);
}
.asiento-pop-nav, .asiento-pop-botones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.asiento-pop-pos { min-width: 70px; text-align: center; font-variant-numeric: tabular-nums; color: var(--text-light); }
.asiento-pop-nav .btn-secondary[disabled] { opacity: 0.45; cursor: default; }
@media (max-width: 720px) {
  .asiento-pop-acciones { justify-content: center; }
}