/**
 * GlobalCSS — Responsive Base
 * Breakpoints globales y utilidades responsive.
 * Ref: design-style-guide.md §10 Responsive
 */

/* Breakpoints:
   >= 768px  → Layout completo
   < 768px   → Columnas apiladas, selects full-width
   < 480px   → Una columna, padding reducido
*/

/* Hide en mobile */
@media (max-width: 768px) {
    .gs-hide-mobile { display: none !important; }
}

/* Hide en desktop */
@media (min-width: 769px) {
    .gs-hide-desktop { display: none !important; }
}

/* Full width en mobile */
@media (max-width: 768px) {
    .gs-full-mobile { width: 100% !important; }
}

/* Stack en mobile (flex column) */
@media (max-width: 768px) {
    .gs-stack-mobile {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}