/* ================================================================
   EESPP Indoamérica Trujillo — Hoja de Estilos Institucional
   Paleta: Azul institucional / Celeste / Blanco
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --az1:  #0057A8;  --az2:  #0077CC;  --az3:  #1A9BE8;
  --cel:  #38BDF8;  --cel2: #BAE6FD;  --cie:  #E0F2FE;  --cie2: #C8E6FA;
  --bl:   #FFFFFF;  --gs:   #F5F9FF;  --gb:   #D1E8F5;
  --tx:   #0C2A4A;  --tx2:  #3A5A7A;  --tx3:  #6B8FAD;
  --dor:  #F59E0B;  --vd:   #059669;  --ro:   #DC2626;  --na:   #EA580C;
  --rr:   16px;     --rs:   10px;
  --somb: 0 4px 24px rgba(0,87,168,.10);
  --sombh:0 8px 40px rgba(0,87,168,.18);
  --sw:   272px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--gs);color:var(--tx);min-height:100vh;-webkit-font-smoothing:antialiased}
.mono{font-family:'JetBrains Mono',monospace}

/* ── FONDO ──────────────────────────────────────────────────── */
.fondo-pag{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.fondo-pag::before{content:'';position:absolute;top:-200px;right:-200px;width:900px;height:900px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(56,189,248,.12)0%,transparent 70%)}
.fondo-pag::after{content:'';position:absolute;bottom:-150px;left:-150px;width:700px;height:700px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,87,168,.07)0%,transparent 70%)}
.fd-franja{position:absolute;bottom:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--az1),var(--az3),var(--cel),var(--dor))}
.fd-puntos{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,87,168,.06)1px,transparent 1px);background-size:32px 32px}
.fd-ico{position:absolute;opacity:.06;font-size:80px;color:var(--az1);animation:fdFlot 8s ease-in-out infinite alternate;user-select:none}
.fd-ico:nth-child(2){animation-delay:-3s;animation-duration:11s;font-size:60px}
.fd-ico:nth-child(3){animation-delay:-6s;animation-duration:9s;font-size:50px}
@keyframes fdFlot{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-25px) rotate(5deg)}}

/* ── HEADER INSTITUCIONAL ───────────────────────────────────── */
.hdr-inst{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--bl);border-bottom:3px solid transparent;border-image:linear-gradient(90deg,var(--az1),var(--cel),var(--dor)) 1;box-shadow:0 2px 20px rgba(0,87,168,.12)}
.hdr-banda{background:linear-gradient(90deg,var(--az1),var(--az2));padding:5px 28px;display:flex;align-items:center;justify-content:space-between;font-size:.72rem;color:rgba(255,255,255,.85);font-weight:500}
.hdr-main{display:flex;align-items:center;justify-content:space-between;padding:10px 28px}
.hdr-marca{display:flex;align-items:center;gap:14px}
.hdr-escudo{position:relative;width:54px;height:54px;background:linear-gradient(135deg,var(--az1),var(--az3));border-radius:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,87,168,.3);flex-shrink:0}
.hdr-escudo i{font-size:1.5rem;color:var(--bl)}
.hdr-escudo::after{content:'';position:absolute;inset:-3px;border-radius:16px;border:2px solid var(--cel2);opacity:.6;animation:escPulso 3s ease-in-out infinite}
@keyframes escPulso{0%,100%{opacity:.3}50%{opacity:.7}}
.hdr-nom{font-family:'Playfair Display',serif;font-size:.82rem;font-weight:700;color:var(--az1);text-transform:uppercase}
.hdr-siglas{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:900;color:var(--az1);letter-spacing:1px}
.hdr-sub{font-size:.7rem;color:var(--tx3);font-weight:500}
.hdr-reloj{font-family:'JetBrains Mono',monospace;font-size:.92rem;font-weight:600;color:var(--az1);background:var(--cie);border:1px solid var(--gb);padding:7px 14px;border-radius:8px}
.btn-hdr{padding:8px 18px;border-radius:8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.83rem;font-weight:700;text-decoration:none;transition:all .22s;display:flex;align-items:center;gap:7px;cursor:pointer;border:2px solid transparent}
.btn-hdr-o{color:var(--az1);border-color:var(--gb);background:transparent}
.btn-hdr-o:hover{border-color:var(--az3);background:var(--cie);color:var(--az1)}
.btn-hdr-s{background:var(--az1);color:var(--bl);border-color:var(--az1)}
.btn-hdr-s:hover{background:var(--az2);box-shadow:0 4px 16px rgba(0,87,168,.3);transform:translateY(-1px)}

