/* ============================================================
   VARIABLES GLOBALES DEL SISTEMA
   AnaMarcolMakeupStudios — DeskCod
   Para cambiar el tema completo solo modificás este archivo.
   Cada sección es 100% independiente de las demás.
   ============================================================ */

:root {

    /* ══════════════════════════════════════════════════════
       HEADER / NAVBAR SUPERIOR
       ══════════════════════════════════════════════════════ */
    --header-bg:              #de777d;
    --header-bg-hover:        #c56d71;
    --header-text:            #FFFFFF;
    --header-text-muted:      rgba(255,255,255,0.70);
    --header-border:          rgba(255,255,255,0.10);
    --header-height:          70px;
    --header-shadow:          0 2px 10px rgba(0,0,0,0.15);
    --header-btn-bg-hover:    rgba(0,0,0,0.10);
    --header-btn-border:      rgba(255,255,255,0.30);
    --header-z-index:         999;

    /* ══════════════════════════════════════════════════════
       SIDEBAR
       ══════════════════════════════════════════════════════ */
    --sidebar-bg-start:       #3D3D3D;
    --sidebar-bg-end:         #2A2A2A;
    --sidebar-text:           rgba(255,255,255,0.85);
    --sidebar-text-active:    #FFFFFF;
    --sidebar-accent:         #de777d;
    --sidebar-active-bg:      rgba(222,119,125,0.15);
    --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.08);
    --sidebar-width:          280px;
    --sidebar-width-collapsed: 70px;
    --sidebar-shadow:         2px 0 10px rgba(0,0,0,0.20);
    --sidebar-z-index:        1000;
    --sidebar-submenu-pl:     2.5rem;
    --sidebar-font-size-sub:  0.9rem;

    /* ══════════════════════════════════════════════════════
       BODY / FONDO PRINCIPAL
       ══════════════════════════════════════════════════════ */
    --body-bg:                #fbf6f6;     /* Más sutil que el original */
    --body-text:              #1f2329;     /* Más cálido que #212529, menos azul */
    --body-text-muted:        #6b7280;     /* Igual peso pero más natural */
    --body-text-inverse:      #FFFFFF;
    --main-content-pt:        80px;

    /* ══════════════════════════════════════════════════════
       CARDS
       ══════════════════════════════════════════════════════ */
    --card-bg:                #FFFFFF;
    --card-border:            rgba(222,119,125,0.12);
    --card-border-radius:     12px;
    --card-shadow:            0 2px 8px rgba(0,0,0,0.07);
    --card-shadow-hover:      0 8px 25px rgba(222,119,125,0.18);
    --card-header-bg:         #fdf0f1;
    --card-header-text:       #212529;
    --card-header-border:     rgba(222,119,125,0.12);
    --card-footer-bg:         #fdf0f1;
    --card-footer-text:       #6C757D;
    --card-footer-border:     rgba(222,119,125,0.12);

    /* ══════════════════════════════════════════════════════
       TABLAS
       ══════════════════════════════════════════════════════ */
    --table-bg:               #FFFFFF;
    --table-text:             #212529;
    --table-border:           #f0d8da;
    --table-thead-bg:         #de777d;
    --table-thead-text:       #FFFFFF;
    --table-row-hover-bg:     rgba(222,119,125,0.06);
    --table-row-stripe-bg:    rgba(222,119,125,0.03);
    --table-border-radius:    8px;

    /* ══════════════════════════════════════════════════════
       FORMULARIOS
       ══════════════════════════════════════════════════════ */
    --input-bg:               #FFFFFF;
    --input-text:             #212529;
    --input-placeholder:      #ADB5BD;
    --input-border:           #CED4DA;
    --input-border-focus:     #de777d;
    --input-shadow-focus:     rgba(222,119,125,0.25);
    --input-bg-disabled:      #E9ECEF;
    --input-text-disabled:    #6C757D;
    --input-border-radius:    8px;
    --input-group-bg:         #f5e6e7;
    --input-group-text:       #b05a60;
    --label-text:             #212529;

    /* ══════════════════════════════════════════════════════
       BOTONES PRIMARIOS
       ══════════════════════════════════════════════════════ */
    --btn-primary-bg:         #de777d;
    --btn-primary-bg-hover:   #c56d71;
    --btn-primary-text:       #FFFFFF;
    --btn-primary-border:     #de777d;
    --btn-primary-shadow:     rgba(222,119,125,0.35);
    --btn-border-radius:      8px;
    --btn-shadow-hover:       0 4px 12px rgba(222,119,125,0.30);

    /* ══════════════════════════════════════════════════════
       BADGES
       ══════════════════════════════════════════════════════ */
    --badge-success-bg:       #28A745;
    --badge-success-text:     #FFFFFF;
    --badge-danger-bg:        #DC3545;
    --badge-danger-text:      #FFFFFF;
    --badge-warning-bg:       #FFC107;
    --badge-warning-text:     #212529;
    --badge-info-bg:          #17A2B8;
    --badge-info-text:        #FFFFFF;
    --badge-secondary-bg:     #6C757D;
    --badge-secondary-text:   #FFFFFF;
    --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:       #FFF3CD;
    --alert-warning-text:     #856404;
    --alert-warning-border:   #FFEEBA;
    --alert-info-bg:          #D1ECF1;
    --alert-info-text:        #0C5460;
    --alert-info-border:      #BEE5EB;
    --alert-border-radius:    8px;

    /* ══════════════════════════════════════════════════════
       MODALES
       ══════════════════════════════════════════════════════ */
    --modal-bg:               #FFFFFF;
    --modal-text:             #212529;
    --modal-border:           rgba(222,119,125,0.15);
    --modal-header-bg:        #fdf0f1;
    --modal-header-text:      #212529;
    --modal-footer-bg:        #fdf0f1;
    --modal-footer-border:    rgba(222,119,125,0.12);
    --modal-border-radius:    12px;
    --modal-shadow:           0 10px 40px rgba(0,0,0,0.20);
    --modal-backdrop:         rgba(0,0,0,0.50);

    /* ══════════════════════════════════════════════════════
       DROPDOWN
       ══════════════════════════════════════════════════════ */
    --dropdown-bg:            #FFFFFF;
    --dropdown-text:          #212529;
    --dropdown-border:        rgba(222,119,125,0.15);
    --dropdown-item-hover-bg: #f5e6e7;
    --dropdown-item-hover-text: #b05a60;
    --dropdown-shadow:        0 4px 20px rgba(222,119,125,0.15);
    --dropdown-border-radius: 8px;
    --dropdown-item-border-radius: 6px;

    /* ══════════════════════════════════════════════════════
       PAGINACIÓN
       ══════════════════════════════════════════════════════ */
    --pagination-bg:          #FFFFFF;
    --pagination-text:        #de777d;
    --pagination-border:      #f0d8da;
    --pagination-hover-bg:    #f5e6e7;
    --pagination-active-bg:   #de777d;
    --pagination-active-text: #FFFFFF;
    --pagination-disabled-bg: #F8F9FA;
    --pagination-disabled-text: #6C757D;

    /* ══════════════════════════════════════════════════════
       ACCORDION
       ══════════════════════════════════════════════════════ */
    --accordion-bg:           #FFFFFF;
    --accordion-text:         #212529;
    --accordion-border:       rgba(222,119,125,0.15);
    --accordion-btn-bg:       #fdf0f1;
    --accordion-btn-text:     #212529;
    --accordion-btn-active-bg: rgba(222,119,125,0.10);
    --accordion-btn-active-text: #b05a60;
    --accordion-body-bg:      #FFFFFF;

    /* ══════════════════════════════════════════════════════
       FOOTER
       ══════════════════════════════════════════════════════ */
    --footer-bg:              #2A2A2A;
    --footer-text:            #FFFFFF;
    --footer-text-muted:      rgba(255,255,255,0.65);
    --footer-link:            #de777d;
    --footer-link-hover:      #f5e6e7;
    --footer-border:          rgba(255,255,255,0.08);

    /* ══════════════════════════════════════════════════════
       SCROLLBAR
       ══════════════════════════════════════════════════════ */
    --scrollbar-width:        8px;
    --scrollbar-track-bg:     #fdf0f1;
    --scrollbar-thumb-bg:     #de777d;
    --scrollbar-thumb-hover:  #c56d71;
    --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(0,0,0,0.08);
    --shadow-md:              0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg:              0 8px 32px rgba(0,0,0,0.16);
    --shadow-xl:              0 16px 48px rgba(0,0,0,0.20);

    /* ══════════════════════════════════════════════════════
       BORDES GLOBALES
       ══════════════════════════════════════════════════════ */
    --border-color:           #f0d8da;
    --border-color-light:     rgba(222,119,125,0.10);
    --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(0,0,0,0.50);

    /* ══════════════════════════════════════════════════════
       GRÁFICAS
       ══════════════════════════════════════════════════════ */
    --chart-color-1:          #de777d;
    --chart-color-2:          #c56d71;
    --chart-color-3:          #b05a60;
    --chart-color-4:          #F39C12;
    --chart-color-5:          #9B59B6;
    --chart-color-6:          #1ABC9C;
    --chart-grid-color:       rgba(222,119,125,0.08);
    --chart-tooltip-bg:       #FFFFFF;
    --chart-tooltip-text:     #212529;
    --chart-tooltip-shadow:   0 4px 16px rgba(222,119,125,0.20);

    /* ══════════════════════════════════════════════════════
       ESTADOS DE PEDIDOS — badges específicos del sistema
       ══════════════════════════════════════════════════════ */
    --badge-pendiente-bg:     #fff3e0;
    --badge-pendiente-text:   #e65100;
    --badge-preparacion-bg:   #fde6e7;
    --badge-preparacion-text: #b05a60;
    --badge-listo-bg:         #e8f5e9;
    --badge-listo-text:       #1b5e20;
    --badge-camino-bg:        #e3f2fd;
    --badge-camino-text:      #0d47a1;
    --badge-entregado-bg:     #e8f5e9;
    --badge-entregado-text:   #1b5e20;
    --badge-cancelado-bg:     #fce4ec;
    --badge-cancelado-text:   #880e4f;
}

