/* ============================================================================
   Tema premium IFVG — capa visual compartida (se carga DESPUÉS de los estilos
   base y los reemplaza). Cambiar aquí = cambia en todo el sistema.
   Dirección: sobrio y elegante. Azul marino profundo como protagonista, papel
   frío casi blanco, dorado solo como detalle, sombras teñidas de azul.
   ============================================================================ */
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/geist-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/geist-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url(/fuentes/geist-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url(/fuentes/geist-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url(/fuentes/geist-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url(/fuentes/geist-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;src:url(/fuentes/geist-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;src:url(/fuentes/geist-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/instrument-serif-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/instrument-serif-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/fuentes/instrument-serif-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/fuentes/instrument-serif-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --paper:#F3F5F9;--line:#E2E6EF;--ink:#121A36;--card:#FFFFFF;
  --muted:#667090;
  --fuente:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fuente-display:'Instrument Serif','Iowan Old Style',Georgia,serif;
  --sombra-card:0 1px 2px rgba(18,26,54,.04),0 14px 34px -14px rgba(22,33,74,.18);
  --sombra-elev:0 18px 44px -14px rgba(14,21,48,.38);
  --sombra-boton:0 6px 16px -6px rgba(22,33,74,.55),inset 0 1px 0 rgba(255,255,255,.14);
  --grad-boton:linear-gradient(180deg,#22336F 0%,#16214A 100%);
  --grad-boton-hover:linear-gradient(180deg,#2A3E83 0%,#1B2B63 100%);
  --ease:cubic-bezier(.32,.72,0,1);
}
body{font-family:var(--fuente);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11";letter-spacing:-.005em}
button,input,select,textarea{font-family:inherit}
.mono{font-family:var(--fuente);font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-.01em}
.muted,label.muted,.kpi-label,.kpi-sub,.side-tit{color:var(--muted)}
h1,h2,h3{text-wrap:balance}

/* ---- Encabezado ---- */
header{background:linear-gradient(120deg,#0C1330 0%,#16214A 62%,#1A3A78 130%);box-shadow:0 10px 30px -14px rgba(14,21,48,.6);padding:12px 22px}
header::after{height:2px;background:linear-gradient(90deg,transparent,#2C7BC0 30%,#B5171B 70%,transparent);opacity:.9}
.brand{font-weight:600;font-size:15px;letter-spacing:-.01em}
.brand-logo{height:26px}
header .pill{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:600;box-shadow:none;padding:5px 13px!important;transition:background .25s var(--ease),transform .25s var(--ease)}
header .pill:hover{background:rgba(255,255,255,.2)}
header .pill:active{transform:scale(.97)}

/* ---- Menú lateral y barra inferior ---- */
.ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:900px){
  .side{border-radius:22px;padding:12px 10px;box-shadow:var(--sombra-card);scrollbar-width:thin;margin-left:18px}
  .side-area+.side-area{margin-top:6px;border-top:1px solid var(--line)}
  .side-tit{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.14em;color:#8A93AE;padding:14px 10px 6px}
  .side-tit .ico{width:15px;height:15px;stroke-width:1.7}
  .side button{font-size:13.5px;font-weight:500;color:#2A3563;padding:8px 12px 8px 14px;border-radius:12px;position:relative;transition:background .25s var(--ease),color .25s var(--ease),padding .25s var(--ease)}
  .side button:hover{background:#EEF1F8;padding-left:17px}
  .side button.active{background:#E9EEFA;color:#16214A;font-weight:600;box-shadow:none}
  .side button.active::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:linear-gradient(180deg,#2C7BC0,#16214A)}
}
.bottomnav{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--line);box-shadow:0 -10px 30px -16px rgba(14,21,48,.25)}
.bottomnav button{font-weight:500;font-size:10.5px;color:#8A93AE;gap:3px;transition:color .25s var(--ease)}
.bottomnav button .ico{width:22px;height:22px;stroke-width:1.5}
.bottomnav button.active{color:#16214A;font-weight:600}
.bottomnav button.active .ico{stroke:#1B68AC;stroke-width:1.9}

/* ---- Tarjetas y datos ---- */
.card{border-radius:22px;padding:20px;box-shadow:var(--sombra-card)}
.kpi-grid{gap:14px}
.kpi-card{border-radius:20px;padding:18px 18px 16px;box-shadow:var(--sombra-card);position:relative;overflow:hidden}
.kpi-label{font-size:10.5px;letter-spacing:.12em;font-weight:600;color:#7E88A6}
.kpi-valor{font-family:var(--fuente-display);font-weight:400;font-size:clamp(26px,2.3vw,34px);white-space:nowrap;letter-spacing:-.02em;line-height:1.05;margin-top:8px;color:#121A36;font-variant-numeric:tabular-nums}
.kpi-sub{font-size:12px;margin-top:4px}
.big{font-weight:600;letter-spacing:-.02em}
.item{border-top-color:var(--line)}
.error-box{border-radius:14px;background:#FBECEC;color:#7A1317;border:1px solid #F1CFCF}
.ok-box{border-radius:14px;border:1px solid #CBE5D4}
.tag{font-weight:600;letter-spacing:.01em}

/* ---- Botones y campos ---- */
.pill{border-radius:999px;font-weight:600;color:#16214A;border:1px solid #D6DBE8;background:#fff;transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.pill:hover{border-color:#B6BFD6;background:#F7F9FD}
.pill:active{transform:scale(.97)}
.pill.active,.pill-primary{background:var(--grad-boton);color:#fff;border-color:transparent;box-shadow:var(--sombra-boton)}
.pill.active:hover,.pill-primary:hover{background:var(--grad-boton-hover);transform:translateY(-1px)}
.pill.active:active,.pill-primary:active{transform:scale(.97)}
:focus-visible{outline:2px solid #2C7BC0;outline-offset:2px}
input,select,textarea{border:1px solid #DCE1EC;background:#fff;border-radius:12px;padding:10px 13px;font-size:14px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
input:focus,select:focus,textarea:focus{outline:none;border-color:#2C7BC0;box-shadow:0 0 0 4px rgba(44,123,192,.16)}
label.muted{font-size:10.5px;letter-spacing:.1em;font-weight:600;text-transform:uppercase}
.modal-box{border-radius:24px;box-shadow:0 30px 80px -20px rgba(14,21,48,.55)}

/* ---- Inicio de sesión ---- */
.login-shell{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);background:var(--paper)}
.login-hero{position:relative;overflow:hidden;color:#fff;padding:56px 64px;display:flex;flex-direction:column;justify-content:space-between;
  background:radial-gradient(900px 520px at 15% 0%,#24418A 0%,transparent 60%),radial-gradient(700px 500px at 100% 100%,#6E1216 0%,transparent 55%),linear-gradient(160deg,#0C1330,#16214A 70%)}
.login-hero::after{content:'';position:absolute;right:-90px;bottom:-110px;width:520px;height:520px;background:url(/marca/isotipo.png) center/contain no-repeat;opacity:.09;transform:rotate(-8deg);pointer-events:none}
.login-hero .eyebrow{display:inline-flex;align-self:flex-start;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 14px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:#C9D6F2}
.login-hero h1{font-family:var(--fuente-display);font-weight:400;font-size:clamp(40px,4.6vw,66px);line-height:1.02;letter-spacing:-.02em;margin:0;max-width:11ch}
.login-hero h1 em{font-style:italic;color:#DCC77A}
.login-hero p{margin:18px 0 0;max-width:38ch;color:#B7C3E3;font-size:15px;line-height:1.6}
.login-hero .logo-fila{display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:-.01em}
.login-hero .logo-fila img{height:30px;background:#fff;border-radius:12px;padding:8px 9px;box-sizing:content-box}
.login-form-lado{display:flex;align-items:center;justify-content:center;padding:40px 28px}
.login-form-lado .card{width:100%;max-width:400px;padding:34px 30px;border-radius:28px;box-shadow:0 30px 70px -28px rgba(22,33,74,.35),0 2px 6px rgba(18,26,54,.05)}
.login-form-lado h2{font-family:var(--fuente-display);font-weight:400;font-size:34px;letter-spacing:-.02em;margin:0 0 4px}
.login-hero>*,.login-form-lado .card{animation:entra .9s var(--ease) both}
.login-hero>*:nth-child(2){animation-delay:.08s}.login-hero>*:nth-child(3){animation-delay:.16s}.login-form-lado .card{animation-delay:.12s}
@keyframes entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (max-width:860px){
  .login-shell{grid-template-columns:1fr}
  .login-hero{padding:34px 24px 40px;gap:26px}
  .login-hero h1{font-size:40px;max-width:none}
  .login-hero::after{width:300px;height:300px;right:-70px;bottom:-80px}
  .login-form-lado{padding:0 16px 40px;margin-top:-22px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---- Íconos en línea dentro de botones y textos ---- */
svg.i{width:1.15em;height:1.15em;vertical-align:-.22em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-right:.25em}

/* ---- Avisos sobrios (en vez de bloques rosas que gritan) ---- */
.error-box{background:#fff;color:#4A1013;border:1px solid #EFD3D3;border-left:4px solid #B5171B;box-shadow:0 1px 2px rgba(18,26,54,.04)}
.ok-box{background:#fff;color:#164D2C;border:1px solid #CFE6D7;border-left:4px solid #2E7D4F}
/* ---- Estados vacíos ---- */
.card>.muted:only-child,.card>.item.muted:only-child{text-align:center;padding:30px 12px;font-size:14px}
/* ---- Portal del alumno ---- */
h1{font-family:var(--fuente-display);font-weight:400;font-size:30px!important;letter-spacing:-.02em;line-height:1.1}
.cred-box{background:radial-gradient(500px 240px at 0% 0%,#24418A 0%,transparent 60%),linear-gradient(160deg,#0C1330,#16214A)!important;border-radius:24px!important}
.cred-box .num{font-family:var(--fuente-display);font-weight:400!important;letter-spacing:6px!important}
.menu button{border-radius:18px!important;border:1px solid var(--line)!important;box-shadow:var(--sombra-card);font-weight:500!important;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.menu button:hover{transform:translateY(-2px)}
.menu button:active{transform:scale(.97)}
.proximo{border-radius:16px!important}
.top{height:3px!important}

/* ---- Encabezado en celular: marca arriba, usuario abajo ---- */
@media (max-width:600px){
  header{padding:10px 16px}
  .brand{flex-wrap:wrap;row-gap:8px}
  .brand-left{font-size:14px;white-space:nowrap}
  .brand>span:last-child{font-size:11.5px!important;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
}

/* ============================================================================
   v3 — más sobrio y caro: encabezado claro, números en Geist, tarjetas de línea
   fina, menú tipo acordeón y pantalla de inicio de sesión a escala de escritorio.
   ============================================================================ */
:root{--sombra-card:0 0 0 1px rgba(22,33,74,.06),0 10px 30px -18px rgba(22,33,74,.22)}

/* Encabezado: se conserva el azul marino original (se veía mejor) */
.brand{font-weight:600;font-size:15px;letter-spacing:-.01em}
.brand-logo{height:26px}

/* Tarjetas e indicadores */
.card,.kpi-card{border:0}
.kpi-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;align-items:stretch}
.kpi-card{display:flex;flex-direction:column;padding:20px 20px 18px;min-height:132px}
.kpi-label{font-size:11px;letter-spacing:.1em;color:#7B86A6}
.kpi-valor{font-family:var(--fuente);font-weight:500;font-size:clamp(26px,2.2vw,32px);letter-spacing:-.035em;margin-top:10px;color:var(--ink)}
.kpi-sub{margin-top:auto;padding-top:8px}
h2,h3{letter-spacing:-.015em}

/* Menú lateral: Dashboard suelto + acordeón de un solo grupo abierto */
@media (min-width:900px){
  .side{padding:10px}
  .side-solo button{display:flex;align-items:center;width:100%;font-size:14px;font-weight:600;padding:10px 14px;border-radius:12px}
  .side-area{border-top:0!important;margin-top:2px!important}
  .side-solo+.side-area{margin-top:8px!important;padding-top:8px;border-top:1px solid var(--line)!important}
  .side button.side-tit{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#6F7A9A;padding:11px 12px;border-radius:12px;cursor:pointer}
  .side button.side-tit:hover{background:#F1F4FA;color:var(--ink);padding-left:12px}
  .side button.side-tit span{flex:1}
  .side button.side-tit .chev{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .35s var(--ease);opacity:.6}
  .side-area.abierta>.side-tit{color:var(--ink)}
  .side-area.abierta>.side-tit .chev{transform:rotate(90deg)}
  .side button.side-tit.con-activo{color:var(--ink)}
  .side-items{display:flex;flex-direction:column;gap:2px;margin:2px 0 8px 18px;padding-left:10px;border-left:1px solid var(--line);animation:abre .35s var(--ease) both}
  @keyframes abre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .side-items button{font-size:13.5px;padding:8px 12px}
  .side-items button.active::before{left:-11px;top:8px;bottom:8px}
}

/* Inicio de sesión: escala de escritorio (antes se veía diminuto en pantallas grandes) */
.login-hero{padding:clamp(40px,5vw,84px) clamp(40px,6vw,104px)}
.login-hero .logo-fila{font-size:clamp(17px,1.35vw,22px);gap:16px}
.login-hero .logo-fila img{height:clamp(34px,2.6vw,46px)}
.login-hero .eyebrow{font-size:clamp(11.5px,.85vw,13.5px);padding:9px 18px}
.login-hero h1{font-size:clamp(46px,5.6vw,92px)!important;max-width:12ch;line-height:1}
.login-hero p{font-size:clamp(16px,1.35vw,21px);max-width:34ch;margin-top:26px;line-height:1.55}
.login-hero>div:last-child{font-size:clamp(13px,.95vw,15px)!important}
.login-form-lado .card{max-width:clamp(400px,32vw,500px);padding:clamp(34px,3vw,48px) clamp(30px,2.8vw,44px)}
.login-form-lado h2{font-size:clamp(36px,3.2vw,50px)}
.login-form-lado .card .muted{font-size:clamp(14px,1.05vw,16px)!important}
.login-form-lado label.muted{font-size:clamp(11px,.8vw,12.5px)!important;letter-spacing:.06em!important;margin-top:6px;display:block}
.login-form-lado input{font-size:clamp(15px,1.1vw,17px);padding:clamp(12px,1vw,15px) 16px;border-radius:14px}
.login-form-lado .pill-primary{font-size:clamp(15px,1.1vw,17px)!important;padding:clamp(14px,1.1vw,17px)!important}
.kpi-card{height:100%;box-sizing:border-box}