/* ── SIDEBAR ────────────────────────────────────────────────── */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sw);z-index:150;background:var(--bl);border-right:2px solid var(--gb);display:flex;flex-direction:column;box-shadow:4px 0 24px rgba(0,87,168,.07);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow:hidden}
.sb-cab{padding:18px;border-bottom:2px solid var(--gb);background:linear-gradient(135deg,var(--az1)0%,var(--az3)100%);position:relative;overflow:hidden}
.sb-cab::before{content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08)}
.sb-escudo{min-width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--bl);flex-shrink:0;position:relative;z-index:1}
.sb-label{font-size:.72rem;color:rgba(255,255,255,.7);font-weight:600;letter-spacing:1px;text-transform:uppercase}
.sb-inst{font-family:'Playfair Display',serif;font-size:1rem;font-weight:700;color:var(--bl)}
.sb-user{font-size:.75rem;color:rgba(255,255,255,.65)}
.sb-nav{flex:1;overflow-y:auto;padding:8px 12px 16px}
.sb-sec{font-size:.68rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--tx3);padding:16px 8px 8px}
.sb-lnk{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--rs);color:var(--tx2);text-decoration:none;font-size:.875rem;font-weight:600;transition:all .2s;margin-bottom:3px}
.sb-lnk i{width:20px;text-align:center;font-size:1rem;flex-shrink:0}
.sb-lnk:hover{background:var(--cie);color:var(--az1)}
.sb-lnk.activo{background:linear-gradient(90deg,var(--cie),rgba(56,189,248,.08));color:var(--az1);border-left:3px solid var(--az1);font-weight:700}
.sb-peligro{color:var(--ro)}
.sb-peligro:hover{background:rgba(220,38,38,.06)!important;color:var(--ro)!important}
.sb-div{height:1px;background:var(--gb);margin:8px 0}

/* ── DASHBOARD ──────────────────────────────────────────────── */
.pg-dash .dash-wrap{margin-left:var(--sw);transition:margin-left .3s}
.topbar{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-bottom:2px solid var(--gb);padding:12px 28px;display:flex;align-items:center;justify-content:space-between;min-height:62px}
.btn-menu{background:none;border:2px solid var(--gb);color:var(--tx2);width:38px;height:38px;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:1rem}
.btn-menu:hover{border-color:var(--az3);color:var(--az1);background:var(--cie)}
.tb-miga{font-size:.82rem;color:var(--tx3);font-weight:500}
.tb-miga strong{color:var(--az1)}
.tb-hora{font-family:'JetBrains Mono',monospace;font-size:.85rem;color:var(--az1);background:var(--cie);padding:5px 12px;border-radius:7px;border:1px solid var(--gb)}
.tb-user{font-size:.82rem;color:var(--tx2);font-weight:600}
.dash-inner{padding:28px}
.pg-hero{margin-bottom:28px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pg-titulo{font-family:'Playfair Display',serif;font-size:2rem;font-weight:700;color:var(--az1);margin-bottom:6px}
.pg-titulo span{color:var(--az3)}
.pg-sub{font-size:.88rem;color:var(--tx3);font-weight:500}

/* ── STATS ──────────────────────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px}
.stat-c{background:var(--bl);border-radius:var(--rr);padding:22px 20px;box-shadow:var(--somb);border:1.5px solid var(--gb);position:relative;overflow:hidden;transition:transform .22s,box-shadow .22s}
.stat-c:hover{transform:translateY(-4px);box-shadow:var(--sombh)}
.stat-c::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;border-radius:var(--rr) var(--rr) 0 0}
.sc-az::before{background:linear-gradient(90deg,var(--az1),var(--az3))}
.sc-cel::before{background:linear-gradient(90deg,var(--az3),var(--cel))}
.sc-dor::before{background:linear-gradient(90deg,var(--dor),#FCD34D)}
.sc-vd::before{background:linear-gradient(90deg,var(--vd),#34D399)}
.sc-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;margin-bottom:14px}
.sc-az .sc-ico{background:var(--cie);color:var(--az1)}.sc-cel .sc-ico{background:rgba(56,189,248,.12);color:var(--az3)}
.sc-dor .sc-ico{background:rgba(245,158,11,.1);color:var(--dor)}.sc-vd .sc-ico{background:rgba(5,150,105,.1);color:var(--vd)}
.sc-num{font-family:'Playfair Display',serif;font-size:2.4rem;font-weight:900;color:var(--az1);line-height:1;margin-bottom:4px}
.sc-lbl{font-size:.8rem;color:var(--tx3);font-weight:600}
.sc-porc{position:absolute;top:18px;right:18px;font-size:.75rem;font-weight:700;padding:3px 8px;border-radius:20px}
.sp-ok{background:rgba(5,150,105,.1);color:var(--vd)}.sp-warn{background:rgba(234,88,12,.1);color:var(--na)}
.sc-bar{height:5px;background:var(--gb);border-radius:3px;margin-top:12px}
.sc-fill{height:100%;border-radius:3px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.sc-az .sc-fill{background:linear-gradient(90deg,var(--az1),var(--az3))}.sc-cel .sc-fill{background:linear-gradient(90deg,var(--az3),var(--cel))}
.sc-dor .sc-fill{background:linear-gradient(90deg,var(--dor),#FCD34D)}.sc-vd .sc-fill{background:linear-gradient(90deg,var(--vd),#34D399)}

/* ── TARJETA DATOS ──────────────────────────────────────────── */
.tcard{background:var(--bl);border-radius:var(--rr);box-shadow:var(--somb);border:1.5px solid var(--gb);overflow:hidden}
.tcard-cab{padding:18px 22px;border-bottom:2px solid var(--gb);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,rgba(0,87,168,.03),rgba(56,189,248,.03))}
.tcard-tit{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;color:var(--az1);display:flex;align-items:center;gap:10px}
.tcard-tit i{color:var(--az3)}

