/* ═══════════════════════════════════════════════
   Matemáticas En Tu Bolsillo · style.css
   Diseño: paleta educativa viva y moderna
   Tipografía: Inter (sistema) + display heading
═══════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  --c-bg:        #f5f8fb;
  --c-surface:   #ffffff;
  --c-border:    #dbe7ef;
  --c-navy:      #06345f;
  --c-blue:      #0b4d78;
  --c-blue-lt:   #e8f4f8;
  --c-gold:      #17a8a8;
  --c-gold-lt:   #dff7f5;
  --c-green:     #0d9488;
  --c-green-lt:  #dff8f4;
  --c-red:       #c2414b;
  --c-red-lt:    #fde8ea;
  --c-text:      #162838;
  --c-muted:     #66788a;
  --c-teal-deep: #0f8f9d;
  --c-cyan:      #17b7b7;
  --c-orange:    #0b6f86;

  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --shadow-sm:   0 2px 10px rgba(6,52,95,.08);
  --shadow-md:   0 12px 32px rgba(6,52,95,.13);

  --font-body:   'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-display:'Georgia', serif;

  --transition:  .2s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
.hidden { display: none !important; }
img, svg, video, canvas { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
body {
  font-family: var(--font-body);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
.brand-lockup,
.drawer-brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--c-navy);
  text-decoration: none;
}
.brand-lockup img,
.drawer-brand img,
.app-header-logo,
.panel-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 12px;
}
.hero-logo,
.auth-logo {
  display: block;
  width: min(220px, 62vw);
  height: auto;
  object-fit: contain;
}
.hero-logo {
  margin: 0 auto 1rem;
}
.auth-logo {
  margin: 0 auto 1rem;
}
.panel-logo {
  margin: 0 auto .9rem;
}
.welcome-splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 50% 20%, rgba(23,183,183,.18), transparent 35%),
    rgba(245,248,251,.96);
  backdrop-filter: blur(16px);
}
.welcome-splash > div {
  width: min(440px, 92vw);
  text-align: center;
  padding: 2rem;
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--c-border);
  box-shadow: 0 24px 80px rgba(6,52,95,.16);
  animation: splashIn .42s ease both;
}
.welcome-splash img {
  width: 210px;
  max-width: 70vw;
  margin-bottom: .8rem;
}
.welcome-splash h2 {
  color: var(--c-navy);
  font-family: var(--font-display);
}
.welcome-splash p {
  color: var(--c-muted);
  margin-top: .4rem;
}
@keyframes splashIn {
  from { opacity: 0; transform: scale(.94) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
body.group-locked > :not(#groupGate):not(#welcomeSplash) { display: none !important; }
body:not(.group-locked) #groupGate { display: none !important; }
body:not(.exam-active) .site-header { display: none !important; }
body.admin-mode { padding-bottom: 5.5rem; }
body.admin-mode .site-header { display: none !important; }
body.admin-mode .section-nav .nav-btn { display: none !important; }
body.admin-mode .section-nav {
  justify-content: flex-start;
}

body.admin-mode .admin-exit-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: .85rem 1rem;
  background: rgba(255,255,255,.96);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -8px 28px rgba(0,56,101,.12);
  backdrop-filter: blur(10px);
}
.admin-exit-dock { display: none; }
.admin-exit-btn {
  min-width: 190px;
  border-color: transparent;
  background: var(--c-red);
  color: #fff;
  box-shadow: 0 8px 20px rgba(192,57,43,.22);
}
.admin-exit-btn:hover {
  background: #a93226;
  color: #fff;
  transform: translateY(-1px);
}

/* ══════════════════════════════════
   HEADER
══════════════════════════════════ */
.site-header {
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-blue) 52%, var(--c-cyan) 100%);
  color: #fff;
  padding: 2rem 1.5rem 1.2rem;
}
.header-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.header-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .85rem;
  align-items: start;
}
.header-brand .brand-pill,
.header-brand h1,
.header-brand .header-desc {
  grid-column: 2;
}
.app-header-logo {
  grid-row: 1 / span 3;
  background: rgba(255,255,255,.88);
  padding: .25rem;
}
.brand-pill {
  display: inline-block;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .75rem;
  margin-bottom: .6rem;
}
.site-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.5vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .4rem;
}
.header-desc {
  font-size: .88rem;
  opacity: .82;
  max-width: 520px;
}
.header-stats {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}
.stat-box {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-md);
  padding: .6rem 1.1rem;
  text-align: center;
  min-width: 70px;
}
.stat-num {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}
.stat-label {
  font-size: .7rem;
  opacity: .75;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Progress bar */
.progress-wrap {
  max-width: 860px;
  margin: 1.2rem auto .35rem;
  background: rgba(255,255,255,.2);
  border-radius: 99px;
  height: 7px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--c-gold);
  border-radius: 99px;
  transition: width .4s ease;
}
.progress-label {
  max-width: 860px;
  margin: 0 auto;
  font-size: .75rem;
  opacity: .7;
  text-align: right;
}

