/* ==========================================================================
   RESPONSIVE.CSS — EXPERIENCIA TIPO WEB APP MÓVIL PARA CALCULADORAS
   Smart Point | Optimizado para iOS & Android (Smartphones & Tablets)
   ========================================================================== */

/* Prevenir scroll horizontal accidental global */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ==========================================================================
   BREAKPOINT MÓVIL (< 768px) - EXPERIENCIA NATIVA DE APLICACIÓN
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. Header y Espaciado Superior Tipo App */
    main.pt-32,
    main[class*="pt-32"],
    .pt-32 {
        padding-top: 82px !important;
        padding-bottom: 95px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* 2. Hero / Títulos de Calculadoras */
    .hero-section h1,
    h1.text-4xl, h1.text-5xl, h1.text-6xl, h1.text-7xl {
        font-size: 1.85rem !important;
        line-height: 1.15 !important;
        letter-spacing: -0.5px !important;
        margin-bottom: 8px !important;
    }

    .hero-section p,
    main .text-gray-400 {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
    }

    /* 3. Tarjeta Contenedora Principal (Card estilo App) */
    .glass-card {
        padding: 18px 14px !important;
        border-radius: 20px !important;
        margin-bottom: 20px !important;
        background: rgba(18, 18, 18, 0.75) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
    }

    /* 4. Inputs, Selects y Elementos de Formulario Táctiles */
    input[type="text"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important; /* Previene auto-zoom molesto en Safari iOS */
        min-height: 48px !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    select {
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        padding-right: 32px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        background-size: 14px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    select:focus,
    input:focus {
        border-color: #e3000f !important;
        box-shadow: 0 0 0 3px rgba(227, 0, 15, 0.25) !important;
        outline: none !important;
    }

    label {
        font-size: 0.76rem !important;
        letter-spacing: 0.6px !important;
        margin-bottom: 5px !important;
        display: block !important;
    }

    /* 5. Grids Internos de Inputs (Ancho x Alto en 2 Columnas) */
    .grid.grid-cols-1.md\:grid-cols-2,
    .grid.grid-cols-1.md\:grid-cols-3,
    .grid.grid-cols-1.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Si hay 3 inputs como Ancho, Largo, Fondo en caja.html: */
    #an, #la, #fo {
        min-height: 48px !important;
        font-size: 16px !important;
    }
    .grid-cols-1.md\:grid-cols-3 > div:last-child {
        grid-column: span 2 !important;
    }

    /* 6. Botones de Acción Primaria Tipo App */
    .btn-gradient,
    button[onclick*="calc"],
    button[onclick*="calcular"] {
        min-height: 52px !important;
        font-size: 0.95rem !important;
        font-weight: 900 !important;
        letter-spacing: 1px !important;
        border-radius: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        box-shadow: 0 8px 25px rgba(227, 0, 15, 0.35) !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .btn-gradient:active,
    button[onclick*="calc"]:active {
        transform: scale(0.98) !important;
    }

    /* 7. Columna de Resultados / Ticket de Cotización */
    .lg\:col-span-5 {
        margin-top: 15px !important;
    }
    
    .lg\:col-span-5 .glass-card {
        border: 1px solid rgba(227, 0, 15, 0.3) !important;
        background: linear-gradient(180deg, rgba(25, 10, 10, 0.85) 0%, rgba(15, 15, 15, 0.95) 100%) !important;
    }

    /* 8. CALCULADORA DE STICKERS (Específica) */
    #sticker-calc {
        padding: 40px 12px 100px !important;
    }

    #sticker-calc > div:first-child h2 {
        font-size: 1.85rem !important;
    }

    #sticker-calc > div:last-of-type {
        padding: 20px 14px !important;
        border-radius: 20px !important;
        background: rgba(18, 18, 18, 0.85) !important;
        border: 1px solid rgba(0, 243, 255, 0.2) !important;
    }

    /* Grid responsiva de los inputs de stickers */
    .sticker-size-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .sticker-size-grid > div:last-child {
        grid-column: span 2 !important;
    }

    .sticker-size-card {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 14px !important;
        padding: 14px !important;
        margin-bottom: 10px !important;
    }

    #btn-add-size {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
        border-radius: 12px !important;
        font-size: 0.88rem !important;
        margin-top: 10px !important;
    }

    /* Barra de botones de Gap / Separación para Staff */
    #staff-gap-container .staff-gap-btn {
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
    }

    /* Contenedor de Resultado de Stickers */
    #calc-result-box {
        padding: 20px 14px !important;
        border-radius: 18px !important;
    }

    #calc-result-box #calc-qty {
        font-size: 3.2rem !important;
        line-height: 1 !important;
    }

    /* Diagrama SVG de acomodación con scroll táctil suave */
    #staff-pliego-diagram-svg,
    svg.pliego-svg,
    .diagram-scroll-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* 9. CALCULADORA 3D (cotizador_3d.html) */
    input[type="range"] {
        height: 8px !important;
        margin: 12px 0 !important;
    }

    /* 10. ESQUEMA DE CAJAS SVG (caja.html) */
    .esquema-caja-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 10px !important;
    }
}

/* ==========================================================================
   AJUSTE DE LA BARRA INFERIOR GLOBAL (BOTTOM NAV)
   Evita que "CONTACTO" o "CATÁLOGOS" se corten en celulares pequeños
   ========================================================================== */
@media (max-width: 480px) {
    .bottom-nav {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .bottom-nav-item {
        padding: 4px 1px !important;
        font-size: 0.58rem !important;
        letter-spacing: -0.3px !important;
    }

    .bottom-nav-item span {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
    }

    .bottom-nav-item svg {
        width: 20px !important;
        height: 20px !important;
    }
}