/* ═══════════════════════════════════════════════════════════════════
   LOS TOKENS DE PLAYICFES.

   Se conservan los NOMBRES viejos (--purple, --ink, --muted…) a
   propósito: todas las páginas y todos los estilos en línea ya apuntan
   a ellos, así que redefinir aquí los valores adapta la aplicación
   entera sin tocar un solo archivo más. El nombre --purple quedó como
   una cicatriz honesta de la versión anterior; hoy vale verde.

   Es la misma paleta diurna de juego.css y panel.css: un estudiante que
   pasa de la portada al panel y de ahí al juego no debe sentir que
   cambió de aplicación.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --purple: #0a9e52;        /* neón día — acción principal */
  --purple-dark: #077a3f;
  --pink: #d92d43;          /* coral */
  --teal: #1c6fd0;          /* cielo */
  --yellow: #b8860b;        /* sol */
  --green: #0a9e52;
  --red: #d92d43;
  --ink: #0c1222;           /* tinta */
  --muted: #5b6884;         /* bruma */
  --bg: #f4f7fd;
  --card: #ffffff;
  --linea: rgba(12, 18, 34, .13);
  --radius: 16px;
  --shadow: 0 6px 20px rgba(12, 18, 34, .07);

  /* Las cuatro voces de la identidad. */
  --tipo-titulo: 'Space Grotesk', system-ui, sans-serif;
  --tipo-cuerpo: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --tipo-mano: 'Caveat', cursive;
  --tipo-cifra: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--tipo-cuerpo);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
}

/* Space Grotesk en los titulares: es la voz de la marca desde la portada. */
h1, h2, h3, .brand-name {
  font-family: var(--tipo-titulo);
  font-weight: 700;
  letter-spacing: -.015em;
}
h1, h2 { text-wrap: balance; }

a { color: inherit; text-decoration: none; }

/* ── Top bar ─────────────────────────────────────────── */
.topbar {
  background: #fff;
  box-shadow: 0 2px 10px rgba(45, 42, 74, 0.06);
  position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 24px;
}
.topbar-brand-row { display: flex; align-items: center; gap: 16px; }
.brand-group { display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; color: var(--purple-dark); white-space: nowrap; }
.brand-badge { font-size: 1.5rem; display: flex; align-items: center; }
/* El logo de ACIE ES la puerta de vuelta a somosacie.com (antes había un
   botón «Inicio ACIE» aparte, que solo robaba sitio en la barra). */