/* ══════════════════════════════════
   NAV DE SECCIONES
══════════════════════════════════ */
.section-nav {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1rem;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.drawer-toggle {
  border: 0;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--c-blue), var(--c-teal-deep));
  color: #fff;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.25rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  flex: 0 0 auto;
}
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 20, 50, .28);
  animation: fadeIn .18s ease;
}
.side-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 86vw);
  z-index: 70;
  background: #fff;
  border-right: 1px solid var(--c-border);
  box-shadow: 18px 0 50px rgba(0,56,101,.18);
  padding: 1rem;
  display: grid;
  align-content: start;
  gap: .65rem;
  animation: drawerIn .22s ease;
}
@keyframes drawerIn {
  from { transform: translateX(-100%); opacity: .5; }
  to { transform: translateX(0); opacity: 1; }
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--c-navy);
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--c-border);
}
.drawer-close {
  border: 0;
  background: var(--c-blue-lt);
  color: var(--c-navy);
  border-radius: 999px;
  width: 2rem;
  height: 2rem;
  font-size: 1.2rem;
  cursor: pointer;
}
.drawer-link {
  border: 0;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--c-navy);
  text-align: left;
  padding: .9rem 1rem;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.drawer-link:hover { background: var(--c-blue-lt); }
.drawer-link.danger { color: var(--c-red); }
.nav-btn {
  background: none;
  border: 1.5px solid transparent;
  border-radius: 99px;
  padding: .45rem 1.4rem;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--c-muted);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.nav-btn:hover:not(.disabled) { border-color: var(--c-blue); color: var(--c-blue); }
.nav-btn.active {
  background: linear-gradient(135deg, var(--c-blue), var(--c-cyan));
  color: #fff;
  border-color: var(--c-blue);
}
.nav-btn.disabled { opacity: .45; cursor: not-allowed; }
.support-nav {
  color: var(--c-green);
}
.exit-nav {
  color: var(--c-red);
}
.group-status {
  max-width: 860px;
  margin: .75rem auto 0;
  padding: .65rem 1rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--c-navy);
  font-weight: 800;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.auth-gate {
  max-width: 720px;
}
.auth-shell {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(6,24,43,.38);
  backdrop-filter: blur(14px);
  animation: fadeIn .2s ease;
}
.auth-shell .auth-gate {
  position: relative;
  width: min(720px, 100%);
  max-height: min(90vh, 860px);
  overflow: auto;
  margin: 0;
  animation: modalIn .25s ease both;
}
.auth-close {
  position: absolute;
  top: .9rem;
  right: .9rem;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: var(--c-blue-lt);
  color: var(--c-navy);
  font-size: 1.35rem;
  font-weight: 900;
  cursor: pointer;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.public-home {
  max-width: 1120px;
}
.landing-nav {
  position: sticky;
  top: .8rem;
  z-index: 60;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(98,84,243,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}
.landing-nav strong {
  color: var(--c-navy);
}
.landing-nav div {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.landing-menu-toggle {
  display: none;
  border: 0;
  border-radius: 12px;
  background: var(--c-blue-lt);
  color: var(--c-navy);
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.2rem;
  cursor: pointer;
}
.landing-nav a {
  color: var(--c-muted);
  font-weight: 800;
  font-size: .9rem;
  text-decoration: none;
}
.landing-nav .btn {
  padding: .55rem 1rem;
}
.public-hero {
  background:
    radial-gradient(circle at 18% 18%, rgba(23,183,183,.2), transparent 30%),
    radial-gradient(circle at 82% 20%, rgba(0,180,216,.22), transparent 28%),
    linear-gradient(135deg, #fff 0%, var(--c-blue-lt) 54%, #fff 100%);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 3.2rem 2.4rem;
  margin-bottom: 1.2rem;
}
.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
  align-items: center;
  gap: 2rem;
  min-height: 560px;
}
.public-pill {
  color: var(--c-navy);
  background: rgba(255,255,255,.72);
  border-color: rgba(98,84,243,.22);
}
.public-hero h1 {
  font-family: var(--font-display);
  color: var(--c-navy);
  font-size: clamp(2.3rem, 6vw, 4.2rem);
  line-height: 1.1;
  margin: .6rem 0 .8rem;
}
.public-hero p {
  color: var(--c-muted);
  max-width: 760px;
  font-size: 1.02rem;
}
.public-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin: 1.4rem 0 1.6rem;
}
.public-actions a {
  text-decoration: none;
}
.math-showcase {
  position: relative;
  min-height: 360px;
}
.formula-card,
.mini-dashboard {
  position: absolute;
  padding: 1rem 1.1rem;
  border: 1.5px solid rgba(255,255,255,.85);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  color: var(--c-navy);
  box-shadow: 0 18px 40px rgba(48,33,95,.16);
  backdrop-filter: blur(10px);
  font-weight: 900;
  animation: floatSoft 6s ease-in-out infinite;
}
.formula-card.primary {
  top: 15%;
  left: 8%;
  font-size: 1.35rem;
  background: linear-gradient(135deg, #fff, var(--c-gold-lt));
}
.formula-card:nth-child(2) {
  top: 48%;
  right: 2%;
  animation-delay: .8s;
}
.formula-card:nth-child(3) {
  bottom: 6%;
  left: 2%;
  animation-delay: 1.5s;
}
.mini-dashboard {
  right: 10%;
  top: 8%;
  min-width: 160px;
  animation-delay: .3s;
}
.mini-dashboard span {
  display: block;
  color: var(--c-muted);
  font-size: .82rem;
}
.mini-dashboard strong {
  display: block;
  font-size: 2rem;
  margin: .2rem 0;
}
.mini-dashboard div {
  height: 9px;
  border-radius: 999px;
  background: var(--c-blue-lt);
  overflow: hidden;
}
.mini-dashboard i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--c-blue), var(--c-teal-deep));
}
@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.landing-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  margin-top: 1.6rem;
}
.landing-highlights article,
.landing-grid article,
.landing-support {
  background: rgba(255,255,255,.86);
  border: 1.5px solid rgba(98,84,243,.16);
  border-radius: var(--radius-md);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}
