/* =============================================================================
   BCS - Hoja de estilos principal
   Estilo "glass" (VisionOS-like) integrado desde la plataforma hermana SIGA
   (header.php / dashboard.php / index.php — usados EXCLUSIVAMENTE como
   referencia de diseño, sin su lógica de negocio ni sus datos). Los valores
   de opacidad de los paneles se mantienen algo más sólidos que en la
   referencia (pensada para una sola tarjeta de login) para no sacrificar la
   legibilidad de las tablas de datos densas que tiene BCS.
   ============================================================================= */

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

:root {
    /* El menu desplegable NATIVO de un <select> (la lista de <option> que
       pinta el propio navegador/SO, no un dropdown nuestro) ignora casi todo
       nuestro CSS salvo "color-scheme": sin esto, Chrome/Firefox lo pintan
       siempre con su paleta clara por defecto aunque la pagina este en modo
       oscuro -- ahi el texto quedaba gris claro sobre fondo blanco con el
       popup nativo y casi ilegible. Ver el bloque body[data-theme="dark"]
       mas abajo para el valor "dark". */
    color-scheme: light;
    --brand: #34d8b0;
    --brand-2: #7ee8d0;
    --brand-strong: #0ea394;
    --bg: #eef5f3;
    --panel: rgba(255,255,255,0.6);
    --panel-2: rgba(255,255,255,0.78);
    --panel-solid: #f5fbfa;
    --panel-border: rgba(15,60,52,0.14);
    --panel-border-soft: rgba(15,60,52,0.08);
    --text: #0f2a26;
    --text-soft: #3c5854;
    --text-muted: #6b8683;
    --ring: rgba(52,216,176,0.16);
    --radius: 18px;
    --radius-sm: 10px;
    --glass-blur: blur(24px) saturate(200%) brightness(1.08) contrast(1.02);
    --glass-blur-soft: blur(16px) saturate(190%) brightness(1.06);
    --shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 16px 40px -18px rgba(15,60,52,0.18), 0 2px 6px -3px rgba(15,60,52,0.08);
    --danger: #dc2626;
    --danger-bg: rgba(220,38,38,0.10);
    --warning: #d97706;
    --warning-bg: rgba(245,158,11,0.12);
    --success: #059669;
    --success-bg: rgba(5,150,105,0.12);
    --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

:root[data-theme="dark"], :root:not([data-theme="light"]) {
}

body[data-theme="dark"], body.dark-theme {
    color-scheme: dark;
    --bg: #060b0b;
    --panel: rgba(18,32,30,0.6);
    --panel-2: rgba(255,255,255,0.08);
    --panel-solid: #0b1917;
    --panel-border: rgba(255,255,255,0.12);
    --panel-border-soft: rgba(255,255,255,0.06);
    --text: #eaf7f4;
    --text-soft: #a9c4bf;
    --text-muted: #7a938e;
    --ring: rgba(52,216,176,0.22);
    --glass-blur: blur(24px) saturate(200%) brightness(1.02) contrast(1.06);
    --glass-blur-soft: blur(16px) saturate(190%) brightness(1.02);
    --shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 20px 48px -18px rgba(0,0,0,0.55), 0 2px 8px -3px rgba(0,0,0,0.3);
    --danger-bg: rgba(220,38,38,0.18);
    --warning-bg: rgba(245,158,11,0.18);
    --success-bg: rgba(5,150,105,0.18);
}

html, body { height: 100%; }

body {
    font-family: var(--font);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.011em;
    transition: background .3s ease, color .3s ease;
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(1000px 650px at 12% -8%, rgba(126,232,208,0.30) 0%, transparent 55%),
        radial-gradient(850px 600px at 100% 8%, rgba(52,216,176,0.20) 0%, transparent 52%),
        radial-gradient(900px 720px at 50% 115%, rgba(14,163,148,0.14) 0%, transparent 55%),
        var(--bg);
    background-position: 0% 0%, 0% 0%, 0% 0%;
    background-attachment: fixed;
    animation: ambientDrift 150s ease-in-out infinite alternate;
}
body.dark-theme, body[data-theme="dark"] {
    background:
        radial-gradient(1000px 650px at 12% -8%, rgba(52,216,176,0.16) 0%, transparent 55%),
        radial-gradient(850px 600px at 100% 8%, rgba(14,163,148,0.20) 0%, transparent 52%),
        radial-gradient(900px 720px at 50% 115%, rgba(15,42,38,0.45) 0%, transparent 55%),
        var(--bg);
}
@keyframes ambientDrift {
    0% { background-position: 0% 0%, 0% 0%, 0% 0%; }
    50% { background-position: 6% 4%, -5% 6%, 4% -5%; }
    100% { background-position: -4% -3%, 5% -4%, -3% 5%; }
}

a { color: inherit; text-decoration: none; }

/* ---- Formas flotantes de fondo (referencia: dashboard.php .bg-shapes) ----- */
.bg-shapes { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-shapes .shape { position: absolute; border-radius: 50%; opacity: .09; will-change: transform, filter; animation: floatShape 22s ease-in-out infinite alternate; }
.bg-shapes .shape:nth-child(1) { width: 320px; height: 320px; top: -90px; left: -90px; background: radial-gradient(circle at 30% 30%, #a8f2de, #34d8b0 60%, transparent 78%); animation-delay: 0s; animation-duration: 24s; }
.bg-shapes .shape:nth-child(2) { width: 240px; height: 240px; bottom: -50px; right: -50px; background: radial-gradient(circle at 30% 30%, #7ee8d0, #0ea394 60%, transparent 78%); animation-delay: -6s; animation-duration: 19s; }
.bg-shapes .shape:nth-child(3) { width: 160px; height: 160px; top: 50%; right: 3%; background: radial-gradient(circle at 30% 30%, #c8fbef, #34d8b0 60%, transparent 78%); animation-delay: -11s; animation-duration: 21s; opacity: .06; }
.bg-shapes .shape:nth-child(4) { width: 130px; height: 130px; bottom: 22%; left: 3%; background: radial-gradient(circle at 30% 30%, #0ea394, #0f2a26 65%, transparent 78%); animation-delay: -16s; animation-duration: 17s; opacity: .06; }
body.dark-theme .bg-shapes .shape, body[data-theme="dark"] .bg-shapes .shape { filter: brightness(1.15); }
@keyframes floatShape {
    0% { transform: translate(0,0) scale(1) rotate(0deg); }
    50% { transform: translate(20px,-24px) scale(1.05) rotate(8deg); }
    100% { transform: translate(-16px,20px) scale(.96) rotate(-6deg); }
}

/* ---- Overlay de transicion de tema ---------------------------------------- */
#theme-transition-overlay {
    position: fixed; inset: 0; background: #000; opacity: 0; visibility: hidden;
    transition: opacity .5s ease, visibility .5s; z-index: 9998; pointer-events: none;
}
#theme-transition-overlay.active { visibility: visible; opacity: .55; }

/* =============================================================================
   ENCABEZADO HORIZONTAL (referencia visual: captura de siga.valdiviadigital.cl
   compartida por el cliente) — barra flotante de dos filas: logos (LM a la
   izquierda, espacio reservado al centro para un logo futuro, PCG a la
   derecha con función de cambio de tema) y, debajo, el menú de navegación en
   forma de botones/pastillas.
   ============================================================================= */
.app-header {
    position: sticky; top: 0; z-index: 70;
    margin: 0; border-radius: 0; width: 100%;
    /* Sin overflow:hidden: recortaria el menu desplegable movil, que se
       abre como una capa aparte debajo de esta barra (position:absolute). */
    background: var(--panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: none;
    border-bottom: 1px solid var(--panel-border);
    box-shadow: 0 8px 24px -14px rgba(15,60,52,0.22);
}
body.dark-theme .app-header, body[data-theme="dark"] .app-header { box-shadow: 0 10px 28px -14px rgba(0,0,0,0.45); }

.header-top {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: 16px; padding: 12px 24px;
    max-width: 1500px; margin: 0 auto;
}
.header-col-left { display: flex; justify-content: flex-start; }
.header-col-center { display: flex; justify-content: center; }
.header-col-right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }

/* Espacio reservado a proposito: aqui va un logo futuro (p.ej. del
   Departamento de Bienestar). Vacio no rompe el layout: min-height/width
   mantienen el alto del header estable mientras no haya imagen.
   El limite de tamano se aplica de las DOS formas posibles de agregar el
   logo: como <img class="header-logo-slot"> directamente, o como <img>
   dentro de <div class="header-logo-slot">. Sin esto, un <img> puesto
   directo con esa clase no hereda el alto (34px) y se ve a su tamano
   original del archivo, que suele ser mucho mas grande. */
.header-logo-slot { min-height: 58px; min-width: 84px; display: flex; align-items: center; justify-content: center; }
.header-logo-slot img,
img.header-logo-slot {
    height: 34px; width: auto; max-width: 160px; object-fit: contain;
}

/* ---- Logos con función de cambio de tema ---------------------------------- */
.logos-header { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.logo-lm { height: 40px; width: auto; transition: filter .3s ease; }
body:not(.dark-theme) .logo-lm { filter: brightness(0); opacity: .82; }
body.dark-theme .logo-lm, body[data-theme="dark"] .logo-lm { filter: none; opacity: 1; }

/* Logo de BCS entre LM.png y PCGRENDER.png en el header del login (ver
   views/auth/login.php). No necesita el filtro de tema de .logo-lm: es un
   logo a color, se ve igual en modo claro y oscuro. */
.logo-bcs { height: 40px; width: auto; object-fit: contain; }

.logo-right {
    position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center;
    padding: 2px; border-radius: 10px; border: none; background: transparent;
}
/* Resplandor exterior ("ampolleta"): centrado sobre el dibujo real del logo,
   no sobre la caja del wrapper (referencia: osm/index.php .logo-pcg-wrapper,
   cuyo arte dentro del PNG tampoco queda geometricamente centrado). */
.logo-right::before {
    content: ''; position: absolute; top: 42%; left: 48%; transform: translate(-50%,-50%);
    width: 250%; height: 250%;
    background: radial-gradient(ellipse at center, rgba(255,215,0,.55) 0%, rgba(255,215,0,.18) 42%, rgba(255,215,0,0) 72%);
    filter: blur(9px); pointer-events: none; z-index: 0; animation: pulseGlow 2.2s ease-in-out infinite;
    transition: filter .3s ease;
}
.logo-right::after {
    content: ''; position: absolute; top: 25%; left: 36%; transform: translate(-50%,-50%);
    width: 22px; height: 22px; border-radius: 50%; pointer-events: none; z-index: 0;
    background: radial-gradient(circle, rgba(255,255,200,1) 0%, rgba(255,230,100,.9) 30%, rgba(255,215,0,.4) 60%, transparent 80%);
    animation: pulseGlow 2.2s ease-in-out infinite;
    transition: opacity .3s ease, width .2s ease, height .2s ease;
}
@keyframes pulseGlow { 0%,100% { opacity:.8; transform: translate(-50%,-50%) scale(1); } 50% { opacity:1; transform: translate(-50%,-50%) scale(1.15); } }
body.dark-theme .logo-right::before, body[data-theme="dark"] .logo-right::before { opacity: .18; animation: none; }
body.dark-theme .logo-right::after, body[data-theme="dark"] .logo-right::after { opacity: .3; width: 16px; height: 16px; animation: none; }
/* Al pasar el cursor, el resplandor se intensifica igual que en la referencia */
.logo-right:hover::before { filter: blur(7px); }
.logo-right:hover::after { width: 32px; height: 32px; opacity: 1; }
body.dark-theme .logo-right:hover::after, body[data-theme="dark"] .logo-right:hover::after { opacity: .55; width: 24px; height: 24px; }

.logo-pcg {
    height: 35px; width: auto; position: relative; z-index: 1; transition: transform .3s ease, filter .3s ease;
    filter: brightness(2.3) contrast(1.35) sepia(1) saturate(4) hue-rotate(-10deg);
}
body.dark-theme .logo-pcg, body[data-theme="dark"] .logo-pcg { filter: brightness(1.45) contrast(1.15) sepia(.5) saturate(3) hue-rotate(-5deg); }
.logo-right:hover .logo-pcg { transform: scale(1.08); }
/* Hover: el logo toma el mismo color/brillo que en modo claro (referencia:
   osm/index.php, donde en modo oscuro el hover "adelanta" el look de modo
   claro con un leve resplandor dorado extra). */
body:not(.dark-theme) .logo-right:hover .logo-pcg {
    filter: brightness(2.7) contrast(1.45) sepia(1) saturate(4.6) hue-rotate(-9deg) drop-shadow(0 0 6px rgba(255,215,0,.5));
}
body.dark-theme .logo-right:hover .logo-pcg, body[data-theme="dark"] .logo-right:hover .logo-pcg {
    filter: brightness(2.3) contrast(1.35) sepia(1) saturate(4) hue-rotate(-10deg) drop-shadow(0 0 6px rgba(255,215,0,.35));
}

.nav-toggle {
    display: none;
    width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid var(--panel-border); background: var(--panel-2); color: var(--text);
    font-size: 18px; cursor: pointer; flex-shrink: 0;
}

.btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--panel-border); background: var(--panel-2);
    color: var(--text); padding: 8px 14px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all .15s ease;
}
.btn:hover { border-color: var(--brand); }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-strong)); color: #06231f; border: none; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-danger { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* Botón "Cerrar sesión" con el resplandor rojo de referencia (header.php .btn-logout) */
#logout-btn.btn-logout, .btn-logout {
    border-color: transparent;
    box-shadow: 0 0 6px rgba(231,76,60,.55), 0 0 12px rgba(231,76,60,.3);
    color: var(--danger);
}
#logout-btn.btn-logout:hover, .btn-logout:hover { box-shadow: 0 0 10px rgba(231,76,60,.7), 0 0 20px rgba(231,76,60,.4); }

.icon-btn {
    width: 36px; height: 36px; border-radius: 10px; display: inline-flex;
    align-items: center; justify-content: center; border: 1px solid var(--panel-border);
    background: var(--panel-2); cursor: pointer; font-size: 16px;
}

/* ---- Navegación horizontal (fila de botones/pastillas) ---------------------
   Referencia real: templates/headerdasboard.php de SIGA (el include que usa
   dashboard.php) — fila centrada y que envuelve (flex-wrap), con "Salir"
   integrado como la ultima pastilla de la misma fila, no empujado a la
   derecha. BCS mantiene ademas el menu desplegable movil (nav-toggle) porque
   tiene ~12 opciones de navegacion frente a las 3-6 de SIGA: el patron de
   "solo ocultar el texto e ir en una fila" de la referencia no alcanza para
   esa cantidad de items en pantallas chicas. ------------------------------- */
.header-nav {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 4px; padding: 6px 24px 8px; max-width: 1500px; margin: 0 auto;
    border-top: 1px solid var(--panel-border-soft);
}

/* Pastillas minimalistas: sin relleno ni borde en reposo (solo texto+icono),
   el color solido aparece recien al pasar el cursor o al estar activas. */
.nav-link {
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
    padding: 5px 10px; border-radius: 8px;
    background: transparent; color: var(--text-soft); font-size: 11.5px; font-weight: 600;
    border: 1px solid transparent;
    font-family: inherit; cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.nav-link:hover { background: var(--brand); border-color: var(--brand); color: #06231f; transform: translateY(-1px); box-shadow: 0 3px 10px var(--ring); }
.nav-link.active { background: linear-gradient(135deg, var(--brand), var(--brand-strong)); color: #06231f; border-color: transparent; }
body.dark-theme .nav-link.active, body[data-theme="dark"] .nav-link.active { color: #06231f; }
.nav-link .icon { font-size: 11px; flex-shrink: 0; }
/* Ultimo elemento del menu: cerrar sesion, integrado en la misma fila (como
   "Salir" en headerdasboard.php de SIGA), distinguido en rojo. */
.nav-link-logout {
    border-color: rgba(220,38,38,.35); color: var(--danger); background: var(--danger-bg);
}
.nav-link-logout:hover { background: var(--danger); border-color: var(--danger); color: #fff; box-shadow: 0 4px 16px rgba(220,38,38,.25); }

/* "Distintivo luminico": para el link "Volver a SIGA" (y su equivalente
   "Ir a BCS" del lado de SIGA), un ambar que pulsa suave para diferenciarlo
   claramente de las demas pastillas del menu (teal en reposo/activo, rojo
   para salir). Independiente del tema claro/oscuro: el resplandor debe
   notarse igual en los dos. */
.nav-link.glow {
    border-color: rgba(255,180,0,.5);
    color: #9a6400;
    background: linear-gradient(135deg, rgba(255,196,0,.20), rgba(255,196,0,.06));
    animation: navGlowPulse 2.2s ease-in-out infinite;
}
body.dark-theme .nav-link.glow, body[data-theme="dark"] .nav-link.glow { color: #ffd666; }
.nav-link.glow:hover {
    background: #ffb800; border-color: #ffb800; color: #3a2900; transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(255,184,0,.45); animation: none;
}
@keyframes navGlowPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(255,184,0,0); }
    50% { box-shadow: 0 0 14px rgba(255,184,0,.55); }
}
@media (prefers-reduced-motion: reduce) {
    .nav-link.glow { animation: none; box-shadow: 0 0 10px rgba(255,184,0,.35); }
}

.content { position: relative; z-index: 1; padding: 22px 26px; max-width: 1400px; width: 100%; margin: 0 auto; }

/* ---- Tarjetas / secciones (con acabado "glass" y filo brillante) ---------- */
.seccion {
    position: relative; isolation: isolate;
    background:
        radial-gradient(135% 170% at 4% -16%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 42%),
        var(--panel-2);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
    backdrop-filter: var(--glass-blur-soft);
    -webkit-backdrop-filter: var(--glass-blur-soft);
}
.seccion::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
    padding: 1px;
    background: linear-gradient(155deg, rgba(255,255,255,0.55), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0.12) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .55;
}
.seccion-titulo {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 10px; margin-bottom: 14px;
    border-bottom: 1px solid var(--panel-border-soft);
    color: var(--brand-strong); font-size: .85rem; font-weight: 700;
}
body.dark-theme .seccion-titulo, body[data-theme="dark"] .seccion-titulo { color: var(--brand-2); }
.seccion-titulo span.grow { flex: 1; }
.badge-count { font-size: .6rem; background: var(--ring); padding: 3px 10px; border-radius: 12px; color: var(--text-muted); }

/* Subtitulo interno de una seccion (p.ej. "Información del Afiliado" / "Ítems"
   dentro de la Solicitud de Reembolso de autoservicio): mismo tono que
   seccion-titulo pero sin borde propio, para separar visualmente dos bloques
   de campos dentro de UNA sola tarjeta sin duplicar el encabezado con icono. */
.seccion-subtitulo {
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--text-muted); margin: 18px 0 10px;
}
.seccion-subtitulo:first-of-type { margin-top: 0; }

/* ---- Banner de bienvenida (dashboard) -------------------------------------- */
.welcome-banner { display: flex; justify-content: center; margin-bottom: 16px; }
.welcome-content-badge {
    display: inline-flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: center;
    padding: .5rem 1.4rem; border-radius: 999px; font-size: .78rem; font-weight: 500; color: var(--text-soft);
    border: 1px solid var(--panel-border); box-shadow: 0 4px 14px -8px rgba(15,60,52,.2);
    background: radial-gradient(135% 170% at 4% -16%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 42%), var(--panel-2);
    backdrop-filter: var(--glass-blur-soft); -webkit-backdrop-filter: var(--glass-blur-soft);
}
.welcome-content-badge .user-name { font-weight: 700; color: var(--brand-strong); }
body.dark-theme .welcome-content-badge .user-name, body[data-theme="dark"] .welcome-content-badge .user-name { color: var(--brand-2); }
.welcome-content-badge .perfil-badge { background: var(--ring); padding: .15rem .6rem; border-radius: 20px; font-size: .62rem; font-weight: 700; color: var(--brand-strong); text-transform: uppercase; letter-spacing: .03em; }
body.dark-theme .welcome-content-badge .perfil-badge, body[data-theme="dark"] .welcome-content-badge .perfil-badge { color: var(--brand-2); }

/* ---- Stats grid ------------------------------------------------------------ */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-item { background: var(--panel-2); border: 1px solid var(--panel-border-soft); border-radius: 12px; padding: 14px 16px; min-width: 0; overflow: hidden; transition: transform .15s ease, border-color .15s ease; }
.stat-item:hover { transform: translateY(-2px); border-color: var(--brand); }
.stat-item .stat-icon { font-size: .9rem; color: var(--text-muted); margin-bottom: 6px; }
.stat-item .stat-value { font-size: clamp(1.05rem, 1.6vw, 1.6rem); font-weight: 800; color: var(--brand-strong); line-height: 1.15; overflow-wrap: break-word; word-break: break-word; }
body.dark-theme .stat-item .stat-value, body[data-theme="dark"] .stat-item .stat-value { color: var(--brand-2); }
.stat-item .stat-label { font-size: .68rem; color: var(--text-muted); margin-top: 4px; }

/* Montos largos (ej. "$123.456.789"): necesitan mas ancho que un contador
   simple para no verse apretados ni cortar texto. */
.stat-item-money { grid-column: span 2; }
@media (max-width: 480px) { .stat-item-money { grid-column: span 1; } }

/* Filas secundarias (Pagos, Plataforma): menos protagonismo que la fila
   principal de solicitudes, asi que tarjetas mas chicas y mas por fila. */
.stats-row-compact { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.stats-row-compact .stat-item { padding: 8px 10px; border-radius: 10px; }
.stats-row-compact .stat-item .stat-icon { font-size: .75rem; margin-bottom: 3px; }
.stats-row-compact .stat-item .stat-value { font-size: clamp(.82rem, 1.1vw, 1.05rem); }
.stats-row-compact .stat-item .stat-label { font-size: .6rem; margin-top: 2px; }

/* ---- Tablas ----------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
table.data-table th, table.data-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--panel-border-soft); white-space: nowrap; }
table.data-table th { background: var(--ring); font-weight: 700; color: var(--text-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; position: sticky; top: 0; }
table.data-table tr:hover td { background: var(--ring); }
table.data-table td.wrap { white-space: normal; }
.row-link { cursor: pointer; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: .68rem; font-weight: 700; }
.badge-ok { background: var(--success-bg); color: var(--success); }
.badge-warn { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-neutral { background: var(--ring); color: var(--text-muted); }

.empty-state { text-align: center; padding: 36px 16px; color: var(--text-muted); }
.empty-state .icon { font-size: 2rem; opacity: .4; margin-bottom: 8px; }

/* ---- Formularios ------------------------------------------------------------ */
label { display: block; font-size: .75rem; font-weight: 600; color: var(--text-soft); margin-bottom: 5px; }
input, select, textarea {
    width: 100%; padding: 9px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--panel-border); background: var(--panel-2); color: var(--text);
    font-size: .85rem; font-family: var(--font);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
/* Respaldo ademas de "color-scheme" de arriba: algunos navegadores/SO si
   toman color/background de los <option> para el popup nativo del select,
   asi que lo fijamos explicitamente en vez de depender solo de la herencia. */
select option { background: var(--panel-solid); color: var(--text); }
.field { margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; }
.form-error { color: var(--danger); font-size: .78rem; margin-top: 5px; }
.form-alert { padding: 10px 14px; border-radius: var(--radius-sm); font-size: .82rem; margin-bottom: 14px; }
.form-alert.error { background: var(--danger-bg); color: var(--danger); }
.form-alert.success { background: var(--success-bg); color: var(--success); }

/* ---- Ajustes del formulario "Nuevo afiliado" (mas minimalista, ver
   views/insureds/list.php): campos que ocupan mas espacio en la fila,
   indicador RUT/correo valido-invalido, y una version mas compacta de
   .seccion para no alargar tanto la pagina. -------------------------- */
.field-grow { grid-column: span 2; }
@media (max-width: 640px) { .field-grow { grid-column: span 1; } }
.field-hint { display: block; font-size: .68rem; margin-top: 4px; min-height: 1.1em; font-weight: 600; }
.field-hint.ok { color: var(--success); }
.field-hint.bad { color: var(--danger); }
.seccion-minimal { padding: 14px 16px; }
.seccion-minimal .field { margin-bottom: 10px; }

/* Tabla de Afiliados con scroll interno propio (pedido explicito: la lista
   completa ya no empuja el resto de la pagina hacia abajo). Encabezado
   sticky (table.data-table th) sigue funcionando igual dentro del scroll. */
.table-scroll-inner .table-wrap { max-height: 480px; overflow-y: auto; }

/* ---- Tom Select: alinearlo a los inputs propios de la app (ver "input,
   select, textarea" mas arriba) en vez de dejar su tema por defecto. ---- */
.ts-wrapper.single .ts-control, .ts-wrapper .ts-control {
    background: var(--panel-2); border: 1px solid var(--panel-border); border-radius: var(--radius-sm);
    color: var(--text); box-shadow: none; padding: 8px 10px; min-height: 0;
}
/* El propio CSS de Tom Select trae "background:#fff" para
   ".ts-wrapper.single.input-active .ts-control" (el estado mientras se esta
   escribiendo para filtrar) con MAS especificidad que la regla de arriba, asi
   que le ganaba y la caja quedaba blanca -- con el texto claro del tema
   oscuro (var(--text)) casi invisible sobre ese blanco. !important fuerza
   que gane siempre nuestro color, sea cual sea el estado. */
.ts-wrapper.single .ts-control, .ts-wrapper .ts-control,
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.single .ts-control.input-active {
    background: var(--panel-2) !important;
}
.ts-wrapper.focus .ts-control { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
/* OJO: el "resultado" flotante (dropdown de Tom Select, calendario de
   Flatpickr) usa --panel-solid y NO --panel-2. --panel-2 es un tinte
   "glass" semitransparente (pensado para paneles que descansan siempre
   sobre el mismo fondo con gradiente de la app -- en modo oscuro llega a
   ser solo 8% de opacidad), perfecto para tarjetas fijas pero no para un
   panel flotante que se superpone sobre texto/tablas arbitrarias: con esa
   opacidad tan baja se veia lo que hay debajo y el texto del propio menu
   quedaba casi ilegible (se "confundia con el fondo", sobre todo en modo
   oscuro). --panel-solid es opaco en ambos temas, como cualquier menu
   flotante deberia ser.
   */
.ts-dropdown { background: var(--panel-solid); border: 1px solid var(--panel-border); color: var(--text); z-index: 1200; }
.ts-dropdown .ts-dropdown-content .option { color: var(--text); background: var(--panel-solid); }
.ts-dropdown .active { background: var(--brand); color: #06231f; }
.ts-dropdown .optgroup-header { background: var(--panel-solid); color: var(--text-muted); }
.ts-control input { color: var(--text) !important; }

/* ---- Flatpickr: mismo look de la app + apertura "3D" (perspectiva +
   inclinacion que se endereza), pedida explicitamente como calendario
   "moderno y en 3D". prefers-reduced-motion la desactiva. ------------- */
.flatpickr-calendar {
    background: var(--panel-solid); border: 1px solid var(--panel-border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow); color: var(--text);
}
.flatpickr-innerContainer, .flatpickr-rContainer, .flatpickr-days, .dayContainer { background: var(--panel-solid); }
.flatpickr-calendar.open { animation: fpOpen3d .28s cubic-bezier(.2,.9,.3,1.2); transform-origin: top center; }
@keyframes fpOpen3d {
    0% { opacity: 0; transform: perspective(800px) rotateX(-25deg) translateY(-8px) scale(.94); }
    100% { opacity: 1; transform: perspective(800px) rotateX(0deg) translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .flatpickr-calendar.open { animation: none; } }
.flatpickr-months, .flatpickr-weekdays { background: transparent; }
.flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { color: var(--text); }
.flatpickr-day { color: var(--text); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--brand); border-color: var(--brand); color: #06231f; }
.flatpickr-day.today { border-color: var(--brand); }
span.flatpickr-weekday { color: var(--text-muted); }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--text-soft); fill: var(--text-soft); }

/* ---- Paginacion -------------------------------------------------------------- */
.pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: .8rem; color: var(--text-muted); }
.pagination .controls { display: flex; gap: 6px; }

/* =============================================================================
   Login / activación de cuenta (referencia visual: index.php de SIGA)
   ============================================================================= */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; z-index: 1; }

.geometric-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.geometric-bg .shape { position: absolute; border-radius: 50%; will-change: transform, filter, opacity; }
.geometric-bg .shape:nth-child(1) { width: 420px; height: 420px; background: radial-gradient(circle at 30% 30%, #a8f2de, #34d8b0 60%, transparent 78%); top: -130px; right: -110px; animation: drift1 35s cubic-bezier(.45,.05,.55,.95) infinite; animation-delay: -6s; }
.geometric-bg .shape:nth-child(2) { width: 330px; height: 330px; background: radial-gradient(circle at 30% 30%, #7ee8d0, #0ea394 60%, transparent 78%); bottom: -90px; left: -80px; animation: drift2 40s ease-in-out infinite; animation-delay: -38s; }
.geometric-bg .shape:nth-child(3) { width: 190px; height: 190px; background: radial-gradient(circle at 30% 30%, #0ea394, #0f2a26 65%, transparent 78%); bottom: 22%; right: 8%; animation: drift3 30s ease-in-out infinite; animation-delay: -21s; }
body.dark-theme .geometric-bg .shape, body[data-theme="dark"] .geometric-bg .shape { filter: brightness(1.15); }
@keyframes drift1 { 0%{transform:translate(0,0) scale(1) rotate(0deg);filter:blur(64px);opacity:.18;} 16%{transform:translate(150px,84px) scale(1.14) rotate(10deg);filter:blur(80px);opacity:.25;} 34%{transform:translate(56px,224px) scale(.92) rotate(-6deg);filter:blur(56px);opacity:.14;} 55%{transform:translate(-168px,150px) scale(1.08) rotate(6deg);filter:blur(86px);opacity:.22;} 78%{transform:translate(-214px,-56px) scale(.96) rotate(-9deg);filter:blur(68px);opacity:.15;} 100%{transform:translate(0,0) scale(1) rotate(0deg);filter:blur(64px);opacity:.18;} }
@keyframes drift2 { 0%{transform:translate(0,0) scale(1) rotate(0deg);filter:blur(64px);opacity:.18;} 20%{transform:translate(-130px,-158px) scale(.9) rotate(-8deg);filter:blur(52px);opacity:.13;} 42%{transform:translate(65px,-242px) scale(1.16) rotate(5deg);filter:blur(84px);opacity:.25;} 66%{transform:translate(195px,-84px) scale(.95) rotate(9deg);filter:blur(72px);opacity:.16;} 85%{transform:translate(112px,74px) scale(1.05) rotate(-4deg);filter:blur(88px);opacity:.22;} 100%{transform:translate(0,0) scale(1) rotate(0deg);filter:blur(64px);opacity:.18;} }
@keyframes drift3 { 0%{transform:translate(0,0) scale(1) rotate(0deg);filter:blur(48px);opacity:.09;} 18%{transform:translate(-84px,74px) scale(1.18) rotate(-11deg);filter:blur(64px);opacity:.14;} 40%{transform:translate(-158px,-38px) scale(.9) rotate(8deg);filter:blur(42px);opacity:.06;} 63%{transform:translate(-56px,-140px) scale(1.08) rotate(-6deg);filter:blur(68px);opacity:.13;} 84%{transform:translate(94px,-56px) scale(.95) rotate(5deg);filter:blur(52px);opacity:.07;} 100%{transform:translate(0,0) scale(1) rotate(0deg);filter:blur(48px);opacity:.09;} }

.login-container {
    position: relative; z-index: 1; isolation: isolate;
    width: 100%; max-width: 420px;
    padding: 2rem 1.8rem 1.5rem;
    background: radial-gradient(135% 170% at 4% -16%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 42%), var(--panel);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    animation: containerIn .7s cubic-bezier(.16,1,.3,1);
    max-height: none; overflow-y: visible;
}
.login-container::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; padding: 1px;
    background: linear-gradient(155deg, rgba(255,255,255,0.6), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0.16) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; opacity: .6;
}
@keyframes containerIn { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

.login-container .logos-header { justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--panel-border-soft); }
.login-container .logo-lm { height: 42px; }
.login-container .logo-pcg { height: 42px; }
.login-container .logo-bcs { height: 42px; }

/* ---- Imagen de bienvenida (referencia: index.php de SIGA) ------------------
   Si la foto no carga, assets/js/app.js agrega la clase "no-photo" (ver
   manejador de "error" del <img>) y se muestra un degradado con la marca de
   BCS en su lugar — sin JS en linea, por la CSP estricta del sitio
   (script-src 'self', sin 'unsafe-inline'). ---------------------------------- */
.welcome-image {
    width: 100%; height: 150px; border-radius: 16px; overflow: hidden; margin-bottom: 1.5rem;
    position: relative; box-shadow: 0 8px 24px rgba(15,60,52,0.10), 0 2px 8px rgba(15,60,52,0.06);
    transition: all .3s ease;
}
body.dark-theme .welcome-image, body[data-theme="dark"] .welcome-image { box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2); }
.welcome-image:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(15,60,52,0.14), 0 4px 12px rgba(15,60,52,0.1); }
body.dark-theme .welcome-image:hover, body[data-theme="dark"] .welcome-image:hover { box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.3); }
.welcome-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.welcome-image:hover img { transform: scale(1.03); }
.welcome-image .image-overlay {
    position: absolute; inset: auto 0 0 0; height: 60%; z-index: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(6,35,31,.72) 0%, rgba(6,35,31,.32) 40%, transparent 100%);
}
.welcome-image .image-caption {
    position: absolute; bottom: 12px; left: 16px; z-index: 1;
    color: #fff; font-size: .7rem; font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,.35); opacity: .92;
}
.welcome-image .image-fallback {
    position: absolute; inset: 0; z-index: 0; display: none;
    flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff;
    background: linear-gradient(135deg, var(--brand-strong) 0%, var(--brand) 55%, var(--brand-2) 100%);
}
.welcome-image .image-fallback .icon { font-size: 1.8rem; opacity: .9; }
.welcome-image .image-fallback .label { font-size: .7rem; opacity: .9; }
.welcome-image.no-photo .image-overlay { display: none; }
.welcome-image.no-photo .image-fallback { display: flex; }
@media (max-width: 480px) { .welcome-image { height: 120px; } }

.login-welcome { text-align: center; margin-bottom: 1.2rem; }
.login-welcome .greeting {
    font-size: 1.4rem; font-weight: 800; margin-bottom: .3rem; letter-spacing: -.4px;
    background: linear-gradient(135deg, var(--brand-strong), var(--brand) 60%, var(--brand-2) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-welcome .subtitle { color: var(--text-muted); font-size: .8rem; font-weight: 500; }
.time-message {
    color: var(--brand-strong); font-size: .72rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px; margin-top: .6rem;
    padding: .35rem .9rem; background: var(--ring); border-radius: 20px;
}
body.dark-theme .time-message, body[data-theme="dark"] .time-message { color: var(--brand-2); }

.welcome-divider { display: flex; align-items: center; gap: 10px; margin: 1.1rem 0; }
.welcome-divider .line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--brand-2), transparent); }
.welcome-divider .icon { color: var(--brand-2); font-size: .85rem; opacity: .75; }

.login-form .field, .login-form .form-group { margin-bottom: 1rem; }
.login-form input {
    background: rgba(255,255,255,0.08); border: 1.5px solid var(--panel-border-soft); border-radius: 12px;
    backdrop-filter: var(--glass-blur-soft); -webkit-backdrop-filter: var(--glass-blur-soft);
}
body.dark-theme .login-form input, body[data-theme="dark"] .login-form input { background: rgba(255,255,255,0.03); }

.btn-login {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    padding: 12px 20px; border-radius: 60px; font-weight: 700; font-size: .9rem; cursor: pointer;
    font-family: inherit; color: #04352d; border: 1px solid rgba(255,255,255,.38);
    background: linear-gradient(155deg, rgba(255,255,255,.35), transparent 60%), linear-gradient(145deg, var(--brand), var(--brand-strong));
    box-shadow: 0 8px 20px -8px rgba(14,163,148,.5), 0 1px 0 rgba(255,255,255,.4) inset;
    transition: all .3s cubic-bezier(.16,1,.3,1);
}
.btn-login:hover { transform: translateY(-3px); filter: brightness(1.04); }
.btn-login:disabled { opacity: .7; cursor: not-allowed; transform: none; }

.login-footer { margin-top: 1.1rem; text-align: center; font-size: .68rem; color: var(--text-muted); font-weight: 500; }
.login-footer a { color: var(--brand-strong); font-weight: 600; }

/* Tarjeta simple, sin logos (queda como respaldo de estilo si se necesita) */
.login-card { width: 100%; max-width: 380px; background: var(--panel-2); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 32px 28px; box-shadow: var(--shadow); }
.login-card .brand { justify-content: center; padding-bottom: 24px; }
.login-card h1 { font-size: 1.1rem; text-align: center; margin-bottom: 4px; }
.login-card p.sub { text-align: center; color: var(--text-muted); font-size: .8rem; margin-bottom: 22px; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand .logo { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--brand), var(--brand-strong)); display: flex; align-items: center; justify-content: center; color: #06231f; font-weight: 800; font-size: 15px; flex-shrink: 0; }
.brand .name { font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }

/* ---- Modal ------------------------------------------------------------------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.modal-backdrop.open { display: flex; }
.modal { background: var(--panel-2); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 22px; max-width: 520px; width: 100%; box-shadow: var(--shadow); max-height: 90vh; overflow-y: auto; backdrop-filter: var(--glass-blur-soft); -webkit-backdrop-filter: var(--glass-blur-soft); }

/* ---- Detalle de solicitud: arbol jerarquico ---------------------------------- */
.detail-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: .82rem; }
.kv dt { color: var(--text-muted); }
.kv dd { color: var(--text); font-weight: 600; }
.item-card { border: 1px solid var(--panel-border-soft); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; }
.item-card .item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.doc-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; padding: 4px 10px; border-radius: 8px; background: var(--ring); margin: 3px 4px 0 0; color: var(--text); text-decoration: none; cursor: pointer; }
.doc-chip:hover { background: var(--brand); color: #06231f; }
.doc-chip.unavailable { background: var(--warning-bg); color: var(--warning); cursor: default; }
.doc-chip.unavailable:hover { background: var(--warning-bg); color: var(--warning); }

.report-result { margin-top: 14px; }
.report-result h4 { margin-bottom: 10px; }
.bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding: 10px 6px 0; border-bottom: 1px solid var(--panel-border-soft); }
.bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; height: 100%; }
.bar-col .bar { width: 60%; min-height: 2px; background: var(--brand); border-radius: 4px 4px 0 0; }
.bar-col .bar-label { font-size: .65rem; color: var(--text-muted); margin-top: 4px; }
.bar-col .bar-value { font-size: .68rem; font-weight: 700; color: var(--text); }

@media print {
    .app-header, .header-nav, .nav-toggle, .seccion-titulo, form, .btn, .print-btn,
    .field-row, .pagination, .bg-shapes { display: none !important; }
    .report-result { margin-top: 0; }
    body, .content, .seccion { background: #fff !important; box-shadow: none !important; }
}

@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .header-logo-slot { min-width: 0; }
    .header-nav {
        display: none; flex-direction: column; align-items: stretch; overflow: visible;
        position: absolute; top: 100%; left: 0; right: 0; z-index: 69;
        border-top: none; border-radius: 0;
        background: var(--panel-solid); box-shadow: var(--shadow);
        padding: 10px 16px; max-height: 72vh; overflow-y: auto;
    }
    .header-nav.open { display: flex; }
    .header-nav .nav-link { border-radius: var(--radius-sm); }
    .detail-grid { grid-template-columns: 1fr; }
}