/* ═══════════════════════════════════════════════════
   Fuentes (Google Fonts)
   Fraunces → display/números   Outfit → UI general
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700;9..144,900&family=Outfit:wght@400;600;700&display=swap');


/* ═══════════════════════════════════════════════════
   Variables globales
═══════════════════════════════════════════════════ */
:root {
  /* Paleta — tokens "Editorial refinada" (Figma: BingoYa Tokens) */
  --color-bg:      #faf6ef;
  --color-ink:     #1a1714;
  --color-ink-2:   #5c564d;
  --color-border:  #e3dbc9;
  --color-surface: #f1ece1;
  --color-red:     #d92639;
  --color-teal:    #167c76;
  --color-yellow:  #f2a007;
  --color-inverse: #ffffff;

  /* Tipografía */
  --font-display: 'Fraunces', serif;
  --font-body:    'Outfit', sans-serif;

  /* Estructura */
  --header-h:     3.5rem;
  --marquee-h:    7rem;
  --panel-left-w: 290px;
  --panel-right-w:260px;

  /* Misc */
  --radius:    0.5rem;
  --radius-lg: 1rem;
  --shadow:    0 2px 12px rgba(0,0,0,.08);
}


/* ═══════════════════════════════════════════════════
   Reset y base
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; height: 100%; }

body {
  font-family: var(--font-body);
  background:  var(--color-bg);
  color:       var(--color-ink);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

button { cursor: pointer; font-family: inherit; border: none; background: none; }
input  { font-family: inherit; }
ul     { list-style: none; }
[hidden] { display: none !important; }


/* ═══════════════════════════════════════════════════
   Botones
═══════════════════════════════════════════════════ */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.4rem;
  padding:         0.55rem 1.2rem;
  border-radius:   var(--radius);
  font-size:       0.95rem;
  font-weight:     700;
  border:          2px solid transparent;
  transition:      opacity .15s, filter .15s;
  white-space:     nowrap;
}
.btn:disabled          { opacity: .38; cursor: not-allowed; }
.btn:not(:disabled):hover { filter: brightness(.93); }