.landing-highlights strong,
.landing-grid strong,
.support-columns strong {
  display: block;
  color: var(--c-navy);
  margin-bottom: .35rem;
}
.landing-highlights span,
.landing-grid p,
.support-columns span,
.support-columns a {
  color: var(--c-muted);
  font-size: .92rem;
  line-height: 1.55;
}
.feature-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--c-blue-lt);
  margin-bottom: .7rem;
  font-size: 1.3rem;
}
.landing-section,
.landing-support {
  margin-bottom: 1.5rem;
}
.section-kicker {
  display: inline-flex;
  color: var(--c-teal-deep);
  font-weight: 900;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .08em;
  margin-bottom: .45rem;
}
.landing-section h2,
.landing-support h2 {
  font-family: var(--font-display);
  color: var(--c-navy);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: .2rem 0 1rem;
}
.section-lead {
  max-width: 820px;
  color: var(--c-muted);
  margin-bottom: 1.2rem;
}
.landing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}
.landing-grid article span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-navy), var(--c-cyan));
  color: #fff;
  font-weight: 900;
  margin-bottom: .75rem;
}
.support-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.support-columns div {
  display: grid;
  gap: .35rem;
}
.support-columns a {
  color: var(--c-blue);
  font-weight: 800;
  text-decoration: none;
}
.timeline-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .75rem;
}
.timeline-grid article {
  position: relative;
  padding: 1rem;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1.5px solid var(--c-border);
  box-shadow: var(--shadow-sm);
}
.timeline-grid article span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-gold);
  color: var(--c-navy);
  font-weight: 900;
  margin-bottom: .55rem;
}
.timeline-grid strong {
  display: block;
  color: var(--c-navy);
  margin-bottom: .35rem;
}
.timeline-grid p {
  color: var(--c-muted);
  font-size: .9rem;
}
.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.audience-grid article,
.cta-band {
  padding: 1.4rem;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--c-border);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.audience-grid h2,
.cta-band h2 {
  font-family: var(--font-display);
  color: var(--c-navy);
  margin-bottom: .55rem;
}
.audience-grid p,
.cta-band p {
  color: var(--c-muted);
}
.audience-grid ul {
  display: grid;
  gap: .35rem;
  margin-top: .9rem;
  color: var(--c-navy);
  padding-left: 1.1rem;
}
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: 1.5rem;
}
.stats-strip div {
  padding: 1rem;
  text-align: center;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--c-blue-lt), #fff);
  border: 1.5px solid var(--c-border);
}
.stats-strip strong {
  display: block;
  color: var(--c-navy);
  font-size: 1.7rem;
}
.stats-strip span {
  color: var(--c-muted);
  font-size: .9rem;
}
.cta-band {
  text-align: center;
  background:
    radial-gradient(circle at 20% 15%, rgba(23,183,183,.22), transparent 35%),
    linear-gradient(135deg, #fff, var(--c-blue-lt));
  margin-bottom: 1.4rem;
}
.cta-band .public-actions {
  justify-content: center;
}
.public-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}
.public-grid article,
.legal-panel {
  background: rgba(255,255,255,.82);
  border: 1.5px solid rgba(98,84,243,.16);
  border-radius: var(--radius-md);
  padding: 1rem;
}
.public-grid strong {
  display: block;
  color: var(--c-navy);
  margin-bottom: .35rem;
}
.public-grid span {
  color: var(--c-muted);
  font-size: .92rem;
}
.public-footer {
  display: grid;
  gap: 1rem;
  color: var(--c-muted);
  font-size: .9rem;
  margin: 1rem 0 2rem;
  padding: 1.4rem;
  border-top: 1px solid var(--c-border);
  text-align: center;
}
.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  text-align: left;
}
.footer-columns div {
  display: grid;
  align-content: start;
  gap: .4rem;
}
.footer-columns strong {
  color: var(--c-navy);
}
.public-footer a,
.footer-columns span {
  color: var(--c-blue);
  font-weight: 800;
  text-decoration: none;
}
.footer-columns span {
  color: var(--c-muted);
  font-weight: 600;
}
.recovery-wizard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}
.recovery-wizard span {
  padding: .55rem .4rem;
  border-radius: 999px;
  background: var(--c-blue-lt);
  color: var(--c-muted);
  font-size: .78rem;
  font-weight: 900;
  text-align: center;
}
.recovery-wizard span.active {
  color: #fff;
  background: linear-gradient(135deg, var(--c-blue), var(--c-teal-deep));
}
.legal-page {
  max-width: 860px;
}
.legal-hero {
  margin-bottom: 1rem;
}
.legal-panel {
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.legal-panel h2 {
  color: var(--c-navy);
  font-size: 1.15rem;
  margin: 1rem 0 .35rem;
}
.legal-panel h2:first-child {
  margin-top: 0;
}
.legal-panel p {
  color: var(--c-muted);
  margin-bottom: .8rem;
}
.auth-form,
.group-entry {
  display: grid;
  gap: .85rem;
  margin-top: 1rem;
}
.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}
.profile-form-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.profile-form-grid label {
  display: grid;
  gap: .35rem;
  min-width: 0;
  color: var(--c-blue);
  font-size: .88rem;
  font-weight: 800;
  text-align: left;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
  padding: .35rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-blue-lt);
}
.auth-tab {
  border: 0;
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
  background: transparent;
  color: var(--c-blue);
  font-weight: 800;
  cursor: pointer;
}
.auth-tab.active {
  background: #fff;
  color: var(--c-navy);
  box-shadow: var(--shadow-sm);
}
.password-wrap {
  position: relative;
}
.password-wrap .admin-input {
  padding-right: 3.1rem;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: .55rem;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
}
.password-toggle:hover {
  background: var(--c-blue-lt);
}
.auth-links {
  display: flex;
  justify-content: center;
  gap: .9rem;
  flex-wrap: wrap;
  font-size: .9rem;
}
.auth-links button,
.auth-links a {
  border: 0;
  background: transparent;
  color: var(--c-blue);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.password-rules {
  display: grid;
  gap: .15rem;
  text-align: left;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: .55rem .7rem;
  background: #fff;
}
.password-rules p {
  margin: 0 !important;
  color: var(--c-red);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.35;
}
.password-rules p.valid {
  color: var(--c-green);
}
.auth-actions {
  display: flex;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
}
.auth-actions-duo .btn {
  min-width: 150px;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
  color: var(--c-muted);
  font-weight: 800;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--c-border);
}
.stats-panel {
  max-width: 920px;
  margin-inline: auto;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  text-align: left;
}
.stats-card {
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}
.stats-card h3 {
  color: var(--c-blue);
  margin-bottom: .6rem;
}
.stats-card p {
  margin: .25rem 0;
  color: var(--c-text);
}
.class-actions-panel {
  display: grid;
  gap: .7rem;
  margin: .85rem 0;
  padding: .9rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-blue-lt);
}
.class-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  margin: .8rem 0;
  padding: .85rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: #fff;
}
.class-toolbar div {
  display: grid;
  min-width: 0;
}
.class-toolbar span {
  color: var(--c-muted);
  font-size: .85rem;
  overflow-wrap: anywhere;
}
.class-actions-panel .result-actions {
  justify-content: flex-start;
  margin-bottom: 0;
}
.soon-badge {
  background: var(--c-gold);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  border-radius: 99px;
  padding: .1rem .55rem;
  text-transform: uppercase;
}

