:root {
    /*Primary Colors*/
    --primary: #2b307d;
    --secondary: hsl(5, 100%, 50%);
    --black: #000000;
    --white: #FFFFFF;
    --blue-agendar: #3273dc;
    --blue-hover: #2c528b;
    --background: linear-gradient(41deg, #00488D 15.13%, #2B317F 77.65%);
    --accent: #E0282D;
    --success: #17b069;
    --info-dark: #0097B2;
    --danger: #c0392b;
    --input-color: #f2f4fe;
    --blue-lightness: #e2f0fe;
    --primary-medium: #4E58E5;

    /*Secondary Colors*/
    --neutral-blue: #F4F9FD;
    --neutral-lightest: #EEEEEE;
    --neutral-lighter: #CCCCCC;
    --neutral-light: #AAAAAA;
    --neutral: #666666;
    --neutral-dark: #444444;
    --neutral-darker: #222222;
    --neutral-darkest: #111111;
    --blue-1: #E3ECFA;
    --baby-blue: #D2E3FF;
    --yellow: #F0F08B;

    --ink: #0e1217;
    /* workshop dark */
    --panel: #151b23;
    /* card base */
    --metal: #1f2733;
    /* metallic mid */
    --accent: #00d1b2;
    /* bulma primary-ish (turquoise) */
    --accent-2: #ffdd57;
    /* warning yellow */
    --accent-3: #7957d5;
    /* purple */
    --muted: #9aa7b2;
    /* text muted */

    /*Progress Bar*/
    --progress: 0%;
    --bar-h: 360px;
    --fill: 0%;

    /* Sizes */
    --dot-size: clamp(24px, 4.2vw, 56px);

    /* ── Color fijo del sidebar (NO se redefine en dark mode a propósito) ── */
    --sidebar-bg: #2b307d;

    /* ── Tokens de superficie (usados por los overrides de dark mode) ── */
    --surface-body:    #EDEFF2;
    --surface-card:    #FFFFFF;
    --surface-box:     #FFFFFF;
    --surface-input:   #f2f4fe;
    --surface-header:  rgba(255, 255, 255, 0.85);
    --surface-drawer:  #FFFFFF;
    --surface-dropdown:#FFFFFF;

    --text-base:       #111111;
    --text-muted-ui:   #666666;
    --text-title:      #222222;
    --border-ui:       #CCCCCC;
    --border-soft:     #EEEEEE;
}

/* ================================================================
   DARK MODE
   Se activa agregando la clase .dark-mode al <body>
   mediante theme.js
   ================================================================ */

body.dark-mode {

    /* ── Variables de superficie ── */
    --surface-body:    #0d1117;
    --surface-card:    #161b22;
    --surface-box:     #161b22;
    --surface-input:   #1c2333;
    --surface-header:  rgba(13, 17, 23, 0.92);
    --surface-drawer:  #161b22;
    --surface-dropdown:#1c2333;

    --text-base:       #e6edf3;
    --text-muted-ui:   #8b949e;
    --text-title:      #f0f6fc;
    --border-ui:       #30363d;
    --border-soft:     #21262d;

    /* ── Variables del proyecto ── */
    --neutral-blue:     #0d1117;
    --neutral-lightest: #161b22;
    --neutral-lighter:  #21262d;
    --neutral-light:    #30363d;
    --neutral:          #8b949e;
    --neutral-dark:     #b1bac4;
    --neutral-darker:   #cdd9e5;
    --neutral-darkest:  #e6edf3;
    --input-color:      #1c2333;
    --blue-lightness:   #1c2a3a;
    --blue-1:           #1a2535;
    --baby-blue:        #1e2d4a;
    --primary:          #6470f0;
    --primary-medium:   #7a84f2;
    --blue-agendar:     #58a6ff;
    --blue-hover:       #388bfd;
    --success:          #3fb950;
    --danger:           #f85149;

    /* ── Color de página ── */
    background-color: var(--surface-body);
    color: var(--text-base);
}

/* ── Body con clase utilitaria bg-neutral-blue ── */
body.dark-mode.bg-neutral-blue {
    background-color: var(--surface-body);
}

/* ── Fondo del body en modo CLARO (gris suave, evita el blanco puro) ──
   Se sobrepone a .bg-neutral-blue (global.css) sin tocar la variable
   --neutral-blue, que también se usa en la barra de progreso, el
   stepper y SweetAlert2. */
body:not(.dark-mode) {
    background-color: var(--surface-body);
}

/* ────────────────────────────────────────────────
   HEADER FIJO
   ──────────────────────────────────────────────── */
body.dark-mode .fixed-header {
    background-color: var(--surface-header) !important;
    border-bottom: 1px solid var(--border-soft);
}
body.dark-mode .fixed-header .button.is-link.is-light {
    background-color: var(--surface-input);
    color: var(--text-base);
    border-color: var(--border-ui);
}
body.dark-mode .fixed-header .button.is-link.is-light:hover {
    background-color: var(--surface-drawer);
}

/* ── Botón de toggle tema ── */
body.dark-mode #themeToggleBtn {
    background-color: var(--surface-input);
    color: var(--text-base);
    border-color: var(--border-ui);
}

