:root {
    --body-font: "Poppins", sans-serif;
    --font-size-1: 15px;

    --font-weight-light: 400;
    --font-weight-medium: 600;
    --font-weight-bold: bold;

    --body-line-height: 1.3;
    --body-height: 100vh;
    --borde-radio-1: 10px;
    --borde-radio-2: 5px;

    --header-padding: 5px 20px 0px 20px;
    --header-padding-movil: 10px;
    --header-margin-bottom: 10px;
    --header-margin-bottom-movil: 0px;

    --footer-padding: 5px 20px 10px 20px;
    --footer-padding-movil: 10px;
    --footer-margin-top: 10px;
    --footer-margin-top-movil: 0px;

    --main-gap: 0px;
    --main-gap-movil: 20px;
    --main-padding: 0px 0px;
    --main-padding-movil: 0px 10px;

    --col1-padding: 20px;
    --col1-padding-movil: 20px;
    --col1-height-movil: -webkit-fill-available;

    --col3-padding: 0px;
    --col3-padding-movil: 0px;
    --col3-height-movil: -webkit-fill-available;
    --column-margin-1: 5px;

    --col-izq-tam: 300px;
    --col-izq-tam-mov: 250px;
    --col-dch-tam: 300px;
    --col-dch-tam-mov: 250px;


    /* LOGIN */
    --login-tamaño-form: 330px;
    --login-padding-form: 20px;

    /* SCROLLBAR */
    --scrollbar-tamanno: 8px;

    --texto-color-negro: black;
    --texto-color-white: white;

    --tooltip-text-zindex: 1000;

    /* MODAL */

    --modal-width: 70%;
    --modal-width-movil: 90%;

    --modal-max-height-number : 200;
    --modal-max-height: var(--modal-max-height-number)px;
    --modal-content-height: calc(--modal-max-height-number - 200)px;

}

.light-mode {

    --mostrar-logo-dark: none;
    --mostrar-logo-light: block;

    /* TEXTOS */

    --texto-color-1: #333;
    --texto-color-1-osc: #202020;
    --texto-color-2: #6b6b6b;
    --texto-color-3: #9f9f9f;
    --texto-color-4: #cacaca;
    --a-color: #333;

    --texto-color-boton: rgb(255, 66, 66);

    --texto-circulo-cat: black;

    --color-texto-login: var(--texto-color-1);

    --color-texto-login-boton: var(--texto-color-1);

    --color-texto-error-login: red;
    --color-spiner-login: rgba(0, 0, 0, 0.514);

    /* OTROS */

    --color-sombra: rgba(0, 0, 0, 0.171);
    --borde-1: 1px solid var(--texto-color-3);
    --borde-oscuro: 1px solid var(--color-sombra);

    --box-shadow-1: 0px 0px 3px 1px var(--color-sombra);

    --color-texto-etiqueta: white;
    --color-etiqueta-influyente: #499e4c;
    --color-etiqueta-filtro: #ff5050;
    --color-etiqueta-decisor: #49679e;

    --color-fill-iconos-dch: #ff0000;

    --fondo-icono-switch-mode: #ffffff;
    --linea-icono-switch-mode: rgb(55, 62, 0);
    --borde-icono-switch-mode: var(--borde-1);

    /************************************** */
    /* FONDOS */

    /* BOTONES 1 */
    --fondo-boton-1: hsl(329, 100%, 86%);
    /* BOTON SELECCIONADO */
    --fondo-boton-1-dest: hsl(330, 100%, 69%);    
    /* SELECCION BOTON */
    --fondo-boton-1-hover: hsl(329, 100%, 78%);
    


    /* FONDO CIRCULOS */
    --fondo-circulo-cat: hsl(329deg 100% 72.67%);
    --borde-circulo-cat: 1px solid #74747457;

    --fondo-oscuro: hsl(329deg 41.97% 72.23%);
    /*--fondo-color-1: #fddbff;*/
    
    --numero-color-rojo: 360; /* ROJO */
    --numero-color-magenta: 330; /* MAGENTA 300-330 */
    --numero-color-purpura: 270; /* PURPURA */
    --numero-color-azul: 240; /* AZUL */   
    --numero-color-cyan: 180; /* CYAN */ 
    --numero-color-verde: 120; /* VERDE */       
    --numero-color-amarillo: 60; /* AMARILLO */       
    --numero-color-naranja: 20; /* NARANJA */       
        
    --numero-color: var(--numero-color-magenta);

    --numero-matiz: 55%; /* GRISACEO */    
    
    --fondo-color-1-10: hsl(var(--numero-color), var(--numero-matiz), 90%);
    --fondo-color-1-9: hsl(var(--numero-color), var(--numero-matiz), 91%);
    --fondo-color-1-8: hsl(var(--numero-color), var(--numero-matiz), 92%);
    --fondo-color-1-7: hsl(var(--numero-color), var(--numero-matiz), 93%);
    --fondo-color-1-6: hsl(var(--numero-color), var(--numero-matiz), 94%);
    --fondo-color-1-5: hsl(var(--numero-color), var(--numero-matiz), 95%);
    --fondo-color-1-4: hsl(var(--numero-color), var(--numero-matiz), 96%);
    --fondo-color-1-2: hsl(var(--numero-color), var(--numero-matiz), 98%);
    --fondo-color-1-0: hsl(var(--numero-color), var(--numero-matiz), 100%);

    --fondo-color-1-10-transp-80: hsla(var(--numero-color), var(--numero-matiz), 90%,80%);

    --fondo-color-1: var(--fondo-color-1-10);

    /* HEAD */
    --fondo-color-2: var(--fondo-color-1-6);
    /* FONDOS COLUMNAS */
    --fondo-empresa: var(--fondo-color-1-5);
    /* CABECERAS */
    --color-fondo-cent-head: var(--fondo-color-1);
    /* INFO */
    --color-fondo-cent-info: var(--fondo-color-1-5);    
    
    /* SELECCIÓN IZQ */
    --fondo-empresa-hover: var(--fondo-color-1-9);
    /* SELECCIÓN CONTACTOS */
    --color-fondo-cent-info-hover: var(--fondo-color-1-9);
    /* SELECCIÓN ACCIONES ORDENES */
    --fondo-color-boton-2: var(--fondo-color-1-9);

    /* BOTONES 1 */
    --fondo-color-3: var(--fondo-color-1-6);
    /* BOTON SELECCIONADO */
    --fondo-color-boton-1-dest: var(--fondo-color-1);    
    /* SELECCION BOTON */
    --fondo-color-boton-1-hover: var(--fondo-color-1-0);
    

    /* INPUTS */
    --fondo-color-input: white;


    /* ICONOS MENU */
    --color-fondo-icono-perfil: var(--fondo-color-1-10);
    --color-fondo-icono-perfil-hoover: rgb(255, 255, 255);
    --color-icono-perfil: rgb(0, 0, 0);

    --fondo-color-1-transp: var(--fondo-color-1-10-transp-50);
    --color-fondo-login: var(--fondo-color-1-7);
    --color-fondo-login-boton: var(--fondo-color-1-10);
    --color-fondo-login-boton-hover: var(--fondo-color-1-2);

    /* MODAL */    
    --color-modal: var(--fondo-color-2);

}