.btn--primary   { background: var(--color-red);  color: #fff; }
.btn--secondary { background: var(--color-teal); color: #fff; }
.btn--danger    { border-color: var(--color-red);  color: var(--color-red); }
.btn--ghost     { border-color: var(--color-border); color: var(--color-ink-2); }
.btn--prize     { background: var(--color-yellow); color: #111; font-size: 0.82rem; padding: 0.35rem 0.75rem; }
.btn--full      { width: 100%; }
.btn--sm        { padding: 0.3rem 0.7rem; font-size: 0.82rem; }
.btn--icon      { padding: 0.4rem 0.55rem; font-size: 1.1rem; color: var(--color-ink-2); }
.btn--qr-active { background: var(--color-teal); color: #fff; border-radius: var(--radius); }
.qr-status-label {
  font-size:      0.6rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height:    1;
}


/* ═══════════════════════════════════════════════════
   Formularios
═══════════════════════════════════════════════════ */
.field {
  display:       flex;
  flex-direction:column;
  gap:           0.3rem;
  margin-bottom: 0.7rem;
}
.field label {
  font-size:      0.75rem;
  font-weight:    700;
  color:          var(--color-ink-2);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.field input[type="text"],
.field input[type="number"],
.field input[type="password"] {
  width:      100%;
  min-width:  0;
  padding:    0.5rem 0.75rem;
  border:     2px solid var(--color-border);
  border-radius: var(--radius);
  font-size:  0.95rem;
  background: var(--color-inverse);
  color:      var(--color-ink);
  transition: border-color .15s;
  box-sizing: border-box;
}
.field input:focus { outline: none; border-color: var(--color-teal); }
.field input:disabled {
  opacity:    .5;
  cursor:     not-allowed;
  background: var(--color-surface);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:      0.6rem;
  min-width: 0;
}
.field-row .field { min-width: 0; }


/* ═══════════════════════════════════════════════════
   Header
═══════════════════════════════════════════════════ */
.header {
  display:       flex;
  align-items:   center;
  gap:           1rem;
  padding:       0 1.25rem;
  height:        var(--header-h);
  border-bottom: 2px solid var(--color-border);
  background:    var(--color-bg);
  position:      sticky;
  top:           0;
  z-index:       20;
  flex-shrink:   0;
}
.header__brand {
  font-family:    var(--font-display);
  font-size:      1.6rem;
  font-weight:    900;
  color:          var(--color-red);
  letter-spacing: -.03em;
  text-decoration: none;
}
/* En /ver la marca es un enlace (al sitio del tenant o al landing) */
.header__brand-link {
  display:         inline-flex;
  align-items:     center;
  color:           inherit;
  text-decoration: none;
}
.header__event {
  flex:      1;
  font-size: 1rem;
  color:     var(--color-ink-2);
  overflow:  hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.header__user {
  font-size:   0.85rem;
  font-weight: 600;
  color:       var(--color-ink-2);
}
.header__back {
  text-decoration: none;
  font-size:       0.85rem;
  flex-shrink:     0;
}
.header__actions { display: flex; align-items: center; gap: 0.5rem; }


/* ═══════════════════════════════════════════════════
   Secciones de panel
═══════════════════════════════════════════════════ */
.section {
  padding:       0.9rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.section__title {
  font-family:    var(--font-display);
  font-size:      1.15rem;
  font-weight:    700;
  margin-bottom:  0.2rem;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}
.section__subtitle {
  font-size:     0.85rem;
  color:         var(--color-ink-2);
  margin-bottom: 0.65rem;
  min-height:    1.2em;
}
.section__heading {
  font-size:      0.72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--color-ink-2);
  margin-bottom:  0.7rem;
}


/* ═══════════════════════════════════════════════════
   Pantalla de login
═══════════════════════════════════════════════════ */
.login-page {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  background:      var(--color-surface);
}
.login-card {
  background:    var(--color-bg);
  border:        2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       2.5rem 2rem;
  width:         100%;
  max-width:     380px;
  box-shadow:    var(--shadow);
}
.login-title {
  font-family:    var(--font-display);
  font-size:      2.8rem;
  font-weight:    900;
  color:          var(--color-red);
  text-align:     center;
  letter-spacing: -.04em;
  margin-bottom:  2rem;
}
.login-sub {
  text-align:    center;
  font-size:     0.85rem;
  color:         var(--color-ink-2);
  margin-top:    -1.6rem;
  margin-bottom: 1.8rem;
}
.login-back {
  display:         block;
  text-align:      center;
  margin-top:      1.1rem;
  font-size:       0.82rem;
  font-weight:     600;
  color:           var(--color-ink-2);
  text-decoration: none;
}
.login-back:hover { color: var(--color-ink); }
.login-error {
  font-size:     0.9rem;
  font-weight:   600;
  color:         var(--color-red);
  background:    #fff0f1;
  border-left:   3px solid var(--color-red);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding:       0.55rem 0.75rem;
  margin-bottom: 0.75rem;
}


/* ═══════════════════════════════════════════════════
   Layout operador (3 columnas fijas)
═══════════════════════════════════════════════════ */
.operator-page {
  display:        flex;
  flex-direction: column;
  height:         100vh;
  overflow:       hidden;
}
/* ── Modos del operador: Cabina (juego) ↔ Preparación ── */
.mode-game {
  flex:           1;
  min-height:     0;
  display:        flex;
  flex-direction: column;
}

/* Barra de acciones rápidas de la cabina */
.quick-bar {
  display:       flex;
  align-items:   center;
  gap:           0.6rem;
  padding:       0.5rem 1.25rem;
  background:    var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.quick-bar__round  { font-weight: 700; }
.quick-bar__set    { font-size: 0.85rem; color: var(--color-ink-2); }
.quick-bar__spacer { flex: 1; }

/* Pills desplegables (aviso, medio tiempo, cinta) */
.quick-pill { position: relative; }
.quick-pill > summary {
  list-style:    none;
  cursor:        pointer;
  font-size:     0.82rem;
  font-weight:   700;
  color:         var(--color-ink-2);
  padding:       0.35rem 0.7rem;
  border:        1.5px solid var(--color-border);
  border-radius: var(--radius);
  background:    var(--color-bg);
  user-select:   none;
  white-space:   nowrap;
}
.quick-pill > summary::-webkit-details-marker { display: none; }
.quick-pill[open] > summary {
  background:   var(--color-ink);
  color:        var(--color-inverse);
  border-color: var(--color-ink);
}
.quick-pill__panel {
  position:      absolute;
  right:         0;
  top:           calc(100% + 6px);
  z-index:       30;
  width:         300px;
  background:    var(--color-bg);
  border:        2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       0.9rem 1rem;
  box-shadow:    var(--shadow);
}
.quick-pill__status {
  margin-top:  0.5rem;
  font-size:   0.8rem;
  font-weight: 600;
  color:       var(--color-teal);
}

.btn--finish { border: 2px solid var(--color-red); color: var(--color-red); }
.btn--mode   { background: var(--color-ink); color: var(--color-inverse); }

/* Cabina: cantar | display | figura */
.cabina {
  flex:       1;
  min-height: 0;
  display:    flex;
  overflow:   hidden;
}
.cabina__left {
  flex:           0 0 360px;
  overflow-y:     auto;
  padding:        1rem;
  display:        flex;
  flex-direction: column;
  gap:            0.9rem;
  border-right:   2px solid var(--color-border);
}
.cabina__display {
  flex:      1;
  min-width: 0;
  overflow:  hidden;
  position:  relative;
}
.cabina__right {
  flex:        0 0 280px;
  overflow-y:  auto;
  padding:     1rem;
  border-left: 2px solid var(--color-border);
}

/* Tarjetas del operador */
.op-card {
  background:    var(--color-surface);
  border-radius: var(--radius-lg);
  padding:       0.9rem 1rem 1rem;
}
.op-card__heading {
  font-size:      0.7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--color-ink-2);
  margin-bottom:  0.6rem;
}
.op-card__undo { margin-top: 0.5rem; }
.op-card__hint { margin-top: 0.5rem; font-size: 0.75rem; color: var(--color-ink-2); }
.op-card__select {
  padding:       0.5rem 0.4rem;
  border:        2px solid var(--color-border);
  border-radius: var(--radius);
  background:    var(--color-bg);
  font-family:   inherit;
  font-size:     0.85rem;
  color:         var(--color-ink);
}

/* Barra de estado en vivo (preparación con ronda activa) */
.live-bar {
  display:     flex;
  align-items: center;
  gap:         1rem;
  padding:     0.5rem 1.25rem;
  background:  var(--color-ink);
  color:       var(--color-inverse);
}
.live-bar__dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    var(--color-yellow);
  animation:     live-blink 1.6s ease-in-out infinite;
}
@keyframes live-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.live-bar__label {
  font-size:      0.78rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--color-yellow);
}
.live-bar__now    { display: flex; align-items: baseline; gap: 0.4rem; font-family: var(--font-display); font-weight: 900; }
.live-bar__letter { font-size: 1.2rem; color: var(--color-yellow); }
.live-bar__number { font-size: 1.55rem; }
.live-bar__meta   { font-size: 0.85rem; opacity: .75; }
.live-bar__spacer { flex: 1; }
.live-bar__esc {
  font-size:     0.7rem;
  font-weight:   700;
  opacity:       .55;
  border:        1px solid currentColor;
  border-radius: 4px;
  padding:       0.1rem 0.4rem;
}

/* Modo preparación */
.mode-prep {
  flex:       1;
  min-height: 0;
  overflow-y: auto;
}
.prep {
  display:               grid;
  grid-template-columns: 460px 1fr;
  gap:                   1.5rem;
  padding:               1.5rem;
  max-width:             1240px;
}
.prep__config { align-self: start; }

/* Editor del mensaje de bienvenida dentro de Preparación */
.welcome-editor {
  margin-top:  1.5rem;
  padding-top: 1.25rem;
  border-top:  1px solid var(--color-border);
}
.btn--new-round {
  width:       100%;
  margin-top:  0.6rem;
  border:      2px dashed var(--color-border);
  color:       var(--color-teal);
  font-weight: 700;
}
.mode-prep .round-item { padding: 0.75rem 0.9rem; font-size: 0.92rem; }
.mode-prep .round-item__name { font-weight: 700; }

/* ── Responsive del operador ── */

/* Notebook chico / tablet horizontal: paneles más angostos */
@media (max-width: 1120px) {
  .cabina__left  { flex-basis: 300px; }
  .cabina__right { flex-basis: 230px; }
}

/* Pantalla angosta: la cabina se apila y la página scrollea */
@media (max-width: 860px) {
  .mode-game { overflow-y: auto; }
  .cabina {
    flex-direction: column;
    overflow:       visible;
  }
  .cabina__left,
  .cabina__right {
    flex:         0 0 auto;
    width:        100%;
    border-right: none;
    border-left:  none;
    padding:      0.9rem;
  }
  .cabina__display { flex: 0 0 auto; min-height: 300px; }
  .quick-bar,
  .live-bar { flex-wrap: wrap; row-gap: 0.4rem; }
  .prep { grid-template-columns: 1fr; }
}

/* Preparación sin evento */
.prep-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             0.9rem;
  min-height:      55vh;
  padding:         2rem;
  text-align:      center;
}
.prep-empty__title {
  font-family: var(--font-display);
  font-size:   2rem;
  font-weight: 900;
}
.prep-empty__text {
  max-width: 420px;
  color:     var(--color-ink-2);
}

/* Acciones de ronda */
.round-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }

/* Lista de rondas */
.rounds-list { display: flex; flex-direction: column; gap: 0.35rem; }
.rounds-list__empty { font-size: 0.85rem; color: var(--color-ink-2); }

.round-item {
  display:     flex;
  align-items: center;
  gap:         0.4rem;
  padding:     0.4rem 0.6rem;
  border:      1px solid var(--color-border);
  border-radius: var(--radius);
  font-size:   0.82rem;
}
.round-item--active   { border-color: var(--color-teal); background: #f0faf9; }
.round-item--finished { opacity: .55; }
.round-item__name {
  flex:          1;
  font-weight:   600;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.round-item__label  { font-size: 0.72rem; color: var(--color-ink-2); }
.round-item__status {
  font-size:      0.68rem;
  font-weight:    700;
  text-transform: uppercase;
  color:          var(--color-ink-2);
}
.round-item--active .round-item__status { color: var(--color-teal); }

/* Aviso de config bloqueada */
.config-locked {
  font-size:     0.8rem;
  color:         #7a5c00;
  background:    #fff8e1;
  border-left:   3px solid var(--color-yellow);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding:       0.4rem 0.65rem;
  margin-bottom: 0.7rem;
}

/* Sin ronda activa */
.no-round {
  font-size:     1rem;
  font-weight:   600;
  color:         var(--color-ink-2);
  text-align:    center;
  padding:       1.5rem;
  border:        2px dashed var(--color-border);
  border-radius: var(--radius);
  background:    var(--color-surface);
  margin:        1rem;
}

/* Error en línea */
.error-msg {
  font-size:     0.875rem;
  font-weight:   600;
  color:         var(--color-red);
  background:    #fff0f1;
  border-left:   3px solid var(--color-red);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding:       0.5rem 0.75rem;
  margin-top:    0.5rem;
}


/* ═══════════════════════════════════════════════════
   Display central — número actual
═══════════════════════════════════════════════════ */
.display {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             0.75rem;
  padding:         1.5rem 1rem;
  position:        relative;
  overflow:        hidden;
}

.display__counter {
  font-size:      0.95rem;
  font-weight:    700;
  color:          var(--color-ink-2);
  letter-spacing: .06em;
}

.display__current {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  line-height:    1;
}
.display__letter {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 4.5vw, 4rem);
  font-weight:    700;
  color:          var(--color-red);
  letter-spacing: .06em;
}
.display__number {
  font-family:    var(--font-display);
  font-size:      clamp(6rem, 16vw, 22rem);
  font-weight:    900;
  color:          var(--color-ink);
  line-height:    .88;
  letter-spacing: -.04em;
}

/* Animación pop al sortear un número nuevo */
.display__number.js-pop {
  animation: pop .4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes pop {
  from { transform: scale(.65); opacity: .3; }
  to   { transform: scale(1);   opacity: 1;  }
}

/* Penúltimo número — esquina inferior izquierda */
.display__prev {
  --prev-scale:   1;
  position:       absolute;
  bottom:         1rem;
  left:           1.25rem;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  line-height:    1;
  padding-right:  14px; /* espacio para el handle */
  padding-bottom: 10px;
}
.display__prev-label {
  font-size:      calc(0.6rem  * var(--prev-scale));
  font-weight:    700;
  letter-spacing: 0.1em;
  color:          var(--color-ink-2);
  text-transform: uppercase;
  margin-bottom:  0.15rem;
}
.display__prev-letter {
  font-size:      calc(0.68rem * var(--prev-scale));
  font-weight:    700;
  color:          var(--color-teal);
  text-transform: uppercase;
}
.display__prev-number {
  font-family: var(--font-display);
  font-size:   calc(2.4rem * var(--prev-scale));
  font-weight: 700;
  color:       var(--color-teal);
  line-height: 1;
}
.prev-resize-corner {
  position:   absolute;
  bottom:     0;
  right:      0;
  width:      16px;
  height:     16px;
  cursor:     nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--color-teal) 50%);
  opacity:    0;
  transition: opacity .15s;
  touch-action: none;
}
.display__prev:hover .prev-resize-corner  { opacity: 0.4; }
.prev-resize-corner:hover                 { opacity: 0.7; }
.prev-resize-corner--active               { opacity: 1 !important; }

/* Controles de sorteo */
.draw-controls {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}
.draw-controls__input {
  width:         5.5rem;
  min-width:     0;
  padding:       0.5rem 0.6rem;
  border:        2px solid var(--color-teal);
  border-radius: var(--radius);
  background:    var(--color-inverse);
  font-family:   var(--font-display);
  font-size:     1.5rem;
  font-weight:   700;
  text-align:    center;
  transition:    border-color .15s;
}
.draw-controls__input:focus { outline: none; border-color: var(--color-ink); }
/* Sin flechas de spinner: tapaban el placeholder en los campos angostos */
.draw-controls__input::-webkit-outer-spin-button,
.draw-controls__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.draw-controls__input { appearance: textfield; -moz-appearance: textfield; }
.draw-controls__input--sm {
  flex:        1;
  width:       auto;
  font-size:   1.1rem;
  border-color: var(--color-border);
}
/* El input de cantar domina la tarjeta */
.op-card .draw-controls__input:not(.draw-controls__input--sm) { flex: 1; width: auto; }


/* ═══════════════════════════════════════════════════
   Grilla de figura 5×5 (+ cabeceras B-I-N-G-O)
═══════════════════════════════════════════════════ */
.figure-grid {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   3px;
}

/* Casilla base */
.figure-cell {
  aspect-ratio:    1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.65rem;
  font-weight:     600;
  border-radius:   3px;
  border:          1px solid transparent;
  background:      var(--color-surface);
  color:           var(--color-ink-2);
  transition:      background .2s;
}

/* Cabeceras B-I-N-G-O */
.figure-cell--header {
  background:     transparent;
  border:         none;
  font-family:    var(--font-display);
  font-size:      0.85rem;
  font-weight:    900;
  color:          var(--color-red);
  letter-spacing: .04em;
}

/* Casilla iluminada por la figura */
.figure-cell--active {
  background:   var(--color-yellow);
  border:       1.5px solid var(--color-ink);
  color:        var(--color-ink);
}

/* Casilla central LIBRE */
.figure-cell--free {
  background:     var(--color-ink);
  color:          #fff;
  font-size:      0.52rem;
  font-weight:    700;
  letter-spacing: .03em;
}


/* ═══════════════════════════════════════════════════
   Tarjetas de premios
═══════════════════════════════════════════════════ */
.prizes { display: flex; flex-direction: column; gap: 0.45rem; }

.prize-card {
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
  padding:       0.45rem 0.7rem;
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  background:    var(--color-surface);
}
.prize-card__label {
  flex:        1;
  font-size:   0.85rem;
  font-weight: 600;
}
.prize-card__count {
  font-family: var(--font-display);
  font-size:   1.5rem;
  font-weight: 700;
  color:       var(--color-teal);
  min-width:   1.8rem;
  text-align:  right;
  line-height: 1;
}


/* ═══════════════════════════════════════════════════
   Selector de figura personalizado
═══════════════════════════════════════════════════ */
.fig-dropdown { position: relative; display: inline-block; }

.fig-dropdown__trigger {
  min-width:     3rem;
  padding:       0.45rem 1rem;
  background:    var(--color-surface);
  border:        2px solid var(--color-border);
  border-radius: var(--radius);
  font-family:   var(--font-display);
  font-size:     1.2rem;
  font-weight:   700;
  cursor:        pointer;
  transition:    border-color .15s;
}
.fig-dropdown__trigger:not(:disabled):hover,
.fig-dropdown__trigger:focus { outline: none; border-color: var(--color-teal); }
.fig-dropdown__trigger:disabled { opacity: .4; cursor: not-allowed; }

.fig-dropdown__menu {
  position:              absolute;
  top:                   calc(100% + 4px);
  left:                  0;
  z-index:               100;
  background:            var(--color-bg);
  border:                2px solid var(--color-border);
  border-radius:         var(--radius);
  box-shadow:            var(--shadow);
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   2px;
  padding:               4px;
  min-width:             150px;
}

.fig-option {
  padding:       0.4rem;
  text-align:    center;
  font-family:   var(--font-display);
  font-size:     1rem;
  font-weight:   700;
  border-radius: 3px;
  cursor:        pointer;
  transition:    background .1s;
}
.fig-option:hover       { background: var(--color-surface); }
.fig-option--selected   { background: var(--color-teal); color: #fff; }


/* ═══════════════════════════════════════════════════
   Banner marquesina LED (fondo oscuro tipo tablero)
═══════════════════════════════════════════════════ */
.marquee-bar {
  background:  #111;
  min-height:  var(--marquee-h);
  display:     flex;
  flex-direction: column;
  flex-shrink: 0;
}

.marquee-wrap {
  flex:     1;
  overflow: hidden;
  position: relative;
  padding:  0.6rem 0;
  /* Bordes difuminados — la cinta "aparece" y "desaparece" suavemente */
  mask-image: linear-gradient(
    to right,
    transparent 0%, black 5%, black 95%, transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%, black 5%, black 95%, transparent 100%
  );
}

.marquee-track {
  display:        inline-flex;
  align-items:    center;
  gap:            0.55rem;
  white-space:    nowrap;
  will-change:    transform;
  /* El desplazamiento (translateX) lo controla app.js con requestAnimationFrame */
  transform:      translateX(100vw);
}

/* Chips individuales */
.chip {
  display:         inline-flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         0.3rem 0.65rem 0.4rem;
  background:      #222;
  border:          1px solid #3a3a3a;
  border-radius:   0.45rem;
  min-width:       3.2rem;
}
/* Número recién cantado: la cinta va en orden ascendente, así que el actual
   puede quedar en cualquier punto — el pulso ayuda a ubicarlo de un vistazo */
.chip--current {
  background:   var(--color-yellow);
  border-color: var(--color-yellow);
  animation:    chip-pulse 1.6s ease-in-out infinite;
}

@keyframes chip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 160, 7, 0); }
  50%      { box-shadow: 0 0 14px 3px rgba(242, 160, 7, .55); }
}

