/* Badge de disponibilidad — catálogo y detalle de producto */

.ce-availability {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    font-family: var(--mx-font, 'Inter', system-ui, sans-serif);
    line-height: 1;
    width: fit-content;
    max-width: 100%;
}

.ce-availability--in {
    background: linear-gradient(135deg, rgba(6, 125, 98, 0.12) 0%, rgba(6, 125, 98, 0.06) 100%);
    border: 1px solid #067d62;
    box-shadow:
        0 0 0 1px rgba(6, 125, 98, 0.06) inset,
        0 2px 8px rgba(6, 125, 98, 0.1);
}

.ce-availability-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #067d62;
    box-shadow: 0 0 0 3px rgba(6, 125, 98, 0.2);
    animation: ceAvailabilityPulse 2.2s ease-in-out infinite;
}

@keyframes ceAvailabilityPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(0.92); }
}

.ce-availability-num {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #067d62;
}

.ce-availability-label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
    color: #055a48;
}

.ce-availability--low {
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.1) 0%, rgba(180, 83, 9, 0.05) 100%);
    border-color: #b45309;
    box-shadow:
        0 0 0 1px rgba(180, 83, 9, 0.06) inset,
        0 2px 8px rgba(180, 83, 9, 0.08);
}

.ce-availability--low .ce-availability-dot {
    background: #b45309;
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.18);
}

.ce-availability--low .ce-availability-num {
    color: #b45309;
}

.ce-availability--low .ce-availability-label {
    color: #92400e;
}

.ce-availability--out {
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.1) 0%, rgba(185, 28, 28, 0.05) 100%);
    border: 1px solid #b91c1c;
    box-shadow: 0 2px 8px rgba(185, 28, 28, 0.08);
}

.ce-availability--out .ce-availability-text {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #b91c1c;
}

/* Sobre fondo oscuro (detalle de producto, carrito, etc.) */
body.modern-ui.page-product .ce-availability--in,
body.modern-ui.page-cart .ce-availability--in {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(6, 125, 98, 0.12) 100%);
    border-color: rgba(74, 222, 128, 0.45);
    box-shadow:
        0 0 0 1px rgba(34, 197, 94, 0.1) inset,
        0 4px 12px rgba(34, 197, 94, 0.12);
}

body.modern-ui.page-product .ce-availability-num,
body.modern-ui.page-cart .ce-availability-num {
    color: #4ade80;
}

body.modern-ui.page-product .ce-availability-label,
body.modern-ui.page-cart .ce-availability-label {
    color: #bbf7d0;
}

body.modern-ui.page-product .ce-availability-dot,
body.modern-ui.page-cart .ce-availability-dot {
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
}

body.modern-ui.page-product .ce-availability--low,
body.modern-ui.page-cart .ce-availability--low {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.18) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-color: rgba(251, 191, 36, 0.45);
}

body.modern-ui.page-product .ce-availability--low .ce-availability-num,
body.modern-ui.page-cart .ce-availability--low .ce-availability-num {
    color: #fcd34d;
}

body.modern-ui.page-product .ce-availability--low .ce-availability-label,
body.modern-ui.page-cart .ce-availability--low .ce-availability-label {
    color: #fde68a;
}

body.modern-ui.page-product .ce-availability--out,
body.modern-ui.page-cart .ce-availability--out {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(185, 28, 28, 0.1) 100%);
    border-color: rgba(248, 113, 113, 0.45);
}

body.modern-ui.page-product .ce-availability--out .ce-availability-text,
body.modern-ui.page-cart .ce-availability--out .ce-availability-text {
    color: #fca5a5;
}

@media (prefers-reduced-motion: reduce) {
    .ce-availability-dot {
        animation: none;
    }
}