/* ═══════════════════════════════════════════════════════════
   Dilitium POS — Design tokens (claro / oscuro)
   Paleta: azul #3d63f1 · navy #1f2c86 · violeta #7c3aed
   ═══════════════════════════════════════════════════════════ */

:root {
    --primary-gradient: linear-gradient(135deg, #3d63f1 0%, #1f2c86 100%);
    --primary-gradient-violet: linear-gradient(135deg, #7c3aed 0%, #5b21b6 45%, #3d63f1 100%);
    --primary-color: #3d63f1;
    --secondary-color: #1f2c86;
    --primary-3: #18246e;
    --accent-purple: #9c26bc;
    --accent-violet: #7c3aed;
    --accent-2: #9db0f8;

    --bg-light: #f1f4fb;
    --bg-card-light: #ffffff;
    --bg-card-2-light: #e8edfa;
    --bg-dark: #0b1020;
    --bg-card-dark: #141b33;
    --bg-card-2-dark: #101628;

    --text-light: #1e1b4b;
    --text-dark: #e8ecf8;
    --text-muted-light: #6b7399;
    --text-muted-dark: #8b93b0;

    --border-light: #c8d0ec;
    --border-dark: #2a3358;
    --border-strong-l: #a8b4dc;
    --border-strong-d: #3d4a70;
    --neutral-stroke-divider: var(--border-light);

    --accent-green: #16a34a;
    --accent-blue: #3d63f1;
    --accent-red: #dc2626;
    --accent-orange: #fb923c;
    --accent-amber: #f59e0b;

    --shell-sidebar-width: 248px;
    --shell-topbar-height: 52px;
    --header-height: var(--shell-topbar-height);
    --app-body-padding-y: 0.5rem;
    --app-body-padding-x: 0.85rem;

    --card-radius: 16px;
    --card-radius-lg: 18px;
    --card-shadow: 0 10px 28px -18px rgba(31, 44, 134, 0.35);
    --card-shadow-dark: 0 12px 32px -16px rgba(0, 0, 0, 0.55);

    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary-color) 22%, transparent);

    /* Superficies semánticas (claro por defecto; .dark-theme las redefine) */
    --surface-1: var(--bg-card-light);
    --surface-2: var(--bg-card-2-light);
    --surface-text: var(--text-light);
    --surface-muted: var(--text-muted-light);
    --surface-border: var(--border-light);
    --surface-shadow: var(--card-shadow);
}

.dark-theme {
    --neutral-stroke-divider: var(--border-dark);
    /* Superficies semánticas (heredan a componentes scoped) */
    --surface-1: var(--bg-card-dark);
    --surface-2: var(--bg-card-2-dark);
    --surface-text: var(--text-dark);
    --surface-muted: var(--text-muted-dark);
    --surface-border: var(--border-dark);
    --surface-shadow: var(--card-shadow-dark);
}

/* Contenedor estándar de páginas internas */
.dashboard-page,
.page-shell {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Auth / login shell */
.auth-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-light);
    color: var(--text-light);
    transition: background 0.3s ease, color 0.3s ease;
}

.auth-container.dark-theme {
    background: var(--bg-dark);
    color: var(--text-dark);
}

/* Fluent checkbox / radio legibles en ambos temas */
.dark-theme fluent-checkbox,
.dark-theme .fluent-checkbox,
.dark-theme fluent-radio,
.dark-theme .fluent-radio {
    --neutral-foreground-rest: var(--text-dark);
    color: var(--text-dark);
}

.dark-theme fluent-message-bar,
.dark-theme .fluent-message-bar {
    color: var(--text-dark);
}

.dark-theme .validation-summary-errors,
.dark-theme .text-danger {
    color: #fca5a5;
}

/* Fluent UI — diálogos y superficies */
.dark-theme fluent-dialog,
.dark-theme .fluent-dialog {
    --neutral-layer-1: var(--bg-card-dark);
    --neutral-layer-2: var(--bg-card-2-dark);
    --neutral-foreground-rest: var(--text-dark);
    --neutral-foreground-hint: var(--text-muted-dark);
    --neutral-stroke-divider-rest: var(--border-dark);
    --neutral-fill-input-rest: #0f1424;
    --neutral-fill-input-hover: #1a2240;
    --neutral-fill-input-focus: #1a2240;
    --neutral-stroke-rest: color-mix(in srgb, var(--primary-color) 35%, var(--border-dark));
    --fill-color: var(--bg-card-dark);
    --accent-fill-rest: var(--primary-color);
    color: var(--text-dark);
}

fluent-dialog-body,
.fluent-dialog-body {
    color: var(--text-light);
}

.dark-theme fluent-dialog-body,
.dark-theme .fluent-dialog-body {
    color: var(--text-dark);
}

/* Fluent Search / TextField — alineados al tema */
fluent-search,
fluent-text-field,
fluent-number-field,
fluent-select,
fluent-combobox {
    --neutral-fill-input-rest: var(--bg-card-light);
    --neutral-fill-input-hover: var(--bg-card-light);
    --neutral-fill-input-focus: var(--bg-card-light);
    --neutral-foreground-rest: var(--text-light);
    --neutral-foreground-hint: var(--text-muted-light);
    --neutral-stroke-rest: color-mix(in srgb, var(--primary-color) 22%, var(--border-light));
    --neutral-stroke-hover: color-mix(in srgb, var(--primary-color) 40%, var(--border-light));
    --focus-stroke-outer: var(--primary-color);
    --accent-fill-rest: var(--primary-color);
    width: 100%;
    border-radius: 12px;
}

.dark-theme fluent-search,
.dark-theme fluent-text-field,
.dark-theme fluent-number-field,
.dark-theme fluent-select,
.dark-theme fluent-combobox {
    --neutral-fill-input-rest: var(--bg-card-dark);
    --neutral-fill-input-hover: var(--bg-card-2-dark);
    --neutral-fill-input-focus: var(--bg-card-2-dark);
    --neutral-foreground-rest: var(--text-dark);
    --neutral-foreground-hint: var(--text-muted-dark);
    --neutral-stroke-rest: color-mix(in srgb, var(--primary-color) 28%, var(--border-dark));
    --neutral-stroke-hover: color-mix(in srgb, var(--primary-color) 45%, var(--border-dark));
    --focus-stroke-outer: var(--accent-violet);
    color: var(--text-dark);
}

fluent-search::part(control),
fluent-text-field::part(control),
fluent-number-field::part(control) {
    border-radius: 12px;
    font-family: 'Exo2', 'Segoe UI', system-ui, sans-serif;
    font-weight: 500;
}