/* ============================================================
   TOKENS DE TEMA · modo claro (:root) y modo oscuro ([data-theme="dark"])
   Psicología del color para un hospital: azul profundo (confianza, autoridad
   clínica), verde-azulado (bienestar, aprobación), salvia (salud, "todo en orden"),
   naranja suave (seguimiento administrativo — NUNCA errores), ámbar (revisar),
   rojo (solo estados críticos). El modo oscuro usa azul noche, gris azulado y
   teal; nunca negro puro.
   ============================================================ */
:root {
    color-scheme: light;
    /* Superficies */
    --bg-main: #F4F7FA;
    --bg-card: #FFFFFF;
    --bg: var(--bg-main);
    --surface: var(--bg-card);
    --surface-2: #F8FAFC;
    --surface-3: #EEF2F6;
    --surface-4: #DFE6ED;
    --sidebar-bg: rgba(255, 255, 255, .86);
    --topbar-bg: rgba(244, 247, 250, .78);
    /* Texto */
    --text-main: #0B3551;
    --text-strong: var(--text-main);
    --text: #22364B;
    --text-soft: #43576C;
    --text-muted: #5A6C80;
    --text-faint: #617387;
    /* Marca y estados */
    --primary: #0B3551;
    --primary-ink: #1B4A6B;
    --secondary: #00796B;
    --accent-ink: #00796B;
    --accent-soft: rgba(0, 121, 107, .09);
    --accent-soft-2: rgba(0, 121, 107, .16);
    --ring: rgba(0, 121, 107, .28);
    --success: #2E7D32;
    --warning: #F9A825;
    --danger: #D32F2F;
    --btn-primary: #00796B;
    --btn-primary-hover: #00675B;
    --btn-primary-ink: #FFFFFF;
    /* Líneas y sombras */
    --border: #E5E7EB;
    --border-strong: #D3DCE5;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px rgba(15, 23, 42, .08);
    --shadow-lg: 0 2px 6px rgba(15, 23, 42, .05), 0 24px 48px -12px rgba(15, 23, 42, .18);
    --glow-1: rgba(0, 121, 107, .09);
    --glow-2: rgba(11, 53, 81, .07);
    --brand-line: linear-gradient(90deg, #1B4A6B, #00796B 55%, rgba(0, 121, 107, 0));
    /* Mezclas: 100% = colores pastel originales; en oscuro se funden con la superficie */
    --tint: 100%;
    --ink-lift: 0%;
    /* Paleta de marca (fondos de íconos, gradientes, botones) */
    --navy: #0B3551;
    --navy-2: #1B4A6B;
    --teal: #00796B;
    --teal-dark: #005F54;
    --sage: #6FA383;
    --sage-tint: #E7F2EA;
    --mint: #DFF7F2;
    --coral: #E2793D;
    --coral-ink: #A8571C;
    --coral-tint: #FBE9DC;
    --danger-ink: #9E3F4A;
    --amber: #F5B942;
    /* Alias heredados */
    --canvas: var(--bg);
    --line: var(--border);
    --muted: var(--text-muted);
    /* Medidas y tipografía */
    --sidebar: 268px;
    --radius: 20px;
    --radius-sm: 12px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Bootstrap sigue los mismos tokens */
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--surface);
    --bs-emphasis-color: var(--text-strong);
    --bs-secondary-color: var(--text-muted);
    --bs-tertiary-color: var(--text-faint);
    --bs-secondary-bg: var(--surface-3);
    --bs-tertiary-bg: var(--surface-2);
    --bs-border-color: var(--border);
    --bs-heading-color: inherit;
    --bs-link-color: var(--accent-ink);
    --bs-link-hover-color: var(--teal-dark);
    --bs-link-color-rgb: 0, 121, 107;
    --bs-link-hover-color-rgb: 0, 95, 84;
    --bs-focus-ring-color: var(--ring);
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg-main: #0F172A;
    --bg-card: #162033;
    --surface-2: #1A263B;
    --surface-3: #1F2D45;
    --surface-4: #2B3C58;
    --sidebar-bg: rgba(19, 29, 47, .9);
    --topbar-bg: rgba(15, 23, 42, .74);
    --text-main: #F1F5F9;
    --text: #E5E7EB;
    --text-soft: #C3CDD9;
    --text-muted: #A3B1C4;
    --text-faint: #8A9AB0;
    --primary: #38BDF8;
    --primary-ink: #7DD3FC;
    --secondary: #2DD4BF;
    --accent-ink: #2DD4BF;
    --accent-soft: rgba(45, 212, 191, .10);
    --accent-soft-2: rgba(45, 212, 191, .18);
    --ring: rgba(45, 212, 191, .35);
    --success: #22C55E;
    --warning: #FBBF24;
    --danger: #F87171;
    --btn-primary: #2DD4BF;
    --btn-primary-hover: #5EEAD4;
    --btn-primary-ink: #042F2A;
    --border: #263449;
    --border-strong: #33445E;
    --shadow-sm: 0 1px 2px rgba(2, 6, 23, .4);
    --shadow: 0 1px 2px rgba(2, 6, 23, .35), 0 10px 30px rgba(0, 0, 0, .35);
    --shadow-lg: 0 2px 6px rgba(2, 6, 23, .4), 0 28px 56px -12px rgba(0, 0, 0, .55);
    --glow-1: rgba(45, 212, 191, .08);
    --glow-2: rgba(56, 189, 248, .07);
    --brand-line: linear-gradient(90deg, #38BDF8, #2DD4BF 55%, rgba(45, 212, 191, 0));
    --tint: 14%;
    --ink-lift: 55%;
    --navy: #13324E;
    --navy-2: #1E5A80;
    --teal: #0F9488;
    --teal-dark: #0B7A70;
    --sage: #5E9B78;
    --sage-tint: #183A36;
    --mint: #163A3A;
    --coral: #E98A52;
    --coral-ink: #F4A36E;
    --coral-tint: #3A2A22;
    --danger-ink: #FCA5A5;
    --amber: #F5B942;

    --bs-link-hover-color: #5EEAD4;
    --bs-link-color-rgb: 45, 212, 191;
    --bs-link-hover-color-rgb: 94, 234, 212;
}


/* HOS-0028 a HOS-0030 · Documentos verificables */
.document-card-head { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.document-card-head > span { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:color-mix(in srgb, #e3f4f1 var(--tint), var(--surface)); color:color-mix(in srgb, #0f766e, #fff var(--ink-lift)); font-size:1.35rem; flex:0 0 auto; }
.document-card-head h2 { margin:2px 0 0; font-size:1.08rem; }
.document-state { display:flex; align-items:center; gap:12px; border:1px solid color-mix(in srgb, #cce8df var(--tint), var(--border)); background:color-mix(in srgb, #f0faf6 var(--tint), var(--surface)); border-radius:14px; padding:13px; margin-bottom:16px; color:color-mix(in srgb, #18794e, #fff var(--ink-lift)); }
.document-state.revoked { background:color-mix(in srgb, #fff4f2 var(--tint), var(--surface)); border-color:#f1c6c0; color:color-mix(in srgb, #b42318, #fff var(--ink-lift)); }
.document-state > i { font-size:1.5rem; }
.document-state span { display:flex; flex-direction:column; }
.document-state small { color:var(--text-muted); font-weight:700; letter-spacing:.04em; }
.document-card p { color:var(--text-muted); font-size:.91rem; }
.document-waiting { display:flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; padding:11px; background:var(--surface-3); color:var(--text-muted); font-weight:700; }

.document-lookup-shell { max-width:1040px; margin:0 auto; }
.document-lookup-hero { position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:center; min-height:270px; padding:42px 48px; border-radius:26px; color:#fff; background:linear-gradient(125deg,#0a625d 0%,#0c4b57 52%,#12304a 100%); box-shadow:0 20px 45px rgba(20,52,73,.16); }
.document-lookup-hero::before,.document-lookup-hero::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.09); border-radius:50%; }
.document-lookup-hero::before { width:260px; height:260px; right:50px; top:-115px; }
.document-lookup-hero::after { width:190px; height:190px; right:85px; top:-80px; }
.document-lookup-copy { position:relative; z-index:1; max-width:650px; }
.document-lookup-copy .eyebrow { color:#7ee2d6; }
.document-lookup-copy h1 { max-width:620px; margin:9px 0 12px; color:#fff; font-size:clamp(2rem,4vw,3rem); line-height:1.06; }
.document-lookup-copy > p { margin:0; color:#c8dce1; font-size:1rem; max-width:610px; }
.document-trust-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.document-trust-list span { display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid rgba(255,255,255,.13); border-radius:999px; background:rgba(255,255,255,.07); color:#e3f4f3; font-size:.78rem; font-weight:700; }
.document-lookup-visual { position:relative; z-index:1; width:132px; height:132px; flex:0 0 132px; margin-left:28px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:30px; background:rgba(255,255,255,.08); color:#79ddd2; font-size:4.8rem; transform:rotate(3deg); }
.document-lookup-visual span { position:absolute; width:42px; height:3px; background:#ffcc63; box-shadow:0 0 16px #ffcc63; animation:document-scan 2.2s ease-in-out infinite alternate; }
@keyframes document-scan { from { transform:translateY(-38px); } to { transform:translateY(38px); } }
.document-search-card { position:relative; z-index:2; max-width:820px; margin:-28px auto 0; }
.document-search-card .card-body-pad { display:grid; grid-template-columns:auto 1fr; gap:8px 18px; padding:30px; }
.document-search-icon { grid-row:1 / span 2; width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:color-mix(in srgb, #e9f5f4 var(--tint), var(--surface)); color:color-mix(in srgb, #0f766e, #fff var(--ink-lift)); font-size:1.45rem; }
.document-search-card h2 { margin:0; font-size:1.25rem; }
.document-search-card p { margin:2px 0 16px; color:var(--text-muted); }
.document-search-card form { grid-column:1 / -1; margin-top:8px; }
.document-code-input { display:grid; grid-template-columns:auto 1fr auto; align-items:center; border:1px solid #cbd9e2; border-radius:14px; background:var(--surface); padding:5px 5px 5px 15px; transition:.2s ease; }
.document-code-input:focus-within { border-color:#22a79d; box-shadow:0 0 0 4px rgba(34,167,157,.12); }
.document-code-input > i { color:color-mix(in srgb, #0f766e, #fff var(--ink-lift)); font-size:1.2rem; }
.document-code-input .form-control { border:0; box-shadow:none; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.document-code-input .btn { min-height:44px; border-radius:10px; }
.document-security-note { max-width:820px; margin:18px auto 0; display:flex; gap:11px; padding:14px 18px; color:var(--text-muted); font-size:.84rem; }
.document-security-note > i { color:color-mix(in srgb, #0f766e, #fff var(--ink-lift)); font-size:1.1rem; }

.document-result-heading { align-items:flex-end; }
.document-verdict { display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; margin-bottom:24px; padding:24px 28px; border:1px solid #bfe1d4; border-radius:20px; background:linear-gradient(120deg,color-mix(in srgb, #ebf9f3 var(--tint), var(--surface)),var(--surface)); box-shadow:0 12px 35px rgba(24,121,78,.08); }
.document-verdict.invalid { border-color:#efc8c3; background:linear-gradient(120deg,color-mix(in srgb, #fff1ef var(--tint), var(--surface)),var(--surface-2)); box-shadow:0 12px 35px rgba(180,35,24,.07); }
.document-verdict-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; color:color-mix(in srgb, #18794e, #fff var(--ink-lift)); background:color-mix(in srgb, #d6f0e3 var(--tint), var(--surface)); font-size:2rem; }
.document-verdict.invalid .document-verdict-icon { color:color-mix(in srgb, #b42318, #fff var(--ink-lift)); background:color-mix(in srgb, #fbe0dc var(--tint), var(--surface)); }
.document-verdict small { color:var(--text-muted); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.68rem; }
.document-verdict h2 { margin:3px 0; color:color-mix(in srgb, #145c3d, #fff var(--ink-lift)); font-size:1.45rem; }
.document-verdict.invalid h2 { color:color-mix(in srgb, #9c241b, #fff var(--ink-lift)); }
.document-verdict p { margin:0; color:var(--text-muted); }
.document-code-chip { padding:9px 13px; border:1px solid #c7dad6; border-radius:10px; background:var(--surface); color:var(--text); font:700 .76rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; }
.document-data-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.document-data-grid > div { min-height:112px; display:flex; flex-direction:column; justify-content:center; padding:20px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
.document-data-grid > div:nth-child(2n) { border-right:0; }
.document-data-grid > div:nth-last-child(-n+2) { border-bottom:0; }
.document-data-grid span { color:var(--text-muted); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.document-data-grid strong { margin:5px 0 2px; color:var(--text-strong); font-size:1rem; }
.document-data-grid small { color:var(--text-faint); }
.document-approval-list { padding:6px 24px 22px; }
.document-approval-list > div { display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center; padding:16px 0; border-bottom:1px solid var(--border); }
.document-approval-list > div:last-child { border-bottom:0; }
.document-approval-list > div > span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb, #e1f4ec var(--tint), var(--surface)); color:color-mix(in srgb, #18794e, #fff var(--ink-lift)); }
.document-approval-list div div { display:flex; flex-direction:column; }
.document-approval-list small,.document-approval-list time { color:var(--text-muted); font-size:.78rem; }
.document-metadata { margin:10px 0 20px; }
.document-metadata > div { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.document-metadata dt { color:var(--text-muted); font-size:.78rem; font-weight:600; }
.document-metadata dd { margin:0; color:var(--text); font-size:.8rem; font-weight:800; text-align:right; }
.document-revocation-note { display:flex; gap:12px; margin-top:18px; padding:17px; border:1px solid #f0c5bf; border-radius:15px; background:color-mix(in srgb, #fff5f3 var(--tint), var(--surface)); color:color-mix(in srgb, #a02a20, #fff var(--ink-lift)); }
.document-revocation-note > i { font-size:1.25rem; }
.document-revocation-note p { margin:3px 0; color:color-mix(in srgb, #82463f, #fff var(--ink-lift)); font-size:.84rem; }
.document-revocation-note small { color:var(--text-muted); font-size:.72rem; }
.document-control-card p { color:var(--text-muted); font-size:.88rem; }

@media (max-width: 767.98px) {
  .document-lookup-hero { min-height:auto; padding:30px 24px; }
  .document-lookup-visual { display:none; }
  .document-search-card { margin:-15px 12px 0; }
  .document-search-card .card-body-pad { padding:22px; }
  .document-code-input { grid-template-columns:auto 1fr; }
  .document-code-input .btn { grid-column:1/-1; width:100%; }
  .document-verdict { grid-template-columns:auto 1fr; padding:20px; }
  .document-code-chip { grid-column:1/-1; width:max-content; }
  .document-data-grid { grid-template-columns:1fr; }
  .document-data-grid > div { border-right:0; border-bottom:1px solid var(--border) !important; }
  .document-data-grid > div:last-child { border-bottom:0 !important; }
  .document-approval-list > div { grid-template-columns:auto 1fr; }
  .document-approval-list time { grid-column:2; }
}
* { box-sizing: border-box; }
body { color: var(--text); font-family: var(--font-body); }
/* Identidad tipográfica propia: serif para títulos y cifras clave (carácter editorial/clínico,
   distinto del "sans-en-todo" de las plantillas genéricas de panel administrativo), sans técnica
   para el resto de la interfaz y los datos. */
.page-heading h1, .auth-card h1, .metric-value, .card-header-clean h2,
.brand-link strong, .document-lookup-copy h1, .welcome-banner h1,
.document-verdict h2, .document-search-card h2 {
    font-family: var(--font-display);
    letter-spacing: -.01em;
}
.app-body { background: var(--canvas); min-height: 100vh; }
.app-shell { min-height: 100vh; }
/* ============================================================
   ESTACIÓN DE MARCAJE (kiosco biométrico)
   Pantalla grande: dos columnas (reloj + estado + instrucción | ficha del colaborador),
   y abajo resumen del día + últimos marcajes. ≤860px: una sola columna.
   Diseñada para 1366×768 sin desplazamiento con el navegador maximizado.
   ============================================================ */
.kiosk-shell { background: var(--canvas); display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: clamp(12px, 2vw, 28px); }
.kiosk-layout {
    display: grid; gap: clamp(12px, 1.5vw, 20px);
    grid-template-areas: "head head" "main employee" "summary recent" "foot foot";
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    margin: 0 auto; max-width: 1280px; width: 100%;
}
.kiosk-header { align-items: center; display: flex; gap: 12px 20px; grid-area: head; justify-content: space-between; }
.kiosk-brand { align-items: center; color: var(--text-strong); display: flex; flex: 1 1 auto; gap: 14px; min-width: 0; }
.kiosk-brand .brand-logo { flex: 0 0 58px; height: 44px; width: 58px; }
.kiosk-brand-text { display: flex; flex-direction: column; min-width: 0; }
.kiosk-brand-name { font: 600 clamp(1.05rem, 1.6vw, 1.3rem)/1.15 var(--font-display); }
.kiosk-brand-station { color: var(--text-muted); font-size: .85rem; margin-top: 2px; overflow-wrap: anywhere; }
.kiosk-header-actions { align-items: center; display: flex; gap: 10px; }
.kiosk-exit { margin: 0; }
.kiosk-exit button { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-sm); color: var(--text-strong); display: inline-flex; font: 600 .85rem var(--font-body); gap: 6px; min-height: 40px; padding: 8px 16px; transition: background .2s, border-color .2s; }
.kiosk-exit button:hover { background: var(--surface-3); border-color: var(--border-strong); }

.kiosk-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow); min-width: 0; padding: clamp(18px, 2.2vw, 30px); position: relative; }
.kiosk-panel h2 { align-items: center; color: var(--text-strong); display: flex; font: 600 1rem/1.3 var(--font-display); gap: 8px; margin: 0 0 14px; }
.kiosk-panel h2 i { color: var(--accent-ink); }

/* Columna izquierda: reloj, estado del lector e instrucción */
.kiosk-main { align-items: center; display: flex; flex-direction: column; gap: 12px; grid-area: main; text-align: center; }
.kiosk-time-block { text-align: center; }
.kiosk-clock { color: var(--text-strong); display: block; font: 700 clamp(2.6rem, 6vw, 5.2rem)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kiosk-date { color: var(--text-muted); font-size: clamp(.95rem, 1.3vw, 1.12rem); font-weight: 600; margin-top: 8px; text-transform: capitalize; }
.kiosk-reader-status { align-items: center; background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px; color: var(--text-soft); display: inline-flex; font: 700 .9rem var(--font-body); gap: 9px; max-width: 100%; padding: 8px 18px; }
.kiosk-reader-status .dot { background: var(--text-faint); border-radius: 50%; flex: 0 0 10px; height: 10px; width: 10px; }
.kiosk-reader-status.is-ok { background: color-mix(in srgb, var(--success) 10%, var(--surface)); border-color: color-mix(in srgb, var(--success) 35%, var(--border)); color: color-mix(in srgb, var(--success) 82%, var(--text-strong)); }
.kiosk-reader-status.is-ok .dot { animation: kiosk-ready-pulse 1.6s ease-in-out infinite; background: var(--success); }
.kiosk-reader-status.is-warn { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); color: color-mix(in srgb, var(--warning) 55%, var(--text-strong)); }
.kiosk-reader-status.is-warn .dot { background: var(--warning); }
.kiosk-reader-status.is-error { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 38%, var(--border)); color: color-mix(in srgb, var(--danger) 80%, var(--text-strong)); }
.kiosk-reader-status.is-error .dot { background: var(--danger); }

.kiosk-stage { align-items: center; display: flex; flex: 1 1 auto; justify-content: center; min-height: 15rem; padding: 8px 0 4px; width: 100%; }
.kiosk-prompt, .kiosk-error { max-width: 36ch; }
.kiosk-prompt i, .kiosk-error > i { display: inline-block; font-size: clamp(3.2rem, 6vw, 4.8rem); line-height: 1; }
.kiosk-prompt i { color: var(--accent-ink); }
.kiosk-prompt h1, .kiosk-error h1 { color: var(--text-strong); font: 600 clamp(1.35rem, 2.3vw, 2rem)/1.2 var(--font-display); margin: 16px 0 10px; }
.kiosk-prompt p, .kiosk-error p { color: var(--text-muted); font-size: clamp(.98rem, 1.3vw, 1.08rem); line-height: 1.5; margin: 0; }
.kiosk-ready i, .kiosk-done i { color: var(--success); }
.kiosk-ready i { animation: kiosk-ready-pulse 1.1s ease-in-out infinite; }
.kiosk-ready h1, .kiosk-done h1 { color: color-mix(in srgb, var(--success) 85%, var(--text-strong)); }
.kiosk-checking i { color: var(--primary-ink); }
.kiosk-error > i { color: var(--danger); }
.kiosk-error h1 { color: color-mix(in srgb, var(--danger) 78%, var(--text-strong)); }
.kiosk-error.kiosk-severity-warning > i { color: var(--warning); }
.kiosk-error.kiosk-severity-warning h1 { color: color-mix(in srgb, var(--warning) 60%, var(--text-strong)); }
@keyframes kiosk-ready-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .75; } }
.kiosk-retry-btn { align-items: center; background: var(--btn-primary); border: 0; border-radius: 999px; color: var(--btn-primary-ink); display: inline-flex; font: 700 1rem var(--font-body); gap: 8px; margin-top: 20px; min-height: 48px; padding: 12px 30px; }
.kiosk-retry-btn:hover { background: var(--btn-primary-hover); }

/* Columna derecha: ficha del colaborador validado */
.kiosk-employee { display: flex; flex-direction: column; grid-area: employee; justify-content: center; overflow: hidden; }
.kiosk-employee::before { background: var(--border-strong); content: ""; height: 4px; left: 0; position: absolute; right: 0; top: 0; transition: background .3s; }
.kiosk-employee.has-result { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.kiosk-employee.has-result::before { background: var(--success); }
.kiosk-idle { align-items: center; border: 2px dashed var(--border-strong); border-radius: 18px; color: var(--text-muted); display: flex; flex-direction: column; gap: 12px; justify-content: center; min-height: 15rem; padding: 24px; text-align: center; }
.kiosk-idle-icon { align-items: center; background: var(--surface-3); border-radius: 50%; color: var(--text-faint); display: flex; font-size: 2.2rem; height: 84px; justify-content: center; width: 84px; }
.kiosk-idle strong { color: var(--text-soft); display: block; font: 600 1.2rem var(--font-display); }
.kiosk-idle p { margin: 6px 0 0; max-width: 32ch; }
.kiosk-result { animation: rise-in .4s var(--ease) both; }
.kiosk-result-head { align-items: center; display: grid; gap: 20px; grid-template-columns: auto minmax(0, 1fr); margin-bottom: 18px; }
.kiosk-result-photo-wrap { height: clamp(96px, 10vw, 136px); position: relative; width: clamp(96px, 10vw, 136px); }
.kiosk-result-photo, .kiosk-result-avatar { border-radius: 50%; box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px color-mix(in srgb, var(--success) 55%, transparent); height: 100%; object-fit: cover; width: 100%; }
.kiosk-result-avatar { align-items: center; background: linear-gradient(140deg, #F7C75E, #E9A53A); color: #3A2A06; display: flex; font: 700 clamp(2.2rem, 4vw, 3rem) var(--font-display); justify-content: center; }
.kiosk-result-check { background: var(--surface); border-radius: 50%; bottom: -2px; color: var(--success); font-size: 1.8rem; line-height: 1; padding: 2px; position: absolute; right: 0; }
.kiosk-result-eyebrow { align-items: center; color: color-mix(in srgb, var(--success) 85%, var(--text-strong)); display: inline-flex; font-size: .75rem; font-weight: 800; gap: 6px; letter-spacing: .08em; text-transform: uppercase; }
.kiosk-result-id h2 { color: var(--text-strong); display: block; font: 600 clamp(1.35rem, 2.4vw, 2rem)/1.15 var(--font-display); margin: 6px 0 10px; overflow-wrap: anywhere; }
.kiosk-mark-badge { background: var(--accent-soft-2); border: 1px solid color-mix(in srgb, var(--accent-ink) 30%, transparent); border-radius: 999px; color: var(--accent-ink); display: inline-block; font: 800 .85rem var(--font-body); letter-spacing: .04em; padding: 6px 16px; text-transform: uppercase; }
.kiosk-result-data { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.kiosk-result-data > div { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; min-width: 0; padding: 11px 14px; }
.kiosk-result-data dt { color: var(--text-muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.kiosk-result-data dd { color: var(--text-strong); font-size: 1rem; font-weight: 700; margin: 3px 0 0; overflow-wrap: anywhere; }
.kiosk-result-data .is-time dd span { display: block; font: 700 1.5rem/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.kiosk-result-data .is-time dd small { color: var(--text-muted); display: block; font-size: .78rem; font-weight: 600; margin-top: 2px; }
.kiosk-result-notice { align-items: flex-start; background: color-mix(in srgb, var(--warning) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border)); border-radius: 12px; color: color-mix(in srgb, var(--warning) 50%, var(--text-strong)); display: flex; font-size: .9rem; font-weight: 600; gap: 8px; margin: 12px 0 0; padding: 10px 12px; }
.kiosk-result-notice[hidden] { display: none; }
.kiosk-result-previous { color: var(--text-muted); font-size: .88rem; margin: 10px 0 0; }

/* Abajo: resumen del día y últimos marcajes */
.kiosk-summary { grid-area: summary; }
.kiosk-recent { grid-area: recent; }
.kiosk-mini-stats { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; }
.kiosk-mini-stats > div { --s: var(--text-faint); background: var(--surface-2); border: 1px solid var(--border); border-color: color-mix(in srgb, var(--s) 35%, var(--border)); border-radius: 14px; min-width: 0; padding: 10px 6px; }
.kiosk-mini-stats > .is-ok { --s: var(--success); } .kiosk-mini-stats > .is-warn { --s: var(--warning); } .kiosk-mini-stats > .is-error { --s: var(--danger); } .kiosk-mini-stats > .is-info { --s: var(--primary-ink); }
.kiosk-mini-stats span { color: var(--text-strong); display: block; font: 700 clamp(1.4rem, 2.2vw, 1.8rem)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.kiosk-mini-stats small { color: var(--text-muted); display: block; font-size: .72rem; font-weight: 700; letter-spacing: .03em; margin-top: 4px; text-transform: uppercase; }
.kiosk-recent-list { list-style: none; margin: 0; max-height: 220px; overflow-y: auto; overscroll-behavior: contain; padding: 0; }
.kiosk-recent-list li { align-items: center; border-bottom: 1px solid var(--border); display: flex; font-size: .9rem; gap: 10px; justify-content: space-between; padding: 9px 0; }
.kiosk-recent-list li:last-child { border-bottom: 0; }
.kiosk-recent-list .kiosk-recent-time { color: var(--text-muted); flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.kiosk-recent-list .kiosk-recent-name { color: var(--text-strong); flex: 1 1 auto; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kiosk-recent-list .kiosk-recent-type { background: var(--surface-3); border-radius: 999px; color: var(--text-soft); flex: 0 0 auto; font-size: .78rem; font-weight: 700; padding: 3px 10px; }
.kiosk-recent-list li.is-anomalous .kiosk-recent-type { background: color-mix(in srgb, var(--warning) 18%, var(--surface)); color: color-mix(in srgb, var(--warning) 55%, var(--text-strong)); }
.kiosk-recent-list li.is-anomalous .kiosk-recent-type::before { content: "⚠ "; }
.kiosk-recent-empty { color: var(--text-muted); justify-content: center !important; }
.kiosk-institution { border-top: 1px solid var(--border); grid-area: foot; padding-top: 14px; }
.kiosk-institution img { display: block; height: 42px; margin: 0 auto; max-width: 100%; width: auto; }

/* Vista previa del Administrador dentro del panel: el topbar ya tiene tema y cierre de sesión */
.app-content .kiosk-header-actions { display: none; }

/* Monitor grande */
@media (min-width: 1400px) {
    .kiosk-layout { max-width: 1360px; }
    .kiosk-stage, .kiosk-idle { min-height: 17rem; }
}
/* Laptop 1366×768 / ventana baja: compactar en vertical para evitar desplazamiento */
@media (min-width: 861px) and (max-height: 820px) {
    .kiosk-shell { justify-content: flex-start; padding-bottom: 12px; padding-top: 12px; }
    .kiosk-layout { gap: 12px; }
    .kiosk-panel { padding: 16px 22px; }
    .kiosk-clock { font-size: clamp(2.6rem, 5vw, 4rem); }
    .kiosk-date { margin-top: 4px; }
    .kiosk-main { gap: 8px; }
    .kiosk-stage, .kiosk-idle { min-height: 12rem; }
    .kiosk-prompt i, .kiosk-error > i { font-size: 3.2rem; }
    .kiosk-prompt h1, .kiosk-error h1 { font-size: 1.5rem; margin: 10px 0 6px; }
    .kiosk-retry-btn { margin-top: 12px; }
    .kiosk-idle-icon { font-size: 1.8rem; height: 64px; width: 64px; }
    .kiosk-result-head { margin-bottom: 12px; }
    .kiosk-result-data > div { padding: 8px 12px; }
    .kiosk-recent-list { max-height: 132px; }
    .kiosk-recent-list li { padding: 6px 0; }
    .kiosk-panel h2 { margin-bottom: 10px; }
    .kiosk-institution { padding-top: 8px; }
    .kiosk-institution img { height: 32px; }
}
/* Navegador maximizado en 1366×768 (≈650px útiles): el sello institucional del pie es
   secundario (el logo ya está en el encabezado) y se oculta para no desplazar la ficha */
@media (min-width: 861px) and (max-height: 700px) {
    .kiosk-institution { display: none; }
    .kiosk-result-photo-wrap { height: 88px; width: 88px; }
    .kiosk-result-check { font-size: 1.4rem; }
    .kiosk-result-data { gap: 8px; }
    .kiosk-result-notice { margin-top: 8px; padding: 7px 10px; }
    .kiosk-result-previous { margin-top: 6px; }
}
/* Tablet y ventana reducida: una sola columna, la hora siempre arriba */
@media (max-width: 860px) {
    .kiosk-shell { justify-content: flex-start; }
    .kiosk-layout { grid-template-areas: "head" "main" "employee" "summary" "recent" "foot"; grid-template-columns: minmax(0, 1fr); }
    .kiosk-stage { min-height: 11rem; }
    .kiosk-employee:not(.has-result) { padding-bottom: 14px; padding-top: 18px; }
    .kiosk-idle { flex-direction: row; gap: 14px; justify-content: flex-start; min-height: 0; padding: 14px 16px; text-align: left; }
    .kiosk-idle-icon { flex: 0 0 52px; font-size: 1.5rem; height: 52px; width: 52px; }
    .kiosk-idle strong { font-size: 1.05rem; }
    .kiosk-idle p { font-size: .9rem; margin-top: 2px; }
}
/* Teléfono: compactar secundarias */
@media (max-width: 575.98px) {
    .kiosk-shell { padding: 10px; }
    .kiosk-panel { border-radius: 18px; }
    .kiosk-brand .brand-logo { flex-basis: 48px; height: 38px; width: 48px; }
    .kiosk-exit button span { display: none; }
    .kiosk-brand { gap: 10px; }
    .kiosk-brand-name, .kiosk-brand-station { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .kiosk-header-actions { flex: 0 0 auto; gap: 6px; }
    .kiosk-exit button { justify-content: center; padding: 8px; width: 40px; }
    .kiosk-result-head { gap: 14px; grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .kiosk-mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kiosk-recent-list li:nth-child(n+4) { display: none; }
    .kiosk-recent-list li { flex-wrap: wrap; }
    .kiosk-institution img { height: 32px; }
}
@media (max-width: 380px) {
    .kiosk-result-data { grid-template-columns: minmax(0, 1fr); }
    .kiosk-brand-station { font-size: .78rem; }
}

.panel-stat { display: flex; flex-direction: column; gap: 2px; }
.panel-stat-value { font: 700 1.9rem var(--font-display); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.panel-stat-label { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.panel-area-card { height: 100%; }
/* Barra lateral clara, estilo "panel de sistema" (Ajustes de macOS) en vez del típico
   panel oscuro con degradado de las plantillas de administración genéricas: fondo claro,
   un hairline de separación, e íconos con placa de color propia por sección. */
.sidebar { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; height: 100vh; left: 0; position: fixed; top: 0; width: var(--sidebar); z-index: 1035; }
.sidebar-brand { align-items: center; display: flex; justify-content: space-between; padding: 25px 22px 19px; }
.brand-link { align-items: center; color: var(--text-strong); display: flex; gap: 13px; text-decoration: none; }
.brand-link strong, .brand-link small { display: block; line-height: 1.08; }
.brand-link strong { font-size: 1.08rem; letter-spacing: .01em; }
.brand-link small { color: var(--muted); font-size: .79rem; margin-top: 4px; }
.brand-mark { align-items: center; background: linear-gradient(135deg, var(--navy-2), var(--teal)); border-radius: 13px 13px 13px 4px; box-shadow: 0 8px 18px rgba(19,50,78,.22); color: white; display: inline-flex; font-family: var(--font-display); font-size: .85rem; font-weight: 700; height: 44px; justify-content: center; letter-spacing: 0; width: 44px; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 14px; }
.nav-caption { color: var(--text-faint); font-size: .66rem; font-weight: 800; letter-spacing: .12em; margin: 18px 10px 7px; text-transform: uppercase; }
.nav-caption:first-child { margin-top: 8px; }
.nav-item { align-items: center; border-radius: 10px; color: var(--text-soft); display: flex; font-size: .88rem; font-weight: 600; gap: 11px; margin-bottom: 2px; padding: 7px 10px; position: relative; text-decoration: none; transition: background .12s ease, color .12s ease; }
.nav-item i { align-items: center; border-radius: 8px; color: white; display: inline-flex; flex: 0 0 27px; font-size: .85rem; height: 27px; justify-content: center; width: 27px; }
.nav-item i.navy  { background: var(--navy-2); }
.nav-item i.teal  { background: var(--teal); }
.nav-item i.sage  { background: var(--sage); }
.nav-item i.coral { background: var(--coral); }
.nav-item i.amber { background: var(--amber); color: color-mix(in srgb, #4a3308, #fff var(--ink-lift)); }
.nav-item:hover { background: var(--surface-3); color: var(--text-strong); }
.nav-item.active { background: var(--sage-tint); color: var(--text-strong); font-weight: 700; }
.nav-count { background: var(--coral); border-radius: 20px; color: white; font-size: .68rem; font-weight: 800; margin-left: auto; min-width: 22px; padding: 2px 7px; text-align: center; }
.sidebar-profile { align-items: center; background: var(--canvas); border-top: 1px solid var(--line); display: flex; gap: 10px; padding: 16px 17px; }
.avatar { align-items: center; background: #f2b84b; border-radius: 12px; color: var(--text-strong); display: flex; flex: 0 0 40px; font-weight: 800; height: 40px; justify-content: center; }
.sidebar-profile-photo { display: block; object-fit: cover; width: 40px; }
.sidebar-profile-link { align-items: center; color: inherit; display: flex; flex: 1; gap: 10px; min-width: 0; text-decoration: none; }
.sidebar-profile-link:hover .profile-copy strong { color: var(--accent-ink); }
.profile-copy { min-width: 0; flex: 1; }
.profile-copy strong, .profile-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy strong { color: var(--text-strong); font-size: .84rem; }
.profile-copy span { color: var(--muted); font-size: .71rem; margin-top: 2px; }
.icon-button { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; color: var(--text-strong); display: inline-flex; height: 39px; justify-content: center; text-decoration: none; transition: .18s; width: 39px; }
.icon-button:hover { border-color: #b7d8d4; color: var(--accent-ink); transform: translateY(-1px); }
.sidebar .icon-button { background: var(--surface); border-color: var(--line); color: var(--muted); }
.app-content { margin-left: var(--sidebar); min-height: 100vh; overflow-x: hidden; width: calc(100% - var(--sidebar)); }
.topbar { align-items: center; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); display: flex; height: 78px; justify-content: space-between; padding: 0 34px; position: sticky; top: 0; z-index: 1020; backdrop-filter: blur(14px); }
.topbar-kicker { color: var(--muted); display: block; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.topbar-title { color: var(--text-strong); display: block; font-size: 1rem; margin-top: 2px; }
.topbar-actions { align-items: center; display: flex; gap: 12px; }
.status-dot { align-items: center; background: color-mix(in srgb, #effaf7 var(--tint), var(--surface)); border: 1px solid color-mix(in srgb, #d6f0e9 var(--tint), var(--border)); border-radius: 30px; color: var(--text-soft); display: inline-flex; font-size: .75rem; font-weight: 700; gap: 7px; padding: 8px 12px; }
.status-dot i { background: #20ad7f; border-radius: 50%; box-shadow: 0 0 0 4px rgba(32,173,127,.12); height: 7px; width: 7px; }
.page-content { margin: 0 auto; max-width: 1600px; padding: 32px 36px 48px; }
.page-heading { align-items: flex-end; display: flex; gap: 24px; justify-content: space-between; margin-bottom: 26px; }
.eyebrow { color: var(--accent-ink); font-size: .7rem; font-weight: 900; letter-spacing: .14em; margin-bottom: 8px; text-transform: uppercase; }
.page-heading h1 { color: var(--text-strong); font-size: clamp(1.6rem, 2.5vw, 2.25rem); font-weight: 800; letter-spacing: -.035em; margin: 0; }
.page-heading p { color: var(--muted); margin: 7px 0 0; max-width: 700px; }
/* Firma visual: un filete de degradado navy→teal arriba de cada tarjeta de contenido — el
   mismo detalle del login — para que se reconozca como una interfaz propia y no una plantilla
   de panel administrativo genérica. */
.app-card { background: var(--surface); border: 1px solid rgba(217,226,236,.9); border-radius: var(--radius); box-shadow: var(--shadow); position: relative; }
.app-card::before {
    background: linear-gradient(90deg, var(--navy), var(--teal));
    border-radius: var(--radius) var(--radius) 0 0;
    content: ""; display: block; height: 3px;
    left: 0; position: absolute; right: 0; top: 0;
}
.card-header-clean { align-items: center; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; padding: 20px 22px; }
.card-header-clean h2 { color: var(--text-strong); font-size: 1rem; font-weight: 800; margin: 0; }
.card-body-pad { padding: 22px; }
.btn { border-radius: 10px; font-weight: 700; padding: .62rem 1rem; }
.btn-primary { background: var(--teal); border-color: var(--teal); }
.btn-primary:hover, .btn-primary:focus { background: var(--teal-dark); border-color: var(--teal-dark); }
.btn-soft { background: color-mix(in srgb, #e9f7f4 var(--tint), var(--surface)); border: 1px solid color-mix(in srgb, #d4eee8 var(--tint), var(--border)); color: var(--accent-ink); }
.btn-soft:hover { background: color-mix(in srgb, #d8f1ec var(--tint), var(--surface)); color: var(--accent-ink); }
.form-control, .form-select { border-color: var(--border); border-radius: 11px; min-height: 46px; }
.form-control:focus, .form-select:focus { border-color: #65b8ad; box-shadow: 0 0 0 .22rem rgba(15,118,110,.12); }
.form-label { color: var(--text); font-size: .82rem; font-weight: 800; }
.form-text { color: var(--text-faint); }
.table-app { margin: 0; }
.table-app th { background: var(--surface-2); border-bottom-color: var(--border); color: var(--text-muted); font-size: .69rem; letter-spacing: .08em; padding: 13px 18px; text-transform: uppercase; }
.table-app td { border-bottom-color: var(--border); color: var(--text); padding: 15px 18px; vertical-align: middle; }
.table-app tbody tr:last-child td { border-bottom: 0; }
.badge-soft { border-radius: 30px; display: inline-flex; font-size: .71rem; font-weight: 800; padding: 6px 10px; }
.empty-state { color: var(--muted); padding: 52px 24px; text-align: center; }
.empty-state i { color: #b7c7d8; display: block; font-size: 2.4rem; margin-bottom: 12px; }
.toast-stack { margin-bottom: 20px; }
.app-alert { align-items: center; border: 0; border-radius: 13px; box-shadow: 0 10px 25px rgba(18,38,63,.08); display: flex; gap: 10px; }
/* Ficha de indicador: una regla de color al borde en vez del típico ícono-en-círculo de
   plantilla, la cifra en la serif de la marca para que pese como un dato clínico, no como
   una tarjeta de SaaS genérico. */
.metric-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid transparent; border-radius: 14px; box-shadow: 0 10px 28px rgba(21,49,73,.06); height: 100%; padding: 20px 22px; position: relative; }
.metric-card.teal { border-left-color: var(--teal); } .metric-card.amber { border-left-color: var(--amber); } .metric-card.coral { border-left-color: var(--coral); } .metric-card.navy { border-left-color: var(--navy-2); }
.metric-icon { align-items: center; color: var(--text-faint); display: inline-flex; font-size: 1rem; height: auto; justify-content: center; margin-bottom: 10px; width: auto; }
.metric-card.teal .metric-icon { color: var(--accent-ink); } .metric-card.amber .metric-icon { color: color-mix(in srgb, #aa7100, #fff var(--ink-lift)); } .metric-card.coral .metric-icon { color: var(--coral-ink); } .metric-card.navy .metric-icon { color: var(--primary-ink); }
.metric-label { color: var(--muted); display: block; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.metric-value { color: var(--text-strong); display: block; font-size: 2rem; font-weight: 600; letter-spacing: -.02em; margin-top: 4px; }
.metric-foot { color: var(--text-faint); font-size: .7rem; margin-top: 9px; }
@media (max-width: 991.98px) {
    .sidebar { position: fixed; width: min(86vw, 300px); }
    .app-content { margin-left: 0; width: 100%; }
    .topbar { height: 70px; padding: 0 18px; }
    .page-content { padding: 24px 16px 40px; }
    .status-dot { display: none; }
}
@media (max-width: 575.98px) {
    .page-heading { align-items: stretch; flex-direction: column; }
    .page-heading .btn { width: 100%; }
    .topbar-title { font-size: .9rem; }
}
/* Acceso — sencillo, formal, sin adornos (rediseño 2026-09-11) */
.auth-body { background: var(--surface); }
.auth-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }

/* Panel izquierdo: identidad institucional + módulos del sistema */
.auth-showcase { background: radial-gradient(circle at 15% 10%, rgba(255,255,255,.08), transparent 45%), linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 55%, var(--teal-dark) 130%); color: white; display: flex; overflow: hidden; padding: 56px 52px; position: relative; }
.auth-showcase::after { background: radial-gradient(circle, rgba(255,255,255,.10) 0%, transparent 70%); bottom: -140px; content: ""; height: 380px; position: absolute; right: -110px; width: 380px; }
.auth-showcase-inner { display: flex; flex-direction: column; margin: auto 0; max-width: 420px; position: relative; z-index: 1; }
.auth-mark { align-items: center; display: flex; gap: 12px; margin-bottom: 40px; }
.auth-mark .brand-mark { border-radius: 11px; height: 38px; width: 38px; }
.auth-mark span { color: var(--text-strong); font: 600 1.02rem/1.2 var(--font-display); letter-spacing: -.01em; }
.auth-mark-light span { color: white; }
.auth-showcase h2 { font: 600 1.85rem/1.3 var(--font-display); letter-spacing: -.015em; margin: 0 0 8px; text-wrap: balance; }
.auth-showcase-address { align-items: center; color: #7FE8D6; display: flex; font-size: .85rem; font-weight: 600; gap: 7px; margin: 0 0 24px; }
.auth-showcase-copy { color: rgba(255,255,255,.78); font-size: .92rem; line-height: 1.65; margin: 0 0 32px; }
.auth-security-note { align-items: center; border-top: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.85); display: flex; font-size: .78rem; font-weight: 600; gap: 9px; padding-top: 22px; }

/* Panel derecho: formulario */
.auth-form-pane { align-items: center; display: flex; justify-content: center; padding: 24px; }
.auth-card { max-width: 380px; width: 100%; }
.auth-card-body { padding: 0; }
.auth-card h1 { color: var(--text-strong); font: 600 1.65rem/1.25 var(--font-display); letter-spacing: -.01em; margin: 0 0 6px; }
.auth-subtitle { color: var(--muted); font-size: .85rem; margin: 0 0 26px; }
.auth-error { align-items: center; background: color-mix(in srgb, #fdecea var(--tint), var(--surface)); border-radius: 10px; color: var(--danger-ink); display: flex; font-size: .8rem; font-weight: 600; gap: 8px; margin-bottom: 18px; padding: 11px 13px; }
.auth-field { margin-bottom: 16px; }
.auth-field label { color: var(--text-strong); display: block; font-size: .78rem; font-weight: 700; margin-bottom: 6px; }
.auth-input-group { align-items: center; display: flex; position: relative; }
.auth-input-group > i.bi { color: var(--muted); font-size: .95rem; left: 14px; pointer-events: none; position: absolute; }
.auth-input-group input { background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; color: var(--text); font-size: .92rem; padding: 12px 14px 12px 40px; transition: .15s; width: 100%; }
.auth-input-group input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15, 118, 110, .1); outline: none; }
.auth-toggle-password { background: none; border: 0; color: var(--muted); padding: 6px; position: absolute; right: 6px; }
.auth-toggle-password:hover { color: var(--text-strong); }
.auth-submit { background: var(--navy); border: 0; border-radius: 10px; color: white; font-size: .92rem; font-weight: 700; margin-top: 6px; padding: 13px; transition: .15s; width: 100%; }
.auth-submit:hover { background: var(--teal-dark); }
.auth-footnote { align-items: center; color: var(--muted); display: flex; font-size: .72rem; gap: 6px; justify-content: center; margin: 22px 0 0; text-align: center; }
.auth-credit { color: var(--muted); font-size: .68rem; margin: 6px 0 0; text-align: center; }

@media (max-width: 900px) {
    .auth-layout { display: block; }
    .auth-showcase { padding: 34px 26px; }
    .auth-showcase-inner { max-width: none; }
    .auth-showcase h2 { font-size: 1.4rem; }
    .auth-showcase-copy { margin-bottom: 20px; }
    .auth-form-pane { padding: 32px 24px 40px; }
}
@media (max-width: 460px) { .auth-card h1 { font-size: 1.45rem; } }
.welcome-banner { align-items: center; background: linear-gradient(120deg, #0c625e, #0a484c 60%, #173f5f); border-radius: 22px; box-shadow: 0 18px 40px rgba(12,82,82,.18); color: white; display: flex; justify-content: space-between; margin-bottom: 22px; overflow: hidden; padding: 28px 30px; position: relative; }
.welcome-banner::after { border: 38px solid rgba(255,255,255,.04); border-radius: 50%; content: ""; height: 210px; position: absolute; right: 16%; top: -95px; width: 210px; }
.welcome-banner h1 { font-size: clamp(1.55rem, 3vw, 2.25rem); font-weight: 820; letter-spacing: -.04em; margin: 8px 0 5px; }
.welcome-banner p { color: #b8d7d5; margin: 0; }
.welcome-label { color: #83e1d4; font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.welcome-actions { display: flex; gap: 10px; position: relative; z-index: 2; }
.welcome-actions .btn-light { color: #0B3551; }
.small-link { color: var(--accent-ink); font-size: .75rem; font-weight: 800; text-decoration: none; }
.shift-list { padding: 6px 22px 14px; }
.shift-row { align-items: center; border-bottom: 1px solid var(--border); display: flex; gap: 14px; padding: 14px 0; }
.shift-row:last-child { border-bottom: 0; }
.date-tile { background: var(--surface-3); border-radius: 11px; color: var(--text-strong); flex: 0 0 46px; padding: 7px 4px; text-align: center; }
.date-tile strong, .date-tile span { display: block; line-height: 1; }
.date-tile strong { font-size: 1rem; } .date-tile span { color: var(--muted); font-size: .74rem; margin-top: 4px; text-transform: uppercase; }
.shift-color { background: var(--shift-color); border-radius: 4px; height: 33px; width: 4px; }
.shift-copy { flex: 1; min-width: 0; }
.shift-copy strong, .shift-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shift-copy strong { color: var(--text); font-size: .82rem; } .shift-copy span { color: var(--muted); font-size: .7rem; margin-top: 4px; }
.shift-code { border-radius: 8px; font-size: .67rem; font-weight: 900; padding: 5px 8px; }
.request-mini-list { padding: 6px 22px 14px; }
.request-mini-row { align-items: center; border-bottom: 1px solid var(--border); color: inherit; display: flex; gap: 12px; padding: 14px 0; text-decoration: none; }
.request-mini-row:last-child { border-bottom: 0; }
.request-icon { align-items: center; background: color-mix(in srgb, #edf7f5 var(--tint), var(--surface)); border-radius: 10px; color: var(--accent-ink); display: flex; flex: 0 0 39px; height: 39px; justify-content: center; }
.request-copy { flex: 1; min-width: 0; }
.request-copy strong, .request-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.request-copy strong { color: var(--text); font-size: .79rem; } .request-copy small { color: var(--muted); font-size: .66rem; margin-top: 3px; }
.request-mini-row .badge { font-size: .7rem; }
@media (max-width: 767px) { .welcome-banner { align-items: flex-start; flex-direction: column; gap: 22px; } .welcome-actions { width: 100%; } .welcome-actions .btn { flex: 1; } }
.form-footer { align-items: center; background: var(--surface-2); border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; padding: 17px 22px; }
.color-swatch { border: 4px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--border); height: 27px; width: 27px; }
.shift-preview { border: 1px solid; border-radius: 8px; font-size: .72rem; font-weight: 900; padding: 6px 10px; }
.calendar-toolbar { align-items: center; display: flex; justify-content: space-between; padding: 13px 16px; }
.calendar-toolbar div { text-align: center; }
.calendar-toolbar strong, .calendar-toolbar span { display: block; }
.calendar-toolbar strong { color: var(--text-strong); font-size: .92rem; } .calendar-toolbar span { color: var(--muted); font-size: .7rem; }
.calendar-card { overflow: hidden; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); }
.calendar-weekdays { background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: .67rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.calendar-weekdays div { padding: 12px 13px; text-align: center; }
.calendar-week { border-bottom: 1px solid var(--border); }
.calendar-week:last-child { border-bottom: 0; }
.calendar-day { background: var(--surface); border-right: 1px solid var(--border); min-height: 132px; padding: 9px; }
.calendar-day:last-child { border-right: 0; }
.calendar-day.outside { background: var(--surface-2); }
.calendar-day.outside .day-head, .calendar-day.outside .day-shifts { opacity: .34; }
.calendar-day.today { background: var(--surface-2); box-shadow: inset 0 3px var(--teal); }
.day-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 8px; }
.day-head > span { align-items: center; border-radius: 50%; color: var(--text-soft); display: flex; font-size: .73rem; font-weight: 850; height: 25px; justify-content: center; width: 25px; }
.today .day-head > span { background: var(--teal); color: white; }
.day-head a { align-items: center; border-radius: 7px; color: var(--text-faint); display: flex; height: 24px; justify-content: center; text-decoration: none; width: 24px; }
.day-head a:hover { background: color-mix(in srgb, #e0f3ef var(--tint), var(--surface)); color: var(--accent-ink); }
.day-shifts { display: flex; flex-direction: column; gap: 5px; }
.calendar-shift { align-items: center; background: color-mix(in srgb, var(--item-color) 12%, var(--surface)); border-left: 3px solid var(--item-color); border-radius: 6px; color: var(--text); display: flex; font-size: .7rem; gap: 5px; overflow: hidden; padding: 5px 6px; text-decoration: none; }
.calendar-shift b { color: var(--item-color); }
.calendar-shift span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-shift { color: #b0bbc6; font-size: .74rem; padding-left: 5px; }
.calendar-legend { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.calendar-legend > span { align-items: center; color: var(--text-muted); display: flex; font-size: .68rem; gap: 6px; }
.calendar-legend i { border-radius: 50%; height: 9px; width: 9px; }
.calendar-legend .legend-title { color: var(--text-strong); font-weight: 850; }
@media (max-width: 1100px) { .calendar-card { overflow-x: auto; } .calendar-grid { min-width: 860px; } }
.filter-bar { align-items: end; display: flex; flex-wrap: wrap; gap: 13px; padding: 16px 18px; }
.filter-bar > div { min-width: 170px; }
.filter-bar label { color: var(--muted); display: block; font-size: .66rem; font-weight: 850; margin: 0 0 5px 3px; text-transform: uppercase; }
.employee-cell { align-items: center; display: flex; gap: 10px; min-width: 180px; }
.mini-avatar { align-items: center; background: color-mix(in srgb, #e7f3f1 var(--tint), var(--surface)); border-radius: 10px; color: var(--accent-ink); display: flex; flex: 0 0 36px; font-size: .74rem; font-weight: 900; height: 36px; justify-content: center; }
.employee-cell strong, .employee-cell small { display: block; } .employee-cell strong { color: var(--text); font-size: .78rem; } .employee-cell small { color: var(--muted); font-size: .7rem; margin-top: 2px; }
.difference { background: var(--surface-3); border-radius: 7px; color: var(--text-soft); font-size: .71rem; font-weight: 850; padding: 5px 8px; }
.difference.negative { background: color-mix(in srgb, #fff0ed var(--tint), var(--surface)); color: color-mix(in srgb, #cf5543, #fff var(--ink-lift)); } .difference.positive { background: color-mix(in srgb, #e9f8f2 var(--tint), var(--surface)); color: color-mix(in srgb, #16845f, #fff var(--ink-lift)); }
.thin-progress { background: var(--surface-3); height: 7px; min-width: 100px; } .thin-progress .progress-bar { background: linear-gradient(90deg, var(--teal), #45c2ae); border-radius: 10px; }
.director-check { align-items: center; background: var(--surface-2); border: 1px solid color-mix(in srgb, #dceeea var(--tint), var(--border)); border-radius: 14px; display: flex; justify-content: space-between; padding: 15px 17px; }
.director-check > div { align-items: center; display: flex; gap: 12px; }
.director-check i { align-items: center; background: color-mix(in srgb, #dff4ef var(--tint), var(--surface)); border-radius: 10px; color: var(--accent-ink); display: flex; font-size: 1.05rem; height: 38px; justify-content: center; width: 38px; }
.director-check strong, .director-check small { display: block; } .director-check strong { color: var(--text); font-size: .8rem; } .director-check small { color: var(--muted); font-size: .66rem; margin-top: 3px; }
.process-card { background: linear-gradient(145deg, #123b4b, #0b5754); border-radius: var(--radius); box-shadow: var(--shadow); color: white; padding: 25px; }
.process-icon { align-items: center; background: color-mix(in srgb, #e1f5f1 var(--tint), var(--surface)); border-radius: 13px; color: var(--accent-ink); display: flex; font-size: 1.25rem; height: 46px; justify-content: center; margin-bottom: 17px; width: 46px; }
.process-card h2, .approval-card h2, .decision-card h2 { font-size: 1.05rem; font-weight: 850; margin-bottom: 19px; }
.process-card ol { list-style: none; margin: 0; padding: 0; }
.process-card li { align-items: center; display: flex; gap: 12px; padding: 10px 0; }
.process-card li > span { align-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 50%; display: flex; font-size: .69rem; font-weight: 900; height: 30px; justify-content: center; width: 30px; }
.process-card li strong, .process-card li small { display: block; } .process-card li strong { font-size: .76rem; } .process-card li small { color: #a8cecb; font-size: .7rem; margin-top: 2px; }
.request-status-large { align-items: center; border-radius: 30px; display: inline-flex; font-size: .76rem; font-weight: 850; gap: 7px; padding: 9px 14px; }
.request-status-large i { font-size: .47rem; }
.detail-grid { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
.detail-grid span, .detail-grid strong { display: block; } .detail-grid span, .reason-box > span { color: var(--muted); font-size: .68rem; font-weight: 750; margin-bottom: 4px; } .detail-grid strong { color: var(--text); font-size: .84rem; }
.reason-box { background: var(--surface-2); border-radius: 13px; margin-top: 24px; padding: 16px; }
.reason-box p { color: var(--text-soft); font-size: .82rem; line-height: 1.65; margin: 0; }

.profile-summary-head { align-items: center; display: flex; gap: 16px; }
.profile-summary-avatar { border-radius: 16px; flex: 0 0 56px; font-size: 1.35rem; height: 56px; width: 56px; }
.profile-summary-photo { object-fit: cover; }
.profile-summary-head h2 { color: var(--text-strong); font-size: 1.05rem; font-weight: 700; }
.profile-summary-head .badge-soft { margin-right: 6px; }
.profile-summary-note { background: var(--sage-tint); border-radius: 12px; color: var(--text-soft); font-size: .78rem; line-height: 1.6; margin: 22px 0 0; padding: 12px 14px; }
.fingerprint-status { align-items: center; background: var(--canvas); border-radius: 12px; display: flex; gap: 13px; padding: 14px; }
.fingerprint-status > span { align-items: center; background: var(--surface-3); border-radius: 11px; color: var(--muted); display: flex; flex: 0 0 40px; font-size: 1.1rem; height: 40px; justify-content: center; }
.fingerprint-status strong { color: var(--text-strong); display: block; font-size: .84rem; }
.fingerprint-status small { color: var(--muted); font-size: .74rem; line-height: 1.5; }
.diagnostic-grid { background: var(--canvas); border-radius: 12px; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; padding: 14px; }
.diagnostic-grid > div { overflow: hidden; }
.diagnostic-label { color: var(--muted); display: block; font-size: .68rem; letter-spacing: .02em; text-transform: uppercase; }
.diagnostic-grid strong { color: var(--text-strong); display: block; font-size: .82rem; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diagnostic-tech { background: var(--canvas); border-radius: 12px; font-size: .82rem; padding: 14px; }
.diagnostic-tech p { color: var(--muted); margin: 0 0 8px; word-break: break-word; }
.diagnostic-tech strong { color: var(--text-strong); }
.diagnostic-checklist { color: var(--text); display: flex; flex-direction: column; gap: 14px; margin: 0; padding-left: 20px; }
.diagnostic-checklist li { font-size: .85rem; line-height: 1.5; }
@media (max-width: 480px) { .diagnostic-grid { grid-template-columns: 1fr; } }
.enrollment-thumbnails { display: flex; gap: 14px; justify-content: center; margin-bottom: 26px; }
.enrollment-thumbnail { align-items: center; background: var(--canvas); border: 2px dashed var(--line); border-radius: 14px; display: flex; height: 96px; justify-content: center; overflow: hidden; position: relative; width: 96px; }
.enrollment-thumbnail i { color: var(--line); font-size: 2.1rem; }
.enrollment-thumbnail-number { background: var(--surface); border: 1px solid var(--line); border-radius: 50%; bottom: 6px; color: var(--muted); font-size: .7rem; font-weight: 800; height: 18px; line-height: 16px; position: absolute; right: 6px; width: 18px; }
.enrollment-thumbnail.done { border-color: var(--teal); border-style: solid; }
.enrollment-thumbnail.done img { animation: enrollment-reveal .35s ease-out; filter: grayscale(1) contrast(1.15); height: 100%; object-fit: contain; width: 100%; }
@keyframes enrollment-reveal { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.capability-list { display: flex; flex-direction: column; gap: 11px; list-style: none; margin: 0; padding: 0; }
.capability-list li { align-items: flex-start; color: var(--text); display: flex; font-size: .81rem; gap: 9px; line-height: 1.5; }
.capability-list i { color: var(--accent-ink); flex: 0 0 auto; margin-top: 2px; }
.timeline { padding: 22px 24px 24px 40px; }
.timeline-item { border-left: 2px solid var(--border); padding: 0 0 25px 23px; position: relative; }
.timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-dot { background: var(--teal); border: 4px solid color-mix(in srgb, #dff4ef var(--tint), var(--border)); border-radius: 50%; height: 14px; left: -8px; position: absolute; top: 3px; width: 14px; }
.timeline-content > div { display: flex; justify-content: space-between; } .timeline-content strong { color: var(--text); font-size: .8rem; } .timeline-content time { color: var(--text-faint); font-size: .7rem; }
.timeline-content p { color: var(--text-muted); font-size: .75rem; margin: 6px 0 3px; } .timeline-content small { color: var(--text-faint); font-size: .7rem; }
.approval-steps { position: relative; }
.approval-step { align-items: center; display: flex; gap: 12px; padding: 9px 0; }
.approval-step > span { align-items: center; background: var(--surface-3); border-radius: 50%; color: var(--text-faint); display: flex; flex: 0 0 31px; font-size: .7rem; font-weight: 900; height: 31px; justify-content: center; }
.approval-step strong, .approval-step small { display: block; } .approval-step strong { color: var(--text); font-size: .76rem; } .approval-step small { color: var(--muted); font-size: .7rem; margin-top: 2px; }
.approval-step.done > span { background: color-mix(in srgb, #dff5ee var(--tint), var(--surface)); color: color-mix(in srgb, #16835f, #fff var(--ink-lift)); } .approval-step.current > span { background: var(--teal); box-shadow: 0 0 0 5px rgba(15,118,110,.1); color: white; }
.decision-buttons { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; margin-top: 14px; }
.audit-list { padding: 4px 22px 14px; }
.audit-row { align-items: center; border-bottom: 1px solid var(--border); color: inherit; display: flex; gap: 13px; padding: 14px 0; text-decoration: none; }
.audit-row:last-child { border-bottom: 0; }
.audit-icon { align-items: center; border-radius: 11px; display: flex; flex: 0 0 41px; height: 41px; justify-content: center; } .shift-audit { background: color-mix(in srgb, #e6f6f2 var(--tint), var(--surface)); color: var(--accent-ink); } .request-audit { background: var(--surface-3); color: var(--primary-ink); }
.audit-row strong, .audit-row p, .audit-row small { display: block; } .audit-row strong { color: var(--text); font-size: .76rem; } .audit-row p { color: var(--text-muted); font-size: .7rem; margin: 3px 0; } .audit-row small { color: var(--text-faint); font-size: .75rem; }
@media (max-width: 575px) { .detail-grid { grid-template-columns: 1fr; } .filter-bar > div { flex: 1; min-width: 130px; } }

/* Acceso, áreas y configuración institucional */
.role-pill { background: var(--surface-3); border-radius: 30px; color: var(--text-soft); display: inline-flex; font-size: .7rem; font-weight: 850; padding: 7px 10px; }
.role-admin { background: var(--surface-3); color: color-mix(in srgb, #31598d, #fff var(--ink-lift)); }
.role-manager { background: color-mix(in srgb, #e5f6f2 var(--tint), var(--surface)); color: color-mix(in srgb, #117567, #fff var(--ink-lift)); }
.role-hr { background: color-mix(in srgb, #fff3dd var(--tint), var(--surface)); color: color-mix(in srgb, #9b6812, #fff var(--ink-lift)); }
.role-director { background: color-mix(in srgb, #f1eafa var(--tint), var(--surface)); color: color-mix(in srgb, #7045a0, #fff var(--ink-lift)); }
.role-staff { background: var(--surface-3); color: var(--text-soft); }
.area-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.area-card { background: var(--surface); border: 1px solid var(--border); border-radius: 17px; box-shadow: 0 10px 27px rgba(20,49,72,.06); min-height: 220px; padding: 20px; }
.area-card.area-inactive { filter: grayscale(.65); opacity: .7; }
.area-card-top, .area-card-foot { align-items: center; display: flex; justify-content: space-between; }
.area-icon { align-items: center; background: linear-gradient(145deg, color-mix(in srgb, #e1f6f2 var(--tint), var(--surface)), var(--surface-3)); border-radius: 12px; color: var(--accent-ink); display: flex; font-size: 1.15rem; height: 43px; justify-content: center; width: 43px; }
.area-code { color: var(--accent-ink); display: block; font-size: .7rem; font-weight: 900; letter-spacing: .12em; margin-top: 20px; text-transform: uppercase; }
.area-card h2 { color: var(--text-strong); font-size: 1.05rem; font-weight: 850; margin: 4px 0 7px; }
.area-card p { color: var(--muted); font-size: .73rem; line-height: 1.5; min-height: 35px; }
.area-card-foot { border-top: 1px solid var(--border); color: var(--text-muted); font-size: .7rem; margin-top: 16px; padding-top: 14px; }
.area-card-foot strong { color: var(--text-strong); font-size: .9rem; }
.role-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.role-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 11px 29px rgba(20,49,72,.06); overflow: hidden; padding: 21px; position: relative; }
.role-card::before { background: var(--teal); content: ""; height: 4px; inset: 0 0 auto; position: absolute; }
.role-card-admin::before { background: #31598d; } .role-card-hr::before { background: #d99a29; } .role-card-director::before { background: #7045a0; }
.role-card-head { align-items: center; display: flex; justify-content: space-between; }
.role-number { color: #dbe4eb; font-size: 1.4rem; font-weight: 900; }
.role-count { background: var(--surface-3); border-radius: 20px; color: var(--text-muted); font-size: .7rem; font-weight: 800; padding: 6px 9px; }
.role-card h2 { color: var(--text-strong); font-size: 1.05rem; font-weight: 850; margin: 14px 0 4px; }
.role-scope { color: var(--accent-ink); font-size: .7rem; font-weight: 800; }
.role-card ul { list-style: none; margin: 18px 0 0; padding: 0; }
.role-card li { align-items: flex-start; color: var(--text-muted); display: flex; font-size: .72rem; gap: 8px; padding: 6px 0; }
.role-card li i { color: color-mix(in srgb, #20a67f, #fff var(--ink-lift)); font-size: .9rem; }
.security-note { align-items: flex-start; background: linear-gradient(120deg, #0c514f, #163b54); border-radius: 17px; color: white; display: flex; gap: 15px; padding: 20px 22px; }
.security-note > i { color: #65dfcc; font-size: 1.5rem; }
.security-note strong { display: block; font-size: .87rem; }
.security-note p { color: #b4d1d1; font-size: .72rem; margin: 5px 0 0; }
.area-chip, .coverage-pill { align-items: center; background: color-mix(in srgb, #edf7f5 var(--tint), var(--surface)); border-radius: 20px; color: color-mix(in srgb, #26786f, #fff var(--ink-lift)); display: inline-flex; font-size: .68rem; font-weight: 800; gap: 6px; padding: 6px 9px; white-space: nowrap; }
.coverage-pill { background: var(--surface-3); color: var(--text-soft); }
.system-audit { background: color-mix(in srgb, #fff4dc var(--tint), var(--surface)); color: color-mix(in srgb, #a66e08, #fff var(--ink-lift)); }
.audit-grid { display: grid; gap: 0 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.password-gate { align-items: stretch; display: grid; gap: 24px; grid-template-columns: 1.1fr .9fr; margin: 3vh auto; max-width: 1080px; }
.password-gate-visual { background: linear-gradient(145deg, #0b4a4b, #12334b); border-radius: 20px; box-shadow: 0 18px 40px rgba(16,58,71,.17); color: white; overflow: hidden; padding: clamp(30px, 5vw, 60px); position: relative; }
.password-gate-visual::after { border: 38px solid rgba(255,255,255,.04); border-radius: 50%; content: ""; height: 240px; position: absolute; right: -70px; top: -75px; width: 240px; }
.gate-icon { align-items: center; background: rgba(89,219,198,.15); border: 1px solid rgba(89,219,198,.25); border-radius: 16px; color: #64dfcc; display: flex; font-size: 1.55rem; height: 55px; justify-content: center; margin-bottom: 45px; width: 55px; }
.password-gate-visual h1 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 850; letter-spacing: -.05em; line-height: 1.02; }
.password-gate-visual > p { color: #b6d0d2; line-height: 1.65; margin: 20px 0 30px; }
.gate-points { display: flex; flex-direction: column; gap: 12px; }
.gate-points span { color: #c5dddd; font-size: .75rem; }
.gate-points i { color: #54d4bc; margin-right: 8px; }
@media (max-width: 900px) { .password-gate { grid-template-columns: 1fr; } .password-gate-visual { padding: 32px; } .gate-icon { margin-bottom: 25px; } }
@media (max-width: 767px) { .audit-grid { grid-template-columns: 1fr; } }

/* Planificador mensual y consulta personal */
.schedule-status { align-items: center; border-radius: 30px; display: inline-flex; font-size: .69rem; font-weight: 850; gap: 6px; padding: 7px 10px; }
.schedule-status i { font-size: .42rem; }
.status-draft { background: color-mix(in srgb, #fff3d9 var(--tint), var(--surface)); color: color-mix(in srgb, #96650d, #fff var(--ink-lift)); }
.status-published { background: color-mix(in srgb, #e0f5ed var(--tint), var(--surface)); color: color-mix(in srgb, #137656, #fff var(--ink-lift)); }
.status-closed { background: var(--surface-3); color: var(--text-muted); }
.schedule-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; }
.schedule-summary > div { border-right: 1px solid var(--border); padding: 17px 20px; }
.schedule-summary > div:last-child { border-right: 0; }
.schedule-summary span, .schedule-summary strong { display: block; }
.schedule-summary > div > span { color: var(--muted); font-size: .7rem; font-weight: 850; letter-spacing: .08em; margin-bottom: 5px; text-transform: uppercase; }
.schedule-summary > div > strong { color: var(--text-strong); font-size: .78rem; }
.roster-card { overflow: hidden; }
.roster-scroll { max-height: 67vh; overflow: auto; }
.roster-table { border-collapse: separate; border-spacing: 0; font-size: .68rem; min-width: 1450px; width: 100%; }
.roster-table th { background: var(--surface-3); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); color: var(--text-soft); font-size: .75rem; height: 55px; position: sticky; text-align: center; top: 0; z-index: 4; }
.roster-table td { background: var(--surface); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); height: 48px; padding: 3px; text-align: center; }
.roster-table tr:hover td { background: var(--surface); }
.roster-number { left: 0; min-width: 42px; position: sticky; width: 42px; z-index: 5 !important; }
.roster-person { left: 42px; min-width: 220px; position: sticky; text-align: left !important; width: 220px; z-index: 5 !important; }
td.roster-number, td.roster-person { background: var(--surface); }
.roster-person strong, .roster-person small { display: block; overflow: hidden; padding-left: 10px; text-overflow: ellipsis; white-space: nowrap; }
.roster-person strong { color: var(--text); font-size: .72rem; }
.roster-person small { color: var(--text-faint); font-size: .73rem; margin-top: 3px; }
.roster-day { min-width: 38px; width: 38px; }
.roster-day span, .roster-day strong { display: block; }
.roster-day span { color: var(--text-faint); font-size: .71rem; }
.roster-day strong { color: var(--text); font-size: .72rem; margin-top: 2px; }
.roster-table .weekend { background: var(--surface-2); }
.roster-total { min-width: 72px; position: sticky; right: 0; width: 72px; z-index: 5 !important; }
td.roster-total { background: var(--surface-3); color: var(--accent-ink); }
.roster-select { appearance: none; background: color-mix(in srgb, var(--cell-color) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--cell-color) 45%, var(--border)); border-radius: 7px; color: color-mix(in srgb, var(--cell-color) 80%, var(--text-strong)); cursor: pointer; font-size: .7rem; font-weight: 900; height: 32px; padding: 0; text-align: center; width: 32px; }
.roster-select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cell-color) 18%, transparent); outline: none; }
.roster-code { align-items: center; background: color-mix(in srgb, var(--cell-color) 17%, var(--surface)); border: 1px solid color-mix(in srgb, var(--cell-color) 45%, var(--surface)); border-radius: 7px; color: color-mix(in srgb, var(--cell-color) 80%, var(--text)); display: inline-flex; font-weight: 900; height: 31px; justify-content: center; width: 31px; }
.roster-empty { color: #b6c0c9; }
.schedule-savebar { align-items: end; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; bottom: 16px; box-shadow: 0 14px 35px rgba(21,51,73,.14); display: grid; gap: 18px; grid-template-columns: 1fr auto; margin: 18px auto 0; max-width: 900px; padding: 17px 19px; position: sticky; z-index: 20; }
.schedule-savebar small { color: var(--text-faint); display: block; font-size: .7rem; margin-top: 5px; }
.source-pill { align-items: center; background: var(--surface-3); border-radius: 20px; color: var(--text-muted); display: inline-flex; font-size: .7rem; font-weight: 750; gap: 6px; padding: 6px 9px; }
.next-shift-card { align-items: center; background: linear-gradient(125deg, #0c5d59, #12384e); border-radius: 18px; box-shadow: 0 15px 34px rgba(16,72,80,.15); color: white; display: flex; justify-content: space-between; min-height: 180px; overflow: hidden; padding: 28px; position: relative; }
.next-shift-card::after { border: 32px solid rgba(255,255,255,.04); border-radius: 50%; content: ""; height: 190px; position: absolute; right: 70px; top: -85px; width: 190px; }
.next-label { color: #7ce0d1; font-size: .66rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.next-shift-card h2 { font-size: 1.65rem; font-weight: 850; margin: 9px 0 5px; }
.next-shift-card p { color: #b8d6d5; font-size: .78rem; margin: 0; }
.next-code { align-items: center; background: color-mix(in srgb, var(--next-color) 80%, var(--surface)); border: 7px solid rgba(255,255,255,.15); border-radius: 50%; display: flex; font-size: 1.5rem; font-weight: 950; height: 78px; justify-content: center; position: relative; width: 78px; z-index: 2; }
.next-empty-icon { color: #70cfc0; font-size: 3rem; position: relative; z-index: 2; }
.read-only-chip { align-items: center; background: color-mix(in srgb, #e8f5f2 var(--tint), var(--surface)); border: 1px solid color-mix(in srgb, #d2ebe5 var(--tint), var(--border)); border-radius: 30px; color: color-mix(in srgb, #2b786b, #fff var(--ink-lift)); display: inline-flex; font-size: .66rem; font-weight: 800; gap: 7px; padding: 9px 13px; white-space: nowrap; }
.personal-calendar-card { overflow: hidden; }
.personal-calendar-header { align-items: center; background: linear-gradient(135deg, var(--surface-2), var(--surface)); display: grid; grid-template-columns: 46px 1fr 46px; padding: 20px 22px; }
.calendar-nav-button { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text-soft); display: flex; height: 42px; justify-content: center; text-decoration: none; transition: .18s ease; width: 42px; }
.calendar-nav-button:last-child { justify-self: end; }
.calendar-nav-button:hover { border-color: #9fcfc6; box-shadow: 0 8px 18px rgba(30,91,91,.11); color: var(--accent-ink); transform: translateY(-1px); }
.personal-calendar-title { text-align: center; }
.personal-calendar-title > span { color: var(--text-faint); display: block; font-size: .73rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.personal-calendar-title h2 { color: var(--text-strong); font-size: 1.2rem; font-weight: 850; margin: 3px 0 4px; }
.personal-calendar-title small { color: var(--text-muted); font-size: .7rem; }
.personal-calendar-title small i { color: color-mix(in srgb, #35a88e, #fff var(--ink-lift)); margin-right: 4px; }
.personal-weekdays { background: var(--surface-3); border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.personal-weekdays span { color: var(--text-muted); font-size: .75rem; font-weight: 850; letter-spacing: .035em; padding: 10px 8px; text-align: center; text-transform: uppercase; }
.personal-weekdays span:nth-last-child(-n+2) { color: color-mix(in srgb, #a27635, #fff var(--ink-lift)); }
.personal-month-grid { background: var(--surface-4); display: grid; gap: 1px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.personal-month-day { background: var(--surface); min-height: 136px; min-width: 0; padding: 11px; position: relative; transition: background .15s ease; }
.personal-month-day:hover { background: var(--surface); }
.personal-month-day.weekend { background: var(--surface-2); }
.personal-month-day.outside-month { background: var(--surface-3); }
.personal-month-day.today { box-shadow: inset 0 0 0 2px #2ba58f; z-index: 1; }
.personal-month-day.assigned::after { background: var(--day-color); border-radius: 0 0 7px 7px; content: ""; height: 3px; left: 12px; position: absolute; right: 12px; top: 0; }
.personal-day-heading { align-items: center; display: flex; min-height: 30px; }
.personal-day-heading time { align-items: center; border-radius: 9px; color: var(--text-soft); display: inline-flex; font-size: .75rem; font-weight: 850; height: 29px; justify-content: center; width: 29px; }
.personal-month-day.today .personal-day-heading time { background: var(--teal); box-shadow: 0 5px 11px rgba(21,120,107,.2); color: #fff; }
.mobile-weekday { color: var(--text-faint); display: none; font-size: .72rem; font-weight: 800; margin-left: 6px; text-transform: uppercase; }
.today-label { background: color-mix(in srgb, #e3f4ef var(--tint), var(--surface)); border-radius: 20px; color: color-mix(in srgb, #26806b, #fff var(--ink-lift)); font-size: .70rem; font-weight: 900; margin-left: auto; padding: 4px 6px; text-transform: uppercase; }
.personal-shift-block { align-items: center; background: color-mix(in srgb, var(--day-color) 11%, var(--surface)); border: 1px solid color-mix(in srgb, var(--day-color) 26%, var(--border)); border-left: 3px solid var(--day-color); border-radius: 10px; display: grid; gap: 4px 7px; grid-template-columns: 31px minmax(0, 1fr); margin-top: 8px; padding: 8px; }
.personal-shift-code { align-items: center; background: color-mix(in srgb, var(--day-color) 20%, var(--surface)); border-radius: 8px; color: color-mix(in srgb, var(--day-color) 76%, var(--text)); display: flex; font-size: .72rem; font-weight: 950; grid-row: 1 / 3; height: 31px; justify-content: center; width: 31px; }
.personal-shift-copy { min-width: 0; }
.personal-shift-copy strong, .personal-shift-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personal-shift-copy strong { color: var(--text); font-size: .7rem; font-weight: 850; }
.personal-shift-copy small { color: var(--text-muted); font-size: .71rem; margin-top: 2px; }
.personal-shift-hours { color: color-mix(in srgb, var(--day-color) 72%, var(--text-soft)); font-size: .71rem; font-weight: 850; grid-column: 2; }
.personal-no-shift { color: #abb5bd; display: block; font-size: .73rem; margin: 15px 0 0 4px; }
.personal-calendar-footer { align-items: center; background: var(--surface); display: flex; gap: 20px; justify-content: space-between; padding: 15px 20px; }
.personal-calendar-legend { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; }
.legend-heading { color: var(--text-muted); font-size: .74rem; font-weight: 850; margin-right: 3px; text-transform: uppercase; }
.personal-legend-item { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; color: var(--text-muted); display: inline-flex; font-size: .72rem; gap: 5px; padding: 6px 8px; }
.personal-legend-item i { background: var(--legend-color); border-radius: 50%; height: 7px; width: 7px; }
.personal-legend-item b { color: var(--text); }
.personal-legend-empty { color: var(--text-faint); font-size: .74rem; }
.personal-legend-empty i { color: var(--accent-ink); margin-right: 4px; }
.calendar-help { color: var(--text-faint); font-size: .72rem; white-space: nowrap; }
.calendar-help i { color: var(--accent-ink); margin-right: 4px; }
.detail-count { background: var(--surface-3); border-radius: 20px; color: var(--text-muted); font-size: .75rem; font-weight: 800; padding: 7px 10px; }
.personal-shifts-table td:first-child strong, .personal-shifts-table td:first-child small { display: block; }
.personal-shifts-table td:first-child small { color: var(--text-faint); font-size: .72rem; margin-top: 2px; text-transform: capitalize; }
.personal-empty-state { flex-direction: column; gap: 4px; padding: 52px 20px; }
.personal-empty-state > span { align-items: center; background: color-mix(in srgb, #e6f3f0 var(--tint), var(--surface)); border-radius: 14px; color: var(--accent-ink); display: flex; font-size: 1.25rem; height: 48px; justify-content: center; margin-bottom: 8px; width: 48px; }
.personal-empty-state strong { color: var(--text-soft); font-size: .76rem; }
.personal-empty-state small { color: var(--text-faint); font-size: .7rem; }
@media (max-width: 900px) { .schedule-summary { grid-template-columns: 1fr 1fr; } .schedule-summary > div:nth-child(2) { border-right: 0; } .schedule-savebar { grid-template-columns: 1fr; position: static; } }
@media (max-width: 1100px) {
  .personal-month-day { min-height: 108px; padding: 8px; }
  .personal-shift-block { display: flex; justify-content: center; padding: 7px; }
  .personal-shift-copy, .personal-shift-hours { display: none; }
  .personal-no-shift { font-size: .71rem; margin-top: 11px; }
  .calendar-help { display: none; }
}
@media (max-width: 700px) {
  .personal-page-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .read-only-chip { font-size: .74rem; padding: 7px 10px; }
  .personal-calendar-header { grid-template-columns: 38px 1fr 38px; padding: 15px 12px; }
  .calendar-nav-button { border-radius: 10px; height: 36px; width: 36px; }
  .personal-calendar-title h2 { font-size: 1rem; }
  .personal-calendar-title > span, .personal-calendar-title small { font-size: .71rem; }
  .personal-weekdays span { font-size: 0; padding: 8px 2px; }
  .personal-weekdays span::first-letter { font-size: .72rem; }
  .personal-month-day { min-height: 72px; padding: 5px; }
  .personal-month-day.assigned::after { left: 6px; right: 6px; }
  .personal-day-heading { min-height: 24px; }
  .personal-day-heading time { border-radius: 7px; font-size: .7rem; height: 24px; width: 24px; }
  .today-label, .mobile-weekday, .personal-no-shift { display: none; }
  .personal-shift-block { background: transparent; border: 0; margin-top: 4px; padding: 0; }
  .personal-shift-code { border-radius: 7px; font-size: .7rem; height: 25px; width: 25px; }
  .personal-calendar-footer { align-items: flex-start; padding: 12px; }
  .legend-heading { flex-basis: 100%; }
  .personal-legend-item { font-size: .70rem; padding: 5px 7px; }
}

/* Solicitudes HOS-0014 a HOS-0019 */
.request-heading-actions { align-items: flex-end; display: flex; flex-direction: column; gap: 11px; }
.request-kpis { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; }
.request-kpi { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 8px 24px rgba(26,57,77,.05); display: flex; gap: 13px; padding: 17px 18px; }
.request-kpi-icon { align-items: center; border-radius: 12px; display: flex; flex: 0 0 42px; font-size: 1.05rem; height: 42px; justify-content: center; }
.request-kpi .kpi-blue { background: color-mix(in srgb, #e8f1fb var(--tint), var(--surface)); color: color-mix(in srgb, #3d6c9e, #fff var(--ink-lift)); } .request-kpi .kpi-amber { background: color-mix(in srgb, #fff3d9 var(--tint), var(--surface)); color: color-mix(in srgb, #a47216, #fff var(--ink-lift)); } .request-kpi .kpi-green { background: color-mix(in srgb, #e1f5ee var(--tint), var(--surface)); color: color-mix(in srgb, #18805f, #fff var(--ink-lift)); } .request-kpi .kpi-gray { background: var(--surface-3); color: var(--text-muted); }
.request-kpi small, .request-kpi strong { display: block; } .request-kpi small { color: var(--muted); font-size: .7rem; font-weight: 750; } .request-kpi strong { color: var(--text-strong); font-size: 1.3rem; line-height: 1; margin-top: 5px; }
.request-filter-bar { align-items: end; } .request-filter-bar .filter-search { flex: 1; min-width: 230px; }
.search-control { position: relative; } .search-control > i { color: var(--text-faint); left: 13px; position: absolute; top: 11px; z-index: 2; } .search-control .form-control { padding-left: 38px; }
.queue-pill { align-items: center; background: color-mix(in srgb, #edf6f5 var(--tint), var(--surface)); border: 1px solid color-mix(in srgb, #d5e9e6 var(--tint), var(--border)); border-radius: 22px; color: var(--text-soft); display: inline-flex; font-size: .68rem; font-weight: 800; gap: 7px; margin-left: auto; padding: 9px 11px; text-decoration: none; }
.queue-pill span { align-items: center; background: var(--surface); border-radius: 50%; display: flex; height: 22px; justify-content: center; width: 22px; } .queue-pill.active { background: var(--teal); border-color: var(--teal); color: white; }
.request-table td > small, .request-reference, .request-period, .request-updated { display: block; } .request-table td > small { color: var(--muted); font-size: .7rem; margin-top: 4px; }
.request-reference { color: var(--accent-ink); font-size: .76rem; font-weight: 900; letter-spacing: .02em; } .request-period, .request-updated { color: var(--text); font-size: .73rem; }
.request-badge { font-size: .7rem; padding: 7px 10px !important; } .request-owner { align-items: center; display: flex !important; gap: 5px; }
.request-form-card { overflow: hidden; } .request-form-section { border-bottom: 1px solid var(--border); margin-bottom: 23px; padding-bottom: 23px; }
.form-section-heading { align-items: center; display: flex; gap: 12px; margin-bottom: 17px; } .form-section-heading > span { align-items: center; background: color-mix(in srgb, #e1f3f0 var(--tint), var(--surface)); border-radius: 10px; color: var(--accent-ink); display: flex; flex: 0 0 34px; font-size: .72rem; font-weight: 900; height: 34px; justify-content: center; }
.form-section-heading strong, .form-section-heading small { display: block; } .form-section-heading strong { color: var(--text); font-size: .84rem; } .form-section-heading small { color: var(--muted); font-size: .7rem; margin-top: 2px; }
.request-process-card { position: sticky; top: 100px; } .process-note { align-items: flex-start; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; color: #c5dfdc; display: flex; font-size: .66rem; gap: 9px; line-height: 1.5; margin-top: 18px; padding: 12px; }
.request-progress-card { background: linear-gradient(130deg, #0d4c51, #123a50); border-radius: 18px; box-shadow: 0 14px 32px rgba(15,66,75,.14); color: white; overflow: hidden; padding: 22px 25px 20px; }
.request-progress-copy { align-items: flex-end; display: flex; justify-content: space-between; } .request-progress-copy div { align-items: baseline; display: flex; gap: 9px; } .request-progress-copy small { color: #a8d0cd; font-size: .66rem; font-weight: 750; } .request-progress-copy strong { font-size: 1.2rem; } .request-progress-copy > span { color: #bed4d5; font-size: .68rem; }
.request-progress-track { background: rgba(255,255,255,.13); border-radius: 20px; height: 7px; margin: 13px 0 20px; overflow: hidden; } .request-progress-track span { background: linear-gradient(90deg, #38c9ae, #75dec4); border-radius: inherit; display: block; height: 100%; }
.request-flow-steps { display: grid; gap: 8px; grid-template-columns: repeat(5, 1fr); }
.request-flow-step { align-items: center; display: flex; gap: 8px; min-width: 0; } .request-flow-step > span { align-items: center; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13); border-radius: 50%; color: var(--text-faint); display: flex; flex: 0 0 28px; font-size: .75rem; font-weight: 900; height: 28px; justify-content: center; }
.request-flow-step strong, .request-flow-step small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .request-flow-step strong { color: #b8ced0; font-size: .7rem; } .request-flow-step small { color: var(--text-faint); font-size: .71rem; margin-top: 2px; }
.request-flow-step.done > span { background: #3ac5a9; border-color: #3ac5a9; color: white; } .request-flow-step.done strong { color: white; } .request-flow-step.current > span { background: #f2b84a; border-color: #f2b84a; box-shadow: 0 0 0 5px rgba(242,184,74,.14); color: var(--text); } .request-flow-step.current strong { color: #ffe1a6; } .request-flow-step.returned > span { background: #91a1af; color: white; } .request-flow-step.rejected > span { background: #e75d68; border-color: #e75d68; color: white; }
.completeness-chip, .log-count { align-items: center; background: color-mix(in srgb, #e6f5ef var(--tint), var(--surface)); border-radius: 20px; color: color-mix(in srgb, #278166, #fff var(--ink-lift)); display: inline-flex; font-size: .75rem; font-weight: 800; gap: 5px; padding: 7px 9px; } .log-count { background: var(--surface-3); color: var(--text-muted); }
.request-detail-grid > div > small { color: var(--text-faint); display: block; font-size: .75rem; margin-top: 3px; } .observation-box { background: var(--surface-2); border-left-color: #7a93ad; margin-top: 12px; }
.timeline-transition { align-items: center; color: var(--text-faint); display: flex !important; font-size: .75rem; gap: 6px; justify-content: flex-start !important; margin-top: 6px; } .timeline-transition b { color: var(--text-soft); }
.timeline-dot.status-rejected { background: #dc5360; border-color: color-mix(in srgb, #f9dfe2 var(--tint), var(--border)); } .timeline-dot.status-returned { background: #8293a2; border-color: var(--border); } .timeline-dot.status-finalized { background: #29a47d; border-color: color-mix(in srgb, #dff4ec var(--tint), var(--border)); }
.responsibility-list > div { align-items: center; border-bottom: 1px solid var(--border); display: flex; gap: 11px; padding: 11px 0; } .responsibility-list > div:last-child { border-bottom: 0; } .responsibility-list > div > i { align-items: center; background: var(--surface-3); border-radius: 9px; color: var(--accent-ink); display: flex; height: 33px; justify-content: center; width: 33px; } .responsibility-list strong, .responsibility-list small { display: block; } .responsibility-list strong { color: var(--text); font-size: .7rem; } .responsibility-list small { color: var(--muted); font-size: .7rem; margin-top: 2px; }
.review-start-card { border-color: color-mix(in srgb, #2a9f8d 40%, var(--border)); } .review-start-card p { color: var(--muted); font-size: .7rem; line-height: 1.55; }
.decision-buttons-stacked { display: grid; grid-template-columns: 1fr 1fr; } .decision-buttons-stacked .btn:first-child { grid-column: 1 / -1; }
.request-alert { align-items: flex-start; border-radius: 14px; display: flex; gap: 12px; margin-top: 18px; padding: 15px; } .request-alert > i { font-size: 1.25rem; } .request-alert strong, .request-alert span { display: block; } .request-alert strong { font-size: .74rem; } .request-alert span { font-size: .7rem; line-height: 1.45; margin-top: 3px; } .request-alert.approved { background: color-mix(in srgb, #e5f5ef var(--tint), var(--surface)); color: color-mix(in srgb, #20795e, #fff var(--ink-lift)); } .request-alert.rejected { background: color-mix(in srgb, #fbe9eb var(--tint), var(--surface)); color: color-mix(in srgb, #a33c48, #fff var(--ink-lift)); } .request-alert.returned { background: var(--surface-3); color: var(--text-muted); }
@media (max-width: 1100px) { .request-kpis { grid-template-columns: 1fr 1fr; } .request-flow-steps { grid-template-columns: 1fr 1fr; row-gap: 14px; } .request-process-card { position: static; } }
@media (max-width: 600px) { .request-kpis { grid-template-columns: 1fr; } .request-progress-copy { align-items: flex-start; flex-direction: column; gap: 8px; } .request-flow-steps { grid-template-columns: 1fr; } .request-heading-actions { align-items: flex-start; } .queue-pill { margin-left: 0; } }

/* HOS-0020 a HOS-0025 · bitácora, notificaciones y cobertura */
.notification-button { position: relative; }
.notification-button > span { align-items: center; background: #ef5d68; border: 2px solid var(--surface); border-radius: 20px; color: white; display: flex; font-size: .72rem; font-weight: 900; height: 19px; justify-content: center; min-width: 19px; padding: 0 4px; position: absolute; right: -6px; top: -6px; }
.audit-kpis, .notification-kpis { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); margin-bottom: 20px; }
.notification-kpis { grid-template-columns: repeat(2, minmax(230px, 360px)); }
.audit-filter-bar { align-items: end; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(220px, .35fr) auto auto; }
.notification-tabs { display: flex; gap: 7px; margin-bottom: 14px; }
.notification-tabs a { align-items: center; border-radius: 10px; color: var(--text-muted); display: inline-flex; font-size: .74rem; font-weight: 800; gap: 8px; padding: 9px 13px; text-decoration: none; }
.notification-tabs a span { align-items: center; background: var(--surface-3); border-radius: 20px; display: flex; font-size: .75rem; height: 22px; justify-content: center; min-width: 22px; padding: 0 6px; }
.notification-tabs a.active { background: color-mix(in srgb, #e5f5f1 var(--tint), var(--surface)); color: var(--accent-ink); }
.notification-tabs a.active span { background: var(--teal); color: white; }
.notification-panel { overflow: hidden; }
.notification-row { align-items: center; border-bottom: 1px solid var(--border); color: inherit; display: flex; gap: 15px; padding: 18px 21px; position: relative; text-decoration: none; transition: .18s ease; }
.notification-row:last-child { border-bottom: 0; }
.notification-row:hover { background: var(--surface-2); }
.notification-row.unread { background: linear-gradient(90deg, color-mix(in srgb, #eef9f7 var(--tint), var(--surface)), var(--surface) 45%); }
.notification-icon { align-items: center; border-radius: 12px; display: flex; flex: 0 0 43px; font-size: 1.05rem; height: 43px; justify-content: center; }
.notification-icon.level-info { background: color-mix(in srgb, #e8f1fb var(--tint), var(--surface)); color: color-mix(in srgb, #4077ae, #fff var(--ink-lift)); } .notification-icon.level-success { background: color-mix(in srgb, #e1f5ed var(--tint), var(--surface)); color: color-mix(in srgb, #238264, #fff var(--ink-lift)); } .notification-icon.level-warning { background: color-mix(in srgb, #fff2d7 var(--tint), var(--surface)); color: color-mix(in srgb, #aa7316, #fff var(--ink-lift)); } .notification-icon.level-danger { background: color-mix(in srgb, #fbe5e8 var(--tint), var(--surface)); color: color-mix(in srgb, #bd4451, #fff var(--ink-lift)); }
.notification-copy { flex: 1; min-width: 0; } .notification-copy > div { align-items: center; display: flex; gap: 8px; } .notification-copy strong { color: var(--text); font-size: .82rem; } .notification-copy p { color: var(--text-muted); font-size: .72rem; margin: 4px 0 5px; } .notification-copy small { color: var(--text-faint); font-size: .75rem; } .notification-copy small span { color: var(--accent-ink); font-weight: 800; }
.new-dot { background: #ed6a67; border-radius: 50%; height: 7px; width: 7px; }
.notification-arrow { color: var(--text-faint); }
.internal-only-note { align-items: center; color: var(--text-faint); display: flex; font-size: .66rem; gap: 10px; justify-content: center; margin-top: 16px; } .internal-only-note > i { color: var(--accent-ink); font-size: 1rem; } .internal-only-note strong { color: var(--text-soft); display: block; }
.coverage-overview { align-items: center; border: 1px solid; border-radius: 15px; display: grid; gap: 14px; grid-template-columns: auto 1fr auto; padding: 17px 18px; }
.coverage-overview.risk-green { background: color-mix(in srgb, #effaf5 var(--tint), var(--surface)); border-color: color-mix(in srgb, #d7eee3 var(--tint), var(--border)); color: color-mix(in srgb, #24765c, #fff var(--ink-lift)); } .coverage-overview.risk-yellow { background: color-mix(in srgb, #fff8e8 var(--tint), var(--surface)); border-color: color-mix(in srgb, #f0dfb9 var(--tint), var(--border)); color: color-mix(in srgb, #8a661e, #fff var(--ink-lift)); } .coverage-overview.risk-red { background: color-mix(in srgb, #fff0f1 var(--tint), var(--surface)); border-color: #f0d2d6; color: color-mix(in srgb, #9e3f4a, #fff var(--ink-lift)); }
.traffic-light { align-items: center; background: currentColor; border-radius: 50%; display: flex; height: 42px; justify-content: center; opacity: .95; width: 42px; } .traffic-light i { background: var(--surface); border-radius: 50%; box-shadow: 0 0 0 6px rgba(255,255,255,.18); height: 11px; width: 11px; }
.coverage-overview small, .coverage-overview h3, .coverage-overview p { display: block; margin: 0; } .coverage-overview > div > small { font-size: .74rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } .coverage-overview h3 { font-size: .95rem; font-weight: 850; margin-top: 2px; } .coverage-overview p { font-size: .68rem; margin-top: 3px; }
.coverage-time { align-items: center; border-left: 1px solid currentColor; display: flex; font-size: .7rem; gap: 8px; line-height: 1.5; opacity: .7; padding-left: 15px; }
.coverage-metrics { background: var(--surface-2); border: 1px solid var(--border); border-radius: 13px; display: grid; grid-template-columns: repeat(4, 1fr); margin: 14px 0; }
.coverage-metrics > div { border-right: 1px solid var(--border); padding: 12px 15px; } .coverage-metrics > div:last-child { border-right: 0; } .coverage-metrics small, .coverage-metrics strong { display: block; } .coverage-metrics small { color: var(--text-faint); font-size: .74rem; } .coverage-metrics strong { color: var(--text-strong); font-size: 1.03rem; margin-top: 3px; }
.coverage-table-wrap { border: 1px solid var(--border); border-radius: 13px; overflow: hidden; }
.coverage-table td, .coverage-table th { padding: 10px 12px; } .coverage-table td { font-size: .68rem; } .coverage-table td > strong, .coverage-table td > small { display: block; } .coverage-table td > small { color: var(--text-faint); font-size: .72rem; margin-top: 2px; }
.impact-pill { align-items: center; border-radius: 20px; display: inline-flex; font-size: .73rem; font-weight: 850; gap: 5px; padding: 5px 8px; } .impact-pill i { border-radius: 50%; height: 6px; width: 6px; } .impact-pill.green { background: color-mix(in srgb, #e4f5ed var(--tint), var(--surface)); color: color-mix(in srgb, #237b5e, #fff var(--ink-lift)); } .impact-pill.green i { background: #27a777; } .impact-pill.yellow { background: color-mix(in srgb, #fff1d2 var(--tint), var(--surface)); color: color-mix(in srgb, #8b651a, #fff var(--ink-lift)); } .impact-pill.yellow i { background: #e8a91e; } .impact-pill.red { background: color-mix(in srgb, #fbe4e7 var(--tint), var(--surface)); color: color-mix(in srgb, #a43f4c, #fff var(--ink-lift)); } .impact-pill.red i { background: #d95361; }
.coverage-suggestions { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 16px; }
.coverage-subtitle { align-items: center; display: flex; gap: 10px; margin-bottom: 12px; } .coverage-subtitle > span { align-items: center; background: color-mix(in srgb, #e6f5f1 var(--tint), var(--surface)); border-radius: 9px; color: var(--accent-ink); display: flex; height: 34px; justify-content: center; width: 34px; } .coverage-subtitle strong, .coverage-subtitle small { display: block; } .coverage-subtitle strong { color: var(--text); font-size: .74rem; } .coverage-subtitle small { color: var(--text-faint); font-size: .74rem; margin-top: 2px; }
.suggestion-grid { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }
.suggestion-person { align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; display: flex; gap: 10px; padding: 10px; } .suggestion-person > span { align-items: center; background: color-mix(in srgb, #dcefea var(--tint), var(--surface)); border-radius: 9px; color: var(--accent-ink); display: flex; flex: 0 0 34px; font-size: .72rem; font-weight: 900; height: 34px; justify-content: center; } .suggestion-person strong, .suggestion-person small, .suggestion-person em { display: block; } .suggestion-person strong { color: var(--text); font-size: .68rem; } .suggestion-person small { color: var(--text-faint); font-size: .72rem; margin-top: 2px; } .suggestion-person em { color: var(--accent-ink); font-size: .71rem; font-style: normal; margin-top: 3px; }
.coverage-empty { align-items: center; background: var(--surface-3); border-radius: 10px; color: var(--text-muted); display: flex; font-size: .7rem; gap: 8px; padding: 11px 12px; }
.decision-impact { align-items: center; border: 1px solid; border-radius: 12px; display: flex; gap: 9px; margin: 12px 0 15px; padding: 10px; } .decision-impact > span { align-items: center; border-radius: 9px; display: flex; height: 31px; justify-content: center; width: 31px; } .decision-impact strong, .decision-impact small { display: block; } .decision-impact strong { font-size: .7rem; } .decision-impact small { font-size: .72rem; line-height: 1.4; margin-top: 2px; } .decision-impact.impact-green { background: color-mix(in srgb, #eff9f5 var(--tint), var(--surface)); border-color: color-mix(in srgb, #d7ebe3 var(--tint), var(--border)); color: color-mix(in srgb, #28765e, #fff var(--ink-lift)); } .decision-impact.impact-green > span { background: color-mix(in srgb, #dcefe8 var(--tint), var(--surface)); } .decision-impact.impact-yellow { background: color-mix(in srgb, #fff8e8 var(--tint), var(--surface)); border-color: color-mix(in srgb, #efdfba var(--tint), var(--border)); color: color-mix(in srgb, #88651e, #fff var(--ink-lift)); } .decision-impact.impact-yellow > span { background: color-mix(in srgb, #f7e9c6 var(--tint), var(--surface)); } .decision-impact.impact-red { background: color-mix(in srgb, #fff0f1 var(--tint), var(--surface)); border-color: #efd2d5; color: color-mix(in srgb, #9f404b, #fff var(--ink-lift)); } .decision-impact.impact-red > span { background: color-mix(in srgb, #f4dadd var(--tint), var(--surface)); }
.risk-confirmation { align-items: flex-start; background: color-mix(in srgb, #fff2f3 var(--tint), var(--surface)); border: 1px solid color-mix(in srgb, #efd5d8 var(--tint), var(--border)); border-radius: 11px; color: color-mix(in srgb, #8e3d47, #fff var(--ink-lift)); display: flex; font-size: .7rem; gap: 8px; line-height: 1.45; margin-bottom: 13px; padding: 10px; }
.risk-confirmation input { flex: 0 0 auto; margin-top: 2px; }
.empty-state.compact { padding: 32px 20px; }
@media (max-width: 900px) { .audit-filter-bar { grid-template-columns: 1fr 1fr; } .coverage-overview { grid-template-columns: auto 1fr; } .coverage-time { border-left: 0; grid-column: 1 / -1; padding-left: 0; } .coverage-metrics { grid-template-columns: 1fr 1fr; } .coverage-metrics > div:nth-child(2) { border-right: 0; } .coverage-metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); } }
@media (max-width: 600px) { .audit-kpis, .notification-kpis, .audit-filter-bar, .suggestion-grid { grid-template-columns: 1fr; } .notification-row { align-items: flex-start; padding: 15px; } .notification-arrow { display: none; } .coverage-metrics { grid-template-columns: 1fr 1fr; } }

/* Herramientas avanzadas del gestor mensual */
.roster-tools { align-items: center; display: grid; gap: 13px; grid-template-columns: minmax(220px, 1fr) minmax(360px, 2fr) minmax(180px, .7fr); padding: 14px 16px; }
.paint-help { align-items: center; display: flex; gap: 10px; }
.paint-help > span { align-items: center; background: color-mix(in srgb, #e3f3ef var(--tint), var(--surface)); border-radius: 10px; color: var(--accent-ink); display: flex; flex: 0 0 38px; height: 38px; justify-content: center; }
.paint-help strong, .paint-help small { display: block; }
.paint-help strong { color: var(--text); font-size: .72rem; }
.paint-help small { color: var(--text-faint); font-size: .73rem; line-height: 1.4; margin-top: 2px; }
.shift-palette { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.paint-code { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text-soft); display: inline-flex; gap: 5px; min-height: 34px; padding: 5px 8px; transition: .15s ease; }
.paint-code > i:not(.bi) { background: var(--paint-color); border-radius: 4px; height: 11px; width: 11px; }
.paint-code b { color: var(--text); font-size: .7rem; }
.paint-code span { font-size: .72rem; max-width: 75px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paint-code:hover, .paint-code.active { background: color-mix(in srgb, var(--paint-color, #70808c) 10%, var(--surface)); border-color: var(--paint-color, #91a0aa); box-shadow: 0 0 0 2px color-mix(in srgb, var(--paint-color, #70808c) 13%, transparent); transform: translateY(-1px); }
.paint-clear { --paint-color: #7a8791; }
.roster-filter { position: relative; }
.roster-filter > i { color: var(--text-faint); left: 11px; position: absolute; top: 50%; transform: translateY(-50%); }
.roster-filter input { padding-left: 32px; }
.paint-status { color: var(--text-muted); font-size: .74rem; grid-column: 2 / -1; }
.paint-status i { color: var(--accent-ink); margin-right: 5px; }
.roster-select.just-painted { box-shadow: inset 0 0 0 3px var(--surface), 0 0 0 2px var(--cell-color); transform: scale(.94); }
.roster-table tr[hidden] { display: none; }

/* Reglas operativas y reporte mensual */
.shift-rules-table { min-width: 1060px; }
.rule-chip-list, .novelty-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rule-chip { align-items: center; background: var(--surface-3); border-radius: 20px; color: var(--text-faint); display: inline-flex; font-size: .72rem; gap: 4px; padding: 4px 7px; }
.rule-chip.enabled { background: color-mix(in srgb, #e4f4ef var(--tint), var(--surface)); color: color-mix(in srgb, #26775f, #fff var(--ink-lift)); }
.rule-chip.request { background: var(--surface-3); color: color-mix(in srgb, #3c6eaa, #fff var(--ink-lift)); }
.hours-filter-bar { align-items: end; display: grid; grid-template-columns: minmax(140px, .7fr) minmax(110px, .5fr) minmax(170px, .8fr) minmax(220px, 1fr) auto auto; }
.hours-report-table { min-width: 980px; }
.novelty-chips span { align-items: center; background: var(--surface-3); border-radius: 7px; color: var(--text-muted); display: inline-flex; font-size: .73rem; gap: 4px; padding: 5px 7px; }
.novelty-chips i { color: var(--accent-ink); }

@media (max-width: 1100px) {
  .roster-tools { grid-template-columns: 1fr; }
  .paint-status { grid-column: auto; }
  .hours-filter-bar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .hours-filter-bar { grid-template-columns: 1fr; }
  .shift-palette { align-items: stretch; display: grid; grid-template-columns: 1fr 1fr; }
  .paint-code span { max-width: 95px; }
}

/* HOS-0026 · Reporte mensual de turnos */
.report-heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.report-filter-card { margin-bottom: 18px; padding: 18px 20px; }
.report-filter-heading { align-items: center; display: flex; gap: 11px; margin-bottom: 15px; }
.report-filter-heading > span { align-items: center; background: color-mix(in srgb, #e4f3f0 var(--tint), var(--surface)); border-radius: 11px; color: var(--accent-ink); display: flex; flex: 0 0 40px; height: 40px; justify-content: center; }
.report-filter-heading strong, .report-filter-heading small { display: block; }
.report-filter-heading strong { color: var(--text); font-size: .76rem; }
.report-filter-heading small { color: var(--text-faint); font-size: .74rem; margin-top: 2px; }
.report-filter-grid { align-items: end; display: grid; gap: 11px; grid-template-columns: 105px 145px minmax(190px, .8fr) minmax(220px, 1fr) auto auto; }
.report-filter-grid label > span { color: var(--text-muted); display: block; font-size: .73rem; font-weight: 800; margin: 0 0 6px 2px; }
.report-filter-grid .form-select { min-height: 42px; }
.report-context-strip { align-items: center; background: linear-gradient(110deg, #0d5555, #133c51); border-radius: 15px; box-shadow: 0 12px 28px rgba(19,65,76,.12); color: white; display: grid; gap: 0; grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; padding: 13px 16px; }
.report-context-strip > div { align-items: center; border-right: 1px solid rgba(255,255,255,.1); display: flex; gap: 10px; min-width: 0; padding: 3px 15px; }
.report-context-strip > div:last-child { border-right: 0; }
.report-context-strip > div > i { color: #70d8c6; font-size: 1rem; }
.report-context-strip small, .report-context-strip strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-context-strip small { color: #92c5c2; font-size: .71rem; }
.report-context-strip strong { font-size: .66rem; margin-top: 2px; }
.report-generated { justify-self: stretch; }
.report-kpi-grid { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 18px; }
.report-kpi { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 15px; box-shadow: 0 8px 22px rgba(24,54,74,.05); display: flex; gap: 11px; min-width: 0; padding: 16px; }
.report-kpi > span { align-items: center; border-radius: 11px; display: flex; flex: 0 0 40px; font-size: .95rem; height: 40px; justify-content: center; }
.report-kpi > div { min-width: 0; }
.report-kpi small, .report-kpi strong, .report-kpi em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-kpi small { color: var(--text-faint); font-size: .72rem; font-weight: 750; }
.report-kpi strong { color: var(--text-strong); font-size: 1.22rem; line-height: 1.1; margin-top: 4px; }
.report-kpi em { color: var(--text-faint); font-size: .70rem; font-style: normal; margin-top: 4px; }
.report-kpi.teal > span { background: color-mix(in srgb, #e0f2ee var(--tint), var(--surface)); color: color-mix(in srgb, #197a68, #fff var(--ink-lift)); } .report-kpi.blue > span { background: color-mix(in srgb, #e7effa var(--tint), var(--surface)); color: color-mix(in srgb, #3f70a9, #fff var(--ink-lift)); } .report-kpi.amber > span { background: color-mix(in srgb, #fff0d5 var(--tint), var(--surface)); color: color-mix(in srgb, #aa741b, #fff var(--ink-lift)); } .report-kpi.green > span { background: color-mix(in srgb, #e3f4e9 var(--tint), var(--surface)); color: color-mix(in srgb, #32805b, #fff var(--ink-lift)); } .report-kpi.coral > span { background: var(--coral-tint); color: var(--coral-ink); } .report-kpi.purple > span { background: color-mix(in srgb, #eee9f8 var(--tint), var(--surface)); color: color-mix(in srgb, #7256a6, #fff var(--ink-lift)); } .report-kpi.gray > span { background: var(--surface-3); color: var(--text-muted); }
.report-insight-card { overflow: hidden; }
.insight-total, .report-row-count { background: var(--surface-3); border-radius: 20px; color: var(--text-muted); font-size: .73rem; font-weight: 800; padding: 7px 9px; }
.shift-distribution-list { display: grid; gap: 13px; padding: 18px 21px 21px; }
.shift-distribution-row { align-items: center; display: grid; gap: 11px; grid-template-columns: 35px minmax(0, 1fr); }
.distribution-code { align-items: center; background: color-mix(in srgb, var(--report-color) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--report-color) 35%, var(--surface)); border-radius: 9px; color: color-mix(in srgb, var(--report-color) 78%, var(--text)); display: flex; font-size: .66rem; font-weight: 950; height: 34px; justify-content: center; width: 34px; }
.distribution-copy { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.distribution-copy strong { color: var(--text-soft); font-size: .7rem; }
.distribution-copy span { color: var(--text-faint); font-size: .71rem; }
.distribution-track { background: var(--surface-3); border-radius: 20px; height: 5px; margin-top: 6px; overflow: hidden; }
.distribution-track i { background: var(--report-color); border-radius: inherit; display: block; height: 100%; min-width: 5px; }
.report-mini-empty { align-items: center; color: var(--text-faint); display: flex; font-size: .7rem; gap: 8px; justify-content: center; min-height: 150px; padding: 24px; }
.report-mini-empty i { color: color-mix(in srgb, #50a997, #fff var(--ink-lift)); font-size: 1.05rem; }
.report-mini-empty.compact { min-height: 70px; }
.report-novelty-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); padding: 17px 18px 14px; }
.report-novelty-grid > div { background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; min-width: 0; padding: 11px; }
.novelty-icon { align-items: center; border-radius: 8px; display: flex; font-size: .7rem; height: 28px; justify-content: center; margin-bottom: 8px; width: 28px; }
.novelty-icon.rest { background: var(--surface-3); color: var(--text-muted); } .novelty-icon.permission { background: color-mix(in srgb, #e6effa var(--tint), var(--surface)); color: color-mix(in srgb, #4775a5, #fff var(--ink-lift)); } .novelty-icon.vacation { background: color-mix(in srgb, #fff1d9 var(--tint), var(--surface)); color: color-mix(in srgb, #af771b, #fff var(--ink-lift)); }
.report-novelty-grid small, .report-novelty-grid strong, .report-novelty-grid em { display: block; }
.report-novelty-grid small { color: var(--text-faint); font-size: .71rem; }
.report-novelty-grid strong { color: var(--text); font-size: 1rem; margin-top: 3px; }
.report-novelty-grid em { color: var(--text-faint); font-size: .69rem; font-style: normal; margin-top: 1px; }
.report-status-list { align-items: center; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px; padding: 13px 18px 17px; }
.report-status-heading { color: var(--text-muted); flex-basis: 100%; font-size: .71rem; font-weight: 850; margin-bottom: 3px; text-transform: uppercase; }
.report-status-list > span:not(.report-status-heading) { align-items: center; background: var(--surface-3); border-radius: 20px; color: var(--text-muted); display: inline-flex; font-size: .70rem; gap: 5px; padding: 5px 7px; }
.report-status-list > span:not(.report-status-heading) i { background: #60a996; border-radius: 50%; height: 5px; width: 5px; }
.report-status-list b { color: var(--text); }
.report-table-card { overflow: hidden; }
.shift-report-table { min-width: 1280px; }
.shift-report-table td { vertical-align: middle; }
.report-person { align-items: center; display: flex; gap: 9px; min-width: 190px; }
.report-person > span { align-items: center; background: color-mix(in srgb, #e0efec var(--tint), var(--surface)); border-radius: 10px; color: var(--accent-ink); display: flex; flex: 0 0 35px; font-size: .68rem; font-weight: 900; height: 35px; justify-content: center; }
.report-person strong, .report-person small { display: block; }
.report-person strong { color: var(--text); font-size: .68rem; }
.report-person small { color: var(--text-faint); font-size: .71rem; margin-top: 3px; }
.report-shift-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 145px; }
.report-shift-chips > span { align-items: center; background: color-mix(in srgb, var(--chip-color) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--chip-color) 28%, var(--surface)); border-radius: 7px; color: var(--text-muted); display: inline-flex; font-size: .70rem; gap: 3px; padding: 4px 6px; }
.report-shift-chips b { color: color-mix(in srgb, var(--chip-color) 80%, var(--text)); }
.report-shift-chips small, .report-assignment-total { color: var(--text-faint); font-size: .70rem; }
.report-assignment-total { display: block; margin-top: 5px; }
.report-hours { color: var(--text-soft); font-size: .7rem; white-space: nowrap; }
.review-note { color: var(--text-muted); display: block; font-size: .69rem; margin-top: 3px; }
.report-difference { border-radius: 7px; display: inline-block; font-size: .66rem; padding: 5px 7px; white-space: nowrap; }
.report-difference.negative { background: color-mix(in srgb, #fbe9eb var(--tint), var(--surface)); color: color-mix(in srgb, #b34653, #fff var(--ink-lift)); } .report-difference.positive { background: color-mix(in srgb, #e5f4ee var(--tint), var(--surface)); color: color-mix(in srgb, #27775e, #fff var(--ink-lift)); } .report-difference.neutral { background: var(--surface-3); color: var(--text-muted); }
.report-novelty-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 160px; }
.report-novelty-chips > span { background: var(--surface-3); border-radius: 6px; color: var(--text-muted); font-size: .69rem; padding: 4px 5px; }
.report-novelty-chips i { color: var(--accent-ink); margin-right: 3px; }
.report-novelty-chips small { color: var(--text-faint); font-size: .70rem; }
.report-status-badge { font-size: .71rem; padding: 6px 8px; }
.report-detail-button { align-items: center; background: var(--surface-3); border: 0; border-radius: 8px; color: var(--text-muted); display: flex; height: 30px; justify-content: center; transition: .15s ease; width: 30px; }
.report-detail-button:hover { background: color-mix(in srgb, #def0eb var(--tint), var(--surface)); color: var(--accent-ink); }
.report-detail-button[aria-expanded="true"] i { transform: rotate(180deg); }
.report-detail-button i { transition: transform .18s ease; }
.report-detail-row > td { background: var(--surface-2) !important; border-bottom: 0; padding: 0 !important; }
.report-assignment-detail { border-bottom: 1px solid var(--border); padding: 16px 20px 20px; }
.report-detail-title { align-items: center; display: flex; gap: 9px; margin-bottom: 13px; }
.report-detail-title > span { align-items: center; background: color-mix(in srgb, #e1f1ed var(--tint), var(--surface)); border-radius: 9px; color: var(--accent-ink); display: flex; height: 33px; justify-content: center; width: 33px; }
.report-detail-title strong, .report-detail-title small { display: block; }
.report-detail-title strong { color: var(--text-soft); font-size: .67rem; }
.report-detail-title small { color: var(--text-faint); font-size: .71rem; margin-top: 2px; }
.report-assignment-grid { display: grid; gap: 7px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.report-assignment-grid article { align-items: center; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--assignment-color); border-radius: 9px; display: grid; gap: 7px; grid-template-columns: 30px 28px minmax(0, 1fr) auto; min-width: 0; padding: 8px; }
.report-assignment-grid time { color: var(--text-soft); font-size: .7rem; font-weight: 900; text-align: center; }
.report-assignment-grid time small { color: var(--text-faint); display: block; font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.report-assignment-grid article > span { align-items: center; background: color-mix(in srgb, var(--assignment-color) 14%, var(--surface)); border-radius: 7px; color: color-mix(in srgb, var(--assignment-color) 78%, var(--text)); display: flex; font-size: .73rem; height: 27px; justify-content: center; width: 27px; }
.report-assignment-grid article > div { min-width: 0; }
.report-assignment-grid article > div strong, .report-assignment-grid article > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-assignment-grid article > div strong { color: var(--text-soft); font-size: .73rem; }
.report-assignment-grid article > div small { color: var(--text-faint); font-size: .68rem; margin-top: 2px; }
.report-assignment-grid em { background: var(--surface-3); border-radius: 20px; color: var(--text-muted); font-size: .67rem; font-style: normal; padding: 4px 6px; white-space: nowrap; }
.report-empty-state { flex-direction: column; gap: 4px; padding: 54px 20px; }
.report-empty-state > span { align-items: center; background: color-mix(in srgb, #e2f2ee var(--tint), var(--surface)); border-radius: 14px; color: var(--accent-ink); display: flex; font-size: 1.2rem; height: 48px; justify-content: center; margin-bottom: 8px; width: 48px; }
.report-empty-state strong { color: var(--text-soft); font-size: .75rem; }
.report-empty-state small { color: var(--text-faint); font-size: .7rem; }
.report-document-footer { align-items: center; background: var(--surface-2); border-top: 1px solid var(--border); color: var(--text-faint); display: flex; font-size: .70rem; justify-content: space-between; padding: 11px 18px; }

@media (max-width: 1250px) {
  .report-filter-grid { grid-template-columns: 110px 150px 1fr 1fr; }
  .report-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .report-assignment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .report-filter-grid { grid-template-columns: 1fr 1fr; }
  .report-context-strip { grid-template-columns: 1fr 1fr; row-gap: 10px; }
  .report-context-strip > div:nth-child(2) { border-right: 0; }
  .report-context-strip > div:nth-child(3), .report-context-strip > div:nth-child(4) { border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; }
  .report-kpi-grid { grid-template-columns: 1fr 1fr; }
  .report-assignment-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .report-page-heading { align-items: flex-start; flex-direction: column; }
  .report-filter-grid, .report-context-strip, .report-kpi-grid { grid-template-columns: 1fr; }
  .report-context-strip > div { border-right: 0; }
  .report-context-strip > div + div { border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; }
  .report-novelty-grid { grid-template-columns: 1fr 1fr 1fr; }
  .report-document-footer { align-items: flex-start; flex-direction: column; gap: 4px; }
}

@media print {
  @page { margin: 12mm; size: landscape; }
  body { background: white !important; color: #243746; }
  .sidebar, .topbar, .no-print { display: none !important; }
  .app-shell, .app-content { display: block !important; margin: 0 !important; min-height: auto !important; width: 100% !important; }
  .page-content { padding: 0 !important; }
  .page-heading { margin-bottom: 12px; }
  .page-heading h1 { font-size: 20px; }
  .report-context-strip { box-shadow: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .report-kpi-grid { gap: 7px; margin-bottom: 10px; }
  .report-kpi { box-shadow: none; padding: 10px; }
  .report-kpi > span { height: 30px; width: 30px; }
  .report-kpi strong { font-size: 14px; }
  .report-insight-card { box-shadow: none; }
  .shift-report-table { font-size: 8px; min-width: 0; width: 100%; }
  .shift-report-table th, .shift-report-table td { padding: 6px !important; }
  .report-table-card, .report-kpi, .report-insight-card { break-inside: avoid; }
  .report-document-footer { margin-top: 8px; }
}

/* --- Cobertura en la matriz de turnos (HOS 03-0011 / 06-0004) --- */
.coverage-banner { --state: #94a3b8; }
.coverage-banner.cov-level-green { --state: #16a34a; }
.coverage-banner.cov-level-yellow { --state: #d97706; }
.coverage-banner.cov-level-red { --state: #dc2626; }
.coverage-banner-head { align-items: flex-start; display: flex; gap: 12px; }
.coverage-banner-head > i { font-size: 1.3rem; line-height: 1.6rem; }
.coverage-banner.cov-level-green .coverage-banner-head > i { color: color-mix(in srgb, #16a34a, #fff var(--ink-lift)); }
.coverage-banner.cov-level-yellow .coverage-banner-head > i { color: color-mix(in srgb, #d97706, #fff var(--ink-lift)); }
.coverage-banner.cov-level-red .coverage-banner-head > i { color: color-mix(in srgb, #dc2626, #fff var(--ink-lift)); }
.coverage-banner-head small { color: var(--text-muted); display: block; margin-top: 2px; }
.coverage-critical { columns: 2; font-size: .8rem; list-style: none; margin: 10px 0 0; padding: 0; }
.coverage-critical li { break-inside: avoid; margin-bottom: 3px; }
.cov-dot { border-radius: 50%; display: inline-block; height: 8px; margin-right: 5px; width: 8px; }
.cov-dot.cov-red { background: #dc2626; }
.coverage-publish { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.coverage-publish .form-control { flex: 1 1 260px; max-width: 420px; }
.coverage-check { display: flex; gap: 6px; font-size: .85rem; width: 100%; }

.roster-table tfoot td { border-top: 2px solid #cbd5e1; font-weight: 600; position: sticky; bottom: 0; z-index: 3; background: var(--surface-2); }
.roster-coverage-title td { background: var(--surface-3); color: var(--text-soft); font-size: .7rem; text-transform: uppercase; }
.roster-coverage td.roster-person { text-align: left; }
.roster-coverage .roster-cell b { font-size: .72rem; }
td.cov-green  { background: color-mix(in srgb, #dcfce7 var(--tint), var(--surface)) !important; color: var(--text); }
td.cov-yellow { background: color-mix(in srgb, #fef9c3 var(--tint), var(--surface)) !important; color: color-mix(in srgb, #713f12, #fff var(--ink-lift)); }
td.cov-red    { background: color-mix(in srgb, #fee2e2 var(--tint), var(--surface)) !important; color: color-mix(in srgb, #7f1d1d, #fff var(--ink-lift)); }
td.cov-muted  { background: var(--surface-3) !important; color: var(--text-faint); }

/* --- Alternar portal personal / administrativo --- */
.portal-toggle { padding: 0 17px 16px; }
.portal-toggle-btn {
  align-items: center; background: var(--canvas); border: 1px solid var(--line);
  border-radius: 9px; color: var(--text-strong); cursor: pointer; display: flex; font-size: .74rem;
  font-weight: 700; gap: 6px; justify-content: center; padding: 8px 10px; width: 100%;
}
.portal-toggle-btn:hover { background: var(--sage-tint); border-color: color-mix(in srgb, #cfe3d5 var(--tint), var(--border)); color: var(--text-strong); }

/* --- Cierre / reapertura de calendario (HOS 03-0013) --- */
.closed-banner { --state: #64748b; }
.closed-banner .coverage-banner-head > i { color: var(--text-soft); font-size: 1.3rem; }

/* --- Asignación masiva por arrastre (HOS 03-0009) --- */
.roster-table td.roster-cell { user-select: none; -webkit-user-select: none; }

/* --- Guía interactiva (driver.js) con la identidad del sistema --- */
.driver-popover { border-radius: 14px; box-shadow: 0 24px 60px -18px rgba(8,60,58,.45); padding: 18px 18px 14px; max-width: 340px; }
.driver-popover-title { font-size: 1rem; font-weight: 800; color: var(--navy, var(--text-strong)); }
.driver-popover-description { font-size: .88rem; line-height: 1.55; color: var(--text-soft); }
.driver-popover-progress-text { font-size: .72rem; color: var(--text-faint); }
.driver-popover-navigation-btns button.driver-popover-next-btn {
  background: var(--teal, #0F766E); color: #fff; border: 0; border-radius: 9px;
  padding: 7px 14px; font-weight: 700; font-size: .82rem; text-shadow: none;
}
.driver-popover-navigation-btns button.driver-popover-prev-btn {
  background: var(--surface-3); color: var(--text-soft); border: 0; border-radius: 9px;
  padding: 7px 12px; font-weight: 600; font-size: .82rem; text-shadow: none;
}
.driver-popover-close-btn { color: var(--text-faint); }
.driver-popover-arrow { border-width: 8px; }

/* ============================================================
   Semáforo de cobertura — tablero rediseñado (2026-09-06)
   ============================================================ */
.coverage-dash { --state: #94a3b8; }
.coverage-dash.cov-level-green { --state: #16a34a; }
.coverage-dash.cov-level-yellow { --state: #d97706; }
.coverage-dash.cov-level-red { --state: #dc2626; }

.coverage-dash-head { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.coverage-dash-head .eyebrow { color: var(--text-muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.coverage-dash-head h2 { color: var(--navy, var(--text-strong)); font-size: 1.15rem; font-weight: 800; margin: 3px 0 4px; }
.coverage-dash-head small { color: var(--text-muted); display: block; max-width: 62ch; }
.coverage-filter { align-items: center; display: flex; gap: 8px; font-size: .8rem; color: var(--text-soft); font-weight: 600; }
.coverage-filter .form-select { min-width: 180px; }

.coverage-cards { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin: 16px 0 4px; }
.cov-card { align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.cov-card-num { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.cov-card-label { color: var(--text-muted); font-size: .8rem; font-weight: 600; }
 .cov-card-green .cov-card-num  { color: color-mix(in srgb, #15803d, #fff var(--ink-lift)); }
 .cov-card-yellow .cov-card-num { color: color-mix(in srgb, #b45309, #fff var(--ink-lift)); }
 .cov-card-red .cov-card-num    { color: color-mix(in srgb, #b91c1c, #fff var(--ink-lift)); }

.coverage-body { display: grid; gap: 18px; grid-template-columns: minmax(280px, 360px) 1fr; margin-top: 14px; }
.cov-cal-weekdays { color: var(--text-faint); display: grid; font-size: .68rem; font-weight: 700; gap: 4px; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; text-align: center; text-transform: uppercase; }
.cov-cal-grid { display: grid; gap: 4px; grid-template-columns: repeat(7, 1fr); }
.cov-cal-cell { align-items: center; aspect-ratio: 1; background: var(--surface-3); border: 1px solid transparent; border-radius: 9px; color: var(--text-soft); cursor: pointer; display: flex; flex-direction: column; font-size: .78rem; font-weight: 700; justify-content: center; padding: 0; position: relative; transition: transform .12s, box-shadow .12s; }
.cov-cal-cell:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(15,42,68,.3); }
.cov-cal-cell.cov-cal-blank { background: transparent; border: 0; cursor: default; }
.cov-cal-cell.cov-cal-blank:hover { transform: none; box-shadow: none; }
.cov-cal-cell i { font-size: .7rem; line-height: .7rem; }
.cov-cal-cell.cov-green  { background: color-mix(in srgb, #dcfce7 var(--tint), var(--surface)); color: var(--text); }
.cov-cal-cell.cov-yellow { background: color-mix(in srgb, #fef9c3 var(--tint), var(--surface)); color: color-mix(in srgb, #713f12, #fff var(--ink-lift)); }
.cov-cal-cell.cov-red    { background: color-mix(in srgb, #fee2e2 var(--tint), var(--surface)); color: color-mix(in srgb, #7f1d1d, #fff var(--ink-lift)); border-color: #fca5a5; }
.cov-cal-cell.cov-muted  { background: var(--surface-3); color: var(--text-faint); }
.cov-cal-cell.is-weekend:not(.cov-red):not(.cov-yellow):not(.cov-green) { background: var(--surface-3); }

.coverage-critical-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cov-crit-head { align-items: center; background: var(--surface); border-bottom: 1px solid var(--border); color: var(--text); display: flex; font-size: .82rem; font-weight: 800; gap: 8px; padding: 10px 14px; }
.cov-crit-head i { color: color-mix(in srgb, #dc2626, #fff var(--ink-lift)); }
.cov-crit-badge { background: color-mix(in srgb, #fee2e2 var(--tint), var(--surface)); border-radius: 20px; color: color-mix(in srgb, #b91c1c, #fff var(--ink-lift)); font-size: .72rem; margin-left: auto; padding: 1px 9px; }
.cov-crit-list { list-style: none; margin: 0; max-height: 260px; overflow-y: auto; padding: 6px; }
.cov-crit-item { align-items: center; border-radius: 9px; display: grid; gap: 10px; grid-template-columns: 40px 1fr auto; padding: 7px 8px; }
.cov-crit-item + .cov-crit-item { border-top: 1px solid var(--border); }
.cov-crit-item:hover { background: var(--surface-2); }
.cov-crit-date { align-items: center; background: color-mix(in srgb, #fff1f2 var(--tint), var(--surface)); border-radius: 8px; color: color-mix(in srgb, #b91c1c, #fff var(--ink-lift)); display: flex; flex-direction: column; line-height: 1; padding: 5px 0; text-align: center; }
.cov-crit-date b { font-size: .95rem; }
.cov-crit-date small { font-size: .73rem; text-transform: uppercase; }
.cov-crit-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cov-crit-tag { background: color-mix(in srgb, var(--tag) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tag) 35%, var(--surface)); border-radius: 20px; color: var(--text); font-size: .68rem; font-weight: 700; padding: 1px 8px; }
.cov-crit-btn { background: #0f766e; border: 0; border-radius: 8px; color: #fff; font-size: .7rem; font-weight: 700; padding: 5px 10px; white-space: nowrap; }
.cov-crit-btn:hover { background: #0b5b54; }
.cov-crit-empty { align-items: center; color: color-mix(in srgb, #16a34a, #fff var(--ink-lift)); display: flex; font-size: .82rem; font-weight: 600; gap: 8px; justify-content: center; padding: 26px 12px; }

@media (max-width: 900px) {
  .coverage-cards { grid-template-columns: 1fr; }
  .coverage-body { grid-template-columns: 1fr; }
}

/* Panel lateral de detalle del día */
.coverage-detail { width: 400px; max-width: 92vw; }
.cov-detail-eyebrow { color: var(--text-faint); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.coverage-detail .offcanvas-title { color: var(--navy, var(--text-strong)); font-size: 1.05rem; font-weight: 800; }
.cov-d-table { border-collapse: collapse; font-size: .8rem; width: 100%; }
.cov-d-table th { background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: .66rem; font-weight: 800; padding: 7px 8px; text-align: left; text-transform: uppercase; }
.cov-d-table td { border-bottom: 1px solid var(--border); padding: 8px; }
.cov-d-table td.num, .cov-d-table th.num { text-align: center; }
.cov-d-code { background: var(--c); border-radius: 6px; color: #fff; font-size: .68rem; font-weight: 800; padding: 1px 6px; }
.cov-d-crit td { background: color-mix(in srgb, #fef2f2 var(--tint), var(--surface)); }
.cov-d-sub td:first-child { color: var(--text-muted); font-size: .74rem; font-style: italic; }
.cov-d-pill { border-radius: 20px; font-size: .66rem; font-weight: 800; padding: 2px 9px; }
.cov-d-pill-ok   { background: color-mix(in srgb, #dcfce7 var(--tint), var(--surface)); color: color-mix(in srgb, #15803d, #fff var(--ink-lift)); }
.cov-d-pill-warn { background: color-mix(in srgb, #fef9c3 var(--tint), var(--surface)); color: color-mix(in srgb, #b45309, #fff var(--ink-lift)); }
.cov-d-pill-crit { background: color-mix(in srgb, #fee2e2 var(--tint), var(--surface)); color: color-mix(in srgb, #b91c1c, #fff var(--ink-lift)); }
.cov-d-tips { background: color-mix(in srgb, #fffbeb var(--tint), var(--surface)); border: 1px solid #fde68a; border-radius: 10px; margin-top: 16px; padding: 12px 14px; }
.cov-d-tips strong { color: color-mix(in srgb, #92400e, #fff var(--ink-lift)); display: block; font-size: .82rem; margin-bottom: 6px; }
.cov-d-tips i { color: color-mix(in srgb, #d97706, #fff var(--ink-lift)); }
.cov-d-tips ul { color: var(--text-muted); font-size: .78rem; line-height: 1.5; margin: 0; padding-left: 18px; }
.cov-d-ok { align-items: center; background: color-mix(in srgb, #f0fdf4 var(--tint), var(--surface)); border: 1px solid color-mix(in srgb, #bbf7d0 var(--tint), var(--border)); border-radius: 10px; color: color-mix(in srgb, #15803d, #fff var(--ink-lift)); display: flex; font-size: .82rem; font-weight: 600; gap: 8px; margin-top: 16px; padding: 12px 14px; }

/* --- Personal sugerido al planificar (HOS 03-0012) --- */
.cov-d-people { background: var(--surface-3); border: 1px solid #bfdbfe; border-radius: 10px; margin-top: 16px; padding: 12px 14px; }
.cov-d-people > strong { color: color-mix(in srgb, #1e40af, #fff var(--ink-lift)); display: block; font-size: .82rem; margin-bottom: 8px; }
.cov-d-people > strong i { color: color-mix(in srgb, #2563eb, #fff var(--ink-lift)); }
.cov-d-people-shift { margin-top: 6px; }
.cov-d-people ul { list-style: none; margin: 4px 0 10px; padding: 0; }
.cov-d-people li { align-items: baseline; border-bottom: 1px solid color-mix(in srgb, #dbeafe var(--tint), var(--border)); display: flex; flex-wrap: wrap; gap: 6px; padding: 5px 0; }
.cov-d-people li:last-child { border-bottom: 0; }
.cov-d-person { font-size: .8rem; font-weight: 600; }
.cov-d-person small { color: var(--text-muted); font-weight: 400; }
.cov-d-person-score { background: color-mix(in srgb, #dbeafe var(--tint), var(--surface)); border-radius: 20px; color: color-mix(in srgb, #1e40af, #fff var(--ink-lift)); font-size: .68rem; font-weight: 800; margin-left: auto; padding: 1px 8px; }
.cov-d-person-why { color: var(--text-muted); flex-basis: 100%; font-size: .72rem; }

/* --- Panel de conflictos de jornada (HOS 03-0010) --- */
.conflict-panel { --state: #d97706; }
.conflict-panel-head { align-items: flex-start; color: color-mix(in srgb, #92400e, #fff var(--ink-lift)); display: flex; gap: 12px; }
.conflict-panel-head > i { font-size: 1.3rem; }
.conflict-panel-head small { color: var(--text-muted); display: block; margin-top: 2px; max-width: 70ch; }
.conflict-list { font-size: .82rem; list-style: none; margin: 12px 0 0; padding: 0; }
.conflict-list li { border-top: 1px solid var(--border); color: var(--text); padding: 7px 0; }
.conflict-list li:first-child { border-top: 0; }
.conflict-tag { border-radius: 20px; font-size: .72rem; font-weight: 700; margin-right: 8px; padding: 2px 9px; }
.conflict-tag.conflict-rest { background: color-mix(in srgb, #fee2e2 var(--tint), var(--surface)); color: color-mix(in srgb, #b91c1c, #fff var(--ink-lift)); }
.conflict-tag.conflict-consecutive { background: color-mix(in srgb, #fef3c7 var(--tint), var(--surface)); color: color-mix(in srgb, #b45309, #fff var(--ink-lift)); }
.conflict-tag.conflict-weekly_hours { background: color-mix(in srgb, #e0e7ff var(--tint), var(--surface)); color: color-mix(in srgb, #4338ca, #fff var(--ink-lift)); }

/* --- Sugerencias con IA + análisis de carga (HOS 03-0012 / 06-0002) --- */
.suggestion-score { background: #0f766e; border-radius: 20px; color: #fff; font-size: .68rem; font-weight: 700; padding: 1px 7px; vertical-align: middle; }
.load-outliers { align-items: flex-start; background: var(--surface-3); border: 1px solid #c7d2fe; border-radius: 10px; color: color-mix(in srgb, #3730a3, #fff var(--ink-lift)); display: flex; font-size: .8rem; gap: 8px; margin-top: 12px; padding: 10px 12px; }
.load-outliers i { color: color-mix(in srgb, #4f46e5, #fff var(--ink-lift)); font-size: 1rem; }

/* ============================================================
   CAPA DE DISEÑO 2026 · identidad visual, estados y microinteracciones
   (va al final para imponerse sobre los estilos base; no toca la lógica)
   ============================================================ */

/* --- Base --- */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--accent-soft-2); color: var(--text-strong); }
* { scrollbar-color: var(--surface-4) transparent; scrollbar-width: thin; }
a { color: var(--accent-ink); }
.text-secondary { color: var(--text-muted) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-dark:not(.badge):not(.btn) { color: var(--text-strong) !important; }
.bg-white { background-color: var(--surface) !important; }
.bg-light { background-color: var(--surface-2) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--border) !important; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* Transición suave SOLO al cambiar de tema (la activa theme.js unos ms) */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
    transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), fill .35s, box-shadow .35s !important;
}

/* Fondo con luz ambiental: dos halos suaves (teal y azul) dan profundidad sin ruido */
.app-body, .kiosk-shell {
    background:
        radial-gradient(1100px 520px at 88% -12%, var(--glow-1), transparent 62%),
        radial-gradient(900px 480px at -8% -6%, var(--glow-2), transparent 58%),
        var(--bg);
    background-attachment: fixed;
}

.page-heading h1, .auth-card h1, .metric-value, .card-header-clean h2,
.brand-link strong, .document-lookup-copy h1, .welcome-banner h1, .topbar-title,
.document-verdict h2, .document-search-card h2, .kiosk-clock, .password-gate-visual h1,
.next-shift-card h2, .auth-showcase h2 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
}

/* --- Barra lateral flotante --- */
.sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--border); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); }
@media (min-width: 992px) {
    .sidebar { border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow); height: calc(100vh - 28px); left: 14px; overflow: hidden; top: 14px; }
    .app-content { margin-left: calc(var(--sidebar) + 14px); width: calc(100% - var(--sidebar) - 14px); }
}
@media (max-width: 991.98px) { .sidebar { background: var(--surface); } }
.sidebar-brand { padding: 22px 20px 16px; }
.brand-link { color: var(--text-strong); }
.brand-link strong { font-size: 1.14rem; font-weight: 600; }
.brand-link small { color: var(--text-muted); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.brand-mark {
    background: linear-gradient(140deg, #1B4A6B 0%, #0B6E6A 55%, #14A38F 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 22px -8px rgba(0,121,107,.55);
    position: relative;
}
.sidebar .brand-mark::after { background: #7FE8D6; border: 2px solid var(--surface); border-radius: 50%; content: ""; height: 11px; position: absolute; right: -3px; top: -3px; width: 11px; }
.sidebar-nav { padding: 4px 12px 10px; }
.nav-caption { color: var(--text-faint); font-size: .7rem; letter-spacing: .14em; margin: 20px 12px 8px; }
.nav-item { border-radius: 12px; color: var(--text-soft); font-size: .86rem; padding: 7px 10px; transition: background .2s var(--ease), color .2s var(--ease); }
.nav-item i { border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255,255,255,.22); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.nav-item:hover { background: var(--surface-3); color: var(--text-strong); }
.nav-item:hover i { transform: translateX(1px) scale(1.06); }
.nav-item.active { background: linear-gradient(90deg, var(--accent-soft-2), var(--accent-soft) 60%, transparent); color: var(--text-strong); }
.nav-item.active::before { background: var(--accent-ink); border-radius: 0 4px 4px 0; content: ""; height: 20px; left: -12px; position: absolute; top: 50%; transform: translateY(-50%); width: 4px; }
.nav-item.active i { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -6px rgba(0,0,0,.45); }
.nav-count { background: var(--coral); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 22%, transparent); }
.sidebar-profile { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; margin: 8px 12px 10px; padding: 11px 12px; }
.avatar { background: linear-gradient(140deg, #F7C75E, #E9A53A); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); color: #3A2A06; }
.profile-copy strong { color: var(--text-strong); }
.sidebar-profile-link:hover .profile-copy strong { color: var(--accent-ink); }
.portal-toggle { padding: 0 12px 14px; }
.portal-toggle-btn { background: transparent; border: 1px dashed var(--border-strong); border-radius: 12px; color: var(--text-soft); transition: .2s var(--ease); }
.portal-toggle-btn:hover { background: var(--accent-soft); border-color: var(--accent-ink); border-style: solid; color: var(--accent-ink); }

/* --- Barra superior de vidrio --- */
.topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--border); height: 74px; padding: 0 32px; -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); }
.topbar-kicker { align-items: center; color: var(--text-faint); display: flex; gap: 6px; font-size: .7rem; }
.topbar-kicker { display: none !important; }
.topbar-title { color: var(--text-strong); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.topbar-actions { gap: 10px; }
.status-dot { background: color-mix(in srgb, var(--success) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 24%, var(--border)); color: color-mix(in srgb, var(--success) 80%, var(--text-strong)); }
.status-dot i { animation: pulse-dot 2.4s ease-out infinite; background: var(--success); }
@keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 45%, transparent); } 80%, 100% { box-shadow: 0 0 0 7px transparent; } }
.icon-button { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); color: var(--text-soft); cursor: pointer; height: 40px; transition: transform .18s var(--ease), border-color .18s, color .18s, box-shadow .18s, background .18s; width: 40px; }
.icon-button:hover { background: var(--surface); border-color: color-mix(in srgb, var(--accent-ink) 45%, var(--border)); box-shadow: 0 8px 18px -10px var(--ring); color: var(--accent-ink); transform: translateY(-1px); }
.icon-button:active { transform: translateY(0) scale(.95); }
.sidebar .icon-button { background: var(--surface); border-color: var(--border); color: var(--text-muted); }
.notification-button > span { border-color: var(--surface); box-shadow: 0 4px 10px -3px rgba(239,93,104,.6); }

/* Interruptor de tema */
.theme-toggle { align-items: center; background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px; box-shadow: inset 0 1px 2px rgba(15,23,42,.08); cursor: pointer; display: inline-flex; flex: 0 0 auto; height: 40px; padding: 4px; position: relative; transition: background .3s var(--ease), border-color .3s; width: 72px; }
.theme-toggle:hover { border-color: color-mix(in srgb, var(--accent-ink) 45%, var(--border)); }
.theme-toggle-track { align-items: center; color: var(--text-faint); display: flex; font-size: .72rem; inset: 0; justify-content: space-between; padding: 0 11px; pointer-events: none; position: absolute; }
.theme-toggle-thumb { align-items: center; background: var(--surface); border-radius: 50%; box-shadow: 0 2px 6px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.6); display: flex; height: 30px; justify-content: center; position: relative; transition: transform .32s cubic-bezier(.23, 1, .32, 1), background .3s; width: 30px; z-index: 1; }
.theme-toggle-thumb i { font-size: .9rem; position: absolute; transition: opacity .25s, transform .38s var(--ease); }
.theme-toggle-thumb .bi-sun-fill { color: #E9A12B; }
.theme-toggle-thumb .bi-moon-stars-fill { color: #FBBF24; opacity: 0; transform: rotate(-70deg) scale(.6); }
[data-theme="dark"] .theme-toggle-thumb { background: #243552; box-shadow: 0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); transform: translateX(32px); }
[data-theme="dark"] .theme-toggle-thumb .bi-sun-fill { opacity: 0; transform: rotate(70deg) scale(.6); }
[data-theme="dark"] .theme-toggle-thumb .bi-moon-stars-fill { opacity: 1; transform: none; }
.theme-toggle-floating { position: fixed; right: 18px; top: 18px; z-index: 1040; }

/* --- Contenido y encabezados --- */
.page-content { padding: 30px 34px 56px; }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.page-heading { margin-bottom: 28px; }
.page-heading h1 { color: var(--text-strong); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; }
.page-heading p { color: var(--text-muted); }
.eyebrow { align-items: center; color: var(--text-muted); display: inline-flex; font-weight: 700; gap: 8px; letter-spacing: .08em; }

/* --- Tarjetas --- */
.app-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transition: box-shadow .25s var(--ease), border-color .25s var(--ease); }
.app-card::before { background: var(--brand-line); border-radius: 0 0 2px 2px; height: 2px; left: 20px; right: 20px; }
.app-card:hover { border-color: var(--border-strong); }
.card-header-clean { border-bottom: 1px solid var(--border); padding: 20px 24px; }
.card-header-clean h2 { color: var(--text-strong); font-size: 1.1rem; font-weight: 600; }
.card-body-pad { padding: 24px; }
.form-footer { background: var(--surface-2); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }

/* Tarjetas interactivas con elevación */
.area-card, .role-card, .request-kpi, .report-kpi, .cov-card {
    background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.area-card:hover, .role-card:hover, .request-kpi:hover, .report-kpi:hover, .cov-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); transform: translateY(-3px); }

/* Indicadores: color propio por tipo (--m), halo en la esquina e ícono en placa */
.metric-card { --m: var(--accent-ink); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-sm); isolation: isolate; overflow: hidden; padding: 20px 22px 18px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.metric-card.navy { --m: var(--primary-ink); }
.metric-card.amber { --m: #C98208; }
.metric-card.coral { --m: var(--coral); }
[data-theme="dark"] .metric-card.amber { --m: var(--warning); }
.metric-card.teal, .metric-card.amber, .metric-card.coral, .metric-card.navy { border-left-color: var(--border); }
.metric-card::before { background: var(--m); border-radius: 0 0 4px 4px; content: ""; height: 3px; left: 22px; position: absolute; top: 0; transition: width .35s var(--ease); width: 36px; }
.metric-card:hover { border-color: color-mix(in srgb, var(--m) 35%, var(--border)); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.metric-card:hover::before { width: 64px; }
.metric-icon, .metric-card.teal .metric-icon, .metric-card.amber .metric-icon, .metric-card.coral .metric-icon, .metric-card.navy .metric-icon {
    background: color-mix(in srgb, var(--m) 13%, transparent); border-radius: 12px; color: var(--m); font-size: 1.05rem; height: 40px; margin-bottom: 14px; width: 40px;
}
.metric-label { color: var(--text-muted); font-size: .7rem; letter-spacing: .06em; }
.metric-value { color: var(--text-strong); font-size: 2.15rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.metric-foot { color: var(--text-faint); font-size: .72rem; }

/* Bandas oscuras (bienvenida, próximos turnos, etc.): patrón de puntos como firma */
.welcome-banner, .next-shift-card, .password-gate-visual, .document-lookup-hero, .request-progress-card, .report-context-strip, .security-note, .process-card {
    border: 1px solid rgba(255,255,255,.06);
}
.welcome-banner { background: linear-gradient(120deg, #0B5E59 0%, #0B4A55 48%, #0B3551 100%); border-radius: 24px; padding: 30px 32px; }
.welcome-banner::before { background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.2px); background-size: 18px 18px; content: ""; inset: 0; -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 90%); mask-image: linear-gradient(100deg, transparent 35%, #000 90%); pointer-events: none; position: absolute; }
[data-theme="dark"] .welcome-banner, [data-theme="dark"] .next-shift-card, [data-theme="dark"] .document-lookup-hero, [data-theme="dark"] .password-gate-visual { background: linear-gradient(125deg, #0E4A4E 0%, #12304F 60%, #16203A 100%); box-shadow: var(--shadow-lg); }
.welcome-banner .btn-light, .welcome-actions .btn-light, .next-shift-card .btn-light, .document-lookup-hero .btn-light, .password-gate-visual .btn-light { color: #0B3551; --bs-btn-bg: #fff; --bs-btn-color: #0B3551; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #EAF6F4; --bs-btn-hover-color: #0B3551; --bs-btn-hover-border-color: transparent; }

/* --- Botones --- */
.btn { border-radius: 12px; font-weight: 700; letter-spacing: .005em; padding: .6rem 1.05rem; transition: transform .15s var(--ease), box-shadow .2s var(--ease), background-color .2s, border-color .2s, color .2s; }
.btn:active { transform: translateY(1px) scale(.98); }
.btn:focus-visible { box-shadow: 0 0 0 4px var(--ring) !important; outline: 0; }
.btn-sm { border-radius: 10px; padding: .38rem .75rem; }
.btn-primary {
    --bs-btn-color: var(--btn-primary-ink); --bs-btn-bg: var(--btn-primary); --bs-btn-border-color: var(--btn-primary);
    --bs-btn-hover-color: var(--btn-primary-ink); --bs-btn-hover-bg: var(--btn-primary-hover); --bs-btn-hover-border-color: var(--btn-primary-hover);
    --bs-btn-active-color: var(--btn-primary-ink); --bs-btn-active-bg: var(--btn-primary-hover); --bs-btn-active-border-color: var(--btn-primary-hover);
    --bs-btn-disabled-color: var(--btn-primary-ink); --bs-btn-disabled-bg: var(--btn-primary); --bs-btn-disabled-border-color: var(--btn-primary);
    background-color: var(--bs-btn-bg); background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)); border-color: var(--bs-btn-border-color); color: var(--bs-btn-color);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px -10px var(--btn-primary);
}
.btn-primary:hover, .btn-primary:focus { background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 24px -10px var(--btn-primary); color: var(--bs-btn-hover-color); transform: translateY(-1px); }
.btn-soft { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent-ink) 20%, transparent); color: var(--accent-ink); }
.btn-soft:hover, .btn-soft:focus { background: var(--accent-soft-2); border-color: color-mix(in srgb, var(--accent-ink) 35%, transparent); color: var(--accent-ink); transform: translateY(-1px); }
.btn-light { --bs-btn-bg: var(--surface); --bs-btn-color: var(--text-soft); --bs-btn-border-color: var(--border-strong); --bs-btn-hover-bg: var(--surface-3); --bs-btn-hover-color: var(--text-strong); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-active-bg: var(--surface-3); --bs-btn-active-color: var(--text-strong); --bs-btn-active-border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn-outline-secondary { --bs-btn-color: var(--text-soft); --bs-btn-border-color: var(--border-strong); --bs-btn-hover-bg: var(--surface-3); --bs-btn-hover-color: var(--text-strong); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-active-bg: var(--surface-4); --bs-btn-active-color: var(--text-strong); }
.btn-outline-primary { --bs-btn-color: var(--accent-ink); --bs-btn-border-color: color-mix(in srgb, var(--accent-ink) 50%, transparent); --bs-btn-hover-bg: var(--accent-soft-2); --bs-btn-hover-color: var(--accent-ink); --bs-btn-hover-border-color: var(--accent-ink); --bs-btn-active-bg: var(--accent-soft-2); --bs-btn-active-color: var(--accent-ink); }
.btn-outline-danger { --bs-btn-color: var(--danger); --bs-btn-border-color: color-mix(in srgb, var(--danger) 45%, transparent); --bs-btn-hover-bg: color-mix(in srgb, var(--danger) 12%, transparent); --bs-btn-hover-color: var(--danger); --bs-btn-hover-border-color: var(--danger); --bs-btn-active-bg: color-mix(in srgb, var(--danger) 18%, transparent); --bs-btn-active-color: var(--danger); }
.btn-success { --bs-btn-bg: #2E7D32; --bs-btn-border-color: #2E7D32; --bs-btn-hover-bg: #256B29; --bs-btn-hover-border-color: #256B29; box-shadow: 0 8px 18px -10px #2E7D32; }
.btn-warning { --bs-btn-color: #3A2A06; --bs-btn-bg: #F9A825; --bs-btn-border-color: #F9A825; --bs-btn-hover-bg: #F5B942; --bs-btn-hover-border-color: #F5B942; --bs-btn-hover-color: #3A2A06; --bs-btn-active-color: #3A2A06; box-shadow: 0 8px 18px -10px #F9A825; }
.btn:disabled, .btn.disabled { box-shadow: none; opacity: .5; transform: none; }
.small-link { align-items: center; color: var(--accent-ink); display: inline-flex; gap: 4px; }
.small-link i { transition: transform .2s var(--ease); }
.small-link:hover i { transform: translateX(3px); }

/* --- Formularios --- */
.form-control, .form-select { background-color: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; color: var(--text); transition: border-color .18s, box-shadow .18s, background-color .18s; }
.form-control::placeholder { color: var(--text-faint); }
.form-control:hover:not(:focus):not(:disabled), .form-select:hover:not(:focus):not(:disabled) { border-color: color-mix(in srgb, var(--accent-ink) 35%, var(--border-strong)); }
.form-control:focus, .form-select:focus { background-color: var(--surface); border-color: var(--accent-ink); box-shadow: 0 0 0 4px var(--ring); color: var(--text-strong); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--surface-2); color: var(--text-muted); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 22%, transparent); }
.invalid-feedback, .errorlist { color: var(--danger); font-size: .78rem; font-weight: 600; }
.form-label { color: var(--text-soft); font-size: .8rem; font-weight: 700; }
.form-text { color: var(--text-faint); }
.form-check-input { background-color: var(--surface); border-color: var(--border-strong); cursor: pointer; }
.form-check-input:checked { background-color: var(--btn-primary); border-color: var(--btn-primary); }
.form-check-input:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 4px var(--ring); }
.input-group-text { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-muted); }

/* --- Tablas --- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border); --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: var(--text-strong); --bs-table-striped-bg: var(--surface-2); --bs-table-striped-color: var(--text); color: var(--text); }
.table-app th { background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: .67rem; font-weight: 800; letter-spacing: .09em; white-space: nowrap; }
.table-app td { border-bottom-color: var(--border); color: var(--text); }
.table-app tbody tr { transition: background-color .15s; }
.table-app tbody tr:hover > td { background: color-mix(in srgb, var(--accent-ink) 4%, var(--surface)); }
.table-app strong { color: var(--text-strong); }

/* --- Badges y píldoras --- */
.badge { border-radius: 999px; font-weight: 700; letter-spacing: .01em; padding: .42em .75em; }
.badge-soft { align-items: center; gap: 6px; }
[data-theme="dark"] .text-bg-light { background-color: var(--surface-3) !important; color: var(--text) !important; }
[data-theme="dark"] .text-bg-warning { color: #2A1D03 !important; }

/* --- Alertas y mensajes --- */
.app-alert { animation: alert-in .45s var(--ease) both; background: var(--surface); border: 1px solid color-mix(in srgb, var(--bs-alert-color, var(--accent-ink)) 30%, var(--border)); border-radius: 14px; box-shadow: var(--shadow); color: var(--text); }
.app-alert > i { color: var(--bs-alert-color); font-size: 1.1rem; }
@keyframes alert-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* --- Modales, paneles laterales y menús --- */
.modal-content, .offcanvas, .dropdown-menu, .popover, .toast { background-color: var(--surface); border-color: var(--border); color: var(--text); }
.modal-content { border-radius: 22px; box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer, .offcanvas-header { border-color: var(--border); }
.modal-backdrop.show, .offcanvas-backdrop.show { background: #0B1424; opacity: .55; }
.offcanvas.offcanvas-end { border-left-color: var(--border); border-radius: 22px 0 0 22px; box-shadow: var(--shadow-lg); }
.dropdown-menu { border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; }
.dropdown-item { border-radius: 9px; color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-3); color: var(--text-strong); }
.progress { background-color: var(--surface-3); }

/* --- Estados vacíos --- */
.empty-state { color: var(--text-muted); }
.empty-state > i { align-items: center; background: var(--surface-3); border-radius: 18px; color: var(--text-faint); display: flex; font-size: 1.6rem; height: 58px; justify-content: center; margin: 0 auto 14px; width: 58px; }

/* --- Filas y listas --- */
.request-mini-row, .audit-row { border-radius: 12px; transition: background .18s, padding .18s var(--ease); }
.request-mini-row:hover, .audit-row:hover { background: var(--surface-2); padding-left: 10px; padding-right: 10px; }
.date-tile { background: var(--surface-3); color: var(--text-strong); }
.request-icon { background: var(--accent-soft); color: var(--accent-ink); }
.notification-row:hover { background: var(--surface-2); }
.notification-row.unread { background: linear-gradient(90deg, var(--accent-soft), var(--surface) 55%); box-shadow: none; }

/* --- Acceso --- */
.auth-body { background: var(--surface); }
.auth-input-group input { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.auth-input-group input:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 4px var(--ring); }
.auth-submit { background: linear-gradient(135deg, #0B3551, #0B5E59); box-shadow: 0 12px 24px -12px rgba(11,53,81,.7); transition: transform .15s var(--ease), box-shadow .2s; }
.auth-submit:hover { background: linear-gradient(135deg, #0B3551, #00796B); box-shadow: 0 16px 28px -12px rgba(0,121,107,.7); transform: translateY(-1px); }
.auth-submit:active { transform: scale(.98); }
[data-theme="dark"] .auth-submit { background: var(--btn-primary); color: var(--btn-primary-ink); }
[data-theme="dark"] .auth-submit:hover { background: var(--btn-primary-hover); }
[data-theme="dark"] .auth-error { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); }
.auth-showcase { background: radial-gradient(circle at 15% 10%, rgba(255,255,255,.08), transparent 45%), linear-gradient(155deg, #0B3551 0%, #154466 55%, #005F54 130%); }
[data-theme="dark"] .auth-showcase { background: radial-gradient(circle at 15% 10%, rgba(45,212,191,.10), transparent 45%), linear-gradient(155deg, #101B30 0%, #13304D 55%, #0E4A4E 130%); }

/* --- Guía interactiva --- */
.driver-popover { background-color: var(--surface); border: 1px solid var(--border); color: var(--text); }
.driver-popover-title { color: var(--text-strong); }
.driver-popover-description { color: var(--text-soft); }
.driver-popover-navigation-btns button.driver-popover-next-btn { background: var(--btn-primary); color: var(--btn-primary-ink); }
.driver-popover-navigation-btns button.driver-popover-prev-btn { background: var(--surface-3); color: var(--text-soft); }
.driver-popover-arrow-side-left { border-left-color: var(--surface); }
.driver-popover-arrow-side-right { border-right-color: var(--surface); }
.driver-popover-arrow-side-top { border-top-color: var(--surface); }
.driver-popover-arrow-side-bottom { border-bottom-color: var(--surface); }

/* --- Ajustes finos del modo oscuro (decoraciones y semáforos) --- */
[data-theme="dark"] .role-number { color: var(--surface-4); }
[data-theme="dark"] .roster-empty, [data-theme="dark"] .no-shift, [data-theme="dark"] .personal-no-shift { color: var(--text-faint); }
[data-theme="dark"] .enrollment-thumbnail i { color: var(--surface-4); }
[data-theme="dark"] .area-card.area-inactive { filter: grayscale(.6) brightness(.85); }
[data-theme="dark"] td.cov-green, [data-theme="dark"] .cov-cal-cell.cov-green, [data-theme="dark"] .cov-d-pill-ok { background: rgba(34,197,94,.16) !important; color: #86EFAC; }
[data-theme="dark"] td.cov-yellow, [data-theme="dark"] .cov-cal-cell.cov-yellow, [data-theme="dark"] .cov-d-pill-warn { background: rgba(251,191,36,.16) !important; color: #FCD34D; }
[data-theme="dark"] td.cov-red, [data-theme="dark"] .cov-cal-cell.cov-red, [data-theme="dark"] .cov-d-pill-crit, [data-theme="dark"] .cov-crit-badge { background: rgba(248,113,113,.16) !important; color: #FCA5A5; }
[data-theme="dark"] .cov-cal-cell.cov-red { border-color: rgba(248,113,113,.45); }
[data-theme="dark"] td.cov-muted, [data-theme="dark"] .cov-cal-cell.cov-muted { background: var(--surface-3) !important; color: var(--text-faint); }
[data-theme="dark"] .cov-card-green .cov-card-num { color: #4ADE80; }
[data-theme="dark"] .cov-card-yellow .cov-card-num { color: #FBBF24; }
[data-theme="dark"] .cov-card-red .cov-card-num { color: #F87171; }
[data-theme="dark"] .cov-crit-date { background: rgba(248,113,113,.14); color: #FCA5A5; }
[data-theme="dark"] .cov-d-tips { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.25); }
[data-theme="dark"] .cov-d-tips strong { color: #FCD34D; }
[data-theme="dark"] .cov-d-ok { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); color: #86EFAC; }
[data-theme="dark"] .cov-d-people { background: rgba(56,189,248,.08); border-color: rgba(56,189,248,.25); }
[data-theme="dark"] .cov-d-people > strong, [data-theme="dark"] .cov-d-person-score { color: #7DD3FC; }
[data-theme="dark"] .cov-d-person-score { background: rgba(56,189,248,.16); }
[data-theme="dark"] .cov-d-people li { border-color: rgba(56,189,248,.15); }
[data-theme="dark"] .cov-d-crit td { background: rgba(248,113,113,.08); }
[data-theme="dark"] .conflict-panel-head { color: #FCD34D; }
[data-theme="dark"] .conflict-list li { border-color: var(--border); color: var(--text); }
[data-theme="dark"] .conflict-tag.conflict-rest { background: rgba(248,113,113,.16); color: #FCA5A5; }
[data-theme="dark"] .conflict-tag.conflict-consecutive { background: rgba(251,191,36,.16); color: #FCD34D; }
[data-theme="dark"] .conflict-tag.conflict-weekly_hours { background: rgba(129,140,248,.18); color: #C7D2FE; }
[data-theme="dark"] .load-outliers { background: rgba(129,140,248,.1); border-color: rgba(129,140,248,.3); color: #C7D2FE; }
[data-theme="dark"] .roster-table tfoot td { border-top-color: var(--border-strong); }

[data-theme="dark"] .closed-banner .coverage-banner-head > i { color: var(--text-muted); }
[data-theme="dark"] .suggestion-score, [data-theme="dark"] .cov-crit-btn { background: var(--btn-primary); color: var(--btn-primary-ink); }

@media (max-width: 991.98px) {
    .topbar { height: 66px; padding: 0 16px; }
    .page-content { padding: 22px 16px 44px; }
}
@media (max-width: 575.98px) {
    .topbar-actions { gap: 7px; }
    .theme-toggle { width: 64px; }
    [data-theme="dark"] .theme-toggle-thumb { transform: translateX(24px); }
    .topbar-kicker { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
@media print {
    :root, [data-theme="dark"] { --bg: #fff; --surface: #fff; --surface-2: #f8fafc; --surface-3: #eef2f6; --text: #22364B; --text-strong: #0B3551; --text-soft: #43576C; --text-muted: #66788C; --border: #e5e7eb; --tint: 100%; --ink-lift: 0%; }
    .theme-toggle { display: none !important; }
}
@media (max-width: 575.98px) {
    .topbar { gap: 10px; }
    .topbar > div:not(.topbar-actions) { flex: 1; min-width: 0; }
    .topbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ============================================================
   IDENTIDAD INSTITUCIONAL · Hospital Santa Bárbara + MSPAS
   El logo transparente del hospital se integra directamente con el fondo.
   El del MSPAS tiene versión blanca que se alterna según el tema.
   ============================================================ */
.logo-on-dark { display: none !important; }
[data-theme="dark"] .logo-on-light { display: none !important; }
[data-theme="dark"] .logo-on-dark { display: block !important; }

.brand-logo { align-items: center; background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 14px; box-shadow: 0 6px 16px -8px rgba(11,53,81,.35); display: inline-flex; flex: 0 0 64px; height: 48px; justify-content: center; overflow: hidden; padding: 4px 5px; transition: transform .3s var(--ease); width: 64px; }
.brand-logo img { display: block; height: 100%; object-fit: contain; width: 100%; }
[data-theme="dark"] .brand-logo { border-color: rgba(255,255,255,.12); box-shadow: 0 0 0 3px rgba(45,212,191,.12), 0 8px 18px -8px rgba(0,0,0,.6); }
.brand-link:hover .brand-logo { transform: translateY(-1px) scale(1.04); }
.brand-link strong { font-size: 1.1rem; }

/* Pie institucional */
.app-footer { align-items: center; border-top: 1px solid var(--border); display: flex; gap: 22px; margin: 0 34px; padding: 20px 0 26px; }
.app-footer-logo img { display: block; height: 46px; width: auto; }
.app-footer p { color: var(--text-muted); font-size: .76rem; line-height: 1.5; margin: 0 0 0 auto; text-align: right; }
.app-footer p strong { color: var(--text-soft); }
.app-footer p span { color: var(--text-faint); display: block; font-size: .7rem; }
@media (max-width: 991.98px) { .app-footer { margin: 0 16px; } }
@media (max-width: 640px) { .app-footer { align-items: flex-start; flex-direction: column; gap: 12px; } .app-footer p { margin: 0; text-align: left; } }
@media print { .app-footer { margin: 16px 0 0; padding: 10px 0 0; } .app-footer .logo-on-dark { display: none !important; } .app-footer .logo-on-light { display: block !important; } }

/* Acceso: identidad del hospital y sello del Ministerio */
.auth-identity { margin-bottom: 34px; }
.auth-identity-logo { display: inline-flex; transition: transform .4s var(--ease); }
.auth-identity-logo:hover { transform: translateY(-2px); }
.auth-identity-logo img { display: block; filter: drop-shadow(0 12px 18px rgba(0,0,0,.35)); height: 112px; width: auto; }
.auth-eyebrow { align-items: center; color: #7FE8D6; display: inline-flex; font-size: .7rem; font-weight: 800; gap: 8px; letter-spacing: .14em; margin-bottom: 12px; text-transform: uppercase; }
.auth-eyebrow::before { background: currentColor; border-radius: 2px; content: ""; height: 2px; width: 18px; }
.auth-institution { border-bottom: 1px solid var(--border); margin-bottom: 26px; padding-bottom: 22px; }
.auth-institution img { display: block; height: 68px; max-width: 100%; width: auto; }
/* Para usar una foto de las instalaciones: style="--auth-photo: url('…')" en .auth-showcase */
.auth-showcase[style*="--auth-photo"] { background: linear-gradient(160deg, rgba(11,53,81,.92) 0%, rgba(11,53,81,.78) 45%, rgba(0,95,84,.72) 100%), var(--auth-photo) center / cover no-repeat; }
[data-theme="dark"] .auth-showcase[style*="--auth-photo"] { background: linear-gradient(160deg, rgba(15,23,42,.94) 0%, rgba(19,48,77,.82) 50%, rgba(14,74,78,.78) 100%), var(--auth-photo) center / cover no-repeat; }
@media (max-width: 900px) {
    .auth-identity { margin-bottom: 22px; }
    .auth-identity-logo img { height: 72px; }
    .auth-institution img { height: 46px; }
}


/* --- Fotos de las instalaciones --- */
/* Acceso: carrusel lento con fundido y leve acercamiento (cada foto ~8 s). */
.auth-photos { inset: 0; position: absolute; z-index: 0; }
.auth-photos span { animation: auth-photo calc(var(--n, 2) * 8s) linear infinite; animation-delay: calc(var(--i, 0) * 8s); background: var(--photo) center / cover no-repeat; filter: blur(1.5px) saturate(1.05); inset: -8px; opacity: 0; position: absolute; will-change: opacity, transform; }
.auth-photos span:first-child { opacity: 1; }
@keyframes auth-photo {
    0% { opacity: 0; transform: scale(1.1); }
    6% { opacity: 1; }
    50% { opacity: 1; }
    56% { opacity: 0; }
    100% { opacity: 0; transform: scale(1); }
}
/* Velo de marca: denso a la izquierda (donde va el texto), deja ver la foto a la derecha */
.auth-photos::after {
    background:
        linear-gradient(90deg, rgba(8,38,60,.96) 0%, rgba(11,53,81,.91) 50%, rgba(11,53,81,.66) 80%, rgba(0,95,84,.5) 100%),
        linear-gradient(0deg, rgba(8,30,48,.75) 0%, transparent 35%);
    content: ""; inset: 0; position: absolute;
}
[data-theme="dark"] .auth-photos::after {
    background:
        linear-gradient(90deg, rgba(15,23,42,.97) 0%, rgba(15,23,42,.92) 50%, rgba(19,48,77,.7) 80%, rgba(14,74,78,.6) 100%),
        linear-gradient(0deg, rgba(15,23,42,.8) 0%, transparent 35%);
}
.auth-showcase::after { z-index: 1; }
.auth-showcase-inner { z-index: 2; }
.auth-photo-caption { align-items: center; bottom: 22px; color: rgba(255,255,255,.72); display: flex; font-size: .72rem; font-weight: 600; gap: 7px; left: 52px; margin: 0; position: absolute; z-index: 2; }
.auth-photo-caption i { color: #7FE8D6; }
@media (max-width: 900px) {
    .auth-photos span { background-image: var(--photo-sm); }
    .auth-photo-caption { display: none; }
}

/* Panel principal: la fachada del hospital en duotono dentro del banner */
.welcome-photo { background: var(--photo) center 40% / cover no-repeat; bottom: 0; filter: grayscale(1) contrast(1.1); mix-blend-mode: luminosity; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.9) 55%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.9) 55%, #000 100%); opacity: .32; pointer-events: none; position: absolute; right: 0; top: 0; width: 58%; }
.welcome-banner > div { position: relative; z-index: 2; }
@media (max-width: 767px) { .welcome-photo { opacity: .2; width: 100%; } }

@media (prefers-reduced-motion: reduce) {
    .auth-photos span { animation: none !important; }
    .auth-photos span:not(:first-child) { display: none; }
}
[data-theme="dark"] .welcome-photo { opacity: .2; }

/* ============================================================
   CAPA RESPONSIVE Y DE COMPATIBILIDAD (2026-10)
   Va al final para imponerse sin tocar la lógica. Puntos de quiebre:
     ≤480 móvil pequeño · ≤576 móvil grande · ≤768 tablet · ≤992 laptop
     ≥1200 escritorio · ≥1400 pantalla grande
   Probado en Chromium (Chrome / Edge) y escrito solo con propiedades estándar
   soportadas por Firefox ≥113 y Safari ≥16.2 (con fallbacks abajo).
   ============================================================ */

/* --- Alto real de pantalla en móviles (barra de direcciones de iOS/Android) --- */
.app-body, .app-shell, .app-content { min-height: 100vh; min-height: 100dvh; }
.auth-layout { min-height: 100vh; min-height: 100dvh; }
@media (min-width: 992px) {
    .sidebar { height: calc(100vh - 28px); height: calc(100dvh - 28px); }
}
@media (max-width: 991.98px) {
    .sidebar { height: 100vh; height: 100dvh; }
}
/* iOS ignora background-attachment: fixed y provoca saltos; en táctiles se desactiva */
@media (hover: none) {
    .app-body, .kiosk-shell { background-attachment: scroll; }
}
img, svg, video { max-width: 100%; }
img { height: auto; }

/* --- Textos: nunca desbordar el contenedor --- */
.page-heading h1, .card-header-clean h2, .area-card h2, .role-card h2 { overflow-wrap: break-word; }
.page-heading p, .app-card p, .empty-state { overflow-wrap: break-word; }
.card-header-clean { flex-wrap: wrap; gap: 8px 16px; }
.card-header-clean > div { min-width: 0; }

/* --- Encabezados de página: las acciones pasan abajo cuando no caben --- */
.page-heading { flex-wrap: wrap; }
.page-heading > div:first-child { flex: 1 1 340px; min-width: 0; }
.page-heading .d-flex { flex-wrap: wrap; }
@media (max-width: 575.98px) {
    .page-heading { gap: 16px; }
    .page-heading > div:first-child { flex-basis: auto; }
    .page-heading .d-flex, .page-heading > form { width: 100%; }
    .page-heading .d-flex > .btn, .page-heading .d-flex > a, .page-heading .d-flex > form { flex: 1 1 100%; }
    .page-heading .d-flex > form .btn, .page-heading > form .btn { width: 100%; }
}

/* --- Barra superior --- */
.topbar { gap: 14px; height: auto; min-height: 74px; }
.topbar > div:not(.topbar-actions) { flex: 1 1 auto; min-width: 0; }
.topbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { flex: 0 0 auto; }
.topbar > .icon-button { flex: 0 0 auto; }
@media (max-width: 991.98px) { .topbar { min-height: 64px; } }
@media (max-width: 575.98px) {
    .topbar { gap: 8px; padding: 8px 12px; }
    .topbar-actions { gap: 6px; }
    .topbar .icon-button { height: 40px; width: 40px; }
    /* El título puede ocupar dos líneas antes de cortarse con "…" */
    .topbar-title { display: -webkit-box; font-size: .98rem; line-height: 1.2; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
}
@media (max-width: 400px) {
    /* En teléfonos muy angostos la guía se abre desde el menú de ayuda de cada pantalla */
    .topbar [data-tour-start] { display: none; }
    .theme-toggle { width: 60px; }
    [data-theme="dark"] .theme-toggle-thumb { transform: translateX(20px); }
}

/* --- Barra lateral contraída (rail de íconos) en laptops de 992–1199px --- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    :root { --sidebar-rail: 84px; }
    .sidebar { transition: width .28s var(--ease), box-shadow .28s var(--ease); width: var(--sidebar-rail); }
    .app-content { margin-left: calc(var(--sidebar-rail) + 14px); width: calc(100% - var(--sidebar-rail) - 14px); }
    .app-footer { margin-left: 24px; margin-right: 24px; }
    /* Al pasar el mouse o navegar con teclado se despliega sobre el contenido, sin moverlo */
    .sidebar:hover, .sidebar:focus-within { box-shadow: var(--shadow-lg); width: var(--sidebar); }
    .sidebar .nav-item, .sidebar .brand-link, .sidebar .portal-toggle-btn { white-space: nowrap; }
    .sidebar:not(:hover):not(:focus-within) .sidebar-brand { justify-content: center; padding-left: 10px; padding-right: 10px; }
    .sidebar:not(:hover):not(:focus-within) .brand-link > span:not(.brand-logo),
    .sidebar:not(:hover):not(:focus-within) .nav-item > span:not(.nav-count),
    .sidebar:not(:hover):not(:focus-within) .profile-copy {
        /* Ocultos a la vista, pero disponibles para lectores de pantalla */
        clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;
    }
    .sidebar:not(:hover):not(:focus-within) .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
    .sidebar:not(:hover):not(:focus-within) .nav-count { font-size: .7rem; min-width: 18px; padding: 1px 5px; position: absolute; right: 8px; top: 0; }
    .sidebar:not(:hover):not(:focus-within) .nav-caption { background: var(--border); font-size: 0; height: 1px; margin: 14px 16px; }
    .sidebar:not(:hover):not(:focus-within) .sidebar-profile { flex-direction: column; gap: 8px; padding: 10px 6px; }
    .sidebar:not(:hover):not(:focus-within) .sidebar-profile-link { flex: 0 0 auto; justify-content: center; }
    .sidebar:not(:hover):not(:focus-within) .portal-toggle-btn { font-size: 0; gap: 0; padding: 9px 0; }
    .sidebar:not(:hover):not(:focus-within) .portal-toggle-btn i { font-size: .9rem; }
    .sidebar:not(:hover):not(:focus-within) .brand-mark::after { display: none; }
}
/* Menú lateral en móvil/tablet: panel deslizable que no tapa el contenido al cerrarse */
@media (max-width: 991.98px) {
    .sidebar .sidebar-nav { overscroll-behavior: contain; }
}

/* --- Contenido en pantallas grandes --- */
@media (min-width: 1400px) {
    .page-content { padding: 34px 44px 60px; }
    .app-footer { margin-left: 44px; margin-right: 44px; }
}
@media (min-width: 1920px) { .page-content { max-width: 1760px; } }

/* --- Tablas: desplazamiento horizontal controlado --- */
.table-responsive, .roster-scroll, .calendar-card { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.table-responsive { scrollbar-width: thin; }
.table-responsive::-webkit-scrollbar, .roster-scroll::-webkit-scrollbar, .calendar-card::-webkit-scrollbar { height: 10px; width: 10px; }
.table-responsive::-webkit-scrollbar-thumb, .roster-scroll::-webkit-scrollbar-thumb, .calendar-card::-webkit-scrollbar-thumb { background: var(--surface-4); border: 2px solid var(--surface); border-radius: 10px; }
.table-responsive::-webkit-scrollbar-track, .roster-scroll::-webkit-scrollbar-track, .calendar-card::-webkit-scrollbar-track { background: transparent; }
.table-app td { overflow-wrap: break-word; }
.scroll-hint { align-items: center; color: var(--text-muted); display: none; font-size: .78rem; font-weight: 600; gap: 6px; margin: 0 0 8px; }
.scroll-hint i { color: var(--accent-ink); }
@media (max-width: 1100px) { .scroll-hint { display: flex; } }

/* Tablas complejas → tarjetas en teléfonos (añadir class="table-stack" y data-label en cada <td>) */
@media (max-width: 575.98px) {
    .table-stack thead { clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack tbody tr { border-bottom: 1px solid var(--border); padding: 12px 16px; }
    .table-stack tbody tr:last-child { border-bottom: 0; }
    .table-stack.table > :not(caption) > * > * { border-bottom-width: 0; }
    .table-stack td { padding: 6px 0 6px 38% !important; position: relative; text-align: left !important; }
    .table-stack td::before { color: var(--text-muted); content: attr(data-label); font-size: .7rem; font-weight: 800; left: 0; letter-spacing: .06em; line-height: 1.3; padding-right: 10px; position: absolute; text-transform: uppercase; top: 9px; width: 36%; }
    .table-stack td:not([data-label])::before, .table-stack td[data-label=""]::before { content: none; }
    .table-stack td:not([data-label]), .table-stack td[data-label=""] { padding-left: 0 !important; }
    .table-stack td.table-stack-primary { padding: 0 0 8px !important; }
    .table-stack td .employee-cell { min-width: 0; }
    .table-stack tbody tr:hover > td:first-child { box-shadow: none; }
}

/* --- Formularios --- */
.form-label { overflow-wrap: break-word; }
.invalid-feedback, .errorlist { font-size: .82rem; }
.errorlist { list-style: none; margin: 4px 0 0; padding: 0; }
@media (max-width: 575.98px) {
    /* 16px evita el zoom automático de Safari en iPhone al enfocar un campo */
    .form-control, .form-select, .auth-input-group input { font-size: 16px; }
    .form-footer { flex-direction: column-reverse; align-items: stretch; padding: 14px 16px; }
    .form-footer .btn, .form-footer form { width: 100%; }
    .filter-bar { gap: 10px; padding: 14px; }
    .filter-bar > div { flex: 1 1 100%; min-width: 0; }
    .filter-bar > .btn, .filter-bar > a.btn { flex: 1 1 auto; }
    .queue-pill { flex: 1 1 100%; justify-content: center; }
    .card-body-pad { padding: 18px; }
    .card-header-clean { padding: 16px 18px; }
}

/* --- Botones y objetivos táctiles --- */
.btn { align-items: center; display: inline-flex; justify-content: center; }
.btn.w-100 { display: flex; }
@media (pointer: coarse) {
    .btn { min-height: 44px; }
    .btn-sm { min-height: 38px; }
    .icon-button, .calendar-nav-button { min-height: 42px; min-width: 42px; }
    .nav-item { padding-bottom: 10px; padding-top: 10px; }
    .form-check-input { height: 1.3em; width: 1.3em; }
    .day-head a { height: 32px; width: 32px; }
}
@media (max-width: 480px) {
    .welcome-actions { flex-wrap: wrap; }
    .welcome-actions .btn { flex: 1 1 100%; }
    .decision-buttons, .decision-buttons-stacked { grid-template-columns: 1fr; }
    .decision-buttons-stacked .btn:first-child { grid-column: auto; }
}

/* --- Foco visible en todos los navegadores (Firefox no aplica :focus-visible a todo igual) --- */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.form-control:focus-visible, .form-select:focus-visible { outline: 0; }
.nav-item:focus-visible { outline-offset: -2px; }

/* --- Modales y paneles laterales --- */
.modal-dialog { max-width: min(var(--bs-modal-width, 500px), calc(100% - 1.5rem)); }
.modal-content { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); }
.modal-body { overflow-wrap: break-word; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 575.98px) {
    .modal-dialog { margin: .75rem auto; }
    .modal-content { border-radius: 18px; }
    .modal-footer { flex-wrap: wrap; }
    .modal-footer > .btn { flex: 1 1 auto; }
    .offcanvas.offcanvas-end { border-radius: 0; max-width: 100%; }
    .coverage-detail { width: 100%; }
}

/* --- Calendario mensual (vista general) --- */
.calendar-toolbar strong { font-size: 1rem; }
.calendar-day { min-width: 0; }
.calendar-shift { font-size: .7rem; min-height: 26px; }
.no-shift { font-size: .68rem; }
@media (max-width: 1100px) {
    .calendar-card { overflow-x: auto; }
    .calendar-grid { grid-template-columns: repeat(7, minmax(112px, 1fr)); min-width: 784px; }
}
@media (max-width: 575.98px) {
    .calendar-grid { grid-template-columns: repeat(7, 104px); min-width: 728px; }
    .calendar-day { min-height: 112px; padding: 7px; }
}

/* --- Planificador mensual (matriz): la columna de colaboradores queda fija --- */
.roster-day { max-width: 40px; }
.roster-scroll { max-height: 70vh; max-height: 70dvh; }
@media (max-width: 767.98px) {
    .roster-number { min-width: 34px; width: 34px; }
    .roster-person { left: 34px; min-width: 150px; width: 150px; }
    /* El total deja de ser fijo a la derecha para liberar espacio a los días */
    .roster-table th.roster-total, .roster-table td.roster-total { position: static; }
    .roster-tools { padding: 12px; }
    .schedule-savebar { padding: 14px; }
    .schedule-savebar .btn { width: 100%; }
}
@media (max-width: 479.98px) {
    .roster-number { display: none; }
    .roster-person { left: 0; min-width: 128px; width: 128px; }
    .schedule-summary { grid-template-columns: 1fr; }
    .schedule-summary > div { border-bottom: 1px solid var(--border); border-right: 0; }
    .schedule-summary > div:last-child { border-bottom: 0; }
}

.schedule-summary > div > strong.schedule-status { display: inline-flex; }

/* --- Semáforo de cobertura --- */
.coverage-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.cov-card-label { font-size: .82rem; }
@media (max-width: 575.98px) {
    .coverage-dash-head > div { min-width: 0; }
    .coverage-filter { align-items: stretch; flex-direction: column; width: 100%; }
    .coverage-filter .form-select { min-width: 0; width: 100%; }
    .coverage-critical { columns: 1; }
    .coverage-publish .form-control { flex-basis: 100%; max-width: none; }
    .coverage-publish .btn { width: 100%; }
    .cov-crit-item { grid-template-columns: 40px minmax(0, 1fr); }
    .cov-crit-btn { grid-column: 2; justify-self: start; }
}

/* --- Perfil, solicitudes y reportes --- */
.profile-summary-head > div { min-width: 0; }
.profile-summary-head h2 { overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .detail-grid { gap: 14px; }
    .request-kpis { gap: 10px; }
    .report-heading-actions { width: 100%; }
    .report-heading-actions .btn { flex: 1 1 auto; }
    .report-novelty-grid { grid-template-columns: 1fr; }
    .timeline { padding: 18px 16px 18px 28px; }
    .timeline-content > div { flex-wrap: wrap; gap: 4px 10px; }
    .password-gate-visual { padding: 26px 22px; }
    .document-metadata > div { flex-direction: column; gap: 2px; }
    .document-metadata dd { text-align: left; }
}

/* --- Inicio de sesión --- */
@media (max-width: 900px) {
    .auth-form-pane { align-items: flex-start; }
}
@media (max-width: 480px) {
    .auth-showcase { padding: 64px 20px 26px; }
    .auth-showcase-copy, .auth-security-note { display: none; }
    .auth-showcase h2 { font-size: 1.25rem; }
    .auth-form-pane { padding: 26px 18px 34px; }
    .auth-identity-logo img { height: 60px; }
    .theme-toggle-floating { right: 12px; top: 12px; }
}

/* ============================================================
   FALLBACKS DE COMPATIBILIDAD
   ============================================================ */
/* Sin desenfoque de fondo: barras opacas para que el texto siga legible */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .topbar { background: var(--bg); }
    .sidebar { background: var(--surface); }
}
/* Navegadores sin color-mix() (Chrome/Edge <111, Firefox <113, Safari <16.2):
   colores planos equivalentes para los elementos principales */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .btn-soft, .request-icon, .mini-avatar, .area-chip, .read-only-chip, .metric-icon { background: var(--accent-soft); }
    .btn-soft { border-color: var(--accent-soft-2); }
    .status-dot { background: var(--surface); border-color: var(--border); color: var(--success); }
    .calendar-shift { background: var(--surface-2); }
    .roster-select, .roster-code, .paint-code { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-strong); }
    td.cov-green, .cov-cal-cell.cov-green { background: rgba(34,197,94,.18) !important; }
    td.cov-yellow, .cov-cal-cell.cov-yellow { background: rgba(250,204,21,.22) !important; }
    td.cov-red, .cov-cal-cell.cov-red { background: rgba(248,113,113,.22) !important; }
    .kiosk-reader-status.is-ok { background: rgba(34,197,94,.12); color: var(--success); }
    .kiosk-reader-status.is-warn { background: rgba(250,204,21,.16); color: var(--text-strong); }
    .kiosk-reader-status.is-error { background: rgba(248,113,113,.14); color: var(--danger); }
    .kiosk-result-notice { background: rgba(250,204,21,.16); border-color: var(--warning); color: var(--text-strong); }
    .kiosk-ready h1, .kiosk-done h1, .kiosk-result-eyebrow { color: var(--success); }
    .kiosk-error h1 { color: var(--danger); }
    .kiosk-error.kiosk-severity-warning h1 { color: var(--text-strong); }
}
/* Sin soporte de dvh: el valor en vh declarado antes queda como respaldo automático */

/* ============================================================
   AJUSTES RESPONSIVE (2026-10-06) · auditoría en 320 / 360 / 768 / 1280 px
   Solo se agregan reglas; no se modifica nada de lo anterior.
   ============================================================ */

/* Menú hamburguesa: el ícono no debe robar el toque al botón */
.sidebar-toggle i { pointer-events: none; }

/* Objetivos táctiles de al menos 44px en pantallas de celular,
   aunque el navegador no reporte puntero táctil (p. ej. ventana angosta) */
@media (max-width: 767.98px) {
    .btn { min-height: 44px; }
    .btn-sm { min-height: 40px; }
    .form-control, .form-select { min-height: 44px; }
}

/* Banner del panel: los botones no parten su texto; si no caben, bajan de línea */
.welcome-banner { flex-wrap: wrap; gap: 18px 24px; }
.welcome-actions { flex-wrap: wrap; }
.welcome-actions .btn { white-space: nowrap; }

/* Calendario mensual en tableta (768–1100px): la semana completa cabe sin deslizar */
@media (min-width: 768px) and (max-width: 1100px) {
    .calendar-card { overflow-x: visible; }
    .calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 0; }
    .calendar-day { padding: 7px; }
    .calendar-shift span { min-width: 0; }
    .calendar-card ~ .scroll-hint, .scroll-hint:has(+ .calendar-card) { display: none; }
}

/* Panel lateral de detalle del día (planificador): su tabla se desliza si no cabe */
.coverage-detail .offcanvas-body { overflow-x: auto; }

/* Títulos que usaban un color fijo y se perdían en modo oscuro */
.coverage-dash-head h2, .coverage-detail .offcanvas-title, .driver-popover-title { color: var(--text-strong); }
.coverage-dash-head .eyebrow { color: var(--text-muted); }

/* Menú en celular/tableta: debe quedar POR ENCIMA de su capa oscura.
   La barra lateral tenía z-index 1035 y la capa de Bootstrap usa 1040, así que la
   capa tapaba el menú (se veía apagado y no recibía los toques). Bootstrap usa 1045
   para el panel; se respeta ese mismo orden. */
@media (max-width: 991.98px) {
    .sidebar.offcanvas-lg { z-index: 1045; }
}

/* Botón de ojo en campos de contraseña (password-toggle.js) */
.password-field { position: relative; }
.password-field .form-control { padding-right: 46px; }
.password-field-toggle { align-items: center; background: none; border: 0; color: var(--muted); display: flex; height: 100%; padding: 0 14px; position: absolute; right: 0; top: 0; }
.password-field-toggle:hover, .password-field-toggle:focus-visible { color: var(--text-strong); }

/* ============================================================
   PULIDO 2026-10 · refinamiento sin cambiar la identidad
   ============================================================ */
/* Paneles de estado del planificador: relleno propio y estado por borde y fondo teñidos
   (el ícono y el titular ya nombran el estado; el color lo refuerza, no lo sustituye) */
.closed-banner, .coverage-banner, .coverage-dash, .conflict-panel {
    background: color-mix(in srgb, var(--state) 5%, var(--surface));
    border-color: color-mix(in srgb, var(--state) 32%, var(--border));
    padding: 18px 22px 20px;
}
.coverage-dash { background: var(--surface); }
.coverage-filter span { white-space: nowrap; }
.cov-card { border-color: color-mix(in srgb, var(--c, var(--border)) 30%, var(--border)); background: color-mix(in srgb, var(--c, transparent) 6%, var(--surface)); }
.cov-card-green { --c: #16a34a; } .cov-card-yellow { --c: #d97706; } .cov-card-red { --c: #dc2626; }

/* Indicadores del reporte: el texto de apoyo se ajusta en lugar de cortarse con "…" */
.report-kpi small, .report-kpi em { overflow: visible; text-overflow: clip; white-space: normal; }
.report-kpi { align-items: flex-start; }
.shift-report-table { min-width: 980px; }
.shift-report-table > :not(caption) > tr > th, .shift-report-table > :not(caption) > tr > td { padding-left: 12px; padding-right: 12px; }

/* Solicitudes: indicadores en 2×2 en teléfono, no cuatro filas a lo ancho */
@media (max-width: 600px) { .request-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px) { .request-kpis { grid-template-columns: minmax(0, 1fr); } }

/* Código de turno en "Próximos turnos": legible en ambos temas */
.shift-code { background: color-mix(in srgb, var(--shift-color) 14%, var(--surface)); color: color-mix(in srgb, var(--shift-color) 55%, var(--text-strong)); }

/* Superficies del navegador con la paleta del sistema */
html { caret-color: var(--accent-ink); }
a { text-underline-offset: .18em; }
.table-app td, .roster-table, .kiosk-mini-stats, .metric-value, .request-kpi strong, .report-kpi strong { font-variant-numeric: tabular-nums; }

/* Barras de filtros en cuadrícula: los campos se ajustan a su columna en vez de invadir la
   vecina (.filter-bar > div fija 170px de mínimo, pensado para la versión flexible) */
.filter-bar.hours-filter-bar > *, .filter-bar.audit-filter-bar > *, .report-filter-grid > *, .filter-bar.log-filter-bar > * { min-width: 0; }
.filter-bar .form-select { text-overflow: ellipsis; }

/* Bitácora biométrica: tantos filtros como quepan por fila (≥200px cada uno) y las acciones
   en su propia fila, con el interruptor a la izquierda y los botones a la derecha */
.log-filter-bar { align-items: end; display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.log-filter-bar .filter-search { grid-column: span 2; }
.log-filter-bar .filter-actions { align-items: center; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 10px 12px; grid-column: 1 / -1; padding-top: 14px; }
.log-filter-bar .filter-actions .form-switch { margin: 0 auto 0 0; min-height: 0; }
.filter-bar .form-check-label { color: var(--text); font-size: .875rem; font-weight: 600; letter-spacing: 0; margin: 0; text-transform: none; }
@media (max-width: 575.98px) {
    .log-filter-bar .filter-search { grid-column: auto; }
    .log-filter-bar .filter-actions .form-switch { flex: 1 1 100%; }
    .log-filter-bar .filter-actions .btn { flex: 1 1 auto; }
}