/* ============================================================
   Store admin · Flash messages (overrides)
   ------------------------------------------------------------
   El componente base `.sa-flash` vive en `components.css` (cargado
   en todo el proyecto). Acá sólo overrides específicos del admin:
   - tipografía/tamaño un poquito más compacto en flash inline
   - variant `is-info` con el primary tokenizado del admin
   - colores del modo oscuro
   ============================================================ */

body.sa-app .sa-flash:not(.sa-flash--toast) {
    padding: 9px 12px;
    border-radius: var(--sa-radius-sm);
    font-size: 12.5px;
}

body.sa-app .sa-flash.is-info {
    border-color: rgba(var(--sa-primary-rgb), 0.20);
    background: rgba(var(--sa-primary-rgb), 0.05);
    color: var(--sa-primary);
}

body.sa-app .sa-tutorial-notice {
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

body.sa-app .sa-tutorial-notice > i {
    flex-shrink: 0;
    font-size: 15px;
}

body.sa-app .sa-tutorial-notice__links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: 4px;
}

body.sa-app .sa-tutorial-notice__links a {
    color: currentColor;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.sa-app .sa-tutorial-notice__dismiss {
    flex-shrink: 0;
    margin-left: auto;
    color: currentColor;
    opacity: 0.72;
}

body.sa-app .sa-tutorial-notice__dismiss:hover,
body.sa-app .sa-tutorial-notice__dismiss:focus-visible {
    opacity: 1;
}

body.page-store-admin-app.store-admin-theme-dark .sa-flash.is-success {
    color: #bbf7d0;
}

body.page-store-admin-app.store-admin-theme-dark .sa-flash--toast.is-success {
    background: #052e1a;
    color: #bbf7d0;
}

body.page-store-admin-app.store-admin-theme-dark .sa-flash--toast.is-error {
    background: #3b0a0a;
    color: #fecaca;
}

@media (max-width: 767px) {
    body.is-deuna-panel-app .sa-flash-stack {
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        width: auto;
    }
}