/* ---------- Tipografía institucional (Ancizar Sans, UNAL) ---------- */
@font-face {
  font-family: "Ancizar Sans";
  src: url("assets/fonts/ancizarsans-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ancizar Sans";
  src: url("assets/fonts/ancizarsans-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ancizar Sans";
  src: url("assets/fonts/ancizarsans-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Ancizar Sans";
  src: url("assets/fonts/ancizarsans-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Paleta de juego por defecto: Institucional UNAL (ver settings-data.js
     PALETTES.institucional — estos valores se sobrescriben en tiempo real
     con applyPalette() según la sala, pero deben coincidir con ese default
     para que no haya "parpadeo" de color antes de que cargue JS). */
  --violet: #2f4d16;
  --violet-dark: #1e3410;
  --violet-deeper: #13230a;
  --teal: #0b4644;
  --teal-dark: #073331;
  --amber: #e0b23d;
  --amber-dark: #c68f24;
  --rose: #203f83;
  --white: #ffffff;
  --offwhite: #f6f3fa;
  --ink: #241536;
  --muted: #6e6580;
  --muted-light: #9c93ad;
  --good: #1f9d55;
  --bad: #c0392b;
  --shadow: 0 12px 30px rgba(35, 12, 51, 0.25);

  /* ---------- Identidad institucional UNAL / Bibliotecas ---------- */
  --unal-green: #5a8418;
  --unal-green-dark: #345014;
  --unal-teal-deep: #003c40;
  --unal-blue: #203f83;
  --unal-lime: #94b43b;
  --unal-border: #d9dfe8;

  /* ---------- Claymorphism: fichas reutilizables ---------- */
  --clay-radius-lg: 30px;
  --clay-radius: 22px;
  --clay-radius-sm: 16px;
  --clay-hi: rgba(255, 255, 255, 0.55);
  --clay-hi-strong: rgba(255, 255, 255, 0.85);
  --clay-lo: rgba(10, 4, 16, 0.4);
  --clay-lo-soft: rgba(10, 4, 16, 0.22);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Ancizar Sans", "Calibri", "Segoe UI", Arial, sans-serif;
  background: var(--violet);
  background-image:
    radial-gradient(46vw 46vw at 8% -6%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(38vw 38vw at 104% 12%, rgba(14, 124, 123, 0.28), transparent 62%),
    radial-gradient(50vw 50vw at 50% 118%, rgba(232, 163, 61, 0.16), transparent 60%);
  background-attachment: fixed;
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: "Cambria", Georgia, "Times New Roman", serif;
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.hidden {
  display: none !important;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Header ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--violet-deeper);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px -10px rgba(0, 0, 0, 0.5);
  flex-wrap: wrap;
  gap: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  letter-spacing: 0.3px;
}

.brand-logo {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.9);
  flex: none;
}

.brand .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(232, 163, 61, 0.25);
}

.status-pill {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), transparent), var(--violet-dark);
  color: var(--amber);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow:
    0 6px 14px -6px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px var(--clay-hi),
    inset 0 -4px 8px var(--clay-lo-soft);
}

.platform-badge {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.platform-badge strong {
  color: var(--amber);
}

/* ---------- Barra de control del presentador (siempre visible) ---------- */
.control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 24px;
  background: var(--violet-dark);
  font-size: 13px;
}

.control-bar-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.control-bar-links a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-weight: 600;
}

.control-bar-links a:hover {
  color: var(--white);
  text-decoration: underline;
}

.control-bar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tool-btn {
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: bold;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02));
  color: var(--white);
  box-shadow:
    0 6px 12px -6px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    inset 0 -3px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.1s ease;
}

.tool-btn:hover {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04));
}

.tool-btn:active {
  transform: translateY(1px) scale(0.98);
}

.tool-btn.danger {
  background: linear-gradient(155deg, rgba(255, 130, 110, 0.35), rgba(192, 57, 43, 0.28));
  color: #ffe4de;
}

.tool-btn.danger:hover {
  background: linear-gradient(155deg, rgba(255, 130, 110, 0.5), rgba(192, 57, 43, 0.4));
}

/* ---------- Layout shells ---------- */
main.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  gap: 18px;
}

