/* ========================================
   MOBILE WEB OPTIMIZATIONS
   Mejoras de UX y Responsividad para Móvil
   ======================================== */

/* ===== VIEWPORT & TOUCH OPTIMIZATIONS ===== */

/* Prevenir zoom accidental en inputs */
input,
select,
textarea,
button {
    font-size: 16px !important;
    /* iOS no hace zoom si font-size >= 16px */
}

/* Mejorar área táctil de botones */
button,
a,
[role="button"],
.clickable {
    min-height: 44px;
    /* min-width removed — breaks grid layout for card-buttons */
    /* Tamaño mínimo recomendado por Apple/Google */
}

/* Eliminar efectos hover en dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {

    button:hover,
    a:hover,
    .hover\:scale-105:hover {
        transform: none !important;
    }

    /* Agregar feedback táctil con active */
    button:active,
    a:active {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

/* ===== SAFE AREA INSETS (para notches) ===== */

body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* ===== RESPONSIVE LAYOUT IMPROVEMENTS ===== */

/* Contenedor principal responsivo */
.container {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (max-width: 640px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Grid adaptativo para móvil */
@media (max-width: 768px) {

    /* Forzar 1 columna en grids */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .sm\:grid-cols-2,
    .lg\:grid-cols-3,
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    /* Reducir gaps en móvil */
    .gap-4 {
        gap: 0.75rem;
    }

    .gap-6 {
        gap: 1rem;
    }
}

/* ===== TYPOGRAPHY MOBILE ===== */

@media (max-width: 640px) {

    /* Reducir tamaños de fuente */
    h1 {
        font-size: 1.75rem !important;
        /* 28px */
    }

    h2 {
        font-size: 1.5rem !important;
        /* 24px */
    }

    h3 {
        font-size: 1.25rem !important;
        /* 20px */
    }

    /* Mejorar legibilidad */
    p,
    span,
    div {
        line-height: 1.6;
    }
}

/* ===== MODAL & OVERLAY MOBILE ===== */

@media (max-width: 768px) {

    /* Modales ocupan casi toda la pantalla */
    [role="dialog"],
    .modal {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        margin: 0 auto;
    }

    /* Contenido de modal scrolleable */
    [role="dialog"]>div,
    .modal-content {
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== NAVIGATION MOBILE ===== */

@media (max-width: 768px) {

    /* Navegación inferior fija */
    nav.bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        padding-bottom: env(safe-area-inset-bottom);
        background: rgba(17, 24, 39, 0.95);
        backdrop-filter: blur(12px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Espaciado para navegación fija */
    main {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom));
    }
}

/* ===== CARDS & PANELS MOBILE ===== */

@media (max-width: 640px) {

    /* Tarjetas más compactas */
    .card,
    .panel,
    .glass-panel {
        padding: 0.75rem !important;
        border-radius: 0.75rem;
    }

    /* Reducir sombras en móvil (mejor performance) */
    .shadow-lg,
    .shadow-xl {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    }
}

/* ===== FORMS MOBILE ===== */

@media (max-width: 640px) {

    /* Inputs más grandes para touch */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        min-height: 44px;
        padding: 0.75rem;
        font-size: 16px;
    }

    /* Labels más visibles */
    label {
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
    }
}

/* ===== TABLES MOBILE ===== */

@media (max-width: 768px) {

    /* Tablas scrolleables horizontalmente */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Reducir padding de celdas */
    td,
    th {
        padding: 0.5rem !important;
        font-size: 0.875rem;
    }
}

/* ===== SCROLLBAR MOBILE ===== */

@media (max-width: 768px) {

    /* Scrollbar más delgado en móvil */
    .custom-scrollbar::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    /* Ocultar scrollbar pero mantener funcionalidad */
    .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }
}

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

/* Smooth scrolling nativo */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Hardware acceleration para animaciones */
.animate,
[class*="animate-"] {
    /* Only apply to explicit animation classes, not all transitions */
    backface-visibility: hidden;
}

/* Reducir animaciones en dispositivos de bajo rendimiento */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== UTILITY CLASSES MOBILE ===== */

/* Ocultar en móvil */
@media (max-width: 640px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Mostrar solo en móvil */
.show-mobile {
    display: none !important;
}

@media (max-width: 640px) {
    .show-mobile {
        display: block !important;
    }
}

/* Texto más pequeño en móvil */
@media (max-width: 640px) {
    .text-mobile-sm {
        font-size: 0.875rem !important;
    }

    .text-mobile-xs {
        font-size: 0.75rem !important;
    }
}

/* ===== ORIENTATION SUPPORT ===== */

/* Landscape en móvil */
@media (max-width: 768px) and (orientation: landscape) {

    /* Reducir altura de headers */
    header {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* Modales más anchos en landscape */
    [role="dialog"],
    .modal {
        width: 90vw !important;
        max-height: 85vh !important;
        max-width: 90vw !important;
    }
}

/* ===== LOADING STATES MOBILE ===== */

@media (max-width: 640px) {

    /* Spinners más pequeños */
    .spinner,
    .loading {
        width: 2rem !important;
        height: 2rem !important;
    }

    /* Skeleton loaders más compactos */
    .skeleton {
        height: 3rem;
        border-radius: 0.5rem;
    }
}

/* ===== ACCESSIBILITY MOBILE ===== */

/* Mejorar contraste en móvil */
@media (max-width: 640px) {
    .text-gray-400 {
        color: rgb(209, 213, 219) !important;
        /* Más claro para mejor legibilidad */
    }

    .text-gray-500 {
        color: rgb(156, 163, 175) !important;
    }
}

/* Focus visible para navegación por teclado */
*:focus-visible {
    outline: 2px solid hsl(var(--theme-color-400));
    outline-offset: 2px;
}

/* ===== PREVENT TEXT SELECTION (donde no sea necesario) ===== */

button,
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ===== PULL TO REFRESH PREVENTION ===== */

body {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* ===== CUSTOM MOBILE COMPONENTS ===== */

/* Bottom Sheet para móvil */
@media (max-width: 768px) {
    .bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(17, 24, 39, 0.98);
        backdrop-filter: blur(12px);
        border-top-left-radius: 1.5rem;
        border-top-right-radius: 1.5rem;
        padding: 1.5rem;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
        max-height: 85vh;
        overflow-y: auto;
        z-index: 100;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    }

    .bottom-sheet-handle {
        width: 3rem;
        height: 0.25rem;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 9999px;
        margin: 0 auto 1rem;
    }
}

/* ===== TOAST NOTIFICATIONS MOBILE ===== */

@media (max-width: 640px) {
    .toast {
        bottom: calc(5rem + env(safe-area-inset-bottom)) !important;
        left: 1rem !important;
        right: 1rem !important;
        width: auto !important;
    }
}