:root {
  --azul: #1a4d8f;
  --azul-oscuro: #0d2b52;
  --texto: #1f2937;
  --texto-suave: #6b7280;
  --fondo: #f5f7fa;
  --tarjeta: #ffffff;
  --borde: #e5e7eb;
  --verde: #15803d;
  --rojo: #b91c1c;
  --ambar-fondo: #fef3c7;
  --ambar-texto: #92400e;

  /* Paleta ampliada — pestaña Finanzas */
  --fin-indigo: #4f46e5;
  --fin-indigo-claro: #818cf8;
  --fin-violeta: #7c3aed;
  --fin-teal: #0d9488;
  --fin-rosa: #db2777;
  --fin-naranja: #ea580c;
  --fin-esmeralda: #059669;
  --fin-rojo: #e11d48;
  --fin-ambar: #d97706;
  --fin-sidebar-de: #0f172a;
  --fin-sidebar-a: #1e1b4b;

  /* Tokens de tema — permiten alternar entre el estilo claro (por defecto)
     y el estilo "neón" sin tocar cada componente. Los valores de acá son
     los del modo claro actual; el bloque [data-tema="neon"] más abajo los
     redefine. */
  --acento: var(--azul);
  --acento-glow: transparent;
  --texto-titulo: var(--azul-oscuro);
  --exito-fondo: #dcfce7;
  --exito-fondo-suave: #f0fdf4;
  --error-fondo: #fee2e2;
  --pospuesto-color: #6d28d9;
  --pospuesto-fondo: #ede9fe;
  --peligro: #dc2626;
  --realce-fondo: #eef2ff;
  --fin-indigo-fondo: #eef2ff;
  --fin-rosa-fondo: #fce7f3;
  --fin-esmeralda-fondo: #d1fae5;
  --fin-teal-fondo: #ccfbf1;
  --fin-naranja-fondo: #ffedd5;
  --fin-violeta-fondo: #ede9fe;

  /* Brillo por color de área — solo tiene efecto real en tema neón (acá
     queda transparente, igual que --acento-glow); usado en las tarjetas
     de Obligaciones con logo real (F29/Previred). */
  --fin-naranja-glow: transparent;
  --fin-violeta-glow: transparent;
  --fin-esmeralda-glow: transparent;
  --fin-teal-glow: transparent;
  --fin-indigo-glow: transparent;
  --blob-1: rgba(79, 70, 229, 0.22);
  --blob-2: rgba(219, 39, 119, 0.16);
  --sombra-tarjeta: 0 1px 3px rgba(0, 0, 0, 0.06);
  --grafico-grilla: #f1f5f9;
  --grafico-texto: #374151;
  --grafico-borde-torta: #ffffff;
  --texto-tenue: #64748b;
}

/* Modo neón — activado por el interruptor de estilo (ver base.html) y
   guardado en localStorage. Fondo casi negro, acentos cian/magenta. */
:root[data-tema="neon"] {
  --azul: #182036;
  --azul-oscuro: #0d121f;
  --texto: #e9edf7;
  --texto-suave: #8f9bb8;
  --fondo: #090c13;
  --tarjeta: #121826;
  --borde: #24304a;
  --verde: #3dffa0;
  --rojo: #ff4d6d;
  --ambar-fondo: rgba(255, 194, 71, 0.16);
  --ambar-texto: #ffc247;

  --acento: #22e6ff;
  --acento-glow: rgba(34, 230, 255, 0.35);
  --texto-titulo: #e9edf7;
  --exito-fondo: rgba(61, 255, 160, 0.14);
  --exito-fondo-suave: rgba(61, 255, 160, 0.06);
  --error-fondo: rgba(255, 77, 109, 0.14);
  --pospuesto-color: #c9a3ff;
  --pospuesto-fondo: rgba(124, 58, 237, 0.24);
  --peligro: #ff4d6d;
  --realce-fondo: rgba(79, 70, 229, 0.18);
  --fin-indigo-fondo: rgba(79, 70, 229, 0.2);
  --fin-rosa-fondo: rgba(219, 39, 119, 0.2);
  --fin-esmeralda-fondo: rgba(5, 150, 105, 0.2);
  --fin-teal-fondo: rgba(13, 148, 136, 0.2);
  --fin-naranja-fondo: rgba(234, 88, 12, 0.2);
  --fin-violeta-fondo: rgba(124, 58, 237, 0.2);

  /* Brillo por color de área (tema neón) — mismo criterio de intensidad
     que --acento-glow (0.35), usado en las tarjetas de Obligaciones con
     logo real para que el círculo/isotipo tenga su propio brillo en vez
     del cian genérico. */
  --fin-naranja-glow: rgba(234, 88, 12, 0.45);
  --fin-violeta-glow: rgba(124, 58, 237, 0.45);
  --fin-esmeralda-glow: rgba(5, 150, 105, 0.45);
  --fin-teal-glow: rgba(13, 148, 136, 0.45);
  --fin-indigo-glow: rgba(79, 70, 229, 0.45);
  --blob-1: rgba(34, 230, 255, 0.2);
  --blob-2: rgba(255, 63, 164, 0.16);
  --sombra-tarjeta: 0 10px 30px rgba(0, 0, 0, 0.5);
  --grafico-grilla: rgba(255, 255, 255, 0.08);
  --grafico-texto: #8f9bb8;
  --grafico-borde-torta: #121826;
  --texto-tenue: #5c6684;
}

* { box-sizing: border-box; }

html, body { overflow-x: hidden; }

input[type="text"], input[type="number"], input[type="date"],
input[type="password"], input[type="email"], select, textarea {
  background: var(--tarjeta);
  color: var(--texto);
}

/* El navegador pinta un campo autocompletado (ej. clic en el usuario
   pre-guardado del login) con su propio fondo blanco/amarillo por encima
   de --tarjeta, sin importar el tema — se ve "roto" en el tema neón en
   particular. El truco estándar es un box-shadow inset del tamaño del
   campo con el color real, más -webkit-text-fill-color para el texto (el
   navegador ignora `color` normal en un campo autocompletado) y una
   transition-delay larga para que no parpadee al color nativo antes de
   aplicarse. Reportado por el usuario (25-sep-2026): "queda el recuadro
   en blanco, no me gusta eso". */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--tarjeta) inset;
  box-shadow: 0 0 0 1000px var(--tarjeta) inset;
  -webkit-text-fill-color: var(--texto);
  caret-color: var(--texto);
  transition: background-color 9999s ease-in-out 0s;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
}

/* Login */
.pagina-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  background: var(--fondo);
}

.pagina-login::before,
.pagina-login::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: 0;
}

.pagina-login::before {
  width: 420px;
  height: 420px;
  top: -140px;
  left: -120px;
  background: radial-gradient(circle, var(--blob-1), transparent 70%);
}

.pagina-login::after {
  width: 420px;
  height: 420px;
  bottom: -160px;
  right: -120px;
  background: radial-gradient(circle, var(--blob-2), transparent 70%);
}

.tarjeta-login {
  background: var(--tarjeta);
  border-radius: 20px;
  padding: 2.75rem 2.25rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 24px 60px rgba(30, 27, 75, 0.14), 0 2px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
  position: relative;
  z-index: 1;
}

.login-icono {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--fin-indigo), var(--fin-violeta));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.1rem;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
}

.login-icono svg { width: 28px; height: 28px; }

.tarjeta-login h1 {
  font-size: 1.5rem;
  color: var(--texto-titulo);
  margin: 0 0 0.3rem;
  font-weight: 800;
}

.subtitulo {
  color: var(--texto-suave);
  font-size: 0.9rem;
  margin: 0 0 1.75rem;
}

.tarjeta-login form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
}

.tarjeta-login label {
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 0.6rem;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.campo-login {
  position: relative;
}

.campo-login svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--texto-suave);
  pointer-events: none;
}

