/**
 * Optimizaciones Mobile-First
 * Resoluciones: 320px - 428px
 * Performance, accesibilidad y UX
 */

/* ========================================
   CONTAINER Y OVERFLOW
   ======================================== */

html, body {
    overflow-x: hidden !important;
    width: 100% !important;
}

.container, .page {
    padding-inline: clamp(12px, 4vw, 20px) !important;
    max-width: 100% !important;
}

/* ========================================
   RITMO VERTICAL CONSISTENTE
   ======================================== */

.section, .carta-section, .stat-card {
    margin-bottom: clamp(16px, 4vw, 24px) !important;
}

.section-title, .carta-section-title {
    margin-bottom: clamp(12px, 3vw, 16px) !important;
}

.menu-item, .stat-card {
    margin-bottom: clamp(8px, 2vw, 12px) !important;
}

/* ========================================
   TIPOGRAFÍA RESPONSIVA
   ======================================== */

h1, .main-title {
    font-size: clamp(1.8rem, 5vw, 2.5rem) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
}

h2, .section-title {
    font-size: clamp(1.4rem, 4vw, 1.8rem) !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
}

h3, .carta-section-title {
    font-size: clamp(1.2rem, 3.5vw, 1.5rem) !important;
    line-height: 1.3 !important;
}

p, .item-name, .item-description {
    font-size: clamp(14px, 3.5vw, 16px) !important;
    line-height: 1.4 !important;
}

/* ========================================
   IMÁGENES RESPONSIVAS
   ======================================== */

.main-logo, .brand-logo-sm, .admin-logo {
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: attr(width) / attr(height) !important;
}

.main-logo {
    height: clamp(150px, 40vw, 250px) !important;
}

.brand-logo-sm, .admin-logo {
    height: clamp(40px, 10vw, 80px) !important;
}

/* ========================================
   BOTONES Y TAP TARGETS
   ======================================== */

button, .btn, a[role="button"] {
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 16px !important; /* Evitar zoom iOS */
    padding: 12px 20px !important;
}

.btn-sm {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
}

.btn-lg {
    min-width: 52px !important;
    min-height: 52px !important;
    padding: 16px 24px !important;
    font-size: 18px !important;
}

/* ========================================
   FORMULARIOS MÓVIL
   ======================================== */

input, textarea, select {
    font-size: 16px !important; /* Evitar zoom iOS */
    padding: 12px 16px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
}

.form-group {
    margin-bottom: 16px !important;
}

.form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

@media (min-width: 640px) {
    .form-row {
        flex-direction: row !important;
        align-items: end !important;
    }
}

/* ========================================
   NAVEGACIÓN MÓVIL
   ======================================== */

.nav-menu {
    flex-direction: column !important;
    gap: 8px !important;
}

.nav-item {
    width: 100% !important;
    text-align: center !important;
}

.tabs-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.tab-button {
    white-space: nowrap !important;
    min-width: fit-content !important;
}

/* ========================================
   CARDS Y GRIDS
   ======================================== */

.stats-grid, .products-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

@media (min-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .products-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ========================================
   MODALES MÓVIL
   ======================================== */

.modal {
    padding: 20px !important;
    margin: 10px !important;
    max-height: calc(100vh - 20px) !important;
    overflow-y: auto !important;
}

.modal-content {
    max-width: 100% !important;
    width: 100% !important;
}

.modal-header {
    padding-bottom: 16px !important;
    margin-bottom: 20px !important;
}

.modal-body {
    padding: 0 !important;
}

.modal-footer {
    padding-top: 20px !important;
    margin-top: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

@media (min-width: 640px) {
    .modal-footer {
        flex-direction: row !important;
        justify-content: flex-end !important;
    }
}

/* ========================================
   SAFE AREAS (iOS)
   ======================================== */

.min-h-screen {
    min-height: 100dvh !important;
}

.page {
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
}

.header, .admin-header {
    padding-top: max(16px, env(safe-area-inset-top)) !important;
}

/* ========================================
   PERFORMANCE
   ======================================== */

* {
    will-change: auto !important;
}

img {
    loading: lazy !important;
    decoding: async !important;
}

.main-logo {
    loading: eager !important;
}

/* ========================================
   ACCESIBILIDAD
   ======================================== */

:focus-visible {
    outline: 2px solid #d4af37 !important;
    outline-offset: 2px !important;
}

.skip-link {
    position: absolute !important;
    top: -40px !important;
    left: 6px !important;
    background: #000 !important;
    color: #fff !important;
    padding: 8px !important;
    text-decoration: none !important;
    z-index: 1000 !important;
}

.skip-link:focus {
    top: 6px !important;
}

/* ========================================
   ESPECÍFICO PARA CARTA
   ======================================== */

.carta-container {
    padding: 0 !important;
}

.carta-header {
    padding: 16px !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
}

@media (min-width: 640px) {
    .carta-header {
        flex-direction: row !important;
        justify-content: space-between !important;
    }
}

.carta-title {
    text-align: center !important;
    padding: 20px 16px !important;
}

.carta-content {
    padding: 0 16px !important;
}

.menu-item {
    padding: 16px !important;
    margin-bottom: 8px !important;
}

.item-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

@media (min-width: 480px) {
    .item-content {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
}

.item-price {
    font-weight: 600 !important;
    color: #d4af37 !important;
    font-size: 16px !important;
}

/* ========================================
   ESPECÍFICO PARA ADMIN
   ======================================== */

.admin-container {
    padding: 16px !important;
}

.admin-header {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center !important;
}

@media (min-width: 768px) {
    .admin-header {
        flex-direction: row !important;
        justify-content: space-between !important;
    }
}

.header-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

@media (min-width: 640px) {
    .header-actions {
        flex-direction: row !important;
        width: auto !important;
    }
}

/* ========================================
   UTILIDADES
   ======================================== */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.no-scroll {
    overflow: hidden !important;
}

.loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}