/* ERP EBEN-EZER — estilos propios, sin build (sin Tailwind/Vite). */
:root{
  --nv:#12314a; --bl:#1f5d87; --bl2:#2f7ea4; --mint:#55a6b5; --gold:#b8860b; --orange:#ee8b00;
  --ink:#243642; --muted:#5d7280; --line:#dfe7ec; --bg:#f4f7f9; --card:#fff;
  --ok:#1a7a4e; --ok-bg:#e6f4ec; --er:#c0392b; --er-bg:#fbe9e7; --wn:#b8860b; --wn-bg:#fbf3dc;
}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--ink);}
a{color:var(--bl);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ── Login ── */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#0f2c47 0%,var(--bl) 55%,var(--bl2) 100%);padding:44px 20px;}
/* el azul del login cubre toda la página, sin el marco del portal */
.portal-body:has(.auth-wrap){background:var(--nv);}
.portal-wrap:has(.auth-wrap){max-width:none;margin:0;padding:0;}

.auth-brand{text-align:center;margin-bottom:24px;max-width:540px;}
.auth-brand img{width:96px;height:96px;object-fit:cover;border-radius:50%;background:#fff;
  border:3px solid rgba(255,255,255,.9);box-shadow:0 10px 28px rgba(0,0,0,.3);}
.auth-brand h2{color:#fff;font-size:1.4rem;font-weight:800;letter-spacing:.4px;line-height:1.25;
  margin:16px 0 5px;text-shadow:0 2px 10px rgba(0,0,0,.28);}
.auth-brand p{color:rgba(255,255,255,.8);font-size:.76rem;letter-spacing:2.5px;text-transform:uppercase;margin:0;}

.auth-card{background:#fff;border-radius:12px;box-shadow:0 22px 55px rgba(0,0,0,.32);padding:36px 34px;width:392px;max-width:100%;text-align:left;}
.auth-logo{display:block;width:60px;height:60px;object-fit:cover;border-radius:50%;margin:0 auto 14px;}

.auth-foot{margin-top:28px;text-align:center;color:rgba(255,255,255,.7);font-size:.74rem;line-height:1.75;}
.auth-foot b{color:rgba(255,255,255,.9);font-weight:600;}
.auth-card h1{font-size:1.3rem;color:var(--nv);margin:0 0 4px;}
.auth-card p.sub{color:var(--muted);font-size:.85rem;margin:0 0 22px;}
.auth-card .field{margin-bottom:16px;}
.auth-card label{display:block;font-size:.78rem;font-weight:700;color:var(--nv);margin-bottom:6px;}
.auth-card input{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;font-size:.95rem;}
.auth-card input:focus{outline:none;border-color:var(--bl2);}
.btn{display:inline-block;background:var(--bl);color:#fff;border:none;padding:11px 18px;border-radius:8px;
  font-weight:700;font-size:.9rem;cursor:pointer;}
.btn:hover{background:var(--bl2);text-decoration:none;}
.btn.full{width:100%;text-align:center;}
.btn.danger{background:var(--er);}
.btn.orange{background:var(--orange);}
.err{background:var(--er-bg);color:var(--er);border-radius:8px;padding:10px 12px;font-size:.85rem;margin-bottom:14px;}
.err ul{margin:0;padding-left:18px;}
.ok-msg{background:var(--ok-bg);color:var(--ok);border-radius:8px;padding:10px 12px;font-size:.85rem;margin-bottom:14px;}

/* ── Layout / nav ── */
.topbar{background:var(--nv);color:#fff;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:58px;}
.topbar .brand{font-weight:800;letter-spacing:.5px;display:flex;align-items:center;gap:11px;}
.topbar .brand small{display:block;font-weight:400;font-size:.68rem;color:rgba(255,255,255,.6);letter-spacing:1px;}
.brand-logo{width:36px;height:36px;object-fit:contain;background:#fff;border-radius:7px;padding:3px;flex-shrink:0;}
.topbar nav{display:flex;gap:4px;}
.topbar nav a{color:rgba(255,255,255,.82);padding:8px 12px;border-radius:6px;font-size:.86rem;font-weight:600;}
.topbar nav a:hover,.topbar nav a.active{background:rgba(255,255,255,.14);color:#fff;text-decoration:none;}
.topbar .who{display:flex;align-items:center;gap:12px;font-size:.82rem;color:rgba(255,255,255,.85);}
.topbar .who span.rol{background:rgba(255,255,255,.14);padding:2px 9px;border-radius:20px;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;}
.topbar form{margin:0;}
.topbar .logout-btn{background:none;border:1px solid rgba(255,255,255,.35);color:#fff;padding:6px 12px;border-radius:6px;font-size:.8rem;cursor:pointer;}
.topbar .logout-btn:hover{background:rgba(255,255,255,.14);}

.wrap{max-width:1180px;margin:0 auto;padding:28px 24px;}
h1.page-title{font-size:1.35rem;color:var(--nv);margin:0 0 4px;}
p.page-sub{color:var(--muted);font-size:.88rem;margin:0 0 22px;}

.flash-ok{background:var(--ok-bg);color:var(--ok);border-radius:8px;padding:12px 14px;margin-bottom:18px;font-weight:600;font-size:.88rem;}
.flash-er{background:var(--er-bg);color:var(--er);border-radius:8px;padding:12px 14px;margin-bottom:18px;font-weight:600;font-size:.88rem;}

/* ── Cards / stats ── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px;}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;box-shadow:0 2px 8px rgba(18,49,74,.06);}
.stat .n{font-size:1.7rem;font-weight:800;color:var(--nv);}
.stat .l{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700;}

.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px;box-shadow:0 2px 8px rgba(18,49,74,.06);margin-bottom:20px;}
.panel h2{font-size:1.02rem;color:var(--nv);margin:0 0 16px;}

/* ── Tabla ── */
table.dt{width:100%;border-collapse:collapse;font-size:.88rem;}
table.dt th{text-align:left;background:var(--nv);color:#fff;padding:9px 12px;font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;}
table.dt td{padding:10px 12px;border-bottom:1px solid var(--line);}
table.dt tr:hover td{background:var(--bg);}
.chip{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
.chip.activo,.chip.pagado{background:var(--ok-bg);color:var(--ok);}
.chip.inactivo,.chip.pendiente{background:var(--wn-bg);color:var(--wn);}
.chip.suspendido_por_deuda,.chip.egresado{background:var(--er-bg);color:var(--er);}
.chip.becado,.chip.exonerado{background:#eef1fb;color:#3949ab;}

/* ── Form ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:.78rem;font-weight:700;color:var(--nv);margin-bottom:6px;}
.field input,.field select{width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:7px;font-size:.9rem;font-family:inherit;}
.field input:focus,.field select:focus{outline:none;border-color:var(--bl2);}
.field small.help{display:block;color:var(--muted);font-size:.75rem;margin-top:4px;}
.actions{display:flex;gap:10px;margin-top:18px;}
.btn-ghost{background:none;border:1.5px solid var(--line);color:var(--muted);padding:10px 18px;border-radius:8px;font-size:.88rem;cursor:pointer;}
.btn-ghost:hover{border-color:var(--bl);color:var(--bl);text-decoration:none;}

.searchbar{display:flex;gap:8px;margin-bottom:18px;}
.searchbar input{flex:1;padding:10px 14px;border:1.5px solid var(--line);border-radius:8px;font-size:.9rem;}

.empty{text-align:center;padding:30px;color:var(--muted);font-size:.9rem;}
@media(max-width:760px){
  .stats-row{grid-template-columns:1fr 1fr;}
  .form-grid{grid-template-columns:1fr;}
  .topbar{flex-wrap:wrap;height:auto;padding:10px 16px;gap:8px;}
  .topbar nav{order:3;width:100%;overflow-x:auto;}
}

/* ── Portal del estudiante (estilo miESPE) ── */
.portal-body{background:var(--bg);}
.portal-head{background:linear-gradient(150deg,var(--nv),var(--bl2));color:#fff;padding-bottom:26px;}
.portal-head-inner{max-width:1000px;margin:0 auto;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;}
.portal-brand{font-size:1.05rem;font-weight:400;display:flex;align-items:center;gap:12px;}
.portal-brand small{display:block;font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.65);margin-top:2px;}
.portal-logo{width:40px;height:40px;object-fit:contain;background:#fff;border-radius:8px;padding:3px;flex-shrink:0;}
.portal-salir{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;padding:7px 14px;border-radius:8px;font-size:.82rem;cursor:pointer;}
.portal-salir:hover{background:rgba(255,255,255,.22);}
.portal-identity{text-align:center;margin-top:8px;}
.portal-avatar{width:92px;height:92px;border-radius:50%;background:#fff;color:var(--nv);font-size:2rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;border:4px solid rgba(255,255,255,.5);}
.portal-identity h1{font-size:1.4rem;margin:0 0 4px;font-weight:700;letter-spacing:.5px;}
.portal-ced{margin:0;font-size:.85rem;color:rgba(255,255,255,.8);}

.portal-wrap{max-width:1000px;margin:-14px auto 0;padding:0 24px 60px;position:relative;}
.portal-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px;box-shadow:0 2px 10px rgba(18,49,74,.08);margin-bottom:18px;}
.portal-card h2{color:var(--nv);margin:6px 0 8px;font-size:1.15rem;}
.portal-card h3{color:var(--nv);margin:0 0 12px;font-size:1rem;}
.portal-card p{margin:4px 0;font-size:.9rem;}
.portal-matricula-open{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;border-left:5px solid var(--ok);}
.portal-badge{display:inline-block;background:var(--ok-bg);color:var(--ok);padding:3px 12px;border-radius:20px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;}
.portal-badge.gris{background:var(--wn-bg);color:var(--wn);}
.portal-countdown{font-weight:700;color:var(--nv);font-size:1rem !important;margin-top:8px !important;font-variant-numeric:tabular-nums;}
.portal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;}
.portal-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:.88rem;}
.portal-dl dt{color:var(--muted);font-weight:700;}
.portal-dl dd{margin:0;}
.portal-list{list-style:none;margin:0;padding:0;}
.portal-list li{padding:8px 0;border-bottom:1px solid var(--line);font-size:.88rem;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.portal-list li:last-child{border-bottom:none;}
@media(max-width:760px){
  .portal-matricula-open{flex-direction:column;align-items:flex-start;}
}

/* ── Portal · barra de navegación ── */
.portal-nav{max-width:1000px;margin:0 auto;padding:0 24px;display:flex;gap:4px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);}
.portal-nav a{color:rgba(255,255,255,.8);padding:10px 14px;font-size:.85rem;font-weight:600;border-bottom:3px solid transparent;}
.portal-nav a:hover{color:#fff;text-decoration:none;}
.portal-nav a.active{color:#fff;border-bottom-color:var(--gold);}

/* ── Portal · aviso de matrícula ── */
.portal-alert{max-width:1000px;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--ok);
  border-radius:12px;padding:16px 22px;box-shadow:0 2px 10px rgba(18,49,74,.08);margin-bottom:22px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;}
.portal-alert.gris{border-left-color:var(--wn);}
.portal-alert strong{display:block;color:var(--nv);font-size:1.05rem;margin:4px 0;}
.portal-alert .portal-countdown{font-weight:700;color:var(--nv);font-variant-numeric:tabular-nums;}

.portal-section-title{font-size:1.15rem;color:var(--nv);margin:6px 0 16px;font-weight:800;}

/* ── Portal · tarjetas estilo portal universitario ── */
.card-deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;}
.e-card{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 2px 10px rgba(18,49,74,.08);display:flex;flex-direction:column;transition:box-shadow .15s ease,transform .15s ease;}
.e-card:hover{box-shadow:0 12px 26px rgba(18,49,74,.16);transform:translateY(-3px);}
.e-card-media{height:120px;display:flex;align-items:center;justify-content:center;font-size:2.6rem;
  background:linear-gradient(135deg,var(--bl),var(--bl2));color:rgba(255,255,255,.92);}
.e-card-media.m-matricula{background:linear-gradient(135deg,#1f5d87,#2f7ea4);}
.e-card-media.m-perfil{background:linear-gradient(135deg,#0d7a6e,#22a99a);}
.e-card-media.m-materias{background:linear-gradient(135deg,#8a5a0c,#c47a0a);}
.e-card-media.m-notas{background:linear-gradient(135deg,#5b21b6,#7c3aed);}
.e-card-media.m-aula{background:linear-gradient(135deg,#12314a,#1f5d87);}
.e-card-media.m-historial{background:linear-gradient(135deg,#37474f,#607d8b);}
.e-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;}
.e-card-body h3{margin:0 0 6px;color:var(--nv);font-size:1.02rem;}
.e-card-body p{margin:0 0 14px;font-size:.85rem;color:var(--muted);flex:1;}
.e-card-actions{display:flex;gap:8px;flex-wrap:wrap;}
.ebtn{display:inline-block;padding:8px 14px;border-radius:6px;font-size:.8rem;font-weight:700;text-align:center;}
.ebtn:hover{text-decoration:none;opacity:.92;}
.ebtn.blue{background:var(--bl);color:#fff;}
.ebtn.yellow{background:var(--gold);color:#fff;}

.perfil-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;}

/* ── Expediente (perfil completo de la persona) ── */
.exp-head{display:flex;align-items:center;gap:18px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:20px 24px;box-shadow:0 2px 8px rgba(18,49,74,.06);margin-bottom:14px;flex-wrap:wrap;}
.exp-avatar{width:74px;height:74px;border-radius:50%;background:var(--nv);color:#fff;font-size:1.5rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
.exp-avatar img{width:100%;height:100%;object-fit:cover;}
.exp-head-info{flex:1;min-width:200px;}
.exp-head-info h1{font-size:1.3rem;color:var(--nv);margin:0 0 2px;letter-spacing:.3px;}
.exp-head-info p{margin:0;color:var(--muted);font-size:.88rem;}
.exp-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:18px;}
.exp-bar > div{background:var(--card);padding:12px 16px;display:flex;flex-direction:column;}
.exp-bar .l{font-size:.66rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;}
.exp-bar .v{font-size:1.05rem;font-weight:800;color:var(--nv);}
.exp-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;}
.exp-dl{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0;font-size:.88rem;}
.exp-dl dt{color:var(--muted);font-weight:700;}
.exp-dl dd{margin:0;}
.panel h2{font-size:1rem;color:var(--nv);margin:0 0 14px;}

/* ── Portal · pantalla de matrícula ── */
.mat-tipo{display:flex;gap:34px;flex-wrap:wrap;}
.mat-tipo > div{display:flex;flex-direction:column;}
.mat-tipo .l{font-size:.7rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;}
.mat-tipo .v{font-size:1.25rem;font-weight:800;color:var(--nv);}
.mat-selector{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px;}
.mat-selector select{min-width:280px;}
.mat-fecha{border-top:1px solid var(--line);padding-top:12px;text-align:center;}
.mat-fecha p{margin:4px 0;font-size:.92rem;}
.mat-fecha .portal-countdown{font-size:1.15rem !important;}
.mat-table th:first-child,.mat-table td:first-child{text-align:center;}
.mat-table tr.row-ya td,.mat-table tr.row-lleno td{opacity:.55;}
.mat-confirm{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap;}
.mat-confirm #matCount{font-weight:700;color:var(--nv);font-size:.9rem;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
@media(max-width:760px){
  .mat-tipo{gap:18px;}
}