/**
 * tokens.css — Variables de diseño globales
 * Extraídas del ZIP: CARRITO_DE_COMPRAS (React/Tailwind)
 * Se cargan en TODAS las páginas.
 */
:root {
    --rodio-teal:        #00B3A6;
    --rodio-teal-dk:     #00968b;
    --rodio-teal-lt:     #e6f7f6;
    --rodio-blue:        #2563EB;
    --rodio-blue-dk:     #1d4ed8;
    --rodio-blue-shadow: rgba(37,99,235,0.20);

    --rodio-gray-50:  #f9fafb;
    --rodio-gray-100: #f3f4f6;
    --rodio-gray-200: #e5e7eb;
    --rodio-gray-400: #9ca3af;
    --rodio-gray-500: #6b7280;
    --rodio-gray-600: #4b5563;
    --rodio-gray-700: #374151;
    --rodio-gray-900: #111827;

    --rodio-green-100: #dcfce7;
    --rodio-green-600: #16a34a;
    --rodio-red-50:    #fef2f2;
    --rodio-red-500:   #ef4444;
    --rodio-blue-100:  #dbeafe;
    --rodio-blue-600:  #2563eb;

    /* Diseño mobile (Figma "Mobile Responsive Home Design") — el teal se
       unifica con --rodio-teal; estos son los neutros propios del diseño. */
    --rodio-ink:       #1a1a2e;
    --rodio-surface:   #f5f6f8;
    --rodio-border:    #e8ecef;

    --rodio-radius:    8px;
    --rodio-radius-lg: 12px;
    --rodio-shadow-md: 0 4px 12px rgba(0,0,0,.12);
    --rodio-transition: 0.2s ease;
}

/* =============================================================================
 * TOAST DE CARRITO — notificación global al agregar productos
 * =========================================================================== */

#rodio-cart-toast-container {
    position:       fixed;
    top:            1.25rem;
    right:          1.25rem;
    z-index:        999999;
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    pointer-events: none;
}

.rodio-cart-toast {
    position:       relative;
    display:        flex;
    align-items:    center;
    gap:            0.75rem;
    background:     #ffffff;
    border:         1px solid var(--rodio-gray-200);
    border-left:    4px solid var(--rodio-teal);
    border-radius:  var(--rodio-radius-lg);
    box-shadow:     0 8px 28px rgba(0, 0, 0, 0.13);
    padding:        0.875rem 1rem 1.125rem;
    min-width:      260px;
    max-width:      340px;
    overflow:       hidden;
    pointer-events: auto;
    animation:      rodio-toast-in 0.38s cubic-bezier(0.34, 1.15, 0.64, 1) forwards;
}

.rodio-cart-toast.is-out {
    animation: rodio-toast-out 0.28s ease forwards;
}

.rodio-cart-toast__icon {
    flex-shrink:     0;
    width:           36px;
    height:          36px;
    background:      var(--rodio-teal-lt);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.rodio-cart-toast__icon svg {
    width:  18px;
    height: 18px;
    stroke: var(--rodio-teal);
}

.rodio-cart-toast__body {
    flex:      1;
    min-width: 0;
}

.rodio-cart-toast__label {
    font-size:      0.6875rem;
    font-weight:    700;
    color:          var(--rodio-teal);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom:  0.1rem;
}

.rodio-cart-toast__name {
    font-size:     0.875rem;
    font-weight:   500;
    color:         var(--rodio-gray-900);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.rodio-cart-toast__close {
    flex-shrink:  0;
    background:   none;
    border:       none;
    cursor:       pointer;
    padding:      0;
    line-height:  0;
    color:        var(--rodio-gray-400);
    transition:   color 0.15s ease;
    align-self:   flex-start;
}
.rodio-cart-toast__close:hover { color: var(--rodio-gray-700); }

.rodio-cart-toast__bar {
    position:      absolute;
    bottom:        0;
    left:          0;
    height:        3px;
    width:         100%;
    background:    var(--rodio-teal);
    border-radius: 0 0 0 var(--rodio-radius-lg);
    transform-origin: left;
    animation:     rodio-toast-bar 3s linear forwards;
}

@keyframes rodio-toast-in {
    from { opacity: 0; transform: translateX(110%); }
    to   { opacity: 1; transform: translateX(0);    }
}

@keyframes rodio-toast-out {
    from { opacity: 1; transform: translateX(0);    max-height: 120px; }
    to   { opacity: 0; transform: translateX(110%); max-height: 0;     padding: 0; }
}

@keyframes rodio-toast-bar {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}