/* Avisos flotantes de Sisplan (wwwroot/js/avisos.js).
   Clases propias: no modifica clases globales ni de MudBlazor. Los colores salen de la
   paleta del tema (variables --mud-palette-*) y de las superficies semánticas de app.css
   (--pla-*-surface / --pla-*-text), que ya se adaptan al modo oscuro. */

.avisos-flotantes {
    position: fixed;
    top: 4.75rem;              /* debajo de la barra superior */
    right: 1rem;
    z-index: 1700;             /* sobre diálogos y snackbars de MudBlazor */
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(26rem, calc(100vw - 2rem));
    pointer-events: none;      /* el hueco entre avisos no bloquea la página */
}

.aviso-flotante {
    pointer-events: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "etiqueta cerrar"
        "texto    cerrar";
    column-gap: .75rem;
    row-gap: .15rem;
    padding: .7rem .75rem .75rem .9rem;
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
    border-left-width: 5px;
    border-radius: 8px;
    background: var(--mud-palette-surface, #ffffff);
    color: var(--mud-palette-text-primary, #1a2535);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
    font-size: .9rem;
    line-height: 1.35;
    animation: aviso-flotante-entrar 160ms ease-out;
}

.aviso-flotante__etiqueta {
    grid-area: etiqueta;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.aviso-flotante__texto {
    grid-area: texto;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.aviso-flotante__cerrar {
    grid-area: cerrar;
    align-self: start;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
}

.aviso-flotante__cerrar:hover,
.aviso-flotante__cerrar:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, .08);
    outline: none;
}

.aviso-flotante--exito {
    border-left-color: var(--mud-palette-success, #2ea44f);
    background: var(--pla-success-surface, #dff3e5);
    color: var(--pla-success-text, #155e31);
}

.aviso-flotante--info {
    border-left-color: var(--mud-palette-info, #2196f3);
    background: var(--pla-info-surface, #e6f1fb);
    color: var(--pla-info-text, #0c447c);
}

.aviso-flotante--advertencia {
    border-left-color: var(--mud-palette-warning, #d9a514);
    background: var(--pla-warning-surface, #fff0b8);
    color: var(--pla-warning-text, #765800);
}

.aviso-flotante--error {
    border-left-color: var(--mud-palette-error, #c0392b);
    background: var(--pla-error-surface, #fde8e8);
    color: var(--pla-error-text, #9b1c1c);
}

@keyframes aviso-flotante-entrar {
    from {
        opacity: 0;
        transform: translateX(1rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .aviso-flotante {
        animation: none;
    }
}