/* ═══════════════════════════════════════════════════════════
   AIRSOFT CLUB — BREAKPOINTS REFERENCE v1
   ═══════════════════════════════════════════════════════════

   Este archivo NO contiene reglas activas — es documentación
   ejecutable del sistema de breakpoints del proyecto.

   Define tokens estándar para usar en futuras @media queries.
   Los breakpoints existentes en style.css y tactical-enhance.css
   NO se han modificado para evitar regresiones.

   Cargar AL FINAL en header.ejs (después de hotfix).
   ─────────────────────────────────────────────────────────── */


/* ─── 1. TOKENS (referencia visual en DevTools) ─────────────
   Estos custom properties NO se usan directamente en @media
   (CSS no soporta var() dentro de media queries todavía con
   buena compatibilidad), pero quedan visibles en el inspector
   para que cualquier desarrollador los vea de un vistazo. */

:root {
  /* Breakpoints estándar del proyecto */
  --bp-xxs:  320px;   /* Móvil mínimo (iPhone SE 1ª gen)         */
  --bp-xs:   360px;   /* Móvil pequeño (Galaxy Fold cerrado)     */
  --bp-sm:   480px;   /* Móvil estándar landscape                */
  --bp-md:   600px;   /* Phablet / breakpoint forma "form-row"   */
  --bp-lg:   768px;   /* Tablet portrait (iPad clásico)          */
  --bp-xl:   900px;   /* Desktop pequeño / nav cambia a horiz.   */
  --bp-xxl:  1200px;  /* Desktop estándar                        */
  --bp-3xl:  1500px;  /* Desktop ancho                           */
  --bp-tv:   1920px;  /* Smart TV / Full HD                      */
  --bp-4k:   2560px;  /* 4K / iMac 5K                            */
}


/* ═══════════════════════════════════════════════════════════
   2. MAPA DE BREAKPOINTS EN USO ACTUAL
   ═══════════════════════════════════════════════════════════

   Los siguientes valores aparecen en los .css del proyecto.
   Algunos son redundantes o solapados — se mantienen porque
   están bien testados y refactorizarlos sin necesidad real
   sería arriesgado.

   ┌─────────┬──────────────┬───────────────────────────────────┐
   │ Valor   │ Token cercano│ Uso actual                        │
   ├─────────┼──────────────┼───────────────────────────────────┤
   │  360px  │ --bp-xs      │ tactical: ocultar brand line2     │
   │  500px  │ ~--bp-sm     │ navbar: mostrar brand text + grid │
   │  600px  │ --bp-md      │ form-row, gallery, stats-grid     │
   │  700px  │ --bp-md      │ tactical: layouts secundarios     │
   │  768px  │ --bp-lg      │ table-responsive (max-width)      │
   │  769px  │ --bp-lg+1    │ main padding, card padding        │
   │  899px  │ --bp-xl-1    │ ocultar nav-search-wrap           │
   │  900px  │ --bp-xl      │ navbar horizontal, dropdowns      │
   │  1080px │ ~--bp-xxl-1  │ tactical: compactación            │
   │  1099px │ ~--bp-xxl-1  │ tactical: compactación nav        │
   │  1100px │ ~--bp-xxl-1  │ sandbox-motivos                   │
   │  1180px │ ~--bp-xxl    │ tactical: compactación            │
   │  1200px │ --bp-xxl     │ main.admin-wide                   │
   │  1299px │ ~--bp-xxl    │ tactical: compactación nav        │
   │  1400px │ ~--bp-3xl    │ admin-wide max-width              │
   │  1499px │ ~--bp-3xl    │ tactical: compactación nav        │
   │  1920px │ --bp-tv      │ Smart TV / Full HD                │
   │  2560px │ --bp-4k      │ 4K / iMac 5K                      │
   └─────────┴──────────────┴───────────────────────────────────┘

   Notas sobre solapamientos:
   - 768/769:  intencional. 768 = "tablet o menos", 769 = "más
               grande que tablet". No tocar.
   - 899/900:  intencional. Mismo patrón con desktop pequeño.
   - 1080/1099/1100:  agrupar en futuro a --bp-xxl-1 si surge
                      la oportunidad de refactor.
   - 1180/1200:  similar. Podrían ser un solo breakpoint --bp-xxl.
   - 1299/1400/1499:  cluster de "antes de desktop ancho", podría
                      simplificarse a --bp-3xl si se refactoriza.
   ─────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════
   3. GUÍA DE USO PARA NUEVO CÓDIGO
   ═══════════════════════════════════════════════════════════

   Para CUALQUIER nuevo @media que se añada al proyecto,
   usar EXCLUSIVAMENTE estos valores:

   Mobile-first (preferido):
       @media (min-width: 360px)  { ... }   --bp-xs
       @media (min-width: 480px)  { ... }   --bp-sm
       @media (min-width: 600px)  { ... }   --bp-md
       @media (min-width: 768px)  { ... }   --bp-lg
       @media (min-width: 900px)  { ... }   --bp-xl
       @media (min-width: 1200px) { ... }   --bp-xxl
       @media (min-width: 1500px) { ... }   --bp-3xl
       @media (min-width: 1920px) { ... }   --bp-tv
       @media (min-width: 2560px) { ... }   --bp-4k

   Para excluir desktop (raro, justificar):
       @media (max-width: 599px)  { ... }   pre-md
       @media (max-width: 767px)  { ... }   pre-lg
       @media (max-width: 899px)  { ... }   pre-xl

   Casos especiales (orientation, hover, etc):
       @media (max-height: 500px) and (orientation: landscape)
       @media (hover: none)
       @media (prefers-reduced-motion: reduce)
       @media (min-resolution: 2dppx)
   ─────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════
   4. SNIPPET CSS PARA NUEVAS REGLAS RESPONSIVE
   ═══════════════════════════════════════════════════════════

   Plantilla recomendada para añadir un componente nuevo:

   .mi-componente {
     /. Estilos base — mobile (320-359) ./
   }
   @media (min-width: 360px) {  /. xs ./
     .mi-componente { ... }
   }
   @media (min-width: 600px) {  /. md ./
     .mi-componente { ... }
   }
   @media (min-width: 900px) {  /. xl — nav horizontal aparece ./
     .mi-componente { ... }
   }
   @media (min-width: 1920px) { /. tv ./
     .mi-componente { ... }
   }
   ─────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════
   5. CONSTANTES JS EQUIVALENTES (para usar en JavaScript)
   ═══════════════════════════════════════════════════════════

   Si necesitas detectar breakpoints desde JS:

   const BP = {
     xxs:  320,
     xs:   360,
     sm:   480,
     md:   600,
     lg:   768,
     xl:   900,
     xxl:  1200,
     '3xl': 1500,
     tv:   1920,
     '4k':  2560,
   };

   const isAtLeast = (bp) => window.matchMedia(`(min-width: ${BP[bp]}px)`).matches;
   isAtLeast('xl');  // true si >= 900px

   ─────────────────────────────────────────────────────────── */