:root {
  color-scheme: light;

  --cq-rosa: #01577C;
  --cq-rosa-claro: #026AA6;
  --cq-rosa-oscuro: #003044;
  --cq-blanco-puro: #FFFFFF;

  --cq-gris60: #333333;
  --cq-gris20: #CBD5E1;
  --cq-blanco: #FFFFFF;
  --cq-fondo: #FFFFFF;
  --cq-rosa-fondo: #F0F5FC;
  --cq-gris60-claro: #94A3B8;
  --cq-gris60-oscuro: #111827;
  --cq-texto2: #64748B;
  --cq-gris10: #E2E8F0;
  --cq-gris5: #F1F5F9;
  --cq-gris3: #F8FAFC;
  --cq-scroll-thumb: #81A0C0;
  --cq-scroll-thumb-hover: #64748B;
  --cq-rosa-texto: #01577C;
  --cq-rosa-oscuro-texto: #003044;

  --cq-logo: var(--cq-rosa);
  --cq-logo-producto: #FFFFFF;
  --cq-primary: var(--cq-rosa);
  --cq-primary-hover: var(--cq-rosa-oscuro);
  --cq-primary-light: var(--cq-rosa-claro);
  --cq-primary-contrast: var(--cq-blanco-puro);
  --cq-primary-soft: var(--cq-rosa-fondo);
  --cq-primary-border: rgba(1, 87, 124, 0.32);
  --cq-primary-shadow: rgba(1, 87, 124, 0.25);

  --cq-text: var(--cq-gris60);
  --cq-text-strong: var(--cq-gris60-oscuro);
  --cq-text-2: var(--cq-texto2);
  --cq-text-3: var(--cq-gris60-claro);
  --cq-text-on-primary: var(--cq-blanco-puro);

  --cq-bg: var(--cq-fondo);
  --cq-surface: var(--cq-blanco);
  --cq-surface-raised: #FFFFFF;
  --cq-surface-muted: var(--cq-gris3);
  --cq-hover: var(--cq-gris5);
  --cq-selected: rgba(1, 87, 124, 0.08);
  --cq-row-stripe: rgba(91, 152, 226, 0.08);
  --cq-row-hover: rgba(190, 209, 245, 0.6);
  --cq-row-selected: #BED1F5;
  --cq-border: var(--cq-gris20);
  --cq-divider: var(--cq-gris10);
  --cq-focus-ring: 0 0 0 3px rgba(1, 87, 124, 0.25);

  --cq-success: #289140;
  --cq-warning: #F57C00;
  --cq-danger: #DC3545;
  --cq-info: #1F77D0;
  --cq-solid-neutral: #64748B;
  --cq-solid-neutral-strong: #334155;
  --cq-success-solid: #289140;
  --cq-warning-solid: #F57C00;
  --cq-danger-solid: #DC3545;
  --cq-info-solid: #1F77D0;
  --cq-success-solid-hover: #218838;
  --cq-warning-solid-hover: #E65100;
  --cq-danger-solid-hover: #C82333;
  --cq-info-solid-hover: #1D62F0;
  --cq-success-soft: rgba(40, 145, 64, 0.10);
  --cq-warning-soft: rgba(245, 124, 0, 0.10);
  --cq-danger-soft: rgba(220, 53, 69, 0.10);
  --cq-info-soft: rgba(31, 119, 208, 0.10);
  --cq-success-border: rgba(40, 145, 64, 0.30);
  --cq-warning-border: rgba(245, 124, 0, 0.30);
  --cq-danger-border: rgba(220, 53, 69, 0.30);
  --cq-info-border: rgba(31, 119, 208, 0.30);

  --cq-skel-base: #ECECEC;
  --cq-skel-shine: #A8C7F1;

  --cq-chart-1: #01577C;
  --cq-chart-2: #007BFF;
  --cq-chart-3: #64748B;
  --cq-chart-4: #42D0ED;
  --cq-chart-5: #003044;
  --cq-chart-6: #94A3B8;
  --cq-chart-7: #7E57C2;
  --cq-chart-8: #26A69A;
  --cq-chart-9: #FFA726;
  --cq-chart-10: #42A5F5;

  --cq-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --cq-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --cq-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --cq-shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.18);

  --cq-radius-sm: 4px;
  --cq-radius-md: 8px;
  --cq-radius-lg: 16px;

  --cq-font-family: Verdana, Arial, Helvetica, sans-serif;
  --cq-font-weight-body: 400;
  --cq-font-weight-title: 700;
  --cq-font-weight-table: 400;
  --cq-font-weight-table-head: 700;
  --cq-font-weight-promo: 900;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --cq-gris60: #ECEAEE;
  --cq-primary: #D6336C;
  --cq-primary-hover: #B82A5C;
  --cq-primary-light: #E55A87;
  --cq-gris20: #404049;
  --cq-blanco: #1F1E24;
  --cq-fondo: #16151A;
  --cq-rosa-fondo: #2A1020;
  --cq-gris60-claro: #9C9AA3;
  --cq-gris60-oscuro: #ECEAEE;
  --cq-texto2: #9C9AA3;
  --cq-gris10: #2E2D35;
  --cq-gris5: #2A2930;
  --cq-gris3: #19181E;
  --cq-scroll-thumb: #2E2D35;
  --cq-scroll-thumb-hover: #404049;
  --cq-rosa-texto: #D6336C;
  --cq-rosa-oscuro-texto: #E55A87;

  --cq-logo: #FFFFFF;
  --cq-logo-producto: #FFFFFF;
  --cq-surface-raised: #2A2930;
  --cq-selected: rgba(214, 51, 108, 0.10);
  --cq-row-stripe: rgba(214, 51, 108, 0.07);
  --cq-row-hover: #2A2930;
  --cq-row-selected: #2A2930;
  --cq-focus-ring: 0 0 0 3px rgba(214, 51, 108, 0.35);

  --cq-success: #34D399;
  --cq-warning: #FBBF24;
  --cq-danger: #F97316;
  --cq-info: #60A5FA;
  --cq-solid-neutral: #404049;
  --cq-solid-neutral-strong: #2E2D35;
  --cq-success-soft: rgba(102, 187, 106, 0.12);
  --cq-warning-soft: rgba(255, 167, 38, 0.12);
  --cq-danger-soft: rgba(244, 67, 54, 0.14);
  --cq-info-soft: rgba(41, 182, 246, 0.12);
  --cq-success-border: rgba(102, 187, 106, 0.30);
  --cq-warning-border: rgba(255, 167, 38, 0.30);
  --cq-danger-border: rgba(244, 67, 54, 0.30);
  --cq-info-border: rgba(41, 182, 246, 0.30);

  --cq-skel-base: #1F1E24;
  --cq-skel-shine: #51414A;

  --cq-chart-2: #60A5FA;
  --cq-chart-4: #9C9AA3;
  --cq-chart-5: #E55A87;
  --cq-chart-6: #404049;
  --cq-chart-7: #B39DDB;
  --cq-chart-8: #80CBC4;
  --cq-chart-9: #FFCC80;
  --cq-chart-10: #90CAF9;

  --cq-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --cq-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
  --cq-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50);
  --cq-shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.55);
}


