/* ==========================================================================
   Portal Estudiante v2.0 — shell.css
   Estilos de EstudianteLayout (shell con topbar) y EstudianteAccesoLayout.
   Dueno W0. Sin reglas especificas de pagina.
   ========================================================================== */

/* ==========================================================================
   Contenedor raiz compartido
   ========================================================================== */
.portal-estudiante {
  font-family:      var(--font-sans, 'Figtree', system-ui, sans-serif);
  font-size:        var(--t-base, 15px);
  line-height:      1.5;
  color:            var(--ink, #2A2A2A);
  background:       var(--cream, #F4F0E6);
  min-height:       100dvh;
  overflow-x:       hidden;
  -webkit-font-smoothing: antialiased;
}

.portal-estudiante *,
.portal-estudiante *::before,
.portal-estudiante *::after {
  box-sizing: border-box;
}

/* ==========================================================================
   EstudianteLayout — shell con topbar
   ========================================================================== */

/* --- Topbar sticky -------------------------------------------------------- */
.pe-topbar {
  position:         sticky;
  top:              0;
  z-index:          100;
  display:          flex;
  align-items:      center;
  gap:              var(--s-2, 8px);
  height:           var(--topbar-h, 56px);
  padding:          0 var(--s-5, 20px);
  padding-top:      env(safe-area-inset-top);
  background:       rgba(244, 240, 230, 0.92);
  backdrop-filter:  blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:    1px solid transparent;
  transition:       border-color var(--dur-fast, 150ms) var(--ease);
}

.pe-topbar.is-stuck {
  border-color: var(--cream-deep, #DED6C3);
}

/* --- Boton volver --------------------------------------------------------- */
.pe-back {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  width:            var(--tap, 44px);
  height:           var(--tap, 44px);
  border-radius:    var(--r-md, 14px);
  color:            var(--teal-ink, #1F5557);
  text-decoration:  none;
  transition:       background var(--dur-fast, 150ms) var(--ease);
}

.pe-back:hover  { background: rgba(109,199,208,.12); }
.pe-back:active { background: rgba(109,199,208,.22); }
.pe-back:focus-visible {
  outline:    none;
  box-shadow: var(--sh-focus);
}

/* --- Marca --------------------------------------------------------------- */
.pe-brand {
  display:          inline-flex;
  align-items:      baseline;
  gap:              4px;
  flex:             1 1 auto;
  min-width:        0;
  font-family:      var(--font-serif, 'Fraunces', Georgia, serif);
  font-size:        20px;
  letter-spacing:   -0.01em;
  line-height:      1;
  text-decoration:  none;
  white-space:      nowrap;      /* nunca se parte en dos lineas */
  overflow:         hidden;
}

/* La marca cede espacio antes que el chip/acciones: al no caber trunca con
   ellipsis en vez de romperse o encimarse (fix W4:marca-se-parte-a-375). */
.pe-brand-text {
  min-width:        0;
  overflow:         hidden;
  text-overflow:    ellipsis;
  white-space:      nowrap;
  font-weight:      600;
  color:            var(--ink, #2A2A2A);
}

.pe-brand .mi {
  color:       var(--teal-shadow, #2C6D6F);
  font-style:  italic;
  font-weight: 500;
}

.pe-brand .escolar {
  color:       inherit;
  font-weight: inherit;
}

/* Bajo 480px se abrevia a "miComunidad" para que chip + acciones quepan
   sin scroll horizontal ni salto de linea a 375px. */
@media (max-width: 479px) {
  .pe-brand .escolar { display: none; }
}

/* Bajo 420px (375 real) el chip de periodo + PDF + salir no dejan sitio para
   "miComunidad": la marca pasa a logotipo "mi" + punto, sin elipsis. */
@media (max-width: 419px) {
  .pe-topbar .pe-brand .comunidad { display: none; }
  .pe-topbar .pe-brand { flex: 0 0 auto; }
  .pe-topbar .pe-brand-text { overflow: visible; text-overflow: clip; }
}

.pe-brand-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--teal, #6DC7D0);
  align-self:    center;
  flex-shrink:   0;
}

/* --- Acciones derecha ----------------------------------------------------- */
.pe-topbar-actions {
  display:          flex;
  align-items:      center;
  gap:              var(--s-1, 4px);
  flex-shrink:      0;
}

/* --- Boton icono generico ------------------------------------------------- */
.pe-icon-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            var(--tap, 44px);
  height:           var(--tap, 44px);
  border-radius:    var(--r-md, 14px);
  border:           none;
  background:       transparent;
  cursor:           pointer;
  color:            var(--ink-2, #4A4F57);
  text-decoration:  none;
  transition:       background var(--dur-fast, 150ms) var(--ease),
                    color     var(--dur-fast, 150ms) var(--ease);
}

.pe-icon-btn:hover  { background: rgba(30,33,38,.06);   color: var(--ink, #2A2A2A); }
.pe-icon-btn:active { background: rgba(30,33,38,.10); }
.pe-icon-btn:focus-visible {
  outline:    none;
  box-shadow: var(--sh-focus);
}

/* --- Main ----------------------------------------------------------------- */
.pe-main {
  flex:         1;
  width:        100%;
  max-width:    960px;
  margin:       0 auto;
  padding:      var(--s-5, 20px) var(--s-4, 16px)
                calc(var(--s-8, 32px) + env(safe-area-inset-bottom));
}

@media (min-width: 600px) {
  .pe-main { padding-inline: var(--s-6, 24px); }
}

@media (min-width: 1024px) {
  .pe-main {
    max-width:    1200px;
    padding-inline: var(--s-10, 40px);
  }
}

/* --- Footer del shell ----------------------------------------------------- */
.pe-footer {
  padding:          var(--s-6, 24px) var(--s-4, 16px)
                    calc(var(--s-6, 24px) + env(safe-area-inset-bottom));
  text-align:       center;
  border-top:       1px solid var(--line, #E8E1D2);
  font-size:        var(--t-sm, 13px);
  color:            var(--ink-3, #6B7078);
}

.pe-footer .pe-support-link {
  display:          inline-flex;
  align-items:      center;
  gap:              6px;
  margin:           var(--s-2, 8px) 0;
  color:            var(--teal-ink, #1F5557);
  text-decoration:  none;
  font-weight:      500;
  min-height:       var(--tap, 44px);
}

.pe-footer .pe-support-link:hover { text-decoration: underline; }

.pe-footer .pe-copy {
  margin-top:  var(--s-2, 8px);
  font-size:   var(--t-xs, 12px);
  color:       var(--ink-4, #9BA0A8);
}

/* ==========================================================================
   EstudianteAccesoLayout — marco sin rail, sin sidebar
   ========================================================================== */
.pe-acceso {
  font-family:      var(--font-sans, 'Figtree', system-ui, sans-serif);
  font-size:        var(--t-base, 15px);
  line-height:      1.5;
  color:            var(--ink, #2A2A2A);
  background:       var(--cream, #F4F0E6);
  min-height:       100dvh;
  overflow-x:       hidden;
  -webkit-font-smoothing: antialiased;
  display:          flex;
  flex-direction:   column;
  /* Safe area iOS */
  padding-top:      env(safe-area-inset-top);
  padding-left:     env(safe-area-inset-left);
  padding-right:    env(safe-area-inset-right);
}

.pe-acceso *,
.pe-acceso *::before,
.pe-acceso *::after {
  box-sizing: border-box;
}

/* Fondo de marca (orbes) */
.pe-acceso-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--cream, #F4F0E6);
}

.pe-acceso-bg::before,
.pe-acceso-bg::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(2px);
}

.pe-acceso-bg::before {
  width: 520px; height: 520px; top: -220px; right: -160px;
  background: radial-gradient(circle, rgba(109,199,208,.28) 0%, rgba(109,199,208,0) 70%);
}

.pe-acceso-bg::after {
  width: 460px; height: 460px; bottom: -220px; left: -160px;
  background: radial-gradient(circle, rgba(44,109,111,.16) 0%, rgba(44,109,111,0) 70%);
}

/* Topbar de acceso */
.pe-acceso-topbar {
  position:   relative;
  z-index:    1;
  display:    flex;
  align-items: center;
  padding:    var(--s-3, 12px) var(--s-5, 20px) var(--s-4, 16px);
  min-height: var(--tap, 44px);
}

/* Contenido centrado (tarjeta) */
.pe-acceso-stage {
  position:   relative;
  z-index:    1;
  flex:       1;
  display:    flex;
  flex-direction: column;
  justify-content: center;
  padding:    0 var(--s-4, 16px);
}

/* Footer de acceso */
.pe-acceso-footer {
  position:   relative;
  z-index:    1;
  display:    flex;
  align-items: center;
  justify-content: center;
  gap:        var(--s-4, 16px);
  padding:    var(--s-3, 12px) var(--s-5, 20px)
              calc(var(--s-3, 12px) + env(safe-area-inset-bottom));
  font-size:  var(--t-sm, 13px);
  color:      var(--ink-3, #6B7078);
}

.pe-acceso-footer a {
  color:           var(--teal-ink, #1F5557);
  text-decoration: none;
  min-height:      var(--tap, 44px);
  display:         inline-flex;
  align-items:     center;
}

.pe-acceso-footer a:hover { text-decoration: underline; }

/* ==========================================================================
   Skeleton base (compartido por W1/W2/W3)
   ========================================================================== */
@keyframes pe-shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

.pe-skeleton {
  background: linear-gradient(
    90deg,
    var(--cream-2, #EDE7DA) 25%,
    var(--cream-dark, #E8E1D2) 50%,
    var(--cream-2, #EDE7DA) 75%
  );
  background-size: 200% 100%;
  animation: pe-shimmer 1.6s var(--ease) infinite;
  border-radius: var(--r-sm, 10px);
}

/* Respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .pe-skeleton { animation: none; }

  .pe-topbar,
  .pe-back,
  .pe-icon-btn { transition: none; }
}