.tarjeta-login input {
  padding: 0.75rem 0.85rem;
  border: 1.5px solid var(--borde);
  border-radius: 10px;
  font-size: 1rem;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.campo-login input { padding-left: 40px; }

.tarjeta-login input:focus {
  outline: none;
  border-color: var(--fin-indigo);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.tarjeta-login button {
  margin-top: 1.5rem;
  background: linear-gradient(135deg, var(--fin-indigo), var(--fin-violeta));
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0.8rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
  transition: filter 0.15s, transform 0.15s;
}

.tarjeta-login button:hover { filter: brightness(1.08); transform: translateY(-1px); }

.error {
  background: var(--error-fondo);
  color: var(--rojo);
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  font-size: 0.85rem;
}

/* Selector de empresa (clientes con más de una razón social/sucursal) —
   minimalista a propósito: sin recuadro de fondo, sin ícono, solo el
   título y el logo de cada empresa como botón, directo sobre la página. */
.pagina-selector-empresa {
  flex-direction: column;
  gap: 1.75rem;
}

/* Solo el título sube — los logos se quedan centrados donde estaban, así
   que el título va posicionado aparte (absoluto sobre `.pagina-login`,
   que ya es `position: relative`) en vez de moverse junto al resto del
   bloque centrado. */
.pagina-selector-empresa h1 {
  position: absolute;
  top: 6rem;
  left: 0;
  right: 0;
  z-index: 1;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--texto-titulo);
  margin: 0;
  text-align: center;
}

.opciones-empresa {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.boton-empresa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  color: var(--texto);
  text-decoration: none;
  transition: transform 0.15s;
}

.boton-empresa:hover {
  transform: translateY(-2px);
}

.boton-empresa img {
  max-width: 140px;
  max-height: 64px;
  object-fit: contain;
}

.boton-empresa-sin-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fin-indigo), var(--fin-violeta));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
}

.boton-empresa-nombre {
  font-weight: 700;
  color: var(--texto-titulo);
  text-align: center;
}

/* Modo neón: el logo de cada empresa recibe el mismo brillo rosa/magenta
   que ya usa `.marca-cliente-logo` en el encabezado — sigue leyéndose
   como la marca del cliente. El nombre se acentúa en cian al pasar el
   mouse, mismo lenguaje del resto de la app, sin necesitar un recuadro. */
:root[data-tema="neon"] .pagina-selector-empresa h1 {
  text-shadow: 0 0 12px var(--acento-glow);
}

:root[data-tema="neon"] .boton-empresa img {
  filter:
    drop-shadow(0 0 4px rgba(255, 63, 164, 0.6))
    drop-shadow(0 0 12px rgba(255, 63, 164, 0.4));
}