/* ══════════════════════════════════
   MAIN
══════════════════════════════════ */
.main-content {
  max-width: 860px;
  margin: 2rem auto 4rem;
  padding: 0 1rem;
}
.main-content.hidden { display: none; }

/* ══════════════════════════════════
   TARJETAS DE PREGUNTA
══════════════════════════════════ */
.question-card {
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.2rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  position: relative;
}
.question-card:hover { border-color: var(--c-blue); box-shadow: var(--shadow-sm); }
.question-card.answered { border-color: var(--c-blue); }
.question-card.answered .q-num { background: var(--c-blue); color: #fff; }

/* número de pregunta */
.q-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--c-blue-lt);
  color: var(--c-blue);
  font-weight: 700;
  font-size: .82rem;
  flex-shrink: 0;
  margin-right: .8rem;
  transition: var(--transition);
}
.q-header { display: flex; align-items: flex-start; gap: .2rem; margin-bottom: 1rem; }
.q-text { font-size: 1rem; font-weight: 600; line-height: 1.5; flex: 1; }

/* fórmula centrada */
.q-formula {
  background: var(--c-bg);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--radius-sm);
  padding: .75rem 1.2rem;
  margin: .75rem 0 1.1rem;
  overflow-x: auto;
}

/* opciones */
.options-list {
  display: grid;
  gap: .55rem;
}
.option-label {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  font-size: .93rem;
}
.option-label:hover { background: var(--c-blue-lt); border-color: var(--c-blue); }
.option-label input[type="radio"] { display: none; }
.option-label.selected {
  background: var(--c-blue-lt);
  border-color: var(--c-blue);
}
.opt-letter {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: .8rem;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.option-label.selected .opt-letter { background: var(--c-blue); color: #fff; }

/* ══════════════════════════════════
   FOOTER DEL FORMULARIO
══════════════════════════════════ */
.form-footer {
  text-align: center;
  margin-top: 2rem;
}
.warn-msg {
  color: var(--c-red);
  font-size: .88rem;
  margin-bottom: .9rem;
  font-weight: 500;
}

/* ══════════════════════════════════
   BOTONES
══════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .75rem 2rem;
  border-radius: 99px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--c-blue), var(--c-teal-deep));
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,56,101,.25);
}
.btn-primary:hover { box-shadow: 0 8px 24px rgba(109,93,252,.28); transform: translateY(-1px); }
.btn-secondary {
  background: linear-gradient(135deg, var(--c-cyan), var(--c-green));
  color: #fff;
}
.btn-secondary:hover { filter: brightness(.96); }
.btn-outline {
  background: var(--c-surface);
  color: var(--c-blue);
  border-color: var(--c-blue);
}
.btn-outline:hover { background: var(--c-blue-lt); }

/* ══════════════════════════════════
   SCORE CARD
══════════════════════════════════ */
#resultsSection { animation: fadeUp .5s ease; }
@keyframes fadeUp {
  from { opacity:0; transform: translateY(20px); }
  to   { opacity:1; transform: translateY(0); }
}

.score-card {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2rem 2.4rem;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.score-ring-wrap { position: relative; flex-shrink: 0; }
.score-ring { width: 120px; height: 120px; }
.ring-bg    { fill: none; stroke: var(--c-border); stroke-width: 10; }
.ring-fill  { fill: none; stroke: var(--c-gold); stroke-width: 10;
              stroke-linecap: round;
              transform: rotate(-90deg); transform-origin: 60px 60px;
              transition: stroke-dashoffset 1s ease; }
.score-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .1rem;
}
.score-pct  { font-size: 1.5rem; font-weight: 800; color: var(--c-navy); line-height:1; }
.score-nota { font-size: .85rem; color: var(--c-muted); font-weight: 600; }

.score-details { flex: 1; min-width: 0; }
.score-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--c-navy);
  margin-bottom: .7rem;
}
.score-pills { display: none; }
.pill {
  border-radius: 99px;
  padding: .3rem .9rem;
  font-size: .85rem;
  font-weight: 600;
}
.pill.correct { background: var(--c-green-lt); color: var(--c-green); }
.pill.wrong   { background: var(--c-red-lt);   color: var(--c-red); }
.score-metrics {
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--c-border);
  color: var(--c-muted);
  font-size: .9rem;
  line-height: 1.55;
}
.score-metrics strong { color: var(--c-navy); }