.chip__letter {
  font-size:      0.58rem;
  font-weight:    700;
  letter-spacing: .09em;
  color:          #888;
  line-height:    1;
  text-transform: uppercase;
}
.chip--current .chip__letter { color: #665500; }

.chip__number {
  font-family: var(--font-display);
  font-size:   1.65rem;
  font-weight: 900;
  color:       #fff;
  line-height: 1;
}
.chip--current .chip__number { color: #111; }

/* Controles de velocidad (solo operador) */
.marquee-controls {
  display:     flex;
  align-items: center;
  gap:         1rem;
  padding:     0.3rem 1rem 0.45rem;
  background:  #0d0d0d;
}
.speed-control {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  font-size:   0.78rem;
  color:       #777;
}
.speed-control input[type="range"] { accent-color: var(--color-yellow); cursor: pointer; }
#speed-val { color: var(--color-yellow); font-weight: 700; min-width: 1.2ch; }


/* ═══════════════════════════════════════════════════
   Toasts de premio
═══════════════════════════════════════════════════ */
.toast-container {
  position:        fixed;
  bottom:          1.25rem;
  left:            50%;
  transform:       translateX(-50%);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             0.5rem;
  z-index:         300;
  pointer-events:  none;
}
.toast {
  background:    var(--color-ink);
  color:         #fff;
  padding:       0.65rem 1.5rem;
  border-radius: 2rem;
  font-size:     0.95rem;
  font-weight:   600;
  box-shadow:    0 4px 18px rgba(0,0,0,.25);
  opacity:       0;
  transform:     translateY(10px) scale(.95);
  transition:    opacity .22s, transform .22s;
}
.toast--visible { opacity: 1; transform: translateY(0) scale(1); }


/* ═══════════════════════════════════════════════════
   Vista espectador
═══════════════════════════════════════════════════ */
/* Página scrolleable: el header sticky queda arriba y las secciones
   (Juego / Tablero / Precios) se apilan; los botones del header anclan a cada una */
.spectator-page {
  min-height: 100%;
  background: var(--color-bg);
}

.header--spectator {
  gap: 0.6rem;
}

/* Navegación del header (anclas en /ver, links entre vistas del operador) */
.header__nav {
  display: flex;
  gap:     0.15rem;
}
.header__nav-btn {
  display:         inline-flex;
  align-items:     center;
  font-size:       0.85rem;
  font-weight:     700;
  color:           var(--color-ink-2);
  padding:         0.35rem 0.6rem;
  border-radius:   var(--radius);
  text-decoration: none;
  transition:      background .15s, color .15s;
}
.header__nav-btn:hover {
  background: var(--color-surface);
  color:      var(--color-ink);
}
.header__nav-btn--active {
  background: var(--color-surface);
  color:      var(--color-ink);
}
.header__spacer { flex: 1; }

/* ── Menú de usuario (header) ── */
.user-menu__dd { position: relative; }
.user-menu__dd > summary { list-style: none; cursor: pointer; user-select: none; }
.user-menu__dd > summary::-webkit-details-marker { display: none; }
.user-menu__chip {
  display:       inline-flex;
  align-items:   center;
  gap:           0.5rem;
  padding:       0.25rem 0.6rem 0.25rem 0.3rem;
  border:        1.5px solid var(--color-border);
  border-radius: 999px;
  background:    var(--color-bg);
}
.user-menu__dd[open] .user-menu__chip { background: var(--color-surface); }
.user-menu__avatar {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           1.7rem;
  height:          1.7rem;
  border-radius:   50%;
  background:      var(--color-red);
  color:           var(--color-inverse);
  font-weight:     700;
  font-size:       0.85rem;
}
.user-menu__name  { font-size: 0.88rem; font-weight: 700; }
.user-menu__caret { font-size: 0.7rem; color: var(--color-ink-2); }
.user-menu__panel {
  position:      absolute;
  right:         0;
  top:           calc(100% + 8px);
  z-index:       60;
  width:         260px;
  background:    var(--color-bg);
  border:        2px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow);
  padding:       0.5rem;
}
.user-menu__head {
  padding:       0.5rem 0.6rem 0.65rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.35rem;
}
.user-menu__head-row { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; }
.user-menu__role {
  font-size:      0.62rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--color-teal);
}
.user-menu__slug {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             0.5rem;
  margin-top:      0.25rem;
  font-size:       0.78rem;
  color:           var(--color-ink-2);
}
.user-menu__mini {
  font-size:     0.7rem;
  font-weight:   700;
  color:         var(--color-teal);
  padding:       0.1rem 0.45rem;
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
}
.user-menu__item {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  gap:             0.5rem;
  padding:         0.5rem 0.6rem;
  border-radius:   var(--radius);
  font-size:       0.9rem;
  font-weight:     600;
  color:           var(--color-ink);
  text-decoration: none;
  text-align:      left;
}
.user-menu__item:hover { background: var(--color-surface); }
.user-menu__item--danger { color: var(--color-red); }
.user-menu__go    { font-size: 0.75rem; color: var(--color-teal); font-weight: 700; }
.user-menu__sep   { height: 1px; background: var(--color-border); margin: 0.35rem 0; }
.user-menu__label {
  padding:        0.25rem 0.6rem 0.1rem;
  font-size:      0.65rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--color-ink-2);
}
.user-menu__empty { display: block; padding: 0.3rem 0.6rem; font-size: 0.8rem; color: var(--color-ink-2); }

