/* =====================================================
   Notificaciones del sistema (global: admin + portal + logística +
   mobile + cotizador).

   Django las emite en dos formas según la pantalla:
   - admin:     <ul class="messagelist"><li class="success">
   - dashboard: <ul class="net-shell-messages">
   - el resto:  <ul class="messages"><li class="success">
   Las dos se estilan igual acá, para que una notificación se vea igual
   en cualquier pantalla del sistema.

   Comportamiento (net_mensajes.js): éxito e info se desvanecen solos a
   los ~4,5s; error y warning se quedan hasta que el usuario los cierre.
   Todas tienen ✕.
   ===================================================== */

ul.messagelist,
ul.messages,
ul.net-shell-messages {
    box-sizing: border-box;
    /* Contenidas, no de borde a borde: mismo ancho que el módulo de los
       listados (min(100% - 32px, 1440px)). */
    width: min(100% - 32px, 1440px);
    margin: 12px auto 16px;
    padding: 0;
    list-style: none;
}

/* En los forms del patrón, alineadas con la tarjeta (760px). */
body.change-form ul.messagelist {
    width: min(100% - 32px, 760px);
}

ul.messagelist > li,
ul.messages > li,
ul.net-shell-messages > li {
    position: relative;
    box-sizing: border-box;
    display: block;
    /* El margen inferior es lo que se anima al cerrar: apiladas se van de
       a una sin que el resto pegue un salto. */
    margin: 0 0 8px;
    padding: 12px 42px 12px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background-image: none;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
    color: var(--net-ink, #00206e);
    font-size: 14px;
    line-height: 1.45;
    overflow: hidden;
}

ul.messagelist > li:last-child,
ul.messages > li:last-child,
ul.net-shell-messages > li:last-child {
    margin-bottom: 0;
}

/* ---- Colores por tipo (los mismos tokens de marca) ---- */

ul.messagelist > li.success,
ul.messages > li.success,
ul.net-shell-messages > li.success {
    background: var(--net-ok-bg, #ebfceb);
    border-color: #bfe6bf;
    color: var(--net-ok-text, #007a00);
}

ul.messagelist > li.info,
ul.messagelist > li.debug,
ul.messages > li.info,
ul.messages > li.debug,
ul.net-shell-messages > li.info,
ul.net-shell-messages > li.debug {
    background: #e6f1fb;
    border-color: #b9d6f2;
    color: #0c447c;
}

ul.messagelist > li.warning,
ul.messages > li.warning,
ul.net-shell-messages > li.warning {
    background: #fff8e1;
    border-color: #ead48a;
    color: #5d4200;
}

ul.messagelist > li.error,
ul.messages > li.error,
ul.net-shell-messages > li.error {
    background: var(--net-danger-bg, #fee2e2);
    border-color: #f3b4b4;
    color: var(--net-danger-text, #991b1b);
}

/* ---- Botón de cerrar ---- */

.net-msg-cerrar {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.net-msg-cerrar:hover,
.net-msg-cerrar:focus {
    opacity: 1;
    background: rgba(15, 23, 42, 0.06);
}

/* ---- Salida: fade + colapso, sin dejar hueco ---- */

li.net-msg-saliendo {
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        max-height 0.35s ease,
        margin-bottom 0.35s ease,
        padding 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
    li.net-msg-saliendo {
        transition: none;
    }
}