/* ══════════════════════════════════
   GRÁFICO DE BARRAS
══════════════════════════════════ */
.chart-wrap {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: 1.6rem 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
}
.section-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: 1.2rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--c-border);
}
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 3rem;
  height: 160px;
  padding: 0 2rem 0;
}
.bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  flex: 1;
  height: 100%;
}
.bar {
  width: 100%;
  max-width: 100px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  height: 0;
  min-height: 0;
  transition: height 1s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.bar::after {
  content: attr(data-val);
  position: absolute;
  top: -1.8rem; left: 50%;
  transform: translateX(-50%);
  font-size: .9rem;
  font-weight: 700;
  color: var(--c-navy);
}
.bar-correct { background: linear-gradient(180deg,#22c97a,#1a7f5a); }
.bar-wrong   { background: linear-gradient(180deg,#f07070,#c0392b); }
.bar-label   { font-size: .82rem; font-weight: 600; color: var(--c-muted); flex-shrink: 0; }

/* ══════════════════════════════════
   TABLA RESUMEN
══════════════════════════════════ */
.table-wrap {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: 1.6rem 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.summary-table th {
  text-align: left;
  padding: .6rem 1rem;
  background: var(--c-bg);
  color: var(--c-muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.summary-table td {
  padding: .65rem 1rem;
  border-top: 1px solid var(--c-border);
}
.summary-table tr:hover td { background: var(--c-bg); }
.tag-ok  { color: var(--c-green); font-weight: 700; }
.tag-bad { color: var(--c-red);   font-weight: 700; }

/* ══════════════════════════════════
   RETROALIMENTACIÓN
══════════════════════════════════ */
#feedbackList {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: 1.6rem 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
}
.feedback-item {
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1rem;
  transition: var(--transition);
}
.feedback-item.fb-correct { border-color: var(--c-green); background: var(--c-green-lt); }
.feedback-item.fb-wrong   { border-color: var(--c-red);   background: var(--c-red-lt); }
.feedback-item.hidden-item { display: none; }

.fb-header {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .7rem;
  font-weight: 700;
  font-size: .95rem;
}
.fb-icon { font-size: 1.1rem; }
.fb-resp {
  font-size: .88rem;
  color: var(--c-text);
  margin-bottom: .25rem;
}
.fb-resp strong { color: var(--c-navy); }
.fb-expl {
  font-size: .85rem;
  color: var(--c-muted);
  background: rgba(255,255,255,.6);
  border-radius: var(--radius-sm);
  padding: .7rem 1rem;
  margin-top: .6rem;
  border-left: 3px solid var(--c-gold);
  line-height: 1.7;
}

/* ══════════════════════════════════
   BOTONES RESULTADO
══════════════════════════════════ */
.result-actions {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 3rem;
}

/* ══════════════════════════════════
   COMING SOON
══════════════════════════════════ */
.coming-soon {
  text-align: center;
  padding: 5rem 1rem;
  color: var(--c-muted);
}
.cs-icon { font-size: 3rem; display: block; margin-bottom: 1rem; }
.coming-soon h2 { font-family: var(--font-display); color: var(--c-navy); margin-bottom: .6rem; }

/* ══════════════════════════════════
   FOOTER
══════════════════════════════════ */
.site-footer {
  text-align: center;
  padding: 1.5rem;
  font-size: .8rem;
  color: var(--c-muted);
  border-top: 1px solid var(--c-border);
}
.site-footer a {
  color: var(--c-blue);
  font-weight: 600;
  text-decoration: none;
}
.site-footer a:hover { text-decoration: underline; }

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media (max-width: 600px) {
  .site-header { padding: 1.4rem 1rem 1rem; }
  .header-inner { flex-direction: column; gap: 1rem; }
  .header-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
  }
  .stat-box { min-width: 0; padding: .55rem .35rem; }
  .stat-num { font-size: 1.25rem; }
  .timer-box .stat-num { font-size: 1.05rem; letter-spacing: 0; }
  .section-nav { overflow-x: auto; justify-content: flex-start; }
  .nav-btn { flex: 1 0 auto; justify-content: center; padding: .45rem .9rem; }
  .main-content { margin: 1.2rem auto 3rem; padding: 0 .75rem; }
  .score-card { flex-direction: column; align-items: center; text-align: center; gap: 1.4rem; }
  .score-pills { justify-content: center; }
  .bar-chart { gap: 1.5rem; }
  .result-actions { flex-direction: column; align-items: center; }
  .result-actions .btn { width: 100%; max-width: 320px; }
  .question-card { padding: 1.2rem 1.1rem; }
  .q-header { align-items: flex-start; }
  .q-text { min-width: 0; overflow-wrap: anywhere; }
  .option-label { align-items: flex-start; padding: .7rem .8rem; }
  .q-formula { padding: .7rem .85rem; }
  .table-wrap { padding: 1rem; }
  .summary-table { min-width: 520px; }
  #feedbackList { padding: 1.2rem 1rem; }
  .start-screen { padding: 2rem 1rem; }
  .public-hero { padding: 1.5rem 1rem; }
  .public-grid,
  .landing-highlights,
  .landing-grid,
  .support-columns,
  .timeline-grid,
  .audience-grid,
  .stats-strip,
  .footer-columns { grid-template-columns: 1fr; }
  .landing-nav { position: static; border-radius: var(--radius-md); align-items: flex-start; }
  .landing-nav { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .landing-menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .landing-nav div {
    display: none;
    grid-column: 1 / -1;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .landing-nav.open div { display: flex; }
  .landing-nav div .btn,
  .landing-nav div a { width: 100%; justify-content: center; text-align: center; }
  .landing-hero { grid-template-columns: 1fr; min-height: 0; }
  .math-showcase { min-height: 240px; }
  .formula-card.primary { left: 0; top: 8%; }
  .formula-card:nth-child(2) { right: 0; top: 45%; }
  .formula-card:nth-child(3) { left: 4%; bottom: 0; }
  .mini-dashboard { right: 0; top: 0; }
  .public-actions .btn { max-width: 100%; }
  .btn { width: 100%; max-width: 340px; padding-inline: 1rem; }
  .score-metrics { text-align: left; }
  .admin-login { grid-template-columns: 1fr; }
  .admin-row { align-items: flex-start; }
  .welcome-panel { margin-inline: .75rem; padding: 1.1rem; }
  .welcome-grid,
  .bank-progress-grid,
  .bank-grid { grid-template-columns: 1fr; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .site-header { padding-inline: 1.25rem; }
  .landing-nav { border-radius: var(--radius-lg); }
  .main-content,
  .header-inner,
  .progress-wrap,
  .progress-label {
    max-width: calc(100vw - 2rem);
  }
  .header-stats { gap: .6rem; }
  .score-card { gap: 1.6rem; padding: 1.8rem; }
  .public-grid,
  .landing-highlights,
  .landing-grid,
  .support-columns,
  .timeline-grid,
  .audience-grid,
  .stats-strip,
  .footer-columns,
  .bank-progress-grid,
  .bank-grid { grid-template-columns: 1fr; }
  .landing-hero { grid-template-columns: 1fr; }
  .question-card,
  .chart-wrap,
  .table-wrap,
  #feedbackList {
    padding-inline: 1.4rem;
  }
}

/* ══════════════════════════════════
   ESTADOS POST-EVALUACIÓN en tarjetas
══════════════════════════════════ */
.question-card.result-correct { border-color: var(--c-green); }
.question-card.result-wrong   { border-color: var(--c-red); }
.option-label.opt-correct {
  background: var(--c-green-lt);
  border-color: var(--c-green);
}
.option-label.opt-correct .opt-letter { background: var(--c-green); color:#fff; }
.option-label.opt-wrong {
  background: var(--c-red-lt);
  border-color: var(--c-red);
}
.option-label.opt-wrong .opt-letter { background: var(--c-red); color:#fff; }

/* ══════════════════════════════════
   PANTALLA DE INICIO / BLOQUEO
══════════════════════════════════ */
.start-screen {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 3rem 2.5rem;
  text-align: center;
  margin-bottom: 2rem;
}
.start-screen .cs-icon { font-size: 3rem; display: block; margin-bottom: 1rem; }
.start-screen h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--c-navy);
  margin-bottom: .7rem;
}
.start-screen p { color: var(--c-muted); font-size: .95rem; margin-bottom: 1.5rem; line-height: 1.7; }
.start-rules {
  background: var(--c-blue-lt);
  border-radius: var(--radius-md);
  padding: 1rem 1.4rem;
  margin-bottom: 1.8rem;
  text-align: left;
}
.start-rules li { font-size: .9rem; color: var(--c-navy); margin-bottom: .4rem; list-style: none; }
.start-rules li::before { content: "✔ "; color: var(--c-green); font-weight: 700; }
.welcome-panel {
  max-width: 900px;
  margin: 0 auto 1.5rem;
  padding: 1.4rem 1.6rem;
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.welcome-panel h2 {
  font-family: var(--font-display);
  color: var(--c-navy);
  font-size: 1.45rem;
  margin-bottom: .45rem;
}
.welcome-panel p {
  color: var(--c-muted);
  line-height: 1.65;
  margin-bottom: 1rem;
}
.welcome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}
.welcome-grid span {
  display: block;
  padding: .75rem .85rem;
  background: var(--c-blue-lt);
  border-radius: var(--radius-md);
  color: var(--c-navy);
  font-size: .9rem;
  font-weight: 700;
}
.profile-shell {
  display: grid;
  gap: 1rem;
}
.profile-card,
.profile-panel {
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.4rem;
}
.profile-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.2rem;
  align-items: center;
}
.profile-photo-box {
  display: grid;
  gap: .75rem;
  justify-items: center;
}
.profile-photo-actions {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  justify-content: center;
}
.profile-photo-actions .btn {
  width: auto;
  min-width: 86px;
  padding: .55rem .75rem;
}
.profile-photo-box img {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--c-blue-lt);
  background: linear-gradient(135deg, var(--c-blue-lt), #fff);
  cursor: zoom-in;
}
.phone-code-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin: -.2rem 0 .9rem;
}
.phone-countdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: var(--c-gold-lt);
  color: var(--c-navy);
  font-weight: 800;
}
.phone-help {
  color: var(--c-muted);
  font-size: .88rem;
}
.bank-status.error {
  color: var(--c-red);
  font-weight: 700;
}
.bank-status.ok {
  color: var(--c-green);
  font-weight: 700;
}
.btn:disabled {
  opacity: .58;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.profile-summary h2,
.profile-panel h3 {
  font-family: var(--font-display);
  color: var(--c-navy);
  margin-bottom: .35rem;
}
.profile-summary p,
.profile-panel p {
  color: var(--c-muted);
  margin-bottom: .8rem;
}
.profile-chips {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
}
.profile-chips span {
  padding: .45rem .65rem;
  border-radius: 999px;
  background: var(--c-blue-lt);
  color: var(--c-navy);
  font-size: .84rem;
  font-weight: 800;
}
.profile-panel {
  text-align: left;
}
.profile-panel .btn {
  margin-top: .85rem;
}
.settings-shell {
  display: grid;
  gap: 1rem;
}
.accordion-card {
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-md);
  background: #fff;
  margin: .85rem 0;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.accordion-card[open] {
  border-color: rgba(0,87,168,.35);
  box-shadow: var(--shadow-sm);
  animation: accordionOpen .22s ease;
}
@keyframes accordionOpen {
  from { transform: translateY(-2px); opacity: .82; }
  to { transform: translateY(0); opacity: 1; }
}
.accordion-card summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem;
  color: var(--c-navy);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.accordion-card summary::-webkit-details-marker { display: none; }
.accordion-card summary::after {
  content: "+";
  color: var(--c-blue);
  font-size: 1.2rem;
}
.accordion-card[open] summary::after { content: "−"; }
.accordion-card > :not(summary) {
  margin-inline: 1rem;
}
.accordion-card > :last-child {
  margin-bottom: 1rem;
}
.danger-zone {
  border-color: rgba(192,57,43,.35);
  background: #fffafa;
}
.confirm-row {
  display: flex;
  gap: .55rem;
  align-items: center;
  margin-top: .85rem;
  color: var(--c-muted);
  font-weight: 800;
}
.mini-help {
  color: var(--c-muted);
  font-size: .86rem;
  margin: .5rem 0 .8rem;
}
.class-students-list {
  display: grid;
  gap: .85rem;
}
.student-list {
  display: grid;
  gap: .7rem;
  margin-top: .85rem;
}
.student-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px auto;
  gap: .7rem;
  align-items: center;
  padding: .85rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: #fff;
}
.student-row strong,
.student-row span,
.student-row small {
  display: block;
}
.student-row strong {
  color: var(--c-navy);
}
.student-row span,
.student-row small {
  color: var(--c-muted);
  overflow-wrap: anywhere;
}
.bank-progress-panel {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1.5px solid var(--c-border);
}
.bank-progress-panel h3,
.admin-metrics-panel h3 {
  color: var(--c-blue);
  font-size: 1.1rem;
  margin-bottom: .35rem;
}
.bank-progress-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin: 1rem 0;
}
.bank-progress-item {
  padding: .8rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--c-muted);
  font-weight: 800;
}
.bank-progress-item.done {
  color: var(--c-green);
  background: var(--c-green-lt);
  border-color: rgba(26,127,90,.35);
}

.admin-login {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: start;
}
.admin-input {
  width: 100%;
  min-width: 0;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: .8rem 1rem;
  font: inherit;
  color: var(--c-text);
}
.admin-input:focus {
  border-color: var(--c-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,87,168,.12);
}
.code-input {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 800;
}
.admin-panel {
  max-width: 680px;
  margin-inline: auto;
}
.admin-group-select {
  display: grid;
  gap: .45rem;
  margin: 1.2rem auto;
  text-align: left;
}
.admin-group-select label {
  color: var(--c-blue);
  font-weight: 800;
}
.admin-list {
  display: grid;
  gap: .8rem;
}
.admin-current-group {
  margin: 0;
  color: var(--c-muted);
  font-weight: 700;
}
.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-md);
  background: #fff;
  text-align: left;
}
.admin-row strong {
  display: block;
  color: var(--c-blue);
  font-size: 1.02rem;
}
.admin-row span {
  display: block;
  color: var(--c-muted);
  font-size: .9rem;
  margin-top: .2rem;
}
.admin-bank-panel {
  margin: 1.5rem 0;
  padding: 1.2rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-md);
  background: #f8fbff;
  text-align: left;
}
.admin-bank-panel h3 {
  color: var(--c-blue);
  font-size: 1.1rem;
  margin-bottom: .3rem;
}
.admin-bank-panel p {
  margin-bottom: .9rem;
}
.bank-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: 1rem;
}
.bank-grid label {
  display: grid;
  gap: .35rem;
  color: var(--c-blue);
  font-weight: 800;
  font-size: .9rem;
}
.bank-status {
  min-height: 1.2rem;
  color: var(--c-green);
  font-weight: 800;
  margin: .7rem 0 0;
}
.bank-status.error,
.warn-msg {
  color: var(--c-red);
}
.admin-metrics-toggle {
  margin-top: .5rem;
}
.admin-metrics-panel {
  margin-top: 1rem;
  padding: 1.2rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-md);
  background: #fff;
  text-align: left;
}
.admin-welcome-photo {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--c-blue-lt);
  margin: 0 auto 1rem;
  display: block;
}
.first-attempt-result .score-ring-wrap,
.first-attempt-result .score-title,
.first-attempt-result .score-pills,
.first-attempt-result .table-wrap,
.first-attempt-result [id^="feedbackList"],
.first-attempt-result [id^="btnWrong"],
.first-attempt-result [id^="btnAll"] {
  display: none !important;
}
.first-attempt-result .score-card {
  grid-template-columns: 1fr;
}
.switch {
  position: relative;
  width: 54px;
  height: 30px;
  flex: 0 0 auto;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: #d9e1f0;
  border-radius: 999px;
  transition: background .2s ease;
}
.slider::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: transform .2s ease;
}
.switch input:checked + .slider {
  background: var(--c-blue);
}
.switch input:checked + .slider::before {
  transform: translateX(24px);
}
.support-panel { max-width: 620px; margin-inline: auto; }
.support-link { text-decoration: none; }

