/* ───────── Giley · pulido visual del lobby (v2) ─────────
   Capa ADITIVA sobre style.css: tipografía, logo y palos españoles.
   No cambia estructura ni ids; solo estilos. */

:root {
  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-num: 'Oswald', 'Sora', Inter, sans-serif;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ── Logo de cabecera: medallón + wordmark dorado ── */
.hdr-logo-img {
  height: 38px; width: 38px; border-radius: 50%; object-fit: cover; display: block;
  filter: drop-shadow(0 2px 10px rgba(212,175,55,.35));
}
.hdr-logo-word {
  font-family: var(--f-display); font-weight: 800; font-size: 1.28rem; letter-spacing: .14em;
  margin-left: 2px;
  background: linear-gradient(180deg, #ffe9a0, #d4af37 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
header .flex.items-center.gap-2 { gap: 10px; }

/* ── Titulares en serif editorial ── */
.lobby-welcome h1, .lobby-welcome h2, .lobby-seccion h2, .lobby-seccion h3,
.lobby-bienvenida h2, .lobby-bienvenida h3, .hucha-hero h2, .hucha-hero h3 {
  font-family: var(--f-display); letter-spacing: -.01em; text-wrap: balance;
}
.lobby-acc-tit {
  font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.005em;
}

/* ── Cifras con carácter y tabulares (saldo, bote, stacks) ── */
#hdr-puntos-number, #hdr-puntos-mobile, .hucha-amt, #lobby-piggy-chips,
.mesa6-pot-val, .lobby-seccion-count, #lobby-online-count, #lobby-live-count {
  font-family: var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
#hdr-puntos-number { font-size: 1.05rem; font-weight: 600; }
.mesa6-pot-val { font-weight: 600; }

/* ── Acordeones de mesas: icono de palo español ── */
.lobby-acc-head .suit-ico {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 9px; background: currentColor;
  background: color-mix(in srgb, currentColor 14%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  font-size: 0;
}
.lobby-acc-head .suit-ico svg { width: 19px; height: 19px; display: block; }

/* ── Detalles de pulido ── */
.online-chip { font-weight: 500; letter-spacing: .01em; }
.btn-ayuda-grande { font-weight: 600; letter-spacing: .01em; }

@media (max-width: 700px) {
  .hdr-logo-word { display: none; }
  .hdr-logo-img { height: 34px; width: 34px; }
}

/* Los avisos (errores del servidor) nunca quedan tapados por modales de anfitrión/caja/votación. */
.toast { z-index: 2147483647 !important; }

/* ═══ Layout v2 del lobby: mesas protagonistas (izquierda) + panel lateral (derecha) ═══ */
.lobby-cols { display: flex; flex-direction: column; gap: 18px; }
.lobby-col-main { min-width: 0; order: -1; }
.lobby-col-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 1100px) {
  .lobby-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
  .lobby-col-main { order: 0; }
  .lobby-col-rail { position: sticky; top: 70px; max-height: calc(100vh - 86px); overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
}

/* Saludo editorial */
.lb-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-fecha { font-size: .66rem; letter-spacing: .18em; font-weight: 700; color: #8d8678; }
.lb-fecha:empty { display: none; }
.lb-saludo { font-family: var(--f-display) !important; font-size: clamp(1.35rem, 2.4vw, 1.9rem) !important; font-weight: 700; letter-spacing: -.02em; white-space: normal !important; }
.sidebar-link.active { box-shadow: inset 3px 0 0 var(--primary); }

/* Mesas como FILAS (escritorio): icono · nombre y reglas · plazas · botón */
@media (min-width: 900px) {
  .lobby-acc .premium-grid { grid-template-columns: 1fr !important; gap: 10px; }
  .lobby-acc .premium-card {
    display: grid; grid-template-columns: auto minmax(0, 1.6fr) minmax(0, 1fr) auto;
    align-items: center; gap: 18px; padding: 14px 18px; border-radius: 14px;
  }
  .lobby-acc .premium-card:hover { transform: translateY(-2px); }
  .lobby-acc .premium-card-top { flex-direction: column; align-items: center; gap: 6px; }
  .lobby-acc .premium-card h3 { margin: 0 0 2px; font-size: 1.04rem; font-family: var(--f-display); }
  .lobby-acc .premium-foot, .lobby-acc .premium-acciones { margin: 0; }
}

/* El lobby ocupa todo el ancho (antes quedaba encajonado en 900px junto al sidebar fijo). */
@media (min-width: 768px) {
  #pantalla-lobby { max-width: none; padding: 0; margin: 0; }
}

/* Corrección: mesas SIEMPRE en la columna ancha (izquierda) y panel lateral a la derecha; saludo bajo la cabecera fija. */
@media (min-width: 1100px) {
  .lobby-col-main { grid-column: 1; grid-row: 1; }
  .lobby-col-rail { grid-column: 2; grid-row: 1; }
}
@media (min-width: 768px) {
  #pantalla-lobby { padding-top: 56px; }
}

/* ═══ Anfitrión: modo fácil (plantillas) + guía ═══ */
.cmh-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 8px; }
.cmh-preset { position: relative; text-align: left; padding: 14px 12px 12px; border-radius: 14px; border: 2px solid #3a372e; background: #201f1f; color: #e5e2e1; cursor: pointer; display: flex; flex-direction: column; gap: 3px; font-family: inherit; transition: border-color .15s, background .15s, box-shadow .15s; }
.cmh-preset b { font-family: var(--f-display); font-size: 1.05rem; }
.cmh-preset span { font-size: .78rem; color: #a69f92; }
.cmh-preset small { font-size: .74rem; color: #f2ca50; font-weight: 700; margin-top: 4px; }
.cmh-preset em { position: absolute; top: -9px; right: 8px; font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .04em; padding: 2px 8px; border-radius: 99px; color: #04210f; background: #6fd48a; }
.cmh-preset:hover { border-color: #6a5a20; }
.cmh-preset.sel { border-color: #f2ca50; background: #2a2410; box-shadow: 0 0 22px rgba(242,202,80,.2); }
.cmh-guia { display: inline-block; margin: 2px 0 10px; font-size: .82rem; font-weight: 700; color: #f2ca50; text-decoration: none; }
.cmh-guia:hover { text-decoration: underline; }
.cmh-adv { margin: 10px 0 4px; border: 1px solid #3a372e; border-radius: 12px; padding: 4px 12px 10px; background: #181818; }
.cmh-adv > summary { cursor: pointer; font-weight: 700; font-size: .86rem; color: #c9b3ff; padding: 8px 0; list-style: none; }
.cmh-adv > summary::-webkit-details-marker { display: none; }
.cmh-next { margin: 8px 0 6px 20px; font-size: .86rem; color: #cfc8ba; line-height: 1.5; }
.host-tutorial-link { display: block; text-align: center; margin: 4px 0 10px; font-size: .8rem; font-weight: 700; color: #c9b3ff; text-decoration: none; }
.host-tutorial-link:hover { text-decoration: underline; }
@media (max-width: 480px) { .cmh-presets { grid-template-columns: 1fr; } .cmh-preset { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .cmh-preset small { margin-top: 0; } }