.brand-parent-logo { display: inline-flex; align-items: center; opacity: .9; transition: opacity .15s; }
.brand-parent-logo:hover { opacity: 1; }
.brand-parent-logo img { height: 28px; width: auto; display: block; }
.main-nav { display: flex; gap: 12px; flex: 1; align-items: center; }
.main-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--muted); padding: 8px 12px; border-radius: 10px; transition: .15s; white-space: nowrap;
}
.main-nav a:hover { background: #F1EEFF; color: var(--purple-dark); }
.nav-user { display: flex; align-items: center; gap: 12px; }
.nav-user-name { font-weight: 700; color: var(--ink); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.nav-user-mobile { display: none; }

@media (max-width: 768px) {
  .topbar-inner {
    flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 14px;
  }
  .topbar-brand-row {
    justify-content: space-between; width: 100%;
  }
  .brand { font-size: 1.15rem; }
  .brand-parent-logo img { height: 22px; }
  .nav-user-desktop { display: none; }
  .nav-user-mobile { display: flex; align-items: center; gap: 8px; }
  .main-nav {
    display: flex; gap: 8px; width: 100%; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0 4px;
  }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a {
    font-size: 0.86rem; padding: 6px 12px; background: #F5F3FF; border-radius: 999px; color: var(--purple-dark);
  }
}

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 20px; border-radius: 14px;
  font-weight: 800; font-family: 'Baloo 2', sans-serif; letter-spacing: .2px;
  border: none; cursor: pointer; transition: transform .1s, box-shadow .15s, background .15s;
  text-align: center; line-height: 1.35; font-size: 0.98rem; box-sizing: border-box;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--purple); color: #fff; box-shadow: 0 5px 0 var(--purple-dark); }
.btn-primary:hover { background: #7B6BF0; }
.btn-primary:active { box-shadow: 0 2px 0 var(--purple-dark); transform: translateY(3px) scale(0.98); }
.btn-secondary { background: var(--teal); color: #05403c; box-shadow: 0 5px 0 #2ba39a; }
.btn-ghost { background: #F1EEFF; color: var(--purple-dark); box-shadow: none; }
.btn-danger { background: var(--red); color: #fff; box-shadow: 0 5px 0 #c23f3f; }
.btn-sm { padding: 8px 16px; font-size: .88rem; box-shadow: none !important; }
.btn-block { display: flex; width: 100%; text-align: center; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Layout helpers ──────────────────────────────────── */
.page-content { max-width: 1180px; margin: 0 auto; padding: 28px 20px 60px; }
.container-narrow { max-width: 620px; margin: 0 auto; padding: 28px 20px 60px; }
.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px;
}
.grid { display: grid; gap: 20px; }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .grid-5 { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: 1fr; } }

.site-footer { text-align: center; color: var(--muted); padding: 20px; font-size: .9rem; }
.footer-logo { height: 40px; width: auto; display: block; margin: 0 auto 8px; opacity: .85; }

/* ── Hero (landing) ──────────────────────────────────── */
.hero { text-align: center; padding: 40px 20px 10px; }
.hero h1 { font-size: 2.6rem; margin-bottom: 8px; color: var(--purple-dark); }
.hero p { font-size: 1.15rem; color: var(--muted); max-width: 560px; margin: 0 auto 26px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Area cards / score bars ─────────────────────────── */
.area-card {
  background: var(--card); border-radius: 16px; padding: 18px; box-shadow: var(--shadow);
  border-top: 6px solid var(--area-color, var(--purple));
}
.area-card .area-icon { font-size: 1.8rem; }
.area-card .area-name { font-weight: 800; margin: 6px 0 10px; font-family: 'Baloo 2', sans-serif; }
.area-card .area-points { font-size: 1.6rem; font-weight: 800; color: var(--area-color, var(--purple)); }
.progress-bar { background: #ECE9FE; border-radius: 999px; height: 12px; overflow: hidden; margin-top: 8px; }
.progress-bar-fill { height: 100%; border-radius: 999px; background: var(--area-color, var(--purple)); transition: width .4s; }

.total-score-banner {
  background: linear-gradient(120deg, var(--purple), #8A7CFF);
  color: #fff; border-radius: var(--radius); padding: 28px; text-align: center;
  box-shadow: var(--shadow); margin-bottom: 24px;
}
.total-score-banner .score { font-size: 3.2rem; font-family: 'Baloo 2', sans-serif; }
.total-score-banner .label { opacity: .85; font-weight: 700; }

/* ── Category tabs + level map ───────────────────────── */
.category-tabs { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.category-tab {
  padding: 12px 20px; border-radius: 16px; font-weight: 800; font-family: 'Baloo 2', sans-serif;
  background: #fff; box-shadow: var(--shadow); cursor: pointer; border: 3px solid transparent;
}
.category-tab.active { border-color: var(--purple); color: var(--purple-dark); }
.category-tab.locked { opacity: .5; }

.level-map { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; padding: 10px; }
@media (max-width: 700px) { .level-map { grid-template-columns: repeat(3, 1fr); } }
.level-node {
  aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.4rem; color: #fff;
  background: linear-gradient(145deg, var(--purple), var(--purple-dark)); box-shadow: 0 6px 0 rgba(0,0,0,.15);
  position: relative; cursor: pointer; border: none; transition: transform .1s;
}
.level-node:hover { transform: translateY(-3px); }
.level-node.locked { background: #D8D4EF; color: #a9a3d1; cursor: not-allowed; box-shadow: none; }
.level-node.locked:hover { transform: none; }
.level-node .stars { position: absolute; bottom: -10px; font-size: .9rem; letter-spacing: 1px; }

/* ── Quiz / play screen ──────────────────────────────── */
.quiz-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.quiz-progress { flex: 1; margin: 0 18px; }
.quiz-score-pill { background: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 800; box-shadow: var(--shadow); }
.approval-pill {
  text-align: center; padding: 10px 16px; border-radius: 12px; font-weight: 800;
  margin-bottom: 14px; font-family: 'Baloo 2', sans-serif;
}
.approval-pill.passing { background: #EAFBF1; color: #1c8a4f; }
.approval-pill.failing { background: #FFF3D6; color: #b3790a; }
.break-btn-row { text-align: center; margin-top: 10px; }
.break-btn-row label { font-weight: 700; color: var(--muted); cursor: pointer; }
.quiz-timer-pill { background: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 800; box-shadow: var(--shadow); transition: color .2s, background .2s; }
.quiz-timer-pill.warn { background: #FFF3D6; color: #b3790a; }
.quiz-timer-pill.danger { background: #FFEDED; color: #c23f3f; animation: pulse-danger 1s infinite; }
@keyframes pulse-danger { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ── Anti-copia y anti-captura (disuasivos, no son 100% infalibles) ── */
.anti-copy, .anti-copy * {
  user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
}
.question-card { position: relative; overflow: hidden; }
.watermark-layer {
  position: absolute; inset: -20% -10%; pointer-events: none; z-index: 3;
  display: flex; flex-wrap: wrap; align-content: space-between; justify-content: space-between;
  transform: rotate(-20deg); opacity: .07; user-select: none;
}
.watermark-layer span {
  display: inline-block; width: 45%; font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: .8rem; color: #2d2a4a; margin: 18px 0; white-space: nowrap;
}
.question-card > *:not(.watermark-layer) { position: relative; z-index: 4; }

.screen-lock-overlay {
  position: fixed; inset: 0; background: #000; color: #fff; z-index: 99999;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 40px; font-family: 'Baloo 2', sans-serif; font-size: 1.4rem; line-height: 1.6;
}
.area-chip {
  display: inline-block; padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: .85rem;
  background: var(--chip-color, var(--purple)); color: #fff; margin-bottom: 14px;
}
.question-card { padding: 28px; }
.question-passage { background: #F8F7FF; border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; font-size: .96rem; color: #4b477a; max-height: 260px; overflow-y: auto; }
.question-statement { font-size: 1.2rem; font-weight: 700; margin-bottom: 20px; line-height: 1.5; }
.q-table { border-collapse: collapse; margin: 10px 0; width: 100%; font-size: .92rem; }
.q-table th, .q-table td { border: 1px solid #DCD8F7; padding: 6px 10px; text-align: center; }
.q-table th { background: #EFEBFF; }

.options-list { display: flex; flex-direction: column; gap: 12px; }
.option-btn {
  text-align: left; padding: 14px 18px; border-radius: 14px; border: 2px solid #E4E0FB;
  background: #fff; font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 600;
  cursor: pointer; display: flex; gap: 12px; align-items: flex-start; transition: .12s;
}
.option-btn:hover:not(:disabled) { border-color: var(--purple); background: #FAF9FF; }
.option-label {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: #F1EEFF; color: var(--purple-dark);
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.option-btn:disabled { cursor: default; }
.option-btn.correct { border-color: var(--green); background: #EAFBF1; }
.option-btn.correct .option-label { background: var(--green); color: #fff; }
.option-btn.incorrect { border-color: var(--red); background: #FFEDED; }
.option-btn.incorrect .option-label { background: var(--red); color: #fff; }

.feedback-banner { margin-top: 20px; border-radius: 16px; padding: 18px 20px; animation: pop .25s ease; }
.feedback-banner.correct { background: #EAFBF1; border: 2px solid var(--green); }
.feedback-banner.incorrect { background: #FFEDED; border: 2px solid var(--red); }
.feedback-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.15rem; margin-bottom: 6px; }
.feedback-title.correct { color: #1c8a4f; }
.feedback-title.incorrect { color: #c23f3f; }
.feedback-points { font-weight: 800; }
.explanation-box { margin-top: 10px; font-size: .96rem; color: #4b477a; line-height: 1.5; }

@keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── Mapa de preguntas del nivel (elección libre) ────────────── */
.qmap-intro { text-align: center; color: var(--muted); margin-bottom: 18px; }
.qmap-area-card {
  border-radius: 16px; padding: 18px; margin-bottom: 16px;
  border-left: 6px solid var(--area-color, var(--purple)); background: #FAF9FF;
}
.qmap-area-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; margin-bottom: 12px; color: var(--area-color, var(--purple)); }
.qmap-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.qmap-node {
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center; position: relative;
  background: #fff; color: var(--area-color, var(--purple)); border: 3px solid var(--area-color, var(--purple));
  box-shadow: 0 4px 0 rgba(0,0,0,.08); transition: transform .1s;
}
.qmap-node:hover { transform: translateY(-2px); }
.qmap-node.correct { background: var(--green); border-color: var(--green); color: #fff; }
.qmap-node.incorrect { background: var(--red); border-color: var(--red); color: #fff; }
.back-to-map-row { text-align: center; margin-bottom: 14px; }
.review-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; font-weight: 800; margin-bottom: 14px; }
.review-badge.correct { background: #EAFBF1; color: #1c8a4f; }
.review-badge.incorrect { background: #FFEDED; color: #c23f3f; }

.level-summary { text-align: center; padding: 40px 24px; }
.level-summary .big-score { font-size: 3rem; font-family: 'Baloo 2', sans-serif; color: var(--purple-dark); }
.level-summary .stars-row { font-size: 2.6rem; margin: 14px 0; letter-spacing: 6px; }

/* ── Historial de preguntas ───────────────────────────── */
.history-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px; }
.history-item { border-left: 6px solid var(--muted); }
.history-item.is-correct { border-left-color: var(--green); }
.history-item.is-incorrect { border-left-color: var(--red); }
.history-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.history-passage { background: #FAF9FF; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; font-size: .92rem; color: var(--muted); max-height: 140px; overflow-y: auto; }
.history-statement { font-weight: 700; margin-bottom: 10px; }
.history-answers { font-size: .95rem; line-height: 1.7; margin-bottom: 10px; }
.history-explanation { font-size: .92rem; background: #F1EEFF; border-radius: 12px; padding: 12px 14px; }
.pagination { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; }
.pagination a.active { background: var(--purple); color: #fff; }

/* ── Nota de asesoría personalizada ───────────────────── */
.advisory-note { border: 2px dashed #C9BFFA; background: linear-gradient(160deg, #FAF9FF, #F1EEFF); }
.advisory-note p { line-height: 1.7; }

/* ── Ranking ──────────────────────────────────────────── */
.ranking-filters { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.ranking-filters select {
  padding: 10px 14px; border-radius: 12px; border: 2px solid #E4E0FB; font-family: 'Nunito', sans-serif; font-weight: 700; background: #fff;
}
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 16px; margin-bottom: 28px; }
.podium-place { text-align: center; }
.podium-avatar {
  width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1.4rem; margin: 0 auto 8px;
}
.podium-block { border-radius: 12px 12px 0 0; padding: 14px 20px; color: #fff; font-weight: 800; }
.podium-1 .podium-block { background: linear-gradient(160deg,#FFD93D,#FFB238); height: 110px; }
.podium-2 .podium-block { background: linear-gradient(160deg,#C9CEDB,#9AA1B5); height: 80px; }
.podium-3 .podium-block { background: linear-gradient(160deg,#E8A87C,#C97B4A); height: 60px; }
.podium-name { font-weight: 800; margin-top: 6px; }

.ranking-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.ranking-table th, .ranking-table td { padding: 12px 16px; text-align: left; }
.ranking-table thead { background: #F1EEFF; }
.ranking-table tbody tr:nth-child(even) { background: #FAF9FF; }
.rank-badge { font-weight: 800; color: var(--muted); }
.rank-badge.top3 { color: var(--yellow); }
.tabs-row { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.tabs-row a { padding: 10px 18px; border-radius: 12px; font-weight: 700; background: #fff; box-shadow: var(--shadow); }
.tabs-row a.active { background: var(--purple); color: #fff; }

/* ── Forms / admin ───────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 700; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 2px solid #E4E0FB;
  font-family: 'Nunito', sans-serif; font-size: 1rem;
}
.form-group textarea { min-height: 100px; resize: vertical; }
.form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 200px; }
.alert { padding: 14px 18px; border-radius: 12px; margin-bottom: 18px; font-weight: 700; }
.alert-error { background: #FFEDED; color: #c23f3f; }
.alert-success { background: #EAFBF1; color: #1c8a4f; }

.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); margin-top: 16px; }
.admin-table th, .admin-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #EEE; }
.admin-table thead { background: #F1EEFF; }
.admin-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; background: #F1EEFF; color: var(--purple-dark); }
.option-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.option-row input[type="text"] { flex: 1; }
.stat-card { background: #fff; border-radius: 16px; padding: 20px; box-shadow: var(--shadow); text-align: center; }
.stat-card .stat-value { font-size: 2rem; font-family: 'Baloo 2', sans-serif; color: var(--purple-dark); }

.login-card { max-width: 420px; margin: 60px auto; }
.login-card h1 { text-align: center; margin-bottom: 4px; }
.login-card p.subtitle { text-align: center; color: var(--muted); margin-bottom: 24px; }

/* ── Responsive Mobile & Tablet Enhancements ───────────── */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.table-responsive .ranking-table,
.table-responsive .admin-table,
.table-responsive .q-table {
  box-shadow: none;
  min-width: 580px;
}

.category-tabs, .tabs-row {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  max-width: 100%;
}
.category-tab, .tabs-row a {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .topbar-inner {
    padding: 10px 14px;
    gap: 10px;
  }
  .brand {
    font-size: 1.15rem;
  }
  .brand-parent-logo img {
    height: 26px;
  }
  .main-nav {
    gap: 6px;
    font-size: 0.9rem;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .nav-user {
    width: 100%;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid #f0edf9;
  }
  .page-content {
    padding: 18px 12px 40px;
  }
  .container-narrow {
    padding: 16px 10px 40px;
  }
  .card {
    padding: 18px 14px;
    border-radius: 14px;
  }
  .question-card {
    padding: 18px 14px;
  }
  .hero h1 {
    font-size: 1.9rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .total-score-banner {
    padding: 20px 14px;
  }
  .total-score-banner .score {
    font-size: 2.4rem;
  }

  .quiz-topbar {
    gap: 8px;
  }
  .quiz-progress {
    width: 100%;
    margin: 4px 0;
    order: 3;
  }

  .podium {
    gap: 8px;
  }
  .podium-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }
  .podium-1 .podium-block { height: 80px; padding: 10px 8px; }
  .podium-2 .podium-block { height: 60px; padding: 10px 8px; }
  .podium-3 .podium-block { height: 45px; padding: 10px 8px; }
  .podium-name { font-size: 0.85rem; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ranking-filters select {
    flex: 1 1 100%;
  }
}

@media (max-width: 480px) {
  .btn {
    padding: 12px 18px;
    font-size: 0.95rem;
    min-height: 44px;
  }
  .btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
    min-height: 36px;
  }
  .form-row .form-group {
    min-width: 100%;
  }
  .ranking-filters select {
    width: 100%;
  }
  .level-map {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 4px;
  }
  .level-node {
    font-size: 1.2rem;
  }
  .option-btn {
    padding: 12px 14px;
    font-size: 0.95rem;
  }
  .option-label {
    width: 26px;
    height: 26px;
    font-size: 0.85rem;
  }
  .question-statement {
    font-size: 1.05rem;
  }
  .login-card {
    margin: 20px auto;
  }
  .admin-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}



/* ═══════════════════════════════════════════════════════════════════
   AJUSTE A LA LÍNEA DE PLAYICFES

   El diseño viejo se apoyaba en sombras moradas difusas. La identidad
   nueva se apoya en bordes definidos y superficies planas: se lee mejor
   en pantallas baratas y en la calle, que es donde se juega de verdad.
   ═══════════════════════════════════════════════════════════════════ */

.card,
.area-card,
.total-score-banner {
  border: 2px solid var(--linea);
  box-shadow: none;
}

/* Toda cifra va en la mono de la identidad y con dígitos de ancho fijo,
   para que los números no bailen al actualizarse. */
.big-score,
.area-points,
.total-score-banner .score,
.rank-points,
.stat-value,
.level-node {
  font-family: var(--tipo-cifra);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* Botones: pastilla, sin sombra de color, con el mismo empuje del juego. */
.btn {
  border-radius: 999px;
  font-family: var(--tipo-cuerpo);
  font-weight: 800;
  box-shadow: none;
  transition: transform .2s ease, filter .2s ease, background-color .2s ease;
}
.btn:hover { transform: translate3d(0, -2px, 0); filter: brightness(1.06); }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.btn-primary { background: var(--purple); color: #fff; }
.btn-ghost { background: var(--card); color: var(--ink); border: 2px solid var(--linea); }

/* La barra superior: línea limpia en vez de sombra. */
.topbar {
  box-shadow: none;
  border-bottom: 2px solid var(--linea);
}
.main-nav a:hover { background: rgba(10, 158, 82, .09); color: var(--purple-dark); }

/* Pestañas de categoría y nodos de nivel, alineados al juego. */
.category-tab {
  border-radius: 999px;
  border: 2px solid var(--linea);
  font-weight: 800;
}
.category-tab.active { background: var(--purple); border-color: var(--purple); color: #fff; }
.level-node { border: 2px solid var(--linea); }

/* La nota manuscrita de la identidad, disponible en cualquier página. */
.pi-mano {
  font-family: var(--tipo-mano);
  font-size: 1.25rem;
  color: var(--yellow);
  transform: rotate(-1.5deg);
  display: inline-block;
}

/* La ficha de nivel de desempeño ICFES: misma pieza en todas las pantallas. */
.pi-chip {
  display: inline-block;
  font-size: .7rem; font-weight: 900;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   LA NOCHE GLOBAL — la base oscura para TODA la aplicación.

   Vivía solo en mundos.css, así que las páginas que no lo cargaban
   (hub, simulacro, práctica) se quedaban blancas con el tema nocturno
   activado. Aquí, en la hoja que carga todo el mundo, la noche llega
   a cualquier página presente o futura sin que nadie lo recuerde.
   ═══════════════════════════════════════════════════════════════════ */
/* Los TOKENS también se invierten: cualquier componente que use
   var(--card)/var(--bg)/var(--ink)/var(--muted) queda nocturno solo.
   Las páginas de admin nunca reciben la clase (no incluyen el switch),
   así que el panel administrativo sigue diurno. */
body.tema-noche {
  background: #070e24; color: #e8eeff;
  --card: #111d40; --bg: #0b1430;
  --ink: #e8eeff; --muted: #8fa0c5;
  --linea: rgba(232, 238, 255, .14);
  --shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
body.tema-noche .topbar { background: #0b1430; border-color: rgba(232, 238, 255, .14); }
body.tema-noche .main-nav a { color: #8fa0c5; }
body.tema-noche .main-nav a:hover { background: rgba(31, 227, 116, .1); color: #1fe374; }
body.tema-noche .brand-name, body.tema-noche .nav-user-name { color: #e8eeff; }
body.tema-noche .site-footer { color: #8fa0c5; }
body.tema-noche .btn-ghost { background: #111d40; color: #e8eeff; border-color: rgba(232, 238, 255, .14); }