/* Banner de impersonación */
.impersonation-bar {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             1rem;
  padding:         0.45rem 1.25rem;
  background:      var(--color-yellow);
  color:           #111111;
  font-size:       0.88rem;
  flex-shrink:     0;
}

/* Datos del perfil */
.perfil-datos { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; }
.perfil-dato  { display: flex; align-items: center; gap: 0.8rem; }
.perfil-dato__label {
  width:          110px;
  font-size:      0.72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--color-ink-2);
  flex-shrink:    0;
}
.perfil-dato a { color: var(--color-teal); text-decoration: none; font-weight: 600; margin-right: 0.5rem; }
.perfil-dato a:hover { text-decoration: underline; }
.home-error--ok { color: var(--color-teal); background: #eef6f0; border-left-color: var(--color-teal); }

/* Editor de precios (/perfil) */
.precios-editor {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.25rem;
  margin-bottom:         0.75rem;
}
@media (max-width: 700px) { .precios-editor { grid-template-columns: 1fr; } }
.precios-editor__title {
  font-size:     0.85rem;
  font-weight:   700;
  margin-bottom: 0.5rem;
}
.precios-row {
  display:               grid;
  grid-template-columns: 1fr 110px 2rem;
  gap:                   0.4rem;
  margin-bottom:         0.4rem;
  align-items:           center;
}
.precios-row input {
  padding:       0.4rem 0.6rem;
  border:        1.5px solid var(--color-border);
  border-radius: var(--radius);
  font-size:     0.88rem;
  background:    var(--color-inverse);
  min-width:     0;
}
.precios-row input:focus { outline: none; border-color: var(--color-teal); }
.precios-row__del {
  color:         var(--color-ink-2);
  font-size:     0.9rem;
  border-radius: var(--radius);
}
.precios-row__del:hover { color: var(--color-red); background: var(--color-surface); }

/* Logo del tenant en el header (reemplaza el texto BingoYa) */
.header__logo {
  display:    block;
  height:     2.1rem;
  max-width:  170px;
  object-fit: contain;
}

/* Editor de marca en /inicio */
.brand-colors { grid-template-columns: repeat(3, 1fr); }
.brand-colors input[type="color"] {
  width:         100%;
  height:        2.2rem;
  padding:       0.15rem;
  border:        2px solid var(--color-border);
  border-radius: var(--radius);
  background:    var(--color-bg);
  cursor:        pointer;
}
.brand-logo-preview {
  display:       flex;
  align-items:   center;
  gap:           0.75rem;
  margin-bottom: 0.7rem;
}
.brand-logo-preview img {
  height:        2.6rem;
  max-width:     150px;
  object-fit:    contain;
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       2px;
}

/* Banner de aviso del operador: persistente y visible durante el scroll */
.notice-banner {
  position:    sticky;
  top:         var(--header-h);
  z-index:     15;
  background:  var(--color-yellow);
  color:       #111111;
  padding:     0.55rem 1.25rem;
  text-align:  center;
  font-weight: 700;
  font-size:   clamp(0.95rem, 2.2vw, 1.15rem);
  box-shadow:  var(--shadow);
}

/* Sección Juego: ocupa la pantalla completa (menos el header) para que el
   proyector muestre el display; el resto de la página vive bajo el fold */
.sec-juego {
  display:           flex;
  flex-direction:    column;
  height:            calc(100vh - var(--header-h));
  height:            calc(100svh - var(--header-h));
  scroll-margin-top: var(--header-h);
}

#sec-tablero,
#sec-precios {
  scroll-margin-top: var(--header-h);
}

/* Chip de ronda en el header del espectador */
.round-chip {
  display:        inline-flex;
  align-items:    center;
  gap:            0.45rem;
  padding:        0.3rem 0.8rem;
  background:     var(--color-surface);
  border-radius:  999px;
  font-size:      0.72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--color-teal);
  white-space:    nowrap;
}
.round-chip__set:not(:empty)::before {
  content:      "·";
  margin-right: 0.45rem;
  color:        var(--color-ink-2);
}
.round-chip__set { color: var(--color-ink-2); }

/* Display espectador — número aún más grande */
.display--spectator { padding: 1.5rem 1rem 1rem; }
.display--spectator .display__number {
  font-size: clamp(8rem, 38vw, 22rem);
}
.display--spectator .display__letter {
  font-size: clamp(2.5rem, 9vw, 5rem);
}

/* ── Layout de juego espectador: display | handle | panel lateral ── */
.game-row {
  display:    flex;
  flex:       1;
  min-height: 0;
  overflow:   hidden;
}
.game-row .display--spectator {
  flex:      1;
  min-width: 0;
  overflow:  hidden;
  position:  relative;
}
.resize-handle {
  width:        5px;
  flex-shrink:  0;
  cursor:       col-resize;
  background:   var(--color-border);
  transition:   background .15s;
  touch-action: none;
}
.resize-handle:hover,
.resize-handle--active { background: var(--color-teal); }
/* Panel lateral del espectador: tarjetas sobre el fondo (rediseño) */
.side-panel {
  width:          340px;
  min-width:      160px;
  flex-shrink:    0;
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  overflow:       hidden;
  padding:        1.4rem 1.4rem 1.4rem 0.4rem;
}
.side-panel .section {
  background:    var(--color-surface);
  border-radius: var(--radius-lg);
  border-bottom: none;
  padding:       1rem 1.1rem 1.15rem;
}
.side-panel .section--figure {
  flex-shrink: 0;
  position:    relative;
}
.side-panel .section--prizes {
  flex:       1;
  min-height: 0;
  overflow-y: auto;
}
/* Grilla de figura cuadrada en espectador, centrada en su tarjeta */
.side-panel #figure-grid {
  aspect-ratio: 1;
  margin:       0 auto;
}

/* Handle de resize de la figura (esquina inferior izquierda) */
.figure-resize-corner {
  position:   absolute;
  bottom:     4px;
  left:       4px;
  width:      16px;
  height:     16px;
  cursor:     nesw-resize;
  background: linear-gradient(45deg, var(--color-teal) 50%, transparent 50%);
  opacity:    0;
  transition: opacity .15s;
  touch-action: none;
}
.section--figure:hover .figure-resize-corner { opacity: 0.4; }
.figure-resize-corner:hover                  { opacity: 0.7; }
.figure-resize-corner--active                { opacity: 1 !important; }

