/* ==========================================================
   PALETA DE COLORES (root)
   ========================================================== */
:root {
    --color-primary: #5AE22D;
    --color-primary-rgb: 90, 226, 45;

    --color-white: #FFFFFF;
    --color-white-rgb: 255, 255, 255;

    --color-gray-light: #B0B0B0;
    --color-gray-light-rgb: 176, 176, 176;

    --color-gray-medium: #5A5A5A;
    --color-gray-medium-rgb: 90, 90, 90;

    --color-black: #1A1A1A;
    --color-black-rgb: 26, 26, 26;
}

/* ==========================================================
   NOTIFICACIÓN LATERAL (toast) — éxito o error
   ========================================================== */
.almacena-toast-contenedor {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: 380px;
    box-sizing: border-box;
}

.almacena-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--color-black);
    border: 1px solid rgba(var(--color-white-rgb), 0.1);
    border-left: 4px solid var(--color-primary);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 12px 32px rgba(var(--color-black-rgb), 0.5);
    width: 380px;
    max-width: 100%;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: auto;
}

.almacena-toast.mostrar {
    opacity: 1;
    transform: translateX(0);
}

.almacena-toast.almacena-toast-error {
    border-left-color: var(--color-gray-light);
}

.almacena-toast-icono {
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.almacena-toast-exito .almacena-toast-icono {
    color: var(--color-primary);
}

.almacena-toast-error .almacena-toast-icono {
    color: var(--color-gray-light);
}

.almacena-toast-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.almacena-toast-texto strong {
    font-family: "Poppins", sans-serif;
    font-size: 0.9rem;
    color: var(--color-white);
}

.almacena-toast-texto span {
    font-family: "Poppins", sans-serif;
    font-size: 0.8rem;
    color: rgba(var(--color-white-rgb), 0.6);
    line-height: 1.35;
}

.almacena-toast-cerrar {
    background: none;
    border: none;
    color: rgba(var(--color-white-rgb), 0.5);
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.almacena-toast-cerrar:hover {
    color: var(--color-white);
}

@media (max-width: 420px) {
    .almacena-toast-contenedor {
        top: 16px;
        left: 16px;
        right: 16px;
        max-width: none;
    }
    .almacena-toast {
        width: 100%;
    }
}