:root[data-tema="neon"] .boton-empresa-sin-logo {
  background: linear-gradient(135deg, var(--acento), #7c3aed);
  box-shadow: 0 0 16px var(--acento-glow);
}

:root[data-tema="neon"] .boton-empresa-nombre {
  transition: color 0.15s, text-shadow 0.15s;
}

:root[data-tema="neon"] .boton-empresa:hover .boton-empresa-nombre {
  color: var(--acento);
  text-shadow: 0 0 8px var(--acento-glow);
}

/* Layout general */
.encabezado {
  background: var(--azul-oscuro);
  color: white;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.encabezado .rut {
  display: block;
  font-size: 0.8rem;
  opacity: 0.75;
}

.subnav {
  background: var(--azul);
  display: flex;
  gap: 0.25rem;
  padding: 0 1.5rem;
  overflow-x: auto;
}

.subnav a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.65rem 0.9rem;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}

.subnav a.activo {
  color: white;
  border-bottom-color: white;
}

.subnav a:hover { color: white; }

:root[data-tema="neon"] .subnav a.activo {
  color: var(--acento);
  border-bottom-color: var(--acento);
  text-shadow: 0 0 8px var(--acento-glow);
}

.encabezado-derecha-cliente {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.marca-cliente {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.marca-cliente-logo {
  height: 34px;
  width: auto;
  display: block;
  transition: filter 0.2s ease;
}

/* El logo es un PNG con transparencia, así que un drop-shadow doble (uno
   apretado, uno difuso) sigue el contorno real del dibujo y se lee como un
   brillo neón alrededor de la silueta, no como un cuadro iluminado. */
:root[data-tema="neon"] .marca-cliente-logo {
  filter:
    drop-shadow(0 0 4px rgba(255, 63, 164, 0.6))
    drop-shadow(0 0 12px rgba(255, 63, 164, 0.4));
}

.marca-cliente-sucursal {
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #b6392a;
  background: #fbe1ef;
  border: 1px solid #b6392a;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}

/* En modo neón la insignia se ilumina en el mismo tono rosa/rojo del logo,
   en vez de saltar al cian genérico del resto de la UI — sigue leyéndose
   como parte de la marca del cliente, solo que ahora brilla. */
:root[data-tema="neon"] .marca-cliente-sucursal {
  color: #ff8fc0;
  background: rgba(255, 63, 164, 0.12);
  border-color: #ff6fa8;
  box-shadow: 0 0 10px rgba(255, 63, 164, 0.35);
  text-shadow: 0 0 6px rgba(255, 63, 164, 0.5);
}

.salir {
  color: white;
  text-decoration: none;
  font-size: 0.85rem;
  opacity: 0.85;
}

.salir:hover { opacity: 1; text-decoration: underline; }

/* Envoltorio del enlace "Cambiar de sucursal" — inyectado por base.html
   junto al enlace "Cerrar sesión", solo para clientes con más de una razón
   social unida. */
.encabezado-derecha {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cambiar-empresa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
  color: white;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.cambiar-empresa:hover { background: rgba(255, 255, 255, 0.24); transform: translateY(-1px); }

.cambiar-empresa svg { width: 17px; height: 17px; display: block; }

/* "Ver portal del cliente", inyectado junto a "Cambiar de sucursal" en el
   mismo envoltorio — estilo propio (no .boton-chico, pensado para tarjetas
   claras) porque acá vive sobre el fondo oscuro del encabezado. */
.boton-vista-previa-admin {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
  color: white;
  font-size: 0.8rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}

.boton-vista-previa-admin:hover { background: rgba(255, 255, 255, 0.24); transform: translateY(-1px); }

.contenido {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem;
}

.volver {
  color: var(--acento);
  text-decoration: none;
  font-size: 0.9rem;
}

.contenido h1 {
  font-size: 1.3rem;
  margin: 0.75rem 0 1rem;
}

.tarjeta {
  background: var(--tarjeta);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--sombra-tarjeta);
}

:root[data-tema="neon"] .tarjeta { border: 1px solid var(--borde); }

.tarjeta h2 {
  font-size: 1rem;
  margin: 0 0 0.75rem;
  color: var(--texto-titulo);
}

.tarjeta.destacada {
  background: linear-gradient(135deg, var(--azul), var(--azul-oscuro));
  color: white;
  text-align: center;
  padding: 2rem 1.5rem;
}

.etiqueta {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.85;
}

.periodo-destacado {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.35rem 1.1rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
}

:root[data-tema="neon"] .periodo-destacado {
  color: var(--acento);
  background: rgba(34, 230, 255, 0.08);
  border-color: var(--acento);
  text-shadow: 0 0 12px var(--acento-glow);
  box-shadow: 0 0 18px var(--acento-glow), inset 0 0 14px rgba(34, 230, 255, 0.08);
  animation: portal-respirar 3.2s ease-in-out infinite;
}

@keyframes portal-respirar {
  0%, 100% { box-shadow: 0 0 18px var(--acento-glow), inset 0 0 14px rgba(34, 230, 255, 0.08); }
  50% { box-shadow: 0 0 28px rgba(34, 230, 255, 0.5), inset 0 0 18px rgba(34, 230, 255, 0.16); }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-tema="neon"] .periodo-destacado { animation: none; }
}

.monto-grande {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0.3rem 0;
}

.ver-detalle {
  color: white;
  font-size: 0.85rem;
  text-decoration: none;
  opacity: 0.9;
}

.ver-detalle:hover { text-decoration: underline; }

.alerta {
  background: var(--ambar-fondo);
  color: var(--ambar-texto);
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  font-size: 0.85rem;
  margin: 0 0 0.75rem;
}

.alerta-vencimiento {
  background: var(--error-fondo);
  color: var(--rojo);
  font-weight: 600;
  margin: 0;
}

.alerta-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.alerta-fila .boton-chico {
  border-color: var(--ambar-texto);
  color: var(--ambar-texto);
  white-space: nowrap;
}

.alerta-fila .boton-chico:hover {
  background: var(--ambar-texto);
  color: white;
}

:root[data-tema="neon"] .alerta-fila .boton-chico:hover { color: #1a1200; }

.nota {
  color: var(--texto-suave);
  font-size: 0.85rem;
  margin: 0.75rem 0 0;
}

/* Tablas */
.tabla-scroll { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

th { color: var(--texto-suave); font-weight: 600; font-size: 0.8rem; }

td.total, td.fila-total { font-weight: 700; }

.tabla-periodos td:nth-child(3),
.tabla-periodos th:nth-child(3),
.tabla-documentos td:nth-child(n+3),
.tabla-documentos th:nth-child(n+3) {
  text-align: right;
}

/* Columnas numéricas cuyo encabezado no cae en la posición nth-child de
   arriba — tablas con thead de 2 filas (grupo + sub-columna), donde el
   número de columna real no coincide con la posición del <th> dentro de
   SU fila (colspan/rowspan lo corren). Bug real reportado por el usuario
   (08-sep-2026, Balance de Ocho Columnas): el título "Activo" quedaba
   pegado a la izquierda mientras los montos de esa columna se alinean a
   la derecha — se ve como si el título no correspondiera a su columna. */
.tabla-documentos th.col-num {
  text-align: right;
}

/* Balance de Ocho Columnas: solo la primera columna (Cuenta) es texto, las
   otras 8 son todas numéricas — la regla genérica de arriba (que asume las
   primeras DOS columnas son texto, como en el resto de las tablas) deja la
   columna "Debe" sin alinear a la derecha (queda pegada a la izquierda,
   distinta del resto). Además, el "Totales" del pie y la fila final "Sumas
   iguales" quedan mal alineados con el mismo problema. Regla propia,
   por POSICIÓN real de columna (no por nth-child relativo a cada fila, que
   se corre con los colspan del pie). Los títulos de grupo (Sumas/Saldos/
   Inventario/Resultados, cada uno colspan=2) se centran sobre sus dos
   columnas en vez de quedar pegados a la izquierda. Bug real reportado por
   el usuario (08-sep-2026). */
.tabla-ocho-columnas thead tr:first-child th:not(:first-child) {
  text-align: center;
}
.tabla-ocho-columnas tbody td:nth-child(n+2),
.tabla-ocho-columnas tfoot th:nth-child(n+2) {
  text-align: right;
}

.tabla-desglose td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-desglose .fila-total td { border-top: 2px solid var(--borde); border-bottom: none; font-size: 1.05rem; }
.tabla-documentos .fila-total td { border-top: 2px solid var(--borde); font-weight: 700; }

/* Bloque colapsable por trabajador en el Resumen anual de RRHH — mismo
   "quitar la marca nativa y usar un chevron propio" que ya se hizo para
   .fin-nav-rango, para que el <summary> se vea como el resto de la app en
   vez del triángulo por defecto del navegador. */
.trabajador-detalle-anual { margin-bottom: 0.75rem; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
.trabajador-detalle-anual summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  background: var(--fondo);
  font-weight: 600;
}
.trabajador-detalle-anual summary::-webkit-details-marker { display: none; }
.trabajador-detalle-anual summary::before { content: "▸"; color: var(--texto-suave); }
.trabajador-detalle-anual[open] summary::before { content: "▾"; }
.trabajador-detalle-anual .tabla-scroll { padding: 0 1.1rem 1rem; }

.marca-advertencia {
  color: var(--ambar-texto);
  cursor: help;
  font-size: 0.85em;
}

.etiqueta-estado {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.etiqueta-estado.en-curso {
  background: var(--ambar-fondo);
  color: var(--ambar-texto);
}

.etiqueta-estado.cerrado,
.etiqueta-estado.pagado,
.etiqueta-estado.pagada {
  background: var(--exito-fondo);
  color: var(--verde);
}

.etiqueta-estado.pendiente {
  background: var(--ambar-fondo);
  color: var(--ambar-texto);
}

.etiqueta-estado.vencido {
  background: var(--error-fondo);
  color: var(--rojo);
}

.etiqueta-estado.pospuesto {
  background: var(--pospuesto-fondo);
  color: var(--pospuesto-color);
}

.select-estado-deuda {
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 0.3rem 0.4rem;
  font-size: 0.85rem;
}

/* Formularios (panel de admin) */
.form-deuda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem 1rem;
  align-items: end;
}

.form-deuda label {
  font-size: 0.8rem;
  font-weight: 600;
  display: block;
  margin-bottom: 0.3rem;
}

.form-deuda input, .form-deuda select, .form-deuda textarea {
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-size: 0.95rem;
}

.form-deuda textarea {
  font-family: inherit;
  resize: vertical;
}

/* Un campo que necesita más espacio que una columna del grid (ej. una
   textarea con varias líneas de funciones/obligaciones) — mismo criterio
   que flex-basis:100% en .form-editar-deuda, pero para el grid de
   .form-deuda (bug real, 01-oct-2026: sin esto, "Nuevo cargo" apretaba el
   nombre y las funciones específicas en columnas angostas de ~160px cada
   una en pantallas anchas, en vez de una fila completa por campo). */
.form-deuda .campo-ancho {
  grid-column: 1 / -1;
}

.form-deuda button {
  background: var(--azul);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.6rem;
  font-weight: 600;
  cursor: pointer;
  height: fit-content;
}

.form-deuda button:hover { background: var(--azul-oscuro); }

:root[data-tema="neon"] .form-deuda button {
  border: 1px solid var(--acento);
  box-shadow: 0 0 12px var(--acento-glow);
}
:root[data-tema="neon"] .form-deuda button:hover { box-shadow: 0 0 18px var(--acento-glow); }

/* Checkbox dentro de un .form-deuda (ej. "sin respaldo tributario") — sin
   esto hereda el label en bloque y el input al 100% de ancho del grid,
   que para un checkbox se ve roto. */
.form-deuda .campo-checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  cursor: pointer;
}
.form-deuda .campo-checkbox input[type="checkbox"] {
  width: auto;
  flex-shrink: 0;
}

.caja-agregar-deuda {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
}

.titulo-caja-deuda {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-tenue);
  margin: 0 0 0.75rem;
}

.titulo-tabla-deuda {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-tenue);
  margin: 0 0 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--borde);
}

.fila-editar-deuda td {
  background: var(--realce-fondo);
  padding: 1rem 1.1rem;
  border-top: 2px solid var(--azul);
  border-bottom: 2px solid var(--azul);
}

/* button.boton-eliminar-deuda (no solo .boton-eliminar-deuda) para ganarle en
   especificidad a .boton-chico — este botón siempre lleva ambas clases. */
button.boton-eliminar-deuda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: var(--peligro);
  color: var(--peligro);
  padding: 0.35rem;
  width: 30px;
}
button.boton-eliminar-deuda:hover { background: var(--peligro); color: white; }
button.boton-eliminar-deuda svg { width: 16px; height: 16px; }

