/*
 * Aspecto de los avisos del arranque del sistema ($.notify / bootstrap-notify).
 *
 * Son los que se disparan solos al entrar a la primera pantalla ("Actualizacion
 * exitosa de pacientes no asistidos", "Actualizacion exitosa de facturas"...).
 * El comportamiento (esquina, duración, z-index) lo fija avisoArranque() en
 * web/js/global.js; aquí sólo va el aspecto.
 *
 * Todo va acotado a [data-notify-position="bottom-right"], que es el atributo
 * que bootstrap-notify escribe según el placement: así estas reglas sólo
 * alcanzan a los avisos que avisoArranque() manda abajo a la derecha y NO al
 * resto de los $.notify del sistema, que siguen saliendo arriba con el aspecto
 * de siempre.
 *
 * Por qué hay animación propia y no las clases que trae bootstrap-notify por
 * defecto ("animated fadeInDown" / "animated fadeOutUp"): son de animate.css,
 * que no está cargado en el sistema, así que no hacían nada y el aviso aparecía
 * y desaparecía de golpe. bootstrap-notify cierra escuchando el evento
 * animationend, con un setTimeout de 600 ms de respaldo si la animación no
 * existe; con estas clases el cierre ocurre al terminar la animación.
 */

/* Tarjeta más discreta que la alerta de Bootstrap: el aviso informa, no estorba. */
[data-notify="container"][data-notify-position="bottom-right"] {
    max-width: 360px;
    padding: 11px 36px 11px 14px;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    font-size: 0.82rem;
    line-height: 1.35;
}

[data-notify="container"][data-notify-position="bottom-right"] [data-notify="title"] {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
}

/* La X queda sobre el padding derecho reservado arriba. */
[data-notify="container"][data-notify-position="bottom-right"] [data-notify="dismiss"] {
    position: absolute;
    top: 6px;
    right: 10px;
    padding: 0;
    font-size: 1.05rem;
    line-height: 1;
    opacity: 0.55;
}

[data-notify="container"][data-notify-position="bottom-right"] [data-notify="dismiss"]:hover {
    opacity: 1;
}

/* En móvil no cabe una tarjeta de 360px en una esquina: ocupa el ancho con
   márgenes. El !important es necesario porque bootstrap-notify escribe `right`
   en el estilo en línea del elemento. */
@media (max-width: 575.98px) {
    [data-notify="container"][data-notify-position="bottom-right"] {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none;
    }
}

/* El orden importa: "sale" va después de "entra" para que, cuando el elemento
   lleve las dos clases (bootstrap-notify añade la de salida sin quitar la de
   entrada), gane la de salida y la animación se reinicie. */
@keyframes softopAvisoEntra {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes softopAvisoSale {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(14px);
    }
}

.softop-aviso-entra {
    animation: softopAvisoEntra 0.18s ease-out both;
}

.softop-aviso-sale {
    animation: softopAvisoSale 0.18s ease-in both;
}

/* Sin animación si el usuario pidió menos movimiento. El aviso sigue
   cerrándose: bootstrap-notify lo quita con su setTimeout de respaldo. */
@media (prefers-reduced-motion: reduce) {
    .softop-aviso-entra,
    .softop-aviso-sale {
        animation: none;
    }
}