/* ═══════════════════════════════════════════════════════════════
   responsive.css — Breakpoints generales de la aplicación
   Móvil   : max-width 767px
   Tablet  : 768px – 1023px
   ═══════════════════════════════════════════════════════════════ */

/* ── LAYOUT HELPERS (base, se sobreescriben en mobile) ─────── */

/* Fila histograma + actividad del perfil */
.ov-2col-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  align-items: stretch;
}

/* Tabs del perfil: scroll horizontal en lugar de wrap */
.ov-tabs { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.ov-tabs::-webkit-scrollbar { display: none; }
.ov-tab-btn { white-space: nowrap; }


/* ── TABLET (768 – 1023px) ──────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Home: 2 columnas en tablet */
  .home-sections { grid-template-columns: repeat(2, 1fr); }

  /* Logros: 420px min → solo 1 col en ~820px de contenido */
  .logros-grid { grid-template-columns: 1fr; }

  /* Breakdown del perfil: wrap si hay muchas cards */
  .ov-row { flex-wrap: wrap; }
  .ov-breakdown-card { min-width: 140px; }
}


/* ── MÓVIL (≤ 767px) ────────────────────────────────────────── */
@media (max-width: 767px) {

  /* ── Encabezados de página ──────────────────────────────── */
  .page-header { margin-bottom: 14px; }
  .page-header h2 { font-size: 18px; }
  .page-header p  { font-size: 12px; }

  /* ── Perfil: cabecera ──────────────────────────────────── */
  .ov-profile-header { padding: 16px; gap: 14px; margin-bottom: 14px; }
  .ov-profile-name   { font-size: 18px; }
  .ov-avatar-large   { width: 60px; height: 60px; font-size: 22px; }
  .ov-tabs           { margin: 12px 0 16px; }
  .ov-tab-btn        { padding: 8px 12px; font-size: 12px; }

  /* ── LoL grid → 1 columna ──────────────────────────────── */
  .ov-lol-grid { grid-template-columns: 1fr; }

  /* ── 2-col stats → apilado ─────────────────────────────── */
  .ov-2col-stats { flex-direction: column; }

  /* ── Stat grid dashboard → 2 columnas ──────────────────── */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-card .num { font-size: 24px; }

  /* ── Recent grid → 1 columna ───────────────────────────── */
  .recent-grid { grid-template-columns: 1fr; }

  /* ── Logros → 1 columna ─────────────────────────────────── */
  .logros-grid { grid-template-columns: 1fr; }

  /* ── Home sections → 1 columna ─────────────────────────── */
  .home-sections { grid-template-columns: 1fr; max-width: 100%; }

  /* ── Breakdown row del perfil → apilado ─────────────────── */
  .ov-row { flex-direction: column; }

  /* ── Reseñas: card apilada ──────────────────────────────── */
  .review-card { flex-direction: column; gap: 10px; }
  .review-poster { width: 60px; height: 86px; }

  /* ── Reseñas: stats header vertical ────────────────────── */
  .rvw-stats { flex-direction: column; gap: 10px; }
  .rvw-stats-avg { flex-direction: row; gap: 14px; align-items: center; min-width: unset; }

  /* ── Libro: review sin max-width fija ───────────────────── */
  .b-review { max-width: 100%; }

  /* ── Media grid: columnas más pequeñas ─────────────────── */
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }

  /* ── Lists grid: 1 columna ──────────────────────────────── */
  .lists-grid { grid-template-columns: 1fr; }

  /* ── Filter bar: asegura wrap ───────────────────────────── */
  .filter-bar { gap: 5px; margin-bottom: 14px; }
  .filter-btn  { font-size: 11px; padding: 4px 10px; }

  /* ── Search input full-width ────────────────────────────── */
  .search-input { font-size: 13px; }

  /* ── Toast: arriba del todo en móvil ─────────────────────── */
  .toast { bottom: auto; top: 16px; font-size: 12px; }

  /* ── Foro ───────────────────────────────────────────────── */

  /* Categorías: ya adaptive con minmax(260px) → 1 col solo */
  .forum-category-grid { gap: 7px; }

  /* Hilo: votos más compactos */
  .forum-thread-votes { min-width: 36px; padding: 12px 6px; }

  /* Título del OP más pequeño */
  .forum-op-title { font-size: 15px; }

  /* Posts: menos padding */
  .forum-post { padding: 12px 13px; }

  /* Respuestas anidadas: menos indentación */
  .forum-nested-replies { margin-left: 8px; padding-left: 8px; }

  /* Modal del foro → bottom sheet */
  .forum-modal-overlay { align-items: flex-end; }
  .forum-modal {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 20px 16px;
    max-height: 90vh;
    overflow-y: auto;
  }


  /* ── Gaming ─────────────────────────────────────────────── */

  /* LoL: layout sidebar+main → apilado */
  .lol-layout       { grid-template-columns: 1fr; }
  .lol-profile-row  { grid-template-columns: 1fr; }

  /* LoL: summary bar → envolver elementos */
  .lol-summary-bar { flex-wrap: wrap; gap: 14px; padding: 14px 16px; }
  .lol-summary-divider { display: none; }
  .lol-role-bars { height: 70px; }

  /* LoL: topbar nombre+botones */
  .lol-page-topbar { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Tarkov: profile grid → apilado */
  .tarkov-profile-grid { grid-template-columns: 1fr; }

  /* Tablas densas → scroll horizontal */
  .mission-table,
  .f1-table,
  .f1-lg-table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Liguilla: primera columna puede seguir siendo texto legible */
  .f1-lg-hdr { min-width: 90px; }
  .f1-lg-cell { min-width: 44px; }

  /* MODAL: bottom-sheet en móvil ──────────────────────── */
  .modal-overlay { align-items: flex-end; }
  .modal-box {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  .modal-overlay.open .modal-box { transform: translateY(0); }
  .modal-box-wide { width: 100%; }

  /* Drag handle visual */
  .modal-header::before {
    content: '';
    display: block;
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    background: var(--border2);
    border-radius: 2px;
  }
  .modal-header { position: relative; }

  /* Detail modal: poster + info apilados */
  .detail-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .detail-poster {
    width: 110px;
    height: 165px;
    margin: 0 auto;
  }

  /* Confirm modal */
  .modal-confirm-grid { grid-template-columns: 80px 1fr; gap: 12px; }
  .modal-confirm-poster { width: 80px; height: 120px; }

  /* Footer botones: full width */
  .modal-footer { flex-wrap: wrap; gap: 8px; }
  .modal-footer .btn-primary,
  .modal-footer .btn-secondary { flex: 1; text-align: center; justify-content: center; }
}