/* Avisos (EasyComponentes/Toast/EasyToast.razor). Toman los tokens del tema activo con valores por omisión. */
.easy-toast-host {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(440px, calc(100vw - 24px));
    pointer-events: none;
}

.easy-toast {
    --easy-toast-acento: var(--easy-color-info, #2563eb);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px 14px;
    overflow: hidden;
    pointer-events: auto;
    background: var(--easy-color-superficie, #fff);
    color: var(--easy-color-texto, #1f2430);
    border: 1px solid var(--easy-color-borde, #e5e7eb);
    border-left: 4px solid var(--easy-toast-acento);
    border-radius: var(--easy-radio-base, 8px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
    font-family: var(--easy-fuente-base, system-ui, sans-serif);
    font-size: calc(14px * var(--easy-escala-fuente, 1));
    line-height: 1.35;
    animation: easy-toast-entra .22s ease-out;
}

.easy-toast--success { --easy-toast-acento: var(--easy-color-exito, #15803d); }
.easy-toast--warning { --easy-toast-acento: var(--easy-color-advertencia, #b45309); }
.easy-toast--error { --easy-toast-acento: var(--easy-color-peligro, #b42318); }

.easy-toast--saliendo { animation: easy-toast-sale .2s ease-in forwards; }

.easy-toast__icono {
    flex: none;
    display: flex;
    margin-top: 1px;
    color: var(--easy-toast-acento);
}

.easy-toast__cuerpo { flex: 1; min-width: 0; }
.easy-toast__titulo { font-weight: 600; word-break: break-word; }
.easy-toast__contenido { margin-top: 2px; color: var(--easy-color-texto-tenue, #6b7280); word-break: break-word; }

.easy-toast__cerrar {
    flex: none;
    width: 24px;
    height: 24px;
    margin: -2px -4px 0 0;
    padding: 0;
    border: 0;
    border-radius: calc(var(--easy-radio-base, 8px) * .75);
    background: transparent;
    color: var(--easy-color-texto-tenue, #6b7280);
    font-size: calc(20px * var(--easy-escala-fuente, 1));
    line-height: 1;
    cursor: pointer;
}

.easy-toast__cerrar:hover { background: var(--easy-color-superficie-alterna, #f3f4f6); color: var(--easy-color-texto, #1f2430); }

.easy-toast__progreso {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--easy-toast-acento);
    opacity: .55;
    transform-origin: left;
    animation-name: easy-toast-progreso;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.easy-toast:hover .easy-toast__progreso { animation-play-state: paused; }

@keyframes easy-toast-entra { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes easy-toast-sale { to { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes easy-toast-progreso { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
    .easy-toast, .easy-toast--saliendo { animation: none; }
}
