/**
 * mobile.css — Estilos responsive para Ludoteca
 * Cargado en todas las páginas vía pwa_head.php
 */

/* ══════════════════════════════════════════════════════════════════════
   HEADER / NAV — Menú hamburguesa en móvil
══════════════════════════════════════════════════════════════════════ */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .4rem;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #c8bfaf;
  border-radius: 2px;
  transition: all .25s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════════════
   MODALES — pantalla completa en móvil
══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   MEDIA QUERIES
══════════════════════════════════════════════════════════════════════ */
/* ── Pantallas medias: nav compacto ── */
@media (max-width: 1024px) and (min-width: 701px) {
  nav a {
    margin-left: .75rem !important;
    font-size: .75rem !important;
    letter-spacing: .02em !important;
  }
  .dark-toggle { margin-left: .5rem !important; }
}

/* ── Pantallas donde el nav puede desbordarse ── */
@media (max-width: 960px) and (min-width: 701px) {
  header { padding: 0 1rem; }
  nav a {
    margin-left: .6rem !important;
    font-size: .72rem !important;
  }
}

@media (max-width: 700px) {

  /* ── Header ── */
  header {
    padding: 0 1rem;
    height: 56px;
    flex-wrap: nowrap;
  }
  .logo { font-size: 1.25rem !important; }

  .nav-toggle { display: flex; }

  /* Nav colapsado por defecto en móvil */
  nav,
  nav#main-nav {
    display: none !important;
    position: fixed !important;
    top: 56px !important;
    left: 0 !important; right: 0 !important;
    background: #120e08 !important;
    padding: 1rem 1.5rem 1.5rem !important;
    flex-direction: column !important;
    gap: .25rem !important;
    z-index: 99 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
    border-bottom: 2px solid var(--gold) !important;
    width: 100% !important;
  }
  nav.open,
  nav#main-nav.open { display: flex !important; }

  nav a {
    margin: 0 !important;
    padding: .75rem 0;
    font-size: 1rem !important;
    border-bottom: 1px solid #2a2010;
    display: block;
  }
  nav a:last-of-type { border-bottom: none; }

  .dark-toggle {
    margin-top: .5rem;
    align-self: flex-start;
  }

  /* ── Hero ── */
  .hero, .page-hero {
    padding: 2rem 1rem 1.5rem;
  }
  .hero h1 { font-size: 2rem !important; }
  .page-hero h1 { font-size: 1.75rem !important; }

  /* ── Toolbar / filtros ── */
  .toolbar {
    padding: .75rem 1rem;
    top: 56px !important;
    gap: .5rem;
  }
  .toolbar input[type=search],
  .search-wrap { max-width: 100% !important; min-width: 0 !important; flex: 1 1 100%; }
  .toolbar select { width: 100%; }
  .filter-chips { width: 100%; }

  /* Filtros colapsables */
  .filter-chips-wrap {
    width: 100%;
    position: relative;
  }
  .filter-chips-toggle {
    display: flex !important;
  }
  .filter-chips {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .filter-chips.expanded {
    max-height: 300px;
  }

  /* ── Grid de tarjetas ── */
  .games-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .75rem;
    padding: 0;
  }
  .grid-wrap { padding: 1rem; }
  .card-body { padding: .65rem; }
  .card-title { font-size: .875rem; }
  .card-meta { font-size: .7rem; }

  /* ── Modales ── */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100% !important;
    width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0 !important;
  }
  .modal-header { padding: 1rem 1.25rem; }
  .modal-body { padding: 1rem 1.25rem; }
  .modal-footer { padding: .75rem 1.25rem; flex-wrap: wrap; }
  .modal-footer .btn { flex: 1; justify-content: center; }

  /* ── Formularios en modal ── */
  .form-grid,
  .form-grid.cols-3,
  .form-grid.cols-4 {
    grid-template-columns: 1fr !important;
  }
  .form-group.full { grid-column: 1 !important; }

  /* ── Partidas — tabla ── */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 480px; font-size: .8rem; }
  td, th { padding: .5rem .65rem; }

  /* Match cards en partidas.php */
  .match-head { padding: .75rem 1rem; gap: .75rem; }
  .match-game-img,
  .match-game-placeholder { width: 44px; height: 44px; }
  .scores-row { padding: .75rem 1rem; gap: .4rem; }
  .score-pill { font-size: .78rem; padding: .28rem .6rem; }

  /* ── Estadísticas ── */
  .podium { gap: .5rem; }
  .podium-slot { min-width: 90px !important; padding: .75rem .5rem; }
  .podium-slot.rank-1 { min-height: 160px !important; }
  .podium-slot.rank-2 { min-height: 130px !important; }
  .podium-slot.rank-3 { min-height: 115px !important; }
  .podium-avatar { width: 48px !important; height: 48px !important; font-size: 1.2rem !important; }
  .podium-name { font-size: .85rem; }
  .podium-wins, .podium-stat { font-size: .7rem; }

  .stats-wrap { padding: 1rem; }
  .top-games { grid-template-columns: repeat(2, 1fr) !important; }

  /* Tabla de estadísticas — oculta columnas menos importantes */
  table th:nth-child(6),
  table td:nth-child(6) { display: none; } /* puntos totales */

  /* ── Admin ── */
  .tab-content { padding: 1rem; }
  .tabs { padding: 0 .5rem; overflow-x: auto; }
  .tab-btn { padding: .75rem .75rem; font-size: .75rem; white-space: nowrap; }

  .game-admin-row { padding: .6rem .75rem; }
  .game-admin-title { font-size: .85rem; }
  .game-admin-meta { font-size: .68rem; }
  .game-admin-actions { gap: .3rem; }

  .players-list { gap: .5rem; }
  .player-chip { padding: .4rem .75rem; font-size: .85rem; }

  .score-row { flex-wrap: wrap; }
  .score-row select { flex: 1 1 100%; }
  .score-row input[type=number] { flex: 1; }

  /* Botones táctiles — mínimo 44px de alto */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }

  /* Formulario admin */
  .form-card { padding: 1rem; }
  .form-card h3 { font-size: 1.05rem; }

  /* BGG search */
  .bgg-results { max-height: 200px; }
}

@media (max-width: 400px) {
  .games-grid { grid-template-columns: 1fr !important; }
  .hero h1 { font-size: 1.6rem !important; }
}

/* ── Modo oscuro + móvil ── */
@media (max-width: 700px) {
  html.dark nav { background: #0e0b07; }
}