/* ── Avatar / user button ── */
body.dark-mode .user-button {
    background-color: var(--surface-input);
    border-color: var(--border-ui);
    color: var(--text-base);
}

/* ────────────────────────────────────────────────
   DRAWER LATERAL
   ──────────────────────────────────────────────── */
body.dark-mode .drawer {
    background-color: var(--surface-drawer);
    border-right: 1px solid var(--border-soft);
}
body.dark-mode .drawer .menu-item {
    color: var(--text-base);
}
body.dark-mode .drawer .menu-item:hover {
    background-color: var(--surface-input);
    color: var(--primary);
}

/* ────────────────────────────────────────────────
   BULMA: BOX
   ──────────────────────────────────────────────── */
body.dark-mode .box {
    background-color: var(--surface-box);
    color: var(--text-base);
    border: 1px solid var(--border-soft);
    box-shadow: none;
}

/* ────────────────────────────────────────────────
   BULMA: CARD
   ──────────────────────────────────────────────── */
body.dark-mode .card,
body.dark-mode .card-content {
    background-color: var(--surface-card);
    color: var(--text-base);
}
body.dark-mode .card {
    border: 1px solid var(--border-soft);
    box-shadow: none;
}
body.dark-mode .card-header {
    background-color: var(--surface-input);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: none;
}
body.dark-mode .card-header-title {
    color: var(--text-base);
}
body.dark-mode .card-footer,
body.dark-mode .card-footer-item {
    border-color: var(--border-soft);
    color: var(--text-base);
}

/* ────────────────────────────────────────────────
   BULMA: TITLE / SUBTITLE / TEXT
   ──────────────────────────────────────────────── */
body.dark-mode .title {
    color: var(--text-title) !important;
}
body.dark-mode .subtitle {
    color: var(--text-muted-ui) !important;
}
body.dark-mode .has-text-grey,
body.dark-mode .has-text-grey-light {
    color: var(--text-muted-ui) !important;
}
body.dark-mode .has-text-dark {
    color: var(--text-base) !important;
}
body.dark-mode p,
body.dark-mode span,
body.dark-mode label {
    color: inherit;
}

/* ────────────────────────────────────────────────
   BULMA: DROPDOWN
   ──────────────────────────────────────────────── */
body.dark-mode .dropdown-content {
    background-color: var(--surface-dropdown);
    border: 1px solid var(--border-ui);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
body.dark-mode .dropdown-item {
    color: var(--text-base);
}
body.dark-mode .dropdown-item:hover {
    background-color: var(--surface-input);
    color: var(--text-base);
}
body.dark-mode .dropdown-divider {
    background-color: var(--border-soft);
}

/* ────────────────────────────────────────────────
   BULMA: INPUTS / SELECTS / TEXTAREAS
   ──────────────────────────────────────────────── */
body.dark-mode .input,
body.dark-mode .textarea,
body.dark-mode .select select {
    background-color: var(--surface-input);
    border-color: var(--border-ui);
    color: var(--text-base);
}
body.dark-mode .input::placeholder,
body.dark-mode .textarea::placeholder {
    color: var(--text-muted-ui);
}
body.dark-mode .input:focus,
body.dark-mode .textarea:focus,
body.dark-mode .select select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.125em rgba(100, 112, 240, 0.25);
}
body.dark-mode .label {
    color: var(--text-base);
}
body.dark-mode .field-label .label {
    color: var(--text-muted-ui);
}

/* ────────────────────────────────────────────────
   BULMA: BUTTONS
   ──────────────────────────────────────────────── */
body.dark-mode .button.is-light {
    background-color: var(--surface-input);
    border-color: var(--border-ui);
    color: var(--text-base);
}
body.dark-mode .button.is-light:hover {
    background-color: var(--surface-drawer);
}
body.dark-mode .button.is-white {
    background-color: var(--surface-input);
    color: var(--text-base);
    border-color: var(--border-ui);
}

/* ────────────────────────────────────────────────
   BULMA: TABLE
   ──────────────────────────────────────────────── */
