/* ================================================================
   EPET N1 — Login / autenticación · Portal de Alumnos
   Extraído de mvc/previews.class.php::styleCSS()
   ================================================================ */

/* ----------------------------------------------------------------
   TOKENS DE MARCA — Portal de Alumnos
   Azul institucional: #162454.
   Consumir estas variables en los componentes del portal; no repetir
   el hex. Documentación: docs/branding.md
   ---------------------------------------------------------------- */
:root{
  /* ---------- Marca ---------- */
  --color-primary-alumnos:      #162454; /* azul institucional EPET */
  --color-primary-alumnos-deep: #0e1838; /* fondo de documento / sombras */
  --color-primary-alumnos-soft: #24346b; /* superficies elevadas */
  --color-accent:               #f0b91f; /* dorado EPET */
  --color-accent-dark:          #c9971c;
  --color-on-primary:           #ffffff;
  --color-on-primary-muted:     #cfd8ec;

  /* ---------- Compatibilidad con el skin anterior (negro/dorado) ---------- */
  --epet-black:#191919;
  --epet-black-2:#242424;
  --epet-gray:#8a8a8a;
  --epet-gray-light:var(--color-on-primary-muted);
  --epet-gold:var(--color-accent);
  --epet-gold-dark:var(--color-accent-dark);
  --epet-red:#e2231a;
}
.fondo{
background:var(--color-primary-alumnos-deep);
min-height:100vh;
}
.logo{max-width:50px;}

.epet-shell,.epet-shell *{box-sizing:border-box;}
.epet-shell{display:flex;min-height:100vh;}
.epet-aside{
position:relative;
flex:1 1 44%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
padding:34vh 32px 40px;
background:var(--color-primary-alumnos-deep);
overflow:hidden;
}
/* La fotografía ocupa todo el panel y el degradé azul la cubre como
   una capa encima (::after). El texto queda por arriba de ambas. */