/* Un grid CSS (auto-fit/minmax) dentro de una celda de tabla se rompe porque
   el ancho de la celda depende del resto de las columnas de esa fila — con
   flexbox y anchos mínimos explícitos por campo se evita ese problema. */
.form-editar-deuda {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem 1rem;
}

.campo-editar-deuda {
  display: flex;
  flex-direction: column;
  flex: 1 1 160px;
  min-width: 160px;
}

/* Bug real (30-sep-2026): un elemento con esta clase que además lleva el
   atributo `hidden` (varios toggles con JS en el portal, ej. campos de
   Isapre en la calculadora, "Detalle"/"Mes término" en Asignar Haber) NO
   se ocultaba de verdad — la regla de origen "autor" `display: flex` de
   arriba le gana en cascada a la regla `[hidden] { display: none }` del
   navegador (que es de origen "user-agent", pierde contra CUALQUIER regla
   de autor así tengan la misma especificidad), sin importar el orden en
   la hoja de estilos. Encontrado porque "Opciones avanzadas" en Asignar
   Haber no ocultaba nada — el campo "Detalle" ya estaba visible desde el
   principio. Esta regla, sí de origen autor, es la que realmente oculta. */
.campo-editar-deuda[hidden] {
  display: none;
}

.campo-editar-deuda label {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.campo-editar-deuda input, .campo-editar-deuda select, .campo-editar-deuda textarea {
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-size: 0.95rem;
}

/* Checkboxes de días de la semana (jornada) — desde 05-oct-2026,
   reemplaza el campo de texto libre "Días". */
.dias-semana-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  padding: 0.5rem 0;
}

