/* =========================================
   ENGLISH TO GO MATERIALS - RESPONSIVE 2.0 (FINAL)
   ========================================= */

@import './variables.css';

/* --------------------------------------------------------
   1. AJUSTES TÉCNICOS (Safe Areas)
   -------------------------------------------------------- */
:root {
    --safe-top: env(safe-area-inset-top, 20px);
    --safe-bottom: env(safe-area-inset-bottom, 20px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

html, body {
    width: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

body {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    min-height: 100vh;
    background-attachment: fixed;
}

/* --------------------------------------------------------
   2. EL ENTORNO VISUAL (Blobs / Luces)
   -------------------------------------------------------- */
@media (max-width: 768px) {
    .blob-indigo, 
    .blob-cyan {
        position: fixed !important;
        width: 350px !important;
        height: 350px !important;
        opacity: 0.6;
        filter: blur(60px);
        z-index: -1;
    }

    .blob-indigo {
        top: -50px !important;
        right: -50px !important;
    }

    .blob-cyan {
        bottom: -50px !important;
        left: -50px !important;
    }
}

/* --------------------------------------------------------
   3. LAYOUT INTELLIGENT SYSTEM (Móvil < 640px)
   -------------------------------------------------------- */
@media (max-width: 640px) {
    
    /* A) CONFIGURACIÓN DEFAULT (Dashboard / Catálogo) */
    main {
        display: block !important;
        min-height: auto !important;
        padding-top: calc(80px + var(--safe-top)); 
        padding-bottom: calc(80px + var(--safe-bottom));
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* B) EXCEPCIÓN CRÍTICA (Login / Auth) */
    body.flex-col main {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 100vh !important;
        padding-bottom: 2rem !important;
    }

    /* C) GRID SYSTEM REPAIR */
    .grid {
        display: grid !important;
        gap: 1.5rem !important;
    }

    /* D) TARJETAS Y PANELES (CORREGIDO) */
    .card, .glass-panel {
        max-width: 100% !important; 
        border-radius: var(--radius-xl) !important;
        
        /* IMPORTANTE: Sin !important aquí para permitir colores personalizados */
        border: 1px solid rgba(255, 255, 255, 0.6); 
        
        box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
    }

    /* === REGLA INTELIGENTE DE BORDES === 
       Convierte borde lateral (PC) en borde superior (Móvil) */
    [class*="border-l-4"] {
        border-left-width: 0px !important;
        border-top-width: 4px !important;
    }
    
    /* E) AJUSTES DE PADDING */
    .p-6, .sm\:p-8 {
        padding: 1.5rem !important;
    }
}

/* --------------------------------------------------------
   4. AJUSTES PARA PANTALLAS MUY PEQUEÑAS (iPhone SE / < 360px)
   -------------------------------------------------------- */
@media (max-width: 360px) {
    main {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .p-6 {
        padding: 1.25rem !important;
    }
}

/* --------------------------------------------------------
   5. TIPOGRAFÍA ADAPTATIVA
   -------------------------------------------------------- */
@media (max-width: 480px) {
    h1.text-2xl {
        font-size: 1.5rem !important;
        line-height: 1.3;
    }
    p {
        font-size: 0.9rem !important;
    }
    input, select, textarea {
        font-size: 16px !important; 
    }
}

/* --------------------------------------------------------
   6. HEADER Y NAVEGACIÓN MÓVIL
   -------------------------------------------------------- */
app-header {
    padding-top: var(--safe-top); 
    z-index: 50;
}

@media (max-width: 640px) {
    app-header img.h-8 { 
        height: 32px;
        width: auto;
    }
}

/* --------------------------------------------------------
   7. MENÚ DE USUARIO (Mobile Adjustment)
   -------------------------------------------------------- */
@media (max-width: 640px) {
    #user-dropdown {
        position: absolute !important; 
        top: calc(100% + 12px) !important;
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        
        width: 260px !important; 
        margin: 0 !important;
        
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15) !important;
        
        transform: none !important; 
        padding: 1rem !important;
        z-index: 1000;
    }

    #user-dropdown::before,
    #user-dropdown::after {
        display: none !important;
    }
    
    #user-dropdown li a, 
    #user-dropdown button {
        padding: 12px 16px !important;
    }
}

/* --------------------------------------------------------
   8. INTERACCIÓN TÁCTIL (Accesibilidad)
   -------------------------------------------------------- */
@media (max-width: 640px) {
    button, 
    .btn, 
    .input-field,
    .tab-btn {
        min-height: 48px;
    }
    
    .space-y-4 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 1.25rem;
    }
}

/* --------------------------------------------------------
   9. REDUCCIÓN DE MOVIMIENTO
   -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}