/* ============================================================
   Coro — components and layout.

   The IA Humana design system ships its components as React (see
   _ds_bundle.js). A JavaScript build pipeline is out of bounds, so
   they are ported here as CSS classes. Their styling was expressed
   entirely in custom properties, so the port keeps the same values
   and the same visual contract: same variants, same sizes, same
   states. Nothing below invents a colour.
   ============================================================ */

/* ---------------------------------------------------------------- Button */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-1);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }

.btn--primary { background: var(--accent); color: var(--text-on-accent); }
.btn--primary:hover:not(:disabled) { background: var(--accent-deep); }

.btn--secondary {
  background: var(--surface-card);
  color: var(--text-1);
  border-color: var(--border-strong);
}
.btn--secondary:hover:not(:disabled) { background: var(--surface-card-hover); }

.btn--ghost { color: var(--text-2); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-card); color: var(--text-1); }

.btn--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn--danger:hover:not(:disabled) { background: var(--danger-soft); }

.btn--sm { height: 28px; padding: 0 10px; font-size: var(--text-xs); gap: 5px; }
.btn--lg { height: 44px; padding: 0 20px; font-size: var(--text-md); gap: 9px; border-radius: var(--radius-md); }
.btn--block { width: 100%; }

/* ------------------------------------------------------------------ Card */

.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card--glass {
  background: var(--surface-card);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: var(--glass-highlight);
}
.card--flush { padding: 0; }

/* ------------------------------------------------------------ Badge / Tag */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-card);
  color: var(--text-2);
  white-space: nowrap;
}
.badge--accent { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.badge--danger { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.badge--muted  { color: var(--text-3); }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ------------------------------------------------------- Input / Textarea */

.input, .textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-1);
  background: var(--surface-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow-accent-soft); }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:disabled, .textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.textarea { resize: vertical; min-height: 84px; line-height: var(--leading-normal); }
.input--lg { font-size: var(--text-md); padding: 14px 16px; border-radius: var(--radius-md); }

/* ---------------------------------------------------------------- Switch */

.switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 38px; height: 22px; flex: none;
  background: var(--bar-track);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  position: relative;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-2);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.switch input:checked + .switch__track { background: var(--accent); border-color: transparent; }
.switch input:checked + .switch__track::after { transform: translateX(16px); background: var(--text-on-accent); }
.switch input:focus-visible + .switch__track { box-shadow: var(--focus-ring); }

/* ------------------------------------------------------------------ Stat */

.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-medium); line-height: var(--leading-none); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.stat__label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: lowercase; color: var(--text-3); }
.stat--md .stat__value { font-size: var(--text-3xl); }

/* ------------------------------------------------------------------ Tabs */

.tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--bar-track); border-radius: var(--radius-pill); }
.tabs__item {
  padding: 5px 12px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--text-2); background: transparent; border: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tabs__item[aria-selected="true"] { background: var(--accent); color: var(--text-on-accent); }

/* ----------------------------------------------------------- ProgressBar */

.progress { height: 6px; background: var(--bar-track); border-radius: var(--radius-pill); overflow: hidden; }
.progress__fill { height: 100%; background: var(--accent); border-radius: inherit; transition: width var(--dur-slow) var(--ease-out); }

/* ---------------------------------------------------------------- Callout */

.callout {
  display: flex; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-card);
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: var(--leading-normal);
}
.callout--danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--text-1); }

/* ============================================================
   Shared page furniture
   ============================================================ */

.stack { display: flex; flex-direction: column; }
/* Wraps by default. A row of badges that cannot wrap pushed the panel 350px
   wider than a phone viewport, with two badges entirely off screen. */
.row { display: flex; align-items: center; flex-wrap: wrap; }
.row--nowrap { flex-wrap: nowrap; }
.gap-1 { gap: var(--space-1) } .gap-2 { gap: var(--space-2) } .gap-3 { gap: var(--space-3) }
.gap-4 { gap: var(--space-4) } .gap-5 { gap: var(--space-5) } .gap-6 { gap: var(--space-6) }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.mono { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent);
}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.app-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  background: var(--bg-overlay);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--border);
}
.brand { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }

/* The room code. Six characters from an alphabet with no ambiguous
   glyphs, spaced so it can be read off a projector. */
.room-code {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Panel
   ============================================================ */

.panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 100%;
  gap: var(--space-4);
  padding: var(--space-4);
  align-items: start;
}
@media (min-width: 1120px) {
  .panel-grid { grid-template-columns: minmax(340px, 1fr) 358px; }
  .panel-rail { grid-column: 1 / -1; }
}
@media (min-width: 1500px) {
  .panel-grid { grid-template-columns: 380px minmax(560px, 1fr) 358px; }
  .panel-rail { grid-column: auto; }
}

