/* ==========================================================================
   Portal Estudiante v2.0 — mi-reporte.css
   Frente W2 — dueno exclusivo
   Estilos de /mi-reporte segun principal.html (mockup aprobado 2026-09-08).
   Ambito: .portal-estudiante (definido en shell.css)
   Tokens: vienen de tokens.css (--cream, --teal-ink, --campo-1..4, etc.)
   ========================================================================== */

/* ==========================================================================
   LAYOUT — contenedor y hero
   ========================================================================== */
/* El padding horizontal lo pone el shell (.pe-main: 16/24/40 + safe-area).
   .rpt-wrap NO vuelve a padear: hacerlo dejaba el contenido en 311px a 375
   (doble sangria) en vez de 343px. Solo centra y limita el ancho. */
.portal-estudiante .rpt-wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.portal-estudiante .rpt-hero {
  padding: var(--s-4, 16px) 0 var(--s-5, 20px);
}

.portal-estudiante .rpt-greeting {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--s-4, 16px);
}

.portal-estudiante .rpt-greeting h1 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.portal-estudiante .rpt-greeting h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--teal-ink, #2C6D6F);
}

.portal-estudiante .rpt-greeting p {
  font-size: 13px;
  color: var(--ink-3, #6B7078);
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}

.portal-estudiante .rpt-sep { color: var(--line, #E6DFD0); }

/* hero-grid: en desktop 900+ se pone en 2 columnas */
.portal-estudiante .rpt-hero-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-4, 16px);
}

/* ==========================================================================
   TARJETA HERO CARBON — anillo SVG + estado + 3 senales
   ========================================================================== */
.portal-estudiante .rpt-hero-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #262A31 0%, var(--carbon, #1E2126) 60%, #171A1E 100%);
  color: #fff;
  border-radius: var(--r-xl, 28px);
  padding: var(--s-5, 20px);
  /* sombra fuerte del mockup aprobado; tokens.css define --sh-hero mas suave,
     por eso se mantiene el valor literal para no regresar el hero premium */
  box-shadow: 0 18px 40px -12px rgba(30,33,38,.45);
}

.portal-estudiante .rpt-hero-card::before {
  content: '';
  position: absolute;
  inset: auto -80px -120px auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109,199,208,.28) 0%, rgba(109,199,208,0) 68%);
  pointer-events: none;
}

.portal-estudiante .rpt-hero-main {
  display: flex;
  align-items: center;
  gap: var(--s-4, 16px);
  position: relative;
}

/* ---- Anillo SVG ---- */
.portal-estudiante .rpt-ring {
  position: relative;
  width: 116px;
  height: 116px;
  flex: none;
}

.portal-estudiante .rpt-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.portal-estudiante .rpt-ring-track {
  fill: none;
  stroke: rgba(255,255,255,.12);
  stroke-width: 9;
}

/* El valor FINAL vive en el atributo style inline (stroke-dashoffset real).
   La animacion solo define el punto de partida (circulo vacio) y deja que el
   'to' implicito use el valor inline. Asi, con prefers-reduced-motion
   (animation:none) el anillo queda LLENO en su valor final, nunca vacio. */
