/* =====================================================================
   PULSE · Sistema de diseño

   Dark mode cálido con paleta setentera de cuatro tonos: mostaza,
   terracota, oliva y turquesa.

   Principio rector: la interfaz es neutra. El color no pinta fondos ni
   tarjetas enteras — vive en piezas chicas y deliberadas (la letra de
   cada opción, un punto de estado, la barra de un módulo). Así, en una
   pregunta de cuatro opciones, cada una se reconoce de un vistazo sin
   que la pantalla se convierta en un arcoíris.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@200;300;400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

/* ------------------------------------------------------------- tokens */
:root {
  /* Fondos cálidos, del más profundo al más elevado */
  --bg-0: #0D0B0A;
  --bg-1: #141110;
  --bg-2: #1A1716;

  --surface-1: rgba(240, 228, 208, 0.030);
  --surface-2: rgba(240, 228, 208, 0.052);
  --surface-3: rgba(240, 228, 208, 0.082);

  --line: rgba(236, 223, 200, 0.085);
  --line-strong: rgba(236, 223, 200, 0.16);

  --text: #F3ECE2;
  --text-soft: #ADA294;
  --text-dim: #7B7266;

  /* ---- Los cuatro tonos ---- */
  --mostaza:   #E9A83C;
  --terracota: #E07A45;
  --oliva:     #9CAF44;
  --turquesa:  #3E9C9C;

  /* Tonos de apoyo, solo para preguntas de 5 o 6 opciones */
  --ciruela:   #B0779C;
  --arena:     #C2A883;

  /* Color de acento de la interfaz: mostaza, el más luminoso */
  --accent: var(--mostaza);
  --accent-ink: #1C1405;

  /* Estados */
  --ok: var(--oliva);
  --warn: var(--mostaza);
  --bad: #C0453F;
  --idle: #6B6459;

  /* Opciones de respuesta, en orden */
  --opt-1: var(--mostaza);
  --opt-2: var(--terracota);
  --opt-3: var(--oliva);
  --opt-4: var(--turquesa);
  --opt-5: var(--ciruela);
  --opt-6: var(--arena);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow: 0 14px 34px -20px rgba(0, 0, 0, .9);
  --shadow-lg: 0 32px 64px -32px rgba(0, 0, 0, .95);

  --ease: cubic-bezier(.22, .68, .32, 1);
  --fast: 130ms var(--ease);
  --mid: 220ms var(--ease);

  --font: 'Readex Pro', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --header-h: 62px;
}

/* --------------------------------------------------------------- base */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Un único halo cálido, muy tenue: da profundidad sin teñir la interfaz */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 620px at 18% -12%, rgba(233, 168, 60, .055), transparent 64%),
    radial-gradient(820px 520px at 88% 2%, rgba(62, 156, 156, .045), transparent 62%);
}

body > * { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.2;
}
h1 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 600; letter-spacing: -.038em; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(233, 168, 60, .3); color: #fff; }

:focus-visible {
  outline: 2px solid var(--mostaza);
  outline-offset: 2px;
  border-radius: 5px;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(236, 223, 200, .1);
  border-radius: 20px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(236, 223, 200, .2); background-clip: padding-box; }

/* --------------------------------------------------------- utilidades */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-soft); }
.dim { color: var(--text-dim); }
.tiny { font-size: 12px; }
.small { font-size: 13px; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }
.grow { flex: 1; }
.wrap { flex-wrap: wrap; }
.uppercase { text-transform: uppercase; letter-spacing: .08em; }

.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.between { justify-content: space-between; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }

.label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.shell {
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: 0 22px;
}
.shell-wide { width: min(1560px, 100%); }
.shell-narrow { width: min(520px, 100%); }

.section { padding: 26px 0; }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }

/* -------------------------------------------------------------- cards */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  position: relative;
}

.card-lg { padding: 24px; border-radius: var(--radius-lg); }
.card-flat { background: var(--surface-1); }
.card-pad-0 { padding: 0; overflow: hidden; }

.card-interactive {
  cursor: pointer;
  transition: transform var(--fast), border-color var(--fast), background var(--fast);
}
.card-interactive:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: var(--bg-2);
}
.card-interactive:active { transform: translateY(0); }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* ------------------------------------------------------------ botones */
.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-line: var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 9px;
  border: 1px solid var(--btn-line);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.012em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--fast), background var(--fast), border-color var(--fast), opacity var(--fast);
}
.btn:hover:not(:disabled) { background: var(--surface-3); }
.btn:active:not(:disabled) { transform: scale(.985); }
.btn:disabled { opacity: .38; cursor: not-allowed; }

