/**
 * DTF Manager Corte PRO - Mobile Responsive Fixes
 * Version: 1.7.0
 * Solo mejoras móviles, no modifica funcionalidad existente
 */

/* ========================================
   1. BARRA INFERIOR FIJA EN MÓVIL - SIMPLIFICADA
   ======================================== */

@media (max-width: 768px) {
    /* Ocultar resumen original en móvil */
    .dtf-corte-summary {
        display: none !important;
    }
    
    /* ANULAR el CSS existente que mueve el resumen arriba */
    .dtf-corte-container .dtf-corte-summary {
        position: static !important;
        order: 0 !important;
        display: none !important;
    }
    
    /* BARRA MÓVIL UNIFICADA */
    .dtf-mobile-bottom-bar {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        border-top: 3px solid var(--dtf-primary, #0073aa);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        z-index: 9999;
        padding: 0;
        font-size: 14px;
    }
    
    /* Línea 1: Resumen general */
    .dtf-mobile-summary-line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px 8px;
        border-bottom: 1px solid #e0e0e0;
        background: #f8f9fa;
    }
    
    .dtf-mobile-total {
        font-size: 18px;
        font-weight: 700;
        color: var(--dtf-primary, #0073aa);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .dtf-minimum-badge {
        display: inline-block;
        font-size: 11px;
        font-weight: 600;
        padding: 2px 6px;
        background: #fff3cd;
        color: #856404;
        border-radius: 3px;
        border: 1px solid #ffc107;
    }
    
    .dtf-mobile-count {
        font-size: 13px;
        color: #666;
        font-weight: 500;
    }
    
    /* Línea 2: Precio actual + incentivo (sin botón toggle) */
    .dtf-mobile-price-line {
        padding: 12px 15px;
        background: white;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .dtf-mobile-current {
        width: 100%;
        font-size: 14px;
        color: #333;
        line-height: 1.5;
    }
    
    .dtf-mobile-current strong {
        color: var(--dtf-primary, #0073aa);
        font-size: 15px;
    }
    
    /* Botón añadir al carrito */
    .dtf-mobile-cart-btn {
        display: block;
        width: calc(100% - 30px);
        margin: 10px 15px;
        padding: 14px 20px;
        background: var(--dtf-button, #0073aa);
        color: white;
        border: none;
        border-radius: 6px;
        font-weight: 700;
        font-size: 15px;
        cursor: pointer;
        transition: all 0.2s;
        text-transform: uppercase;
    }
    
    .dtf-mobile-cart-btn:active:not(:disabled) {
        transform: scale(0.98);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .dtf-mobile-cart-btn:disabled {
        background: #ccc;
        cursor: not-allowed;
        opacity: 0.6;
    }
    
    /* Ajustar padding del contenido principal para no quedar detrás */
    .dtf-corte-container {
        padding-bottom: 200px !important;
    }
}

/* ========================================
   2. SELECTOR DE CANTIDAD MEJORADO
   ======================================== */

@media (max-width: 768px) {
    /* Hacer selector más grande y táctil - OVERRIDE existente */
    .dtf-corte-container .dtf-quantity-selector {
        max-width: 100%;
        gap: 10px;
        margin: 10px 0;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Botones más grandes para dedos */
    .dtf-corte-container .dtf-qty-minus,
    .dtf-corte-container .dtf-qty-plus {
        width: 55px !important;
        height: 55px !important;
        font-size: 24px !important;
        border-width: 2px;
        background: #f8f9fa;
        color: #333 !important; /* Fix: color explícito para visibilidad en móvil */
        transition: all 0.2s;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .dtf-corte-container .dtf-qty-minus:active,
    .dtf-corte-container .dtf-qty-plus:active {
        background: var(--dtf-primary, #0073aa);
        color: white;
        transform: scale(0.95);
    }
    
    /* Input más alto y claro */
    .dtf-corte-container .dtf-qty-input {
        height: 55px !important;
        font-size: 20px !important;
        min-width: 100px !important;
        max-width: 150px !important;
        flex: 1;
        text-align: center;
        border-width: 2px;
        /* Añadir teclado numérico en móvil */
        -webkit-appearance: none;
        -moz-appearance: textfield;
    }
    
    /* Quitar spinners en móvil */
    .dtf-corte-container .dtf-qty-input::-webkit-inner-spin-button,
    .dtf-corte-container .dtf-qty-input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    
    /* Label de "piezas" debajo en móvil */
    .dtf-corte-container .dtf-qty-label {
        display: block;
        width: 100%;
        text-align: center;
        margin: 8px 0 0 0 !important;
        font-size: 14px;
    }
}

/* Para móviles muy pequeños - reorganizar vertical */
@media (max-width: 400px) {
    .dtf-quantity-selector {
        flex-direction: column;
        align-items: stretch;
        max-width: 200px;
        margin: 15px auto;
    }
    
    .dtf-qty-input {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0;
        border-radius: 6px;
        order: -1; /* Input arriba */
    }
    
    .dtf-qty-minus,
    .dtf-qty-plus {
        width: 100% !important;
    }
    
    .dtf-qty-minus {
        border-radius: 6px 6px 0 0;
    }
    
    .dtf-qty-plus {
        border-radius: 0 0 6px 6px;
    }
}

/* ========================================
   3. MEJORAS TÁCTILES ADICIONALES
   ======================================== */

@media (max-width: 768px) {
    /* Botones y elementos interactivos más grandes */
    .dtf-btn,
    .dtf-btn-upload,
    .dtf-file-change {
        min-height: 48px !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
    }
    
    /* Selectores más altos */
    .dtf-size-select {
        height: 48px !important;
        font-size: 16px !important;
        padding: 10px !important;
    }
    
    /* Zona de upload más grande */
    .dtf-upload-zone {
        min-height: 150px;
        padding: 25px 20px !important;
    }
    
    /* Cards de entrega más grandes */
    .dtf-delivery-card {
        padding: 15px !important;
        margin-bottom: 10px;
    }
    
    .dtf-delivery-card input[type="radio"] {
        width: 20px;
        height: 20px;
        margin-right: 12px;
    }
    
    /* Espaciado mejorado entre elementos */
    .dtf-field-group {
        margin-bottom: 25px !important;
    }
    
    /* Hacer los indicadores de paso más grandes */
    .dtf-step-indicator {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
    }
}

/* ========================================
   4. OPTIMIZACIONES ADICIONALES MÓVIL
   ======================================== */

@media (max-width: 768px) {
    /* Mejorar legibilidad de textos */
    .dtf-product-title {
        font-size: 18px !important;
    }
    
    .dtf-label {
        font-size: 15px !important;
    }
    
    /* Hacer el botón eliminar producto más accesible */
    .dtf-remove-product {
        width: 40px !important;
        height: 40px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Mejorar espaciado del formulario */
    .dtf-product-content {
        padding: 20px 15px !important;
    }
    
    /* Ajustar márgenes generales */
    .dtf-corte-container {
        margin: 0 !important;
        padding: 10px !important;
    }
}

/* ========================================
   5. OCULTAR BARRA EN DESKTOP
   ======================================== */

@media (min-width: 769px) {
    .dtf-mobile-bottom-bar {
        display: none !important;
    }
}

/* ========================================
   6. ANIMACIONES SUAVES
   ======================================== */

@media (max-width: 768px) {
    /* Feedback táctil */
    button:active,
    .dtf-btn:active,
    input[type="radio"]:active + label {
        opacity: 0.7;
    }
    
    /* Transiciones suaves */
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
}

/* ========================================
   7. FIX PARA iPHONE SAFE AREAS
   ======================================== */

@supports (padding: max(0px)) {
    .dtf-mobile-bottom-bar {
        padding-bottom: max(15px, env(safe-area-inset-bottom));
    }
}