/* Solo lectura (espectador): filas planas dentro de la tarjeta, sin cajitas */
.prizes--readonly .prize-card {
  cursor:     default;
  border:     none;
  background: transparent;
  padding:    0.4rem 0;
}
.prizes--readonly .prize-card__count {
  font-family: var(--font-display);
  font-weight: 900;
  font-size:   1.3rem;
  color:       var(--color-teal);
}

/* Sin premios restantes (solo operador): visible pero atenuado */
.prize-card--empty { opacity: .45; }

/* En operador el número anterior va en flujo normal (no absoluto) */
.operator-page .display__prev {
  position:   relative;
  bottom:     auto;
  left:       auto;
  align-self: flex-start;
  margin-top: 0.75rem;
}


/* Espectador: cinta sin controles; margin-top:auto quitado (ahora está al tope) */
.spectator-page .marquee-controls { display: none; }
.spectator-page .marquee-wrap     { min-height: 5rem; }

/* Cinta deslizable: pan-y deja el scroll vertical al navegador
   y entrega los gestos horizontales a los pointer events */
.spectator-page .marquee-wrap {
  cursor:              grab;
  touch-action:        pan-y;
  user-select:         none;
  -webkit-user-select: none;
}
.spectator-page .marquee-wrap--dragging { cursor: grabbing; }

/* Modal QR */
.qr-modal {
  position:        fixed;
  inset:           0;
  z-index:         800;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(0, 0, 0, 0.65);
}
.qr-modal__box {
  position:       relative;
  background:     var(--color-bg);
  border-radius:  var(--radius-lg);
  padding:        2rem;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1rem;
  box-shadow:     0 8px 40px rgba(0, 0, 0, .35);
}
.qr-modal__close {
  position:    absolute;
  top:         0.6rem;
  right:       0.6rem;
  font-size:   1.2rem;
  line-height: 1;
  color:       var(--color-ink-2);
  padding:     0.3rem 0.5rem;
}
.qr-modal__close:hover { color: var(--color-ink); }
.qr-modal__img {
  padding:       0.4rem;
  background:    #fff;
  border-radius: var(--radius);
  border:        2px solid var(--color-border);
  line-height:   0;
}
.qr-modal__img canvas,
.qr-modal__img img { display: block; border-radius: 2px; }
.qr-modal__url {
  font-size:  0.82rem;
  color:      var(--color-ink-2);
  word-break: break-all;
  text-align: center;
  max-width:  360px;
}


/* ═══════════════════════════════════════════════════
   Pantalla de espera (/ver sin ronda activa)
═══════════════════════════════════════════════════ */
/* ── Pantalla de reposo (sin ronda activa) ──
   Lidera con lo útil mientras no hay juego: unirse por QR + precios.
   El acento (chip y puntos) codifica el sub-estado:
   teal = por comenzar · ámbar = entre rondas · gris = sin evento. */
.reposo {
  --reposo-accent:       var(--color-teal);
  display:               grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:                   clamp(1.5rem, 4vw, 3.5rem);
  align-items:           center;
  padding:               clamp(2rem, 5vw, 4rem) clamp(1.25rem, 5vw, 4.5rem);
  min-height:            calc(100vh - var(--header-h));
  box-sizing:            border-box;
}
.reposo--wait  { --reposo-accent: var(--color-teal);   }
.reposo--pause { --reposo-accent: var(--color-yellow); }
.reposo--idle  { --reposo-accent: var(--color-ink-2);  }

.reposo__intro {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            1.4rem;
}
.reposo-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           0.55rem;
  padding:       0.45rem 0.9rem;
  border-radius: 999px;
  background:    color-mix(in srgb, var(--reposo-accent) 14%, transparent);
  color:         var(--reposo-accent);
  font-weight:   600;
  font-size:     0.95rem;
}
.reposo-chip__dot {
  width:         0.6rem;
  height:        0.6rem;
  border-radius: 50%;
  background:    var(--reposo-accent);
}
.reposo__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size:   clamp(2.2rem, 6vw, 4.1rem);
  line-height: 1.02;
  color:       var(--color-ink);
  margin:      0;
}
.reposo__sub {
  font-size:   clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.4;
  color:       var(--color-ink-2);
  max-width:   42ch;
  margin:      0;
}

/* Puntos animados de "esperando" (heredan el acento del estado) */
.reposo__dots { display: flex; gap: 0.5rem; }
.reposo__dots[hidden] { display: none; }
.reposo__dots span {
  width:         0.7rem;
  height:        0.7rem;
  border-radius: 50%;
  background:    var(--reposo-accent);
  animation:     dot-bounce 1.2s infinite ease-in-out;
}
.reposo__dots span:nth-child(2) { animation-delay: .2s; }
.reposo__dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: .4; }
  40%           { transform: scale(1);   opacity: 1;  }
}

/* Tarjeta del QR inline (protagonista del reposo) */
.reposo-qr {
  display:       flex;
  align-items:   center;
  gap:           1.6rem;
  margin-top:    0.6rem;
  padding:       1.5rem 1.8rem;
  background:    var(--color-inverse);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow:    0 8px 24px rgba(26, 23, 20, .08);
}
.reposo-qr[hidden] { display: none; }
.reposo-qr__code {
  flex:          0 0 auto;
  width:         clamp(120px, 12vw, 176px);
  height:        clamp(120px, 12vw, 176px);
  background:    #fff;
  border-radius: 0.5rem;
}
.reposo-qr__code img { width: 100%; height: 100%; display: block; }
.reposo-qr__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size:   clamp(1.15rem, 1.8vw, 1.6rem);
  line-height: 1.1;
  color:       var(--color-ink);
  margin:      0 0 0.4rem;
}
.reposo-qr__text {
  font-size:   0.95rem;
  line-height: 1.35;
  color:       var(--color-ink-2);
  margin:      0 0 0.5rem;
  max-width:   32ch;
}
.reposo-qr__url {
  font-weight: 600;
  font-size:   0.9rem;
  color:       var(--color-teal);
}

/* Columna de precios dentro del reposo */
.reposo__prices {
  align-self:    center;
  background:    var(--color-inverse);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow:    0 8px 24px rgba(26, 23, 20, .08);
  padding:       1.6rem 1.8rem 1.8rem;
}
.reposo__prices-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size:   1.6rem;
  color:       var(--color-ink);
  margin:      0 0 1.1rem;
}
.reposo__prices .reposo-prices { max-width: none; }

/* Franja de compartir (solo móvil): botón nativo + QR chico.
   Fija en teal (módulo de "unirse", independiente del acento del estado). */
.reposo-share { display: none; }  /* oculta en escritorio: allí manda la tarjeta QR grande */
.reposo-share[hidden] { display: none; }
.reposo-share__body {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            0.85rem;
  width:          100%;
}
.reposo-share__title {
  font-weight: 600;
  font-size:   1rem;
  line-height: 1.22;
  color:       var(--color-ink);
}
.reposo-share__actions {
  display:   flex;
  gap:       0.6rem;
  flex-wrap: wrap;
  width:     100%;
}
.reposo-share__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.4rem;
  flex:            1 1 auto;
  padding:         0.65rem 0.95rem;
  border:          none;
  border-radius:   0.6rem;
  background:      var(--color-teal);
  color:           #fff;
  font:            inherit;
  font-weight:     600;
  font-size:       0.95rem;
  cursor:          pointer;
}
.reposo-share__btn--ghost {
  background: transparent;
  color:      var(--color-teal);
  border:     1px solid color-mix(in srgb, var(--color-teal) 45%, transparent);
}

/* Reposo en pantalla estrecha (móvil): manda compartir + precios */
@media (max-width: 760px) {
  .reposo {
    grid-template-columns: 1fr;
    align-items:           stretch;
    min-height:            0;
    gap:                   1.25rem;
    padding:               1.25rem 1.1rem 2rem;
  }
  .reposo__title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  /* Se ocultan bajada y QR grande; se conservan los puntos de "esperando"
     y entra la franja de compartir */
  .reposo__sub,
  .reposo-qr { display: none; }
  .reposo-share {
    display:       flex;
    padding:       1rem;
    background:    color-mix(in srgb, var(--color-teal) 9%, var(--color-inverse));
    border:        1px solid color-mix(in srgb, var(--color-teal) 28%, transparent);
    border-radius: var(--radius);
  }
  .reposo-share[hidden] { display: none; }
}

