:root {
    /*sistema1*/
    --color-primario: #00b34b; /* Verde vibrante */
    
    /*sistema2*/
    --color-primario-sistema2: #505050; /* Verde vibrante */

    /*base*/
    --color-secundario: #e2e2e2; /* Gris suave */
    
    --color-exito: #28A745; /* Verde */
    --color-exito-hover: #1d7832; 
    --color-advertencia: #FFC107; /* Amarillo */
    
    --color-peligro: #cd0e20; /* Rojo */
    --color-peligro-hover: #930c0c; /* Rojo */
    --color-info: #17b832; /* Azul claro */
    --color-fondo: #d0d0d9; /* Gris claro */
    --color-fondo-secciones: #f7f7fc;
    --color-fondo-subsecciones: #f4f4f4;
    --color-barra: #ececf3; /* Fondo barra de herramientas */
    
    --color-texto-oscuro: #343A40; /* Gris oscuro */
    --color-texto-claro: #FFFFFF; /* Blanco */
    --color-text-principal: var(--color-primario);
    
    /*tablas*/
    --color-celda-encabezado: #b5b5b5;
    
    
    /*botones*/
    --color-boton-disable: #ccc;
    /*botones sist 1*/
    --color-boton: color-mix(in srgb, var(--color-primario) 90%, white);
    --color-boton-hover: color-mix(in srgb, var(--color-primario) 80%, black);

    /*botones sist 2*/
    --color-boton-sistema2: color-mix(in srgb, var(--color-primario-sistema2) 80%, white);
    --color-boton-hover-sistema2: color-mix(in srgb, var(--color-primario-sistema2) 80%, black);

  
    /* Sombra y bordes */
    --color-borde: #9f9f9f; 
    --color-sombra: rgba(0, 0, 0, 0.1); /* Sombra ligera */
    
    /*hover*/
    --color-gris-hover: #656565;;
  
    /* Variables de unidades */
    --espaciado-pequeno: 0.5rem; /* 8px */
    --espaciado-mediano: 1rem; /* 16px */
    --espaciado-grande: 2rem; /* 32px */
    --radio-borde: 0.375rem; /* 6px */
    --ancho-maximo: 1200px; /* Máxima anchura para diseño centrado */
  
    /* Tipografía */
    --fuente-principal: 'Arial', sans-serif;
    --tamano-texto-pequeno: 0.875rem; /* 14px */
    --tamano-texto-normal: 1rem; /* 16px */
    --tamano-texto-grande: 1.25rem; /* 20px */
    --tamano-titulo: 2rem; /* 32px */
    
      /* Scrollbar general */
  --scrollbar-bg: var(--color-fondo-secciones);       /* fondo de la barra */
  --scrollbar-thumb: var(--color-boton);    /* color del thumb */
  --scrollbar-thumb-hover: var(--color-boton-hover);

  /* Scrollbar body (personalizada) */
  --scrollbar-body-bg: var(--color-fondo-secciones);
  --scrollbar-body-thumb: var(--color-boton); 
  --scrollbar-body-thumb-hover: var(--color-boton-hover);

  --scrollbar-radius: 10px;
  }
  
[data-theme="dark"] {
  --color-fondo: #0f0f10;
  --color-fondo-secciones: #111214;
  --color-fondo-subsecciones: #B6B6B4;
  --color-barra: #1f1f1f;
  --color-texto: #ffffff;
  --color-primario: #00b34b; /* Verde vibrante */
  --color-secundario: #292929; /* Gris suave */
  --color-texto-oscuro: #FFFFFF; /* Gris oscuro */
  
  --color-text-principal: var(--color-texto);
  
  --color-borde: #5d5d5d;
  
  /*tabla*/
   --color-celda-encabezado: #212121;
   
}

/* Cambio de paleta por sistema sin hardcodeo en JS */
:root[data-sistema="SISTEMA2"] {
  --color-primario: var(--color-primario-sistema2);
  --color-boton: var(--color-boton-sistema2);
  --color-boton-hover: var(--color-boton-hover-sistema2);
}