/* Formulario bloqueado visualmente */
.form-locked {
  opacity: .35;
  pointer-events: none;
  user-select: none;
  filter: blur(1.5px);
}

/* ── Accesibilidad: foco visible ── */
:focus-visible {
  outline: 2.5px solid var(--c-gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ══════════════════════════════════
   TEMPORIZADOR
══════════════════════════════════ */
.timer-box {
  border: 2px solid rgba(255,255,255,.3);
  min-width: 90px;
  transition: background var(--transition), border-color var(--transition);
}
.timer-icon { font-size: 1rem; display: block; }
.timer-box .stat-num { font-size: 1.4rem; font-family: 'Courier New', monospace; letter-spacing: .05em; }

/* Aviso: quedan 5 minutos */
.timer-box.warn {
  background: rgba(200, 151, 43, .35);
  border-color: var(--c-gold);
  animation: pulse-warn 1s ease-in-out infinite;
}
/* Alerta: quedan 2 minutos */
.timer-box.danger {
  background: rgba(192, 57, 43, .4);
  border-color: #ff6b5b;
  animation: pulse-danger .6s ease-in-out infinite;
}
@keyframes pulse-warn {
  0%,100% { box-shadow: 0 0 0 0 rgba(200,151,43,.4); }
  50%      { box-shadow: 0 0 0 8px rgba(200,151,43,0); }
}
@keyframes pulse-danger {
  0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,.5); }
  50%      { box-shadow: 0 0 0 10px rgba(192,57,43,0); }
}

