/* Components: Notifications (Toasts) */

/* Contenedor único y región viva (lo crea marcaprivada.js al cargar). Es él el
   que se fija arriba: varios avisos se apilan en vez de pintarse uno encima de
   otro. No captura clics; los avisos sí. */
.mp-toasts {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    width: 90%;
    max-width: 31.25rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    pointer-events: none;
}

.process.notification {
    pointer-events: auto;
    animation: slideInDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.process.notification .process-header {
    background: var(--surface-raised);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    /* Éxito sin color: la señal la llevan el glifo y el texto (WCAG 1.4.1) */
    border-left: 4px solid var(--surface-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9375rem;
}

.process.notification p {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-strong);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* Glifo de éxito / error. Va como máscara pintada con background-color y no
   como SVG de fondo: el trazo del SVG era un hex fijo (tinta) que en modo
   oscuro desaparecía, y el ✓ es la única señal de que la acción salió bien.
   Así el éxito sigue al color del texto y el error al token de peligro. */
.process.notification p::before {
    content: '';
    flex-shrink: 0;
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.process.notification p.icon-check::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

.process.notification p.icon-error::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    background-color: var(--danger);
}

/* Cierre: <button> con nombre accesible (aria-label desde el JS). Zona de
   44×44 (WCAG 2.5.5); el margen negativo se come el relleno del aviso para
   que el botón grande no lo haga más alto. */
.process.notification .lnk-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.75rem -0.75rem -0.75rem 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    cursor: pointer;
    transition: color 0.2s;
}

.process.notification .lnk-close:hover {
    color: var(--text-body);
}

.process.notification .lnk-close::after {
    content: '✕';
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-1.25rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Error: el filete pasa al color de peligro (además del glifo y del texto) */
.process.notification .process-header:has(.icon-error) {
    border-left-color: var(--danger);
}