.epet-aside-photo{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
object-position:center;
z-index:0;
}
.epet-aside::after{
content:"";
position:absolute; inset:0;
z-index:1;
pointer-events:none;
background:
radial-gradient(circle at 84% 4%, rgba(92,124,210,.38), transparent 52%),
linear-gradient(180deg,
rgba(10,18,44,.97) 0%,
rgba(22,36,84,.95) 26%,
rgba(22,36,84,.90) 40%,
rgba(22,36,84,.55) 50%,
rgba(14,24,56,.18) 64%,
rgba(14,24,56,.30) 100%);
}
.epet-aside .epet-ring{
position:absolute;
width:70vh;height:70vh;
max-width:520px;max-height:520px;
border:1px solid rgba(240,185,31,.18);
border-radius:50%;
z-index:2;
}
.epet-aside h1{
position:relative;
z-index:3;
color:var(--color-on-primary);
font-family:"Poppins",sans-serif;
font-weight:700;
font-size:2.1rem;
letter-spacing:.5px;
margin:0 0 8px;
text-align:center;
text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.epet-aside h1 span{color:var(--color-accent);}
.epet-aside p.tag{
position:relative;
z-index:3;
color:var(--color-on-primary-muted);
font-size:.82rem;
letter-spacing:2.5px;
text-transform:uppercase;
margin:0;
text-align:center;
text-shadow:0 1px 10px rgba(0,0,0,.45);
}

.epet-main{
flex:1 1 56%;
min-width:0;
display:flex;
align-items:center;
justify-content:center;
background:#f4f4f5;
padding:40px 24px;
}
.epet-card{width:100%;max-width:380px;min-width:0;position:relative;animation:epetFadeUp .7s ease .1s both;}
.epet-card.epet-card-wide{max-width:560px;}
@keyframes epetFadeUp{
from{opacity:0;transform:translateY(14px);}
to{opacity:1;transform:translateY(0);}
}
.epet-card h2{
font-family:"Poppins",sans-serif;
font-weight:700;
font-size:1.4rem;
color:var(--epet-black);
margin:0 0 4px;
}
.epet-card p.sub{color:#767676;margin:0 0 24px;font-size:.88rem;line-height:1.45;}
.epet-card h4{
font-family:"Poppins",sans-serif;
font-weight:700;
font-size:1rem;
color:var(--epet-black);
margin:22px 0 2px;
}
.epet-card h4:first-of-type{margin-top:4px;}

.epet-field{position:relative;margin-bottom:14px;}
.epet-field i{
position:absolute; left:15px; top:50%;
transform:translateY(-50%);
color:#a8a8a8; font-size:.95rem;
}
.epet-input,
input.epet-input,
.epet-field input{
width:100%;
padding:12px 15px 12px 40px;
border:1.5px solid #e2e2e4;
border-radius:10px;
background:#fff;
font-size:.92rem;
color:var(--epet-black);
transition:border-color .15s,box-shadow .15s;
}
.epet-field-labeled input,
.epet-field-labeled select{
width:100%;
padding:11px 14px;
border:1.5px solid #e2e2e4;
border-radius:10px;
background:#fff;
font-size:.9rem;
color:var(--epet-black);
transition:border-color .15s,box-shadow .15s;
}
.epet-field input:focus,
.epet-field-labeled input:focus{
outline:none;
border-color:var(--epet-gold);
box-shadow:0 0 0 3px rgba(240,185,31,.18);
}
.epet-field input.epet-has-eye{padding-right:46px;}
.epet-eye{
position:absolute; right:8px; top:50%;
transform:translateY(-50%);
width:34px; height:34px;
border:0; background:transparent; border-radius:8px;
color:#a8a8a8; cursor:pointer; padding:0;
display:flex; align-items:center; justify-content:center;
}
.epet-eye:hover,.epet-eye:focus-visible{color:var(--epet-black);outline:none;background:rgba(0,0,0,.04);}
.epet-field .epet-eye i{position:static;transform:none;color:inherit;}
.epet-field input.border-warning,
.epet-field-labeled input.border-warning{
border-color:var(--epet-red) !important;
box-shadow:0 0 0 3px rgba(226,35,26,.14);
}
.epet-field-labeled{margin-bottom:14px;}
.epet-field-labeled label{
display:block;
font-size:.8rem;
font-weight:600;
color:#4a4a4a;
margin-bottom:5px;
}
.epet-grid-2{
display:grid;
grid-template-columns:1fr;
gap:0 14px;
}
@media (min-width:576px){
.epet-grid-2{grid-template-columns:1fr 1fr;}
}

.epet-submit{
width:100%;
border:0;
border-radius:10px;
padding:12px 16px;
margin-top:6px;
font-weight:600;
font-size:.92rem;
color:var(--epet-black);
background:linear-gradient(135deg,var(--epet-gold) 0%,var(--epet-gold-dark) 100%);
box-shadow:0 10px 22px -8px rgba(201,151,28,.55);
cursor:pointer;
transition:transform .12s, box-shadow .12s, filter .12s;
display:flex; align-items:center; justify-content:center; gap:8px;
text-decoration:none;
}
.epet-submit:hover{filter:brightness(1.06);transform:translateY(-1px);color:var(--epet-black);text-decoration:none;}
.epet-submit:active{transform:translateY(0);}

.epet-links{
text-align:center;
font-size:.82rem;
color:#767676;
margin:2px 0 18px;
}
.epet-links a{color:var(--epet-black);font-weight:600;text-decoration:none;}
.epet-links a:hover{color:var(--epet-gold-dark);}
.epet-links span{margin:0 6px;color:#c7c7c7;}

.epet-divider{
display:flex; align-items:center; gap:10px;
margin:22px 0 14px;
color:#9a9a9a; font-size:.78rem; text-transform:uppercase; letter-spacing:1px;
}
.epet-divider::before,.epet-divider::after{content:"";flex:1;height:1px;background:#e4e4e4;}

.epet-reg-links{display:flex;flex-direction:column;gap:10px;}
.epet-reg-btn{
display:flex; align-items:center; justify-content:center; gap:8px;
padding:11px 14px;
border:1.5px solid #e2e2e4;
border-radius:10px;
color:var(--epet-black);
font-weight:600;
font-size:.86rem;
text-decoration:none;
transition:border-color .15s,background .15s;
}
.epet-reg-btn:hover{border-color:var(--epet-gold-dark);background:#fffaf0;color:var(--epet-black);text-decoration:none;}

.epet-alert{margin:14px 0 0;padding:11px 14px;border-radius:10px;font-size:.85rem;line-height:1.4;}
.epet-alert.danger{background:#fdecec;border:1px solid rgba(226,35,26,.25);color:#8a1a14;text-align:center;}
.epet-alert.ok{background:#eafaf0;border:1px solid rgba(40,167,69,.3);color:#1e6b34;text-align:center;}

.epet-hint{
background:#fafafa;
border:1px solid #ececec;
border-left:3px solid var(--epet-gold-dark);
border-radius:8px;
padding:10px 14px;
font-size:.82rem;
color:#5a5a5a;
margin-bottom:18px;
}
.epet-hint a{color:var(--epet-black);font-weight:600;}
.epet-note{font-size:.78rem;color:#8a8a8a;margin:-6px 0 14px;}

.epet-danger-txt{color:var(--epet-red);font-size:.8rem;margin:4px 0 14px;}

.epet-back{
background:none;border:0;
display:inline-flex;align-items:center;gap:6px;
color:#8a8a8a;font-size:.82rem;font-weight:600;
margin-bottom:14px;cursor:pointer;padding:0;
}
.epet-back:hover{color:var(--epet-black);}

.epet-success{
text-align:center;
}
.epet-success .epet-check{
width:56px;height:56px;border-radius:50%;
background:#eafaf0;color:#28a745;
display:flex;align-items:center;justify-content:center;
margin:0 auto 16px;font-size:1.6rem;
}

.epet-forge{
position:fixed; inset:0; z-index:9999;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
background:radial-gradient(circle at 50% 45%, rgba(240,185,31,.22), transparent 60%), var(--epet-black);
opacity:0; pointer-events:none;
transition:opacity .3s ease;
}
.epet-forge.active{opacity:1;pointer-events:all;}
.epet-forge-emblem-wrap{position:relative;width:180px;height:180px;}
.epet-forge-img{position:relative;z-index:2;width:100%;height:100%;display:block;}
.epet-forge.active .epet-forge-img{animation:epetForgeGlow .9s ease forwards;}
.epet-forge-ring{
position:absolute; inset:-6%;
border:2px solid var(--epet-gold);
border-radius:50%;
opacity:0;
}
.epet-forge.active .epet-forge-ring{animation:epetRingBurst 1s ease forwards;}
.epet-forge-glow{
position:absolute; inset:8%;
border-radius:50%;
background:radial-gradient(circle, rgba(240,185,31,.9), rgba(240,185,31,0) 70%);
opacity:0;
}
.epet-forge.active .epet-forge-glow{animation:epetGlowBurst .9s ease forwards;}
.epet-forge-spark{
position:absolute; top:50%; left:50%;
width:6px;height:6px;border-radius:50%;
background:var(--epet-gold);
box-shadow:0 0 8px 2px rgba(240,185,31,.85);
opacity:0;
}
.epet-forge.active .epet-forge-spark{animation:epetSparkBurst .8s ease-out forwards;}
.epet-forge-text{
color:#fff;
font-family:"Poppins",sans-serif;
font-weight:600;
font-size:1rem;
letter-spacing:1px;
opacity:0;
}
.epet-forge.active .epet-forge-text{animation:epetFadeUp .5s ease .35s forwards;}
@keyframes epetForgeGlow{
0%{filter:drop-shadow(0 0 0 rgba(240,185,31,0)) brightness(1);transform:scale(1);}
45%{filter:drop-shadow(0 0 26px rgba(240,185,31,.85)) brightness(1.25);transform:scale(1.06);}
100%{filter:drop-shadow(0 0 14px rgba(240,185,31,.55)) brightness(1.05);transform:scale(1);}
}
@keyframes epetRingBurst{
0%{opacity:.9;transform:scale(.6);border-width:3px;}
100%{opacity:0;transform:scale(1.55);border-width:0;}
}
@keyframes epetGlowBurst{
0%{opacity:0;transform:scale(.6);}
40%{opacity:.9;transform:scale(1.15);}
100%{opacity:0;transform:scale(1.4);}
}
@keyframes epetSparkBurst{
0%{opacity:1;transform:translate(-50%,-50%) scale(1);}
100%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.3);}
}

/* En pantallas bajas (notebooks 1366x768) la foto se achica para no
   empujar el contenido fuera del panel. */
@media (max-width:900px){
.epet-shell{flex-direction:column;}
.epet-aside{
flex:0 0 auto;
min-height:320px;
justify-content:center;
padding:36px 24px;
}
.epet-aside::after{
background:
radial-gradient(circle at 84% 4%, rgba(92,124,210,.30), transparent 55%),
linear-gradient(180deg,
rgba(10,18,44,.94) 0%,
rgba(22,36,84,.92) 45%,
rgba(22,36,84,.78) 68%,
rgba(14,24,56,.55) 100%);
}
.epet-aside .epet-ring{width:80vw;height:80vw;}
.epet-aside h1{font-size:1.5rem;}
.epet-aside p.tag{font-size:.74rem;}
.epet-main{flex:1 1 auto;padding:36px 24px 48px;}
.epet-card{max-width:400px;}
.epet-card.epet-card-wide{max-width:480px;}
}
@media (max-width:420px){
.epet-aside{min-height:270px;padding:28px 20px;}
.epet-aside h1{font-size:1.25rem;}
}