/* ── Google Font ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── Design Tokens (fork de forseti-pwa/css/main.css, paleta KVASIR) ── */
:root {
  --orchid:      #6A1B9A;
  --orchid-soft: #8E24AA;
  --fuchsia:     #C2185B;
  --magenta:     #E91E63;
  --orange:      #FF5722;
  --yellow:      #FFEB3B;
  --cyan:        #00E5FF;
  --cosmic:      #1A1A2E;
  --gray:        #212121;
  --gray-mid:    #6B6B6B;
  --gray-light:  #F7F7F9;
  --gray-btn-bg: #E0E0E6;
  --border:      #EBEBF0;
  --white:       #FFFFFF;
  --danger:      #D32F2F;
  --success:     #2E7D32;

  /* KVASIR es el ángulo cálido que Forseti no explota (orchid→fuchsia, más corporativo) */
  --grad-primary: linear-gradient(135deg, var(--orchid) 0%, var(--fuchsia) 100%);
  --grad-kvasir:  linear-gradient(135deg, var(--fuchsia) 0%, var(--orange) 55%, var(--yellow) 100%);

  --shadow-1:      0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --shadow-2:      0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-3:      0 8px 32px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.08);
  --shadow-orchid: 0 8px 24px rgba(106,27,154,.28);

  --r-xs:   6px;
  --r-s:    10px;
  --r-m:    14px;
  --r-l:    20px;
  --r-xl:   28px;
  --r-full: 999px;

  --safe-b:   env(safe-area-inset-bottom, 0px);
  --safe-t:   env(safe-area-inset-top, 0px);
  --page-max: 720px;

  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-med:  250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 380ms cubic-bezier(0.4, 0, 0.2, 1);

  --surface:     #FFFFFF;
  --surface-alt: #F7F5FC;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 8% 0%, rgba(194,24,91,.06) 0%, transparent 45%),
    radial-gradient(circle at 100% 15%, rgba(255,87,34,.06) 0%, transparent 40%),
    var(--gray-light);
  background-attachment: fixed;
  color: var(--gray);
  -webkit-font-smoothing: antialiased;
}
h1, h2 { font-weight: 800; margin: 0; }
.hidden { display: none !important; }
.text-muted { color: var(--gray-mid); font-size: .9rem; }

.form-group { margin-bottom: .9rem; }
.form-label { display: block; font-size: .85rem; margin-bottom: .3rem; font-weight: 600; }
.form-input {
  width: 100%; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: var(--r-s);
  font-size: 1rem; font-family: inherit; transition: border-color var(--t-fast);
}
.form-input:focus { outline: none; border-color: var(--orchid); box-shadow: 0 0 0 3px rgba(106,27,154,.18); }
.form-input-small { width: 5rem; margin-left: .4rem; }
.form-error { color: var(--danger); font-size: .9rem; min-height: 1.2rem; }
.auth-error { color: var(--danger); font-size: .9rem; min-height: 1.2rem; margin-top: .5rem; }

.btn {
  border: none; border-radius: var(--r-full); padding: .7rem 1.5rem; font-weight: 700;
  font-size: .95rem; cursor: pointer; font-family: inherit;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--grad-kvasir); color: var(--cosmic); box-shadow: var(--shadow-2); }
.btn-primary:hover { box-shadow: var(--shadow-3); transform: translateY(-1px); }
.btn-secondary { background: var(--gray-btn-bg); color: var(--gray); }
.btn-secondary:hover { background: var(--border); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #B71C1C; box-shadow: var(--shadow-2); }
.btn-ghost { background: transparent; color: var(--orchid); border: 1px solid var(--orchid); }
.btn-ghost:hover { background: var(--orchid); color: white; }
.btn-small { padding: .35rem .9rem; font-size: .8rem; }

/* Auth */
.auth-view {
  max-width: 380px; margin: 4rem auto; padding: 2.2rem; background: var(--surface);
  border-radius: var(--r-l); box-shadow: var(--shadow-2);
}
.auth-logo { display: block; width: 100%; max-width: 160px; height: auto; margin: 0 auto 1rem; }
.auth-title {
  font-size: 2.4rem; font-weight: 800; margin: 0;
  background: var(--grad-kvasir); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-subtitle { margin: 0 0 1.5rem; color: var(--gray-mid); }
.auth-tabs { display: flex; gap: .5rem; margin-bottom: 1.2rem; }
.auth-tab {
  flex: 1; padding: .6rem; border: none; background: var(--gray-light); border-radius: var(--r-s);
  cursor: pointer; font-weight: 700; transition: background var(--t-fast), color var(--t-fast);
}
.auth-tab:hover:not(.active) { background: var(--border); }
.auth-tab.active { background: var(--orchid); color: white; }

/* Layout general */
.page { max-width: var(--page-max); margin: 0 auto; padding: 2rem 1.5rem; }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; gap: 1rem; }
.page-header-actions { display: flex; gap: .5rem; }
.link-volver { font-size: .85rem; color: var(--orchid); text-decoration: none; font-weight: 600; }

/* ── Shell (hamburguesa + sidebar) — solo pantallas autenticadas del panel ── */
.shell-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: .8rem;
  height: calc(56px + var(--safe-t)); padding: var(--safe-t) 1rem 0;
  background: var(--surface); box-shadow: var(--shadow-1);
}
.shell-hamburger {
  width: 40px; height: 40px; border: none; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  color: var(--gray);
}
.shell-hamburger:hover { color: var(--text); }
.shell-wordmark {
  font-weight: 800; font-size: 1.1rem;
  background: var(--grad-kvasir); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.shell-wordmark-sidebar { display: none; width: 100%; max-width: 170px; height: auto; }

.shell-backdrop {
  position: fixed; inset: 0; z-index: 25; background: rgba(26,26,46,.45);
  opacity: 0; pointer-events: none; transition: opacity var(--t-med);
}
.shell-backdrop.is-open { opacity: 1; pointer-events: auto; }

.shell-sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; width: 260px;
  background: var(--surface); box-shadow: var(--shadow-3);
  padding: calc(1.5rem + var(--safe-t)) 1.2rem 1.5rem;
  display: flex; flex-direction: column; gap: 2rem;
  transform: translateX(-100%); transition: transform var(--t-med);
}
.shell-sidebar.is-open { transform: translateX(0); }
.shell-links { display: flex; flex-direction: column; gap: .3rem; }
.shell-links-secundarios { margin-top: auto; border-top: 1px solid var(--border); padding-top: 1rem; }
.shell-link {
  padding: .7rem .8rem; border-radius: var(--r-s); font-weight: 600; font-size: .95rem;
  color: var(--gray); text-decoration: none; border: none; background: transparent;
  text-align: left; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: .6rem;
}
.shell-link-icon { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
.shell-link:hover:not(.is-active) { background: var(--gray-light); }
.shell-link.is-active { background: var(--gray-light); color: var(--orchid); }
.shell-link.is-active .shell-link-icon { filter: none; }
.shell-link-salir { color: var(--danger); }
.shell-link-salir:hover { background: #FDEDED; }

.shell-content { padding-top: calc(56px + var(--safe-t)); }

@media (min-width: 768px) {
  .shell-topbar { left: 260px; }
  .shell-backdrop { display: none; }
  .shell-wordmark:not(.shell-wordmark-sidebar) { display: none; }
  .shell-wordmark-sidebar { display: block; margin-bottom: .5rem; }
  .shell-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-3); border-right: none; }
  .shell-sidebar.is-open { transform: translateX(0); box-shadow: none; border-right: 1px solid var(--border); }
  .shell-content { margin-left: 260px; }
}