/* ── TABLA ──────────────────────────────────────────────────── */
.ttbl{width:100%;border-collapse:collapse;font-size:.875rem}
.ttbl thead th{padding:12px 18px;background:var(--cie);font-size:.72rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--az1);border-bottom:2px solid var(--gb);text-align:left}
.ttbl tbody td{padding:13px 18px;border-bottom:1px solid var(--cie2);vertical-align:middle;color:var(--tx)}
.ttbl tbody tr:hover td{background:rgba(224,242,254,.5)}
.ttbl tbody tr:last-child td{border-bottom:none}
.fila-inac td{opacity:.45}

/* ── CHIPS / BADGES ─────────────────────────────────────────── */
.est-chip{font-size:.72rem;font-weight:700;padding:4px 11px;border-radius:20px;display:inline-flex;align-items:center;gap:4px}
.ec-act{background:rgba(0,87,168,.08);color:var(--az1);border:1px solid rgba(0,87,168,.15)}
.ec-inac{background:rgba(107,143,173,.1);color:var(--tx3);border:1px solid var(--gb)}
.ec-punt{background:rgba(5,150,105,.1);color:var(--vd);border:1px solid rgba(5,150,105,.2)}
.ec-tard{background:rgba(234,88,12,.1);color:var(--na);border:1px solid rgba(234,88,12,.2)}
.ec-pend{background:var(--cie2);color:var(--tx3);border:1px solid var(--gb)}
.hora-chip{font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:600;padding:4px 10px;border-radius:7px;display:inline-block}
.hc-e{background:rgba(5,150,105,.08);color:var(--vd)}.hc-s{background:rgba(0,87,168,.08);color:var(--az1)}
.dni-chip{font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--tx2);background:var(--cie);padding:3px 9px;border-radius:6px}
.cargo-chip{font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:20px;background:rgba(0,119,204,.08);color:var(--az2);border:1px solid rgba(0,119,204,.15)}
.ctr-pill{background:var(--cie);color:var(--az1);font-size:.78rem;font-weight:800;padding:3px 11px;border-radius:20px;border:1.5px solid var(--gb)}

/* ── AVATARES ────────────────────────────────────────────────── */
.av-sm{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--az1),var(--az3));color:var(--bl);font-size:.75rem;font-weight:800;flex-shrink:0;margin-right:10px}
.av-inac{background:var(--cie2);color:var(--tx3)}
.av-aus{background:rgba(220,38,38,.1);color:var(--ro);border:1.5px solid rgba(220,38,38,.2)}
.per-nom{font-weight:700;font-size:.875rem;color:var(--tx)}

/* ── BOTONES ─────────────────────────────────────────────────── */
.btn-ppal{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:var(--rs);font-family:'Plus Jakarta Sans',sans-serif;font-size:.88rem;font-weight:700;cursor:pointer;border:none;transition:all .22s;text-decoration:none;background:linear-gradient(135deg,var(--az1),var(--az3));color:var(--bl);box-shadow:0 4px 14px rgba(0,87,168,.25)}
.btn-ppal:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,87,168,.35)}
.btn-ppal:active{transform:translateY(0)}
.btn-ppal:disabled{opacity:.7;cursor:wait}
.btn-sec{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:var(--rs);font-family:'Plus Jakarta Sans',sans-serif;font-size:.83rem;font-weight:700;cursor:pointer;border:1.5px solid var(--gb);background:transparent;color:var(--az1);transition:all .2s;text-decoration:none}
.btn-sec:hover{background:var(--cie);border-color:var(--az3)}
.btn-ico{width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:.82rem;cursor:pointer;transition:all .2s;border:1.5px solid var(--gb);background:var(--bl);color:var(--tx3);text-decoration:none}
.ico-ed:hover{border-color:var(--az3);background:var(--cie);color:var(--az1)}
.ico-tg:hover{border-color:var(--dor);background:rgba(245,158,11,.08);color:var(--dor)}
.ico-del:hover{border-color:rgba(220,38,38,.3);background:rgba(220,38,38,.06);color:var(--ro)}

/* ── FORMULARIOS ─────────────────────────────────────────────── */
.fgrp{margin-bottom:16px}
.flbl{display:block;font-size:.77rem;font-weight:700;color:var(--tx2);margin-bottom:7px;text-transform:uppercase;letter-spacing:.4px}
.flbl i{margin-right:6px;color:var(--az3)}
.finp{width:100%;padding:12px 16px;border:1.5px solid var(--gb);border-radius:var(--rs);background:var(--bl);color:var(--tx);font-family:'Plus Jakarta Sans',sans-serif;font-size:.9rem;transition:all .2s;outline:none}
.finp:focus{border-color:var(--az3);box-shadow:0 0 0 3px rgba(56,189,248,.15)}
.finp::placeholder{color:var(--tx3)}
select.finp{appearance:none;cursor:pointer}
.fhint{font-size:.73rem;color:var(--tx3);margin-top:5px}