.rail { display: flex; flex-direction: column; gap: var(--space-2); }
.rail__item {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; text-align: left;
  padding: var(--space-3);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.rail__item:hover { background: var(--surface-card-hover); }
.rail__item[aria-current="true"] { background: var(--accent-soft); border-color: var(--accent-line); }
.rail__go {
  display: flex; align-items: center; gap: var(--space-3);
  flex: 1 1 auto; min-width: 0;
  background: none; border: none; padding: 0;
  text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.rail__glyph {
  flex: none; width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-card); color: var(--text-2);
  font-size: var(--text-sm);
}
.rail__item[aria-current="true"] .rail__go {
  display: flex; align-items: center; gap: var(--space-3);
  flex: 1 1 auto; min-width: 0;
  background: none; border: none; padding: 0;
  text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.rail__glyph { background: var(--accent); color: var(--text-on-accent); }
.rail__title { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.rail__meta { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-3); letter-spacing: var(--tracking-label); }
.rail__remove { flex: none; color: var(--text-3); background: none; border: none; cursor: pointer; padding: 4px; border-radius: var(--radius-xs); }
.rail__remove:hover { color: var(--danger); background: var(--danger-soft); }

.kind-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.kind-picker .btn { justify-content: flex-start; }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3);
}
.option-row { display: flex; align-items: center; gap: var(--space-2); }
.option-key {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: var(--radius-xs); background: var(--surface-card);
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-2);
}

.control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.control-grid .btn { height: 40px; }

/* ============================================================
   Projector
   ============================================================ */

.stage-wrap { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-page); }
.stage {
  container-type: inline-size;
  flex: 1;
  display: flex; flex-direction: column;
  gap: var(--space-6);
  padding: clamp(var(--space-5), 3vw, var(--space-12));
  min-height: 0;
}
.stage__title {
  font-family: var(--font-display);
  font-size: var(--stage-title);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 22ch;
}
.stage__body { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }

/* La franja de entrada. Nunca se va - quien llega tarde tiene que poder
   entrar en cualquier momento - pero se encoge después de la primera slide
   para devolverle alto al gráfico. */
.join-strip {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) clamp(var(--space-4), 3vw, var(--space-10));
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
  transition: padding var(--dur-slow) var(--ease-out);
}
.join-strip .stat__value { font-size: var(--text-xl); }

/* La instrucción se lee como una frase, no como tres datos sueltos: lo que
   hay que hacer, con la URL y el código destacados dentro de ella. */
.join-strip__how {
  font-size: clamp(0.9rem, 1.7cqw, 1.4rem);
  color: var(--text-2);
  line-height: var(--leading-snug);
  text-wrap: balance;
}
.join-strip__url,
.join-strip__how .room-code {
  color: var(--text-1);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
}
.join-strip__how .room-code { letter-spacing: 0.16em; }

/* Compacta: se va el QR, la frase se queda. Después de la primera slide lo
   que hace falta es el recordatorio, no el código a media pantalla. */
.join-strip--compact { padding-block: var(--space-2); }
.join-strip--compact .join-strip__qr { display: none; }
.join-strip--compact .join-strip__how { font-size: clamp(0.8rem, 1.3cqw, 1.05rem); }
/* Scales with the room: 84px is fine on a laptop and unscannable from the
   back of an auditorium. */
.join-strip__qr {
  width: clamp(84px, 9vw, 180px);
  height: clamp(84px, 9vw, 180px);
  flex: none;
  color: var(--text-1);
}
.join-strip__qr svg { width: 100%; height: 100%; display: block; }


/* El control discreto del proyector: revelar sin volver al panel. Vive en la
   esquina de la escena, no en la franja, para que quede sobre el gráfico y no
   compita con el código de entrada. */
.stage__control {
  position: absolute; right: clamp(var(--space-4), 2vw, var(--space-8));
  bottom: clamp(var(--space-4), 2vw, var(--space-8));
  z-index: 5;
  opacity: 0.35;
  transition: opacity var(--dur-base) var(--ease-out);
}
.stage__control:hover, .stage__control:focus-visible { opacity: 1; }
.stage { position: relative; }

/* CHOICE bars. The leader carries the accent and the rest stay neutral:
   the brand rule is that the accent is the shout, not the background. */
.bars { display: flex; flex-direction: column; gap: clamp(var(--space-2), 1.4cqw, var(--space-5)); }
.bar__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: 6px; }
.bar__label { font-size: var(--stage-bar-label); font-weight: var(--weight-medium); color: var(--text-2); }
.bar__count { font-family: var(--font-mono); font-size: var(--stage-bar-label); color: var(--text-3); font-variant-numeric: tabular-nums; }
.bar__track { height: clamp(10px, 2.2cqw, 30px); background: var(--bar-track); border-radius: var(--radius-pill); overflow: hidden; }
.bar__fill {
  height: 100%; width: 0; border-radius: inherit;
  background: var(--bar-fill-idle);
  transition: width var(--dur-slow) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.bar--leader .bar__label { color: var(--text-1); }
.bar--leader .bar__count { color: var(--accent); }
.bar--leader .bar__fill { background: var(--accent); }

/* Word cloud. Entries keep their internal spaces: "swan lake" is one
   entry, not two. */
.cloud {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(var(--space-2), 1.6cqw, var(--space-6));
  line-height: 1.1;
}
.cloud__word {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--text-3);
  animation: coro-in var(--dur-slow) var(--ease-out) both;
}
.cloud__word--mid { color: var(--text-1); }
.cloud__word--top { color: var(--accent); }