/* El botón principal es el único bloque de color macizo de la interfaz */
.btn-primary {
  --btn-line: transparent;
  background: var(--mostaza);
  color: var(--accent-ink);
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { background: #F2B54D; }

.btn-live {
  --btn-line: transparent;
  background: var(--terracota);
  color: #1C1004;
  font-weight: 600;
}
.btn-live:hover:not(:disabled) { background: #EC8A54; }

.btn-ghost { background: transparent; --btn-line: var(--line); color: var(--text-soft); }
.btn-ghost:hover:not(:disabled) { color: var(--text); background: var(--surface-2); }

.btn-danger { color: #EBA79E; --btn-line: rgba(192, 69, 63, .32); background: rgba(192, 69, 63, .1); }
.btn-danger:hover:not(:disabled) { background: rgba(192, 69, 63, .18); }

.btn-lg { padding: 14px 26px; font-size: 15px; border-radius: 11px; }
.btn-sm { padding: 6px 11px; font-size: 13px; border-radius: 7px; }
.btn-icon { padding: 8px; width: 32px; height: 32px; border-radius: 8px; }
.btn-block { width: 100%; }

.btn-group { display: inline-flex; gap: 5px; }

/* Botón de Google: neutro, reconocible por su ícono */
.btn-google {
  --btn-line: var(--line-strong);
  background: var(--surface-1);
  color: var(--text);
  font-weight: 500;
}
.btn-google:hover:not(:disabled) { background: var(--surface-2); }
.btn-google svg { width: 17px; height: 17px; flex: none; }

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-dim);
  font-size: 12px;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* --------------------------------------------------------- formularios */
.field { display: flex; flex-direction: column; gap: 6px; }

.field > label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
}

.input, .select, .textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: rgba(0, 0, 0, .26);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.input::placeholder, .textarea::placeholder { color: var(--text-dim); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: rgba(233, 168, 60, .6);
  box-shadow: 0 0 0 3px rgba(233, 168, 60, .12);
}
.textarea { resize: vertical; min-height: 86px; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.5L6 8.5L10 4.5' stroke='%23ADA294' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
.select option { background: #1A1716; color: var(--text); }

/* Selector que se adapta al contenido en escritorio y ocupa el ancho
   completo en móvil, donde un ancho fijo desbordaría la pantalla. */
.select-auto { width: auto; min-width: 200px; max-width: 100%; }

/* Los steppers nativos son ruido visual y desalinean el campo: se quitan
   en los tres motores y el número se escribe a mano. */
.input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.input[type=number]::-webkit-outer-spin-button,
.input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* El icono nativo del calendario es negro y sobre fondo oscuro desaparece.
   Se reemplaza por uno propio, del mismo trazo que el resto del set. */
.input[type=date] { position: relative; }
.input[type=date]::-webkit-calendar-picker-indicator {
  width: 17px;
  height: 17px;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
  opacity: .75;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ADA294' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M16 3v4M8 3v4M3 10h18'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity var(--fast);
}
.input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Firefox no expone el indicador: al menos que el texto no quede apagado. */
.input[type=date]::-moz-calendar-picker-indicator { filter: invert(70%); }

.input-code {
  font-family: var(--mono);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .32em;
  text-align: center;
  text-transform: uppercase;
  padding: 15px 12px 15px 22px;
}

.checkline {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
}
.checkline input[type=checkbox], .checkline input[type=radio] {
  width: 16px; height: 16px;
  accent-color: var(--mostaza);
  cursor: pointer;
}

/* --------------------------------------------------------------- chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
  white-space: nowrap;
}
/* Los chips de estado tiñen solo el texto y el borde, nunca un bloque */
.chip-ok     { color: #C4D67A; border-color: rgba(156, 175, 68, .3); }
.chip-warn   { color: #F0C173; border-color: rgba(233, 168, 60, .3); }
.chip-bad    { color: #E5A79F; border-color: rgba(192, 69, 63, .32); }
.chip-info   { color: #85C7C7; border-color: rgba(62, 156, 156, .3); }
.chip-accent { color: #F0C173; border-color: rgba(233, 168, 60, .3); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.dot-pulse { animation: dotPulse 1.9s var(--ease) infinite; }
@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(224, 122, 69, .38);
  color: var(--terracota);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------- header */
.appbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(13, 11, 10, .85);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.appbar .shell { display: flex; align-items: center; gap: 16px; width: min(1560px, 100%); }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.04em; font-size: 18px; }
.brand-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--mostaza);
  flex: none;
}
.brand-mark svg { width: 17px; height: 17px; }

.navlinks { display: flex; gap: 2px; margin-left: 4px; }
.navlink {
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
  transition: color var(--fast), background var(--fast);
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}
.navlink:hover { color: var(--text-soft); background: var(--surface-1); }
.navlink.active { color: var(--text); background: var(--surface-2); }

.avatar {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
  background: var(--surface-3);
  border: 1px solid var(--line);
  flex: none;
}
.avatar-lg { width: 46px; height: 46px; border-radius: 13px; font-size: 16px; }
.avatar-sm { width: 26px; height: 26px; border-radius: 7px; font-size: 11px; }

/* --------------------------------------------------------- stat tiles */
.stat {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.stat-value {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.stat-label { font-size: 11px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; color: var(--text-dim); }
.stat-hint { font-size: 12px; color: var(--text-soft); }

/* El color en las métricas es un acento puntual, no un fondo */
.stat-ok .stat-value     { color: var(--oliva); }
.stat-warn .stat-value   { color: var(--mostaza); }
.stat-bad .stat-value    { color: var(--bad); }
.stat-accent .stat-value { color: var(--mostaza); }

.display {
  font-size: clamp(52px, 12vw, 118px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- tablas */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(236, 223, 200, .045);
  vertical-align: middle;
}
.table tbody tr { transition: background var(--fast); }
.table tbody tr:hover { background: var(--surface-1); }
.table tbody tr:last-child td { border-bottom: none; }
.table-scroll { overflow-x: auto; }

/* ------------------------------------------------------------ ranking */
.rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background var(--fast), border-color var(--fast);
}
.rank-row:hover { background: var(--surface-1); }
.rank-row.is-me {
  background: rgba(233, 168, 60, .07);
  border-color: rgba(233, 168, 60, .28);
}

.rank-pos {
  width: 32px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  flex: none;
}
.rank-1 .rank-pos { color: var(--mostaza); }
.rank-2 .rank-pos { color: var(--text-soft); }
.rank-3 .rank-pos { color: var(--terracota); }

.rank-name { font-weight: 500; min-width: 0; }
.rank-score {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
}

/* Podio */
.podium { display: grid; grid-template-columns: 1fr 1.14fr 1fr; gap: 10px; align-items: end; }
.podium-step {
  border-radius: 14px 14px 10px 10px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  padding: 16px 12px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  animation: riseUp .55s var(--ease) backwards;
}
.podium-step[data-place="1"] {
  border-color: rgba(233, 168, 60, .4);
  padding-top: 24px;
  padding-bottom: 28px;
  animation-delay: .3s;
}
.podium-step[data-place="2"] { animation-delay: .15s; }
.podium-step[data-place="3"] { animation-delay: 0s; }
.podium-medal { font-size: 24px; line-height: 1; }
@keyframes riseUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* -------------------------------------------------------- progreso/barras */
.bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(236, 223, 200, .07);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--mostaza);
  transition: width 420ms var(--ease);
}
.bar-ok > i  { background: var(--oliva); }
.bar-bad > i { background: var(--bad); }

/* Anillo de cuenta regresiva */
.ring { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-linecap: round; }
.ring .ring-track { stroke: rgba(236, 223, 200, .08); }
.ring .ring-value { stroke: var(--turquesa); transition: stroke-dashoffset 200ms linear, stroke 300ms var(--ease); }
.ring.is-warning .ring-value { stroke: var(--mostaza); }
.ring.is-critical .ring-value { stroke: var(--bad); }

.timer-wrap { position: relative; display: grid; place-items: center; }
.timer-wrap .timer-num {
  position: absolute;
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
}
.timer-wrap.is-critical .timer-num { color: var(--bad); animation: tick 1s var(--ease) infinite; }
@keyframes tick {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.09); }
}

/* --------------------------------------------------- opciones de respuesta
   La tarjeta es neutra. El único elemento coloreado es la pastilla con la
   letra: eso alcanza para distinguir A/B/C/D de un vistazo sin saturar. */
.answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.answer {
  --c: var(--opt-1);
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  min-height: 84px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  color: var(--text);
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
  transition: transform var(--fast), border-color var(--fast), background var(--fast), opacity var(--mid), filter var(--mid);
  animation: answerIn .3s var(--ease) backwards;
}
.answer:nth-child(1) { animation-delay: .02s; }
.answer:nth-child(2) { animation-delay: .06s; }
.answer:nth-child(3) { animation-delay: .10s; }
.answer:nth-child(4) { animation-delay: .14s; }
.answer:nth-child(5) { animation-delay: .18s; }
.answer:nth-child(6) { animation-delay: .22s; }
@keyframes answerIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.answer:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  background: var(--bg-2);
}
.answer:active:not(:disabled) { transform: translateY(0); }
.answer:disabled { cursor: default; }

/* La pieza pintada: cuadrado macizo con la letra */
.answer-key {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--c);
  color: #16110A;
  font-weight: 700;
  font-size: 16px;
}
.answer-body { min-width: 0; }

.answer[data-i="0"] { --c: var(--opt-1); }
.answer[data-i="1"] { --c: var(--opt-2); }
.answer[data-i="2"] { --c: var(--opt-3); }
.answer[data-i="3"] { --c: var(--opt-4); }
.answer[data-i="4"] { --c: var(--opt-5); }
.answer[data-i="5"] { --c: var(--opt-6); }

.answer.is-picked {
  border-color: var(--c);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--c);
}
.answer.is-correct {
  border-color: var(--oliva);
  box-shadow: inset 0 0 0 1px var(--oliva);
}
.answer.is-correct .answer-key { background: var(--oliva); }
.answer.is-wrong { opacity: .5; }
.answer.is-wrong .answer-key { background: var(--bad); color: #1B0D0B; }
.answer.is-faded { opacity: .32; }

/* Reparto de respuestas en RESULTS: una línea fina, no un bloque */
.answer-fill {
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--c);
  transition: width 620ms var(--ease);
}
.answer-count {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex: none;
  color: var(--text-soft);
}

/* --------------------------------------------------- imagen del enunciado
   Acompaña al texto en una pregunta Quick. Se le pone techo de altura para
   que las opciones sigan entrando en pantalla sin scroll: la imagen apoya
   al enunciado, no lo reemplaza. */
.question-figure {
  width: 100%;
  /* Se encoge antes que las opciones: dentro del flex de la pantalla Live
     es la única pieza que puede ceder altura sin volverse inservible. */
  flex: 0 1 auto;
  min-height: 0;
  max-height: 30vh;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
  display: flex;
  justify-content: center;
  line-height: 0;
}
.question-figure img {
  max-width: 100%;
  max-height: 30vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* En el panel del profesor conviven con el resto del control */
.question-figure.is-compact,
.question-figure.is-compact img { max-height: 180px; }

@media (max-width: 860px) {
  .question-figure, .question-figure img { max-height: 26vh; }
}

/* ------------------------------------------------------------ lienzo Deep
   La imagen manda: el cromo alrededor es mínimo y el color aparece solo en
   los puntos, igual que en el resto del sistema. */
.deep-canvas { width: 100%; }

.deep-frame {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  line-height: 0;
}
.deep-frame.is-interactive { cursor: crosshair; }

.deep-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.deep-layer { position: absolute; inset: 0; }

/* Punto colocado: círculo macizo con su número */
.deep-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  z-index: 2;
}
.deep-marker:disabled { cursor: default; }

.deep-marker-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--turquesa);
  color: #0B1414;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(13, 11, 10, .75);
  transition: transform var(--fast);
}
.deep-marker:not(:disabled):hover .deep-marker-dot { transform: scale(1.14); }

