.bandeja-avisos {
    position: fixed;
    /* Abajo, no arriba: arriba a la derecha está la acción principal de la
       cabecera de casi todas las pantallas y un aviso persistente la tapaba. */
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    z-index: var(--z-aviso, 900);
    display: grid;
    gap: 8px;
    width: min(22rem, calc(100vw - 32px));
    pointer-events: none;
}

.aviso {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    pointer-events: auto;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie-elevada);
    color: var(--texto);
    box-shadow: var(--sombra);
    padding: 12px 12px 12px 14px;
    animation: aviso-entrada 200ms ease-out;
}

.aviso p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.aviso-informacion {
    border-color: color-mix(in srgb, var(--acento) 32%, var(--borde));
    background: color-mix(in srgb, var(--acento) 10%, var(--superficie-elevada));
}

.aviso-exito {
    border-color: color-mix(in srgb, var(--correcto) 32%, var(--borde));
    background: color-mix(in srgb, var(--correcto) 10%, var(--superficie-elevada));
}

.aviso-advertencia,
.aviso-aviso {
    border-color: color-mix(in srgb, var(--aviso) 36%, var(--borde));
    background: color-mix(in srgb, var(--aviso) 12%, var(--superficie-elevada));
}

.aviso-error {
    border-color: color-mix(in srgb, var(--peligro) 36%, var(--borde));
    background: color-mix(in srgb, var(--peligro) 10%, var(--superficie-elevada));
    color: var(--peligro-texto);
}

.aviso-cerrar {
    display: grid;
    width: 36px;
    min-height: 36px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.aviso-cerrar:hover {
    border-color: var(--borde);
    background: var(--superficie);
}

.aviso-salida {
    animation: aviso-salida 180ms ease-in forwards;
}

.dialogo-confirmacion-comun {
    z-index: var(--z-modal);
}

.dialogo-confirmacion-comun p {
    margin: 0 0 18px;
    color: var(--texto-secundario);
    line-height: 1.45;
}

@keyframes aviso-entrada {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes aviso-salida {
    to {
        opacity: 0;
        transform: translateY(6px);
    }
}

@media (max-width: 700px) {
    .bandeja-avisos {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        right: 12px;
        left: 12px;
        width: auto;
    }
}

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