/**
 * Responsive Utilities
 * Media queries y utilidades para diseño responsivo
 */
/* ========================================
   BREAKPOINTS
   ======================================== */
/* Mobile First Approach */
/* Extra Small (< 640px) - Default, no media query needed */
/* Small (≥ 640px) - Smartphones landscape, small tablets */
@media (min-width: 640px) {
    .sm\:hidden {
        display: none !important;
    }
    .sm\:block {
        display: block !important;
    }
    .sm\:flex {
        display: flex !important;
    }
    .sm\:grid {
        display: grid !important;
    }
}
/* Medium (≥ 768px) - Tablets */
@media (min-width: 768px) {
    .md\:hidden {
        display: none !important;
    }
    .md\:block {
        display: block !important;
    }
    .md\:flex {
        display: flex !important;
    }
    .md\:grid {
        display: grid !important;
    }
}
/* Large (≥ 1024px) - Laptops, desktops */
@media (min-width: 1024px) {
    .lg\:hidden {
        display: none !important;
    }
    .lg\:block {
        display: block !important;
    }
    .lg\:flex {
        display: flex !important;
    }
    .lg\:grid {
        display: grid !important;
    }
}
/* Extra Large (≥ 1280px) - Large desktops */
@media (min-width: 1280px) {
    .xl\:hidden {
        display: none !important;
    }
    .xl\:block {
        display: block !important;
    }
    .xl\:flex {
        display: flex !important;
    }
    .xl\:grid {
        display: grid !important;
    }
}
/* ========================================
   CONTAINER RESPONSIVO
   ======================================== */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}
@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}
@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }
}
@media (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }
}
/* ========================================
   TIPOGRAFÍA FLUIDA
   ======================================== */
/* Escala de fuente que se adapta al viewport */
body {
    font-size: clamp(14px, 2.5vw, 16px);
}
h1,
.h1 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
}
h2,
.h2 {
    font-size: clamp(1.25rem, 3.5vw, 1.75rem);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
}
h3,
.h3 {
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
}
/* ========================================
   GRID RESPONSIVO
   ======================================== */
.grid-responsive {
    display: grid;
    gap: var(--space-4);
}
/* 1 columna en móvil */
.grid-responsive {
    grid-template-columns: 1fr;
}
/* 2 columnas en tablets */
@media (min-width: 768px) {
    .grid-responsive-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* 3 columnas en desktop */
@media (min-width: 1024px) {
    .grid-responsive-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* 4 columnas en pantallas grandes */
@media (min-width: 1280px) {
    .grid-responsive-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* ========================================
   TABLAS RESPONSIVAS
   ======================================== */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}
/* Convertir tabla a cards en móvil */
@media (max-width: 640px) {
    .table-mobile-cards thead {
        display: none;
    }
    .table-mobile-cards tbody,
    .table-mobile-cards tr {
        display: block;
    }
    .table-mobile-cards tr {
        margin-bottom: var(--space-4);
        padding: var(--space-4);
        background: var(--color-surface);
        border-radius: var(--radius-lg);
        border: 1px solid var(--color-border);
    }
    .table-mobile-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-2) 0;
        border: none;
    }
    .table-mobile-cards td::before {
        content: attr(data-label);
        font-weight: var(--font-semibold);
        color: var(--color-text-secondary);
        margin-right: var(--space-3);
    }
    .table-mobile-cards td:first-child {
        padding-top: 0;
    }
    .table-mobile-cards td:last-child {
        padding-bottom: 0;
    }
}
/* ========================================
   BOTONES RESPONSIVOS
   ======================================== */
/* Botones ocupan todo el ancho en móvil */
@media (max-width: 640px) {
    .btn-group-mobile-stack {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }
    .btn-group-mobile-stack .btn {
        width: 100%;
    }
}
/* ========================================
   NAVEGACIÓN MÓVIL
   ======================================== */
.mobile-menu {
    display: none;
}
@media (max-width: 768px) {
    .mobile-menu {
        display: block;
    }
    .desktop-menu {
        display: none;
    }
}
/* ========================================
   ESPACIADO RESPONSIVO
   ======================================== */
/* Reducir padding en móvil */
@media (max-width: 640px) {
    .card,
    .top,
    .topbar {
        padding: var(--space-4) !important;
    }
    body {
        padding: var(--space-3) !important;
    }
}
/* ========================================
   OCULTAR ELEMENTOS EN MÓVIL
   ======================================== */
@media (max-width: 640px) {
    .hide-mobile {
        display: none !important;
    }
}
@media (min-width: 641px) {
    .show-mobile-only {
        display: none !important;
    }
}
/* ========================================
   TOUCH TARGETS (Áreas táctiles)
   ======================================== */
/* Asegurar que todos los elementos interactivos tengan área táctil mínima */
@media (max-width: 768px) {
    button,
    .btn,
    a.btn,
    input[type="submit"],
    input[type="button"] {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
    }
    /* Aumentar tamaño de inputs en móvil */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        min-height: var(--touch-target-min);
        font-size: 16px;
        /* Evita zoom en iOS */
    }
}
/* ========================================
   MODALES RESPONSIVOS
   ======================================== */
@media (max-width: 640px) {
    dialog,
    .modal {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: var(--space-2);
    }
    .modal-body {
        padding: var(--space-4);
    }
}
/* ========================================
   SCROLL HORIZONTAL SUAVE
   ======================================== */
.scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.scroll-container::-webkit-scrollbar {
    height: 6px;
}
.scroll-container::-webkit-scrollbar-track {
    background: transparent;
}
.scroll-container::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-full);
}
.scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-hover);
}
/* ========================================
   ORIENTACIÓN
   ======================================== */
/* Landscape en móviles */
@media (max-width: 768px) and (orientation: landscape) {
    .topbar,
    .top {
        padding: var(--space-2) var(--space-4);
    }
    .brand h1 {
        font-size: var(--text-sm);
    }
    .brand p {
        display: none;
    }
}
/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .no-print,
    .btn,
    button,
    .mobile-menu,
    .topbar .btn {
        display: none !important;
    }
    body {
        background: white;
        color: black;
    }
    .card {
        border: 1px solid #ccc;
        box-shadow: none;
    }
}