/* ============================================================
   VARIABLES GLOBALES — PELETERÍA GANA
   Estilo: Azul pizarra oscuro en sidebar/header + beige crema en body
   Paleta base del cliente:
     Acento 1:   #a5907f  (marrón cálido)
     Acento 2:   #e0c9b7  (beige arena)
     Neutral:    #c8c7c2  (gris neutro)
     Dark:       #503a0c  (marrón oscuro)
   Sidebar/Header:
     #2E3F5C  azul pizarra oscuro
     #253450  azul pizarra más profundo
   ============================================================ */

:root {

    /* ══════════════════════════════════════════════════════
       HEADER / NAVBAR SUPERIOR
       ══════════════════════════════════════════════════════ */
    --header-bg:              #2E3F5C;
    --header-bg-hover:        #253450;
    --header-text:            #F0EAE0;
    --header-text-muted:      rgba(240,234,224,0.60);
    --header-border:          rgba(255,255,255,0.07);
    --header-height:          70px;
    --header-shadow:          0 2px 10px rgba(46,63,92,0.25);
    --header-btn-bg-hover:    rgba(255,255,255,0.08);
    --header-btn-border:      rgba(255,255,255,0.15);
    --header-z-index:         999;

    /* ══════════════════════════════════════════════════════
       SIDEBAR
       ══════════════════════════════════════════════════════ */
    --sidebar-bg-start:       #2E3F5C;
    --sidebar-bg-end:         #253450;
    --sidebar-text:           rgba(240,234,224,0.80);
    --sidebar-text-active:    #F0EAE0;
    --sidebar-accent:         #c8b09a;
    --sidebar-active-bg:      rgba(200,176,154,0.18);
    --sidebar-hover-bg:       rgba(255,255,255,0.07);
    --sidebar-header-bg:      rgba(0,0,0,0.15);
    --sidebar-border:         rgba(255,255,255,0.07);
    --sidebar-width:          280px;
    --sidebar-width-collapsed: 70px;
    --sidebar-shadow:         2px 0 12px rgba(46,63,92,0.20);
    --sidebar-z-index:        1000;
    --sidebar-submenu-pl:     2.5rem;
    --sidebar-font-size-sub:  0.9rem;

    /* ══════════════════════════════════════════════════════
       BODY / FONDO PRINCIPAL
       ══════════════════════════════════════════════════════ */
    --body-bg:                #F7F3EE;
    --body-text:              #2e2013;
    --body-text-muted:        #7a6a5a;
    --body-text-inverse:      #FFFFFF;
    --main-content-pt:        70px;  /* igual que --header-height */

    /* ══════════════════════════════════════════════════════
       CARDS
       ══════════════════════════════════════════════════════ */
    --card-bg:                #FFFFFF;
    --card-border:            rgba(165,144,127,0.15);
    --card-border-radius:     12px;
    --card-shadow:            0 2px 8px rgba(46,63,92,0.08);
    --card-shadow-hover:      0 8px 25px rgba(46,63,92,0.14);
    --card-header-bg:         #f5ede4;
    --card-header-text:       #2E3F5C;
    --card-header-border:     rgba(165,144,127,0.15);
    --card-footer-bg:         #faf7f4;
    --card-footer-text:       #7a6a5a;
    --card-footer-border:     rgba(165,144,127,0.12);

    /* ══════════════════════════════════════════════════════
       TABLAS
       ══════════════════════════════════════════════════════ */
    --table-bg:               #FFFFFF;
    --table-text:             #2e2013;
    --table-border:           #e8e0d8;
    --table-thead-bg:         #2E3F5C;
    --table-thead-text:       #F0EAE0;
    --table-row-hover-bg:     rgba(46,63,92,0.05);
    --table-row-stripe-bg:    rgba(224,201,183,0.10);
    --table-border-radius:    8px;

    /* ══════════════════════════════════════════════════════
       FORMULARIOS
       ══════════════════════════════════════════════════════ */
    --input-bg:               #FFFFFF;
    --input-text:             #2e2013;
    --input-placeholder:      #b0a090;
    --input-border:           #d4c8bc;
    --input-border-focus:     #2E3F5C;
    --input-shadow-focus:     rgba(46,63,92,0.18);
    --input-bg-disabled:      #f5ede4;
    --input-text-disabled:    #7a6a5a;
    --input-border-radius:    8px;
    --input-group-bg:         #e0c9b7;
    --input-group-text:       #2E3F5C;
    --label-text:             #2e2013;

    /* ══════════════════════════════════════════════════════
       BOTONES PRIMARIOS
       ══════════════════════════════════════════════════════ */
    --btn-primary-bg:         #2E3F5C;
    --btn-primary-bg-hover:   #1e2d45;
    --btn-primary-text:       #FFFFFF;
    --btn-primary-border:     #2E3F5C;
    --btn-primary-shadow:     rgba(46,63,92,0.30);
    --btn-border-radius:      8px;
    --btn-shadow-hover:       0 4px 12px rgba(46,63,92,0.22);

    /* ══════════════════════════════════════════════════════
       BADGES
       ══════════════════════════════════════════════════════ */
    --badge-success-bg:       #28A745;
    --badge-success-text:     #FFFFFF;
    --badge-danger-bg:        #DC3545;
    --badge-danger-text:      #FFFFFF;
    --badge-warning-bg:       #a5907f;
    --badge-warning-text:     #FFFFFF;
    --badge-info-bg:          #2E3F5C;
    --badge-info-text:        #F0EAE0;
    --badge-secondary-bg:     #e0c9b7;
    --badge-secondary-text:   #2E3F5C;
    --badge-border-radius:    6px;

    /* ══════════════════════════════════════════════════════
       ALERTS
       ══════════════════════════════════════════════════════ */
    --alert-success-bg:       #D4EDDA;
    --alert-success-text:     #155724;
    --alert-success-border:   #C3E6CB;
    --alert-danger-bg:        #F8D7DA;
    --alert-danger-text:      #721C24;
    --alert-danger-border:    #F5C6CB;
    --alert-warning-bg:       #f5ede4;
    --alert-warning-text:     #503a0c;
    --alert-warning-border:   #e0c9b7;
    --alert-info-bg:          #e8edf5;
    --alert-info-text:        #2E3F5C;
    --alert-info-border:      #b8c8e0;
    --alert-border-radius:    8px;

    /* ══════════════════════════════════════════════════════
       MODALES
       ══════════════════════════════════════════════════════ */
    --modal-bg:               #FFFFFF;
    --modal-text:             #2e2013;
    --modal-border:           rgba(46,63,92,0.12);
    --modal-header-bg:        #f5ede4;
    --modal-header-text:      #2E3F5C;
    --modal-footer-bg:        #faf7f4;
    --modal-footer-border:    rgba(165,144,127,0.12);
    --modal-border-radius:    12px;
    --modal-shadow:           0 10px 40px rgba(46,63,92,0.18);
    --modal-backdrop:         rgba(46,63,92,0.45);

    /* ══════════════════════════════════════════════════════
       DROPDOWN
       ══════════════════════════════════════════════════════ */
    --dropdown-bg:            #FFFFFF;
    --dropdown-text:          #2e2013;
    --dropdown-border:        rgba(46,63,92,0.12);
    --dropdown-item-hover-bg: #f0f3f8;
    --dropdown-item-hover-text: #2E3F5C;
    --dropdown-shadow:        0 4px 20px rgba(46,63,92,0.14);
    --dropdown-border-radius: 8px;
    --dropdown-item-border-radius: 6px;

    /* ══════════════════════════════════════════════════════
       PAGINACIÓN
       ══════════════════════════════════════════════════════ */
    --pagination-bg:          #FFFFFF;
    --pagination-text:        #2E3F5C;
    --pagination-border:      #d4c8bc;
    --pagination-hover-bg:    #f0f3f8;
    --pagination-active-bg:   #2E3F5C;
    --pagination-active-text: #FFFFFF;
    --pagination-disabled-bg: #faf7f4;
    --pagination-disabled-text: #c8c7c2;

    /* ══════════════════════════════════════════════════════
       ACCORDION
       ══════════════════════════════════════════════════════ */
    --accordion-bg:           #FFFFFF;
    --accordion-text:         #2e2013;
    --accordion-border:       rgba(46,63,92,0.12);
    --accordion-btn-bg:       #f5ede4;
    --accordion-btn-text:     #2E3F5C;
    --accordion-btn-active-bg: rgba(46,63,92,0.08);
    --accordion-btn-active-text: #2E3F5C;
    --accordion-body-bg:      #FFFFFF;

    /* ══════════════════════════════════════════════════════
       FOOTER
       ══════════════════════════════════════════════════════ */
    --footer-bg:              #2E3F5C;
    --footer-text:            #F0EAE0;
    --footer-text-muted:      rgba(240,234,224,0.60);
    --footer-link:            #e0c9b7;
    --footer-link-hover:      #FFFFFF;
    --footer-border:          rgba(255,255,255,0.07);

    /* ══════════════════════════════════════════════════════
       SCROLLBAR
       ══════════════════════════════════════════════════════ */
    --scrollbar-width:        8px;
    --scrollbar-track-bg:     #f0ebe5;
    --scrollbar-thumb-bg:     #a5b8d0;
    --scrollbar-thumb-hover:  #2E3F5C;
    --scrollbar-border-radius: 5px;

    /* ══════════════════════════════════════════════════════
       TIPOGRAFÍA
       ══════════════════════════════════════════════════════ */
    --font-family-base:       'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-size-base:         1rem;
    --font-size-sm:           0.875rem;
    --font-size-lg:           1.125rem;
    --font-size-xl:           1.25rem;
    --font-weight-normal:     400;
    --font-weight-medium:     500;
    --font-weight-semibold:   600;
    --font-weight-bold:       700;
    --line-height-base:       1.5;

    /* ══════════════════════════════════════════════════════
       SOMBRAS GLOBALES
       ══════════════════════════════════════════════════════ */
    --shadow-sm:              0 2px 8px rgba(46,63,92,0.08);
    --shadow-md:              0 4px 16px rgba(46,63,92,0.12);
    --shadow-lg:              0 8px 32px rgba(46,63,92,0.16);
    --shadow-xl:              0 16px 48px rgba(46,63,92,0.20);

    /* ══════════════════════════════════════════════════════
       BORDES GLOBALES
       ══════════════════════════════════════════════════════ */
    --border-color:           #e0d8ce;
    --border-color-light:     rgba(165,144,127,0.12);
    --border-radius-sm:       4px;
    --border-radius-md:       8px;
    --border-radius-lg:       12px;
    --border-radius-xl:       16px;
    --border-radius-full:     9999px;

    /* ══════════════════════════════════════════════════════
       TRANSICIONES
       ══════════════════════════════════════════════════════ */
    --transition-speed:       0.3s;
    --transition-speed-fast:  0.15s;
    --transition-speed-slow:  0.5s;
    --transition-ease:        ease;

    /* ══════════════════════════════════════════════════════
       Z-INDEX
       ══════════════════════════════════════════════════════ */
    --z-dropdown:             100;
    --z-overlay:              999;
    --z-header:               999;
    --z-sidebar:              1000;
    --z-modal:                1050;
    --z-toast:                1080;
    --z-tooltip:              1090;

    /* ══════════════════════════════════════════════════════
       OVERLAY MÓVIL
       ══════════════════════════════════════════════════════ */
    --overlay-bg:             rgba(46,63,92,0.50);

    /* ══════════════════════════════════════════════════════
       GRÁFICAS
       ══════════════════════════════════════════════════════ */
    --chart-color-1:          #2E3F5C;
    --chart-color-2:          #a5907f;
    --chart-color-3:          #5a7fa8;
    --chart-color-4:          #c8b09a;
    --chart-color-5:          #7a9abf;
    --chart-color-6:          #e0c9b7;
    --chart-grid-color:       rgba(46,63,92,0.08);
    --chart-tooltip-bg:       #FFFFFF;
    --chart-tooltip-text:     #2e2013;
    --chart-tooltip-shadow:   0 4px 16px rgba(46,63,92,0.14);
}