/* OPEN cards, newest first. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22cqw), 1fr)); gap: clamp(var(--space-2), 1.2cqw, var(--space-4)); align-content: start; overflow: auto; }
.answer-card {
  padding: clamp(var(--space-3), 1.2cqw, var(--space-5));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font-size: clamp(0.8rem, 1.5cqw, 1.4rem);
  color: var(--text-2);
  line-height: var(--leading-snug);
  animation: coro-in var(--dur-slow) var(--ease-out) both;
}
.answer-card--newest { border-color: var(--accent-line); color: var(--text-1); }

/* QA, most voted on top, answered struck through. */
.qa-list { display: flex; flex-direction: column; gap: clamp(var(--space-2), 1cqw, var(--space-3)); }
.qa-row {
  display: flex; align-items: center; gap: var(--space-4);
  padding: clamp(var(--space-2), 1cqw, var(--space-4));
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-card);
  transition: border-color var(--dur-base) var(--ease-out);
}
.qa-row__votes {
  flex: none; display: flex; flex-direction: column; align-items: center;
  min-width: clamp(2rem, 4cqw, 3.5rem);
  font-family: var(--font-mono); color: var(--text-3);
  font-size: clamp(0.8rem, 1.7cqw, 1.6rem); font-variant-numeric: tabular-nums;
}
.qa-row__text { font-size: clamp(0.85rem, 1.8cqw, 1.7rem); color: var(--text-1); }
.qa-row--top { border-color: var(--accent-line); }
.qa-row--top .qa-row__votes { color: var(--accent); }
.qa-row--answered .qa-row__text { text-decoration: line-through; color: var(--text-3); }

/* Results hidden: one large number, the answer count, and nothing else. */
.hidden-count { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); flex: 1; }
.hidden-count__n {
  font-family: var(--font-display); font-size: var(--stage-number);
  line-height: var(--leading-none); letter-spacing: var(--tracking-tighter);
  font-variant-numeric: tabular-nums;
}
.hidden-count__label { font-family: var(--font-mono); font-size: var(--stage-label); letter-spacing: var(--tracking-label); color: var(--text-3); text-transform: lowercase; }

/* ============================================================
   Phone — one large control per answer and nothing else.
   ============================================================ */

.phone { min-height: 100dvh; display: flex; flex-direction: column; }
.phone__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-faint);
}
.phone__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5) var(--space-4); max-width: 32rem; width: 100%; margin: 0 auto; }
.phone__title { font-size: var(--text-xl); line-height: var(--leading-snug); }

.opt-list { display: flex; flex-direction: column; gap: var(--space-3); }
.opt {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; text-align: left;
  padding: var(--space-4);
  min-height: 60px;
  font-size: var(--text-md);
  background: var(--bg-raised);
  color: var(--text-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.opt:disabled { cursor: not-allowed; opacity: 0.55; }
.opt[aria-pressed="true"] { background: var(--accent); color: var(--text-on-accent); border-color: transparent; }
.opt__key {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono); font-size: var(--text-xs);
  background: var(--surface-card); color: var(--text-2);
}
.opt[aria-pressed="true"] .opt__key { background: color-mix(in srgb, var(--text-on-accent) 22%, transparent); color: var(--text-on-accent); }
.opt__mark { margin-left: auto; }

.char-count { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-3); text-align: right; }

.done {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-8) var(--space-4); text-align: center;
}
.done__check {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-size: var(--text-xl);
}

.toast {
  position: fixed; left: 50%; bottom: var(--space-6); transform: translateX(-50%);
  z-index: 50;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--bg-raised); color: var(--text-1);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
  animation: coro-in var(--dur-base) var(--ease-out) both;
}
.toast--error { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

/* ============================================================
   Combined — the development and rehearsal aid.
   ============================================================ */

.combined { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); height: 100dvh; }
.combined__pane { display: flex; flex-direction: column; background: var(--bg-page); min-width: 0; }
.combined__label {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-faint);
}
.combined__pane iframe { flex: 1; width: 100%; border: none; }
@media (max-width: 1100px) { .combined { grid-template-columns: minmax(0, 1fr); height: auto; } .combined__pane { height: 90vh; } }

/* ------------------------------------------------------------------ Home */

.home { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6); }
.home__inner { width: 100%; max-width: 26rem; display: flex; flex-direction: column; gap: var(--space-6); }
.code-input {
  font-family: var(--font-mono); font-size: var(--text-2xl);
  letter-spacing: 0.2em; text-align: center; text-transform: uppercase;
}

/* ---------------------------------------------------------------- Motion */

@keyframes coro-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes coro-pulse { 0%, 100% { opacity: 0.35 } 50% { opacity: 1 } }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: coro-pulse 2s var(--ease-in-out) infinite; }

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

/* ============================================================
   La lista de sesiones del presentador.
   ============================================================ */

.page {
  max-width: var(--container-md);
  margin: 0 auto;
  padding: var(--space-10) var(--space-5) var(--space-20);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.new-session {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-4);
}
.new-session .input { min-width: 12rem; }

.session-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.session-row:hover { border-color: var(--border-strong); }
.session-row--closed { background: transparent; }
.session-row--closed .session-row__name { color: var(--text-2); }