.card {
  background: linear-gradient(155deg, #ffffff 0%, var(--offwhite) 100%);
  color: var(--ink);
  border-radius: var(--clay-radius-lg);
  box-shadow:
    0 22px 42px -18px rgba(20, 8, 30, 0.5),
    inset 0 2px 3px var(--clay-hi-strong),
    inset 0 -12px 20px rgba(75, 29, 107, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 28px;
}

.btn {
  padding: 14px 30px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: bold;
  background: linear-gradient(155deg, #ffd58a 0%, var(--amber) 55%, var(--amber-dark) 100%);
  color: var(--violet-deeper);
  box-shadow:
    0 12px 24px -8px rgba(232, 163, 61, 0.55),
    inset 0 2px 2px rgba(255, 255, 255, 0.8),
    inset 0 -6px 10px rgba(198, 130, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn:active {
  transform: translateY(2px) scale(0.97);
  box-shadow:
    inset 0 4px 10px rgba(150, 95, 20, 0.5),
    inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

.btn.secondary {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02));
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 8px 18px -8px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -4px 8px rgba(0, 0, 0, 0.2);
}

.btn.ghost {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    inset 0 -3px 6px rgba(0, 0, 0, 0.18);
}

input[type="text"],
input[type="number"] {
  width: 100%;
  max-width: 340px;
  padding: 14px 16px;
  border-radius: var(--clay-radius-sm);
  border: none;
  font-size: 16px;
  background: var(--white);
  color: var(--ink);
  box-shadow:
    inset 0 3px 8px rgba(75, 29, 107, 0.16),
    inset 0 -1px 1px rgba(255, 255, 255, 0.8),
    0 1px 0 rgba(255, 255, 255, 0.5);
}

input[type="text"]:focus,
input[type="number"]:focus {
  outline: none;
  box-shadow:
    inset 0 3px 8px rgba(14, 124, 123, 0.22),
    0 0 0 3px rgba(14, 124, 123, 0.35);
}

/* ---------- Selfie (jugador) ---------- */
.selfie-picker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0;
}

.selfie-preview {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 2px dashed rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  font-size: 22px;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.25);
}

.selfie-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Efectos: rebotes, shake, escalados, brillo ---------- */
@keyframes fx-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
.fx-shake {
  animation: fx-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes fx-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.14); }
  60% { transform: scale(0.96); }
  100% { transform: scale(1); }
}
.fx-pop {
  animation: fx-pop 0.45s ease;
}

@keyframes fx-bounce-in {
  0% { transform: scale(0.3) translateY(30px); opacity: 0; }
  55% { transform: scale(1.08) translateY(-6px); opacity: 1; }
  75% { transform: scale(0.95) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}
.fx-bounce-in {
  animation: fx-bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes fx-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}
.fx-wiggle {
  display: inline-block;
  animation: fx-wiggle 0.7s ease-in-out infinite;
}

@keyframes fx-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(232, 163, 61, 0)); transform: scale(1) rotate(0deg); }
  50% { filter: drop-shadow(0 0 14px rgba(232, 163, 61, 0.85)); transform: scale(1.1) rotate(-3deg); }
}
.fx-glow {
  display: inline-block;
  animation: fx-glow 1.7s ease-in-out infinite;
}