/* ══════════════════════════════════════════════════════════
   DARK MODE — Paleta rediseñada 2026
   ────────────────────────────────────────────────────────────
   Cambios respecto a la versión vieja:
     • Negros puros (#000, #111) reemplazados por grises con leve
       tinte cálido (mejor confort visual, menos fatiga).
     • Header oscuro como el sidebar para evitar el contraste
       chillón rosa/negro. El rosa se mantiene SOLO como acento
       (botones, links activos, badges).
     • Rosa #de777d (light) → #ffa1a8 (dark): más claro y
       desaturado para que sea legible sobre fondo oscuro.
     • Jerarquía de fondos:
         body         → #16161c   (más profundo)
         card         → #1f1f26   (1 nivel arriba)
         card-header  → #292930   (2 niveles arriba)
         input        → #1c1c23   (entre body y card)
     • Texto:
         primario     → #e8e8ea   (gris claro, no blanco puro)
         secundario   → #b0b0b8
   ══════════════════════════════════════════════════════════ */
body.dark-mode {

    /* ── HEADER dark — ahora oscuro, no rosado ── */
    --header-bg:              #1f1f26;
    --header-bg-hover:        #292930;
    --header-text:            #e8e8ea;
    --header-text-muted:      rgba(232,232,234,0.65);
    --header-border:          rgba(255,255,255,0.06);
    --header-shadow:          0 2px 12px rgba(0,0,0,0.50);
    --header-btn-bg-hover:    rgba(255,255,255,0.06);
    --header-btn-border:      rgba(255,255,255,0.12);

    /* ── SIDEBAR dark — unificado con header ── */
    --sidebar-bg-start:       #1f1f26;
    --sidebar-bg-end:         #16161c;
    --sidebar-text:           rgba(232,232,234,0.82);
    --sidebar-text-active:    #ffa1a8;
    --sidebar-accent:         #ffa1a8;
    --sidebar-active-bg:      rgba(255,161,168,0.12);
    --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.40);

    /* ── BODY dark — gris cálido en vez de negro puro ── */
    --body-bg:                #16161c;
    --body-text:              #e8e8ea;
    --body-text-muted:        #b0b0b8;
    --body-text-inverse:      #16161c;

    /* ── CARDS dark — jerarquía visual clara ── */
    --card-bg:                #1f1f26;
    --card-border:            rgba(255,255,255,0.06);
    --card-shadow:            0 2px 10px rgba(0,0,0,0.40);
    --card-shadow-hover:      0 8px 30px rgba(255,161,168,0.15);
    --card-header-bg:         #292930;
    --card-header-text:       #e8e8ea;
    --card-header-border:     rgba(255,255,255,0.06);
    --card-footer-bg:         #1c1c23;
    --card-footer-text:       #b0b0b8;
    --card-footer-border:     rgba(255,255,255,0.06);

    /* ── TABLAS dark ── */
    --table-bg:               transparent;
    --table-text:             #e8e8ea;
    --table-border:           #2e2e35;
    --table-thead-bg:         #292930;
    --table-thead-text:       #ffa1a8;
    --table-row-hover-bg:     rgba(255,161,168,0.08);
    --table-row-stripe-bg:    rgba(255,255,255,0.025);

    /* ── FORMULARIOS dark ── */
    --input-bg:               #1c1c23;
    --input-text:             #e8e8ea;
    --input-placeholder:      #6e6e75;
    --input-border:           #353540;
    --input-border-focus:     #ffa1a8;
    --input-shadow-focus:     rgba(255,161,168,0.25);
    --input-bg-disabled:      #1a1a20;
    --input-text-disabled:    #565660;
    --input-group-bg:         #292930;
    --input-group-text:       #ffa1a8;
    --label-text:             #e8e8ea;

    /* ── BOTONES dark — rosa de botón se mantiene pero hover más vivo ── */
    --btn-primary-bg:         #de777d;
    --btn-primary-bg-hover:   #e88a90;
    --btn-primary-text:       #FFFFFF;
    --btn-primary-border:     #de777d;
    --btn-primary-shadow:     rgba(255,161,168,0.30);
    --btn-shadow-hover:       0 4px 14px rgba(255,161,168,0.25);

    /* ── ALERTS dark — contraste mejorado WCAG AA ── */
    --alert-success-bg:       rgba(40,167,69,0.14);
    --alert-success-text:     #6ee089;
    --alert-success-border:   rgba(40,167,69,0.35);
    --alert-danger-bg:        rgba(220,53,69,0.14);
    --alert-danger-text:      #ff8787;
    --alert-danger-border:    rgba(220,53,69,0.35);
    --alert-warning-bg:       rgba(255,193,7,0.14);
    --alert-warning-text:     #ffd54f;
    --alert-warning-border:   rgba(255,193,7,0.35);
    --alert-info-bg:          rgba(23,162,184,0.14);
    --alert-info-text:        #80d8e8;
    --alert-info-border:      rgba(23,162,184,0.35);

    /* ── MODALES dark ── */
    --modal-bg:               #1f1f26;
    --modal-text:             #e8e8ea;
    --modal-border:           rgba(255,255,255,0.08);
    --modal-header-bg:        #292930;
    --modal-header-text:      #e8e8ea;
    --modal-footer-bg:        #1c1c23;
    --modal-footer-border:    rgba(255,255,255,0.06);
    --modal-shadow:           0 12px 48px rgba(0,0,0,0.60);

    /* ── DROPDOWN dark ── */
    --dropdown-bg:            #1f1f26;
    --dropdown-text:          #e8e8ea;
    --dropdown-border:        rgba(255,255,255,0.08);
    --dropdown-item-hover-bg: rgba(255,161,168,0.12);
    --dropdown-item-hover-text: #ffa1a8;
    --dropdown-shadow:        0 6px 24px rgba(0,0,0,0.50);

    /* ── PAGINACIÓN dark ── */
    --pagination-bg:          #1f1f26;
    --pagination-text:        #ffa1a8;
    --pagination-border:      #353540;
    --pagination-hover-bg:    #292930;
    --pagination-active-bg:   #de777d;
    --pagination-active-text: #FFFFFF;
    --pagination-disabled-bg: #1a1a20;
    --pagination-disabled-text: #565660;

    /* ── ACCORDION dark ── */
    --accordion-bg:           #1f1f26;
    --accordion-text:         #e8e8ea;
    --accordion-border:       rgba(255,255,255,0.08);
    --accordion-btn-bg:       #292930;
    --accordion-btn-text:     #e8e8ea;
    --accordion-btn-active-bg: rgba(255,161,168,0.10);
    --accordion-btn-active-text: #ffa1a8;
    --accordion-body-bg:      #1f1f26;

    /* ── FOOTER dark ── */
    --footer-bg:              #14141a;
    --footer-text:            #e8e8ea;
    --footer-text-muted:      rgba(232,232,234,0.55);
    --footer-link:            #ffa1a8;
    --footer-link-hover:      #ffd0d4;
    --footer-border:          rgba(255,255,255,0.06);

    /* ── SCROLLBAR dark ── */
    --scrollbar-track-bg:     #1a1a20;
    --scrollbar-thumb-bg:     #ffa1a8;
    --scrollbar-thumb-hover:  #ffb6bc;

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

    /* ── GRÁFICAS dark — contraste mejor en líneas y leyendas ── */
    --chart-color-1:          #ffa1a8;
    --chart-color-2:          #de777d;
    --chart-color-3:          #b05a60;
    --chart-color-4:          #ffd54f;
    --chart-color-5:          #c39bd3;
    --chart-color-6:          #5dd3b5;
    --chart-grid-color:       rgba(255,255,255,0.06);
    --chart-tooltip-bg:       #292930;
    --chart-tooltip-text:     #e8e8ea;
    --chart-tooltip-shadow:   0 4px 16px rgba(0,0,0,0.50);

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

    /* ── ESTADOS PEDIDOS dark — pasteles más legibles ── */
    --badge-pendiente-bg:     rgba(230,81,0,0.18);
    --badge-pendiente-text:   #ffba80;
    --badge-preparacion-bg:   rgba(255,161,168,0.18);
    --badge-preparacion-text: #ffb6bc;
    --badge-listo-bg:         rgba(76,175,80,0.18);
    --badge-listo-text:       #a5d6a7;
    --badge-camino-bg:        rgba(33,150,243,0.18);
    --badge-camino-text:      #90caf9;
    --badge-entregado-bg:     rgba(76,175,80,0.18);
    --badge-entregado-text:   #a5d6a7;
    --badge-cancelado-bg:     rgba(244,143,177,0.15);
    --badge-cancelado-text:   #f8bbd0;
}