.session-row__main {
  display: flex; flex-direction: column; gap: 3px;
  flex: 1 1 18rem; min-width: 0;
}
.session-row__name { font-size: var(--text-md); font-weight: var(--weight-medium); }
.session-row__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--text-3);
}
.session-row__meta .room-code { letter-spacing: 0.14em; color: var(--text-2); }
.session-row__status { flex: none; }
.session-row__actions { display: flex; gap: var(--space-1); flex: none; }
.session-row__actions form { display: inline; }

.empty { text-align: center; padding: var(--space-10) var(--space-5); }

/* ============================================================
   Editor de slides — ver el comentario en panel.html.
   ============================================================ */

/* El riel es la lista de slides y nada más. Añadir vive al final de la
   lista, donde uno agrega cosas a una lista, no como cuatro tarjetas que
   parecen slides que ya existen. */
.rail__add {
  position: relative;
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; padding: var(--space-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: transparent; color: var(--text-2);
  font: inherit; font-size: var(--text-sm); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.rail__add:hover { border-color: var(--accent-line); color: var(--accent); }

.kind-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.kind-menu[data-open] { display: flex; }
.kind-menu__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: none; background: none; border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-sm); color: var(--text-1);
  text-align: left; cursor: pointer;
}
.kind-menu__item:hover { background: var(--accent-soft); color: var(--accent); }
.kind-menu__glyph { width: 1.25rem; text-align: center; color: var(--text-3); }

/* Cabecera del editor: el tipo de slide, y nada más. Los estados de la
   votación viven con los controles en vivo, que es donde se cambian. */
.editor__head {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
}
.editor__step {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); color: var(--text-3);
}

/* Un campo guarda al salir de él; el indicador confirma sin pedir un clic. */
.saved {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--accent); opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.saved[data-on] { opacity: 1; }

.title-input {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  min-height: 3.4rem;
}

/* La demo es una herramienta de ensayo, no un control en vivo: se pliega. */
.tool { border: 1px solid var(--border); border-radius: var(--radius-md); }
.tool > summary {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-3); cursor: pointer; list-style: none;
}
.tool > summary::-webkit-details-marker { display: none; }
.tool > summary::before { content: "▸ "; }
.tool[open] > summary::before { content: "▾ "; }
.tool > summary:hover { color: var(--text-1); }
.tool__body {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-4);
}

.session-closed {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}

/* ============================================================
   Cuenta: entrar, registrarse, recuperar contraseña.
   Estos estilos los usan TODAS las pantallas de allauth, incluidas
   las que no escribimos a mano, porque sus `elements` pasan por acá.
   ============================================================ */

.auth-card { width: 100%; }
.auth-title {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
.auth-subtitle { font-size: var(--text-md); }

.rule { border: none; border-top: 1px solid var(--border); margin: var(--space-2) 0; }

.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.btn-group .btn--primary { flex: 1 1 auto; }

.auth-links {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  justify-content: center;
  font-size: var(--text-sm);
}
.auth-links a { color: var(--accent); }
.auth-links a:hover { text-decoration: underline; }

.check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.check__input { width: 1rem; height: 1rem; accent-color: var(--accent); }

.page--narrow { max-width: var(--container-sm); }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table__th, .table__td {
  text-align: left; padding: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.table__th {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-3); font-weight: var(--weight-medium);
}

/* ---- El menú de la cuenta en la barra ---- */

.menu { position: relative; }
.menu > summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + var(--space-2));
  z-index: 30; min-width: 12rem;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-2);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.menu__item {
  display: block; width: 100%; text-align: left;
  padding: var(--space-2) var(--space-3);
  border: none; background: none; border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-sm); color: var(--text-1);
  cursor: pointer;
}
.menu__item:hover { background: var(--accent-soft); color: var(--accent); }
.menu__item--danger:hover { background: var(--danger-soft); color: var(--danger); }
.menu__sep { border: none; border-top: 1px solid var(--border-faint); margin: var(--space-1) 0; }

/* Los links dentro de las tarjetas de cuenta: el sistema de diseño pone
   `a { color: inherit }`, así que sin esto un enlace no se ve como enlace. */
.auth-card a,
.callout a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.auth-card a:hover,
.callout a:hover { color: var(--accent-deep); }

.field__error { font-size: var(--text-xs); color: var(--danger); }

/* ============================================================
   El interruptor de la votación y el gateo de los controles.
   ============================================================ */

