/* ==========================================================
   Colegio Cámara Junior · renovación visual 2026
   Capa no destructiva sobre portal.css
   ========================================================== */

:root {
  --azul:#087ea4;
  --azul-claro:#22a6c7;
  --oro:#f6c945;
  --oro-claro:#ffeca6;
  --verde:#18a17b;
  --texto:#13283f;
  --suave:#617188;
  --borde:#dbe5ed;
  --fondo:#f4f8fb;
  --sombra:0 32px 90px rgba(14,45,70,.16);
}

html { background:#f4f8fb; }

body {
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 9% 13%,rgba(246,201,69,.22),transparent 24rem),
    radial-gradient(circle at 92% 78%,rgba(34,166,199,.16),transparent 28rem),
    linear-gradient(140deg,#fbfaf5 0%,#f5f9fc 46%,#edf8fb 100%);
}

body::before {
  position:fixed;
  z-index:-2;
  inset:0;
  background-image:
    linear-gradient(rgba(8,47,73,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(8,47,73,.035) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(to bottom,#000,transparent 84%);
  pointer-events:none;
  content:"";
}

.fondo-forma { filter:none; }
.fondo-forma-uno { top:-220px; right:-180px; width:520px; height:520px; border:95px solid rgba(8,126,164,.07); }
.fondo-forma-dos { bottom:-250px; left:-190px; width:560px; height:560px; border:105px solid rgba(246,201,69,.1); }

/* Acceso central */
.portal-acceso {
  grid-template-columns:minmax(0,1.06fr) minmax(410px,.94fr);
  width:min(1180px,calc(100% - 44px));
  min-height:720px;
  margin:clamp(22px,4vh,44px) auto 18px;
  overflow:hidden;
  border:1px solid rgba(8,47,73,.1);
  border-radius:36px;
  background:rgba(255,255,255,.94);
  box-shadow:var(--sombra),0 2px 0 rgba(255,255,255,.85) inset;
  animation:portal-entrada .5s cubic-bezier(.2,.8,.2,1) both;
}

.panel-institucional {
  min-height:720px;
  justify-content:center;
  padding:clamp(46px,6vw,76px);
  background:
    radial-gradient(circle at 92% 9%,rgba(246,201,69,.22),transparent 17rem),
    radial-gradient(circle at 9% 92%,rgba(34,166,199,.26),transparent 20rem),
    linear-gradient(145deg,#0a4967 0%,#087696 48%,#082f49 100%);
}

.panel-institucional::before {
  top:-165px;
  right:-130px;
  width:460px;
  height:460px;
  border:74px solid rgba(255,255,255,.055);
}

.panel-institucional::after {
  right:48px;
  bottom:42px;
  width:150px;
  height:150px;
  border:32px solid rgba(246,201,69,.13);
}

.marca-colegio { gap:25px; }

.escudo-grande {
  width:180px;
  padding:10px;
  border:1px solid rgba(255,255,255,.64);
  border-radius:25px;
  background:rgba(255,255,255,.97);
  box-shadow:0 22px 42px rgba(2,28,44,.34);
}

.marca-superior {
  margin-bottom:9px;
  color:#ffe895;
  font-size:.68rem;
  letter-spacing:.2em;
}

.marca-colegio h1 {
  max-width:390px;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(2.65rem,4.6vw,4.45rem);
  font-weight:900;
  line-height:.91;
  letter-spacing:-.06em;
}

.franja-institucional {
  width:186px;
  height:9px;
  margin-top:28px;
  border:0;
  box-shadow:none;
}

.lema {
  max-width:470px;
  margin:28px 0;
  color:rgba(255,255,255,.82);
  font-size:1.02rem;
  line-height:1.6;
}

.mensaje-motivacional {
  display:flex;
  max-width:520px;
  align-items:flex-start;
  gap:16px;
  padding:21px 23px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.06));
  box-shadow:0 16px 35px rgba(2,30,46,.13);
  backdrop-filter:blur(8px);
}

.mensaje-motivacional .comillas {
  flex:0 0 auto;
  margin-top:-9px;
  color:#f6c945;
  font-family:Georgia,serif;
  font-size:3.8rem;
  font-weight:900;
  line-height:1;
}

.mensaje-motivacional strong { color:#fff; font-size:1.08rem; line-height:1.35; }
.mensaje-motivacional p { margin:8px 0 0; color:rgba(230,247,252,.79); font-size:.78rem; line-height:1.55; }
.palabras-inspiradoras { display:flex; align-items:center; gap:10px; margin:18px 2px 0; color:#fff; font-size:.7rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.palabras-inspiradoras i { color:#f6c945; font-style:normal; }
.sello-portal { margin-top:26px; color:rgba(255,255,255,.64); font-size:.67rem; letter-spacing:.14em; }

.panel-login {
  position:relative;
  justify-content:center;
  padding:64px clamp(38px,5.3vw,66px) 48px;
  border-left:1px solid rgba(8,47,73,.07);
  background:
    radial-gradient(circle at 100% 0,rgba(34,166,199,.08),transparent 15rem),
    linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

.panel-login::before {
  position:absolute;
  top:28px;
  right:33px;
  color:#8aa0b2;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  content:"Campus digital  •  2026";
}

.selector-acceso {
  gap:5px;
  margin-bottom:30px;
  padding:5px;
  border:1px solid #dfe8ef;
  border-radius:17px;
  background:#f2f6f9;
}

.selector-acceso a {
  min-height:47px;
  padding:9px 8px;
  border-radius:12px;
  color:#6b7c8e;
  font-size:.74rem;
  transition:transform .16s,background .16s,color .16s,box-shadow .16s;
}

.selector-acceso a:hover { color:#087696; transform:translateY(-1px); }
.selector-acceso a.activo {
  background:#fff;
  color:#075f7e;
  box-shadow:0 7px 17px rgba(8,47,73,.1),inset 0 -3px 0 #f6c945;
}

.etiqueta-acceso {
  padding:6px 11px;
  border:1px solid #f2dc8f;
  background:#fff8d7;
  color:#735a07;
  font-size:.64rem;
  letter-spacing:.11em;
}

.panel-login h2 {
  margin:17px 0 8px;
  color:#102a43;
  font-size:clamp(2rem,3.5vw,2.65rem);
  font-weight:900;
  line-height:1.02;
  letter-spacing:-.05em;
}

.introduccion-login { max-width:390px; margin-bottom:28px; color:#68788b; font-size:.88rem; line-height:1.6; }
.formulario-acceso label { margin-bottom:7px; color:#32485c; font-size:.75rem; letter-spacing:.015em; }
.formulario-acceso label:not(:first-of-type) { margin-top:16px; }
.campos-autocompletado-trampa { position:fixed; top:-10000px; left:-10000px; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }

.selector-grados {
  min-width:0;
  margin:0 0 2px;
  padding:0;
  border:0;
}

.selector-grados legend {
  width:100%;
  margin:0 0 9px;
  padding:0;
  color:#32485c;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.015em;
}

.rejilla-grados { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.grado-opcion { position:relative; min-width:0; margin:0 !important; cursor:pointer; }
.grado-opcion input {
  position:absolute;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.grado-opcion-contenido {
  display:flex;
  min-height:45px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 5px;
  border:1.5px solid #d7e2e9;
  border-radius:12px;
  background:#f8fafc;
  color:#647589;
  transition:border-color .16s,background .16s,color .16s,box-shadow .16s,transform .16s;
}
.grado-opcion-contenido strong { color:#29465c; font-size:.9rem; line-height:1; }
.grado-opcion-contenido small { overflow:hidden; font-size:.62rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.grado-opcion:hover .grado-opcion-contenido { border-color:#8fbccc; background:#fff; color:#176f8b; transform:translateY(-1px); }
.grado-opcion input:checked + .grado-opcion-contenido {
  border-color:#1596b8;
  background:linear-gradient(135deg,#e8f9fc,#f3fcfd);
  color:#075f7e;
  box-shadow:0 0 0 3px rgba(21,150,184,.11),0 7px 15px rgba(8,87,115,.08);
}
.grado-opcion input:checked + .grado-opcion-contenido strong { color:#087696; }
.grado-opcion input:focus-visible + .grado-opcion-contenido { outline:3px solid #0a5877; outline-offset:2px; }

.campo-con-icono {
  grid-template-columns:27px minmax(0,1fr);
  min-height:56px;
  gap:9px;
  padding:0 15px;
  border:1.5px solid #d4e0e8;
  border-radius:15px;
  background:#f8fafc;
  box-shadow:inset 0 1px 2px rgba(8,47,73,.025);
  transition:border-color .18s,box-shadow .18s,background .18s,transform .18s;
}

.campo-usuario-contenedor { position:relative; }
.sugerencias-usuario {
  position:absolute;
  z-index:90;
  top:calc(100% + 7px);
  right:0;
  left:0;
  max-height:230px;
  overflow:auto;
  padding:6px;
  border:1px solid #cbdce6;
  border-radius:14px;
  background:#fff;
  box-shadow:0 18px 40px rgba(8,47,73,.19);
}
.sugerencias-usuario[hidden] { display:none; }
.sugerencia-usuario {
  display:flex;
  width:100%;
  min-height:42px;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#234159;
  font:inherit;
  font-size:.82rem;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}
.sugerencia-usuario::before { color:#1684a3; content:"👤"; font-size:.82rem; }
.sugerencia-usuario strong { min-width:0; overflow:hidden; color:inherit; font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }
.sugerencia-usuario small { min-width:0; margin-left:auto; overflow:hidden; color:#8795a4; font-size:.72rem; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.sugerencia-usuario:hover,.sugerencia-usuario.activa { background:#eaf8fb; color:#075f7e; }
.sugerencia-usuario:hover small,.sugerencia-usuario.activa small { color:#688496; }

.campo-con-icono:hover { border-color:#aec7d5; }
.campo-con-icono:focus-within {
  border-color:#1596b8;
  background:#fff;
  box-shadow:0 0 0 4px rgba(21,150,184,.12),0 8px 20px rgba(8,47,73,.07);
  transform:translateY(-1px);
}

.campo-con-icono > span { font-size:1rem; opacity:.6; }
.campo-con-icono input,.campo-con-icono select { height:54px; color:#18344b; font-size:.9rem; font-weight:600; }
.campo-clave { grid-template-columns:27px minmax(0,1fr) auto; }
.mostrar-clave { min-width:44px; color:#087696; }

.boton-principal {
  min-height:58px;
  margin-top:25px;
  padding:12px 14px 12px 22px;
  border-radius:16px;
  background:linear-gradient(110deg,#087696 0%,#0b5d7c 55%,#0a4867 100%);
  box-shadow:0 15px 30px rgba(8,88,119,.24);
  font-size:.92rem;
}

.boton-principal b {
  width:33px;
  height:33px;
  background:#f6c945;
  color:#083c55;
  box-shadow:0 4px 10px rgba(3,35,53,.15);
}

.boton-principal:hover { transform:translateY(-2px); box-shadow:0 19px 36px rgba(8,88,119,.3); }
.ayuda-acceso {
  margin-top:20px;
  padding:13px 14px;
  border:1px solid #deebf1;
  border-left:4px solid #f6c945;
  border-radius:13px;
  background:#f5fafc;
  color:#65798a;
}

.pie-portal { min-height:54px; padding:11px 20px 18px; color:#718093; font-size:.7rem; }

/* Paneles posteriores al acceso */
.barra-portal {
  position:sticky;
  z-index:40;
  top:12px;
  width:min(1180px,calc(100% - 40px));
  min-height:72px;
  margin:12px auto 0;
  padding:10px 14px;
  border:1px solid rgba(8,47,73,.1);
  border-radius:20px;
  background:rgba(255,255,255,.86);
  box-shadow:0 12px 35px rgba(8,47,73,.1);
  backdrop-filter:blur(18px);
}

.marca-compacta .escudo { width:45px; padding:3px; border:1px solid #dce5eb; border-radius:12px; }
.marca-compacta strong { font-family:inherit; color:#12344b; font-weight:900; }
.marca-compacta small { color:#1684a3; }
.boton-salir { border-radius:12px; background:#f8fafc; }

.panel-materias { width:min(1180px,calc(100% - 40px)); }
.bienvenida-estudiante {
  overflow:hidden;
  border:1px solid rgba(8,126,164,.16);
  border-left:0;
  border-radius:24px;
  background:
    radial-gradient(circle at 90% 20%,rgba(246,201,69,.18),transparent 15rem),
    linear-gradient(125deg,#fff 0%,#f4fbfd 72%,#fffaf0 100%);
  box-shadow:0 16px 40px rgba(8,47,73,.08);
}

.bienvenida-estudiante::before { align-self:stretch; width:7px; margin:-13px 7px -13px -16px; background:linear-gradient(#f6c945,#22a6c7); content:""; }
.bienvenida-estudiante h1 { color:#12344b; font-weight:900; letter-spacing:-.045em; }
.ficha-curso { border-radius:16px; box-shadow:0 8px 20px rgba(8,47,73,.06); }
.titulo-seccion > div > span { border-radius:11px; background:#f6c945; color:#083f58; }
.titulo-seccion h2 { color:#123f58; }

.tarjeta-materia {
  border-color:rgba(8,47,73,.1);
  border-radius:21px;
  box-shadow:0 12px 30px rgba(8,47,73,.07);
}

.tarjeta-materia:hover { transform:translateY(-4px); box-shadow:0 20px 42px rgba(8,47,73,.13); }
.materia-franja { height:5px; }
.materia-icono { border-radius:15px; }
.materia-resumen-notas,.admin-materia-datos { border-color:#e2e9ef; border-radius:14px; background:#f8fafc; }
.materia-pie a,.materia-pie button { border-radius:11px; }
.grupo-grado { border-color:rgba(8,47,73,.1); border-radius:20px; background:rgba(255,255,255,.78); }
.insignia-grado { background:linear-gradient(145deg,#1596b8,#074e6c); }

@keyframes portal-entrada {
  from { opacity:0; transform:translateY(12px) scale(.992); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

@media (max-width:960px) {
  .portal-acceso { grid-template-columns:minmax(0,1fr) minmax(390px,.95fr); }
  .panel-institucional { padding:42px; }
  .marca-colegio { gap:18px; }
  .escudo-grande { width:160px; border-radius:25px; }
  .marca-colegio h1 { font-size:3.05rem; }
}

@media (max-width:820px) {
  .portal-acceso {
    display:block;
    width:min(590px,calc(100% - 24px));
    min-height:0;
    margin:14px auto;
    border-radius:28px;
  }
  .panel-institucional { display:none; }
  .panel-login { min-height:calc(100svh - 28px); padding:72px clamp(25px,8vw,54px) 34px; border-left:0; }
  .panel-login::before { top:27px; right:28px; }
  .login-marca-movil {
    display:flex;
    align-items:center;
    gap:11px;
    margin:0 0 30px;
    color:#12344b;
    font-family:inherit;
    font-size:.98rem;
    font-weight:900;
  }
  .login-marca-movil .escudo { width:84px; padding:5px; border:1px solid #dce5eb; border-radius:18px; }
  .barra-portal { top:8px; width:calc(100% - 20px); margin-top:8px; }
}

@media (max-width:560px) {
  .portal-acceso { width:calc(100% - 16px); margin:8px auto; border-radius:23px; }
  .panel-login { min-height:calc(100svh - 16px); padding:68px 20px 28px; }
  .panel-login::before { top:23px; right:21px; font-size:.55rem; }
  .login-marca-movil { margin-bottom:24px; }
  .selector-acceso { margin-bottom:25px; }
  .rejilla-grados { gap:6px; }
  .grado-opcion-contenido { min-height:43px; gap:4px; padding:6px 3px; }
  .grado-opcion-contenido strong { font-size:.84rem; }
  .grado-opcion-contenido small { font-size:.56rem; }
  .panel-login h2 { font-size:2rem; }
  .barra-portal { width:calc(100% - 16px); min-height:64px; border-radius:17px; }
  .panel-materias { width:calc(100% - 20px); }
  .bienvenida-estudiante::before { margin:-21px 3px -21px -18px; width:5px; }
}

@media (max-width:420px) {
  .selector-acceso a { min-height:43px; font-size:.65rem; }
  .selector-acceso a > span { display:none; }
  .campo-con-icono { min-height:53px; }
  .campo-con-icono input,.campo-con-icono select { height:51px; }
}

@media (prefers-reduced-motion:reduce) {
  .portal-acceso { animation:none; }
}