/* ============================================================
   SISTEMA DE BREAKPOINTS — FUENTE DE VERDAD ÚNICA
   Sistema de Administración de Condominios
   ============================================================

   Este archivo es referencia y documentación.
   No contiene reglas aplicables, solo variables y comentarios.

   BREAKPOINTS OFICIALES
   ──────────────────────────────────────────────────────────
   mobile:   max-width: 767px        (teléfonos, < 768px)
   tablet:   768px – 1023px          (tablets: min 768px AND max 1023px)
   desktop:  min-width: 1024px       (escritorio, ≥ 1024px)

   REFERENCIA RÁPIDA DE MEDIA QUERIES
   ──────────────────────────────────────────────────────────
   @media (max-width: 767px)                                → mobile
   @media (min-width: 768px) and (max-width: 1023px)        → tablet
   @media (min-width: 1024px)                               → desktop
   @media (max-width: 480px)                                → mobile small (uso excepcional)

   NOTAS DE COMPATIBILIDAD
   ──────────────────────────────────────────────────────────
   - Los archivos actuales usan 768px (mobile) y 1024px (tablet).
     La migración a 767px / 1023px se hace módulo por módulo en Prioridad 2.
   - pagos.js usa window.innerWidth <= 1400 para touch detection.
     Este valor es JS-only y NO tiene equivalente CSS — no agregar aquí.
   - facturacion/tablet.css usa 992px como outlier — se unifica en Prioridad 2.

   REGLAS DE USO
   ──────────────────────────────────────────────────────────
   - Solo usar los valores canónicos: 767px, 768px, 1023px, 1024px
   - Nunca usar otros valores sin documentar la razón en este archivo
   - El 480px solo para ajustes ultra-específicos, con comentario
   - No solapar rangos (mobile y tablet no deben activarse al mismo tiempo)

   ============================================================ */

:root {
    /* Valores canónicos — referencia para JS y documentación */
    --bp-mobile-max:    767px;
    --bp-tablet-min:    768px;
    --bp-tablet-max:    1023px;
    --bp-desktop-min:   1024px;

    /* Variables de spacing mobile — usadas en global/mobile.css */
    --touch-target-min:    44px;
    --mobile-padding:      12px;
    --mobile-gap:          12px;
    --mobile-font-input:   16px;
    --mobile-border-radius: 10px;
}