/* ── BÚSQUEDA ────────────────────────────────────────────────── */
.srch-wrap{position:relative}
.srch-wrap i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--tx3);font-size:.85rem}
.srch-inp{padding:8px 12px 8px 34px;border:1.5px solid var(--gb);border-radius:8px;background:var(--bl);color:var(--tx);font-family:'Plus Jakarta Sans',sans-serif;font-size:.83rem;transition:border-color .2s;outline:none;width:220px}
.srch-inp:focus{border-color:var(--az3)}

/* ── ALERTAS ─────────────────────────────────────────────────── */
.alerta{padding:14px 18px;border-radius:var(--rs);font-size:.875rem;font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:10px;border:1.5px solid transparent}
.alt-ok{background:rgba(5,150,105,.07);border-color:rgba(5,150,105,.25);color:var(--vd)}
.alt-error{background:rgba(220,38,38,.07);border-color:rgba(220,38,38,.25);color:var(--ro)}
.alt-info{background:rgba(0,87,168,.06);border-color:rgba(0,87,168,.2);color:var(--az1)}

/* ── PÁGINA REGISTRO ─────────────────────────────────────────── */
.pg-registro{overflow-x:hidden}
.reg-wrap{padding-top:100px;min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;padding-bottom:40px}
.reg-layout{display:grid;grid-template-columns:1fr 1fr;max-width:960px;width:100%;border-radius:24px;overflow:hidden;box-shadow:0 20px 60px rgba(0,87,168,.16);margin:0 20px}
.reg-izq{background:linear-gradient(160deg,var(--az1)0%,var(--az3)60%,var(--cel)100%);padding:50px 36px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.ri-d1{position:absolute;top:-60px;right:-60px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.08)}
.ri-d2{position:absolute;bottom:-80px;left:-40px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.05)}
.ri-ico{position:absolute;top:40%;right:20px;font-size:120px;opacity:.05;color:var(--bl);animation:fdFlot 10s ease-in-out infinite alternate}
.ri-escudo{width:70px;height:70px;border-radius:18px;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--bl);margin-bottom:20px;border:2px solid rgba(255,255,255,.3);position:relative;z-index:1;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.ri-inst{font-size:.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:6px;position:relative;z-index:1}
.ri-nombre{font-family:'Playfair Display',serif;font-size:1.45rem;font-weight:900;color:var(--bl);line-height:1.3;margin-bottom:6px;position:relative;z-index:1}
.ri-ciudad{font-size:.82rem;color:rgba(255,255,255,.7);font-weight:600;position:relative;z-index:1}
.ri-sep{width:50px;height:3px;border-radius:2px;background:rgba(255,255,255,.4);margin:20px 0;position:relative;z-index:1}
.ri-desc{font-size:.83rem;color:rgba(255,255,255,.75);line-height:1.65;position:relative;z-index:1}
.ri-tags{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:1;margin-top:24px}
.ri-tag{padding:5px 13px;border-radius:20px;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);font-size:.73rem;color:var(--bl);font-weight:600;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;gap:6px}
.reg-der{background:var(--bl);padding:44px 40px;display:flex;flex-direction:column}
.rd-titulo{font-family:'Playfair Display',serif;font-size:1.55rem;font-weight:700;color:var(--az1);margin-bottom:6px}
.rd-sub{font-size:.85rem;color:var(--tx3);margin-bottom:28px}
.dt-box{background:var(--cie);border:1.5px solid var(--gb);border-radius:var(--rs);padding:14px 18px;margin-bottom:24px;text-align:center}
.dt-fecha{font-size:.78rem;color:var(--tx3);font-weight:600;text-transform:capitalize;margin-bottom:4px}
.dt-hora{font-family:'JetBrains Mono',monospace;font-size:2.1rem;font-weight:600;color:var(--az1);letter-spacing:2px;line-height:1}
.dt-zona{font-size:.7rem;color:var(--tx3);margin-top:4px;font-weight:500}
.rd-info{margin-top:20px;padding-top:16px;border-top:1.5px solid var(--gb);display:flex;gap:16px;font-size:.78rem;color:var(--tx3);flex-wrap:wrap}
.rdi-item{display:flex;align-items:center;gap:7px}
.rdi-item i{color:var(--az3)}

/* Sistema cerrado */
.sis-cerrado{text-align:center;padding:30px 20px;background:rgba(0,87,168,.04);border-radius:var(--rr);border:1.5px solid var(--gb);margin:20px 0}
.sc-ico{font-size:2.5rem;color:var(--az1);opacity:.5;margin-bottom:12px}
.sc-titulo{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;color:var(--az1);margin-bottom:8px}
.sc-msg{font-size:.85rem;color:var(--tx3);line-height:1.6}