.deep-marker.is-correct .deep-marker-dot { background: var(--oliva); color: #101403; }
.deep-marker.is-wrong   .deep-marker-dot { background: var(--bad); color: #1B0D0B; }
.deep-marker.is-pending .deep-marker-dot { background: var(--mostaza); color: var(--accent-ink); }
.deep-marker.is-ghost   .deep-marker-dot { background: var(--text-dim); color: var(--bg-0); }

.deep-marker-label {
  max-width: 168px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(13, 11, 10, .88);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Zona correcta: el círculo muestra la tolerancia real, a escala */
.deep-zone {
  position: absolute;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px dashed var(--oliva);
  background: rgba(156, 175, 68, .09);
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}
.deep-zone.is-muted { border-color: var(--line-strong); background: rgba(236, 223, 200, .05); }
.deep-zone-core {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--oliva);
}
.deep-zone.is-muted .deep-zone-core { background: var(--text-dim); }

/* Mapa de calor: el solapamiento hace el trabajo, sin librerías */
.deep-heat {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(224, 122, 69, .34);
  pointer-events: none;
  mix-blend-mode: screen;
}
.deep-heat.is-hit { background: rgba(156, 175, 68, .38); }

/* Recuento de lo que detectó la clase */
.deep-tally { display: flex; flex-direction: column; gap: 9px; }
.deep-tally-row { display: flex; align-items: center; gap: 10px; }
.deep-tally-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(236, 223, 200, .07);
  overflow: hidden;
}
.deep-tally-bar > i { display: block; height: 100%; border-radius: inherit; transition: width 500ms var(--ease); }
.deep-tally-count {
  min-width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 14px;
}

/* Selector de tipo al crear una pregunta */
.kind-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kind-card {
  text-align: left;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-1);
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: border-color var(--fast), background var(--fast);
}
.kind-card:hover { background: var(--surface-2); }
.kind-card.is-active { border-color: var(--mostaza); background: rgba(233, 168, 60, .07); }
.kind-card h4 { font-size: 15px; margin-bottom: 2px; }