.dia-checkbox {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.dia-checkbox input {
  margin: 0;
}

.campo-editar-deuda textarea {
  font-family: inherit;
  resize: vertical;
}

.campo-editar-deuda input.buscar-select {
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
}

.campo-editar-deuda-botones {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.campo-editar-deuda-botones button[type="submit"] {
  background: var(--azul);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-weight: 600;
  cursor: pointer;
}

.campo-editar-deuda-botones button[type="submit"]:hover { background: var(--azul-oscuro); }

:root[data-tema="neon"] .campo-editar-deuda-botones button[type="submit"] {
  border: 1px solid var(--acento);
  box-shadow: 0 0 12px var(--acento-glow);
}

/* Un botón "Eliminar" (ícono rojo) puede convivir con "Guardar cambios"
   dentro de .campo-editar-deuda-botones (ej. Cargos) — sin esto, la regla
   de arriba (más específica: clase + atributo) le gana a button.boton-
   eliminar-deuda y lo pinta azul, perdiendo el color de peligro. */
.campo-editar-deuda-botones button.boton-eliminar-deuda {
  background: transparent;
  border-color: var(--peligro);
  color: var(--peligro);
}
.campo-editar-deuda-botones button.boton-eliminar-deuda:hover {
  background: var(--peligro);
  color: white;
}
:root[data-tema="neon"] .campo-editar-deuda-botones button.boton-eliminar-deuda {
  border: 1px solid var(--peligro);
  box-shadow: none;
}

.boton-chico {
  background: none;
  border: 1px solid var(--acento);
  color: var(--acento);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.boton-chico:hover { background: var(--azul); color: white; }

.form-proveedor {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.form-proveedor input[type="text"] {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-size: 0.85rem;
  flex: 1;
  min-width: 160px;
}

.grafico-contenedor {
  position: relative;
  height: 280px;
  width: 100%;
}

.grafico-scroll {
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.grafico-composicion-contenedor {
  position: relative;
  height: 280px;
  width: 100%;
}

.categoria-select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-size: 0.85rem;
  transition: background-color 0.2s, border-color 0.2s;
}

.categoria-select.categoria-guardada {
  background-color: var(--fin-esmeralda-fondo);
  border-color: var(--fin-esmeralda);
}

.boton-chico.boton-guardado {
  background: var(--fin-esmeralda);
  border-color: var(--fin-esmeralda);
  color: white;
}

.celda-acciones-proveedor {
  display: flex;
  gap: 0.4rem;
  white-space: nowrap;
}

.boton-facturas {
  border-color: var(--fin-indigo);
  color: var(--fin-indigo);
}

.boton-facturas:hover { background: var(--fin-indigo); color: white; }

.fila-detalle-facturas td {
  background: var(--fondo);
  padding: 1rem 1.25rem;
}

.tabla-facturas-mini { font-size: 0.85rem; }
.tabla-facturas-mini th { font-size: 0.72rem; }

.celda-marca-revisado {
  text-align: center;
  color: var(--verde);
  font-weight: 700;
}
tr.fila-revisada { background: var(--exito-fondo-suave); }
tr.fila-revisada:hover { background: var(--exito-fondo); }

.boton-ver-pdf {
  border-color: var(--fin-indigo);
  color: var(--fin-indigo);
}
.boton-ver-pdf:hover { background: var(--fin-indigo); color: white; }
.nota-chica { color: var(--texto-tenue); font-size: 0.8rem; }

.modal-pdf {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.modal-pdf-contenido {
  background: var(--tarjeta);
  border-radius: 0.75rem;
  width: min(900px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.modal-pdf-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--borde);
  font-weight: 600;
}
.modal-pdf-contenido iframe {
  flex: 1;
  border: none;
  width: 100%;
}

/* Modal genérico para formularios (p.ej. "Generar/editar liquidación") —
   misma idea que .modal-pdf pero con cuerpo que crece con el contenido y
   scroll propio, en vez de ocupar toda la altura. */
.modal-formulario {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.modal-formulario-contenido {
  background: var(--tarjeta);
  border-radius: 0.75rem;
  width: min(760px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.modal-formulario-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--borde);
  font-weight: 700;
  background: var(--fin-indigo);
  color: white;
  border-radius: 0.75rem 0.75rem 0 0;
}

.modal-formulario-cuerpo {
  padding: 1.25rem;
  overflow-y: auto;
}

.encabezado-seccion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.encabezado-seccion h2 { margin: 0; }

.tabla-anual {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.tabla-anual th, .tabla-anual td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
  text-align: right;
}

.tabla-anual th:first-child, .tabla-anual td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--tarjeta);
}

.tabla-anual th { color: var(--texto-suave); font-weight: 600; font-size: 0.75rem; }
.tabla-anual .fila-total td { font-weight: 700; border-top: 1px solid var(--borde); }

/* ===================== Finanzas — layout tipo dashboard ===================== */

.finanzas-layout {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.fin-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: linear-gradient(160deg, var(--fin-sidebar-de), var(--fin-sidebar-a) 130%);
  border-radius: 18px;
  padding: 1.5rem 1.25rem;
  color: white;
  position: sticky;
  top: 1.5rem;
}

.fin-sidebar-cliente {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.fin-sidebar-etiqueta {
  margin: 0 0 0.3rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
}

.fin-sidebar-nombre {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.fin-nav-anual {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.15s, transform 0.15s;
}

.fin-nav-anual:hover { background: rgba(255, 255, 255, 0.12); }

.fin-nav-anual.activo {
  background: linear-gradient(135deg, var(--fin-indigo), var(--fin-violeta));
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.45);
}

/* Rango personalizado — el <summary> hereda el look de .fin-nav-anual (es
   el mismo tipo de "entrada" del sidebar que Año completo), pero sin la
   flecha nativa de <details> en ningún navegador. */
.fin-nav-rango { margin-bottom: 1.25rem; }
.fin-nav-rango summary.fin-nav-anual { margin-bottom: 0; cursor: pointer; list-style: none; }
.fin-nav-rango summary.fin-nav-anual::-webkit-details-marker { display: none; }
.fin-nav-rango[open] summary.fin-nav-anual { border-radius: 12px 12px 0 0; }

.fin-rango-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.85rem 0.85rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: none;
  border-radius: 0 0 12px 12px;
}

.fin-rango-campo {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fin-rango-campo select {
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

.fin-rango-campo select option { color: #1f2937; }

.fin-rango-boton {
  width: 100%;
  text-align: center;
  margin-top: 0.15rem;
}

.fin-nav-titulo {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
}

.fin-nav-meses {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-height: 420px;
  overflow-y: auto;
}

.fin-nav-mes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.87rem;
  transition: background 0.15s;
}

.fin-nav-mes:hover { background: rgba(255, 255, 255, 0.08); }

.fin-nav-mes.activo {
  background: rgba(255, 255, 255, 0.14);
  color: white;
  font-weight: 700;
}

.fin-punto {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--fin-ambar);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
}

.fin-punto.cerrado {
  background: var(--fin-esmeralda);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.18);
}

.fin-main {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
}

.fin-encabezado-vista {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.fin-encabezado-vista h1 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--texto-titulo);
}

.fin-encabezado-vista .fin-subtitulo {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.9rem;
}

/* Tarjetas KPI */
.kpis-fin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kpi-fin {
  background: var(--tarjeta);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border-top: 3px solid transparent;
}

.kpi-fin-icono {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi-fin-icono svg { width: 21px; height: 21px; }

.kpi-fin.kpi-ventas { border-top-color: var(--fin-indigo); }
.kpi-fin.kpi-ventas .kpi-fin-icono { background: var(--fin-indigo-fondo); color: var(--fin-indigo); }

.kpi-fin.kpi-gastos { border-top-color: var(--fin-rosa); }
.kpi-fin.kpi-gastos .kpi-fin-icono { background: var(--fin-rosa-fondo); color: var(--fin-rosa); }

.kpi-fin.kpi-utilidad { border-top-color: var(--fin-esmeralda); }
.kpi-fin.kpi-utilidad .kpi-fin-icono { background: var(--fin-esmeralda-fondo); color: var(--fin-esmeralda); }

.kpi-fin.kpi-margen { border-top-color: var(--fin-teal); }
.kpi-fin.kpi-margen .kpi-fin-icono { background: var(--fin-teal-fondo); color: var(--fin-teal); }

.kpi-fin.kpi-pospuesto { border-top-color: var(--pospuesto-color); }
.kpi-fin.kpi-pospuesto .kpi-fin-icono { background: var(--pospuesto-fondo); color: var(--pospuesto-color); }

:root[data-tema="neon"] .kpi-fin {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
:root[data-tema="neon"] .kpi-fin:hover {
  box-shadow: 0 0 16px var(--acento-glow);
  transform: translateY(-2px);
}

.kpi-fin-etiqueta {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  color: var(--texto-suave);
  font-weight: 600;
}

.kpi-fin-monto {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--texto);
  line-height: 1.2;
}

.kpi-fin-variacion {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.kpi-fin-variacion.positiva { color: var(--fin-esmeralda); }
.kpi-fin-variacion.negativa { color: var(--fin-rojo); }

/* Grillas de gráficos */
.fin-graficos-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  align-items: stretch;
}

.fin-graficos-grid .tarjeta { margin-bottom: 0; height: 100%; }

@media (max-width: 900px) {
  .finanzas-layout { flex-direction: column; padding: 1rem; }
  .fin-sidebar { width: 100%; position: static; }
  .fin-main { width: 100%; }
  .fin-nav-meses { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; max-height: none; padding-bottom: 0.25rem; }
  .fin-nav-mes { flex-shrink: 0; }
  .fin-graficos-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .kpis-fin { grid-template-columns: 1fr; }
}

/* Tabs de detalle (Ventas / Compras) */
.fin-tabs-botones {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.fin-tab-boton {
  padding: 0.5rem 1rem;
  border-radius: 9px;
  border: 1px solid var(--borde);
  background: var(--fondo);
  color: var(--texto-suave);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.fin-tab-boton.activo {
  background: var(--fin-indigo);
  border-color: var(--fin-indigo);
  color: white;
}

.fin-tab-panel { display: none; }
.fin-tab-panel.activo { display: block; }

/* Switch Financiero / Tributario (Finanzas del cliente) — control
   segmentado de una sola pieza, para que se note que es una elección
   binaria (no dos botones sueltos como los tabs de Ventas/Compras). */
.fin-switch-contable {
  display: inline-flex;
  align-self: center;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 3px;
  background: var(--fondo);
  gap: 2px;
}

.fin-switch-opcion {
  padding: 0.45rem 1rem;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--texto-suave);
  text-decoration: none;
  white-space: nowrap;
  /* Reusado también en <button> (filtro "Todos/Sin término" de Ítems,
     30-sep-2026) — resetea el borde/fondo por defecto del navegador para
     que se vea igual que cuando se usa en <a>. */
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.fin-switch-opcion.activo {
  background: var(--fin-indigo);
  color: white;
}

/* Proyección de Impuesto a la Renta (solo vista Tributaria) */
.fin-proyeccion-impuesto {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--tarjeta);
  border: 1px solid var(--fin-indigo);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
}

.fin-proyeccion-impuesto-icono {
  color: var(--fin-indigo);
  flex-shrink: 0;
}
.fin-proyeccion-impuesto-icono svg { width: 26px; height: 26px; }

.fin-proyeccion-impuesto-titulo {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--texto-titulo);
}

.fin-proyeccion-impuesto-formula {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--texto-suave);
}

.fin-proyeccion-impuesto-monto {
  margin: 0 0 0 auto;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--fin-indigo);
  white-space: nowrap;
}

/* ===================== Clientes — panel de entrada del admin =====================
   Rediseño pedido por el usuario (25-sep-2026): "veo caos... quiero que
   lo primero que se viera son los diferentes clientes de forma más
   grande y mucho más ordenado al seleccionar, con menús desplegables" —
   antes el listado de clientes era una tabla angosta al final de la
   página, debajo de KPIs/avisos/el formulario de "agregar cliente"
   siempre abierto. Ahora los clientes son tarjetas grandes, primero en
   la página, cada una con un menú desplegable de acceso directo a sus
   secciones (en vez de tener que entrar a una página default primero). */
.clientes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.cliente-card {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  position: relative;
}

.cliente-card-cabecera {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.cliente-card-nombre {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--texto-titulo);
}

.cliente-card-rut { color: var(--texto-suave); font-size: 0.82rem; }

.cliente-card-menu-boton {
  margin-left: auto;
  background: none;
  border: 1px solid var(--borde);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-suave);
  cursor: pointer;
  flex-shrink: 0;
}

.cliente-card-menu-boton:hover { background: var(--fondo); color: var(--texto); }

.cliente-card-acciones {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}

.cliente-card-acciones .boton-chico { flex: 1; text-align: center; }

.cliente-card-menu {
  display: none;
  position: absolute;
  top: 3.75rem;
  right: 1.25rem;
  z-index: 20;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  min-width: 200px;
  padding: 0.4rem;
  flex-direction: column;
  gap: 0.1rem;
}

.cliente-card-menu.abierto { display: flex; }

.cliente-card-menu a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: 7px;
  color: var(--texto);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}

.cliente-card-menu a:hover { background: var(--fondo); }

.cliente-card-menu hr {
  border: none;
  border-top: 1px solid var(--borde);
  margin: 0.3rem 0.2rem;
}

/* ===================== Historia (ficha del trabajador) =====================
   Timeline de la pestaña "Historia" de BUK — un bloque por evento, borde
   izquierdo a modo de línea de tiempo, más reciente arriba (el orden ya
   viene así desde `listar_historial`). */
.historial-evento {
  border-left: 3px solid var(--fin-indigo);
  padding: 0 0 0 1rem;
  margin: 0 0 1.5rem;
}

.historial-evento:last-child { margin-bottom: 0; }

