/* * DIROGA WEB - Responsive Mobile First (Final V3)
 * Ubicación: assets/css/responsive.css
 * Cambios: Menú lateral parcial (no pantalla completa)
 */

/* =========================================
   1. TABLETS Y LAPTOPS PEQUEÑAS (Max 1024px)
   ========================================= */
@media (max-width: 1024px) {
    .container { padding: 2rem 1.5rem; }
    
    /* Home & Layouts */
    .hero-title-main { font-size: 3.5rem; }
    .bento-grid { grid-template-columns: 1fr 1fr; }
    .card-large { grid-column: span 2; }
    .card-wide { grid-column: span 2; }
    
    /* Servicios */
    .products-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================
   2. TABLETS MEDIANAS (Max 992px)
   ========================================= */
@media (max-width: 992px) {
    /* Footer a 2 columnas */
    .footer-content { grid-template-columns: repeat(2, 1fr); }
    
    /* Contacto */
    .contact-layout { grid-template-columns: 1fr; gap: 30px; }
    
    /* Dashboard Split */
    .dashboard-split { grid-template-columns: 1fr; }

    /* Identity Section (Nosotros) */
    .identity-grid { grid-template-columns: 1fr; gap: 40px; }
    .what-we-do-card:hover { transform: translateY(-5px); }
    
    /* Split Normales */
    .about-split { grid-template-columns: 1fr; gap: 40px; }
    .about-image { min-height: 300px; margin-bottom: 20px; order: -1; /* Imagen arriba */ }
}

/* =========================================
   3. CELULARES Y TABLETS PORTRAIT (Max 768px)
   ========================================= */
@media (max-width: 768px) {

    /* --- HEADER & MENU MÓVIL DESLIZANTE --- */
    header { 
        height: 70px; 
        z-index: 1000; 
        position: sticky;
        top:0;
    }

    /* Botón Hamburguesa (El icono) */
    .menu-toggle { 
        display: block; 
        z-index: 1005; 
        cursor: pointer;
        padding: 10px;
        margin-right: -10px;
        
        /* Asegurar tamaño clickable */
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* === EL MENÚ LATERAL (TIPO CAJÓN) === */
    .nav-links {
        position: fixed; 
        top: 70px; /* Altura del header móvil */
        right: -100%; /* Oculto a la derecha */
        
        /* AQUÍ ESTÁ EL CAMBIO: ANCHO PARCIAL */
        width: 75%; 
        max-width: 300px; /* No más ancho que 300px */
        
        height: calc(100vh - 70px);
        background: white;
        flex-direction: column; 
        align-items: center; 
        justify-content: flex-start;
        padding: 40px 20px; 
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        
        /* Sombra fuerte a la izquierda para separar del contenido */
        box-shadow: -10px 0 30px rgba(0,0,0,0.15);
        
        overflow-y: auto;
        z-index: 999;
    }
    
    /* Clase activa: desliza el cajón */
    .nav-links.active { 
        right: 0; 
    }
    
    /* Estilos de los enlaces en el menú móvil */
    .nav-links li { 
        width: 100%; 
        text-align: center; 
        margin: 10px 0;
        opacity: 0;
        transform: translateY(20px);
        transition: 0.3s ease forwards;
    }

    /* Animación escalonada */
    .nav-links.active li { opacity: 1; transform: translateY(0); }
    .nav-links.active li:nth-child(1) { transition-delay: 0.1s; }
    .nav-links.active li:nth-child(2) { transition-delay: 0.2s; }
    .nav-links.active li:nth-child(3) { transition-delay: 0.3s; }
    .nav-links.active li:nth-child(4) { transition-delay: 0.4s; }
    .nav-links.active li:nth-child(5) { transition-delay: 0.5s; }
    .nav-links.active li:nth-child(6) { transition-delay: 0.6s; }

    .nav-links a { 
        font-size: 1.1rem; 
        display: block; 
        width: 100%; 
        padding: 15px 0;
        border-bottom: 1px solid #f5f5f5;
    }

    /* === BOTÓN DE LOGIN GRANDE === */
    .btn-login { 
        width: 100% !important; 
        display: inline-block !important;
        padding: 15px 20px !important;
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        margin-top: 25px !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 20px rgba(14, 92, 56, 0.2) !important;
    }
    
    /* --- NOSOTROS PAGE --- */
    .essence-hero { height: auto; padding: 120px 0 80px; }
    .glass-content { padding: 2rem 1.5rem; width: 90%; }
    .essence-title { font-size: 2rem; }
    .scroll-indicator { display: none; }
    
    /* --- GRIDS DE MISION Y VISION --- */
    .mv-grid { grid-template-columns: 1fr; gap: 30px; }
    
    /* --- TIMELINE VERTICAL --- */
    .timeline-container { 
        flex-direction: column; 
        align-items: flex-start; 
        padding-left: 30px; 
        border-left: 3px solid rgba(0, 255, 136, 0.3); 
        margin-left: 15px; 
        gap: 50px; 
    }
    .timeline-line { display: none; } 
    
    .timeline-item { 
        text-align: left; 
        align-items: flex-start; 
        padding-left: 25px; 
        width: 100%; 
        display: flex; 
        flex-direction: column; 
    }
    
    .timeline-dot { 
        width: 50px; height: 50px; 
        font-size: 1.2rem; 
        position: absolute; 
        left: -58px; top: 0; margin: 0; 
    }

    /* --- HOME ELEMENTS --- */
    .hero-modern { height: auto; min-height: 100vh; padding-top: 110px; padding-bottom: 60px; }
    .hero-title-main { font-size: 2.8rem; line-height: 1.1; }
    .hero-slogan { font-size: 1.2rem; margin-bottom: 30px; min-height: auto; }
    .hero-trust-container { position: relative; bottom: auto; margin-top: 40px; gap: 15px; }
    .trust-pill { width: 100%; font-size: 1rem; padding: 15px 20px; justify-content: center; }

    /* Bento Grid */
    .bento-grid { display: flex; flex-direction: column; gap: 25px; }
    .card-large, .card-medium, .card-wide { width: 100%; }
    .bento-content-row { flex-direction: column-reverse; text-align: center; gap: 20px; }
    .bento-icon { margin-bottom: 15px; }

    /* --- GENERAL SECTIONS --- */
    .dual-layout { grid-template-columns: 1fr; gap: 50px; }
    .floating-badge { position: relative; bottom: -25px; left: 0; width: 90%; margin: 0 auto; justify-content: center; z-index: 2; }
    .custom-grid, .services-3d-container { grid-template-columns: 1fr; }
    .stats-grid { flex-direction: column; gap: 40px; }

    /* --- ADMIN DASHBOARD MÓVIL --- */
    .admin-sidebar { width: 70px; }
    .sidebar-header span, .sidebar-menu span, .sidebar-header h3 { display: none; }
    .sidebar-menu li a { text-align: center; padding: 15px 0; }
    .sidebar-menu i { margin: 0; font-size: 1.4rem; }
    .admin-content { margin-left: 70px; width: calc(100% - 70px); padding: 15px; }
    .dashboard-header { flex-direction: column; align-items: flex-start; }
    .action-buttons-grid { grid-template-columns: 1fr; }
    
    /* --- SERVICIOS PAGE --- */
    .hero-banner { padding: 4rem 1rem; }
    .hero-title { font-size: 2.2rem; }
    .products-grid { grid-template-columns: 1fr; gap: 35px; }
    .product-img-container { height: 220px; }
    .logistics-container { flex-direction: column-reverse; text-align: center; }
    .logistics-list { display: inline-block; text-align: left; margin-top: 30px; }
    .logistics-icon i { font-size: 6rem !important; margin-bottom: 20px; }

    /* --- CONTACTO --- */
    .contact-layout { display: flex; flex-direction: column-reverse; gap: 50px; }
    #map { height: 350px; }
    .contact-form-box { padding: 30px 20px; }

    /* --- FOOTER --- */
    .footer-content { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .footer-section h3 { display: inline-block; margin-bottom: 25px; }
    .socials { justify-content: center; display: flex; margin-top: 25px; }
    .socials a { width: 45px; height: 45px; line-height: 45px; font-size: 1.2rem; }

    /* --- TEXT ALIGNMENT --- */
    .hero-content, .section-header, .cta-final-section .container, .about-content { text-align: center !important; }
    .section-header p, .hero-desc, .about-content p { max-width: 100%; }
}

/* =========================================
   4. MÓVILES PEQUEÑOS (Max 480px)
   ========================================= */
@media (max-width: 480px) {
    .hero-title-main { font-size: 2.3rem; }
    .section-padding { padding: 50px 0; }
    .bento-card { padding: 25px 20px; }
    .stat-big { font-size: 2.8rem; }
    
    .btn-login { 
        font-size: 1.3rem !important; 
        padding: 18px 30px !important;
    }

    .essence-title { font-size: 1.8rem; }
    .what-we-do-card { flex-direction: column; align-items: center; text-align: center; }
    .wwd-icon { margin-bottom: 15px; }
    
    .footer-bottom { padding: 30px 20px; font-size: 0.9rem; }
}

/* =========================================
   5. ESTILOS ESPECÍFICOS: PEDIDOS Y ADMIN (Móvil)
   ========================================= */

@media (max-width: 768px) {

    /* --- CLIENTE: MIS PEDIDOS (mis_pedidos.php) --- */
    
    /* 1. Tarjeta del Pedido */
    .order-card {
        padding: 15px !important; /* Menos padding */
    }

    /* 2. Cabecera (Folio a la izq, Precio abajo) */
    .order-header {
        flex-direction: column; /* Apilar elementos verticalmente */
        gap: 15px;
    }
    
    .order-header > div {
        width: 100%;
        text-align: left !important; /* Forzar alineación izquierda */
    }

    /* 3. Precio y Badge */
    .order-price {
        font-size: 1.3rem !important;
        margin-top: 5px;
    }
    
    /* 4. Alerta de Pago (Caja Verde) */
    .payment-alert {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .payment-alert > div {
        width: 100%;
    }

    /* 5. Botones de Acción (Pagar/Rechazar) */
    .payment-alert form, 
    .payment-alert a, 
    .payment-alert button {
        width: 100%; /* Botones de ancho completo */
        display: block;
        margin-bottom: 10px;
        text-align: center;
        justify-content: center;
    }

    /* 6. Tabla de Desglose (Scroll horizontal para que no rompa el diseño) */
    #detalle-wrapper, 
    div[id^="detalle-"] { 
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch;
    }
    
    div[id^="detalle-"] table {
        min-width: 500px; /* Forzar ancho mínimo para permitir scroll */
    }


    /* --- ADMIN: GESTIONAR PEDIDOS (gestionar_pedidos.php) --- */

    /* Transformar la tabla aburrida en Tarjetas Móviles */
    .container table {
        display: block;
        width: 100%;
    }

    .container thead {
        display: none; /* Ocultar encabezados de tabla */
    }

    .container tbody, .container tr, .container td {
        display: block;
        width: 100%;
    }

    .container tr {
        margin-bottom: 20px;
        border: 1px solid #ddd;
        border-radius: 10px;
        background: #fff;
        padding: 15px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .container td {
        text-align: right; /* Datos a la derecha */
        padding: 8px 0;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%; /* Espacio para la etiqueta */
    }

    .container td:last-child {
        border-bottom: none;
        margin-top: 10px;
    }

    /* Etiquetas Falsas (Data Labels) para simular encabezados */
    /* Ajusta el orden nth-of-type según tus columnas reales */
    .container td:nth-of-type(1)::before { content: "Folio:"; position: absolute; left: 0; font-weight: bold; color: #333; }
    .container td:nth-of-type(2)::before { content: "Cliente:"; position: absolute; left: 0; font-weight: bold; color: #333; }
    .container td:nth-of-type(3)::before { content: "Fecha:"; position: absolute; left: 0; font-weight: bold; color: #333; }
    .container td:nth-of-type(4)::before { content: "Estado:"; position: absolute; left: 0; font-weight: bold; color: #333; }
    .container td:nth-of-type(5)::before { content: "Logística:"; position: absolute; left: 0; font-weight: bold; color: #333; }
    .container td:nth-of-type(6)::before { content: "Total:"; position: absolute; left: 0; font-weight: bold; color: #333; }
    .container td:nth-of-type(7)::before { content: "Acción:"; position: absolute; left: 0; font-weight: bold; color: #333; }


    /* --- ADMIN: DETALLE Y CONTROL (detalle_pedido.php) --- */

    /* Grid principal a 1 sola columna */
    .main-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* Caja de Logística */
    .logistica-box {
        order: -1; /* Poner el control logístico ARRIBA en celular */
    }

    .top-bar h1 {
        font-size: 1.5rem;
    }
    
    .product-item {
        flex-direction: column;
        gap: 10px;
    }
    
    .product-item div:last-child {
        text-align: left !important;
        font-weight: bold;
        background: #f9f9f9;
        padding: 5px;
    }
}