/* ===== FIXES CRÍTICOS MÓVIL - P0 ===== */
/* Este archivo contiene solo overrides para móvil, no afecta desktop */
/* Fase 1: Quick Wins Críticos */

/* 1. Fix overflow horizontal en header - min-width fijo */
/* 1.1. Diseño móvil específico del header - Orden: Perfil, Logo, Carrito, Menú */
/* ULTRA ESPECÍFICO - Máxima prioridad para sobrescribir otros CSS */
@media (max-width: 767px) {
    /* Header móvil compacto y específico - Selector ultra específico */
    header .top-bar-custom,
    div.top-bar-custom,
    .sticky-header.top-bar-custom {
        height: 60px !important;
        padding: 0 15px !important;
    }
    
    header .top-bar-custom .container,
    div.top-bar-custom .container,
    .sticky-header.top-bar-custom .container {
        padding: 0 !important;
        height: 100% !important;
    }
    
    /* Contenedor flex principal - con gap para espaciar elementos */
    header .top-bar-custom .container > div,
    div.top-bar-custom .container > div,
    .sticky-header.top-bar-custom .container > div {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: 100% !important;
        padding: 0 8px !important;
        gap: 8px !important; /* Gap de 8px entre elementos */
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    /* FORZAR: Anular inline styles de padding y gap del contenedor flex */
    header .top-bar-custom > div[style*="padding"],
    div.top-bar-custom > div[style*="padding"],
    .sticky-header.top-bar-custom > div[style*="padding"],
    header .top-bar-custom .container > div[style*="padding"],
    div.top-bar-custom .container > div[style*="padding"] {
        padding: 0 8px !important; /* Anular cualquier padding inline */
        gap: 0 !important; /* Anular cualquier gap inline */
    }
    
    /* OCULTAR elementos intermedios usando nth-child - más directo */
    /* Elemento 2: Espaciador (flex: 1) */
    header .top-bar-custom > div > div:nth-child(2),
    div.top-bar-custom > div > div:nth-child(2),
    .sticky-header.top-bar-custom > div > div:nth-child(2),
    header .top-bar-custom .container > div > div:nth-child(2),
    div.top-bar-custom .container > div > div:nth-child(2) {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Elemento 3: Búsqueda (min-width: 400px) */
    header .top-bar-custom > div > div:nth-child(3),
    div.top-bar-custom > div > div:nth-child(3),
    .sticky-header.top-bar-custom > div > div:nth-child(3),
    header .top-bar-custom .container > div > div:nth-child(3),
    div.top-bar-custom .container > div > div:nth-child(3) {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Elemento 4: Mi Cuenta (height: 50px) */
    header .top-bar-custom > div > div:nth-child(4),
    div.top-bar-custom > div > div:nth-child(4),
    .sticky-header.top-bar-custom > div > div:nth-child(4),
    header .top-bar-custom .container > div > div:nth-child(4),
    div.top-bar-custom .container > div > div:nth-child(4) {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Elemento 5: Carrito (height: 50px) */
    header .top-bar-custom > div > div:nth-child(5),
    div.top-bar-custom > div > div:nth-child(5),
    .sticky-header.top-bar-custom > div > div:nth-child(5),
    header .top-bar-custom .container > div > div:nth-child(5),
    div.top-bar-custom .container > div > div:nth-child(5) {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* FORZAR: Todos los hijos directos del contenedor flex deben tener flex-basis 0 por defecto */
    header .top-bar-custom > div > div,
    div.top-bar-custom > div > div,
    .sticky-header.top-bar-custom > div > div {
        flex-basis: auto !important;
    }
    
    /* Header padding reducido */
    header .top-bar-custom,
    div.top-bar-custom {
        padding: 0 5px !important;
    }
    
    /* Ocultar elementos de desktop en móvil - Selectores ultra específicos */
    header .top-bar-custom #search,
    div.top-bar-custom #search,
    header .top-bar-custom #top-links,
    div.top-bar-custom #top-links,
    header .top-bar-custom #cart,
    div.top-bar-custom #cart {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* CRÍTICO: Asegurar que el LOGO y sus contenedores sean VISIBLES - máxima prioridad */
    header .top-bar-custom > div > div[style*="flex-shrink: 0"]:first-child,
    div.top-bar-custom > div > div[style*="flex-shrink: 0"]:first-child,
    .top-bar-custom > div > div[style*="flex-shrink: 0"]:first-child {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }
    
    header .top-bar-custom #logo,
    div.top-bar-custom #logo {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ocultar CONTENEDORES PADRES de elementos desktop - solo los que NO contienen el logo */
    /* Contenedor de búsqueda (tiene min-width: 400px que causa problemas) - MÁXIMA ESPECIFICIDAD */
    /* CRÍTICO: Anular el min-width del inline style con !important */
    header .top-bar-custom > div > div[style*="min-width: 400px"],
    div.top-bar-custom > div > div[style*="min-width: 400px"],
    .top-bar-custom > div > div[style*="min-width: 400px"],
    header .top-bar-custom .container > div > div[style*="min-width: 400px"],
    div.top-bar-custom .container > div > div[style*="min-width: 400px"],
    .sticky-header.top-bar-custom > div > div > div[style*="min-width: 400px"],
    header .top-bar-custom > div > div[style*="flex-shrink: 0"][style*="min-width: 400px"],
    div.top-bar-custom > div > div[style*="flex-shrink: 0"][style*="min-width: 400px"] {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important; /* Anular el min-width: 400px del inline style */
        max-width: 0 !important;
        flex: 0 0 0 !important;
        flex-basis: 0 !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        overflow: hidden !important;
        height: 0 !important;
        line-height: 0 !important;
    }
    
    /* También ocultar el elemento #search directamente */
    header .top-bar-custom #search,
    div.top-bar-custom #search,
    .top-bar-custom #search {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        visibility: hidden !important;
    }
    
    /* Contenedores de Mi Cuenta y Carrito - tienen height: 50px (el logo NO lo tiene) */
    /* Ocultar contenedores con height: 50px EXCEPTO si contienen el logo */
    /* FORZAR que salgan completamente del flujo */
    header .top-bar-custom > div > div[style*="height: 50px"],
    div.top-bar-custom > div > div[style*="height: 50px"],
    .top-bar-custom > div > div[style*="height: 50px"] {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
        flex-basis: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
        position: absolute !important; /* Sacarlo del flujo */
        left: -9999px !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Botones de la derecha - agrupar carrito y menú juntos */
    /* Botón Carrito - empujar a la derecha con margin-left: auto */
    header .top-bar-custom button.mobile-cart,
    div.top-bar-custom button.mobile-cart,
    .top-bar-custom button.mobile-cart,
    button.mobile-cart {
        order: 3 !important;
        margin: 0 0 0 auto !important; /* margin-left: auto para empujar a la derecha */
    }
    
    /* Botón Menú - pegado al carrito, sin margin-left adicional */
    header .top-bar-custom button.mobile-menu-toggle,
    div.top-bar-custom button.mobile-menu-toggle,
    .top-bar-custom button.mobile-menu-toggle,
    button.mobile-menu-toggle {
        order: 4 !important;
        margin: 0 !important; /* Sin margin-left, pegado al carrito por el gap */
    }
    
    /* CRÍTICO: Eliminar espaciador del layout completamente - no debe ocupar espacio */
    /* Usar múltiples selectores para asegurar que se capture */
    header .top-bar-custom > div > div[style*="flex: 1"],
    div.top-bar-custom > div > div[style*="flex: 1"],
    .top-bar-custom > div > div[style*="flex: 1"],
    header .top-bar-custom .container > div > div[style*="flex: 1"],
    div.top-bar-custom .container > div > div[style*="flex: 1"],
    .sticky-header.top-bar-custom > div > div > div[style*="flex: 1"] {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
        flex-basis: 0 !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
        position: absolute !important; /* Sacarlo completamente del flujo */
        left: -9999px !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Logo centrado - orden 2 - Selector ultra específico - sin flex: 1 */
    header .top-bar-custom #logo,
    div.top-bar-custom #logo {
        order: 2 !important;
        flex: 0 0 auto !important; /* No crece, no se encoge, tamaño automático */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important; /* Quitar margin: 0 auto que puede crear espacio */
        min-width: 0 !important;
        max-width: none !important;
    }
    
    /* Contenedor del logo - permitir que crezca para centrar el logo */
    header .top-bar-custom .container > div > div:first-child,
    div.top-bar-custom .container > div > div:first-child,
    .top-bar-custom .container > div > div:first-child {
        order: 2 !important;
        flex: 1 1 auto !important; /* Permitir que crezca para ocupar espacio central */
        display: flex !important;
        justify-content: center !important; /* Centrar el logo dentro */
        align-items: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    header .top-bar-custom #logo img,
    div.top-bar-custom #logo img {
        max-height: 40px !important;
        width: auto !important;
        max-width: 150px !important; /* Limitar ancho máximo del logo */
    }
    
    
    /* FORZAR VISIBILIDAD DE BOTONES MÓVILES - MÁXIMA PRIORIDAD */
    /* Asegurar que el contenedor padre muestre los botones */
    header .top-bar-custom > div,
    div.top-bar-custom > div {
        overflow: visible !important;
    }
    
    /* Botón Perfil - orden 1 (izquierda) - Selector ultra específico - tamaño fijo */
    header .top-bar-custom button.mobile-profile-btn,
    div.top-bar-custom button.mobile-profile-btn,
    .top-bar-custom button.mobile-profile-btn,
    button.mobile-profile-btn {
        order: 1 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 10000 !important;
        position: relative !important;
        background: var(--color-primary) !important;
        border: none !important;
        color: var(--color-secondary) !important;
        font-size: 20px !important;
        padding: 0 !important;
        cursor: pointer !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        flex: 0 0 44px !important; /* Tamaño fijo */
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        box-shadow: 0 2px 4px rgba(192, 205, 41, 0.3) !important;
        margin: 0 !important; /* Sin margin adicional, solo gap */
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
    }
    
    header .top-bar-custom button.mobile-profile-btn:hover,
    div.top-bar-custom button.mobile-profile-btn:hover,
    .top-bar-custom button.mobile-profile-btn:hover,
    button.mobile-profile-btn:hover {
        background: var(--color-secondary) !important;
        color: var(--color-primary) !important;
    }
    
    /* Botón Carrito - orden 3 (derecha, antes del menú) - Selector ultra específico - tamaño fijo */
    header .top-bar-custom button.mobile-cart,
    div.top-bar-custom button.mobile-cart,
    .top-bar-custom button.mobile-cart,
    button.mobile-cart {
        order: 3 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 10000 !important;
        position: relative !important;
        background: var(--color-primary) !important;
        border: none !important;
        color: var(--color-secondary) !important;
        font-size: 20px !important;
        padding: 0 !important;
        cursor: pointer !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        flex: 0 0 44px !important; /* Tamaño fijo */
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        box-shadow: 0 2px 4px rgba(192, 205, 41, 0.3) !important;
        margin: 0 0 0 auto !important; /* margin-left: auto para empujar a la derecha */
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
    }
    
    header .top-bar-custom button.mobile-cart:hover,
    div.top-bar-custom button.mobile-cart:hover,
    .top-bar-custom button.mobile-cart:hover,
    button.mobile-cart:hover {
        background: var(--color-secondary) !important;
        color: var(--color-primary) !important;
    }
    
    /* Botón Menú - orden 4 (extrema derecha) - Selector ultra específico - tamaño fijo */
    header .top-bar-custom button.mobile-menu-toggle,
    div.top-bar-custom button.mobile-menu-toggle,
    .top-bar-custom button.mobile-menu-toggle,
    button.mobile-menu-toggle {
        order: 4 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 10000 !important;
        position: relative !important;
        background: transparent !important;
        border: none !important;
        color: var(--color-white) !important;
        font-size: 24px !important;
        padding: 0 !important;
        cursor: pointer !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 44px !important; /* Tamaño fijo */
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        margin: 0 !important; /* Sin margin-left, pegado al carrito por el gap */
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
    }
    
    header .top-bar-custom button.mobile-menu-toggle:hover,
    div.top-bar-custom button.mobile-menu-toggle:hover,
    .top-bar-custom button.mobile-menu-toggle:hover,
    button.mobile-menu-toggle:hover {
        color: var(--color-primary) !important;
    }
    
    /* Asegurar que los íconos dentro de los botones sean visibles */
    header .top-bar-custom button.mobile-profile-btn i,
    header .top-bar-custom button.mobile-cart i,
    header .top-bar-custom button.mobile-menu-toggle i,
    div.top-bar-custom button.mobile-profile-btn i,
    div.top-bar-custom button.mobile-cart i,
    div.top-bar-custom button.mobile-menu-toggle i {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Badge del carrito móvil */
    header .top-bar-custom .mobile-cart .cart-badge,
    div.top-bar-custom .mobile-cart .cart-badge,
    button.mobile-cart .cart-badge {
        position: absolute !important;
        top: -5px !important;
        right: -5px !important;
        background: var(--color-danger-alt) !important;
        color: var(--color-white) !important;
        border-radius: 50% !important;
        width: 20px !important;
        height: 20px !important;
        font-size: 11px !important;
        font-weight: bold !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        border: 2px solid var(--color-secondary) !important;
    }
    
    /* Asegurar que la barra de búsqueda móvil sea visible */
    .mobile-search-bar {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Pantallas muy pequeñas (360px) - gap reducido */
@media (max-width: 360px) {
    header .top-bar-custom .container > div,
    div.top-bar-custom .container > div {
        gap: 4px !important; /* Gap más pequeño en pantallas pequeñas */
        padding: 0 5px !important;
    }
    
    header .top-bar-custom #logo img,
    div.top-bar-custom #logo img {
        max-width: 120px !important;
        max-height: 35px !important;
    }
    
    /* Botones ligeramente más pequeños en pantallas muy pequeñas */
    header .top-bar-custom button.mobile-profile-btn,
    header .top-bar-custom button.mobile-cart,
    header .top-bar-custom button.mobile-menu-toggle,
    div.top-bar-custom button.mobile-profile-btn,
    div.top-bar-custom button.mobile-cart,
    div.top-bar-custom button.mobile-menu-toggle {
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
    }
}

/* 1.2. Fix botón carrito web - eliminar sprite duplicado (solo mostrar ícono FontAwesome más oscuro) */
@media (min-width: 768px) {
    /* Ocultar el sprite del carrito (background image) */
    #cart #cart-total {
        background: none !important;
        padding: 0 !important;
    }
    
    /* Mostrar solo el número del carrito sin sprite */
    #cart #cart-total {
        display: inline-flex !important;
        align-items: center !important;
        color: var(--color-secondary) !important;
        font-weight: 600 !important;
        font-size: 15px !important;
    }
    
    /* Asegurar que el ícono FontAwesome (más oscuro) sea visible */
    #cart .cart-dropdown-button i.fa-shopping-cart {
        display: inline-flex !important;
        color: var(--color-secondary) !important;
        font-size: 18px !important;
    }
}

/* 2. Fix font-size inputs para evitar zoom automático en iOS */
@media (max-width: 767px) {
    input.form-control,
    select.form-control,
    textarea.form-control,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"] {
        font-size: 16px !important;
    }
}

/* 3. Fix header checkout que tapa contenido */
@media (max-width: 767px) {
    body.checkout-page,
    body.checkout-page #content,
    body.checkout-page .container,
    body.checkout-page .main-content {
        margin-top: 80px !important;
        padding-top: 20px !important;
    }
    
    /* Asegurar que el stepper sea visible */
    body.checkout-page .stepper {
        top: 80px !important;
    }
}

/* 4. Fix dropdown carrito width - excede viewport */
@media (max-width: 767px) {
    #cart .dropdown-menu {
        width: calc(100vw - 20px) !important;
        max-width: 400px !important;
        right: 10px !important;
        left: auto !important;
    }
    
    /* Asegurar que el dropdown no se salga de la pantalla */
    #cart.open > .btn + .dropdown-menu {
        transform: translateX(0) !important;
    }
}

/* 4.1. Fix menú de navegación - categorías a ancho completo */
@media (max-width: 767px) {
    /* Contenedor de categorías - asegurar ancho completo */
    .navigation-menu-fixed .category-nav {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Lista ul de categorías - asegurar ancho completo y layout vertical */
    .navigation-menu-fixed .category-nav ul {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important; /* Forzar columna vertical */
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Categorías en móviles - asegurar que ocupen todo el ancho como los botones */
    .navigation-menu-fixed .category-nav li {
        width: 100% !important; /* Forzar ancho completo */
        display: block !important; /* Cambiar de flex a block */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        margin-left: 0 !important; /* Eliminar margen izquierdo */
        padding-left: 0 !important; /* Eliminar padding izquierdo */
        flex: 1 0 100% !important; /* Flex para ocupar 100% del ancho */
    }
    
    .navigation-menu-fixed .category-nav a {
        padding: 15px 20px !important;
        border-radius: 0 !important;
        background: none !important;
        width: 100% !important;
        display: block !important; /* Asegurar que sea block */
        text-align: left !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
        min-height: 50px !important; /* Altura mínima para touch targets */
    }
    
    /* Eliminar separadores entre categorías en móvil */
    .navigation-menu-fixed .category-nav li + li::before {
        display: none !important;
    }
}

/* ===== FASE 2: MEJORAS DE USABILIDAD (P1) ===== */

/* 5. Tipografía y legibilidad móvil */
@media (max-width: 767px) {
    /* Texto base legible sin zoom */
    body {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    /* Labels más legibles */
    label,
    .control-label {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    /* Títulos más prominentes */
    h1, h2 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }
    
    h4 {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }
    
    /* Párrafos con mejor espaciado */
    p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
    }
}

/* 6. Touch targets mínimos (44×44px) */
@media (max-width: 767px) {
    /* Botones móviles header - asegurar tamaño mínimo */
    .mobile-profile-btn,
    .mobile-cart,
    .mobile-menu-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
    }
    
    /* Botones de cantidad en carrito */
    .quantity-btn,
    .quantity-btn-decrease,
    .quantity-btn-increase,
    .cart-item-quantity button,
    .cart-item-quantity .quantity-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
    }
    
    /* Botones principales - todos los botones */
    .btn,
    button:not(.quantity-btn):not(.mobile-profile-btn):not(.mobile-cart):not(.mobile-menu-toggle):not(.cart-item-delete) {
        min-height: 44px !important;
        padding: 12px 16px !important;
    }
    
    /* Botones pequeños también deben ser táctiles */
    .btn-sm {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 16px !important;
    }
    
    /* Links que actúan como botones */
    a.btn,
    a[role="button"] {
        min-height: 44px !important;
        padding: 12px 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Botones de eliminar en carrito sidebar */
    .cart-item-delete {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
    }
    
    /* Botones de paginación */
    .pagination > li > a,
    .pagination > li > span {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 12px !important;
    }
    
    /* Iconos clicables con padding adecuado */
    a i.fa,
    button i.fa,
    .fa-clickable {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px !important;
    }
}

/* 7. Focus visible (accesibilidad) */
@media (max-width: 767px) {
    /* Restaurar focus visible solo cuando se navega con teclado */
    :focus-visible {
        outline: 2px solid var(--color-primary) !important;
        outline-offset: 2px !important;
        border-radius: 4px !important;
    }
    
    /* Botones con focus claro */
    button:focus-visible,
    .btn:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 2px solid var(--color-primary) !important;
        outline-offset: 2px !important;
    }
    
    /* Inputs con focus visible */
    input.form-control:focus-visible,
    select.form-control:focus-visible,
    textarea.form-control:focus-visible {
        outline: 2px solid var(--color-primary) !important;
        outline-offset: 2px !important;
        border-color: var(--color-primary) !important;
    }
    
    /* Links con focus visible */
    a:focus-visible {
        outline: 2px solid var(--color-primary) !important;
        outline-offset: 2px !important;
        text-decoration: underline !important;
    }
}