.historial-fecha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* ===================== RRHH — panel izquierdo estilo BUK =====================
   Reemplaza el scroll interminable de tarjetas apiladas que tenía RRHH por
   un layout de dos columnas: panel izquierdo con las áreas agrupadas
   (Colaboradores / Remuneraciones / Declaraciones / Pagos / Configuración,
   calcado de "Administrativo" y "Remuneraciones" en el menú de BUK) y el
   contenido de la sección elegida a la derecha — pedido explícito del
   usuario más de una vez (25-sep-2026: "debería haber un menú ordenado
   como en BUK, donde hay un panel izquierdo que te separa las distintas
   áreas"). Los ítems que son páginas propias (Comprobantes, Resumen
   anual, Calculadora, DJ 1887) son enlaces reales; los que viven dentro
   de la misma página (Trabajadores, Procesar liquidaciones, Planilla
   Previred, Libro de Remuneraciones, Costo Total Empresa, Comprobantes
   de pago Previred, Configuración) son pestañas JS que reusan
   `.fin-tab-panel` — mismo mecanismo ya usado en la ficha del
   trabajador, solo que en vertical en vez de horizontal. */
.rrhh-layout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
}

.rrhh-sidebar {
  flex: 0 0 230px;
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.rrhh-sidebar-grupo { display: flex; flex-direction: column; gap: 0.15rem; }

.rrhh-sidebar-titulo {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-tenue);
  margin: 0 0 0.35rem 0.65rem;
}

.rrhh-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  color: var(--texto-suave);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
}

.rrhh-sidebar-link:hover { background: var(--tarjeta); color: var(--texto); }

.rrhh-sidebar-link.activo {
  background: var(--fin-indigo);
  color: white;
}

.rrhh-contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }

@media (max-width: 860px) {
  .rrhh-layout { flex-direction: column; padding: 1rem; }
  .rrhh-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.5rem 1rem;
  }
  .rrhh-sidebar-titulo { margin-bottom: 0.25rem; }
}

/* ===================== Página F29 (antes "Resumen") ===================== */

.f29-layout {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.5rem;
}

.f29-titulo {
  margin: 0 0 1.25rem;
  font-size: 1.5rem;
  color: var(--texto-titulo);
}

.f29-layout .kpis-fin { margin: 1.25rem 0 0; }

/* Panel de años del Histórico mensual — reemplaza la tabla larga con TODOS
   los meses desde que inició la empresa por un año a la vez, elegido en un
   panel a la izquierda (pedido del usuario, 25-sep-2026). */
.f29-historial-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: 1rem;
}

.f29-historial-anios {
  flex: 0 0 110px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.f29-historial-anio-boton {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  color: var(--texto-suave);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  text-align: left;
}

.f29-historial-anio-boton:hover { background: var(--fondo); color: var(--texto); }

.f29-historial-anio-boton.activo {
  background: var(--fin-indigo);
  color: white;
}

.f29-historial-contenido { flex: 1; min-width: 0; }

@media (max-width: 700px) {
  .f29-historial-layout { flex-direction: column; }
  .f29-historial-anios { flex-direction: row; flex-wrap: wrap; width: 100%; }
}

.f29-hero-icono {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
}

.f29-hero-icono svg { width: 24px; height: 24px; color: white; }

/* Franja del mes calendario en curso, debajo del período destacado — más
   chica que la tarjeta destacada (sin conteo de días: todavía falta un mes
   entero para que ese venza) pero con color propio, para que no se sienta
   apagada — solo que sin competirle en tamaño a la que sí es urgente. */
.f29-mes-actual-mini {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  background: linear-gradient(135deg, var(--ambar-fondo), var(--tarjeta) 70%);
  border: 1px solid var(--ambar-texto);
  border-radius: 12px;
  padding: 0.7rem 1.1rem;
  margin-bottom: 1.25rem;
}

.f29-mes-actual-mini-icono {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--ambar-texto);
  color: var(--fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.f29-mes-actual-mini-icono svg { width: 18px; height: 18px; }

.f29-mes-actual-mini-cuerpo { min-width: 0; }

.f29-mes-actual-mini-mes {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ambar-texto);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.f29-mes-actual-mini-etiqueta {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  color: var(--texto-suave);
}

.f29-mes-actual-mini-monto {
  margin: 0 0 0 auto;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--fin-indigo);
  white-space: nowrap;
}

.f29-mes-actual-mini-link {
  font-size: 0.82rem;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .f29-mes-actual-mini-monto { margin-left: 0; width: 100%; }
}

.f29-encabezado-seccion {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.f29-encabezado-seccion h2 { margin: 0; }

.f29-icono-seccion {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--fin-indigo-fondo);
  color: var(--fin-indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.f29-icono-seccion svg { width: 18px; height: 18px; }

.f29-icono-seccion.f29-icono-alerta { background: var(--fin-rosa-fondo); color: var(--fin-rosa); }

.admin-cliente-fila {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.admin-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--fin-indigo), var(--fin-violeta));
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-cliente-encabezado {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.admin-avatar-grande {
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
}

.admin-ajustes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.admin-ajustes-grid .tarjeta { margin-bottom: 0; }

/* ===================== Ficha de trabajador (RRHH) ===================== */

.ficha-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .ficha-layout { grid-template-columns: 1fr; }
}

/* El wrapper (no .ficha-panel directo) es el que queda "pegado" al
   hacer scroll — así la calculadora de sueldo base (05-oct-2026, apilada
   debajo de la tarjeta "quién es") sube y baja junto con ella, en vez de
   quedar cada una con su propio comportamiento de sticky. */
.ficha-panel-columna { position: sticky; top: 1.25rem; display: flex; flex-direction: column; gap: 1.5rem; }
.ficha-panel { text-align: center; }

.ficha-avatar {
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--fin-indigo), var(--fin-violeta));
  color: white;
  font-weight: 700;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
}

.ficha-nombre { font-size: 1.15rem; font-weight: 700; color: var(--texto-titulo); margin: 0 0 0.15rem; }
.ficha-cargo { color: var(--texto-suave); font-size: 0.9rem; margin: 0 0 0.75rem; }
.ficha-etiquetas { display: flex; flex-direction: column; gap: 0.4rem; align-items: center; margin-bottom: 0.5rem; }

.ficha-info-lista {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
  text-align: left;
}

.ficha-dato label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-suave);
  margin-bottom: 0.15rem;
}

.ficha-dato .valor { font-size: 0.92rem; color: var(--texto); font-weight: 600; }

.ficha-datos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 1.5rem;
  margin: 1rem 0 1.25rem;
}

/* Resumen en vivo del formulario de liquidación — se recalcula solo mientras
   Carlos va escribiendo, mismo cálculo que el PDF final. */
.resumen-liquidacion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0;
  padding: 1rem;
  border-radius: 10px;
  background: var(--fin-indigo-fondo);
  border: 1px solid var(--borde);
}

.resumen-liquidacion-item { text-align: center; }

.resumen-liquidacion-item label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-suave);
  margin-bottom: 0.25rem;
}

.resumen-liquidacion-item .monto {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--texto-titulo);
  font-variant-numeric: tabular-nums;
}

.resumen-liquidacion-item.destacado .monto { color: var(--verde); }

.etiqueta-grupo {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.etiqueta-grupo-costo_venta { background: var(--fin-rosa-fondo); color: var(--fin-rosa); }
.etiqueta-grupo-gasto_operacional { background: var(--fin-naranja-fondo); color: var(--fin-naranja); }
.etiqueta-grupo-no_operacional { background: var(--fin-teal-fondo); color: var(--fin-teal); }
.etiqueta-grupo-impuesto { background: var(--fin-indigo-fondo); color: var(--fin-indigo); }

.filtros-compras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.filtros-compras #filtro-categoria {
  max-width: 220px;
}