/* Landing pública — elegir organizador o jugador */
.landing-view {
  max-width: 420px; margin: 0 auto; padding: 4rem 1.5rem; text-align: center;
  min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 1rem;
  padding-top: calc(4rem + var(--safe-t)); padding-bottom: calc(1.5rem + var(--safe-b));
}
.landing-logo {
  width: 100%; max-width: 160px; height: auto; margin: 0 auto .5rem;
  border-radius: var(--r-l); mix-blend-mode: multiply;
}
.landing-titulo {
  font-size: 3rem; font-weight: 800; margin: 0;
  background: var(--grad-kvasir); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.landing-tagline { color: var(--gray-mid); margin: 0 0 1rem; }
.landing-botones { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1rem; }
.landing-botones .btn { width: 100%; }

/* Footer links landing */
.landing-footer-links {
  display: flex; justify-content: center; gap: 1.2rem; margin-top: 2rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.landing-footer-links a { font-size: .75rem; color: var(--gray-mid); text-decoration: none; }
.landing-footer-links a:hover { color: var(--orchid); }

/* Páginas legales */
.legal-page { max-width: 680px; margin: 0 auto; padding: 2rem 1.5rem; }
.legal-page h1 { font-size: 1.6rem; margin-bottom: .3rem; }
.legal-page h2 { font-size: 1.1rem; margin-top: 1.8rem; color: var(--orchid); }
.legal-page h3 { font-size: .95rem; margin-top: 1.2rem; }
.legal-page p, .legal-page li { font-size: .88rem; line-height: 1.6; color: var(--gray-dark); }
.legal-page ul, .legal-page ol { padding-left: 1.2rem; }
.legal-page li { margin-bottom: .3rem; }
.legal-page a { color: var(--orchid); }
.legal-page hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
.legal-page code { font-size: .82rem; background: var(--surface); padding: .1rem .4rem; border-radius: var(--r-s); }
.legal-table {
  width: 100%; border-collapse: collapse; margin: .8rem 0; font-size: .85rem;
}
.legal-table th, .legal-table td {
  padding: .5rem .7rem; border: 1px solid var(--border); text-align: left;
}
.legal-table th { background: var(--surface); font-weight: 600; }
.legal-table td { color: var(--gray-dark); }

/* Editor de kvasir */
.descripcion-editor { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 1.5rem; }
.descripcion-editor .form-input { flex: 1; resize: vertical; }

/* Mis kvasires */
.crear-kvasir { display: flex; gap: .6rem; margin-bottom: 1.5rem; }
.crear-kvasir .form-input { flex: 1; }
.lista-kvasires { display: flex; flex-direction: column; gap: .8rem; }
.kvasir-card {
  background: var(--surface); border-radius: var(--r-m); padding: 1rem 1.2rem; display: flex;
  flex-direction: column; gap: .75rem; box-shadow: var(--shadow-1);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.kvasir-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.kvasir-card-titulo { display: flex; align-items: center; gap: .8rem; min-width: 0; flex: 1; }
.kvasir-card-titulo strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kvasir-card-avatar {
  width: 44px; height: 44px; border-radius: var(--r-s); background: var(--grad-kvasir); color: var(--cosmic);
  font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kvasir-card-actions {
  display: flex; gap: .5rem; flex-shrink: 0; justify-content: flex-end;
  border-top: 1px solid var(--border, rgba(0,0,0,.08)); padding-top: .75rem;
}
.kvasir-card-badges { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .35rem; }
.kvasir-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .15rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 600;
  background: var(--bg-card, #f8f9fa); color: var(--gray-mid); border: 1px solid var(--border, rgba(0,0,0,.08));
}
.kvasir-badge-opcion_multiple { background: #ede7f6; color: #5e35b1; border-color: #d1c4e9; }
.kvasir-badge-verdadero_falso { background: #e8f5e9; color: #2e7d32; border-color: #c8e6c9; }
.kvasir-badge-casual { background: #fce4ec; color: #c2185b; border-color: #f8bbd0; }
.estado-vacio { text-align: center; padding: 2.5rem 1rem; }
.estado-vacio-icono { font-size: 2.4rem; margin-bottom: .5rem; }

/* Laboratorio de trivias */
.lab-acciones { display: flex; gap: .6rem; align-items: stretch; margin-bottom: 1.5rem; }
.lab-acciones .crear-kvasir { margin-bottom: 0; flex: 1; }
.lab-btn-combinar { white-space: nowrap; }
.lab-emoji-fila { display: flex; align-items: center; gap: .6rem; }
.lab-emoji-label { font-size: .85rem; font-weight: 600; color: var(--gray-mid); flex-shrink: 0; }
.lab-emoji-input { width: 84px; text-align: center; }

@media (max-width: 520px) {
  .lab-acciones { flex-direction: column; }
}

/* Combinador de trivias */
.comb-cargando { text-align: center; color: var(--gray-mid); padding: 2rem; }
.comb-seccion { margin-bottom: 1.4rem; }
.comb-seccion-titulo { font-size: 1.05rem; font-weight: 700; color: var(--cosmic); margin-bottom: .7rem; }
.comb-fuentes { display: flex; flex-direction: column; gap: .5rem; }
.comb-fuente {
  display: flex; align-items: center; gap: .8rem; background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-m); padding: .7rem .9rem; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.comb-fuente:hover { border-color: var(--orchid); }
.comb-fuente:has(input:checked) { border-color: var(--orchid); box-shadow: 0 0 0 1px var(--orchid); }
.comb-fuente-check { width: 18px; height: 18px; accent-color: var(--orchid); flex-shrink: 0; }
.comb-fuente-emoji { font-size: 1.4rem; flex-shrink: 0; }
.comb-fuente-info { display: flex; flex-direction: column; min-width: 0; }
.comb-fuente-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comb-footer { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1.4rem; }
.comb-meta { background: var(--surface); border-radius: var(--r-m); padding: 1rem 1.2rem; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.comb-meta-fila { display: flex; gap: .6rem; align-items: stretch; }
.comb-meta-fila .form-input:last-child { flex: 1; }
.comb-toolbar { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin: .4rem 0 .8rem; }
.comb-lista { display: flex; flex-direction: column; gap: .6rem; }
.comb-pregunta {
  display: flex; gap: .8rem; background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-m); padding: .8rem .9rem; align-items: flex-start;
}
.comb-pregunta:has(input:checked) { border-color: var(--orchid); }
.comb-pregunta-check input { width: 18px; height: 18px; accent-color: var(--orchid); margin-top: .15rem; }
.comb-pregunta-body { flex: 1; min-width: 0; }
.comb-pregunta-tags { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.comb-pregunta-fuente { font-size: .75rem; color: var(--gray-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comb-pregunta-enunciado { font-size: .92rem; font-weight: 600; margin-bottom: .5rem; }
.comb-pregunta-params { display: flex; gap: 1rem; font-size: .8rem; color: var(--gray-mid); }
.comb-pregunta-params label { display: flex; align-items: center; gap: .4rem; }
.comb-pregunta-params .form-input { width: 76px; padding: .3rem .5rem; }

@media (max-width: 520px) {
  .comb-meta-fila { flex-direction: column; }
  .comb-pregunta-params { flex-wrap: wrap; }
}

/* Editor de preguntas */
.lista-preguntas { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 2rem; }
.pregunta-card {
  background: var(--surface); border-radius: var(--r-m); padding: 1rem 1.2rem; box-shadow: var(--shadow-1);
  transition: box-shadow var(--t-fast);
}
.pregunta-card:hover { box-shadow: var(--shadow-2); }
.pregunta-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.opciones-lista { margin: .5rem 0 0; padding-left: 1.2rem; }
.opcion-correcta { color: var(--success); font-weight: 700; }

.pregunta-form { background: var(--surface); border-radius: var(--r-m); padding: 1.2rem; margin-bottom: .8rem; }
.pregunta-form .form-input { margin-bottom: .8rem; }
.opciones-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .8rem; }
.opcion-row { display: flex; align-items: center; gap: .5rem; }
.opcion-row .form-input { margin-bottom: 0; }
.pregunta-form-meta { display: flex; gap: 1.5rem; font-size: .85rem; }

/* ── Ayuda — grilla de tarjetas + vista de detalle (patrón portado de Forseti) ── */
.ayuda-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; margin-top: .3rem; }
.ayuda-card {
  width: 100%; background: var(--surface); border-radius: var(--r-m); padding: .9rem 1rem;
  text-align: left; border: 1.5px solid var(--border); cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: .9rem; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ayuda-card:hover, .ayuda-card:active { border-color: var(--orchid); box-shadow: 0 2px 12px rgba(106,27,154,.10); }
.ayuda-card-icon {
  width: 42px; height: 42px; background: #EDE7F6; color: var(--orchid); border-radius: var(--r-s);
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0;
}
.ayuda-card-body { flex: 1; min-width: 0; }
.ayuda-card-title { font-size: .92rem; font-weight: 700; color: var(--cosmic); }
.ayuda-card-desc { font-size: .8rem; color: var(--gray-mid); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ayuda-card-arrow { color: var(--border); flex-shrink: 0; }
.ayuda-card:hover .ayuda-card-arrow, .ayuda-card:active .ayuda-card-arrow { color: var(--orchid); }

.ayuda-detail-header { margin-bottom: 1.2rem; }
.ayuda-back {
  display: inline-flex; align-items: center; gap: .25rem; color: var(--orchid); font-size: .85rem;
  font-weight: 600; background: none; border: none; cursor: pointer; padding: 0; margin-bottom: 1rem; font-family: inherit;
}
.ayuda-detail-title { display: flex; align-items: center; gap: .75rem; }
.ayuda-detail-icon {
  width: 44px; height: 44px; background: #EDE7F6; color: var(--orchid); border-radius: var(--r-m);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0;
}
.ayuda-detail-title h1 { font-size: 1.3rem; }

.ayuda-section { background: var(--surface); border-radius: var(--r-l); padding: 1.2rem; margin-bottom: 1rem; box-shadow: var(--shadow-1); }
.ayuda-section-title { font-size: 1.05rem; font-weight: 700; color: var(--cosmic); margin-bottom: .9rem; display: flex; align-items: center; gap: .6rem; }
.ayuda-section-title .ayuda-icon {
  width: 32px; height: 32px; border-radius: var(--r-xs); background: #EDE7F6; color: var(--orchid);
  display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.ayuda-section h3 { font-size: .95rem; color: var(--orchid); margin: 1rem 0 .4rem; font-weight: 600; }
.ayuda-section h3:first-child { margin-top: 0; }
.ayuda-section p { margin-bottom: .5rem; font-size: .9rem; line-height: 1.65; }
.ayuda-section p:last-child { margin-bottom: 0; }

.ayuda-steps { list-style: none; padding: 0; counter-reset: step; }
.ayuda-steps li { counter-increment: step; display: flex; gap: .75rem; margin-bottom: .75rem; align-items: flex-start; font-size: .9rem; }
.ayuda-steps li > span { flex: 1; }
.ayuda-steps li::before {
  content: counter(step); min-width: 26px; height: 26px; border-radius: 50%; background: var(--grad-primary);
  color: white; font-weight: 700; font-size: .8rem; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: .05rem;
}

.ayuda-tip, .ayuda-warn { border-radius: var(--r-s); padding: .75rem .9rem; margin: .75rem 0; font-size: .88rem; line-height: 1.6; }
.ayuda-tip  { background: #E8F5E9; border-left: 4px solid var(--success); }
.ayuda-warn { background: #FFF3E0; border-left: 4px solid #F57C00; }
.ayuda-tip strong  { color: var(--success); }
.ayuda-warn strong { color: #F57C00; }

/* Estadísticas */
.estadisticas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-top: 1rem; }
.stat-tile {
  background: var(--surface); border-radius: var(--r-m); padding: 1.4rem 1rem; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: .3rem; text-align: center; transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.stat-tile strong { font-size: 2rem; font-weight: 800; color: var(--orchid); }
.stat-tile span { font-size: .85rem; color: var(--gray-mid); }

/* ── Sesión en vivo — pantalla del host/proyector — energía gameshow ── */
.sesion-host-view {
  max-width: 960px; margin: 0 auto; padding: 3rem 1.5rem;
  text-align: center; min-height: 100dvh;
  background: var(--grad-kvasir);
  display: flex; flex-direction: column; justify-content: center;
}
/* Texto directo sobre --grad-kvasir no tiene un color fijo que contraste en
   todo el rango fucsia→naranja→amarillo del degradado (verificado: negro
   opaco cae a ~2.9:1 contra el naranja y ~1.6:1 contra el fucsia, bajo el
   mínimo WCAG AA de 4.5:1). Se usa el mismo patrón de "placa" sólida oscura
   que ya usan .pin-display y .leaderboard-row — contraste garantizado sin
   depender de en qué punto del degradado caiga cada elemento. */
.sesion-host-view .text-muted {
  display: inline-block; background: var(--cosmic); color: white; font-weight: 600;
  padding: .35rem .9rem; border-radius: var(--r-full);
}
.pin-display {
  font-size: clamp(3.5rem, 12vw, 7rem); font-weight: 800; letter-spacing: .15em; margin: 1.2rem 0;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  background: var(--cosmic); color: white; border-radius: var(--r-l); padding: 1rem 2rem;
  display: inline-block; box-shadow: var(--shadow-3);
}
.contador-jugadores {
  font-size: 1.1rem; font-weight: 700; margin-bottom: 1.5rem; color: white;
  background: var(--cosmic); border-radius: var(--r-full); padding: .5rem 1.1rem;
  display: inline-flex; align-items: center; gap: .5rem;
}
.contador-jugadores::before {
  content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(0,229,255,.3); animation: pulso 1.6s infinite;
}
@keyframes pulso { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.pregunta-enunciado {
  font-size: clamp(1.5rem, 3.6vw, 2.2rem); font-weight: 800; margin: 0 0 1.5rem; color: white;
  background: var(--cosmic); border-radius: var(--r-l); padding: 1.2rem 1.6rem; box-shadow: var(--shadow-3);
}
.pregunta-enunciado-jugador {
  font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 800; margin: 0 0 1.2rem; color: white;
  background: var(--cosmic); border-radius: var(--r-l); padding: 1rem 1.25rem; box-shadow: var(--shadow-3);
  overflow-wrap: break-word;
}

/* Botones "ghost" sobre el degradado necesitan más que borde+texto de color
   — el mismo problema de contraste que el texto plano (ver nota arriba). */
.sesion-host-view .btn-ghost {
  background: var(--cosmic); color: white; border: 1px solid rgba(255,255,255,.35);
}
.sesion-host-acciones { margin-top: 1rem; }
.opciones-host-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.opcion-host {
  padding: 1.4rem 1.2rem; border-radius: var(--r-m); font-weight: 700; font-size: 1.2rem; color: white;
  display: flex; align-items: center; gap: .8rem; box-shadow: var(--shadow-2); min-width: 0;
}
.opcion-host .opcion-forma { flex-shrink: 0; }
.opcion-host span { min-width: 0; overflow-wrap: break-word; }
.opcion-host.opcion-color-0 { background: #E21B3C; }
.opcion-host.opcion-color-1 { background: #1368CE; }
.opcion-host.opcion-color-2 { background: #D89E00; color: var(--cosmic); } /* blanco sobre este dorado cae a ~2.4:1, bajo el mínimo WCAG */
.opcion-host.opcion-color-3 { background: #26890C; }
.opcion-host-correcta { outline: 5px solid var(--yellow); outline-offset: 3px; }

.leaderboard-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; margin-top: 1.5rem; }
.leaderboard-row {
  background: var(--cosmic); color: white; border-radius: var(--r-s); padding: .8rem 1.3rem; display: flex;
  justify-content: space-between; font-weight: 700; box-shadow: var(--shadow-1);
  animation: entrada-leaderboard var(--t-slow) both;
}
.leaderboard-row:nth-child(1) { animation-delay: 0ms; }
.leaderboard-row:nth-child(2) { animation-delay: 60ms; }
.leaderboard-row:nth-child(3) { animation-delay: 120ms; }
.leaderboard-row:nth-child(4) { animation-delay: 180ms; }
.leaderboard-row:nth-child(5) { animation-delay: 240ms; }
.leaderboard-row:nth-child(6) { animation-delay: 300ms; }
@keyframes entrada-leaderboard {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Planes / pricing */
.planes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin-top: 1.5rem; }
.plan-card { background: var(--surface); border-radius: var(--r-l); padding: 1.6rem; box-shadow: var(--shadow-1); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.plan-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.plan-card.plan-destacado { box-shadow: var(--shadow-orchid); }
.plan-card.plan-destacado:hover { box-shadow: var(--shadow-orchid), var(--shadow-2); }
.plan-nombre { font-size: 1.3rem; font-weight: 800; margin-bottom: .3rem; }
.plan-precio { font-size: 1.6rem; font-weight: 800; color: var(--orchid); margin-bottom: 1rem; }
.plan-features { list-style: none; padding: 0; margin: 0; text-align: left; }
.plan-features li { padding: .4rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }

/* ── Unirse — pantalla del jugador ─────────────────────────────────── */
.unirse-view {
  max-width: 380px; margin: 0 auto; padding: 4rem 1.5rem; text-align: center;
  min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: .8rem;
  padding-top: calc(4rem + var(--safe-t)); padding-bottom: calc(1.5rem + var(--safe-b));
}
.unirse-view .btn { width: 100%; }
.unirse-titulo {
  font-size: 2.6rem; font-weight: 800; margin: 0 0 .5rem;
  background: var(--grad-kvasir); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Estados intermedios del jugador (esperando, resultado, final) */
.estado-view {
  max-width: 480px; margin: 0 auto; padding: 3rem 1.5rem; text-align: center;
  min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
}
.estado-texto { font-size: 1.8rem; font-weight: 800; margin: 0 0 .5rem; }
.estado-correcto { color: var(--success); }
.estado-incorrecto { color: var(--danger); }

/* Pregunta del jugador — mobile-first, botones grandes estilo Kahoot */
.jugador-pregunta-view {
  max-width: 600px; margin: 0 auto; padding: 1.5rem; text-align: center;
  min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(1.5rem + var(--safe-t)); padding-bottom: calc(1.5rem + var(--safe-b));
}
.opciones-jugador-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.opcion-jugador {
  min-height: 30dvh; border: none; border-radius: var(--r-l); color: white; font-weight: 800;
  font-size: 1.3rem; cursor: pointer; padding: 1rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.opcion-jugador:active { transform: scale(.96); }
.opcion-jugador:disabled { opacity: .55; }
.opcion-jugador.opcion-color-0 { background: #E21B3C; }
.opcion-jugador.opcion-color-1 { background: #1368CE; }
.opcion-jugador.opcion-color-2 { background: #D89E00; color: var(--cosmic); }
.opcion-jugador.opcion-color-3 { background: #26890C; }

/* ── Modo Casual: votación de culpables (alternativas = jugadores) ── */
.casual-inicial {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: rgba(255,255,255,.22); color: #fff; font-weight: 900; font-size: 1.1rem;
}
.opciones-casual-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.opciones-casual-grid .opcion-jugador { min-height: 7rem; }
.opciones-casual-grid .opcion-host { flex-wrap: wrap; gap: .4rem .8rem; }
.casual-aviso-jugador { font-weight: 600; margin: 0 0 .6rem; }
.casual-resultado-caja {
  background: var(--surface); border-radius: var(--r-m); padding: 1rem; margin: .8rem 0;
  display: flex; flex-direction: column; gap: .5rem; text-align: left;
}
.casual-resultado-ganador { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: #fff; }
.casual-resultado-ganador .casual-inicial { background: var(--yellow); color: var(--cosmic); }
.casual-resultado-votos { margin-left: auto; color: var(--gray-mid); font-size: .8rem; font-weight: 600; white-space: nowrap; }

/* ── Fase de lectura: alternativas bloqueadas hasta que el host desbloquee ── */
.opciones-bloqueadas { filter: grayscale(.9) brightness(.8); pointer-events: none; }
.opcion-jugador.opcion-bloqueada { cursor: not-allowed; }
.bloqueo-aviso {
  margin-top: 1rem; font-weight: 700;
  animation: pulso-bloqueo 1.6s ease-in-out infinite;
}
@keyframes pulso-bloqueo { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

/* ── Timer de la pregunta (jugador y host) ── */
.pregunta-timer {
  display: flex; justify-content: center; align-items: center;
  font-size: 2.4rem; font-weight: 900; margin: 0 0 1rem 0;
  font-variant-numeric: tabular-nums;
}
.pregunta-timer > span {
  background: var(--cosmic); color: white; border-radius: var(--r-m);
  padding: .15rem .8rem; min-width: 4.2rem; text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.pregunta-timer > span.tiempo-critico { background: var(--danger); animation: pulso-bloqueo .5s ease-in-out infinite; }
.bloqueo-aviso-host { margin: 0 0 .6rem 0; font-weight: 700; }

/* ── Host como jugador: widget "Tu respuesta" y badge de participación ── */
.host-respuesta {
  background: var(--cosmic); color: white; border-radius: var(--r-l);
  padding: 1rem 1.2rem; margin: 0 0 1.2rem; text-align: left;
  box-shadow: var(--shadow-2);
}
.host-respuesta-titulo { margin: 0 0 .6rem; font-weight: 700; font-size: .95rem; opacity: .9; }
.host-respuesta-opciones {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.host-respuesta-btn {
  background: rgba(255,255,255,.12); color: white; border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--r-full); padding: .5rem 1rem; font-weight: 700; cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.host-respuesta-btn:hover:not(:disabled) { background: rgba(255,255,255,.24); }
.host-respuesta-btn:disabled { opacity: .45; cursor: not-allowed; }
.host-respuesta-enviada { text-align: center; }
.host-respuesta-ok { margin: 0; font-weight: 800; color: var(--cyan); }
.host-respuesta-excluido { background: rgba(12,10,34,.55); }
.host-respuesta-excluido .text-muted {
  background: transparent; color: rgba(255,255,255,.75); font-weight: 600;
  display: block; text-align: center;
}
.host-badge {
  display: inline-block; margin: 0 0 .8rem; padding: .35rem .9rem; border-radius: var(--r-full);
  font-weight: 700; font-size: .85rem; background: var(--cyan); color: var(--cosmic);
}
.host-badge-excluido { background: rgba(12,10,34,.65); color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.3); }

/* ── "¡Prepárate! 3, 2, 1": overlay del jugador cuando el host desbloquea ── */
.preparate-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  background: rgba(12, 10, 34, .92); backdrop-filter: blur(4px);
  text-align: center; padding: 1.5rem;
  animation: entrada-showdown var(--t-slow) both;
}
.preparate-titulo {
  margin: 0; font-size: 2rem; font-weight: 900; color: white;
  letter-spacing: .02em;
}
.preparate-numero {
  margin: 0; font-size: 7rem; font-weight: 900; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--yellow), #FF9F1C);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pulso-bloqueo 1s ease-in-out infinite;
}
.preparate-sub { margin: 0; font-weight: 600; color: rgba(255,255,255,.75); }

/* Variante compacta para el footer del host (sin overlay a pantalla completa) */
.sesion-host-view .preparate-titulo { font-size: 1.4rem; }
.sesion-host-view .preparate-numero { font-size: 3.5rem; }

/* ── Showdown: mensaje personalizado tras el cierre de la pregunta ── */
.showdown-flash { animation: entrada-showdown var(--t-slow) both; }
.showdown-mensaje {
  margin: 0 0 .5rem 0; font-weight: 800; font-size: 1.15rem; color: var(--yellow);
}
@keyframes entrada-showdown {
  from { opacity: 0; transform: scale(.92); }
  60% { opacity: 1; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); }
}

/* ── Animación de entrada para listas de tarjetas — mismo criterio que
   .leaderboard-row (stagger sutil), aplicado por posición del hijo para no
   tener que tocar el JS que arma cada lista. ── */
@keyframes entrada-card { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.lista-kvasires > .kvasir-card,
.lista-preguntas > .pregunta-card,
.estadisticas-grid > .stat-tile,
.ayuda-card-grid > .ayuda-card,
.planes-grid > .plan-card {
  animation: entrada-card var(--t-slow) both;
}
.lista-kvasires > .kvasir-card:nth-child(1), .lista-preguntas > .pregunta-card:nth-child(1),
.estadisticas-grid > .stat-tile:nth-child(1), .ayuda-card-grid > .ayuda-card:nth-child(1),
.planes-grid > .plan-card:nth-child(1) { animation-delay: 0ms; }
.lista-kvasires > .kvasir-card:nth-child(2), .lista-preguntas > .pregunta-card:nth-child(2),
.estadisticas-grid > .stat-tile:nth-child(2), .ayuda-card-grid > .ayuda-card:nth-child(2),
.planes-grid > .plan-card:nth-child(2) { animation-delay: 50ms; }
.lista-kvasires > .kvasir-card:nth-child(3), .lista-preguntas > .pregunta-card:nth-child(3),
.estadisticas-grid > .stat-tile:nth-child(3), .ayuda-card-grid > .ayuda-card:nth-child(3),
.planes-grid > .plan-card:nth-child(3) { animation-delay: 100ms; }
.lista-kvasires > .kvasir-card:nth-child(4), .lista-preguntas > .pregunta-card:nth-child(4),
.estadisticas-grid > .stat-tile:nth-child(4), .ayuda-card-grid > .ayuda-card:nth-child(4),
.planes-grid > .plan-card:nth-child(4) { animation-delay: 150ms; }
.lista-kvasires > .kvasir-card:nth-child(n+5),
.lista-preguntas > .pregunta-card:nth-child(n+5),
.estadisticas-grid > .stat-tile:nth-child(n+5),
.ayuda-card-grid > .ayuda-card:nth-child(n+5) { animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  .lista-kvasires > .kvasir-card, .lista-preguntas > .pregunta-card,
  .estadisticas-grid > .stat-tile, .ayuda-card-grid > .ayuda-card, .planes-grid > .plan-card,
  .leaderboard-row, .contador-jugadores::before {
    animation: none;
  }
}

/* ── Packs / Marketplace ── */
.packs-categoria { margin-bottom: 1.5rem; }
.packs-categoria-titulo {
  font-size: 1.2rem; font-weight: 800; color: var(--cosmic); margin-bottom: .8rem;
}
.packs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.pack-card {
  background: var(--surface); border-radius: var(--r-l); padding: 1.4rem; box-shadow: var(--shadow-1);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  display: flex; flex-direction: column; gap: .5rem;
}
.pack-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.pack-card-cupido { position: relative; border: 2px solid rgba(233,30,99,.3); }
.pack-cupido-badge {
  position: absolute; top: -.5rem; right: .75rem;
  background: #E91E63; color: #fff; font-size: .65rem; font-weight: 800;
  padding: .2rem .55rem; border-radius: var(--r-s); text-transform: uppercase;
  letter-spacing: .03em; box-shadow: 0 2px 6px rgba(233,30,99,.3);
}
.pack-emoji { font-size: 2rem; }
.pack-nombre { font-size: 1rem; font-weight: 800; margin: 0; color: var(--cosmic); }
.pack-descripcion { font-size: .85rem; color: var(--gray-mid); margin: 0; flex: 1; }
.pack-footer { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .5rem; }
.pack-price { font-weight: 800; color: var(--orchid); font-size: .95rem; white-space: nowrap; flex-shrink: 0; }
.btn-obtener-admin { background: linear-gradient(135deg, #e91e63, #f44336); }
.btn-obtener-admin:hover { filter: brightness(1.1); }
.btn-sm { padding: .4rem .9rem; font-size: .8rem; }
.btn-block { width: 100%; }

.packs-ia-banner {
  background: var(--surface-alt); border: 2px dashed var(--border); border-radius: var(--r-l);
  padding: 1.5rem; text-align: center; margin-top: 1.5rem;
}
.packs-ia-banner h3 { font-size: 1rem; margin-bottom: .3rem; }
.packs-ia-banner p { font-size: .85rem; color: var(--gray-mid); margin: 0; }

.packs-empty { text-align: center; padding: 2rem; }
.packs-empty p { margin-bottom: 1rem; }

.pago-banner {
  background: rgba(46, 196, 108, .12); border: 1px solid var(--success, #2ec46c);
  border-radius: var(--r-m); padding: .9rem 1.1rem; margin-bottom: 1.25rem;
  font-size: .9rem; color: var(--text);
}

/* ── Packs search + filter toolbar ── */
.packs-filtros { display: flex; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; align-items: center; }
.packs-search { position: relative; flex: 1; min-width: 160px; }
.packs-search-icon { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); font-size: .8rem; pointer-events: none; }
.packs-search .form-input { padding-left: 1.6rem; width: 100%; }
.packs-select { max-width: 240px; }

/* Filtro por tipo de trivia (chips) */
.packs-tipos-filtro,
.admin-packs-tipos {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
.packs-tipo-btn {
  border: 1px solid var(--gray-light);
  background: var(--card-bg, var(--white));
  color: var(--text, var(--cosmic));
  border-radius: 999px;
  padding: .35rem .8rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.packs-tipo-btn:hover { border-color: var(--fuchsia); color: var(--fuchsia); }
.packs-tipo-btn.activo {
  background: var(--fuchsia);
  border-color: var(--fuchsia);
  color: var(--white);
}
.admin-packs-tipos { margin: 0 0 .75rem; }
.packs-tipo-btn-cupido { border-color: #fce4ec; color: #e91e63; }
.packs-tipo-btn-cupido:hover { border-color: #e91e63; color: #e91e63; background: #fce4ec; }
.packs-tipo-btn-cupido.activo { background: #e91e63; border-color: #e91e63; color: var(--white); }

/* Badges de tipo en tarjetas y tabla */
.pack-tipos { display: flex; gap: .3rem; flex-wrap: wrap; margin: .45rem 0; }
.pack-tipo-badge {
  display: inline-block;
  background: var(--gray-light);
  color: var(--text);
  border-radius: 999px;
  padding: .15rem .5rem;
  font-size: .68rem;
  font-weight: 600;
  white-space: nowrap;
}
.admin-td-tipos { max-width: 220px; }
.admin-td-tipos .pack-tipo-badge { margin: .1rem .2rem .1rem 0; }

/* ── Cart icon + badge ── */
.shell-cart {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
  color: var(--cosmic);
  text-decoration: none;
}
.cart-badge {
  display: none;
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--fuchsia);
  color: var(--white);
  font-size: .65rem;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  line-height: 17px;
  text-align: center;
  border-radius: 50%;
  padding: 0 4px;
}

/* ── Créditos IA (topbar) ── */
.shell-topbar-derecha {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: auto;
}
.shell-creditos {
  display: flex;
  align-items: center;
  gap: .25rem;
  color: var(--cosmic);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
  background: var(--surface-alt);
  padding: .2rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.shell-creditos-icono { font-size: .85rem; }


/* ── Status badges ── */
.badge { display: inline-block; padding: .15rem .5rem; border-radius: 9999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.badge-pagado { background: #d1fae5; color: #065f46; }
.badge-pendiente { background: #fef3c7; color: #92400e; }
.badge-rechazado { background: #fee2e2; color: #991b1b; }
.badge-anulado { background: #e5e7eb; color: #374151; }
.badge-completada { background: #d1fae5; color: #065f46; }
.badge-activo, badge-en_curso { background: #dbeafe; color: #1e40af; }
.badge-no_emitido { background: #f3f4f6; color: #6b7280; }
.badge-emitido, badge-aceptado { background: #d1fae5; color: #065f46; }
.badge-admin { background: #ede9fe; color: #5b21b6; }
.badge-host { background: #f3f4f6; color: #374151; }

/* ── Packs grid compact ── */
.packs-grid-sm { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.packs-grid-sm .pack-card { padding: .75rem; text-align: center; }
.packs-grid-sm .pack-emoji { font-size: 1.5rem; }
.packs-grid-sm .pack-nombre { font-size: .85rem; }
.packs-grid-sm .pack-descripcion { font-size: .75rem; }

/* ── Cart view ── */
.cart-list { margin: 1rem 0; }
.cart-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: .5rem;
}
.cart-item-emoji { font-size: 1.5rem; }
.cart-item-info { flex: 1; display: flex; flex-direction: column; }
.cart-item-nombre { font-weight: 700; font-size: .95rem; color: var(--cosmic); }
.cart-item-precio { font-size: .85rem; color: var(--gray-mid); }
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--cosmic);
  border-top: 2px solid var(--border);
  margin-top: .5rem;
}
.cart-total-monto { color: var(--orchid); font-size: 1.2rem; }
.cart-actions { display: flex; gap: .5rem; margin-top: 1rem; }
.cart-actions .btn { flex: 1; }
.btn-block { width: 100%; text-align: center; margin-top: 1rem; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--gray-mid);
}
.btn-ghost:hover { background: var(--gray-light); color: var(--cosmic); }

/* ── Admin tabs ── */
.admin-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; }
.admin-tab {
  padding: .6rem 1.2rem; font-size: .88rem; font-weight: 600; color: var(--gray-mid);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.admin-tab:hover { color: var(--cosmic); }
.admin-tab.is-active { color: var(--orchid); border-bottom-color: var(--orchid); }

/* ── Admin table ── */
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th { text-align: left; padding: .6rem .8rem; border-bottom: 2px solid var(--border); color: var(--gray-mid); font-weight: 600; font-size: .8rem; text-transform: uppercase; }
.admin-table td { padding: .6rem .8rem; border-bottom: 1px solid var(--border); }
.admin-table tr:hover { background: var(--gray-light); }
.admin-table-sm td { padding: .45rem .6rem; font-size: .82rem; }
.admin-td-emoji { font-size: 1.3rem; width: 2rem; }
.admin-td-nombre { font-weight: 700; color: var(--cosmic); }
.admin-td-actions { white-space: nowrap; }
.btn-toggle { border: none; background: transparent; cursor: pointer; font-size: 1.1rem; }
.admin-clickable { cursor: pointer; }

/* ── Admin dashboard KPIs ── */
.admin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.admin-kpi { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 1.2rem; text-align: center; }
.admin-kpi-num { display: block; font-size: 1.8rem; font-weight: 800; color: var(--cosmic); }
.admin-kpi-label { display: block; font-size: .8rem; color: var(--gray-mid); margin-top: .2rem; text-transform: uppercase; letter-spacing: .04em; }
.admin-kpi-sub { display: block; font-size: .78rem; color: var(--orchid); margin-top: .3rem; }
.admin-kpis-compact .admin-kpi-num { font-size: 1.4rem; }
.admin-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.admin-grid-2col h2 { font-size: 1rem; margin-bottom: .75rem; }
@media (max-width: 720px) { .admin-grid-2col { grid-template-columns: 1fr; } }

/* ── Admin búsqueda ── */
.admin-search { display: flex; gap: .5rem; margin-bottom: 1.25rem; align-items: center; }
.admin-search .form-input { flex: 1; }

/* ── Admin filtros ── */
.admin-filtros { display: flex; gap: .4rem; margin-bottom: 1.25rem; flex-wrap: wrap; }

/* ── Admin paginación ── */
.admin-pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem; }

/* ── Admin perfil ── */
.admin-profile-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.admin-profile-avatar { font-size: 2.5rem; width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; background: var(--gray-light); border-radius: 50%; flex-shrink: 0; }
.admin-profile-header h1 { margin-bottom: .1rem; }
.admin-profile-header p { margin: .15rem 0 0; }

/* ── Admin pack form ── */
.admin-pack-form { max-width: 640px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-actions-top { margin-top: 1.5rem; }

/* ── Preguntas editor ── */
.apf-pregunta { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; margin-bottom: .75rem; }
.apf-pregunta-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.apf-pregunta-num { font-weight: 800; color: var(--orchid); min-width: 2rem; }
.apf-opciones { display: flex; flex-direction: column; gap: .4rem; margin: .5rem 0; }
.apf-opcion { display: flex; align-items: center; gap: .5rem; }

/* ── Modal ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-box { background: var(--white); border-radius: 14px; padding: 1.5rem; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-3); }
.modal-box h2 { margin-bottom: .5rem; }
.modal-box textarea { font-family: monospace; font-size: .8rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

/* ── Modal de IA (generación de preguntas) ── */
.ia-creditos-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: var(--surface-alt);
  border-radius: 10px;
  padding: .6rem .9rem;
  font-size: .85rem;
}
.ia-creditos-vacio { background: #fff4e6; }
.ia-creditos-saldo { font-weight: 700; color: var(--cosmic); }
.ia-archivo-fila { display: flex; align-items: center; gap: .75rem; }
.ia-generar-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ia-pregunta-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .65rem .8rem;
  transition: border-color .15s ease, background .15s ease;
}
.ia-pregunta-item:has(input:checked) { border-color: var(--fuchsia); background: var(--surface-alt); }


/* ── Import modal ── */
.importar-modal { max-width: 640px; }
.importar-modal-title { font-size: 1.15rem; text-align: center; margin-bottom: 1.25rem; }
.importar-zone { border: 2px dashed var(--border); border-radius: 12px; padding: 1.25rem; text-align: center; cursor: pointer; transition: background .15s, border-color .15s; display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.importar-zone:hover, .importar-zone.dragover { background: var(--gray-light); border-color: var(--orchid); }
.importar-zone-icon { font-size: 1.4rem; }
.importar-zone-label { font-weight: 600; font-size: .9rem; }
.importar-zone-hint { font-size: .75rem; color: var(--text-muted); }
.importar-zone input[type="file"] { display: none; }
.importar-zone-name { font-size: .82rem; color: var(--orchid); margin: .35rem 0 0; text-align: center; }
.importar-divider { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: var(--text-muted); font-size: .78rem; }
.importar-divider::before, .importar-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.importar-textarea { width: 100%; min-height: 120px; resize: vertical; padding: .65rem; border-radius: 8px; font-size: .78rem; line-height: 1.5; }
.importar-preview-info { font-size: .78rem; margin: .5rem 0 0; line-height: 1.4; }
.importar-preview-badge { display: inline-block; background: var(--gray-light); padding: .15rem .55rem; border-radius: 20px; font-weight: 600; font-size: .75rem; }
.importar-error { font-size: .82rem; margin: .6rem 0 0; }
.importar-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

/* ── Admin packs toolbar ── */
.admin-packs-toolbar { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }
.admin-packs-search { position: relative; flex: 1; min-width: 180px; max-width: 360px; }
.admin-packs-search-icon { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); font-size: .8rem; pointer-events: none; }
.admin-packs-search .form-input { padding-left: 1.6rem; padding-right: 1.5rem; width: 100%; }
.admin-packs-search-clear { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: .75rem; cursor: pointer; padding: .2rem .35rem; border-radius: 50%; color: var(--text-muted); }
.admin-packs-search-clear:hover { background: var(--gray-light); color: #000; }
.admin-packs-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Import toast ── */
.importar-toast { padding: .65rem 1rem; border-radius: 10px; margin-bottom: .75rem; font-size: .85rem; font-weight: 600; cursor: pointer; animation: fadeIn .2s ease; }
.importar-toast[data-tipo="ok"] { background: #e6f7e6; color: #1a7d1a; border: 1px solid #b3e6b3; }
.importar-toast[data-tipo="partial"] { background: #fff8e1; color: #8a6d00; border: 1px solid #ffe082; }
.importar-toast[data-tipo="error"] { background: #ffeaea; color: #b71c1c; border: 1px solid #ffcdd2; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes entrada-card { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Barra de Progreso Cruzada (jugador) ── */
.progreso-cruzado { margin-bottom: 1rem; text-align: center; }
.progreso-bar {
  height: .55rem; border-radius: var(--r-full); background: var(--gray-btn-bg); overflow: hidden;
}
.progreso-fill {
  height: 100%; width: 0%; border-radius: var(--r-full);
  background: var(--grad-primary);
  transition: width var(--t-med);
}
.progreso-label { display: block; margin-top: .3rem; font-size: .75rem; font-weight: 700; color: var(--text-muted); }

/* ── Cinturón de habilidades (power-ups del jugador) ── */
.habilidades-belt {
  display: flex; justify-content: center; align-items: center; gap: .6rem;
  margin-top: 1.25rem; flex-wrap: wrap;
}
.habilidad-btn {
  min-width: 3.4rem; height: 3.4rem; border-radius: var(--r-m);
  border: 2px solid var(--orchid-soft); background: var(--surface);
  color: var(--orchid); font-weight: 800; font-size: 1.05rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(106,27,154,.18);
  transition: transform var(--t-fast), opacity var(--t-fast), background var(--t-fast);
}
.habilidad-btn:active { transform: scale(.94); }
.habilidad-btn:disabled { opacity: .4; cursor: not-allowed; }
.habilidad-btn.hab-usada {
  opacity: .45; background: var(--gray-light); border-color: var(--border);
  color: var(--gray-mid); box-shadow: none; text-decoration: line-through;
}
.habilidad-btn.hab-bloqueada {
  opacity: .35; border-style: dashed; color: var(--gray-mid);
  box-shadow: none; cursor: not-allowed;
}
.habilidades-restantes {
  font-size: .75rem; font-weight: 700; color: var(--text-muted);
  padding: .3rem .6rem; border-radius: var(--r-full); background: var(--gray-light);
}

/* ── Opción eliminada por el 50% ── */
.opcion-jugador.opcion-eliminada {
  opacity: .18; filter: grayscale(1); pointer-events: none; transform: scale(.96);
}

/* ── Toasts y banner de habilidad ── */
.toast {
  position: fixed; left: 50%; bottom: calc(1.25rem + var(--safe-b)); transform: translateX(-50%);
  z-index: 60; background: var(--cosmic); color: #fff; font-weight: 700; font-size: .85rem;
  padding: .65rem 1.1rem; border-radius: var(--r-full); box-shadow: 0 8px 24px rgba(0,0,0,.35);
  animation: fadeIn var(--t-med); max-width: 90vw; text-align: center;
}
.habilidad-banner {
  position: fixed; left: 50%; top: calc(1rem + var(--safe-t)); transform: translateX(-50%);
  z-index: 60; background: var(--grad-kvasir); color: var(--cosmic); font-weight: 800; font-size: .9rem;
  padding: .6rem 1.1rem; border-radius: var(--r-full); box-shadow: 0 8px 24px rgba(0,0,0,.3);
  animation: fadeIn var(--t-med); max-width: 92vw; text-align: center;
}

/* ── Rachas en Caliente: flash de fuego ── */
.racha-fuego-overlay {
  position: fixed; inset: 0; z-index: 45; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 7rem; animation: fuego-flash .9s ease-out forwards;
}
@keyframes fuego-flash {
  0% { opacity: 0; transform: scale(.4); filter: blur(6px); }
  30% { opacity: 1; transform: scale(1.15); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.4); filter: blur(3px); }
}
.racha-fuego-badge {
  font-weight: 900; font-size: 1.1rem; color: var(--orange); margin: 0 0 .5rem 0;
  animation: pulso-bloqueo .8s ease-in-out infinite;
}

/* ── Resultado del Champiñón ── */
.champinon-mensaje {
  font-weight: 800; color: var(--fuchsia); margin: .35rem 0 0 0; font-size: .95rem;
}

/* ── Tabla de puntuaciones para los jugadores (tras cada pregunta) ── */
.leaderboard-parcial-jugador { margin-top: 1.4rem; text-align: left; }
.leaderboard-titulo {
  font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--orchid); margin: 0 0 .6rem 0; text-align: center;
}
.leaderboard-parcial-jugador .leaderboard-row { padding: .65rem 1rem; font-size: .92rem; }
.leaderboard-row-mio {
  background: var(--grad-primary); outline: 2px solid var(--orchid); outline-offset: 1px;
  box-shadow: 0 6px 16px rgba(106,27,154,.35);
}
.leaderboard-row-mio::after { content: '← tú'; font-size: .72rem; font-weight: 800; opacity: .85; margin-left: .4rem; }
.leaderboard-fuera-top10 {
  margin: 0 0 .8rem 0; padding: .65rem 1rem; text-align: center;
  font-size: 1rem; font-weight: 800; color: var(--text);
  background: rgba(106,27,154,.12); border: 1px dashed var(--orchid); border-radius: var(--r-md);
}


/* ── Configuración de sala (host, pantalla de PIN) ── */
.config-sala {
  margin: 1rem 0 1.5rem 0; padding: 1rem; border: 1px solid var(--border);
  border-radius: var(--r-m); background: var(--surface-alt); text-align: left;
}
.config-titulo { font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--orchid); margin: 0 0 .75rem 0; }
.config-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  font-size: .9rem; font-weight: 600; padding: .35rem 0;
}
.config-toggle input[type="checkbox"] { width: 2.2rem; height: 1.25rem; accent-color: var(--orchid); cursor: pointer; }
.config-field { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 600; padding: .5rem 0; }
.config-field input[type="number"] {
  max-width: 160px; padding: .5rem .7rem; border: 1px solid var(--border);
  border-radius: var(--r-s); font-size: 1rem; font-weight: 700;
}
.config-field input[type="text"] {
  max-width: 220px; padding: .5rem .7rem; border: 1px solid var(--border);
  border-radius: var(--r-s); font-size: 1rem; font-weight: 700;
}
.config-field input[type="email"] {
  max-width: 280px; padding: .5rem .7rem; border: 1px solid var(--border);
  border-radius: var(--r-s); font-size: 1rem; font-weight: 700;
}
.config-field input:disabled { opacity: .5; cursor: not-allowed; }
.config-hint { font-size: .75rem; margin: .15rem 0 .35rem 0; }
.config-sala .text-muted { background: transparent; color: var(--gray-mid); padding: 0; display: block; font-weight: 500; }
.config-aviso { font-size: .78rem; font-weight: 700; color: var(--success); min-height: 1rem; margin: .15rem 0 .4rem 0; }
.config-modo-selector { margin: .25rem 0 .6rem 0; }
.config-modo-label { display: block; font-size: .8rem; font-weight: 700; color: var(--gray-mid); margin-bottom: .4rem; }
.config-modo-opciones { display: flex; gap: .5rem; }
.config-modo-opcion {
  flex: 1; text-align: center; cursor: pointer;
  padding: .55rem .5rem; border: 2px solid var(--border); border-radius: var(--r-s);
  font-size: .9rem; font-weight: 700; transition: all .12s ease;
}
.config-modo-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.config-modo-opcion.activo { border-color: #E91E63; background: rgba(233,30,99,.08); color: #E91E63; }

/* ── Modo Cupido ───────────────────────────────────────────── */
.cupido-badge-header {
  font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #E91E63; margin: .5rem 0 .25rem 0; text-align: center;
}
.config-toggle-cupido { background: rgba(233,30,99,.06); border-radius: var(--r-s); padding: .4rem .5rem; }
.espera-habilidades { margin-top: 1rem; text-align: center; }
.espera-habilidades h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-mid); margin-bottom: .5rem; }
.espera-hab-list { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.espera-hab {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--surface-alt, rgba(255,255,255,.08));
  font-size: 1.1rem; border: 1px solid var(--border);
}
.config-toggle-cupido span { font-weight: 800; color: #E91E63; }
.cupido-espera { text-align: center; }
.cupido-espera-pareja {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  margin: 1.5rem 0; flex-wrap: wrap;
}
.cupido-jugador-conectado {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .75rem 1rem; border: 2px dashed var(--border); border-radius: var(--r-m);
  min-width: 120px; opacity: .5; transition: all .3s;
}
.cupido-jugador-conectado.conectado { border-color: #E91E63; opacity: 1; background: rgba(233,30,99,.04); }
.cupido-jugador-icono { font-size: 1.5rem; }
.cupido-jugador-nombre { font-size: .8rem; font-weight: 700; color: var(--text); }
.cupido-espera-vs { font-size: 1rem; font-weight: 800; color: var(--gray-mid); text-transform: uppercase; }
.cupido-espera-hint { font-size: .8rem; margin-top: .5rem; }
.cupido-aviso-jugador { font-size: .8rem; font-weight: 600; color: #E91E63; text-align: center; margin-bottom: .5rem; }
.cupido-resumen { text-align: center; padding: 1rem 0; }
.cupido-respuestas-grid {
  display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: .75rem;
}
.cupido-respuesta-item {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .6rem 1rem; border: 1px solid var(--border); border-radius: var(--r-m);
  background: var(--surface-alt); min-width: 140px;
}
.cupido-mi-respuesta { border-color: #E91E63; }
.cupido-otra-respuesta { border-color: var(--orchid); }
.cupido-resp-nombre { font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--gray-mid); }
.cupido-resp-texto { font-size: .9rem; font-weight: 700; color: var(--text); }
.cupido-resp-puntos { font-size: .75rem; font-weight: 800; color: var(--orchid); }
.cupido-coincidencia {
  font-size: 1rem; font-weight: 800; padding: .5rem 1rem; border-radius: var(--r-m);
  margin: .5rem auto; display: inline-block;
}
.cupido-coincidencia-yes { background: rgba(46,125,50,.12); color: var(--success); }
.cupido-coincidencia-no { background: rgba(211,47,47,.08); color: var(--danger); }
.cupido-contador { font-size: .85rem; font-weight: 700; color: var(--gray-mid); margin: .35rem 0; }
.cupido-final { text-align: center; padding: 1rem 0; }
.cupido-final-titulo { font-size: 1.3rem; font-weight: 800; margin-bottom: 1rem; }
.cupido-final-pareja {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.cupido-final-jugador {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .75rem 1rem; border: 2px solid #E91E63; border-radius: var(--r-m);
  background: rgba(233,30,99,.04); min-width: 100px;
}
.cupido-final-nombre { font-size: .8rem; font-weight: 800; color: var(--text); }
.cupido-final-pts { font-size: 1.2rem; font-weight: 800; color: #E91E63; }
.cupido-final-vs { font-size: 1.1rem; font-weight: 800; color: var(--gray-mid); }
.cupido-final-total { margin: .75rem 0; }
.cupido-final-afinidad { margin: .75rem 0; }
.cupido-final-afinidad-pct { font-size: 2.4rem; font-weight: 800; color: #E91E63; margin: 0; line-height: 1; }
.cupido-final-total-pts { font-size: 2rem; font-weight: 800; color: #E91E63; margin: 0; }
.cupido-final-compat { font-size: 1rem; font-weight: 700; color: var(--orchid); margin: .25rem 0 0 0; }
.cupido-final-coincidencias {
  display: inline-flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .75rem 1.25rem; border: 1px solid var(--border); border-radius: var(--r-m);
  background: var(--surface-alt); margin: .75rem 0;
}
.cupido-final-coin-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--gray-mid); margin: 0; }
.cupido-final-coin-num { font-size: 1.4rem; font-weight: 800; color: #E91E63; margin: 0; }
.cupido-final-msg { font-size: .9rem; margin: .5rem 0; }