.dark-mode {

    /* BOTONES 1 */
    --fondo-boton-1: hsl(329, 45%, 24%);
    /* BOTON SELECCIONADO */
    --fondo-boton-1-dest: hsl(330, 71%, 21%);    
    /* SELECCION BOTON */
    --fondo-boton-1-hover: hsl(329, 73%, 16%);


    /* FONDO CIRCULOS */
    --fondo-circulo-cat: hsl(329, 71%, 31%);
    --borde-circulo-cat: 1px solid #74747457;


    --fondo-oscuro: hsl(330, 36%, 4%);
    /*--fondo-color-1: #fddbff;*/

    --fondo-color-1: #150815;
    --fondo-color-1-transp: #16091681;
    --fondo-color-2: #3b1c3b;
    --fondo-color-3: #160916;
    --fondo-color-boton-1: hsl(330, 72%, 19%);
    --fondo-color-boton-1-hover: hsl(328, 78%, 25%);
    --fondo-color-boton-1-dest: hsl(330, 72%, 21%);

    --fondo-color-input: white;

    --texto-color-1: #e1e1e1;
    --texto-color-1-osc: rgb(255, 255, 255);
    --texto-color-2: #bababa;
    --texto-color-3: #494949;
    --texto-color-4: #1d1d1d;
    --a-color: #bbbbbb;

    --texto-color-boton: rgb(255, 66, 66);

    --color-sombra: rgba(0, 0, 0, 0.421);
    --borde-1: 1px solid var(--texto-color-3);
    --borde-oscuro: 1px solid var(--color-sombra);

    --box-shadow-1: 0px 0px 3px 1px var(--color-sombra);

    --mostrar-logo-dark: block;
    --mostrar-logo-light: none;

    --fondo-icono-switch-mode: #000000;
    --linea-icono-switch-mode: #460a46;
    --borde-icono-switch-mode: var(--borde-1);

    --color-fondo-login: var(--fondo-color-3);
    --color-texto-login: var(--texto-color-1);

    --color-texto-login-boton: var(--texto-color-1);

    --color-fondo-login-boton: var(--fondo-color-boton-1);
    --color-fondo-login-boton-hover: var(--fondo-color-boton-1-hover);
    --color-texto-error-login: rgb(255, 97, 97);
    --color-spiner-login: rgba(114, 114, 114, 0.484);

    /* ICONOS MENU */

    --color-fondo-icono-perfil: hsl(329, 71%, 31%);
    --color-fondo-icono-perfil-hoover: hsl(329, 77%, 14%);
    --color-icono-perfil: white;

    /* COL IZQ */


    --fondo-empresa-hover: rgba(64, 45, 68, 0.477);
    --texto-circulo-cat: white;

    /* COL CENT */
    --color-fondo-cent-head: #2a1728;
    --color-fondo-cent-info: #3c2139;
    --color-fondo-cent-info-hover: #3f183b;

    --color-texto-etiqueta: white;
    --color-etiqueta-influyente: #499e4c;
    --color-etiqueta-filtro: #ff5050;
    --color-etiqueta-decisor: #49679e;

    /* COL DCHA */

    --color-fill-iconos-dch: #ff0000;


    /* MODAL */    
    --color-modal: var(--fondo-color-2);
}