.buscador-proveedor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 9px;
  padding: 0.55rem 0.8rem;
  max-width: 340px;
  flex: 1;
  min-width: 220px;
  color: var(--texto-suave);
}

.buscador-proveedor svg { width: 17px; height: 17px; flex-shrink: 0; }

.th-ordenable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.th-ordenable:hover { color: var(--fin-indigo); }

.icono-orden {
  font-size: 0.75em;
  color: var(--texto-suave);
  margin-left: 0.15rem;
}

.th-ordenable[data-orden] .icono-orden { color: var(--fin-indigo); font-weight: 700; }

.buscador-proveedor input {
  border: none;
  background: none;
  outline: none;
  font-size: 0.9rem;
  color: var(--texto);
  width: 100%;
}

/* Banner de "vista previa" — cuando Carlos entra al portal de un cliente
   desde "Ver portal del cliente" (admin), sin cerrar su sesión de admin.
   Tono informativo (índigo de marca), no de alerta — para no confundirlo
   visualmente con el aviso de deuda atrasada, que sí es una advertencia. */
.alerta-vista-previa {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--realce-fondo);
  color: var(--fin-indigo);
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-bottom: 1px solid var(--fin-indigo);
}

.alerta-vista-previa svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.alerta-vista-previa span {
  flex: 1;
}

.alerta-vista-previa a {
  color: var(--fin-indigo);
  text-decoration: underline;
  font-weight: 700;
}

/* Aviso de deuda atrasada — banner de ancho completo, arriba de todo, en
   cualquier página del portal del cliente (ver base.html + context
   processor en app.py) para que se note apenas entra, sin importar en qué
   sección aterrice primero. */
.alerta-deuda-atrasada {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--error-fondo);
  color: var(--rojo);
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-bottom: 1px solid var(--rojo);
}

.alerta-deuda-atrasada svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.alerta-deuda-atrasada span {
  flex: 1;
}

.alerta-deuda-atrasada a {
  color: var(--rojo);
  text-decoration: underline;
  font-weight: 700;
  margin-left: 0.3rem;
}

.alerta-deuda-atrasada-cerrar {
  background: none;
  border: none;
  color: var(--rojo);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  flex-shrink: 0;
}

.modal-deuda-atrasada {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: 2rem;
  background: rgba(15, 23, 42, 0.6);
}

.modal-deuda-atrasada-caja {
  background: var(--tarjeta);
  border-radius: 0.75rem;
  padding: 1.75rem 1.5rem;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.modal-deuda-atrasada-icono {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--error-fondo);
  color: var(--rojo);
}

.modal-deuda-atrasada-icono svg {
  width: 28px;
  height: 28px;
}

.modal-deuda-atrasada-caja h2 {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
  color: var(--texto-titulo);
}

.modal-deuda-atrasada-caja p {
  margin: 0 0 1.5rem;
  color: var(--texto-suave);
  font-size: 0.92rem;
  line-height: 1.5;
}

.modal-deuda-atrasada-caja strong {
  color: var(--rojo);
}

.modal-deuda-atrasada-botones {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.modal-deuda-atrasada-ok {
  background: var(--rojo);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.modal-deuda-atrasada-detalle {
  color: var(--texto-suave);
  font-size: 0.85rem;
  text-decoration: underline;
}

/* Panel de Obligaciones (se llamó "Vencimientos" al principio, renombrado
   a pedido del usuario) — cada área en su propia tarjeta grande, centrada,
   con acento de color propio (mismo patrón que .kpi-fin) y brillo neon
   compartido (mismo --acento-glow que ya usa .periodo-destacado/.kpi-fin,
   no un brillo por color — así se ve como una sola familia neon). */
.obligaciones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1.25rem;
}

.obligacion-tarjeta {
  background: var(--tarjeta);
  border-radius: 18px;
  border-top: 4px solid transparent;
  box-shadow: var(--sombra-tarjeta, 0 1px 3px rgba(0, 0, 0, 0.06));
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
}

.obligacion-icono {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}
.obligacion-icono svg { width: 28px; height: 28px; }

.obligacion-tarjeta.color-indigo { border-top-color: var(--fin-indigo); }
.obligacion-tarjeta.color-indigo .obligacion-icono { background: var(--fin-indigo-fondo); color: var(--fin-indigo); }
.obligacion-tarjeta.color-naranja { border-top-color: var(--fin-naranja); }
.obligacion-tarjeta.color-naranja .obligacion-icono { background: var(--fin-naranja-fondo); color: var(--fin-naranja); }
.obligacion-tarjeta.color-esmeralda { border-top-color: var(--fin-esmeralda); }
.obligacion-tarjeta.color-esmeralda .obligacion-icono { background: var(--fin-esmeralda-fondo); color: var(--fin-esmeralda); }
.obligacion-tarjeta.color-teal { border-top-color: var(--fin-teal); }
.obligacion-tarjeta.color-teal .obligacion-icono { background: var(--fin-teal-fondo); color: var(--fin-teal); }
.obligacion-tarjeta.color-violeta { border-top-color: var(--fin-violeta); }
.obligacion-tarjeta.color-violeta .obligacion-icono { background: var(--fin-violeta-fondo); color: var(--fin-violeta); }

/* Ícono con logo real (F29/SII, Previred) en vez del ícono genérico de
   línea — mismo círculo de 56px que el resto (tamaño y forma sin tocar,
   a pedido explícito del usuario), solo con fondo neutro claro en vez
   del "fondo" de color propio del área, así se ven los colores reales
   de la marca sin que el tinte del área choque con ellos; el acento de
   color del área sigue viviendo en el borde superior de la tarjeta (y,
   en tema neón, en el brillo del propio círculo — ver más abajo). El
   logo (isotipo + la palabra "PREVIRED" en el caso de Previred, bien
   apaisado) es lo que se adapta/escala para entrar en ese círculo, no al
   revés. */
.obligacion-tarjeta .obligacion-icono.obligacion-icono-logo {
  background: #ffffff;
  padding: 8px;
}
.obligacion-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.obligacion-area {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
}

.obligacion-descripcion {
  font-size: 0.95rem;
  color: var(--texto);
  min-height: 2.4em;
}

.obligacion-monto {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--texto-titulo);
  font-variant-numeric: tabular-nums;
  margin: 0.15rem 0;
}

.obligacion-fecha {
  font-size: 0.85rem;
  color: var(--texto-suave);
}

.obligacion-tarjeta .boton-chico {
  margin-top: 0.5rem;
}

:root[data-tema="neon"] .obligacion-tarjeta {
  border: 1px solid var(--borde);
  border-top: 4px solid transparent;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
:root[data-tema="neon"] .obligacion-tarjeta.color-indigo { border-top-color: var(--fin-indigo); }
:root[data-tema="neon"] .obligacion-tarjeta.color-naranja { border-top-color: var(--fin-naranja); }
:root[data-tema="neon"] .obligacion-tarjeta.color-esmeralda { border-top-color: var(--fin-esmeralda); }
:root[data-tema="neon"] .obligacion-tarjeta.color-teal { border-top-color: var(--fin-teal); }
:root[data-tema="neon"] .obligacion-tarjeta.color-violeta { border-top-color: var(--fin-violeta); }
:root[data-tema="neon"] .obligacion-tarjeta:hover {
  box-shadow: 0 0 22px var(--acento-glow), inset 0 0 16px rgba(34, 230, 255, 0.05);
  transform: translateY(-3px);
}
:root[data-tema="neon"] .obligacion-tarjeta.obligacion-urgente {
  box-shadow: 0 0 18px var(--acento-glow), inset 0 0 14px rgba(34, 230, 255, 0.06);
  animation: portal-respirar 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-tema="neon"] .obligacion-tarjeta.obligacion-urgente { animation: none; }
}
/* El logo real (no un ícono monocromo) necesita su propio brillo neon —
   a diferencia del resto de la tarjeta (que comparte el cian genérico),
   acá el brillo usa el MISMO color de acento del área (naranja para F29,
   violeta para Previred) tanto en el círculo/píldora blanca de fondo
   como en el logo mismo, para que la marca se sienta "iluminada" con su
   propio color en vez de con un cian que no tiene nada que ver. */