.live-switch {
  display: flex; align-items: center; gap: var(--space-3);
  cursor: pointer;
}
.live-switch__label {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--text-2);
}
.live-switch input:checked ~ .stack .live-switch__label { color: var(--text-1); }
.live-switch .switch__track {
  width: 44px; height: 26px; flex: none;
  background: var(--bar-track);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  position: relative;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
/* El nudo es un elemento de verdad y no un `::after`, porque su estado lo
   pinta JavaScript con estilo en línea y a un pseudoelemento no se le puede
   poner uno. Ver el comentario del interruptor en coro.js. */
.live-switch .switch__knob {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--text-3);
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.live-switch input:checked + .switch__track,
.live-switch--on .switch__track {
  /* Longhand a propósito: un `background:` con `var()` adentro se cae entero
     si la variable no resuelve, y lo que queda es transparente, que es
     exactamente igual a "apagado". La forma larga solo se lleva el color. */
  background-color: var(--accent);
  background-image: none;
  border-color: transparent;
}
.live-switch--on .switch__knob,
.live-switch input:checked + .switch__track .switch__knob {
  transform: translateX(18px); background: var(--text-on-accent);
}
.live-switch input:focus-visible + .switch__track { box-shadow: var(--focus-ring); }

/* La tarjeta entera se enciende cuando la slide sale al aire. */
.card[data-live-controls] { border-color: var(--border); }
.card[data-live-controls].is-live { border-color: var(--accent-line); }

/* Lo que solo tiene sentido con la votación abierta. */
.gated { display: flex; flex-direction: column; gap: var(--space-3); }
.gated--off { opacity: 0.4; }
.gated--off button { cursor: not-allowed; }

.icon-btn { padding: 0 10px; font-size: var(--text-md); line-height: 1; }

/* `hidden` es un estilo del navegador y pierde contra cualquier clase que
   ponga display. Sin esto, una tarjeta oculta con .card .stack se seguía
   viendo. */
[hidden] { display: none !important; }

/* ============================================================
   La pantalla de entrada del proyector.
   Lo primero que ve la sala, y lo único que necesita para entrar.
   ============================================================ */

.welcome {
  container-type: inline-size;
  position: relative;      /* la firma de IA Humana se cuelga de esta esquina */
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(var(--space-6), 6vw, var(--space-20));
  flex-wrap: wrap;
  padding: clamp(var(--space-6), 4vw, var(--space-16));
}
.welcome__qr {
  width: clamp(14rem, 34cqw, 30rem);
  aspect-ratio: 1;
  color: var(--text-1);
  flex: none;
}
.welcome__qr svg { width: 100%; height: 100%; display: block; }

.welcome__how { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.welcome__lead {
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 1.6cqw, 1.4rem);
  letter-spacing: var(--tracking-label);
  text-transform: lowercase;
  color: var(--text-3);
}
.welcome__url {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 3.2cqw, 3rem);
  font-weight: var(--weight-semibold);
  color: var(--text-1);
  word-break: break-all;
  margin-bottom: var(--space-4);
}
.welcome__code {
  font-size: clamp(2.5rem, 8cqw, 7rem);
  line-height: var(--leading-none);
  color: var(--accent);
  margin-bottom: var(--space-6);
}
.welcome__count {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: clamp(0.9rem, 1.8cqw, 1.5rem);
  color: var(--text-2);
}

/* Todas las slides comparten la misma franja: una sola forma, sin un primer
   caso especial. La pantalla de entrada es la que hace el trabajo de invitar. */
.join-strip { padding-block: var(--space-2); }
.join-strip .join-strip__qr { display: none; }

/* ---- Invitar, en el panel ---- */