@keyframes fx-timer-pulse {
  0%, 100% { transform: scale(1); color: var(--white); }
  50% { transform: scale(1.18); color: #ff9d8a; }
}
.timer-num.fx-urgent {
  animation: fx-timer-pulse 0.6s ease-in-out infinite;
}
.timer-ring .fg.fx-urgent {
  stroke: #ff9d8a;
}

/* ---------- Globo flotante con el puesto del jugador ---------- */
.rank-bubble {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: rgba(36, 21, 54, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  font-size: 13px;
  font-weight: bold;
  box-shadow:
    0 10px 22px -6px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
  z-index: 40;
  pointer-events: none; /* nunca bloquea los botones que tenga debajo */
  transition: opacity 0.2s ease;
}

.rank-bubble-medal {
  font-size: 15px;
}

@media (max-width: 480px) {
  .rank-bubble {
    bottom: 10px;
    right: 10px;
    padding: 7px 13px 7px 10px;
    font-size: 12px;
  }
}

/* ---------- Avatares (selfie o iniciales), reutilizable en chips/leaderboard/podio ---------- */
.avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(155deg, #ffd58a, var(--amber));
  color: var(--violet-deeper);
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    inset 0 -2px 4px rgba(198, 130, 42, 0.5);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar.md {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

.avatar.lg {
  width: 56px;
  height: 56px;
  font-size: 18px;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.5),
    0 8px 16px -6px rgba(0, 0, 0, 0.4);
  margin: 0 auto 8px;
}

.room-code-badge {
  font-size: 14px;
  color: var(--muted-light);
  letter-spacing: 0.5px;
}

.room-code-badge strong {
  color: var(--amber);
  font-size: 17px;
  letter-spacing: 3px;
}

/* ---------- Lobby ---------- */
.lobby-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
  max-width: 980px;
}

@media (min-width: 860px) {
  .lobby-grid {
    grid-template-columns: 340px 1fr;
    align-items: center;
    text-align: left;
  }
}

.qr-box {
  background: linear-gradient(155deg, #ffffff, #f2eefa);
  padding: 18px;
  border-radius: var(--clay-radius);
  display: inline-block;
  box-shadow:
    0 20px 36px -16px rgba(20, 8, 30, 0.5),
    inset 0 2px 3px var(--clay-hi-strong),
    inset 0 -8px 16px rgba(75, 29, 107, 0.08);
}

.join-url {
  font-size: 13px;
  color: var(--amber);
  margin-top: 10px;
  word-break: break-all;
}

.player-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  max-height: 260px;
  overflow-y: auto;
}

.chip {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.01)), var(--violet-dark);
  color: var(--white);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow:
    0 8px 16px -8px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    inset 0 -4px 8px rgba(0, 0, 0, 0.25);
}

.player-count {
  font-size: 15px;
  color: var(--amber);
  font-weight: bold;
}

/* ---------- Question ---------- */
.question-wrap {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}

.timer-ring {
  position: relative;
  width: 92px;
  height: 92px;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}

.timer-ring svg {
  transform: rotate(-90deg);
}

.timer-ring circle {
  fill: none;
  stroke-width: 8;
}

.timer-ring .bg {
  stroke: rgba(255, 255, 255, 0.15);
}

.timer-ring .fg {
  stroke: var(--amber);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s linear;
}

.timer-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: bold;
}

.q-text {
  font-size: clamp(20px, 3.4vw, 32px);
  font-weight: bold;
  max-width: 880px;
  line-height: 1.3;
}

.options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
  max-width: 880px;
}

@media (min-width: 700px) {
  .options-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.opt-btn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  border-radius: var(--clay-radius-sm);
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 12px 24px -10px rgba(0, 0, 0, 0.55),
    inset 0 2px 2px rgba(255, 255, 255, 0.35),
    inset 0 -8px 14px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s ease, filter 0.15s ease;
}

/* Brillo superior independiente del color de fondo (que se fija por JS),
   para que el efecto "clay" funcione sin importar cuál opción sea. */
.opt-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}

.opt-btn:active {
  transform: scale(0.98);
}

.opt-btn.dim {
  filter: grayscale(0.5) brightness(0.6);
}

.opt-btn.correct-flash {
  outline: 4px solid var(--good);
}

.opt-btn.wrong-flash {
  outline: 4px solid var(--bad);
}

.shape {
  width: 26px;
  height: 26px;
  flex: none;
  background: rgba(255, 255, 255, 0.92);
  position: relative;
  z-index: 1;
}

.shape.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.shape.diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.shape.circle {
  border-radius: 50%;
}

.shape.square {
  border-radius: 5px;
}

.answer-progress {
  font-size: 14px;
  color: var(--amber);
  font-weight: bold;
}

/* ---------- Reveal ---------- */
.reveal-banner {
  font-size: clamp(22px, 4vw, 34px);
  font-weight: bold;
}

.reveal-banner.correct {
  color: var(--good);
}

.reveal-banner.wrong {
  color: #ff9d8a;
}