body.dark-mode .table {
    background-color: var(--surface-card);
    color: var(--text-base);
}
body.dark-mode .table th {
    color: var(--text-title);
    border-color: var(--border-soft);
}
body.dark-mode .table td {
    border-color: var(--border-soft);
    color: var(--text-base);
}
body.dark-mode .table.is-striped tbody tr:not(.is-selected):nth-child(even) {
    background-color: var(--surface-input);
}
body.dark-mode .table.is-hoverable tbody tr:not(.is-selected):hover {
    background-color: var(--surface-input);
}
body.dark-mode .table-container {
    background-color: var(--surface-card);
}

/* ────────────────────────────────────────────────
   BULMA: TABS / MENU / PANEL
   ──────────────────────────────────────────────── */
body.dark-mode .tabs {
    border-bottom-color: var(--border-ui);
}
body.dark-mode .tabs a {
    color: var(--text-muted-ui);
    border-bottom-color: var(--border-ui);
}
body.dark-mode .tabs a:hover {
    color: var(--text-base);
    border-bottom-color: var(--primary);
}
body.dark-mode .tabs li.is-active a {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
body.dark-mode .menu-label {
    color: var(--text-muted-ui);
}
body.dark-mode .menu-list a {
    color: var(--text-base);
}
body.dark-mode .menu-list a:hover,
body.dark-mode .menu-list a.is-active {
    background-color: var(--surface-input);
    color: var(--primary);
}

/* ────────────────────────────────────────────────
   BULMA: DIVIDER / HR
   ──────────────────────────────────────────────── */
body.dark-mode hr,
body.dark-mode .custom-hr {
    background-color: var(--border-soft);
}

/* ────────────────────────────────────────────────
   ETIQUETAS PERSONALIZADAS (home.php)
   ──────────────────────────────────────────────── */
body.dark-mode .etiqueta {
    background-color: var(--surface-card);
    border: 1px solid var(--border-soft);
}
body.dark-mode .soft-divider {
    border-color: var(--border-soft);
}
body.dark-mode .value,
body.dark-mode .label {
    color: var(--text-base);
}

/* ────────────────────────────────────────────────
   TARJETAS DE SERVICIO (catálogo home.php)
   ──────────────────────────────────────────────── */
body.dark-mode .card.service {
    background-color: var(--surface-card);
    border: 1px solid var(--border-soft);
}
body.dark-mode .card.service .card-content {
    background-color: var(--surface-card);
}

/* ────────────────────────────────────────────────
   GARAGE / SHOP HERO
   ──────────────────────────────────────────────── */
body.dark-mode .shop-hero {
    background: linear-gradient(135deg, #1a2235 0%, #0f172a 100%);
    border: 1px solid var(--border-soft);
}

/* ────────────────────────────────────────────────
   STEP TRACKER (dots)
   ──────────────────────────────────────────────── */
body.dark-mode .dot {
    background-color: var(--surface-input);
    border-color: var(--border-ui);
    color: var(--text-muted-ui);
}
body.dark-mode .dot.is-active {
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
body.dark-mode .dot.is-complete {
    background-color: var(--success);
    color: #fff;
    border-color: var(--success);
}
body.dark-mode .dlabel {
    color: var(--text-muted-ui);
}

/* ────────────────────────────────────────────────
   FLATPICKR
   ──────────────────────────────────────────────── */
body.dark-mode .flatpickr-calendar {
    background-color: var(--surface-dropdown);
    border-color: var(--border-ui);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    color: var(--text-base);
}
body.dark-mode .flatpickr-day {
    color: var(--text-base);
}
body.dark-mode .flatpickr-day:hover {
    background-color: var(--surface-input);
}
body.dark-mode .flatpickr-day.selected {
    background-color: var(--primary);
    border-color: var(--primary);
}
body.dark-mode .flatpickr-months .flatpickr-month,
body.dark-mode .flatpickr-weekdays,
body.dark-mode span.flatpickr-weekday {
    background-color: var(--surface-input);
    color: var(--text-base);
}

/* ────────────────────────────────────────────────
   DATATABLES
   ──────────────────────────────────────────────── */
body.dark-mode .dataTables_wrapper,
body.dark-mode .dataTables_wrapper .dataTables_filter input,
body.dark-mode .dataTables_wrapper .dataTables_length select {
    color: var(--text-base);
    background-color: var(--surface-input);
    border-color: var(--border-ui);
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-base) !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}

/* ────────────────────────────────────────────────
   SWEETALERT2
   ──────────────────────────────────────────────── */
.swal2-title {
    color: var(--text-title) !important;
}
body.dark-mode .swal2-popup {
    background-color: var(--surface-dropdown);
    color: var(--text-base);
    border: 1px solid var(--border-ui);
}
body.dark-mode .swal2-title {
    color: var(--text-title);
}
body.dark-mode .swal2-content {
    color: var(--text-base);
}
body.dark-mode .swal2-input,
body.dark-mode .swal2-textarea {
    background-color: var(--surface-input);
    border-color: var(--border-ui);
    color: var(--text-base);
}