/* ----------------------------------------
   MODAL GENERICO — variantes por estado
   htmx-app.js fija data-modal-variant en #app-modal: "error" | "warning" | "notification".
   Aquí solo va el color de icono y acento por variante; la estructura visual fe-modal
   (tarjeta, divisor, botón) vive en layout/_layout.css. Archivo propio para que el
   cache-busting por archivo detecte cambios de variante de forma aislada.
   ---------------------------------------- */

/* Notificación: identidad de marca — icono azul, divisor verde (look por defecto). */
#app-modal[data-modal-variant="notification"] .fe-modal__icon {
    background: linear-gradient(135deg, #2C3D85 0%, #3d52a8 100%);
    box-shadow: 0 8px 24px rgba(44, 61, 133, 0.28);
}

#app-modal[data-modal-variant="notification"] .fe-modal__divider {
    background: #9BB643;
}

/* Error: rojo. */
#app-modal[data-modal-variant="error"] .fe-modal__icon {
    background: linear-gradient(135deg, #e53e3e 0%, #fc6b6b 100%);
    box-shadow: 0 8px 24px rgba(229, 62, 62, 0.30);
}

#app-modal[data-modal-variant="error"] .fe-modal__divider {
    background: #e53e3e;
}

/* Advertencia: ámbar. */
#app-modal[data-modal-variant="warning"] .fe-modal__icon {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.30);
}

#app-modal[data-modal-variant="warning"] .fe-modal__divider {
    background: #f59e0b;
}

/* Botonera: "Aceptar" siempre, acción opcional. Se apilan en pantalla estrecha. */

.fe-modal__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

/* Contorneado, para que "Aceptar" siga leyéndose como la salida por defecto. */
.fe-modal__btn--action {
    background: transparent;
    color: #2C3D85;
    border: 2px solid #2C3D85;
    box-shadow: none;
    text-decoration: none;
}

.fe-modal__btn--action:hover {
    background: #2C3D85;
    color: white;
    box-shadow: 0 6px 20px rgba(44, 61, 133, 0.28);
}

.fe-modal__btn--action .fe-modal__btn-icon {
    background-color: rgba(44, 61, 133, 0.14);
    color: #2C3D85;
}

.fe-modal__btn--action:hover .fe-modal__btn-icon {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}