@media (max-width: 640px) {
  .kind-pick { grid-template-columns: 1fr; }
  .deep-marker-label { display: none; }
}

/* ------------------------------------------------------- cuenta regresiva
   Pantalla de espera antes de cada pregunta, para que quien se distrajo
   alcance a volver. El número es enorme a propósito: se tiene que leer
   desde el fondo del aula. */
.countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.countdown-num {
  font-size: clamp(96px, 22vw, 220px);
  font-weight: 600;
  letter-spacing: -.06em;
  line-height: .9;
  font-variant-numeric: tabular-nums;
  color: var(--mostaza);
  animation: countPop .9s var(--ease);
}
@keyframes countPop {
  0% { opacity: 0; transform: scale(1.35); }
  35% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
.countdown-ring { position: relative; display: grid; place-items: center; }
.countdown-hint {
  font-size: 15px;
  color: var(--text-soft);
  text-align: center;
  max-width: 34ch;
}

/* --------------------------------------------------------- feedback live */
.verdict {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: verdictIn .38s var(--ease);
}
@keyframes verdictIn {
  0% { opacity: 0; transform: scale(.82); }
  100% { opacity: 1; transform: scale(1); }
}
.verdict-icon {
  width: 88px; height: 88px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  font-size: 40px;
  border: 1px solid var(--line-strong);
}
.verdict-ok .verdict-icon  { color: var(--oliva); border-color: rgba(156, 175, 68, .45); }
.verdict-bad .verdict-icon { color: var(--bad); border-color: rgba(192, 69, 63, .42); }
.verdict-title { font-size: 25px; font-weight: 600; letter-spacing: -.035em; }
.verdict-points {
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  color: var(--mostaza);
}

/* Escenario del Live */
.stage {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  padding: 20px 0 32px;
}
.stage-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  min-height: 0;
}
/* Con imagen hay una pieza más que acomodar: se ajusta el aire y el cuerpo
   del enunciado para que las opciones sigan entrando sin scroll. */