.stat-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 720px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.12)), rgba(0, 0, 0, 0.18);
  padding: 8px 14px;
  border-radius: var(--clay-radius-sm);
  box-shadow:
    0 8px 16px -10px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.12);
}

.stat-bar-row .shape {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.stat-bar-track {
  flex: 1;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  height: 26px;
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

.stat-bar-fill {
  height: 100%;
  border-radius: 8px;
  transition: width 0.5s ease;
}

.stat-bar-label {
  width: 260px;
  text-align: left;
  font-size: 13px;
  flex: none;
}

.stat-bar-count {
  width: 34px;
  text-align: right;
  font-size: 13px;
  font-weight: bold;
  flex: none;
}

/* ---------- Leaderboard ---------- */
.leaderboard-list {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lb-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01)), var(--violet-dark);
  padding: 12px 18px;
  border-radius: var(--clay-radius-sm);
  box-shadow:
    0 10px 18px -10px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.18),
    inset 0 -5px 10px rgba(0, 0, 0, 0.22);
}

/* Cuando el ranking puede tener hasta ~200 personas (resultados finales),
   se limita la altura y se deja scroll en vez de estirar toda la página. */
.leaderboard-list.scrollable {
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 6px;
}

.lb-row.me {
  outline: 3px solid var(--amber);
}

.lb-rank {
  width: 30px;
  font-weight: bold;
  color: var(--amber);
}

.lb-name {
  flex: 1;
  text-align: left;
  font-weight: 600;
}

.lb-inst {
  font-size: 11px;
  color: var(--muted-light);
  display: block;
}

.lb-score {
  font-weight: bold;
}

/* ---------- Podium ---------- */
.podium {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: 10px;
}

.podium .step {
  width: 140px;
  border-radius: var(--clay-radius-sm) var(--clay-radius-sm) 0 0;
  padding: 14px 10px;
  color: var(--white);
  text-align: center;
  box-shadow:
    0 -2px 0 rgba(255, 255, 255, 0.15) inset,
    0 12px 24px -12px rgba(0, 0, 0, 0.55);
}

.podium .step .name {
  font-weight: bold;
  font-size: 14px;
}