/* ══════════════════════════════════════════════════════════
   AJUSTES GLOBALES DE LECTURA EN DARK MODE
   Estos selectores específicos forzaron problemas de contraste
   en componentes Bootstrap nativos que no respetan variables.
   ══════════════════════════════════════════════════════════ */
body.dark-mode {
    color-scheme: dark;
}

body.dark-mode .text-muted        { color: var(--body-text-muted) !important; }
body.dark-mode .text-dark         { color: var(--body-text) !important; }
body.dark-mode .text-primary      { color: var(--sidebar-accent) !important; }
body.dark-mode .text-secondary    { color: var(--body-text-muted) !important; }
body.dark-mode .border            { border-color: var(--border-color) !important; }
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-start,
body.dark-mode .border-end        { border-color: var(--border-color) !important; }

body.dark-mode .bg-white          { background-color: var(--card-bg) !important; }
body.dark-mode .bg-light          { background-color: var(--card-header-bg) !important; }
body.dark-mode .bg-body           { background-color: var(--body-bg) !important; }

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 0.2rem var(--input-shadow-focus);
}

/* Bootstrap btn-outline-secondary se ve mal en dark */
body.dark-mode .btn-outline-secondary {
    color: var(--body-text-muted);
    border-color: var(--border-color);
}
body.dark-mode .btn-outline-secondary:hover {
    background-color: var(--card-header-bg);
    color: var(--body-text);
    border-color: var(--sidebar-accent);
}

/* Mantener forma del btn-light en dark */
body.dark-mode .btn-light {
    background-color: var(--card-header-bg);
    color: var(--body-text);
    border-color: var(--border-color);
}
body.dark-mode .btn-light:hover {
    background-color: var(--card-bg);
    color: var(--sidebar-accent);
    border-color: var(--sidebar-accent);
}

/* Links inline rosa más legibles en dark */
body.dark-mode a:not(.btn):not(.dropdown-item):not(.nav-link):not(.list-group-item) {
    color: var(--sidebar-accent);
}
body.dark-mode a:not(.btn):not(.dropdown-item):not(.nav-link):not(.list-group-item):hover {
    color: #ffd0d4;
}