.stage-center:has(.question-figure) { gap: 14px; }
.stage-center:has(.question-figure) .question-body { font-size: clamp(18px, 2.3vw, 26px); }

.question-body {
  font-size: clamp(21px, 3.2vw, 36px);
  font-weight: 500;
  letter-spacing: -.032em;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}

.stage-scrim {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms var(--ease);
}
.stage-scrim.on { opacity: 1; }
.scrim-ok  { background: radial-gradient(760px 520px at 50% 40%, rgba(156, 175, 68, .11), transparent 70%); }
.scrim-bad { background: radial-gradient(760px 520px at 50% 40%, rgba(192, 69, 63, .1), transparent 70%); }

/* ------------------------------------------------------ roster presencia */
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 7px;
}
.roster-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  min-width: 0;
  transition: border-color var(--mid), opacity var(--mid);
}
.roster-item .rn { font-size: 13px; font-weight: 400; min-width: 0; }
.roster-item .rs { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-dim); flex: none; }

.roster-item[data-presence="unfocused"] { border-color: rgba(233, 168, 60, .28); }
.roster-item[data-presence="offline"]   { opacity: .4; border-style: dashed; }

.roster-item.answered { border-color: rgba(62, 156, 156, .4); }
.roster-item.ok  { border-color: rgba(156, 175, 68, .45); }
.roster-item.bad { border-color: rgba(192, 69, 63, .35); }