/* ══════════════════════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════════════════════ */
body.dark-mode {

    /* ── HEADER dark ── */
    --header-bg:              #1a2438;
    --header-bg-hover:        #111b2e;
    --header-text:            #e0c9b7;
    --header-text-muted:      rgba(224,201,183,0.60);
    --header-border:          rgba(255,255,255,0.06);
    --header-shadow:          0 2px 10px rgba(0,0,0,0.35);
    --header-btn-bg-hover:    rgba(255,255,255,0.08);
    --header-btn-border:      rgba(255,255,255,0.12);

    /* ── SIDEBAR dark ── */
    --sidebar-bg-start:       #111b2e;
    --sidebar-bg-end:         #0c1420;
    --sidebar-text:           rgba(224,201,183,0.78);
    --sidebar-text-active:    #e0c9b7;
    --sidebar-accent:         #c8b09a;
    --sidebar-active-bg:      rgba(200,176,154,0.15);
    --sidebar-hover-bg:       rgba(255,255,255,0.05);
    --sidebar-border:         rgba(255,255,255,0.05);
    --sidebar-header-bg:      rgba(0,0,0,0.20);
    --sidebar-shadow:         2px 0 12px rgba(0,0,0,0.35);

    /* ── BODY dark ── */
    --body-bg:                #141920;
    --body-text:              #e0d8ce;
    --body-text-muted:        #8a9ab0;
    --body-text-inverse:      #141920;

    /* ── CARDS dark ── */
    --card-bg:                #1c2535;
    --card-border:            rgba(255,255,255,0.07);
    --card-shadow:            0 2px 8px rgba(0,0,0,0.30);
    --card-shadow-hover:      0 8px 25px rgba(0,0,0,0.40);
    --card-header-bg:         #223045;
    --card-header-text:       #e0c9b7;
    --card-header-border:     rgba(255,255,255,0.06);
    --card-footer-bg:         #18202e;
    --card-footer-text:       #8a9ab0;
    --card-footer-border:     rgba(255,255,255,0.05);

    /* ── TABLAS dark ── */
    --table-bg:               transparent;
    --table-text:             #e0d8ce;
    --table-border:           #2a3548;
    --table-thead-bg:         #223045;
    --table-thead-text:       #e0c9b7;
    --table-row-hover-bg:     rgba(46,63,92,0.20);
    --table-row-stripe-bg:    rgba(255,255,255,0.03);

    /* ── FORMULARIOS dark ── */
    --input-bg:               #1c2535;
    --input-text:             #e0d8ce;
    --input-placeholder:      #5a6a80;
    --input-border:           #2a3a50;
    --input-border-focus:     #5a7fa8;
    --input-shadow-focus:     rgba(90,127,168,0.22);
    --input-bg-disabled:      #141920;
    --input-text-disabled:    #3a4a60;
    --input-group-bg:         #223045;
    --input-group-text:       #e0c9b7;
    --label-text:             #e0d8ce;

    /* ── BOTONES dark ── */
    --btn-primary-bg:         #3d5478;
    --btn-primary-bg-hover:   #5a7fa8;
    --btn-primary-shadow:     rgba(46,63,92,0.30);

    /* ── BADGES dark ── */
    --badge-info-bg:          #3d5478;
    --badge-info-text:        #e0c9b7;
    --badge-secondary-bg:     #2a3a50;
    --badge-secondary-text:   #e0c9b7;

    /* ── ALERTS dark ── */
    --alert-success-bg:       rgba(40,167,69,0.15);
    --alert-success-text:     #5CDB5C;
    --alert-success-border:   #28A745;
    --alert-danger-bg:        rgba(220,53,69,0.15);
    --alert-danger-text:      #FF6B6B;
    --alert-danger-border:    #DC3545;
    --alert-warning-bg:       rgba(165,144,127,0.15);
    --alert-warning-text:     #e0c9b7;
    --alert-warning-border:   #a5907f;
    --alert-info-bg:          rgba(46,63,92,0.25);
    --alert-info-text:        #a5b8d0;
    --alert-info-border:      #3d5478;

    /* ── MODALES dark ── */
    --modal-bg:               #1c2535;
    --modal-text:             #e0d8ce;
    --modal-border:           rgba(255,255,255,0.07);
    --modal-header-bg:        #223045;
    --modal-header-text:      #e0c9b7;
    --modal-footer-bg:        #18202e;
    --modal-footer-border:    rgba(255,255,255,0.05);
    --modal-shadow:           0 10px 40px rgba(0,0,0,0.50);
    --modal-backdrop:         rgba(0,0,0,0.65);

    /* ── DROPDOWN dark ── */
    --dropdown-bg:            #1c2535;
    --dropdown-text:          #e0d8ce;
    --dropdown-border:        rgba(255,255,255,0.07);
    --dropdown-item-hover-bg: #223045;
    --dropdown-item-hover-text: #e0c9b7;
    --dropdown-shadow:        0 4px 20px rgba(0,0,0,0.40);

    /* ── PAGINACIÓN dark ── */
    --pagination-bg:          #1c2535;
    --pagination-text:        #a5b8d0;
    --pagination-border:      #2a3a50;
    --pagination-hover-bg:    #223045;
    --pagination-active-bg:   #3d5478;
    --pagination-active-text: #FFFFFF;
    --pagination-disabled-bg: #141920;
    --pagination-disabled-text: #3a4a60;

    /* ── ACCORDION dark ── */
    --accordion-bg:           #1c2535;
    --accordion-text:         #e0d8ce;
    --accordion-border:       rgba(255,255,255,0.07);
    --accordion-btn-bg:       #223045;
    --accordion-btn-text:     #e0c9b7;
    --accordion-btn-active-bg: rgba(46,63,92,0.30);
    --accordion-btn-active-text: #e0c9b7;
    --accordion-body-bg:      #1c2535;

    /* ── FOOTER dark ── */
    --footer-bg:              #0c1420;
    --footer-text:            #e0c9b7;
    --footer-text-muted:      rgba(224,201,183,0.55);
    --footer-link:            #a5b8d0;
    --footer-link-hover:      #e0c9b7;
    --footer-border:          rgba(255,255,255,0.05);

    /* ── SCROLLBAR dark ── */
    --scrollbar-track-bg:     #141920;
    --scrollbar-thumb-bg:     #3d5478;
    --scrollbar-thumb-hover:  #5a7fa8;

    /* ── BORDES dark ── */
    --border-color:           #2a3548;
    --border-color-light:     rgba(255,255,255,0.05);

    /* ── GRÁFICAS dark ── */
    --chart-color-1:          #5a7fa8;
    --chart-color-2:          #c8b09a;
    --chart-color-3:          #7a9abf;
    --chart-color-4:          #a5907f;
    --chart-grid-color:       rgba(255,255,255,0.06);
    --chart-tooltip-bg:       #1c2535;
    --chart-tooltip-text:     #e0d8ce;
    --chart-tooltip-shadow:   0 4px 16px rgba(0,0,0,0.40);

    /* ── OVERLAY dark ── */
    --overlay-bg:             rgba(0,0,0,0.65);
}