/* Resultado de registro */
.res-caja{border-radius:var(--rs);padding:16px 18px;border:1.5px solid transparent;animation:resFade .35s cubic-bezier(.34,1.56,.64,1);margin-top:18px;transition:all .4s}
@keyframes resFade{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.rc-entrada{background:rgba(5,150,105,.06);border-color:rgba(5,150,105,.25)}
.rc-salida{background:rgba(0,87,168,.05);border-color:rgba(0,87,168,.2)}
.rc-completa{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.25)}
.rc-error{background:rgba(220,38,38,.05);border-color:rgba(220,38,38,.2)}
.res-ico{font-size:1.5rem;margin-bottom:6px}
.res-msg{font-size:.92rem;font-weight:700}
.rc-entrada .res-ico,.rc-entrada .res-msg{color:var(--vd)}
.rc-salida  .res-ico,.rc-salida  .res-msg{color:var(--az1)}
.rc-completa .res-ico,.rc-completa .res-msg{color:var(--dor)}
.rc-error .res-ico,.rc-error .res-msg{color:var(--ro)}
.res-det{font-size:.8rem;color:var(--tx3);margin-top:5px}

/* Ausentes */
.aus-lista{max-height:360px;overflow-y:auto}
.aus-item{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:9px;transition:background .15s;margin-bottom:2px}
.aus-item:hover{background:var(--cie)}
.aus-nom{font-size:.85rem;font-weight:700;color:var(--tx)}
.aus-cargo{font-size:.75rem;color:var(--tx3)}