/* Sección de precios (siempre visible, al final de la página) */
.precios-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        2.25rem 1.25rem 3.5rem;
  background:     var(--color-surface);
}
.precios-wrap__title {
  font-family:   var(--font-display);
  font-size:     1.5rem;
  font-weight:   900;
  margin-bottom: 1.25rem;
}

/* Crédito de la plataforma al pie de /ver — el rojo es fijo (marca BingoYa,
   no se tematiza con los colores del tenant) */
.ver-footer {
  padding:    1rem 1.25rem 1.4rem;
  text-align: center;
  font-size:  0.8rem;
  color:      var(--color-ink-2);
  background: var(--color-surface);
}
.ver-footer__brand {
  font-family:     var(--font-display);
  font-weight:     900;
  font-size:       0.95rem;
  color:           #d92639;
  text-decoration: none;
}
.ver-footer__brand:hover { text-decoration: underline; }

/* Lista de precios */
.prices-section {
  width:          100%;
  max-width:      420px;
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
}
.prices-group__title {
  font-size:      0.78rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--color-ink-2);
  margin-bottom:  0.5rem;
}
.prices-list {
  list-style:    none;
  padding:       0;
  margin:        0;
  background:    var(--color-inverse);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  overflow:      hidden;
}
.prices-item {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         0.6rem 1rem;
  font-size:       0.95rem;
  border-bottom:   1px solid var(--color-border);
}
.prices-item:last-child { border-bottom: none; }
.prices-item__precio {
  font-weight: 700;
  color:       var(--color-teal);
}


/* ═══════════════════════════════════════════════════
   Responsive — teléfono vertical (≤ 600 px)
═══════════════════════════════════════════════════ */
/* ── Responsivo /ver ─────────────────────────────── */

/* Pantalla estrecha: apila el panel debajo del número */
@media (max-width: 700px) {
  /* En pantalla estrecha el juego se apila y toma su altura natural */
  .sec-juego { height: auto; }
  /* Prioriza la navegación por sobre el nombre del evento en el header */
  .header--spectator .header__event { display: none; }

  .game-row         { flex-direction: column; overflow: visible; }
  /* El display no tiene flex-basis:0 en columna → toma su altura natural */
  .game-row .display--spectator { flex: 0 0 auto; }
  .resize-handle    { display: none; }
  .prev-resize-corner   { display: none; }
  .figure-resize-corner { display: none; }
  /* Figura y premios lado a lado como tarjetas compactas */
  .side-panel {
    width:          100% !important;
    min-width:      0;
    overflow:       visible;
    flex-direction: row;
    align-items:    stretch;
    gap:            0.7rem;
    padding:        0.9rem;
  }
  .side-panel .section--figure { flex: 0 0 auto; }
  .side-panel .section--prizes { flex: 1; min-width: 0; overflow: visible; }
  .side-panel #figure-grid     { width: 132px; margin: 0 auto; }
  .display--spectator .display__number { font-size: clamp(7rem, 46vw, 13rem); }
  .prizes--readonly .prize-card { padding: 0.25rem 0; }
  .prizes--readonly .prize-card__label { font-size: 0.85rem; }
}

/* Móvil landscape — número más compacto */
@media (max-height: 500px) and (orientation: landscape) {
  .display--spectator .display__number { font-size: clamp(4.5rem, 22vh, 10rem); }
  .display--spectator .display__letter { font-size: clamp(1.5rem, 6vh, 3rem); }
}

/* Pantalla grande (TV / proyector) */
@media (min-width: 1200px) {
  .display--spectator .display__number { font-size: clamp(12rem, 22vw, 22rem); }
  .display--spectator .display__letter { font-size: clamp(3.5rem, 6vw, 6rem); }
}


/* ═══════════════════════════════════════════════════
   Home de eventos
═══════════════════════════════════════════════════ */
.home-page {
  display:        flex;
  flex-direction: column;
  height:         100vh;
  overflow:       hidden;
}

.home-layout {
  display:               grid;
  grid-template-columns: 340px 1fr;
  flex:                  1;
  overflow:              hidden;
  min-height:            0;
}

.home-panel--left {
  overflow-y:   auto;
  border-right: 2px solid var(--color-border);
}

.home-detail {
  overflow-y: auto;
}

/* El contenido del detalle no usa todo el ancho disponible */
.home-detail #event-detail {
  max-width: 1020px;
}

/* ── Primer uso: hero de creación ── */
.inicio-hero {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             1.4rem;
  padding:         3rem 1.5rem;
  text-align:      center;
}
.inicio-hero__title {
  font-family: var(--font-display);
  font-size:   clamp(2rem, 5vw, 2.9rem);
  font-weight: 900;
}
.inicio-hero__sub {
  max-width: 480px;
  color:     var(--color-ink-2);
}
.inicio-hero__form {
  width:         100%;
  max-width:     460px;
  background:    var(--color-surface);
  border-radius: var(--radius-lg);
  padding:       1.5rem 1.75rem 1.6rem;
  text-align:    left;
}
.inicio-hero__steps {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  margin-top:  0.4rem;
}
.hero-step {
  display:     inline-flex;
  align-items: center;
  gap:         0.45rem;
  font-size:   0.85rem;
  font-weight: 700;
  color:       var(--color-ink-2);
}
.hero-step i {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           1.7rem;
  height:          1.7rem;
  border-radius:   50%;
  background:      var(--color-border);
  font-style:      normal;
  font-size:       0.8rem;
}
.hero-step--on       { color: var(--color-ink); }
.hero-step--on i     { background: var(--color-red); color: var(--color-inverse); }
.hero-step__line     { width: 2rem; height: 2px; background: var(--color-border); }
@media (max-width: 640px) {
  .inicio-hero__steps { flex-wrap: wrap; justify-content: center; row-gap: 0.5rem; }
  .hero-step__line    { display: none; }
}

