/* Variables Globales */
:root {
    --sticky-offset-individual: 190px;
    --sticky-offset-grupal: 185px;
    --sidebar-width: 180px; /* Ancho del sidebar expandido */
    --sidebar-width-collapsed: 80px; /* Ancho del sidebar colapsado */
    --sidebar-bg: #191919; /* Color de fondo del sidebar */
    --hover-bg: #72a11a; /* Color de fondo al pasar el mouse en el sidebar */
    --titles-font-size: 1em; /* Tamaño de fuente para títulos en gráficos */
    --hover-select-bg: #72a11a; /* Color de fondo al pasar el mouse en opciones seleccionables */
    --divider-color: #72a11a; /* Color de los divisores */
    --border-filtos: #72a11a;    /* Color de los bordes de filtros y botones */
    --hover-text: #fff; /* Color del texto al pasar el mouse en opciones seleccionables */

    --bg-color: #f8f9fa; /* Color de fondo general */
    --select-container-bg: #fff; /* Fondo de los contenedores de selección */
    --card-bg: #fff; /* Fondo de los cards */
    --text-color: #212529; /* Color de texto principal */
    --footer-text-color: #00000075; /* Color de texto del footer */
    --sticky-card-bg: #fff; /* Fondo de los cards sticky */
    --card_contenedor-bg: #fff;     /* Fondo de los cards contenedor */
    --select-selected-bg: #cdd6b9; /* Fondo de la opción seleccionada en selects */
    --border-color-acordion: #e4e4e4; /* Color del borde de los acordiones */
    --text-positivo: #7ca235; /* Color para texto positivo */
    --text-moderado: #f76a32; /* Color para texto moderado */
    --texto-negativo2: #6c0000;
    --texto-negativo: #ff0000; /* Color para texto negativo */
    --text-neutral: #666666; /* Color para texto neutral */
    --text-info: #535353; /* Color para texto informativo */

    --chart-color-1:#9dd12e; /* Verde claro */
    --chart-color-2:#588856; /* Verde oscuro */
    --chart-color-3:#cb775f; /* Naranja */
    --chart-color-4:#484d6a; /* Azul grisáceo */
    --chart-color-5:#f76a32; /* Naranja brillante */
    --chart-color-6:#a0a0a0; /* Gris */
    --chart-color-7:#191919; 
    --chart-color-8:#ad5942; /* Marrón */
    --chart-color-9:#ff0000; /* Rojo */
    --chart-color-10:#a11a1a; /* Rojo oscuro */
    --chart-color-11:#f9c014; /* Azul oscuro */
    --chart-color-12:#406481; /* Azul muy oscuro */
    --chart-color-13:#998cb6; /* Morado */
    --chart-color-14:#2faec7; /* azules */
    --chart-color-15:#3f4886; /* Azul grisáceo */
    --table-head-1: #4c3957; /* Morado oscuro */

    --button-bg: var(--transparente); /* Fondo de los botones */
    --button-icon:#929292; /* Color de los íconos en botones */
    --button-bg-hover:#f7f7f7; /* Fondo de los botones al pasar el mouse */
    --button-bg-active:#dfe5dd; /* Fondo de los botones al hacer clic */
    --icon-color:#33505f; /* Color de los íconos generales */

    /* Colores para detalles de las grficas */
    --transparente: rgba(0,0,0,0); /* Transparente */
    --tooltip-bg: #fff; /* Fondo de los tooltips */
    --menu-hover-bg: #f0f0f0; /* Fondo al pasar el mouse en menús */
    --menu-hover-text: #000; /* Texto al pasar el mouse en menús */

    /* Colores icono filtro */
    --filter-icon: #f0f0f0; /* Fondo del icono de filtro */
    --border-color-grafica: #929292;
    --texto-color-grafica-v: #979206;
    --table-blur: #e0e6d6;
    --table-blur-2: #f4f5f2;
    --table-border-color: #dddddd6b;
    --bg-modal: #fff;
}

/* Modos de Color */
/* Tema claro */
body.light-mode {
    --bg-color: #f8f9fa;
    --select-container-bg: #fff;
    --card-bg: #fff;
    --text-color: #212529;
    --footer-text-color: #00000075;
    --sticky-card-bg: #fff;
    --card_contenedor-bg: #fff;
    --select-selected-bg: #cdd6b9;
    --border-color-acordion: #e4e4e4;
    --text-positivo: #7ca235;
    --text-moderado: #f76a32; 
    --texto-negativo: #ff0000;
    --text-neutral: #666666;
    --text-info: #535353;
    --button-icon:#929292;
    --button-bg-hover:#f7f7f7;
    --button-bg-active:#dfe5dd;
    --icon-color:#33505f;
    --tooltip-bg: #fff;
    --filter-icon: #777777; /* Fondo del icono de filtro */
    --texto-color-grafica-v: #09631d;
    --table-blur: #e0e6d6;
    --table-blur-2: #f4f5f2;
    --bg-modal: #fff;
    --table-border-color: #dddddd6b;
}

/* Tema oscuro */
body.dark-mode {
    --bg-color: #090a0e;
    --select-container-bg: #191919;
    --card-bg: #1e2629;
    --text-color: #f0f0f0;
    --footer-text-color: #cbcbcb75;
    --sticky-card-bg: #191919; /* Mismo que sidebar */
    --card_contenedor-bg: #3e4255;
    --select-buscar-bg: #292a2b;
    --select-selected-bg: #4b4c47;
    --border-color-acordion: #262a2e;
    --text-positivo: #8db149;
    --text-moderado: #f76a32; 
    --texto-negativo: #ff0000;
    --text-neutral: #819079;
    --text-info: #bdbdbd;
    --icon-color:#e2bb46;

    --tooltip-bg: #101416;
    --menu-hover-bg: #383939; /* Fondo al pasar el mouse en menús */
    --menu-hover-text: #ffffff; /* Texto al pasar el mouse en menús */
    --filter-icon: #f0f0f0; /* Fondo del icono de filtro */

    --texto-color-grafica-v: #6b114b;
    --table-blur: #65704f;
    --table-blur-2: #1f1f1f;
    --chart-color-4:#6a6f90; /* Azul grisáceo */
    --chart-color-6:#ffffff; /* Gris */
    --chart-color-7:#5f6663; 
    --chart-color-12:#649ac5; /* Gris */
    --bg-modal: #1e2629;
    --table-border-color: #3c3c3c;
    --table-head-1: #815d95; /* Morado oscuro */
}