/* ── LOGIN ───────────────────────────────────────────────────── */
.pg-login{overflow:hidden}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;z-index:1}
.login-caja{background:var(--bl);border-radius:22px;box-shadow:0 20px 60px rgba(0,87,168,.14);overflow:hidden;width:100%;max-width:420px;border:1.5px solid var(--gb)}
.login-cab{background:linear-gradient(135deg,var(--az1),var(--az3));padding:36px 36px 28px;text-align:center;position:relative;overflow:hidden}
.login-cab::before{content:'';position:absolute;top:-50px;right:-50px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08)}
.login-escudo{width:64px;height:64px;border-radius:16px;background:rgba(255,255,255,.2);margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--bl);border:2px solid rgba(255,255,255,.3);position:relative;z-index:1}
.login-inst{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--bl);margin-bottom:3px;position:relative;z-index:1}
.login-sub{font-size:.75rem;color:rgba(255,255,255,.7);position:relative;z-index:1}
.login-body{padding:30px 36px 36px}
.login-titulo{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:700;color:var(--az1);margin-bottom:4px}
.login-desc{font-size:.82rem;color:var(--tx3);margin-bottom:22px}
.lnk-volver{font-size:.83rem;color:var(--tx3);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.lnk-volver:hover{color:var(--az1)}

/* ── PRINT ───────────────────────────────────────────────────── */

/* ── NOMBRE INSTITUCIONAL INDOAMÉRICA ─────────────────────── */
/* Texto "Indoamérica" resaltado en siglas del header */
.hdr-siglas .hdr-ind {
  color:           var(--az3);
  font-style:      italic;
  letter-spacing:  1px;
}

/* Ajuste de ancho del header para nombre más largo */
.hdr-nom {
  font-family:    'Playfair Display', serif;
  font-size:      .75rem;
  font-weight:    700;
  color:          var(--az1);
  text-transform: uppercase;
  letter-spacing: .1px;
  line-height:    1.3;
  max-width:      340px;
}

/* ── SLOT LOGO INSTITUCIONAL EN HEADER ─────────────────────── */
/* Cuando hay logo: contenedor rectangular proporcional (logo largo)  */
/* Cuando no hay logo: cuadrado con ícono de birrete (fallback)       */
.hdr-escudo {
  position:        relative;
  /* Sin logo: cuadrado 56px. Con logo: se expande automáticamente */
  min-width:       56px;
  height:          56px;
  background:      linear-gradient(135deg, var(--az1), var(--az3));
  border-radius:   14px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 4px 16px rgba(0,87,168,.3);
  flex-shrink:     0;
  overflow:        hidden;
  transition:      min-width .3s;
}
/* Logo real: proporcional, sin deformación */
.hdr-escudo img.logo-real {
  display:      block;
  height:       46px;          /* altura fija — ancho se adapta al aspect ratio */
  width:        auto;          /* proporcional: logos largos se expanden */
  max-width:    180px;         /* límite para logos muy anchos */
  object-fit:   contain;
  padding:      4px 8px;
}
/* Expandir contenedor cuando hay logo */
.hdr-escudo:has(img.logo-real) {
  min-width:    auto;
  padding:      0 4px;
  background:   var(--bl);     /* fondo blanco para logos con transparencia */
  border:       1.5px solid var(--gb);
  box-shadow:   0 2px 10px rgba(0,87,168,.15);
}
/* Ícono fallback */
.hdr-escudo i { font-size: 1.5rem; color: var(--bl); }

/* Sidebar — slot de logo igual */
.sb-escudo {
  min-width:      42px;
  height:         42px;
  border-radius:  11px;
  background:     rgba(255,255,255,.2);
  backdrop-filter:blur(8px);
  display:        flex;
  align-items:    center;
  justify-content:center;
  font-size:      1.1rem;
  color:          var(--bl);
  flex-shrink:    0;
  position:       relative;
  z-index:        1;
  overflow:       hidden;
}
.sb-escudo img.logo-real {
  width:      100%;
  height:     100%;
  object-fit: contain;
  position:   absolute;
  inset:      0;
  padding:    4px;
}

/* Panel izquierdo de registro — escudo */
.ri-escudo {
  overflow: hidden;
}
.ri-escudo img.logo-real {
  width:      100%;
  height:     100%;
  object-fit: contain;
  position:   absolute;
  inset:      0;
  padding:    8px;
}

/* Login y setup — escudo */
.login-escudo {
  overflow: hidden;
}
.login-escudo img.logo-real {
  width:      100%;
  height:     100%;
  object-fit: contain;
  position:   absolute;
  inset:      0;
  padding:    6px;
}

/* Texto "Indoamérica" en cursiva en el panel izquierdo */
.ri-nombre em {
  font-style:  italic;
  font-weight: 900;
  opacity:     .95;
}

/* Sidebar — texto más largo en sb-label */
.sb-label {
  font-size:     .65rem;
  color:         rgba(255,255,255,.7);
  font-weight:   700;
  letter-spacing:.8px;
  text-transform:uppercase;
  line-height:   1.2;
}

@media print {

  /* ── Ocultar todo lo que no es el reporte ── */
  .sidebar,
  .topbar,
  .pg-hero .d-flex,
  .tcard-cab form,
  .srch-wrap,
  .btn-ppal,
  .btn-sec,
  .stat-grid,
  .mb-4.tcard:first-of-type,   /* filtros */
  .fondo-pag,
  nav, aside { display: none !important; }

  /* ── Layout limpio ── */
  *                    { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body           { background: #fff !important; color: #000 !important; font-family: 'Times New Roman', Times, serif; font-size: 11pt; }
  .pg-dash .dash-wrap  { margin-left: 0 !important; }
  .dash-inner          { padding: 0 !important; }

  /* ── Encabezado oficial del documento ── */
  .tcard::before {
    content:
      "ESCUELA DE EDUCACIÓN SUPERIOR PEDAGÓGICA PÚBLICA — TRUJILLO\A"
      "REPORTE DE CONTROL DE ASISTENCIA DEL PERSONAL INSTITUCIONAL";
    display:       block;
    white-space:   pre;
    text-align:    center;
    font-family:   'Times New Roman', Times, serif;
    font-size:     13pt;
    font-weight:   bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top:    3px solid #000;
    border-bottom: 1px solid #000;
    padding:       10pt 0 8pt;
    margin-bottom: 14pt;
    line-height:   1.6;
  }

  /* ── Pie de página con fecha de impresión ── */
  body::after {
    content:     "Documento generado el: " attr(data-fecha-imp);
    display:     block;
    margin-top:  20pt;
    font-size:   9pt;
    color:       #444;
    border-top:  1px solid #aaa;
    padding-top: 6pt;
    text-align:  right;
  }

  /* ── Tarjeta sin adornos ── */
  .tcard      { box-shadow: none !important; border: none !important; }
  .tcard-cab  { border-bottom: 2px solid #000 !important; background: none !important; padding: 6pt 0 6pt !important; }
  .tcard-tit  { font-family: 'Times New Roman', serif !important; font-size: 11pt !important; color: #000 !important; }
  .tcard-tit i{ display: none; }

  /* ── Tabla formal ── */
  .ttbl {
    width:           100%;
    border-collapse: collapse;
    font-family:     'Times New Roman', Times, serif;
    font-size:       10pt;
  }
  .ttbl thead tr {
    background:  #000 !important;
    color:       #fff !important;
  }
  .ttbl thead th {
    background:    #000 !important;
    color:         #fff !important;
    font-size:     9.5pt !important;
    font-weight:   bold !important;
    padding:       5pt 7pt !important;
    border:        1px solid #000 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .ttbl tbody td {
    padding:     4pt 7pt !important;
    border:      1px solid #888 !important;
    color:       #000 !important;
    font-size:   10pt !important;
    vertical-align: middle;
  }
  .ttbl tbody tr:nth-child(even) td { background: #f4f4f4 !important; }
  .ttbl tbody tr:last-child td      { border-bottom: 2px solid #000 !important; }

  /* ── Ocultar avatares e íconos decorativos ── */
  .av-sm, .prev-panel, .res-caja,
  .d-flex .av-sm { display: none !important; }

  /* ── Chips: texto plano ── */
  .est-chip, .hora-chip, .dni-chip, .cargo-chip {
    background:    transparent !important;
    border:        none !important;
    padding:       0 !important;
    font-size:     10pt !important;
    font-weight:   normal !important;
    color:         #000 !important;
    font-family:   'Times New Roman', serif !important;
  }
  .per-nom { font-weight: bold; font-size: 10pt !important; }

  /* ── Resumen compacto ── */
  .row.g-3.mb-4 { display: none !important; }

  /* ── Saltos de página ── */
  .tcard     { page-break-inside: avoid; }
  thead      { display: table-header-group; }
  tr         { page-break-inside: avoid; }
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:1024px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.reg-layout{grid-template-columns:1fr;max-width:460px}.reg-izq{padding:30px 28px}}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}
  .pg-dash .dash-wrap{margin-left:0}
  .hdr-banda{display:none}
  .reg-izq{display:none}
  .stat-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){.stat-grid{grid-template-columns:1fr}.dash-inner{padding:16px}}

/* ════════════════════════════════════════════════════════════
   PREVIEW DNI EN TIEMPO REAL
════════════════════════════════════════════════════════════ */

/* Wrapper del input con el punto indicador */
.dni-wrap { position: relative; }

/* Punto indicador de estado (esquina interna derecha del input) */
.dni-dot {
  position:      absolute;
  right:         14px;
  top:           50%;
  transform:     translateY(-50%);
  width:         10px;
  height:        10px;
  border-radius: 50%;
  transition:    background .25s, box-shadow .25s;
  pointer-events:none;
}
.dot-vacio    { background: #CBD5E0; }
.dot-buscando {
  background: var(--az3);
  animation:  dotPulso .7s ease-in-out infinite alternate;
}
.dot-verde { background: var(--vd);  box-shadow: 0 0 0 3px rgba(5,150,105,.18); }
.dot-rojo  { background: var(--ro);  box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
.dot-gris  { background: #94A3B8; }
@keyframes dotPulso { from { opacity:.5; } to { opacity:1; transform:translateY(-50%) scale(1.3); } }

/* Asegura que el texto del input no quede debajo del punto */
.dni-wrap .finp { padding-right: 36px; }

/* ── Panel de preview ── */
.prev-panel {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       13px 16px;
  border-radius: var(--rs);
  border:        1.5px solid var(--gb);
  margin-bottom: 14px;
  animation:     prevFade .25s ease;
  transition:    border-color .25s, background .25s;
  position:      relative;
  overflow:      hidden;
}
.prev-panel::before {
  content:  '';
  position: absolute;
  left:     0; top: 0; bottom: 0;
  width:    4px;
  border-radius: 4px 0 0 4px;
  transition: background .25s;
}
@keyframes prevFade {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Variantes de color por estado */
.prev-ok   { background:rgba(5,150,105,.05);  border-color:rgba(5,150,105,.3); }
.prev-ok::before   { background: var(--vd); }
.prev-sal  { background:rgba(220,38,38,.05);   border-color:rgba(220,38,38,.3); }
.prev-sal::before  { background: var(--ro); }
.prev-comp { background:rgba(245,158,11,.05);  border-color:rgba(245,158,11,.3); }
.prev-comp::before { background: var(--dor); }
.prev-inac { background:rgba(148,163,184,.07); border-color:rgba(148,163,184,.3); }
.prev-inac::before { background: #94A3B8; }

/* Avatar dentro del panel */
.prev-av {
  width:         40px;
  height:        40px;
  border-radius: 11px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     .85rem;
  font-weight:   800;
  color:         var(--bl);
  flex-shrink:   0;
  transition:    background .25s;
}
.pav-sin_registro  { background: linear-gradient(135deg,var(--vd),#34D399); }
.pav-pendiente_salida { background: linear-gradient(135deg,var(--ro),#F87171); }
.pav-completo      { background: linear-gradient(135deg,var(--dor),#FCD34D); color:var(--tx); }
.pav-inactivo,
.pav-no_encontrado { background: #94A3B8; }

/* Datos de texto del preview */
.prev-datos   { flex:1; min-width:0; }
.prev-nombre  { font-size:.9rem; font-weight:700; color:var(--tx);  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prev-cargo   { font-size:.75rem; color:var(--tx3); font-weight:600; margin-top:1px; }
.prev-meta    { font-size:.72rem; color:var(--tx3); margin-top:3px; font-family:'JetBrains Mono',monospace; }

/* Badge de estado del panel */
.prev-est {
  font-size:  .72rem;
  font-weight:700;
  padding:    4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink:0;
}
.pb-entrada { background:rgba(5,150,105,.12);  color:var(--vd);  border:1px solid rgba(5,150,105,.25); }
.pb-salida  { background:rgba(220,38,38,.10);  color:var(--ro);  border:1px solid rgba(220,38,38,.25); }
.pb-comp    { background:rgba(245,158,11,.10); color:var(--dor); border:1px solid rgba(245,158,11,.25); }
.pb-inac    { background:rgba(148,163,184,.12);color:#64748B;   border:1px solid rgba(148,163,184,.3); }

/* ════════════════════════════════════════════════════════════
   VARIANTES DEL BOTÓN PRINCIPAL
════════════════════════════════════════════════════════════ */

/* Botón SALIDA — rojo */
.btn-ppal.btn-salida {
  background:  linear-gradient(135deg, #B91C1C, #EF4444) !important;
  box-shadow:  0 4px 14px rgba(185,28,28,.35) !important;
  animation:   btnSalidaPulso 1.8s ease-in-out infinite;
}
.btn-ppal.btn-salida:hover {
  background:  linear-gradient(135deg, #991B1B, #DC2626) !important;
  box-shadow:  0 8px 24px rgba(185,28,28,.45) !important;
  transform:   translateY(-2px);
}
@keyframes btnSalidaPulso {
  0%,100% { box-shadow: 0 4px 14px rgba(185,28,28,.35); }
  50%     { box-shadow: 0 4px 22px rgba(185,28,28,.6); }
}

/* Botón COMPLETO — gris/deshabilitado */
.btn-ppal.btn-comp {
  background:  linear-gradient(135deg,#64748B,#94A3B8) !important;
  cursor:      not-allowed !important;
  opacity:     .75;
  box-shadow:  none !important;
}
.btn-ppal.btn-comp:hover { transform: none !important; }

/* Botón INACTIVO / NO ENCONTRADO */
.btn-ppal.btn-inac {
  background:  linear-gradient(135deg,#64748B,#94A3B8) !important;
  cursor:      not-allowed !important;
  opacity:     .65;
  box-shadow:  none !important;
}
.btn-ppal.btn-inac:hover { transform: none !important; }

/* ════════════════════════════════════════════════════════════
   MÓDULO CONFIGURACIÓN DEL SISTEMA
════════════════════════════════════════════════════════════ */

/* Indicador de estado en el hero */
.est-sistema {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     10px 20px;
  border-radius: 50px;
  font-weight: 700;
  font-size:   .9rem;
}
.es-abierto { background: rgba(5,150,105,.1);  color: var(--vd); border: 1.5px solid rgba(5,150,105,.25); }
.es-cerrado { background: rgba(220,38,38,.1);  color: var(--ro); border: 1.5px solid rgba(220,38,38,.25); }
.es-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.es-abierto .es-dot { background: var(--vd); animation: dotPulso .9s ease-in-out infinite alternate; }
.es-cerrado .es-dot { background: var(--ro); }

/* Caja info horario */
.cfg-info-box {
  background:    var(--cie);
  border:        1.5px solid var(--gb);
  border-radius: var(--rs);
  padding:       12px 14px;
  font-size:     .85rem;
  color:         var(--tx2);
}

/* Fila de toggle */
.cfg-toggle-row {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         16px;
}
.cfg-toggle-titulo { font-weight: 700; font-size: .92rem; color: var(--tx); margin-bottom: 4px; }
.cfg-toggle-desc   { font-size: .8rem; color: var(--tx3); }

/* Toggle switch visual */
.cfg-toggle-btn {
  position:     relative;
  width:        52px;
  height:       28px;
  border-radius: 50px;
  border:       none;
  cursor:       pointer;
  flex-shrink:  0;
  transition:   background .25s;
}
.tog-on  { background: var(--vd); }
.tog-off { background: #94A3B8; }
.tog-knob {
  position:     absolute;
  top:          4px;
  width:        20px;
  height:       20px;
  border-radius: 50%;
  background:   white;
  box-shadow:   0 1px 4px rgba(0,0,0,.2);
  transition:   left .25s;
}
.tog-on  .tog-knob { left: 28px; }
.tog-off .tog-knob { left: 4px; }

/* Tarjeta con alerta (cierre forzoso activo) */
.tcard-alerta {
  border-color: rgba(220,38,38,.4) !important;
  box-shadow:   0 0 0 3px rgba(220,38,38,.08) !important;
}

/* Caja emergencia activa */
.cfg-emergencia-activa {
  text-align:    center;
  padding:       20px;
  background:    rgba(220,38,38,.06);
  border-radius: var(--rs);
  border:        1.5px solid rgba(220,38,38,.2);
  color:         var(--ro);
  margin-bottom: 16px;
}

/* Botones de emergencia */
.btn-emergencia {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         8px;
  padding:     14px 22px;
  border-radius: var(--rs);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size:   .9rem;
  font-weight: 800;
  cursor:      pointer;
  border:      none;
  transition:  all .22s;
  letter-spacing: .2px;
}
.btn-emergencia-act {
  background: linear-gradient(135deg, #9B1C1C, #EF4444);
  color:      white;
  box-shadow: 0 4px 16px rgba(185,28,28,.35);
  animation:  btnSalidaPulso 2s ease-in-out infinite;
}
.btn-emergencia-act:hover {
  background: linear-gradient(135deg, #7F1D1D, #DC2626);
  transform:  translateY(-2px);
}
.btn-emergencia-des {
  background: linear-gradient(135deg, var(--vd), #34D399);
  color:      white;
  box-shadow: 0 4px 16px rgba(5,150,105,.3);
}
.btn-emergencia-des:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(5,150,105,.4);
}

/* Inline hint en labels */
.fhint-inline {
  font-size:   .72rem;
  color:       var(--tx3);
  font-weight: 400;
  font-style:  italic;
}