/* 
    ============================================================================ 
    SISTEMA DE BREAKPOINTS Y RESPONSIVIDAD GLOBAL 
    ============================================================================ 
    Basado en la especificación de dispositivos: 
    
    Categoría   Ancho CSS (px)      Uso típico 
    ---------   --------------      ---------- 
    XS          320–480             Smartphones pequeños (iPhone SE) 
    SM          481–640             Smartphones promedio 
    MD          641–768             Smartphones grandes / Tablets vertical 
    LG          769–1024            Tablets horizontal / Laptops pequeñas 
    XL          1025–1280           Laptops estándar 
    2XL         1281–1536           Laptops grandes 
    3XL         1537–1920           Monitores de escritorio (Full HD) 
    4XL         1921+               Monitores grandes / UltraWide (2K, 4K) 
*/ 


:root { 
    /* Variables CSS para uso en cálculos o JS */ 
    --bp-xs-min: 320px; 
    --bp-xs-max: 480px; 
    --bp-sm-min: 481px; 
    --bp-sm-max: 640px; 
    --bp-md-min: 641px; 
    --bp-md-max: 768px; 
    --bp-lg-min: 769px; 
    --bp-lg-max: 1024px; 
    --bp-xl-min: 1025px; 
    --bp-xl-max: 1280px; 
    --bp-2xl-min: 1281px; 
    --bp-2xl-max: 1536px; 
    --bp-3xl-min: 1537px; 
    --bp-3xl-max: 1920px; 
    --bp-4xl-min: 1921px; 
} 


/* 
   ============================================================================ 
   MEDIA QUERIES 
   Usa estas definiciones para adaptar tus componentes. 
   ============================================================================ 
*/ 


/* --- XS: 320px - 480px --- */ 
@media (max-width: 480px) { 
    :root { --current-bp: 'XS'; } 
    .container, .container-fluid { padding-left: 10px; padding-right: 10px; } 
    /* Ajustes tipográficos para móviles pequeños */ 
    h1 { font-size: 1.5rem !important; } 
    h2 { font-size: 1.25rem !important; } 
    .card { margin-bottom: 1rem; } 
} 


/* --- SM: 481px - 640px --- */ 
@media (min-width: 481px) and (max-width: 640px) { 
    :root { --current-bp: 'SM'; } 
    .container { max-width: 100%; padding-left: 15px; padding-right: 15px; } 
} 


/* --- MD: 641px - 768px --- */ 
@media (min-width: 641px) and (max-width: 768px) { 
    :root { --current-bp: 'MD'; } 
} 


/* --- LG: 769px - 1024px --- */ 
@media (min-width: 769px) and (max-width: 1024px) { 
    :root { --current-bp: 'LG'; } 
} 


/* --- XL: 1025px - 1280px --- */ 
@media (min-width: 1025px) and (max-width: 1280px) { 
    :root { --current-bp: 'XL'; } 
} 


/* --- 2XL: 1281px - 1536px --- */ 
@media (min-width: 1281px) and (max-width: 1536px) { 
    :root { --current-bp: '2XL'; } 
    .container { max-width: 1320px; } 
} 


/* --- 3XL: 1537px - 1920px --- */ 
@media (min-width: 1537px) and (max-width: 1920px) { 
    :root { --current-bp: '3XL'; } 
    .container { max-width: 1600px; } /* Aprovechar más ancho en monitores HD */ 
} 


/* --- 4XL: 1921px+ --- */ 
@media (min-width: 1921px) { 
    :root { --current-bp: '4XL'; } 
    .container { max-width: 1800px; } /* Pantallas ultra anchas */ 
    body { font-size: 18px; } /* Escalar texto en pantallas gigantes */ 
} 


/* 
   ============================================================================ 
   CLASES UTILITARIAS DE VISIBILIDAD (Extendiendo Bootstrap) 
   ============================================================================ 
*/ 


/* Mostrar solo en móviles (XS + SM) */ 
.d-mobile-only { display: none !important; } 
@media (max-width: 640px) { .d-mobile-only { display: block !important; } } 


/* Mostrar solo en escritorio (XL+) */ 
.d-desktop-only { display: none !important; } 
@media (min-width: 1025px) { .d-desktop-only { display: block !important; } } 


/* Debugger de resolución (Oculto por defecto) */ 
/* Agrega la clase 'debug-screens' al body para activar */ 
body.debug-screens::after { 
    content: "BP: " var(--current-bp); 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    background: #ff0055; 
    color: white; 
    padding: 5px 15px; 
    font-weight: bold; 
    z-index: 10000; 
    border-top-left-radius: 8px; 
    font-size: 14px; 
    opacity: 0.8; 
}