.podium .step .inst {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

.podium .step .score {
  margin-top: 6px;
  font-size: 13px;
  font-weight: bold;
  color: var(--amber);
}

.podium .p1 {
  height: 190px;
  background: linear-gradient(155deg, #f4c26e, var(--amber-dark));
  order: 2;
}

.podium .p2 {
  height: 150px;
  background: linear-gradient(155deg, #8a5bb0, var(--violet-dark));
  order: 1;
}

.podium .p3 {
  height: 120px;
  background: linear-gradient(155deg, #1fa9a7, var(--teal-dark));
  order: 3;
}

.subtle {
  color: var(--muted-light);
  font-size: 13px;
}

.footer-note {
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.footer-note.credit {
  padding-top: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.footer-note.credit strong {
  color: rgba(232, 163, 61, 0.85);
}

/* ---------- Player-specific ---------- */
.locked-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-radius: var(--clay-radius-sm);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01)), var(--violet-dark);
  font-weight: 600;
  box-shadow:
    0 10px 20px -10px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    inset 0 -5px 10px rgba(0, 0, 0, 0.22);
}

.score-badge {
  background: linear-gradient(155deg, #ffd58a, var(--amber));
  color: var(--violet-deeper);
  font-weight: bold;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  box-shadow:
    0 6px 12px -6px rgba(232, 163, 61, 0.55),
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    inset 0 -3px 6px rgba(198, 130, 42, 0.5);
}

/* ---------- Panel de gestión de preguntas ---------- */
.admin-wrap {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 24px 60px;
  text-align: left;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.admin-header h1 {
  font-size: 26px;
  color: var(--white);
}

.q-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.q-card {
  background: linear-gradient(155deg, #ffffff 0%, var(--offwhite) 100%);
  color: var(--ink);
  border-radius: var(--clay-radius);
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow:
    0 16px 30px -18px rgba(20, 8, 30, 0.45),
    inset 0 2px 3px var(--clay-hi-strong),
    inset 0 -8px 14px rgba(75, 29, 107, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.q-card .q-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(155deg, #6b3796, var(--violet));
  color: var(--white);
  font-weight: bold;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -3px 6px rgba(0, 0, 0, 0.3);
}

.q-card .q-body {
  flex: 1;
  min-width: 0;
}

.q-card .q-text {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
}

.q-card .q-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.q-opt-chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(75, 29, 107, 0.08);
  color: var(--ink);
}

.q-opt-chip.correct {
  background: var(--good);
  color: var(--white);
  font-weight: bold;
}

.q-meta {
  font-size: 11.5px;
  color: var(--muted);
}

.q-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: none;
}

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(155deg, #ffffff, #f0eaf8);
  color: var(--ink);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 10px -4px rgba(75, 29, 107, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 -3px 6px rgba(75, 29, 107, 0.10);
}

.icon-btn:hover {
  background: linear-gradient(155deg, #ffffff, #e7ddf2);
}

.icon-btn.danger {
  color: var(--bad);
}

.empty-state {
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  padding: 40px 20px;
}

/* Modal de edición */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 8, 30, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.modal-card {
  background: linear-gradient(155deg, #ffffff 0%, var(--offwhite) 100%);
  color: var(--ink);
  border-radius: var(--clay-radius-lg);
  padding: 28px;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  text-align: left;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.5),
    inset 0 2px 3px var(--clay-hi-strong);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.modal-card h2 {
  font-size: 20px;
  margin-bottom: 4px;
}

.form-field {
  margin-top: 16px;
}

.form-field label {
  display: block;
  font-size: 12.5px;
  font-weight: bold;
  color: var(--muted);
  margin-bottom: 6px;
}

.form-field textarea,
.form-field input[type="text"],
.form-field input[type="number"] {
  width: 100%;
  max-width: none;
  padding: 10px 12px;
  border-radius: var(--clay-radius-sm);
  border: none;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: var(--white);
  box-shadow:
    inset 0 2px 6px rgba(75, 29, 107, 0.14),
    inset 0 -1px 1px rgba(255, 255, 255, 0.8);
}

.form-field textarea {
  resize: vertical;
  min-height: 54px;
}

.option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.option-row input[type="radio"] {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--teal);
}

.option-row input[type="text"] {
  flex: 1;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.form-error {
  margin-top: 14px;
  color: var(--bad);
  font-size: 13px;
}

/* ---------- Panel de configuración del evento ---------- */
.config-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

@media (min-width: 860px) {
  .config-grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }
}

.config-form {
  background: linear-gradient(155deg, #ffffff 0%, var(--offwhite) 100%);
  color: var(--ink);
  border-radius: var(--clay-radius-lg);
  padding: 24px;
  box-shadow:
    0 22px 42px -18px rgba(20, 8, 30, 0.5),
    inset 0 2px 3px var(--clay-hi-strong),
    inset 0 -12px 20px rgba(75, 29, 107, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.logo-picker {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.logo-preview {
  width: 84px;
  height: 84px;
  border-radius: var(--clay-radius-sm);
  background: rgba(75, 29, 107, 0.08);
  border: 2px dashed #ddd3e8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
}

.logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.logo-actions .btn {
  font-size: 13px;
  padding: 10px 18px;
  text-align: center;
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 6px;
}

.palette-swatch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--clay-radius-sm);
  border: none;
  background: linear-gradient(155deg, #ffffff, #f2eefa);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  box-shadow:
    0 8px 16px -10px rgba(75, 29, 107, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 -3px 6px rgba(75, 29, 107, 0.08);
  transition: transform 0.1s ease;
}

.palette-swatch:active {
  transform: scale(0.97);
}

.palette-swatch.selected {
  box-shadow:
    0 0 0 3px var(--teal),
    0 8px 16px -10px rgba(14, 124, 123, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

.swatch-dots {
  display: flex;
  gap: 3px;
  flex: none;
}

.swatch-dots span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -2px 3px rgba(0, 0, 0, 0.25);
}

.config-preview {
  position: sticky;
  top: 20px;
}

.preview-card {
  border-radius: var(--clay-radius-lg);
  overflow: hidden;
  box-shadow: 0 22px 42px -18px rgba(20, 8, 30, 0.5);
}

.preview-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--pv-violet-deeper, var(--violet-deeper));
  color: var(--white);
  font-size: 14px;
}

.preview-topbar .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pv-amber, var(--amber));
  flex: none;
}

.preview-logo {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.9);
  flex: none;
}

.preview-body {
  background: var(--pv-violet, var(--violet));
  padding: 30px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.preview-body .btn {
  background: var(--pv-amber, var(--amber));
  color: var(--pv-violet-deeper, var(--violet-deeper));
}

.preview-swatches {
  display: flex;
  gap: 8px;
}

.preview-swatches span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.preview-footer {
  background: var(--pv-violet-deeper, var(--violet-deeper));
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  text-align: center;
  padding: 10px;
}

/* ============================================================================
   LANDING (index.html): preloader "Quiz Play" + elección presentador/participante
   ============================================================================ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--violet);
  background-image:
    radial-gradient(50vw 50vw at 15% 10%, rgba(255, 255, 255, 0.12), transparent 60%),
    radial-gradient(45vw 45vw at 100% 100%, rgba(14, 124, 123, 0.3), transparent 60%);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 46px 56px;
  border-radius: var(--clay-radius-lg);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02));
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.5),
    inset 0 2px 3px rgba(255, 255, 255, 0.3),
    inset 0 -14px 24px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.preloader-word {
  font-family: "Cambria", Georgia, serif;
  font-size: clamp(34px, 6vw, 54px);
  font-weight: bold;
  color: var(--white);
  letter-spacing: 0.5px;
  animation: fx-glow 2.1s ease-in-out infinite;
}

.preloader-caption {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.preloader-caption strong {
  color: var(--amber);
}

.preloader-dots {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.preloader-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
  animation: fx-preloader-bounce 1s ease-in-out infinite;
}

.preloader-dots span:nth-child(2) { animation-delay: 0.15s; }
.preloader-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes fx-preloader-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-9px); opacity: 1; }
}

.landing-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px 24px;
  gap: 34px;
}

.landing-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.landing-hero .wordmark {
  font-family: "Cambria", Georgia, serif;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: bold;
}

.landing-hero .wordmark .accent {
  color: var(--amber);
}

.landing-hero p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  max-width: 440px;
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
  max-width: 980px;
}

@media (min-width: 820px) {
  .split-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.path-card {
  background: linear-gradient(155deg, #ffffff 0%, var(--offwhite) 100%);
  color: var(--ink);
  border-radius: var(--clay-radius-lg);
  padding: 30px 26px;
  text-align: left;
  box-shadow:
    0 26px 50px -20px rgba(20, 8, 30, 0.55),
    inset 0 2px 3px var(--clay-hi-strong),
    inset 0 -14px 22px rgba(75, 29, 107, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.path-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: linear-gradient(155deg, #ffd58a, var(--amber));
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.7),
    inset 0 -4px 8px rgba(198, 130, 42, 0.55);
}

.path-card.participant .path-card-icon {
  background: linear-gradient(155deg, #4fd8c8, var(--teal));
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.6),
    inset 0 -4px 8px rgba(9, 84, 83, 0.55);
}

.path-card h2 {
  font-size: 21px;
}

.path-card p.desc {
  color: var(--muted);
  font-size: 13.5px;
  margin: 0;
}

.wizard-progress {
  display: flex;
  gap: 6px;
  margin: 4px 0 2px;
}

.wizard-dot {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(75, 29, 107, 0.12);
  box-shadow: inset 0 1px 2px rgba(75, 29, 107, 0.15);
}

.wizard-dot.done {
  background: linear-gradient(155deg, #4fd8c8, var(--teal));
}

.wizard-dot.active {
  background: linear-gradient(155deg, #ffd58a, var(--amber));
}

.step-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.code-input {
  width: 100%;
  max-width: none;
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 8px;
  text-transform: uppercase;
  padding: 16px 10px;
}

.step-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}

.step-actions .btn.ghost {
  color: var(--ink);
  background: rgba(75, 29, 107, 0.08);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.step-error {
  color: var(--bad);
  font-size: 13px;
  min-height: 16px;
}

.step-success-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(31, 157, 85, 0.12);
  color: var(--good);
  font-size: 12.5px;
  font-weight: bold;
}

.landing-footer {
  text-align: center;
  padding: 10px 14px 26px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.landing-footer strong {
  color: var(--amber);
}

/* ============================================================================
   IDENTIDAD INSTITUCIONAL — franja superior e inferior con la marca de
   Bibliotecas UNAL, presente en todas las páginas (index, presentador,
   jugador, preguntas, configuración, política de datos). Estilo claymorphism
   consistente con el resto del juego, en tonos institucionales.
   ============================================================================ */
.unal-topstrip {
  background: linear-gradient(155deg, var(--unal-green) 0%, var(--unal-green-dark) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -6px 14px rgba(0, 0, 0, 0.18),
    0 6px 16px -10px rgba(0, 0, 0, 0.55);
  padding: 10px 20px;
}

.unal-topstrip-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.unal-shield {
  width: 34px;
  height: 34px;
  flex: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.unal-lockup {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  color: #fff;
}

.unal-lockup-line1 {
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.3px;
}

.unal-lockup-line2 {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

.unal-topstrip-links {
  margin-left: auto;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.unal-topstrip-links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
}

.unal-topstrip-links a:hover {
  color: #fff;
  text-decoration: underline;
}

.unal-footer-strip {
  background: var(--unal-teal-deep);
  padding: 16px 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.unal-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.unal-footer-inner a {
  color: #cfe6a8;
  font-weight: 700;
  text-decoration: none;
}

.unal-footer-inner a:hover {
  text-decoration: underline;
}

/* ---------- Página de política de datos ---------- */
.policy-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 22px 60px;
  color: #fff;
}

.policy-shell h1 {
  font-size: clamp(24px, 4vw, 32px);
  margin-bottom: 6px;
}

.policy-shell .subtle-lead {
  color: rgba(255, 255, 255, 0.72);
  margin-top: 0;
  margin-bottom: 26px;
  font-size: 14px;
}

.policy-card {
  background: linear-gradient(155deg, #ffffff 0%, var(--offwhite) 100%);
  color: var(--ink);
  border-radius: var(--clay-radius-lg);
  box-shadow:
    0 22px 42px -18px rgba(20, 8, 30, 0.5),
    inset 0 2px 3px var(--clay-hi-strong),
    inset 0 -12px 20px rgba(75, 29, 107, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 28px 30px;
  margin-bottom: 20px;
}

.policy-card h2 {
  font-size: 17px;
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.policy-card p,
.policy-card li {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

.policy-card ul {
  margin: 8px 0;
  padding-left: 20px;
}

.policy-card.keep {
  border-left: 6px solid var(--unal-green);
}

.policy-card.erase {
  border-left: 6px solid var(--bad);
}

.policy-back {
  display: inline-block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  text-decoration: none;
  font-size: 13.5px;
}

.policy-back:hover {
  text-decoration: underline;
}

/* ============================================================================
   PORTADA: alternar "Soy participante" (por defecto) / "Soy presentador"
   ============================================================================ */
.split-grid.single-mode {
  grid-template-columns: 1fr;
  max-width: 540px;
  margin: 0 auto;
}

.unal-topstrip-btn {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.unal-topstrip-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.link-back {
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  align-self: flex-start;
}

.link-back:hover {
  color: var(--ink);
}

/* ============================================================================
   GLOBOS DE AYUDA (onboarding) — presentador.html, preguntas.html,
   configuracion.html. Estilo "nota adhesiva" claymorphism, con colita
   apuntando hacia arriba (colócalos justo debajo de lo que señalan).
   ============================================================================ */
.coach-bubble {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: linear-gradient(155deg, #fffdf3 0%, #fff3c4 100%);
  border: 1px solid rgba(198, 130, 42, 0.35);
  border-radius: var(--clay-radius-sm);
  padding: 12px 34px 12px 14px;
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.45;
  color: #5c4308;
  text-align: left;
  box-shadow:
    0 10px 20px -12px rgba(150, 95, 20, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.7);
}

.coach-bubble::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 22px;
  width: 13px;
  height: 13px;
  background: #fff3c4;
  border-left: 1px solid rgba(198, 130, 42, 0.35);
  border-top: 1px solid rgba(198, 130, 42, 0.35);
  transform: rotate(45deg);
}

.coach-bubble strong {
  color: #8a5a00;
}

.coach-bubble-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: #a3792a;
  cursor: pointer;
  padding: 6px;
}

.coach-bubble-close:hover {
  color: #5c4308;
}

.field-hint {
  margin-top: 6px;
  margin-bottom: 0;
}

/* ==========================================================
   BEGIN QUIZPLAY V2 INTERFAZ
   ========================================================== */

.presenter-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 22px;

  background:
    rgba(13, 38, 26, .92);

  backdrop-filter:
    blur(8px);
}

.presenter-auth-card {
  width:
    min(430px, 94vw);

  display: flex;
  flex-direction: column;
  gap: 16px;

  padding: 30px;

  border-radius: 24px;

  background:
    #fff;

  color:
    #183325;

  box-shadow:
    0 28px 80px
    rgba(0, 0, 0, .30);
}

.presenter-auth-card label {
  display: flex;
  flex-direction: column;
  gap: 7px;

  font-weight: 700;
}

.presenter-auth-card input {
  padding:
    13px 14px;

  border:
    1px solid #b9c5b7;

  border-radius:
    12px;

  font-size:
    16px;
}

.presenter-auth-icon {
  font-size:
    34px;
}

.quizplay-presenter-v2 #app {
  padding-left:
    260px;
}

.presenter-question-sidebar {
  position: fixed;

  top: 171px;
  left: 0;
  bottom: 0;

  z-index: 50;

  width: 250px;

  display: flex;
  flex-direction: column;

  background:
    linear-gradient(
      180deg,
      rgba(18, 67, 48, .98),
      rgba(12, 48, 35, .98)
    );

  border-right:
    1px solid
    rgba(255, 255, 255, .12);

  box-shadow:
    8px 0 24px
    rgba(0, 0, 0, .12);
}

.presenter-question-sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 15px;

  color:
    #fff;

  border-bottom:
    1px solid
    rgba(255, 255, 255, .12);
}

.presenter-question-list {
  overflow-y: auto;

  padding: 10px;
}

.presenter-qnav-item {
  width: 100%;

  display: grid;

  grid-template-columns:
    32px 1fr auto;

  align-items: center;

  gap: 8px;

  margin-bottom: 7px;
  padding: 10px;

  border: 0;

  border-radius: 11px;

  text-align: left;

  color:
    #fff;

  background:
    rgba(255, 255, 255, .07);

  cursor: pointer;
}

.presenter-qnav-item:hover {
  background:
    rgba(255, 255, 255, .15);
}

.presenter-qnav-item.active {
  color:
    #15281d;

  background:
    #f0b842;

  box-shadow:
    0 0 0 2px
    rgba(255, 255, 255, .22);
}

.presenter-qnav-item.done:not(.active) {
  background:
    rgba(58, 160, 103, .25);
}

.presenter-qnav-number {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border-radius:
    50%;

  background:
    rgba(255, 255, 255, .15);

  font-weight:
    800;
}

.presenter-qnav-text {
  overflow: hidden;

  font-size:
    12px;

  line-height:
    1.25;
}

.presenter-qnav-answers {
  font-size:
    11px;

  opacity:
    .75;
}

.timer-paused {
  color:
    #f0b842 !important;
}

.participant-pause-notice {
  margin:
    12px auto 18px;

  padding:
    12px 18px;

  border-radius:
    14px;

  background:
    rgba(240, 184, 66, .20);

  border:
    1px solid
    rgba(240, 184, 66, .55);

  font-weight:
    800;
}

.final-report-actions {
  display: flex;
  justify-content: center;

  margin:
    24px 0 12px;
}

@media (
  max-width: 1000px
) {

  .quizplay-presenter-v2 #app {
    padding-left:
      0;
  }

  .presenter-question-sidebar {
    position: relative;

    top: auto;
    left: auto;
    bottom: auto;

    width: 100%;

    max-height:
      240px;
  }

  .presenter-question-list {
    display: grid;

    grid-template-columns:
      repeat(
        auto-fit,
        minmax(170px, 1fr)
      );
  }
}

/* ==========================================================
   END QUIZPLAY V2 INTERFAZ
   ========================================================== */