:root[data-tema="neon"] .obligacion-tarjeta.color-naranja .obligacion-icono-logo {
  box-shadow: 0 0 18px var(--fin-naranja-glow), inset 0 0 0 1px rgba(234, 88, 12, 0.4);
}
:root[data-tema="neon"] .obligacion-tarjeta.color-naranja .obligacion-logo {
  filter: drop-shadow(0 0 5px var(--fin-naranja-glow));
}
:root[data-tema="neon"] .obligacion-tarjeta.color-violeta .obligacion-icono-logo {
  box-shadow: 0 0 18px var(--fin-violeta-glow), inset 0 0 0 1px rgba(124, 58, 237, 0.4);
}
:root[data-tema="neon"] .obligacion-tarjeta.color-violeta .obligacion-logo {
  filter: drop-shadow(0 0 5px var(--fin-violeta-glow));
}

/* ======================================================================
   Marca "Leonard Contable" + rediseño minimalista del portal de cliente
   (desde 24-sep-2026, a pedido del usuario: "todo debe ser más elegante y
   minimalista", sin cuadros de fondo). Acotado con `.con-marca`
   (clase del <body> en base.html para toda ruta que no sea admin_*), así
   el panel de admin de Carlos no cambia.
   ====================================================================== */

:root {
  --marca-trazo: #0284c7;
  --marca-brillo: transparent;
  --marca-halo: transparent;
  --marca-borde-suave: rgba(2, 132, 199, 0.08);
  /* Color de las letras de "Leonard" — aparte de --marca-trazo (que sigue
     usando el botón, los campos y el menú) para poder cambiar solo el
     logo. Plata sin brillo desde 25-sep-2026, a pedido del usuario. */
  --marca-letra: #64748b;
  --marca-letra-brillo: transparent;
  --marca-letra-halo: transparent;
}

:root[data-tema="neon"] {
  --marca-trazo: #38bdf8;
  --marca-brillo: rgba(56, 189, 248, 0.25);
  --marca-halo: rgba(124, 58, 237, 0.12);
  --marca-borde-suave: rgba(56, 189, 248, 0.08);
  --marca-letra: #c7d0e0;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Logo — ver _marca_leonard.html para el porqué de las 3 capas. El tamaño
   se controla con font-size del contenedor; todo lo demás va en em. */
.marca-leonard {
  display: inline-flex;
  flex-direction: column;
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}

.marca-leonard-grande { font-size: 64px; }

.marca-leonard-nombre {
  position: relative;
  font-family: 'Bricolage Grotesque', -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.marca-leonard-nombre span { display: block; }

.ml-halo {
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 0.125em var(--marca-letra-halo);
  filter: blur(3px);
}

.ml-trazo {
  position: relative;
  color: var(--marca-letra);
  -webkit-text-stroke: 0.05em var(--marca-letra);
  filter: drop-shadow(0 0 0.06em var(--marca-letra-brillo));
}

.ml-cubre {
  position: absolute;
  inset: 0;
  color: var(--fondo);
}

.marca-leonard-contable {
  font-size: 0.24em;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  text-align: right;
  margin-top: -0.2em;
}

/* Login minimalista: marca + campos centrados, sin tarjeta. */
.login-minimal {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-minimal .marca-leonard { margin-bottom: 4.5rem; }

.login-minimal form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.login-minimal label {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: 1.9rem 0 0.4rem;
}

.login-minimal label:first-of-type { margin-top: 0; }

.login-minimal input {
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  border: none;
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
  background: transparent;
  color: var(--texto);
  text-align: center;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  padding: 0 2px;
  transition: border-color 0.15s ease;
}

.login-minimal input:focus {
  outline: none;
  border-bottom-color: var(--marca-trazo);
}

.login-minimal button {
  margin-top: 2.75rem;
  height: 48px;
  border: 1px solid var(--marca-trazo);
  border-radius: 999px;
  background: transparent;
  color: var(--marca-trazo);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 14px var(--marca-brillo);
  transition: background 0.15s ease;
}

.login-minimal button:hover { background: var(--marca-borde-suave); }

.login-minimal .error {
  background: none;
  padding: 0;
  margin: -2.5rem 0 2rem;
  text-align: center;
}

/* Encabezado y menú del portal: sin barras de color, directo sobre el
   fondo, alineados con el ancho del contenido (.f29-layout, 1000px). */
.con-marca .encabezado {
  background: transparent;
  color: var(--texto);
  gap: 1.5rem;
  padding: 2.25rem max(1.5rem, calc((100% - 1000px) / 2 + 1.5rem)) 1.75rem;
}

.con-marca .encabezado-empresa {
  margin-left: auto;
  text-align: right;
}

.con-marca .encabezado-empresa strong { font-weight: 500; font-size: 0.9rem; }

.con-marca .encabezado .rut { color: var(--texto-suave); opacity: 1; }

.con-marca .salir { color: var(--texto-suave); opacity: 1; }
.con-marca .salir:hover { color: var(--texto); }

.con-marca .cambiar-empresa {
  background: transparent;
  border-color: var(--borde);
  color: var(--texto-suave);
}

.con-marca .cambiar-empresa:hover {
  background: transparent;
  color: var(--texto);
  border-color: var(--texto-suave);
}

.con-marca .marca-cliente-logo { height: 30px; }

.con-marca .marca-cliente-sucursal,
:root[data-tema="neon"] .con-marca .marca-cliente-sucursal {
  background: none;
  border: none;
  box-shadow: none;
  text-shadow: none;
  padding: 0;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
}

.con-marca .encabezado + .subnav {
  background: transparent;
  gap: 2rem;
  padding: 0;
  margin: 0 max(1.5rem, calc((100% - 1000px) / 2 + 1.5rem));
  border-bottom: 1px solid var(--borde);
}

.con-marca .encabezado + .subnav a {
  color: var(--texto-suave);
  font-weight: 500;
  padding: 0.65rem 0;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}

.con-marca .encabezado + .subnav a:hover { color: var(--texto); }

.con-marca .encabezado + .subnav a.activo,
:root[data-tema="neon"] .con-marca .encabezado + .subnav a.activo {
  color: var(--texto);
  border-bottom-color: var(--marca-trazo);
  text-shadow: none;
}

@media (max-width: 640px) {
  .con-marca .encabezado { flex-wrap: wrap; padding-top: 1.5rem; }
  .con-marca .encabezado + .subnav { gap: 1.25rem; }
  .marca-leonard-grande { font-size: 52px; }
}

/* En el encabezado la marca va más chica: trazo un poco más grueso en
   proporción para que el contorno no se pierda (la mitad interior queda
   tapada por .ml-cubre). */
.encabezado .marca-leonard { font-size: 30px; }
.encabezado .ml-trazo { -webkit-text-stroke-width: 0.075em; }

/* Variante C4 de la marca (solo se ve en local con MARCA_VARIANTE=c4):
   "LEONARD" en mayúsculas espaciadas y "CONTABLE" estirado letra por
   letra hasta el ancho exacto del nombre. Sin halo, como en la maqueta. */
.marca-leonard-c4 .marca-leonard-nombre {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* el espaciado también queda después de la última letra — se compensa
     para que "CONTABLE" termine justo bajo la "D" */
  margin-right: -0.06em;
}

.marca-leonard-c4 .ml-halo { display: none; }

.marca-leonard-c4 .marca-leonard-contable {
  display: flex;
  justify-content: space-between;
  font-size: 0.23em;
  letter-spacing: 0;
  margin-top: 0.6em;
  padding: 0 0.1em;
}