/* ============================================
   BADGE DEL CARRITO MÓVIL - MEJORADO Y VISIBLE
   Fecha: 2025-12-04
   Propósito: Hacer el contador del carrito más visible en móviles
============================================ */

/* ============================================
   DESKTOP: Badge normal arriba a la derecha
============================================ */
@media (min-width: 769px) {
    .carrito-badge-mobile {
        position: absolute !important;
        top: -8px !important;
        right: -8px !important;
        min-width: 22px !important;
        height: 22px !important;
        border-radius: 11px !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 6px !important;
        background: #dc3545 !important;
        color: white !important;
        border: 2px solid #FAF8F5 !important;
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4) !important;
        z-index: 1060 !important;
    }
}

/* ============================================
   MÓVILES: Badge más grande y visible DEBAJO del icono
============================================ */
@media (max-width: 768px) {
    /* Botón del carrito flotante */
    .tienda-carrito-flotante {
        position: fixed !important;
        bottom: 20px !important;
        right: 15px !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #D4AF37, #F4E4BC) !important;
        color: #2C2C2C !important;
        border: none !important;
        box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5) !important;
        font-size: 1.1rem !important;
        z-index: 1055 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        padding: 0 !important;
        transition: all 0.3s ease !important;
    }

    .tienda-carrito-flotante:active {
        transform: scale(0.95) !important;
    }

    /* Icono del carrito - tamaño reducido y más proporcionado */
    .tienda-carrito-flotante i {
        font-size: 1.05rem !important;
        margin-bottom: 2px !important;
    }

    /* Badge DEBAJO del icono - Visible pero proporcionado */
    .carrito-badge-mobile {
        position: relative !important;
        bottom: auto !important;
        top: 6px !important;
        right: auto !important;
        left: auto !important;

        /* Tamaño proporcionado y visible */
        min-width: 22px !important;
        height: 16px !important;

        /* Diseño */
        border-radius: 8px !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;

        /* Layout */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 6px !important;

        /* Colores */
        background: #dc3545 !important;
        color: white !important;

        /* Sombra y borde */
        border: 2px solid white !important;
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.5) !important;

        /* Z-index */
        z-index: 1060 !important;

        /* Animación */
        transition: all 0.3s ease !important;
    }

    /* Animación cuando hay items */
    .carrito-badge-mobile:not(:empty) {
        animation: badgePulse 2s ease-in-out infinite !important;
    }

    @keyframes badgePulse {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 3px 10px rgba(220, 53, 69, 0.6);
        }
        50% {
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(220, 53, 69, 0.8);
        }
    }

    /* Cuando el badge está en 0, hacerlo más discreto */
    .carrito-badge-mobile:empty,
    .carrito-badge-mobile:contains("0") {
        opacity: 0.6 !important;
        animation: none !important;
    }
}

/* ============================================
   MÓVILES PEQUEÑOS (< 480px)
============================================ */
@media (max-width: 480px) {
    .tienda-carrito-flotante {
        width: 52px !important;
        height: 52px !important;
        font-size: 1.05rem !important;
    }

    .tienda-carrito-flotante i {
        font-size: 1rem !important;
        margin-bottom: 2px !important;
    }

    .carrito-badge-mobile {
        min-width: 20px !important;
        height: 15px !important;
        font-size: 0.6rem !important;
        padding: 0 5px !important;
        top: 5px !important;
    }
}

/* ============================================
   PANTALLAS MUY PEQUEÑAS (< 360px)
============================================ */
@media (max-width: 360px) {
    .tienda-carrito-flotante {
        width: 48px !important;
        height: 48px !important;
        font-size: 1rem !important;
    }

    .tienda-carrito-flotante i {
        font-size: 0.95rem !important;
        margin-bottom: 1px !important;
    }

    .carrito-badge-mobile {
        min-width: 18px !important;
        height: 14px !important;
        font-size: 0.58rem !important;
        padding: 0 4px !important;
        top: 5px !important;
    }
}

/* ============================================
   ESTADO CUANDO HAY MUCHOS ITEMS (10+)
============================================ */
@media (max-width: 768px) {
    /* Badge con 2 dígitos */
    .carrito-badge-mobile[data-count="2-digits"],
    .carrito-badge-mobile:matches([^0-9][0-9]{2}$]) {
        min-width: 32px !important;
        padding: 0 8px !important;
        font-size: 0.68rem !important;
    }

    /* Badge con 3+ dígitos (99+) */
    .carrito-badge-mobile[data-count="3-digits"] {
        min-width: 36px !important;
        padding: 0 9px !important;
        font-size: 0.65rem !important;
    }
}

/* ============================================
   ACCESIBILIDAD - CONTRASTE ALTO
============================================ */
@media (max-width: 768px) {
    /* Aumentar contraste para mejor visibilidad */
    .carrito-badge-mobile {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    }

    /* Focus visible para accesibilidad */
    .tienda-carrito-flotante:focus {
        outline: 3px solid #D4AF37 !important;
        outline-offset: 3px !important;
    }

    .tienda-carrito-flotante:focus .carrito-badge-mobile {
        box-shadow: 0 4px 15px rgba(220, 53, 69, 0.9) !important;
    }
}

/* ============================================
   ANIMACIÓN AL AGREGAR ITEMS
============================================ */
@media (max-width: 768px) {
    @keyframes badgeBounce {
        0%, 100% {
            transform: scale(1);
        }
        25% {
            transform: scale(1.3);
        }
        50% {
            transform: scale(0.9);
        }
        75% {
            transform: scale(1.1);
        }
    }

    /* Clase para animar cuando se agrega un item */
    .carrito-badge-mobile.item-agregado {
        animation: badgeBounce 0.5s ease !important;
    }
}

/* ============================================
   VARIANTE: Badge a un LADO del botón (alternativa)
============================================ */
@media (max-width: 768px) {
    /* Descomentar para badge en esquina superior derecha del botón */
    /*
    .tienda-carrito-flotante {
        flex-direction: row !important;
        position: relative !important;
    }

    .carrito-badge-mobile {
        position: absolute !important;
        top: -5px !important;
        right: -5px !important;
        bottom: auto !important;
        left: auto !important;
    }
    */
}