/* ==========================================================================
   Los avisos del panel, flotando.

   POR QUE DEJARON DE IR EN EL FLUJO. Se pintaban arriba del contenido, y se
   veian solo porque despues de cada accion la pagina saltaba al tope: el fallo
   hacia visible el mensaje. Al arreglar el salto -- para que el profesional se
   quede donde decidio-- un aviso pegado al principio no lo leeria nadie.

   Ya pasaba en toda pantalla larga: decidir algo al final mostraba la
   confirmacion al principio, fuera de la vista.

   ARRIBA Y CENTRADO, no en una esquina: es donde el ojo ya estaba mirando
   despues de pulsar, y no tapa nada de lo que se acaba de tocar.
   ========================================================================== */

.kr-avisos {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1080;              /* por encima del menu lateral y de los modales */
    width: min(520px, calc(100vw - 24px));
    display: grid;
    gap: .5rem;
    pointer-events: none;       /* no estorba lo que hay debajo... */
}

.kr-avisos .kr-aviso {
    pointer-events: auto;       /* ...pero el aviso si se puede tocar para cerrarlo */
    margin: 0;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(38, 5, 20, .16);
    animation: kr-aviso-entra .22s ease-out;
}

@keyframes kr-aviso-entra {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
}

/* Se va suave, y deja de ocupar sitio al terminar. */
.kr-avisos.se-va {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
    transition: opacity .35s ease, transform .35s ease;
}

@media (prefers-reduced-motion: reduce) {
    .kr-avisos .kr-aviso { animation: none; }
    .kr-avisos.se-va { transition: none; }
}

@media print {
    .kr-avisos { display: none; }
}