/* ══════════════════════════════════
   OVERLAY TIEMPO AGOTADO
══════════════════════════════════ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 20, 50, .75);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn .3s ease;
}
.overlay.hidden { display: none; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.overlay-card {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: slideUp .35s cubic-bezier(.4,0,.2,1);
}
@keyframes slideUp {
  from { transform: translateY(30px); opacity:0; }
  to   { transform: translateY(0);    opacity:1; }
}
.overlay-icon { font-size: 3.5rem; margin-bottom: .8rem; }
.overlay-card h2 {
  font-family: var(--font-display);
  color: var(--c-navy);
  font-size: 1.6rem;
  margin-bottom: .7rem;
}
.overlay-card p {
  color: var(--c-muted);
  font-size: .95rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.photo-full-card {
  max-width: min(92vw, 560px);
}
.photo-full-card img {
  width: min(78vw, 420px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}

@media (max-width: 900px) {
  .welcome-grid,
  .profile-card,
  .profile-form-grid,
  .profile-form-grid.three,
  .bank-progress-grid,
  .bank-grid {
    grid-template-columns: 1fr;
  }
  .profile-card {
    text-align: center;
  }
  .profile-chips {
    justify-content: center;
  }
  .student-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  body {
    width: 100%;
  }
  .auth-shell {
    align-items: start;
    padding: .75rem;
    overflow-y: auto;
  }
  .auth-shell .auth-gate,
  .start-screen {
    width: 100%;
    max-width: calc(100vw - 1.5rem);
    border-radius: 18px;
  }
  .profile-form-grid,
  .profile-form-grid.three,
  .admin-login,
  .bank-grid,
  .auth-tabs {
    min-width: 0;
  }
  .profile-form-grid,
  .profile-form-grid.three {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-input,
  textarea.admin-input,
  select.admin-input {
    width: 100%;
    min-width: 0;
    font-size: 16px;
  }
  .q-formula,
  mjx-container {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .math-showcase,
  .formula-card,
  .mini-dashboard {
    max-width: 100%;
  }
  .class-toolbar,
  .student-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .class-toolbar .btn,
  .student-row .btn,
  .student-row select {
    width: 100%;
  }
}