/* Los puntos de presencia son los "íconos pintados" del panel */
.presence-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.presence-online    { background: var(--oliva); }
.presence-unfocused { background: var(--mostaza); }
.presence-offline   { background: var(--idle); }

/* --------------------------------------------------------------- listas */
.list { display: flex; flex-direction: column; }
.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border-bottom: 1px solid rgba(236, 223, 200, .05);
  transition: background var(--fast);
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: var(--surface-1); }

.qnum {
  width: 27px; height: 27px;
  flex: none;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}
.list-item.is-launched { opacity: .5; }
.list-item.is-launched .qnum { border-color: rgba(156, 175, 68, .35); color: var(--oliva); }
.list-item.is-current {
  background: var(--surface-1);
  box-shadow: inset 2px 0 0 var(--mostaza);
  opacity: 1;
}

/* --------------------------------------------------------------- modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 6, 5, .76);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: fadeIn 160ms var(--ease);
  overflow-y: auto;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: min(600px, 100%);
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: modalIn 200ms var(--ease);
  margin: auto;
}
.modal-wide { width: min(860px, 100%); }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 22px;
  border-bottom: 1px solid var(--line);
}
.modal-body { padding: 22px; display: flex; flex-direction: column; gap: 16px; max-height: 68vh; overflow-y: auto; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 15px 22px;
  border-top: 1px solid var(--line);
}

/* ----------------------------------------------------------------- menú
   Desplegable de acciones anclado a un botón. Agrupa lo que antes era una
   fila de iconos sueltos: la cabecera queda con una sola entrada y lo
   destructivo deja de estar a un clic de distancia. */
.menu-pop {
  position: fixed;
  z-index: 210;
  min-width: 232px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  box-shadow: var(--shadow-lg);
  animation: menuIn 140ms var(--ease);
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: none; }
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--fast), color var(--fast);
}
.menu-item:hover:not(:disabled) { background: var(--surface-2); }
.menu-item:disabled { opacity: .4; cursor: not-allowed; }
.menu-item.is-danger { color: #EBA79E; }
.menu-item.is-danger:hover:not(:disabled) { background: rgba(192, 69, 63, .12); }

.menu-sep { height: 1px; margin: 5px 4px; background: var(--line); }

/* --------------------------------------------------------------- toasts */
.toasts {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(370px, calc(100vw - 44px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 15px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  box-shadow: var(--shadow);
  font-size: 14px;
  animation: toastIn 240ms var(--ease);
}
.toast.out { animation: toastOut 200ms var(--ease) forwards; }
.toast-ok  { border-color: rgba(156, 175, 68, .4); }
.toast-bad { border-color: rgba(192, 69, 63, .42); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: none; }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateX(20px); }
}

/* ------------------------------------------------------- estado conexión */
.conn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color var(--mid), border-color var(--mid);
}
.conn[data-state="live"]    { color: var(--oliva); border-color: rgba(156, 175, 68, .32); }
.conn[data-state="polling"] { color: var(--mostaza); border-color: rgba(233, 168, 60, .32); }
.conn[data-state="down"]    { color: var(--bad); border-color: rgba(192, 69, 63, .35); }

/* --------------------------------------------------------- estado vacío */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 42px 22px;
  text-align: center;
  color: var(--text-dim);
  /* El estado vacío vive dentro de grillas de varias columnas: sin esto
     quedaría metido en la primera celda en vez de centrado en el bloque. */
  grid-column: 1 / -1;
  width: 100%;
}
.empty-icon {
  width: 50px; height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--surface-1);
  border: 1px solid var(--line);
}