.invite { display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap; }
.invite__qr {
  width: 7rem; height: 7rem; flex: none;
  color: var(--text-1);
  padding: var(--space-2);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.invite__qr svg { width: 100%; height: 100%; display: block; }
#invite-link, #welcome-link { font-size: var(--text-xs); }

/* La slide cero en el canvas: lo que se comparte, del tamaño que se lee. */
.welcome-edit { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: flex-start; }
.welcome-edit__qr {
  flex: none;
  width: 11rem; height: 11rem;
  padding: var(--space-3);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.welcome-edit__qr svg { width: 100%; height: 100%; display: block; }

/* ---- Pantalla completa ---- */


.stage__control { display: flex; align-items: center; gap: var(--space-2); }

/* Ya en pantalla completa el botón sobra: Escape sale, y lo que la sala tiene
   que ver es la pregunta. */
:fullscreen [data-fullscreen] { display: none; }

/* ---- La barra del proyector ---- */

/* Revelar y ocultar viven acá arriba, junto a la gente en la sala. Estaban en
   una esquina de abajo y solo en la nube de palabras: quien presenta mira
   esta pantalla, y el control tiene que estar donde ya está mirando. */
.stage__bar { flex-wrap: nowrap; }
.stage__bar [data-toggle-reveal] { flex: none; }

/* Navegación y pantalla completa: discretos hasta que se los busca. */
.stage__control { display: flex; align-items: center; gap: var(--space-2); }

.welcome__actions { margin-top: var(--space-6); flex-wrap: wrap; }

/* ============================================================
   El aura: lo que la sala manda mientras espera.
   ============================================================ */

/* Los emoji suben por encima del fondo y por debajo de todo lo demás: nunca
   tapan la pregunta ni los resultados. `pointer-events: none` para que no se
   coman un click del proyector. */
.aura-sky {
  position: fixed; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.aura-sky span {
  position: absolute;
  bottom: -2rem;
  font-size: clamp(1.75rem, 3vw, 3.25rem);
  line-height: 1;
  will-change: transform, opacity;
  animation: aura-rise var(--aura-dur, 4.5s) cubic-bezier(0.25, 0.6, 0.4, 1) forwards;
}
@keyframes aura-rise {
  0%   { transform: translateY(0) scale(0.6) rotate(0deg); opacity: 0; }
  12%  { transform: translateY(-12vh) scale(1) rotate(var(--aura-tilt, 6deg)); opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(-102vh) scale(0.85) rotate(calc(var(--aura-tilt, 6deg) * -1));
         opacity: 0; }
}

/* El recuento, chico y al lado del resto de los números de la barra. */
.aura-tally { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.aura-tally__item {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 1.2cqw, 1.05rem);
  color: var(--text-3);
}
.aura-tally__emoji { font-family: inherit; font-size: 1.35em; }

.welcome .aura-tally { margin-top: var(--space-4); }
.welcome .aura-tally__item { font-size: clamp(0.85rem, 1.5cqw, 1.3rem); }

/* La botonera del teléfono. Objetivos grandes: se tocan con el pulgar, de
   pie, en una sala a oscuras. */
.aura { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.aura__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.aura__key {
  flex: 1 1 3.5rem;
  min-width: 3.25rem;
  min-height: 3.25rem;
  font-size: var(--text-xl);
  line-height: 1;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.aura__key:hover { background: var(--surface-card-hover); border-color: var(--accent-line); }
.aura__key--pop { animation: aura-pop 260ms var(--ease-out); }
@keyframes aura-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .aura-sky { display: none; }
}

/* ============================================================
   IA Humana. Coro es suyo, y se nota sin gritar.
   ============================================================ */

/* Arriba a la derecha, del tamaño de una firma. El color es texto secundario
   -el isotipo hereda con `currentColor`- así que la marca acompaña al tema en
   vez de pelearse con él, y solo el punto de la cabeza lleva el acento. */
.ia {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--text-3);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.ia:hover { color: var(--text-1); }
.ia__mark { width: 1.35rem; height: 1.35rem; flex: none; }
.ia__word {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

/* En la barra de la cuenta va última y separada, para que no se lea como un
   control más de la sesión. */
.app-header .ia { padding-left: var(--space-4); border-left: 1px solid var(--border); }

/* En un teléfono la palabra sobra: el isotipo solo sigue diciendo de quién
   es, y la barra se queda con el ancho para lo que hay que hacer. */
@media (max-width: 40rem) {
  .app-header .ia__word { display: none; }
  .app-header .ia { padding-left: var(--space-3); }
}

/* En la pantalla de entrada del proyector: una esquina, fuera del camino del
   QR. Se va sola al avanzar, porque vive dentro de `.welcome`. */
.welcome .ia {
  position: absolute; top: var(--space-6); right: var(--space-8);
  z-index: 2;
}
.welcome .ia__mark { width: 2rem; height: 2rem; }
.welcome .ia__word { font-size: var(--text-xs); }

/* La línea de abajo: la más chica de la página y centrada. */
.legal {
  margin-top: var(--space-6);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  color: var(--text-3);
}
.legal a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border-strong); }
.legal a:hover { color: var(--text-1); }

/* En el teléfono queda al pie, después del control, y nunca compite con él. */
.phone .legal { margin-top: auto; padding: var(--space-5) var(--space-4) var(--space-6); }

/* El cuerpo de un estado vacío: `.empty` centra el texto, esto centra
   también lo que no es texto —el botón de empezar la charla—. */
.empty__body { align-items: center; }

/* ============================================================
   El riel elige, la navegación mueve.
   ============================================================ */

/* Dos marcas distintas y hay que poder leerlas a la vez: `aria-current` es la
   slide que la sala tiene delante —fondo de acento, ya definido arriba— y
   `--editing` la que está abierta en el editor —solo un borde—. Una slide
   puede ser las dos, y entonces se ven las dos. */
.rail__item--editing { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* Las acciones de cada slide: al aire, abrir en el canvas, revelar. Todo lo
   que se le puede hacer a esa slide está en su fila y no en una tarjeta al
   costado, que es lo que se iba abajo del scroll. */
.rail__acts { display: flex; align-items: center; gap: var(--space-1); flex: none; }
.rail__act {
  flex: none;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  font-size: var(--text-2xs);
  color: var(--text-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.rail__act:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-line); }

/* El play de la que está sonando: encendido y sin nada que apretar. Es el
   indicador de qué se está reproduciendo, no un botón apagado. */
.rail__act--live {
  color: var(--text-on-accent);
  background: var(--accent);
  border-color: var(--accent);
  opacity: 1;
  cursor: default;
}
.rail__act:disabled:not(.rail__act--live) { opacity: 0.35; cursor: default; }

/* El ojo abierto: los resultados de esa slide están a la vista de la sala. */
.rail__act--on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

/* El título de lo que la sala está viendo, en la tarjeta de navegación. */
.live-now {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

/* ============================================================
   Las columnas del panel.
   ============================================================ */

/* Tres items y nada más: el mazo, el canvas y las herramientas. Antes cada
   tarjeta era un item suelto y la grilla las repartía sola por las celdas
   libres: ensayo y ajustes terminaban debajo del editor, fuera de la
   pantalla. Metidas en un `aside` van juntas y a la derecha. */
.panel-rail { order: -2; }
.panel-edit { order: 0; }
.panel-side { order: 1; }

@media (min-width: 1120px) {
  .panel-side { align-self: stretch; }
}

/* ============================================================
   La consola: arriba a la izquierda, antes que el mazo.
   ============================================================ */

/* Cuánta gente hay y si la sala puede responder. Son las dos cosas que se
   miran cada treinta segundos mientras se presenta, así que van donde cae la
   vista y no en una tarjeta al costado que el scroll se lleva. */
.console {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  row-gap: var(--space-3);
}
.console.is-live { border-color: var(--accent-line); }
.console .live-switch { margin: 0; }
.badge--lg { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); }

/* La fila cero es del producto, no del mazo: se distingue sin gritar. */
.rail__item--zero { border-style: dashed; }

/* Sin slide al aire no hay votación que abrir, y el interruptor lo dice. */
.live-switch--off { opacity: 0.5; cursor: not-allowed; }

/* El número de la slide: es como se las nombra en voz alta —"volvé a la
   tres"— y como las numera el editor. Ancho fijo y cifras tabulares para que
   la columna quede recta hasta la 99. */
.rail__num {
  flex: none;
  width: 1.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-3);
  letter-spacing: var(--tracking-label);
}
.rail__item[aria-current="true"] .rail__num { color: var(--accent); }

/* El glifo, el número y el título en una línea: `.row` envuelve por defecto y
   en una pantalla angosta el título se caía debajo del icono y los botones se
   le metían encima. */
.rail__go { flex-wrap: nowrap; min-width: 0; }
.rail__meta, .rail__title { min-width: 0; }

/* Iconos: heredan el color del botón, así que sirven en los dos temas y se
   encienden con él. */
.icon-wrap { display: inline-flex; }
.icon { width: 1.05rem; height: 1.05rem; display: block; }

/* La consola cruza el ancho entero, arriba de todo: es de la charla, no del
   mazo, y en una columna angosta sus cuatro datos se apilaban en cuatro
   renglones. */
.panel-console { order: -3; }
@media (min-width: 1120px) {
  .panel-console { grid-column: 1 / -1; }
}

/* Mover: al lado de las demás acciones pero separadas, para no apretar
   "subir" cuando se busca "al aire". */
.rail__acts--move { margin-right: var(--space-2); }
.rail__acts--move .rail__act { width: 1.75rem; height: 1.75rem; }

/* ============================================================
   Lo que está sonando.
   ============================================================ */

/* Tres barras que suben y bajan, como un ecualizador. Un ▶ encendido y otro
   apagado se distinguen mirando; algo que se mueve se distingue de reojo, que
   es como se mira el riel mientras se está hablando.

   Heredan `currentColor`, así que sobre el botón lleno salen del color del
   texto sobre acento sin repetir el token. */
.playing {
  display: flex; align-items: flex-end; gap: 2px;
  height: 0.8rem;
}
.playing__bar {
  width: 3px; height: 100%;
  background: currentColor;
  border-radius: 1px;
  transform-origin: bottom;
  animation: playing 1s var(--ease-in-out, ease-in-out) infinite;
}
.playing__bar:nth-child(2) { animation-delay: -0.33s; }
.playing__bar:nth-child(3) { animation-delay: -0.66s; }
@keyframes playing {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}

/* Quieto y legible para quien pidió que nada se mueva: las tres barras
   quedan a distinta altura, que sigue diciendo "esta es". */
@media (prefers-reduced-motion: reduce) {
  .playing__bar { animation: none; }
  .playing__bar:nth-child(1) { transform: scaleY(0.5); }
  .playing__bar:nth-child(2) { transform: scaleY(1); }
  .playing__bar:nth-child(3) { transform: scaleY(0.7); }
}

/* La pantalla de espera del teléfono: lo mismo que la sala ve en la pared,
   del tamaño de una mano. */
.espera { display: flex; flex-direction: column; gap: var(--space-3); }
.espera__titulo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
.espera__sala {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-2);
}

/* ============================================================
   Los lobos marinos de la pantalla de espera.
   ============================================================

   Copiado de la identidad visual de IA Humana, con dos cambios: los tres
   corredores fijos se fueron -acá cada lobo lo suelta JavaScript al azar, con
   su pelaje, su tamaño y su velocidad- y la franja pasó a vivir detrás del
   contenido en vez de por encima de todo. Es ambiente, no interfaz: no recibe
   clics y con `prefers-reduced-motion` no existe. */
:root {
  /* paleta base: adulto recién salido del agua */
  --lobo-lomo:    #4f3520;
  --lobo-pelaje:  #64452a;
  --lobo-flanco:  #7d5936;
  --lobo-claro:   #a8825a;
  --lobo-sombra:  #3f2a18;
  --lobo-linea:   #31200f;   /* líneas de dedos en las aletas */
  --lobo-tinta:   #221910;   /* ojo, nariz y boca */
  --lobo-bigote:  #e8dcc8;   /* vibrisas pálidas */
  --lobo-brillo:  0.14;      /* lustre del pelaje mojado */
  --lobo-alto:     80px;
  --lobo-ancho:   170px;
  --lobo-cruce:    26s;
}

.franja-lobos {
  position: fixed;
  inset: auto 0 0 0;
  height: var(--lobo-alto);
  overflow: hidden;
  pointer-events: none;
  /* Detrás de lo que hay que tocar, no encima. */
  z-index: 0;
}
.franja-lobos.arriba { inset: 0 0 auto 0; }

.corredor {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--lobo-ancho);
  will-change: transform;
  /* Una sola pasada, no `infinite`: cada lobo cruza y se va del DOM cuando
     termina. Con `infinite` el `animationend` no llega nunca y la franja se
     iría llenando de lobos que ya no se ven. */
  animation: cruzar var(--lobo-cruce) linear 1 both;
}
@keyframes cruzar {
  from { transform: translateX(calc(-1 * var(--lobo-ancho))); }
  to   { transform: translateX(100vw); }
}
.corredor.regreso { animation-name: regresar; }
@keyframes regresar {
  from { transform: translateX(100vw); }
  to   { transform: translateX(calc(-1 * var(--lobo-ancho))); }
}


  --lobo-lomo: #8a6438; --lobo-pelaje: #a67c4a; --lobo-flanco: #bd955f;
  --lobo-claro: #dcc094; --lobo-sombra: #77552f; --lobo-linea: #5f4326;
  --lobo-brillo: 0.05;
}

