/*
 * [2026-10-17] Avisos del sistema ("Guardado", "No se pudo...") con el
 * MISMO aspecto de Fluxus Mail (components/com_fluques/tmpl/webmail,
 * ".flq-wm-msg"): pastilla suave, sin borde duro, esquinas de 8px, fondo
 * tenue del color del aviso y texto en ese mismo color (verde = listo,
 * rojo = fallo, ambar = cuidado, azul = informacion).
 *
 * UN solo archivo para todo Joomla (lo agrega plg_system_flqdebrand en el
 * sitio, Mi Panel con tmpl=component, Mi cuenta y el administrador; la
 * compra de paquetes - pagina propia - lo enlaza a mano):
 *  1) la barra nativa de Joomla: <joomla-alert> / .alert dentro de
 *     #system-message-container;
 *  2) las colas propias de cada pantalla (".flq-*-msg-<tipo>", Mi cuenta
 *     ".flq-mo-alert", y la clase general ".flq-msg flq-msg--<tipo>").
 * Opciones (Componentes > Fluques > Opciones): messages_fluxus_style,
 * messages_site_position (flotante / en la pagina), messages_autohide_seconds.
 * Claro / oscuro: data-bs-theme / data-color-scheme / data-theme del <html>
 * (o el del sistema si la pagina lo pide con data-flq-msg-scheme="auto").
 */

:root {
    --flqm-ok-bg: #e8f5ee;   --flqm-ok-fg: #1b7a3d;
    --flqm-bad-bg: #fbeaea;  --flqm-bad-fg: #b02a2a;
    --flqm-warn-bg: #f9f1e3; --flqm-warn-fg: #8a5a12;
    --flqm-info-bg: #e9f1f8; --flqm-info-fg: #25598a;
    --flqm-shadow: 0 10px 30px rgba(15, 18, 25, .14);
}

html[data-bs-theme="dark"],
html[data-color-scheme="dark"],
html[data-theme="dark"] {
    --flqm-ok-bg: #15291f;   --flqm-ok-fg: #7fd69a;
    --flqm-bad-bg: #351a1b;  --flqm-bad-fg: #ff8a80;
    --flqm-warn-bg: #2f2614; --flqm-warn-fg: #f2c94c;
    --flqm-info-bg: #14243a; --flqm-info-fg: #8dbbe3;
    --flqm-shadow: 0 12px 34px rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: dark) {
    html[data-flq-msg-scheme="auto"]:not([data-theme="light"]) {
        --flqm-ok-bg: #15291f;   --flqm-ok-fg: #7fd69a;
        --flqm-bad-bg: #351a1b;  --flqm-bad-fg: #ff8a80;
        --flqm-warn-bg: #2f2614; --flqm-warn-fg: #f2c94c;
        --flqm-info-bg: #14243a; --flqm-info-fg: #8dbbe3;
        --flqm-shadow: 0 12px 34px rgba(0, 0, 0, .45);
    }
}

/* ---------- 1) Barra nativa de Joomla ---------- */

#system-message-container joomla-alert,
#system-message-container .alert {
    --flqm-bg: var(--flqm-info-bg);
    --flqm-fg: var(--flqm-info-fg);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin: 0 0 10px;
    padding: 10px 10px 10px 14px;
    border: 0;
    border-radius: 8px;
    background: var(--flqm-bg);
    color: var(--flqm-fg);
    box-shadow: none;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    animation-duration: .22s;
    animation-fill-mode: both;
    animation-timing-function: ease;
}

#system-message-container joomla-alert[type="success"],
#system-message-container .alert-success { --flqm-bg: var(--flqm-ok-bg); --flqm-fg: var(--flqm-ok-fg); }
#system-message-container joomla-alert[type="danger"],
#system-message-container .alert-danger,
#system-message-container .alert-error { --flqm-bg: var(--flqm-bad-bg); --flqm-fg: var(--flqm-bad-fg); }
#system-message-container joomla-alert[type="warning"],
#system-message-container .alert-warning { --flqm-bg: var(--flqm-warn-bg); --flqm-fg: var(--flqm-warn-fg); }
#system-message-container joomla-alert[type="info"],
#system-message-container .alert-info { --flqm-bg: var(--flqm-info-bg); --flqm-fg: var(--flqm-info-fg); }

#system-message-container joomla-alert .alert-heading,
#system-message-container .alert .alert-heading {
    order: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin: 1px 0 0;
    padding: 0;
    font-size: inherit;
    color: inherit;
    background: none;
}

/* Icono pequeño (el color no es la unica pista): ✓ / ! / i */
#system-message-container joomla-alert .alert-heading > span:not(.visually-hidden),
#system-message-container .alert .alert-heading > span:not(.visually-hidden) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--flqm-fg);
    color: var(--flqm-bg);
    font: 800 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
}

#system-message-container joomla-alert .alert-heading > span:not(.visually-hidden)::before,
#system-message-container .alert .alert-heading > span:not(.visually-hidden)::before {
    content: "i";
    display: inline;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    -webkit-mask: none;
    mask: none;
    filter: none;
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
    color: inherit;
}

#system-message-container joomla-alert[type="success"] .alert-heading > span:not(.visually-hidden)::before,
#system-message-container .alert-success .alert-heading > span:not(.visually-hidden)::before { content: "\2713"; }
#system-message-container joomla-alert[type="danger"] .alert-heading > span:not(.visually-hidden)::before,
#system-message-container joomla-alert[type="warning"] .alert-heading > span:not(.visually-hidden)::before,
#system-message-container .alert-danger .alert-heading > span:not(.visually-hidden)::before,
#system-message-container .alert-warning .alert-heading > span:not(.visually-hidden)::before { content: "!"; }