/* ── Checklist de próximos pasos ── */
.detail-checklist {
  background:    var(--color-surface);
  border-radius: var(--radius-lg);
  padding:       1.1rem 1.3rem 1.2rem;
  max-width:     680px;
}
.detail-checklist__title {
  font-size:     1rem;
  font-weight:   700;
  margin-bottom: 0.4rem;
}
.check-step {
  display:     flex;
  align-items: center;
  gap:         0.8rem;
  padding:     0.65rem 0;
}
.check-step__circle {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           1.8rem;
  height:          1.8rem;
  border-radius:   50%;
  background:      var(--color-border);
  font-size:       0.85rem;
  font-weight:     700;
  color:           var(--color-ink-2);
  flex-shrink:     0;
}
.check-step--done .check-step__circle { background: #1a7a45; color: var(--color-inverse); }
.check-step__info { display: flex; flex-direction: column; gap: 0.05rem; flex: 1; }
.check-step__info strong { font-size: 0.95rem; }
.check-step--done .check-step__info strong { opacity: .55; }
.check-step__info span { font-size: 0.78rem; color: var(--color-ink-2); }
.check-step--pending { opacity: .75; }

/* ── Rondas + Cartones lado a lado ── */
.detail-cols {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
  padding:               0.9rem 1rem;
  align-items:           start;
}
.detail-cols__card {
  background:    var(--color-surface);
  border-radius: var(--radius-lg);
  border-bottom: none;
}
@media (max-width: 980px) {
  .detail-cols { grid-template-columns: 1fr; }
}

.home-empty {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      12rem;
  color:           var(--color-ink-2);
  font-size:       0.95rem;
  padding:         2rem;
  text-align:      center;
}

/* Listas del home */
.home-list {
  display:        flex;
  flex-direction: column;
}
.home-list--rounds { gap: 0.4rem; padding: 0 1rem 0.5rem; }
.home-list__empty {
  padding:   0.9rem 1rem;
  font-size: 0.85rem;
  color:     var(--color-ink-2);
}

/* Items de evento */
.home-event-item {
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
  padding:       0.55rem 1rem;
  border-bottom: 1px solid var(--color-border);
  transition:    background .1s;
}
.home-event-item:hover { background: var(--color-surface); }
.home-event-item--active   { background: #f0faf9; }
.home-event-item--selected { background: #ddf0ee; box-shadow: inset 3px 0 0 var(--color-teal); }
.home-event-item--selected:hover { background: #ddf0ee; }

.home-event-item__main {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            0.1rem;
  cursor:         pointer;
}
.home-event-item__name {
  font-weight:   600;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.home-event-item__meta { font-size: 0.75rem; color: var(--color-ink-2); }
.home-event-item__btns { display: flex; gap: 0.3rem; flex-shrink: 0; }

/* Items de ronda en el detalle */
.home-round-item {
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
  padding:       0.5rem 0.65rem;
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  background:    var(--color-surface);
}
.home-round-item--active   { border-color: var(--color-teal); background: #f0faf9; }
.home-round-item--finished { opacity: .55; }

.home-round-item__info {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            0.1rem;
}
.home-round-item__name {
  font-weight:   600;
  font-size:     0.9rem;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.home-round-item__meta { font-size: 0.72rem; color: var(--color-ink-2); }
.home-round-item__status {
  font-size:      0.68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color:          var(--color-ink-2);
  flex-shrink:    0;
}
.home-round-item--active .home-round-item__status { color: var(--color-teal); }
.home-round-item__btns { display: flex; gap: 0.3rem; flex-shrink: 0; }

/* Badges */
.event-badge {
  font-size:      0.65rem;
  font-weight:    700;
  text-transform: uppercase;
  padding:        0.15rem 0.5rem;
  border-radius:  0.3rem;
  letter-spacing: .04em;
}
.event-badge--active   { background: var(--color-teal); color: #fff; }
.event-badge--inactive { background: var(--color-surface); color: var(--color-ink-2); border: 1px solid var(--color-border); }
.event-badge--word     { background: var(--color-yellow); color: #111; letter-spacing: .12em; }

/* Cabecera del detalle */
.home-detail__header  { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.home-detail__actions { margin-top: 0.15rem; }
.home-detail__actions-row {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  flex-wrap:   wrap;
}

/* Secciones colapsables del panel izquierdo */
.home-collapse {
  border-bottom: 1px solid var(--color-border);
}
.home-collapse > summary {
  padding:        0.9rem 1rem;
  cursor:         pointer;
  font-size:      0.72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--color-ink-2);
  user-select:    none;
}
.home-collapse > summary:hover { color: var(--color-ink); }
.home-collapse > .section {
  border-bottom: none;
  padding-top:   0;
}

/* ── Página de usuarios (solo superadmin) ── */
.usuarios-page {
  display:        flex;
  flex-direction: column;
  min-height:     100vh;
}
.usuarios-main {
  width:     100%;
  max-width: 680px;
  margin:    0 auto;
  padding:   1rem 1.25rem 3rem;
}
.usuarios-main .home-round-item__meta a {
  color:           var(--color-teal);
  text-decoration: none;
}
.usuarios-main .home-round-item__meta a:hover { text-decoration: underline; }

/* Select figura */
.home-select {
  width:         100%;
  padding:       0.5rem 0.75rem;
  border:        2px solid var(--color-border);
  border-radius: var(--radius);
  font-family:   var(--font-display);
  font-size:     1rem;
  font-weight:   700;
  background:    var(--color-bg);
  color:         var(--color-ink);
  cursor:        pointer;
  transition:    border-color .15s;
}
.home-select:focus { outline: none; border-color: var(--color-teal); }

/* Error en home */
.home-error {
  font-size:     0.85rem;
  font-weight:   600;
  color:         var(--color-red);
  background:    #fff0f1;
  border-left:   3px solid var(--color-red);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding:       0.4rem 0.65rem;
  margin-top:    0.5rem;
}

@media (max-width: 700px) {
  .home-layout {
    grid-template-columns: 1fr;
    height:                auto;
    overflow:              visible;
  }
  .home-page        { height: auto; overflow: auto; }
  .home-panel--left { border-right: none; border-bottom: 2px solid var(--color-border); }
}


/* ═══════════════════════════════════════════════════
   Modal verificador de cartón (solo operador)
═══════════════════════════════════════════════════ */
.verifier-modal {
  position:        fixed;
  inset:           0;
  z-index:         800;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(0, 0, 0, 0.65);
}

.verifier-modal__box {
  background:    var(--color-bg);
  border-radius: var(--radius-lg);
  padding:       1.75rem 1.75rem 1.5rem;
  max-width:     440px;
  width:         92%;
  box-sizing:    border-box;
  box-shadow:    0 8px 40px rgba(0, 0, 0, .3);
  overflow:      hidden; /* impide que hijos desborden la caja */
}

.verifier-modal__title {
  font-family:   var(--font-display);
  font-size:     1.35rem;
  font-weight:   700;
  margin-bottom: 1.1rem;
}

.verifier-modal__input-row {
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
  margin-bottom: 0.9rem;
  min-width:     0; /* permite que el row se encoja */
}

/* El botón "Agregar" no se deforma: tamaño fijo según su contenido */
.verifier-modal__input-row .btn {
  flex-shrink: 0;
}

.verifier-modal__input {
  flex:       1 1 0%;  /* crece para llenar el espacio disponible */
  min-width:  0;       /* anula el min-width:auto del navegador en inputs */
  box-sizing: border-box;
  padding:    0.45rem 0.7rem;
  border:     2px solid var(--color-border);
  border-radius: var(--radius);
  background:  var(--color-inverse);
  font-family: var(--font-display);
  font-size:   1.5rem;
  font-weight: 700;
  text-align:  center;
  transition:  border-color .15s;
}
.verifier-modal__input:focus { outline: none; border-color: var(--color-teal); }

.verifier-chips {
  display:       flex;
  flex-wrap:     wrap;
  gap:           0.4rem;
  min-height:    2.8rem;
  margin-bottom: 0.9rem;
}

.verifier-chip {
  display:     inline-flex;
  align-items: center;
  gap:         0.3rem;
  padding:     0.3rem 0.55rem 0.3rem 0.7rem;
  border-radius: 2rem;
  font-family: var(--font-display);
  font-size:   1rem;
  font-weight: 700;
  line-height: 1;
}
.verifier-chip--ok  {
  background: #d4f5e0;
  color:      #1a5c32;
  border:     1.5px solid #5cb87a;
}
.verifier-chip--err {
  background: #ffe0e0;
  color:      #8b1a1a;
  border:     1.5px solid var(--color-red);
}
.verifier-chip__remove {
  font-size:   0.7rem;
  font-weight: 900;
  color:       inherit;
  opacity:     .55;
  line-height: 1;
  padding:     0 0.1rem;
}
.verifier-chip__remove:hover { opacity: 1; }

.verifier-error {
  font-size:     0.875rem;
  font-weight:   600;
  color:         var(--color-red);
  background:    #fff0f1;
  border-left:   3px solid var(--color-red);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding:       0.45rem 0.7rem;
  margin-bottom: 0.7rem;
}

.verifier-modal__actions {
  display:   flex;
  gap:       0.5rem;
  flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════
   Overlay de anuncio: ganador / falsa alarma
   (operador y espectador, sincronizado por WS)
═══════════════════════════════════════════════════ */
.announce-overlay {
  position:        fixed;
  inset:           0;
  z-index:         900;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(0, 0, 0, 0.88);
  padding:         2rem;
}

.announce-overlay__box {
  position:   relative;
  text-align: center;
  max-width:  700px;
}

.announce-overlay__close {
  position:  absolute;
  top:       -2.5rem;
  right:     -0.5rem;
  font-size: 1.6rem;
  color:     rgba(255, 255, 255, .5);
  padding:   0.2rem 0.5rem;
  line-height: 1;
}
.announce-overlay__close:hover { color: #fff; }

.announce-overlay__text {
  font-family:    var(--font-display);
  font-size:      clamp(2.2rem, 8vw, 5rem);
  font-weight:    900;
  color:          var(--color-yellow);
  line-height:    1.1;
  letter-spacing: -.02em;
}

.announce-overlay[data-kind="wrong-card"] .announce-overlay__text {
  color: #ff6b6b;
}

/* ── Show de medio tiempo ── */

.halftime-overlay {
  position:        fixed;
  inset:           0;
  z-index:         950;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(0, 0, 0, 0.92);
  padding:         2rem;
}

.halftime-overlay__badge {
  display:     flex;
  align-items: center;
  gap:         1rem;
  opacity:     1;
  transition:  opacity 0.8s ease;
}

.halftime-overlay__badge--hidden {
  opacity: 0;
}

.halftime-overlay__icon {
  width:  clamp(2rem, 6vw, 3.5rem);
  height: clamp(2rem, 6vw, 3.5rem);
  color:  var(--color-yellow);
  flex-shrink: 0;
}

.halftime-overlay__instagram {
  font-family:    var(--font-display);
  font-size:      clamp(1.4rem, 6vw, 3rem);
  font-weight:    800;
  color:          var(--color-yellow);
  letter-spacing: -.01em;
}


/* ═══════════════════════════════════════════════════
   Modal de generación de cartones (home.html)
═══════════════════════════════════════════════════ */
.home-modal {
  position:        fixed;
  inset:           0;
  z-index:         800;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(0, 0, 0, 0.65);
  padding:         1rem;
}

.home-modal__box {
  background:    var(--color-bg);
  border-radius: var(--radius-lg);
  padding:       1.75rem;
  width:         min(460px, 100%);
  box-shadow:    0 8px 40px rgba(0, 0, 0, .3);
  max-height:    90vh;
  overflow-y:    auto;
}

.home-modal__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   1.2rem;
}

.home-modal__title {
  font-family: var(--font-display);
  font-size:   1.3rem;
  font-weight: 700;
}

.home-modal__close {
  font-size:  1.3rem;
  color:      var(--color-ink-2);
  padding:    0.2rem 0.4rem;
  line-height: 1;
}
.home-modal__close:hover { color: var(--color-ink); }

.home-modal__actions {
  display:    flex;
  gap:        0.5rem;
  flex-wrap:  wrap;
  margin-top: 0.25rem;
}

/* Resultado de generación */
.cards-result {
  margin-top:    1rem;
  padding-top:   1rem;
  border-top:    1px solid var(--color-border);
  display:       flex;
  flex-direction: column;
  gap:           0.65rem;
}

.cards-result__msg {
  font-size:   0.9rem;
  font-weight: 600;
  color:       var(--color-teal);
}

/* Contador de cartones en detalle de evento */
.cards-count-info {
  font-size:     0.82rem;
  color:         var(--color-ink-2);
  margin-bottom: 0.65rem;
}


/* ═══════════════════════════════════════════════════
   Verificador por ID: sección superior del modal
═══════════════════════════════════════════════════ */
.verifier-by-id {
  background:    var(--color-surface);
  border:        1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding:       0.75rem 0.9rem;
  margin-bottom: 0.85rem;
}

.verifier-by-id__label {
  font-size:      0.72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--color-ink-2);
  margin-bottom:  0.5rem;
}

.verifier-separator {
  display:        flex;
  align-items:    center;
  gap:            0.6rem;
  color:          var(--color-ink-2);
  font-size:      0.75rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom:  0.85rem;
}
.verifier-separator::before,
.verifier-separator::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--color-border);
}


/* ═══════════════════════════════════════════════════
   Overlay de verificación de cartón (operador + /ver)
═══════════════════════════════════════════════════ */
.card-check-overlay {
  position:        fixed;
  inset:           0;
  z-index:         850;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(0, 0, 0, 0.88);
  padding:         1.5rem;
}

.card-check-overlay__box {
  position:      relative;
  background:    var(--color-bg);
  border-radius: var(--radius-lg);
  padding:       1.5rem;
  width:         min(520px, 100%);
  box-shadow:    0 12px 50px rgba(0, 0, 0, .45);
}

.card-check-overlay__local-close {
  position:    absolute;
  top:         0.75rem;
  right:       0.75rem;
  font-size:   1.1rem;
  line-height: 1;
  color:       var(--color-ink-2);
  padding:     0.2rem 0.4rem;
}
.card-check-overlay__local-close:hover { color: var(--color-ink); }

.card-check-overlay__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             0.75rem;
  margin-bottom:   1.1rem;
}

.card-check-overlay__title {
  font-family: var(--font-display);
  font-size:   1.25rem;
  font-weight: 700;
}

.card-check-overlay__actions {
  display:  flex;
  gap:      0.4rem;
  flex-wrap: wrap;
}

/* Badge flotante para reabrir el overlay localmente */
.card-check-badge {
  position:      fixed;
  bottom:        1.5rem;
  right:         1.5rem;
  z-index:       851;
  background:    var(--color-ink);
  color:         #ffffff;
  border-radius: var(--radius);
  padding:       0.55rem 1rem;
  font-size:     0.88rem;
  font-weight:   700;
  box-shadow:    0 4px 16px rgba(0,0,0,.35);
  cursor:        pointer;
  transition:    filter .15s;
}
.card-check-badge:hover { filter: brightness(1.2); }

/* Grilla 5×5 del cartón verificado (incluye cabecera BINGO) */
.card-check-grid {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   3px;
}

.cc-cell {
  aspect-ratio:    1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   6px;
  font-family:     var(--font-display);
  font-weight:     700;
  font-size:       clamp(0.9rem, 3vw, 1.3rem);
  transition:      background .2s, color .2s, transform .15s;
}

.cc-cell--header {
  font-size:   clamp(0.8rem, 2.5vw, 1.1rem);
  font-weight: 900;
  color:       var(--color-ink-2);
  background:  transparent;
}

.cc-cell--free {
  background: #e0e0e0;
  color:      #555;
  font-size:  clamp(0.55rem, 1.8vw, 0.75rem);
  letter-spacing: .02em;
}

/* Estado inicial: celda no revelada aún */
.cc-cell--pending {
  background: var(--color-surface);
  color:      transparent;
  border:     2px solid var(--color-border);
}

/* Número sorteado → verde */
.cc-cell--ok {
  background: #1a7a45;
  color:      #ffffff;
  transform:  scale(1.04);
}

/* Número no sorteado → rojo */
.cc-cell--miss {
  background: var(--color-red);
  color:      #ffffff;
}



/* ═══════════════════════════════════════════════════
   Tablero completo (/ver): columnas por letra de la palabra
═══════════════════════════════════════════════════ */
.board-section {
  padding: 1.75rem clamp(1rem, 4vw, 3rem) 2.5rem;
}

.full-board {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   clamp(0.4rem, 1.2vw, 0.9rem);
  max-width:             820px;
  margin:                0 auto;
}

.full-board__col {
  display:        flex;
  flex-direction: column;
  gap:            clamp(0.25rem, 0.7vw, 0.4rem);
}

.full-board__letter {
  font-family:   var(--font-display);
  font-weight:   900;
  font-size:     clamp(1.5rem, 4vw, 2.4rem);
  line-height:   1.1;
  color:         var(--color-red);
  text-align:    center;
  margin-bottom: 0.25rem;
}

.full-board__cell {
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          clamp(1.7rem, 4.5vw, 2.3rem);
  border-radius:   0.4rem;
  background:      var(--color-surface);
  border:          1px solid var(--color-border);
  color:           var(--color-ink-2);
  font-weight:     600;
  font-size:       clamp(0.85rem, 2.2vw, 1.05rem);
  font-variant-numeric: tabular-nums;
}

/* Número ya sorteado */
.full-board__cell--drawn {
  background:   var(--color-teal);
  border-color: var(--color-teal);
  color:        #ffffff;
  font-weight:  700;
}

/* Número actual: mismo lenguaje visual que el chip de la cinta */
.full-board__cell--current {
  background:   var(--color-yellow);
  border-color: var(--color-yellow);
  color:        #111111;
  font-weight:  800;
  animation:    chip-pulse 1.6s ease-in-out infinite;
}

/* Variante compacta para la Cabina del operador: cabe junto a la figura
   sin empujar los controles ni forzar scroll. */
.full-board--compact {
  gap:       0.3rem;
  max-width: none;
}

.full-board--compact .full-board__col {
  gap: 0.2rem;
}

.full-board--compact .full-board__letter {
  font-size:     clamp(0.9rem, 1.6vw, 1.2rem);
  margin-bottom: 0.15rem;
}

.full-board--compact .full-board__cell {
  height:        clamp(1.1rem, 2vw, 1.5rem);
  border-radius: 0.25rem;
  font-size:     clamp(0.6rem, 1.2vw, 0.8rem);
  font-weight:   600;
}

/* Nota de ayuda bajo un campo de formulario */
.field-hint {
  margin:    0.35rem 0 0;
  font-size: 0.8rem;
  color:     var(--color-ink-2);
}

/* Píldora flotante "Volver a la partida" (landing) */
.lp-return {
  position:      fixed;
  left:          50%;
  bottom:        24px;
  transform:     translateX(-50%);
  z-index:       50;
  display:       flex;
  align-items:   center;
  gap:           10px;
  max-width:     calc(100vw - 32px);
  padding:       10px 12px;
  background:    var(--color-inverse);
  border:        1px solid var(--color-border);
  border-radius: 999px;
  box-shadow:    0 10px 30px rgba(26, 23, 20, .16);
}
.lp-return[hidden] { display: none; }
.lp-return__link {
  display:         flex;
  align-items:     center;
  gap:             12px;
  text-decoration: none;
  color:           inherit;
}
.lp-return__icon {
  flex:            0 0 auto;
  width:           34px;
  height:          34px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   999px;
  background:      var(--color-red);
  color:           #fff;
  font-size:       18px;
  font-weight:     700;
}
.lp-return__body  { display: flex; flex-direction: column; line-height: 1.15; }
.lp-return__title { font-weight: 700; font-size: 0.95rem; color: var(--color-ink); }
.lp-return__name  {
  font-size:     0.8rem;
  color:         var(--color-ink-2);
  max-width:     220px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.lp-return__close {
  flex:          0 0 auto;
  border:        none;
  background:    transparent;
  cursor:        pointer;
  color:         var(--color-ink-2);
  font-size:     15px;
  padding:       4px 7px;
  border-radius: 8px;
}
.lp-return__close:hover { background: var(--color-surface); }
@media (max-width: 600px) {
  .lp-return {
    left:          16px;
    right:         16px;
    transform:     none;
    max-width:     none;
    border-radius: 16px;
  }
}