/* Contenedor del Toast */
.lr-toast-container {
    position: fixed;
    /* --- CAMBIOS AQUÍ --- */
    top: 24px; /* Antes era 'bottom: 24px' */
    right: 24px;
    z-index: 9999999;
    
    /* Estado inicial (oculto y fuera de la pantalla, arriba) */
    opacity: 0;
    visibility: hidden;
    /* --- CAMBIO DE ANIMACIÓN --- */
    transform: translateY(-100px); /* Antes era 'translateX(100px)' */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Estado visible */
.lr-toast-container.show {
    opacity: 1;
    visibility: visible;
    /* --- CAMBIO DE ANIMACIÓN --- */
    transform: translateY(0); /* Antes era 'translateX(0)' */
}

/* ... (El resto del CSS sigue igual) ... */


/* Contenido del Toast (Glassmorphism) */
.lr-toast-content {
    display: flex;
    align: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 12px;
    
    /* --- CAMBIOS AQUÍ --- */
    /* Icono de la Bandera - SIN CAMBIOS */
.lr-flag-icon {
    width: 24px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    flex-shrink: 0; 
}

/* --- CAMBIO AQUÍ --- */
.lr-toast-text {
    flex-grow: 1;
    font-size: 17px; /* Aumentado de 15px */
    /* Puedes probar 18px si lo quieres más grande */
}

/* --- REEMPLAZO DE ESTILOS (.lr-glass-close) --- */
/* Estilo para el nuevo contador */
.lr-countdown-timer {
    background: rgba(0, 0, 0, 0.15); /* Fondo oscuro suave */
    color: white;
    font-size: 14px; /* Un poco más pequeño que el texto principal */
    font-weight: 700;
    line-height: 1;
    
    /* Para hacerlo circular y del mismo tamaño que el botón 'X' */
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    
    flex-shrink: 0; /* Evita que se encoja */
    cursor: default; /* No es clickeable */
    user-select: none; /* Evita que el usuario seleccione el número */
}
    
    
    /* 1. Borde más oscuro para resaltar sobre blanco */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Un poco más visible */
    
    /* 2. Sombra un poco más pronunciada */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); /* Más contraste */
    
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-weight: 600;
    font-size: 19px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);

    /* --- 3. El cambio principal: Glassmorphism Oscuro --- */

    /* Fallback (sigue igual, ya era oscuro) */
    background: rgba(30, 30, 30, 0.8);

    /* Estilos de cristal (OSCURO) */
    @supports (backdrop-filter: blur(10px)) {
        /* Este es el cambio clave: */
        background: rgba(30, 30, 30, 0.5); /* Antes era (255, 255, 255, 0.15) */
        
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}


/* ... (El resto del CSS sigue igual) ... */

/* Icono de la Bandera - SIN CAMBIOS */
.lr-flag-icon {
    width: 26px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    flex-shrink: 0; 
}

.lr-toast-text {
    flex-grow: 1;
}

/* Botón de Cerrar - SIN CAMBIOS */
.lr-glass-close {
    background: rgba(0, 0, 0, 0.1);
    border: none;
    color: white;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

.lr-glass-close:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

/* Adaptación a móviles */
@media (max-width: 480px) {
    .lr-toast-container {
        /* --- CAMBIOS AQUÍ --- */
        top: 10px; /* Antes era 'bottom: 10px' */
        left: 10px;
        right: 10px;
        width: auto;
        
        /* Animación desde arriba en móviles */
        transform: translateY(-100px); /* Antes era 'translateY(100px)' */
    }

    .lr-toast-container.show {
        transform: translateY(0);
    }
    
    .lr-toast-content {
        font-size: 14px;
    }
}