#system-message-container .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#system-message-container joomla-alert .alert-wrapper,
#system-message-container .alert .alert-wrapper {
    font-size: inherit;
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* (html body + div: gana a las reglas de Atum "joomla-alert div .alert-message") */
html body #system-message-container joomla-alert .alert-wrapper > div.alert-message,
html body #system-message-container .alert .alert-wrapper > div.alert-message,
#system-message-container .alert .alert-message {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: inherit;
    color: inherit;
    overflow-wrap: anywhere;
}

html body #system-message-container joomla-alert .alert-wrapper > div.alert-message + div.alert-message,
html body #system-message-container .alert .alert-wrapper > div.alert-message + div.alert-message { margin-top: 4px; }

#system-message-container joomla-alert a,
#system-message-container .alert a { color: inherit; text-decoration: underline; font-weight: 700; }

#system-message-container joomla-alert .joomla-alert--close,
#system-message-container .alert .joomla-alert--close,
#system-message-container .alert .btn-close {
    order: 3;
    position: static;
    inset: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -4px -2px -4px 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: inherit;
    opacity: .75;
    font: 400 20px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    cursor: pointer;
    filter: none;
}

#system-message-container joomla-alert .joomla-alert--close:hover,
#system-message-container .alert .joomla-alert--close:hover,
#system-message-container .alert .btn-close:hover {
    opacity: 1;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

#system-message-container joomla-alert .joomla-alert--close:focus-visible,
#system-message-container .alert .joomla-alert--close:focus-visible,
#system-message-container .alert .btn-close:focus-visible {
    opacity: 1;
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

@keyframes joomla-alert-fade-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@keyframes joomla-alert-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Flotante (sitio, opcion messages_site_position = float): arriba al
   centro, SIEMPRE debajo del menu fijo/pegajoso que haya (flq-messages.js
   calcula --flqm-top) y lejos de los botones flotantes de abajo. */
html.flq-msg-float #system-message-container {
    position: fixed;
    top: var(--flqm-top, 16px);
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    z-index: 10050;
    box-sizing: border-box;
    width: min(560px, calc(100% - 32px));
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

html.flq-msg-float #system-message-container:empty { display: none; }

html.flq-msg-float #system-message-container > * {
    pointer-events: auto;
    margin: 0;
    box-shadow: var(--flqm-shadow);
    border: 1px solid color-mix(in srgb, var(--flqm-fg) 22%, transparent);
}

/* En la pagina (administrador, o messages_site_position = inline). */
html.flq-msg-inline #system-message-container:not(:empty) {
    margin-bottom: 4px;
}

@media (prefers-reduced-motion: reduce) {
    #system-message-container joomla-alert,
    #system-message-container .alert { animation-duration: .01ms; }
}

/* ---------- 2) Colas propias de cada pantalla ---------- */

html body :is(.flq-msg, .flq-wm-msg, .flq-blog-msg, .flq-bkg-msg, .flq-cbc-msg, .flq-wa-msg, .flq-dm-msg, .flq-ead-msg, .flq-mem-msg, .flq-nfcs-msg, .flq-ord-msg, .flq-pay-msg, .flq-prod-msg, .flq-svc-msg, .flq-soc-msg, .flq-mo-alert) {
    --flqm-bg: var(--flqm-info-bg);
    --flqm-fg: var(--flqm-info-fg);
    box-sizing: border-box;
    max-width: 100%;
    padding: 10px 14px;
    border: 0;
    border-radius: 8px;
    background: var(--flqm-bg);
    color: var(--flqm-fg);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

html body :is(.flq-msg, .flq-wm-msg, .flq-blog-msg, .flq-bkg-msg, .flq-cbc-msg, .flq-wa-msg, .flq-dm-msg, .flq-ead-msg, .flq-mem-msg, .flq-nfcs-msg, .flq-ord-msg, .flq-pay-msg, .flq-prod-msg, .flq-svc-msg, .flq-soc-msg):is([class*="-msg-message"], [class*="-msg-success"], [class*="msg--message"], [class*="msg--success"]),
html body .flq-mo-alert:not(.is-error):not(.is-warning) {
    --flqm-bg: var(--flqm-ok-bg);
    --flqm-fg: var(--flqm-ok-fg);
    background: var(--flqm-bg);
    color: var(--flqm-fg);
}

html body :is(.flq-msg, .flq-wm-msg, .flq-blog-msg, .flq-bkg-msg, .flq-cbc-msg, .flq-wa-msg, .flq-dm-msg, .flq-ead-msg, .flq-mem-msg, .flq-nfcs-msg, .flq-ord-msg, .flq-pay-msg, .flq-prod-msg, .flq-svc-msg, .flq-soc-msg):is([class*="-msg-error"], [class*="-msg-danger"], [class*="msg--error"], [class*="msg--danger"]),
html body .flq-mo-alert.is-error {
    --flqm-bg: var(--flqm-bad-bg);
    --flqm-fg: var(--flqm-bad-fg);
    background: var(--flqm-bg);
    color: var(--flqm-fg);
}

html body :is(.flq-msg, .flq-wm-msg, .flq-blog-msg, .flq-bkg-msg, .flq-cbc-msg, .flq-wa-msg, .flq-dm-msg, .flq-ead-msg, .flq-mem-msg, .flq-nfcs-msg, .flq-ord-msg, .flq-pay-msg, .flq-prod-msg, .flq-svc-msg, .flq-soc-msg):is([class*="-msg-warning"], [class*="msg--warning"]),
html body .flq-mo-alert.is-warning {
    --flqm-bg: var(--flqm-warn-bg);
    --flqm-fg: var(--flqm-warn-fg);
    background: var(--flqm-bg);
    color: var(--flqm-fg);
}