/* ============================================================================
   Avisos (toasts)
   ----------------------------------------------------------------------------
   El aviso anterior era una .alert de Bootstrap fija arriba a la derecha con
   min-width y sin max-width: en el teléfono crecía hacia la izquierda hasta
   salirse de la pantalla. El aspa usaba .close, que es de Bootstrap 4 —en la 5
   se llama .btn-close—, así que se dibujaba como un botón gris del navegador
   metido en mitad de la frase.

   Este es otro componente. Una pila, no un aviso suelto: si llegan dos, se
   apilan en vez de pisarse. Ancho acotado siempre. El aspa se dibuja aquí, sin
   depender de la versión de Bootstrap ni de que cargue FontAwesome.

   Los colores salen de cm-base.css. Un aviso no es sitio para estrenar paleta:
   el verde de "guardado" tiene que ser el mismo verde que ya usan las píldoras
   de estado de las tablas.
   ========================================================================== */

.cm-notices {
    position: fixed;
    top: 16px;
    right: 16px;
    left: auto;
    z-index: 10800;              /* por encima del modal de cm-confirm */
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;        /* la columna no tapa la página... */
}

.cm-notice {
    pointer-events: auto;        /* ...pero cada aviso sí se puede tocar */
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 12px;
    padding: 14px 14px 15px;
    background: var(--cm-white, #fff);
    border: 1px solid var(--cm-rule, #e3e8ef);
    border-radius: var(--cm-radius, 12px);
    box-shadow: var(--cm-shadow-high, 0 8px 26px rgba(39, 43, 65, .12));
    overflow: hidden;
}

/* El color del estado entra por el canto, no por el fondo: sobre fondo blanco
   el texto se lee mejor que sobre el pastel de las .alert. */
.cm-notice::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--cm-notice-color, var(--cm-neutral, #6b7280));
}

/* --- El icono --------------------------------------------------------- */

.cm-notice__icon {
    width: 30px;
    height: 30px;
    margin-left: 3px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cm-notice-bg, var(--cm-neutral-bg, #f1f3f5));
    color: var(--cm-notice-color, var(--cm-neutral, #6b7280));
}

.cm-notice__icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* --- El texto ---------------------------------------------------------- */

.cm-notice__text {
    min-width: 0;
    padding-top: 4px;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--cm-ink, #272b41);
    overflow-wrap: anywhere;     /* un correo largo no ensancha la tarjeta */
}

/* --- El aspa ----------------------------------------------------------- */

.cm-notice__close {
    position: relative;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cm-gray-light, #9aa4ae);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color .15s ease, color .15s ease;
}

.cm-notice__close:hover,
.cm-notice__close:focus-visible {
    background: var(--cm-neutral-bg, #f1f3f5);
    color: var(--cm-ink, #272b41);
}

.cm-notice__close:focus-visible {
    outline: 2px solid var(--cm-cyan, #20c0f3);
    outline-offset: 2px;
}

/* El aspa dibujada aquí: dos rayas cruzadas. Así no depende de que Bootstrap
   traiga .btn-close ni de que FontAwesome haya cargado. */
.cm-notice__close::before,
.cm-notice__close::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
}

.cm-notice__close::before { transform: rotate(45deg); }
.cm-notice__close::after  { transform: rotate(-45deg); }

/* --- La barrita del tiempo que queda ----------------------------------- */

.cm-notice__time {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    transform-origin: left center;
    background: var(--cm-notice-color, var(--cm-neutral, #6b7280));
    opacity: .45;
    animation: cm-aviso-drenar linear forwards;
}

@keyframes cm-aviso-drenar {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Al pasar por encima se detiene la cuenta: si alguien está leyendo, el aviso
   no se le va de debajo. El temporizador de verdad se pausa desde el guion. */
.cm-notice:hover .cm-notice__time,
.cm-notice:focus-within .cm-notice__time {
    animation-play-state: paused;
}

/* --- Los cuatro estados ------------------------------------------------ */

.cm-notice--success { --cm-notice-color: var(--cm-green,  #1a9a5f); --cm-notice-bg: var(--cm-green-bg,  #e6f7ef); }
.cm-notice--warning { --cm-notice-color: var(--cm-amber,  #b7791f); --cm-notice-bg: var(--cm-amber-bg,  #fdf3e2); }
.cm-notice--danger  { --cm-notice-color: var(--cm-red,   #d64545); --cm-notice-bg: var(--cm-red-bg,   #fdecec); }
.cm-notice--info    { --cm-notice-color: var(--cm-cyan-dark, #0f9fce); --cm-notice-bg: var(--cm-cyan-soft, #eaf7fd); }

/* --- Entrada y salida --------------------------------------------------- */

.cm-notice {
    animation: cm-aviso-entra .28s cubic-bezier(.21, 1.02, .73, 1) both;
}

@keyframes cm-aviso-entra {
    from { opacity: 0; transform: translateX(16px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* Al salir se encoge la altura para que la pila cierre el hueco sin saltos. */
.cm-notice--out {
    animation: none;
    opacity: 0;
    transform: translateX(16px);
    max-height: 0;
    margin-top: -10px;           /* se come el gap de la pila */
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    transition: opacity .2s ease, transform .2s ease,
                max-height .24s ease .04s, margin-top .24s ease .04s,
                padding .24s ease .04s;
}

/* --- En el teléfono ----------------------------------------------------- */

@media (max-width: 575.98px) {
    .cm-notices {
        top: 12px;
        right: 12px;
        left: 12px;
        width: auto;
    }

    @keyframes cm-aviso-entra {
        from { opacity: 0; transform: translateY(-12px) scale(.98); }
        to   { opacity: 1; transform: none; }
    }

    .cm-notice--out { transform: translateY(-12px); }
}

/* --- Si se pidió menos movimiento --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .cm-notice        { animation: none; }
    .cm-notice__time { animation: none; opacity: .18; }
    .cm-notice--out  { transform: none; transition: opacity .1s linear; }
}

/* --- Al imprimir no pinta nada ------------------------------------------ */

@media print {
    .cm-notices { display: none !important; }
}