.portal-estudiante .rpt-ring-bar {
  fill: none;
  stroke: var(--teal, #6DC7D0);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  /* stroke-dashoffset lo fija el inline style (valor final) */
  animation: rpt-ring-fill 900ms cubic-bezier(.2,.7,.2,1);
}

/* Color del anillo segun estado */
.portal-estudiante .rpt-ring.is-warn .rpt-ring-bar { stroke: #F0B454; }
.portal-estudiante .rpt-ring.is-bad  .rpt-ring-bar { stroke: #F08A8A; }

/* Solo el 'from' (vacio); el 'to' implicito toma el valor inline final. */
@keyframes rpt-ring-fill {
  from { stroke-dashoffset: 326.73; }
}

.portal-estudiante .rpt-ring-val {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.portal-estudiante .rpt-ring-val strong {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.portal-estudiante .rpt-ring-val small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-top: 3px;
}

/* ---- Texto del hero ---- */
.portal-estudiante .rpt-hero-text {
  min-width: 0;
  flex: 1;
}

.portal-estudiante .rpt-hero-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal, #6DC7D0);
  margin-bottom: 4px;
}

.portal-estudiante .rpt-hero-status {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.15;
}

.portal-estudiante .rpt-hero-sub {
  margin-top: 6px;
  font-size: 14px;
  color: rgba(255,255,255,.72);
  line-height: 1.4;
}

.portal-estudiante .rpt-hero-sub strong {
  color: #fff;
  font-weight: 600;
}

/* ---- 3 Senales ---- */
.portal-estudiante .rpt-signals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2, 8px);
  margin-top: var(--s-5, 20px);
  position: relative;
}

.portal-estudiante .rpt-signal {
  min-height: 64px;
  border-radius: var(--r-md, 14px);
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.portal-estudiante .rpt-signal-v {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.portal-estudiante .rpt-signal-v .material-symbols-rounded { font-size: 18px; }
.portal-estudiante .rpt-signal-v .rpt-pct { font-size: 14px; font-weight: 600; }

.portal-estudiante .rpt-signal-l {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

.portal-estudiante .rpt-signal.warn .rpt-signal-v { color: #F0B454; }
.portal-estudiante .rpt-signal.bad  .rpt-signal-v { color: #FF9C9C; }
.portal-estudiante .rpt-signal.ok   .rpt-signal-v { color: #6EE7B7; }

/* ==========================================================================
   BLOQUE HOY — "Que hacer ahora"
   ========================================================================== */
.portal-estudiante .rpt-hoy {
  padding: var(--s-4, 16px);
}

.portal-estudiante .rpt-hoy-head {
  display: flex;
  align-items: center;
  gap: var(--s-2, 8px);
  margin-bottom: var(--s-3, 12px);
}

.portal-estudiante .rpt-hoy-head .material-symbols-rounded {
  color: var(--teal-ink, #2C6D6F);
  font-size: 20px;
}

.portal-estudiante .rpt-hoy-head h2 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Lista de pendientes */
.portal-estudiante .rpt-todo {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2, 8px);
}

.portal-estudiante .rpt-todo-item {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  align-items: center;
  gap: var(--s-3, 12px);
  min-height: 56px;
  padding: 10px 12px 10px 0;
  border-radius: var(--r-md, 14px);
  background: var(--surface-2, #FBF9F4);
  text-decoration: none;
  color: inherit;
  transition: background 150ms, transform 150ms;
}

.portal-estudiante .rpt-todo-item:hover { background: var(--cream-2, #EDE7DA); }
.portal-estudiante .rpt-todo-item:active { transform: scale(.985); }

.portal-estudiante .rpt-todo-bar {
  height: 100%;
  min-height: 36px;
  border-radius: var(--r-pill, 999px);
  background: var(--c, var(--teal-deep, #4BA8AA));
}

.portal-estudiante .rpt-todo-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portal-estudiante .rpt-todo-t {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.portal-estudiante .rpt-todo-m {
  font-size: 12px;
  color: var(--ink-3, #6B7078);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.portal-estudiante .rpt-todo-pend {
  color: var(--warn-ink, #8E5810);
  font-weight: 600;
}

/* Nota ambar */
.portal-estudiante .rpt-attention {
  margin-top: var(--s-3, 12px);
  padding: 12px;
  border-radius: var(--r-md, 14px);
  background: var(--warn-soft, #FBF1E0);
  border: 1px solid #F1DFBE;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.portal-estudiante .rpt-attention .material-symbols-rounded {
  color: var(--warn-ink, #8E5810);
  font-size: 20px;
  margin-top: 1px;
  flex: none;
}

.portal-estudiante .rpt-attention p {
  font-size: 13px;
  color: var(--warn-ink, #8E5810);
  line-height: 1.45;
}

.portal-estudiante .rpt-attention p strong { font-weight: 700; }

.portal-estudiante .rpt-attention a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--warn-ink, #8E5810);
}

/* Celebracion: todo al corriente */
.portal-estudiante .rpt-celebrate {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 2px;
}

.portal-estudiante .rpt-celebrate-ico {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill, 999px);
  background: var(--ok-soft, #E0F5EE);
  color: var(--ok-ink, #157056);
  display: grid;
  place-items: center;
  flex: none;
}

.portal-estudiante .rpt-celebrate-ico .material-symbols-rounded { font-size: 24px; }

.portal-estudiante .rpt-celebrate h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 18px;
  font-weight: 600;
}

.portal-estudiante .rpt-celebrate p {
  font-size: 13px;
  color: var(--ink-3, #6B7078);
}

/* ==========================================================================
   TARJETA DE CLASE (ClassCard v2)
   ========================================================================== */
.portal-estudiante .rpt-wrap .cls {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E6DFD0);
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--sh-1, 0 1px 2px rgba(30,33,38,.04));
  padding: var(--s-4, 16px) var(--s-4, 16px) var(--s-3, 12px) 18px;
  text-decoration: none;
  color: inherit;
  transition: transform 150ms cubic-bezier(.2,.7,.2,1),
              box-shadow 220ms cubic-bezier(.2,.7,.2,1),
              border-color 150ms;
  -webkit-tap-highlight-color: transparent;
}

/* Franja lateral coloreada */
.portal-estudiante .rpt-wrap .cls::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--c, var(--teal-deep, #4BA8AA));
}

.portal-estudiante .rpt-wrap .cls:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(30,33,38,.08), 0 1px 3px rgba(30,33,38,.05);
  border-color: #D9D1BF;
}

.portal-estudiante .rpt-wrap .cls:active {
  transform: scale(.985);
  border-color: var(--c, var(--teal-deep));
}

/* Variables de campo por clase */
.portal-estudiante .rpt-wrap .cls.c1 { --c: var(--campo-1, #D97D54); --c-soft: var(--campo-1-soft, #FCEEE7); }
.portal-estudiante .rpt-wrap .cls.c2 { --c: var(--campo-2, #4BA8AA); --c-soft: var(--campo-2-soft, #E6F5F6); }
.portal-estudiante .rpt-wrap .cls.c3 { --c: var(--campo-3, #B07FCB); --c-soft: var(--campo-3-soft, #F1E8F7); }
.portal-estudiante .rpt-wrap .cls.c4 { --c: var(--campo-4, #4D8B5A); --c-soft: var(--campo-4-soft, #E5F2E8); }

/* Top: icono, info, calificacion */
.portal-estudiante .rpt-wrap .cls-top {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3, 12px);
}

.portal-estudiante .rpt-wrap .cls-ico {
  width: 44px; height: 44px;
  border-radius: var(--r-md, 14px);
  background: var(--c-soft, #E6F5F6);
  color: var(--c, var(--teal-deep));
  display: grid;
  place-items: center;
  flex: none;
}

.portal-estudiante .rpt-wrap .cls-ico .material-symbols-rounded { font-size: 24px; }

.portal-estudiante .rpt-wrap .cls-info { flex: 1; min-width: 0; }

.portal-estudiante .rpt-wrap .cls-campo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c, var(--teal-deep));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-estudiante .rpt-wrap .cls-name {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.15;
  margin-top: 1px;
}

.portal-estudiante .rpt-wrap .cls-teacher {
  font-size: 13px;
  color: var(--ink-3, #6B7078);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pill calificacion */
.portal-estudiante .rpt-wrap .grade {
  flex: none;
  min-width: 56px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--r-pill, 999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.portal-estudiante .rpt-wrap .grade.ok   { background: var(--ok-soft, #E0F5EE);  color: var(--ok-ink, #157056); }
.portal-estudiante .rpt-wrap .grade.warn { background: var(--warn-soft, #FBF1E0); color: var(--warn-ink, #8E5810); }
.portal-estudiante .rpt-wrap .grade.bad  { background: var(--bad-soft, #FBEAEA);  color: var(--bad-ink, #7A1F1F); }
.portal-estudiante .rpt-wrap .grade.none { background: var(--cream-2, #EDE7DA);  color: var(--ink-3, #6B7078); font-size: 13px; font-weight: 600; }

/* Bottom: chips + tendencia */
.portal-estudiante .rpt-wrap .cls-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3, 12px);
  margin-top: var(--s-3, 12px);
}

.portal-estudiante .rpt-wrap .chips { display: flex; gap: 6px; flex-wrap: wrap; }

.portal-estudiante .rpt-wrap .chip {
  height: 26px;
  padding: 0 9px;
  border-radius: var(--r-pill, 999px);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2, #FBF9F4);
  color: var(--ink-2, #4A4F57);
  border: 1px solid var(--line-soft, #F0EBE0);
}

.portal-estudiante .rpt-wrap .chip .material-symbols-rounded { font-size: 15px; }
.portal-estudiante .rpt-wrap .chip.warn { background: var(--warn-soft, #FBF1E0); color: var(--warn-ink, #8E5810); border-color: transparent; }
.portal-estudiante .rpt-wrap .chip.bad  { background: var(--bad-soft, #FBEAEA);  color: var(--bad-ink, #7A1F1F);  border-color: transparent; }
.portal-estudiante .rpt-wrap .chip.ok   { background: var(--ok-soft, #E0F5EE);   color: var(--ok-ink, #157056);   border-color: transparent; }

/* Mini tendencia 8 barras */
.portal-estudiante .rpt-wrap .trend {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
  flex: none;
}

.portal-estudiante .rpt-wrap .trend i {
  display: block;
  width: 6px;
  border-radius: 3px 3px 1px 1px;
  background: var(--line, #E6DFD0);
  min-height: 4px;
}

.portal-estudiante .rpt-wrap .trend i.h { background: var(--ok, #1D9E75); }
.portal-estudiante .rpt-wrap .trend i.m { background: #E0A94A; }
.portal-estudiante .rpt-wrap .trend i.l { background: #D96B6B; }

/* CTA de la tarjeta */
.portal-estudiante .rpt-wrap .cls-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-3, 12px);
  padding-top: var(--s-3, 12px);
  border-top: 1px solid var(--line-soft, #F0EBE0);
  font-size: 13px;
}

.portal-estudiante .rpt-wrap .cls-cta .upd {
  color: var(--ink-3, #6B7078);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.portal-estudiante .rpt-wrap .cls-cta .upd .material-symbols-rounded { font-size: 16px; }

.portal-estudiante .rpt-wrap .cls-cta .go {
  font-weight: 700;
  color: var(--teal-ink, #2C6D6F);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 32px;
}

.portal-estudiante .rpt-wrap .cls-cta .go .material-symbols-rounded {
  font-size: 18px;
  transition: transform 150ms cubic-bezier(.2,.7,.2,1);
}

.portal-estudiante .rpt-wrap .cls:hover .go .material-symbols-rounded { transform: translateX(3px); }

/* Grid de clases */
.portal-estudiante .rpt-wrap .classes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3, 12px);
}

/* ==========================================================================
   CAMPOS NEM — filas compactas
   ========================================================================== */
.portal-estudiante .rpt-campos { padding: var(--s-2, 8px) var(--s-4, 16px); }

.portal-estudiante .rpt-campo {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 6px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft, #F0EBE0);
}

.portal-estudiante .rpt-campo:last-child { border-bottom: 0; }

/* Variables por campo */
.portal-estudiante .rpt-campo.k1 { --c: var(--campo-1, #D97D54); }
.portal-estudiante .rpt-campo.k2 { --c: var(--campo-2, #4BA8AA); }
.portal-estudiante .rpt-campo.k3 { --c: var(--campo-3, #B07FCB); }
.portal-estudiante .rpt-campo.k4 { --c: var(--campo-4, #4D8B5A); }

.portal-estudiante .rpt-campo-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c, var(--teal-deep));
  grid-row: 1;
}

.portal-estudiante .rpt-campo-n {
  font-size: 14px;
  font-weight: 600;
  grid-row: 1;
  min-width: 0;
  line-height: 1.25;
}

.portal-estudiante .rpt-campo-n small {
  font-weight: 500;
  color: var(--ink-3, #6B7078);
  margin-left: 6px;
  white-space: nowrap;
}

.portal-estudiante .rpt-campo-val {
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.portal-estudiante .rpt-campo-val strong {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.portal-estudiante .rpt-delta {
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.portal-estudiante .rpt-delta .material-symbols-rounded { font-size: 14px; }
.portal-estudiante .rpt-delta.up   { color: var(--ok-ink, #157056); }
.portal-estudiante .rpt-delta.down { color: var(--bad-ink, #7A1F1F); }
.portal-estudiante .rpt-delta.same { color: var(--ink-3, #6B7078); }

.portal-estudiante .rpt-campo-track {
  grid-column: 2 / 4;
  grid-row: 2;
  height: 6px;
  border-radius: 3px;
  background: var(--cream-2, #EDE7DA);
  overflow: hidden;
}

.portal-estudiante .rpt-campo-track b {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--c, var(--teal-deep));
  transition: width 700ms cubic-bezier(.2,.7,.2,1);
}

/* ==========================================================================
   SECCIONES GENERALES
   ========================================================================== */
.portal-estudiante .rpt-block { padding: var(--s-2, 8px) 0 var(--s-6, 24px); }

.portal-estudiante .rpt-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3, 12px);
  margin-bottom: var(--s-3, 12px);
}

.portal-estudiante .rpt-sec-head h2 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.015em;
}

.portal-estudiante .rpt-count {
  font-family: var(--font-sans, 'Figtree', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3, #6B7078);
  margin-left: 6px;
}

.portal-estudiante .rpt-sec-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3, #6B7078);
}

.portal-estudiante .rpt-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* card generico */
.portal-estudiante .rpt-wrap .card {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E6DFD0);
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--sh-1, 0 1px 2px rgba(30,33,38,.04));
}

/* ==========================================================================
   CHIP DE PERIODO (topbar)
   ========================================================================== */
.portal-estudiante .rpt-period-chip {
  height: 44px;
  padding: 0 12px 0 10px;
  border-radius: var(--r-pill, 999px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E6DFD0);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2, #4A4F57);
  box-shadow: var(--sh-1, 0 1px 2px rgba(30,33,38,.04));
  transition: background 150ms, border-color 150ms, transform 150ms;
  /* Ancho suficiente para el nombre real del periodo ("Sep - Nov 2026")
     sin truncar; la marca es quien cede espacio a 375. (fix W4) */
  max-width: 184px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  font-family: inherit;
}

.portal-estudiante .rpt-period-chip span:not(.material-symbols-rounded) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.portal-estudiante .rpt-period-chip .material-symbols-rounded { font-size: 18px; color: var(--teal-ink, #2C6D6F); }
.portal-estudiante .rpt-period-chip:hover { border-color: var(--teal-deep, #4BA8AA); }
.portal-estudiante .rpt-period-chip:active { transform: scale(.97); }

/* ==========================================================================
   SHEET DE PERIODO
   ========================================================================== */
.portal-estudiante .rpt-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30,33,38,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms;
  z-index: 110;
}

.portal-estudiante .rpt-sheet-backdrop.rpt-sheet-open {
  opacity: 1;
  pointer-events: auto;
}

.portal-estudiante .rpt-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 111;
  background: var(--surface, #fff);
  border-radius: var(--r-xl, 28px) var(--r-xl, 28px) 0 0;
  padding: 8px var(--s-4, 16px) calc(var(--s-4, 16px) + env(safe-area-inset-bottom));
  transform: translateY(105%);
  visibility: hidden;
  transition: transform 260ms cubic-bezier(.2,.7,.2,1),
              visibility 0s linear 260ms;
  box-shadow: 0 -8px 40px rgba(30,33,38,.18);
  max-width: 520px;
  margin: 0 auto;
}

.portal-estudiante .rpt-sheet.rpt-sheet-open {
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s, 0s;
}

.portal-estudiante .rpt-sheet-grip {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--line, #E6DFD0);
  margin: 0 auto 12px;
}

.portal-estudiante .rpt-sheet-title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: -.01em;
}

.portal-estudiante .rpt-sheet-desc {
  font-size: 13px;
  color: var(--ink-3, #6B7078);
  margin-bottom: 12px;
}

/* Opciones de periodo */
.portal-estudiante .rpt-periodo-opt {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md, 14px);
  text-align: left;
  transition: background 150ms;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.portal-estudiante .rpt-periodo-opt:hover { background: var(--surface-2, #FBF9F4); }

.portal-estudiante .rpt-radio {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line, #E6DFD0);
  display: grid;
  place-items: center;
  flex: none;
  transition: border-color 150ms;
}

.portal-estudiante .rpt-radio::after {
  content: '';
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--teal-ink, #2C6D6F);
  transform: scale(0);
  transition: transform 150ms cubic-bezier(.2,.7,.2,1);
}

.portal-estudiante .rpt-periodo-opt[aria-checked="true"] .rpt-radio { border-color: var(--teal-ink, #2C6D6F); }
.portal-estudiante .rpt-periodo-opt[aria-checked="true"] .rpt-radio::after { transform: scale(1); }

.portal-estudiante .rpt-opt-body {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.portal-estudiante .rpt-opt-name {
  font-size: 15px;
  font-weight: 600;
}

.portal-estudiante .rpt-opt-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--teal-ink, #2C6D6F);
  background: var(--teal-soft, #E6F5F6);
  padding: 3px 8px;
  border-radius: var(--r-pill, 999px);
}

/* ==========================================================================
   SKELETON
   ========================================================================== */
.portal-estudiante .rpt-wrap .sk {
  background: linear-gradient(90deg,
    var(--cream-2, #EDE7DA) 25%,
    #F6F2E9 50%,
    var(--cream-2, #EDE7DA) 75%);
  background-size: 200% 100%;
  animation: rpt-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-md, 14px);
}

@keyframes rpt-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.portal-estudiante .rpt-sk-title { height: 28px; width: 60%; border-radius: 8px; }
.portal-estudiante .rpt-sk-line  { height: 14px; }
.portal-estudiante .rpt-sk-hero  { height: 244px; border-radius: var(--r-xl, 28px); }
.portal-estudiante .rpt-sk-card  { height: 150px; border-radius: var(--r-lg, 20px); }

/* ==========================================================================
   ESTADO VACIO / ERROR
   ========================================================================== */
.portal-estudiante .rpt-error-state { padding: var(--s-6, 24px) 0; }

.portal-estudiante .rpt-empty-card {
  text-align: center;
  padding: var(--s-8, 32px) var(--s-5, 20px);
}

.portal-estudiante .rpt-empty-ico {
  width: 72px; height: 72px;
  margin: 0 auto 14px;
  border-radius: 24px;
  background: var(--teal-soft, #E6F5F6);
  color: var(--teal-ink, #2C6D6F);
  display: grid;
  place-items: center;
}

.portal-estudiante .rpt-empty-ico .material-symbols-rounded { font-size: 36px; }

.portal-estudiante .rpt-empty-card h2 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 6px;
}

.portal-estudiante .rpt-empty-card p {
  font-size: 14px;
  color: var(--ink-3, #6B7078);
  max-width: 300px;
  margin: 0 auto 18px;
  line-height: 1.5;
}

.portal-estudiante .rpt-btn-primary {
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-pill, 999px);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--teal-ink, #2C6D6F);
  color: #fff;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 6px 16px -6px rgba(44,109,111,.6);
  transition: background 150ms, transform 150ms;
}

.portal-estudiante .rpt-btn-primary:hover  { background: #245c5e; }
.portal-estudiante .rpt-btn-primary:active { transform: scale(.97); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 600px) {
  .portal-estudiante .rpt-greeting h1 { font-size: 34px; }
  .portal-estudiante .rpt-wrap .classes { grid-template-columns: repeat(2, 1fr); gap: var(--s-4, 16px); }
  .portal-estudiante .rpt-sk-card { height: 170px; }
  /* A partir de 600 la tira ya no sangra: queda dentro de su columna */
  .portal-estudiante .rpt-stickers-scroller { margin: 0; padding-left: 0; padding-right: 0; }
}

@media (min-width: 900px) {
  .portal-estudiante .rpt-hero { padding-top: var(--s-6, 24px); }
  .portal-estudiante .rpt-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--s-5, 20px);
    align-items: stretch;
  }
  .portal-estudiante .rpt-hero-card { padding: var(--s-6, 24px); }
  .portal-estudiante .rpt-ring { width: 136px; height: 136px; }
  .portal-estudiante .rpt-ring-val strong { font-size: 42px; }
  .portal-estudiante .rpt-hero-status { font-size: 28px; }
  .portal-estudiante .rpt-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5, 20px);
    align-items: start;
  }
  .portal-estudiante .rpt-wrap .classes { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   RECONOCIMIENTOS — tira horizontal scroll-snap
   ========================================================================== */
.portal-estudiante .rpt-stickers-scroller {
  display: flex;
  gap: var(--s-3, 12px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Sangra al borde del contenido (mockup): margen negativo = padding del
     shell a 375; el ultimo tile asoma por el borde para invitar el scroll. */
  margin: 0 calc(-1 * var(--s-4, 16px));
  padding: 4px var(--s-4, 16px) 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.portal-estudiante .rpt-stickers-scroller::-webkit-scrollbar { display: none; }

.portal-estudiante .rpt-sticker {
  scroll-snap-align: start;
  flex: 0 0 120px;
  min-width: 0;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E6DFD0);
  border-radius: var(--r-lg, 20px);
  padding: 12px;
  box-shadow: var(--sh-1, 0 1px 2px rgba(30,33,38,.04));
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform var(--dur-fast, 150ms) var(--ease), box-shadow var(--dur-base, 220ms);
}
.portal-estudiante .rpt-sticker:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2, 0 4px 16px rgba(30,33,38,.08));
}

/* Tile total (carbon) */
.portal-estudiante .rpt-sticker-total {
  background: var(--carbon, #1E2126);
  color: #fff;
  border-color: var(--carbon, #1E2126);
  justify-content: center;
  align-items: center;
  text-align: center;
}
.portal-estudiante .rpt-sticker-total strong {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
}
.portal-estudiante .rpt-sticker-total span {
  font-size: 11px;
  color: rgba(255,255,255,.7);
  font-weight: 600;
}

/* Arte del sticker */
.portal-estudiante .rpt-sticker-art {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--teal-soft, #E6F5F6);
  color: var(--teal-ink, #2C6D6F);
  flex: none;
}
.portal-estudiante .rpt-sticker-art img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.portal-estudiante .rpt-sticker-art .material-symbols-rounded { font-size: 26px; }

.portal-estudiante .rpt-sticker-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3, #6B7078);
}
.portal-estudiante .rpt-sticker-nm {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

/* Estado vacio */
.portal-estudiante .rpt-sticker-empty {
  align-items: center;
  text-align: center;
  color: var(--ink-3, #6B7078);
}

/* ==========================================================================
   TIMELINE — compacta 5 items + ver mas
   ========================================================================== */
.portal-estudiante .rpt-tl { padding: 4px var(--s-4, 16px); }

.portal-estudiante .rpt-tl-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--s-3, 12px);
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft, #F0EBE0);
  align-items: flex-start;
}
.portal-estudiante .rpt-tl-item:last-of-type { border-bottom: 0; }

.portal-estudiante .rpt-tl-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
}
.portal-estudiante .rpt-tl-ico .material-symbols-rounded { font-size: 20px; }

.portal-estudiante .rpt-tl-ico.entrega { background: var(--ok-soft, #E0F5EE);      color: var(--ok-ink, #157056); }
.portal-estudiante .rpt-tl-ico.falta   { background: var(--bad-soft, #FBEAEA);     color: var(--bad-ink, #7A1F1F); }
.portal-estudiante .rpt-tl-ico.sticker { background: var(--gold-soft, #FBF3DE);    color: #8A6512; }
.portal-estudiante .rpt-tl-ico.obs     { background: var(--purple-soft, #ECE5F8);  color: var(--purple, #7C5BC9); }
.portal-estudiante .rpt-tl-ico.examen  { background: var(--teal-soft, #E6F5F6);   color: var(--teal-ink, #2C6D6F); }

.portal-estudiante .rpt-tl-body { min-width: 0; }

.portal-estudiante .rpt-tl-t {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.portal-estudiante .rpt-tl-d {
  font-size: 13px;
  color: var(--ink-2, #4A4F57);
  margin-top: 2px;
  line-height: 1.4;
}
.portal-estudiante .rpt-tl-m {
  font-size: 12px;
  color: var(--ink-3, #6B7078);
  margin-top: 4px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.portal-estudiante .rpt-tl-cls-tag { font-weight: 600; }

.portal-estudiante .rpt-tl-more {
  width: 100%;
  min-height: var(--tap, 44px);
  border-top: 1px solid var(--line-soft, #F0EBE0);
  font-size: 13px;
  font-weight: 700;
  color: var(--teal-ink, #2C6D6F);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-fast, 150ms);
}
.portal-estudiante .rpt-tl-more:hover { background: var(--surface-2, #FBF9F4); }

/* ==========================================================================
   ESTADO VACIO DE CLASES
   ========================================================================== */
.portal-estudiante .rpt-clases-empty {
  text-align: center;
  padding: var(--s-8, 32px) var(--s-5, 20px);
}

.portal-estudiante .rpt-clases-empty h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.portal-estudiante .rpt-clases-empty p {
  font-size: 14px;
  color: var(--ink-3, #6B7078);
  max-width: 280px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Accesibilidad: reduccion de movimiento */
@media (prefers-reduced-motion: reduce) {
  .portal-estudiante *,
  .portal-estudiante *::before,
  .portal-estudiante *::after {
    transition: none !important;
    animation: none !important;
  }
}