/* --- el lobo marino --- */
.lobo {
  display: block;
  overflow: visible;
  transform-origin: bottom center;
}
.tono-lomo     { stop-color: var(--lobo-lomo); }
.tono-medio    { stop-color: var(--lobo-pelaje); }
.tono-flanco   { stop-color: var(--lobo-flanco); }
.brillo-centro { stop-color: #ffffff; stop-opacity: var(--lobo-brillo); }
.brillo-borde  { stop-color: #ffffff; stop-opacity: 0; }
.aleta-cercana path { fill: var(--lobo-pelaje); }
.aleta-lejana path  { fill: var(--lobo-sombra); }
.aleta-cercana .dedos, .aleta-lejana .dedos { fill: none; stroke: var(--lobo-linea); stroke-width: .9; opacity: .4; stroke-linecap: round; }
.vientre       { fill: var(--lobo-claro); opacity: .85; }
.oreja         { fill: var(--lobo-pelaje); }
.ojo, .nariz   { fill: var(--lobo-tinta); }
.chispa        { fill: #ffffff; }
.boca          { fill: none; stroke: var(--lobo-tinta); stroke-width: 1; opacity: .4; stroke-linecap: round; }
.bigotes       { fill: none; stroke: var(--lobo-bigote); stroke-width: .9; stroke-linecap: round; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .franja-lobos { display: none; }
}
/* El contenido del teléfono, por encima de la franja. */
.phone__head, .phone__body, .phone .legal { position: relative; z-index: 1; }

/* Sitio para que la franja no se coma la última fila de emoji. */
.phone .legal { padding-bottom: calc(var(--lobo-alto) + var(--space-4)); }

/* ============================================================
   El panel de superadmin.
   ============================================================ */

.totales { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.total {
  flex: 1 1 8rem;
  padding: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.total__n { display: block; font-size: var(--text-2xl); line-height: 1; }
.total__q {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-3);
}
/* La única señal de venta que hay acá: cuentas que llegaron a su techo. */
.total--señal { border-color: var(--accent-line); background: var(--accent-soft); }

/* La tabla scrollea sola: son diez columnas y la página no debe hacerlo. */
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tabla th, .tabla td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-faint);
  text-align: left;
  vertical-align: top;
}
.tabla th {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-3); font-weight: var(--weight-medium);
  white-space: nowrap;
}
.tabla .num { text-align: right; white-space: nowrap; }
/* Diez columnas no entran en el ancho de una página de lectura, y la que
   importa -el techo y el formulario para subirlo- es la última. */
.page--ancha { max-width: min(96rem, 100%); }
.fila--señal { background: var(--accent-soft); }

.cuota { display: flex; align-items: center; gap: var(--space-2); }
.input--mini { width: 4.5rem; }
.input--nota { width: 11rem; }

/* El enlace a "mis sesiones" en la barra de la cuenta. Va al lado de la
 * marca y no dentro del menú: es el camino que se recorre todo el tiempo. */
.app-header__nav {
  font-size: var(--text-sm); color: var(--text-2);
  text-decoration: none; padding: var(--space-2);
}
.app-header__nav:hover { color: var(--text-1); }

/* El interruptor de la votación, arriba del proyector.
 *
 * Discreto: la sala está mirando esta pantalla y esto es un control de quien
 * presenta, no contenido. Pero el punto tiene color pleno, porque su trabajo
 * es contestar de un vistazo una sola pregunta —¿la sala puede responder?—
 * desde el otro lado de un aula. */
.switch-vivo {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-3); cursor: pointer;
}
.switch-vivo:hover { border-color: var(--border); color: var(--text-1); }
.switch-vivo__punto {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--text-3);
}
/* Verde late, rojo no. Un punto rojo parpadeando en una pared es una alarma;
 * lo que hay que decir es "acá no está pasando nada", que es quieto. */
.switch-vivo--si .switch-vivo__punto {
  background: var(--success);
  animation: coro-pulse 2s var(--ease-in-out) infinite;
}
.switch-vivo--no .switch-vivo__punto { background: var(--danger); }
.switch-vivo--no { color: var(--danger); }