/* ====== Estilos nuevos para loader y toasts ====== */
.hidden { display: none !important; }

/* Loader global */
.loader {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 9999; backdrop-filter: blur(1px);
}
.loader .spinner {
    width: 48px; height: 48px; border-radius: 50%;
    border: 4px solid var(--brand-2); border-top-color: transparent; /* Color del spinner ajustado */
    animation: spin 0.9s linear infinite;
    margin-bottom: 10px;
}
.loader .loader-text { color: var(--text-light); font-weight: 600; } /* Color del texto ajustado */
@keyframes spin { to { transform: rotate(360deg); } }

/* Toasts */
.toast-container {
    position: fixed; right: 16px; top: 16px;
    display: grid; gap: 10px; z-index: 10000;
}
.toast {
    min-width: 260px; max-width: 360px;
    background: var(--bg-dark); color: var(--text-light); padding: 12px 14px; /* Fondo y texto ajustados */
    border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    display: flex; align-items: center; justify-content: space-between;
    opacity: 0; transform: translateY(-6px);
    animation: toast-in 200ms ease-out forwards;
}
.toast.show {
    opacity: 1;
    transform: translateY(0);
}
.toast.hide {
    animation: toast-out 300ms ease-in forwards;
}
.toast.success { background: #28a745; } /* Verde para éxito */
.toast.error   { background: var(--danger); } /* Color de error ajustado */
.toast .close { margin-left: 10px; background: transparent; border: 0; color: var(--text-light); cursor: pointer; } /* Color del botón de cierre ajustado */
@keyframes toast-in { to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-6px); }
}

/* Botones/inputs en estado "cargando" */
.is-loading { position: relative; pointer-events: none; opacity: .8; }
.is-loading::after {
    content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    animation: spin .8s linear infinite;
}