html[data-theme="dark"] {
  --bg-nav:           #19181e;
  --bg-base:          #16151A;
  --bg-surface:       #1F1E24;
  --bg-elevated:      #2A2930;
  --bg-hover:         #23222A;
  --bg-muted:         #191820;
  --bg-stripe:        rgba(214, 51, 108, 0.03);

  --border:           #2E2D35;
  --border-strong:    #404049;

  --text-primary:     #ECEAEE;
  --text-secondary:   #9C9AA3;
  --text-tertiary:    #666666;
  --text-body:        #C5C2CC;

  --brand-pure:       #E0004D;

  --primary-color:    #D6336C;
  --primary-hover:    #E55A87;
  --primary-active:   #B82A5C;
  --primary-bg:       #2A1020;
  --primary-soft:     rgba(214, 51, 108, 0.10);
  --primary-border:   rgba(214, 51, 108, 0.32);
  --primary-contrast: #FFFFFF;

  --success:          #34D399; --success-soft: rgba(52,  211, 153, 0.12);
  --warning:          #FBBF24; --warning-soft: rgba(251, 191,  36, 0.12);
  --danger:           #F97316; --danger-soft:  rgba(249, 115,  22, 0.14);
  --info:             #60A5FA; --info-soft:    rgba(96,  165, 250, 0.12);
  --create:           #34D399; --create-bg: rgba(52,  211, 153, 0.10); --create-border: rgba(34,  197,  94, 0.30);
  --read:             #60A5FA; --read-bg:   rgba(96,  165, 250, 0.10); --read-border:   rgba(96,  165, 250, 0.25);
  --update:           #FBBF24; --update-bg: rgba(251, 191,  36, 0.10); --update-border: rgba(245, 158,  11, 0.30);
  --delete:           #F87171; --delete-bg: rgba(239,  68,  68, 0.10); --delete-border: rgba(239,  68,  68, 0.30);
  --active-bg:        rgba(52, 211, 153, 0.10); --active-color:   #34D399;
  --inactive-bg:      rgba(239, 68,  68, 0.10); --inactive-color: #F87171;

  --skel-base:        var(--bg-elevated);
  --skel-surface:     var(--bg-surface);
  --skel-border:      rgba(46, 45, 53, 0.40);
  --skel-shadow:      0 10px 26px rgba(0, 0, 0, 0.15);
  --ocr-bg:           var(--bg-elevated);
  --ocr-border:       var(--border);

  --log-bg:           var(--bg-surface);
  --log-soft:         var(--bg-muted);
  --log-text:         var(--text-primary);
  --log-muted:        var(--text-secondary);
  --log-border:       var(--border);
  --log-hover:        var(--bg-elevated);
  --log-accent:       var(--primary-color);
  --anim-color:       var(--primary-color);

  --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg:        0 12px 32px rgba(0, 0, 0, 0.50);
  --shadow-modal:     0 24px 60px rgba(0, 0, 0, 0.55);
  --ring:             0 0 0 3px rgba(214, 51, 108, 0.35);
  --bg-white:         var(--bg-surface);
  --surface-color:    var(--bg-surface);
  --background-color: var(--bg-base);
  --border-color:     var(--border);
  --border-light:     var(--bg-elevated);
  --text:             var(--text-primary);
  --fg:               var(--text-primary);
  --fg-muted:         var(--text-secondary);
  --accent:           var(--primary-color);
  --accent-light:     rgba(214, 51, 108, 0.10);
  --accent-dark:      var(--primary-active);

  --primary-light-bg: rgba(214, 51, 108, 0.10);
  --primary-shadow:   rgba(214, 51, 108, 0.25);
  --text-main:        var(--text-primary);
  --border-medium:    var(--border);
}

html .swal2-styled.swal2-confirm {
  background-color: #01577C;
}

html .swal2-styled.swal2-cancel {
  background-color: #DD3333;
}

#desktopToggleSidebarMobile {
  color: #FFFFFF;
}

.user-profile-menu li.divider {
  background-color: #E2E8F0;
}

.user-profile-menu a[onclick^="logout"] {
  color: #DC3545;
}