/*
  ERP — Design Tokens
  Fuente única de verdad para toda la paleta de colores y variables de diseño.
  Cambiar un valor aquí propaga el cambio a toda la aplicación.
*/

:root {
  /* ── Paleta primaria (extraída del CSS original: #008DD2) ── */
  --erp-primary-50:    #e1f4fb;
  --erp-primary-100:   #b3def5;
  --erp-primary-200:   #81c7ef;
  --erp-primary-300:   #4fafe8;
  --erp-primary-400:   #289de3;
  --erp-primary-500:   #008dd2;       /* Color original de la app */
  --erp-primary-600:   #007fc0;
  --erp-primary-700:   #006fa3;
  --erp-primary-800:   #005f88;
  --erp-primary-900:   #00445f;
  --erp-primary:       var(--erp-primary-500);
  --erp-primary-dark:  var(--erp-primary-700);
  --erp-primary-light: var(--erp-primary-50);

  /* ── Acento ── */
  --erp-accent:        #0094ff;
  --erp-accent-dark:   #0078d4;

  /* ── Semánticos ── */
  --erp-success:       #2e7d32;
  --erp-success-bg:    #e8f5e9;
  --erp-warning:       #e65100;
  --erp-warning-bg:    #fff3e0;
  --erp-danger:        #c62828;
  --erp-danger-bg:     #fce4ec;
  --erp-info:          var(--erp-primary);
  --erp-info-bg:       var(--erp-primary-50);

  /* ── Grises / Neutrales ── */
  --erp-white:         #ffffff;
  --erp-bg-app:        #f4f6f8;
  --erp-bg-panel:      #E6E6E6;
  --erp-bg-card:       #ffffff;
  --erp-border:        #e0e0e0;
  --erp-border-light:  #f0f0f0;
  --erp-panel-accent:  #D5E5ED;

  /* ── Texto ── */
  --erp-text:          #4D4D4D;       /* Color de texto original */
  --erp-text-dark:     #212121;
  --erp-text-secondary:#757575;
  --erp-text-disabled: #bdbdbd;

  /* ── Sidebar (legacy vars) ── */
  --erp-sidebar-bg:      #1B3A5C;
  --erp-sidebar-active:  rgba(255,255,255,0.15);
  --erp-sidebar-hover:   rgba(255,255,255,0.08);
  --erp-sidebar-text:    rgba(255,255,255,0.85);
  --erp-sidebar-icon:    rgba(255,255,255,0.65);
  --erp-sidebar-divider: rgba(255,255,255,0.12);
  --erp-sidebar-width:   270px;
  --erp-sidebar-collapsed: 56px;

  /* ── Tema dinámico — sobreescritos por el layout según temaSistema ── */
  --sidebar-bg:            #ebf4ff;
  --sidebar-header-bg:     #2176ae;
  --sidebar-header-accent: #1a68a0;
  --sidebar-text:          #6287b9;
  --sidebar-text-hover:    #3d7fbc;
  --sidebar-icon-color:    rgba(98,135,185,.85);
  --sidebar-img-filter:    brightness(0) saturate(100%) invert(45%) sepia(30%) saturate(600%) hue-rotate(185deg) opacity(0.85);
  --abm-icon-bg:           #ebf4ff;
  --abm-icon-border:       #6287b9;
  --sidebar-hover-bg:      rgba(33,118,174,.08);
  --sidebar-active-bg:     rgba(33,118,174,.12);
  --sidebar-submenu-bg:    rgba(33,118,174,.05);
  --sidebar-submenu2-bg:   rgba(33,118,174,.07);
  --sidebar-separator:     rgba(33,118,174,.14);
  --sidebar-scrollbar:     rgba(33,118,174,.22);

  /* ── Toolbar ── */
  --erp-toolbar-bg:    #ffffff;
  --erp-toolbar-h:     56px;

  /* ── Espaciado ── */
  --erp-spacing-xs:    4px;
  --erp-spacing-sm:    8px;
  --erp-spacing-md:    16px;
  --erp-spacing-lg:    24px;
  --erp-spacing-xl:    32px;

  /* ── Forma ── */
  --erp-radius-sm:     4px;
  --erp-radius-md:     8px;
  --erp-radius-lg:     10px;
  --erp-radius-xl:     12px;
  --erp-radius-pill:   24px;

  /* ── Sombras ── */
  --erp-shadow-sm:     0 1px 2px rgba(0,0,0,0.08);
  --erp-shadow-md:     0 1px 4px rgba(0,0,0,0.12);
  --erp-shadow-lg:     0 4px 12px rgba(0,0,0,0.12);
  --erp-shadow-btn:    0 2px 6px rgba(0,141,210,0.30);

  /* ── Tipografía ── */
  --erp-font:          'Roboto', 'Segoe UI', Tahoma, sans-serif;
  --erp-font-size-xs:  11px;
  --erp-font-size-sm:  12px;
  --erp-font-size-md:  13px;
  --erp-font-size-lg:  14px;
  --erp-font-size-xl:  16px;

  /* ── Transiciones ── */
  --erp-transition:    all 0.2s ease;
}