/* Los iconos nunca se deforman ni se comen el espacio de un flex */
.icon { flex: none; display: block; }

/* --------------------------------------------------------------- skeleton */
.skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(236, 223, 200, .04) 25%, rgba(236, 223, 200, .085) 50%, rgba(236, 223, 200, .04) 75%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }

/* ---------------------------------------------------------------- código */
.code-display {
  font-family: var(--mono);
  font-size: clamp(32px, 6.5vw, 58px);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--mostaza);
  line-height: 1.1;
}
.code-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px dashed var(--line-strong);
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .16em;
  cursor: pointer;
  transition: border-color var(--fast), color var(--fast);
}
.code-pill:hover { border-color: var(--mostaza); color: var(--mostaza); }

/* -------------------------------------------------------------- tabs */
.tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  overflow-x: auto;
}
.tab {
  padding: 8px 15px;
  border-radius: 8px;
  border: none;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--fast), background var(--fast);
}
.tab:hover { color: var(--text-soft); }
.tab.active { color: var(--text); background: var(--surface-3); }

/* Selector de color por círculos: se elige viendo el color, no leyendo
   su nombre en un desplegable. Mismo control en comisiones y en módulos. */
.swatches { padding: 2px 0; }
.swatch-btn {
  width: 34px; height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color var(--fast), transform var(--fast);
}
.swatch-btn > i {
  display: block;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--sw);
  transition: transform var(--fast);
}
.swatch-btn:hover > i { transform: scale(1.12); }
.swatch-btn.is-active { border-color: var(--sw); }
.swatch-btn.is-active > i { transform: scale(0.82); }

/* Una comisión terminada se lee distinto sin dejar de ser legible */
.card.is-finished { opacity: .78; }
.card.is-finished:hover { opacity: 1; }

/* Barra de color de un módulo: otro "ícono pintado" */
.swatch {
  width: 4px;
  border-radius: 2px;
  flex: none;
  align-self: stretch;
  min-height: 30px;
}

/* --------------------------------------------------------- celebración */
.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 150;
  overflow: hidden;
}
.confetti i {
  position: absolute;
  top: -14px;
  width: 8px;
  height: 14px;
  opacity: 0;
  animation: fall linear forwards;
}
@keyframes fall {
  0% { opacity: 1; transform: translateY(-10px) rotate(0deg); }
  100% { opacity: 0; transform: translateY(102vh) rotate(640deg); }
}

.pop { animation: pop 360ms var(--ease); }
@keyframes pop {
  0% { transform: scale(.9); }
  55% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.fade-in { animation: fadeUp 300ms var(--ease) backwards; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .shell { padding: 0 15px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .navlinks { display: none; }
  .answers { grid-template-columns: 1fr; gap: 10px; }
  .answer { min-height: 66px; padding: 14px 16px; font-size: 15px; }
  .answer-key { width: 32px; height: 32px; font-size: 14px; }
  .card { padding: 15px; }
  .card-lg { padding: 18px; }
  .podium { grid-template-columns: 1fr; }
  .toasts { left: 15px; right: 15px; bottom: 15px; max-width: none; }
  .stat-value { font-size: 24px; }
  .roster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  /* Zonas táctiles cómodas: en escritorio se apunta con el mouse, acá con
     el dedo, así que todo lo pulsable crece a ~40px de lado corto. */
  .btn { padding: 11px 16px; }
  .btn-sm { padding: 9px 13px; }
  .btn-icon { width: 40px; height: 40px; padding: 9px; }
  .btn-sm.btn-icon { width: 38px; height: 38px; }
  .navlink { padding: 10px 13px; }
  .tab { padding: 10px 15px; }
  .code-pill { padding: 8px 12px; }
  .checkline input[type=checkbox], .checkline input[type=radio] { width: 19px; height: 19px; }

  /* Las cabeceras de panel llevan filtros: en una columna angosta tienen
     que envolver en vez de estirar la tarjeta. */
  .card-head { flex-wrap: wrap; }
  .card-head > .row { flex-wrap: wrap; width: 100%; }
  .select-auto { width: 100%; min-width: 0; }

  /* Las etiquetas van en mayúscula y espaciadas: un punto más de cuerpo
     las vuelve cómodas en pantalla chica. */
  .label, .stat-label { font-size: 11.5px; }
}

@media (max-width: 520px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .modal-body { padding: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}