/* Mr. Sabor 507 app themes. The selected theme is stored in localStorage. */

:root,
:root[data-theme="light"] {
    color-scheme: light;
    --app-page-bg: #fdf8f5;
    --app-sidebar-bg: #ffffff;
    --app-panel-bg: #ffffff;
    --app-text: #1a1a1a;
    --app-muted: #9ca3af;
    --app-border: #f3f4f6;
    --app-nav-text: #4b5563;
    --app-nav-hover-bg: #f9fafb;
    --app-nav-active-bg: #fdf0e9;
    --app-brand: #f15b29;
    --app-brand-strong: #d94c1f;
    --app-brand-contrast: #1a1a1a;
    --app-danger-bg: #fef2f2;
    --app-danger-border: #fca5a5;
    --app-danger-text: #7f1d1d;
    --app-warning-text: #925c00;
    --app-success-text: #047857;
    --app-payment-pending-bg: #fef3c7;
    --app-payment-pending-text: #92400e;
    --app-payment-received-bg: #d1fae5;
    --app-payment-received-text: #047857;
    --app-switch-track: #f9fafb;
    --app-switch-active-bg: #ffffff;
    --app-shadow: rgba(17, 24, 39, 0.12);
    --app-alert-bg: #fff8e8;
    --app-alert-border: #edcb7d;
    --app-alert-text: #704b00;
}

    :root[data-theme="soft"] {
        color-scheme: light;
        --app-page-bg: #e6d7cc; /* Fondo general más oscuro y acogedor (tostado/mocha) */
        --app-sidebar-bg: #f5ede6; /* Sidebar con distinción visual clara */
        --app-panel-bg: #f9f4ef; /* Paneles y tarjetas con mejor contraste */
        --app-text: #2c1e18; /* Texto principal mucho más oscuro y legible */
        --app-muted: #735e52; /* Texto secundario con fuerza */
        --app-border: #d4bfb0; /* Bordes más marcados */
        --app-nav-text: #594236;
        --app-nav-hover-bg: #eadcd0;
        --app-nav-active-bg: #dfcbbd;
        --app-brand: #c95128; /* Tono de marca adaptado al ambiente cálido */
        --app-brand-strong: #a43f1e;
        --app-brand-contrast: #ffffff;
        --app-danger-bg: #f5e0db;
        --app-danger-border: #d8a198;
        --app-danger-text: #6e2f28;
        --app-warning-text: #8a5a16;
        --app-success-text: #285b3d;
        --app-payment-pending-bg: #f3e5bf;
        --app-payment-pending-text: #704019;
        --app-payment-received-bg: #dceee3;
        --app-payment-received-text: #285b3d;
        --app-switch-track: #dfcbbe;
        --app-switch-active-bg: #f9f4ef;
        --app-shadow: rgba(60, 36, 22, 0.2); /* Sombra más cálida y profunda */
        --app-alert-bg: #f4e8d6;
        --app-alert-border: #c89d6a;
        --app-alert-text: #704019;
    }

    :root[data-theme="dark"] {
        color-scheme: dark;
        --app-page-bg: #121212;
        --app-sidebar-bg: #191919;
        --app-panel-bg: #1e1e1e;
        --app-text: #f4f4f5;
        --app-muted: #a1a1aa;
        --app-border: #303033;
        --app-nav-text: #d4d4d8;
        --app-nav-hover-bg: #27272a;
        --app-nav-active-bg: #3a241d;
        --app-brand: #ff845c;
        --app-brand-strong: #ffb199;
        --app-brand-contrast: #1a1a1a;
        --app-danger-bg: #351f1f;
        --app-danger-border: #7f3b38;
        --app-danger-text: #ffb4ab;
        --app-warning-text: #ffcc80;
        --app-success-text: #6ee7a8;
        --app-payment-pending-bg: #45351b;
        --app-payment-pending-text: #f7c66b;
        --app-payment-received-bg: #173b2a;
        --app-payment-received-text: #6ee7a8;
        --app-switch-track: #242426;
        --app-switch-active-bg: #38383b;
        --app-shadow: rgba(0, 0, 0, 0.35);
        --app-alert-bg: #3a2d1d;
        --app-alert-border: #7a5a2f;
        --app-alert-text: #ffe0a3;
    }

html,
body {
    background-color: var(--app-page-bg);
    color: var(--app-text);
    transition: background-color 180ms ease, color 180ms ease;
}

.mud-dialog,
.mud-popover,
.mud-menu {
    color-scheme: inherit;
}

.shift-alert-dialog .mud-dialog-title {
    padding: 22px 24px 8px;
}

.shift-alert-dialog .mud-dialog-content {
    padding: 8px 24px 16px;
}

.shift-alert-dialog .mud-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 24px 22px;
}

.shift-alert-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shift-alert-icon {
    display: inline-flex;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-alert-border);
    border-radius: 12px;
    background: var(--app-alert-bg);
    color: var(--app-alert-text);
}

.shift-alert-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 4px;
}

.shift-alert-message {
    border-color: var(--app-alert-border) !important;
    background: var(--app-alert-bg) !important;
    color: var(--app-alert-text) !important;
}

.shift-alert-message .mud-alert-message {
    color: var(--app-alert-text) !important;
}

.shift-alert-secondary {
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

@media (max-width: 540px) {
    .shift-alert-dialog .mud-dialog-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .shift-alert-dialog .mud-dialog-actions .mud-button-root {
        width: 100%;
    }
}