:root {
    --body-font: "Poppins", sans-serif;
    
    /* CONTROL DINAMICO DE ALTURAS */
    /* desde javascript modificamos estas alturas 
       en función de la altura del explorador     */

    --app-height: 70vh;
    --app-top: 57px;    
    --menu-izq-altura: auto;    

    --info-empresa-altura: auto;
    --info-empresa-altura-600px: auto;
    --info-empresa-altura: 60vh;

    --menu-dcha-acciones-altura: 668px;
    --menu-dcha-ordenes-altura: 668px;

    --modal-max-height: 700px;
    --modal-form-max-height: 530px;

    --contactos-height: 286px;

    /************************************/
    /* SCROLL */


    --wrapper-overflow: auto;
    --wrapper-height: 100vh;

    --contactos-overflow: auto;
    

    /*
    

    --central-overflow: scroll;
    --central-height: 100%;

    --wrapper-overflow: auto;
    --wrapper-height: 100vh;    

    /*    
    CENTRAL
    overflow: var(--central-overflow);
    height: var(--central-height);

    WRAPPER
    overflow: var(--wrapper-overflow);
    height: var(--wrapper-height);

    CONTACTOS
    overflow: var(--contactos-overflow);
    height: var(--contactos-height);

    */



    /************************************/

    /* BODY */
    --body-altura: 100vh;    

    /* APP HEADER */
    --app-header-altura: 57px;
    /* APP FOOTER */
    --app-footer-altura: 34px;

    /* APP MAIN */    
    --app-main-margin-top: var(--app-header-altura);
    --app-main-margin-bottom: var(--app-footer-altura);
    --app-main-padding: 0px 0px 0px 0px;

     /* APP */
     /*--app-maximo-ancho: 1250px; */
     --app-maximo-ancho: auto; 

      
    
    /*--app-maximo-altura: 100vh;*/ 
    


    /* TAMAÑOS */
    /* DCHA */

    --acciones-max-height: 56vh;
    --acciones-overflow: auto;

    /* responsive */

    
    --header-altura: 58px;
    --search-altura: 40px;

    --menu-izq-ancho: 300px;
    /*--menu-izq-altura: 70vh;*/
    

    /*--info-empresa-altura: 60vh;*/


    --menu-dch-ancho: 300px;

    /* MODALES */    
    --modal-top: var(--app-header-altura);
    



    /* Z-INDEX*/

    --overlay-preloader:9999;
    --overlay-video:0;
    --overlay-modal:2;

    --app-header-zindex:1000;
    --app-footer-zindex:1000;
    --app-modal-zindex:9999;

    --btn-modo-luz-zindex:1001;

    --tooltip-text-zindex:1;


}

.light-mode {
    --magenta-logo:#c00771;
    --magenta-logo-oscuro1:#8a0551;
    --magenta-logo-oscuro2:#610439;
    --magenta-logo-oscuro3: #50002e;

    --scrollbar-bg: rgba(255, 255, 255, 0.496);

    --mostrar-logo-dark: none;
    --mostrar-logo-light: block;
    
    /* COLOR TEXTO */
    --color-maestro-font-1: #222121;
    --color-maestro-font-3: #272727;
    --color-maestro-font-2: #333333;
    --color-maestro-font-4: #404040;
    --color-maestro-font-1-suave: rgb(120, 118, 118);    

    /* COLOR FONDOS */
    --color-maestro-fondo: rgb(255 244 254 / 20%);  
    --color-maestro-fondo-claro: #ffffffbd; 
    
    --color-maestro-boton: rgb(255 238 251 / 77%);   
    --color-maestro-boton-hover: rgba(226, 195, 219, 0.77);   
    
    --borde-maestro: 1px solid #ffffffbd;
    --borde-maestro-1: 1px solid rgb(205 205 205);
    --borde-maestro-2: 1px solid rgb(122, 122, 122);
    --borde-radio-maestro: 5px;

    --box-shadow-maestro: 0 4px 6px rgba(0, 0, 0, 0.743);

    --color-fondo-precarga: rgba(0, 0, 0, 1); 
    --color-spin-precarga: 5px solid #c00771; /* Color del borde */    

    /*azul #59738d*/
    --color-fondo-top-video:#ffffff78;    

    --app-fondo: var(--color-maestro-fondo);
    --app-blur: blur(20px);
    --app-border: var(--borde-maestro);

    /* APP HEADER */
    --color-fondo-app-header: #ffdefbba;
    --color-fondo-app-header-movil: #f7dff4;

    /* APP FOOTER */
    --color-fondo-app-footer: #ffdefbba;
    --color-fondo-app-footer-movil: #f7dff4;


    /* HEADER */
    --color-burguer: var(--magenta-logo-oscuro3);
    --color-logo: var(--magenta-logo-oscuro3);
    --color-logo-2: #var(--magenta-logo-oscuro3);

    --color-fondo-search: rgba(255, 255, 255, 0.532);

    --color-fondo-icono-1: rgb(111 41 94 / 100%);
    --color-fondo-icono-1-hoover: rgba(41, 11, 33, 1);
    --color-fondo-icono-2: rgba(181, 63, 110, 1);
    --color-fondo-icono-2-hoover: rgba(78, 0, 39, 1);

    /* FILTROS */
    --color-fondo-filtros: rgb(255 255 255 / 35%);

    /* WRAPPER CENTRAL */
    --color-fondo-wrapper :#ff00d761;

    /* LADO IZQUIERDO */
    /*var(--color-fondo-info-emp-det)*/

    --color-fondo-izq: var(--color-maestro-fondo-claro);
    --color-fondo-izq-hover: #ffe7f3;
    --color-circulo-cat: #b95588;
    --color-texto-circulo-cat: white;

    /* LADO CENTRAL */

    --color-fondo-cent: rgb(255 255 255 / 72%);
    --color-fondo-cent-head: transparent;
    --color-fondo-info-emp: rgba(255, 222, 252, 0.391);
    --color-fondo-info-emp-det: rgba(255, 241, 254, 0.419);
    --color-fondo-info-emp-det-hover: var(--color-maestro-boton-hover);
    --color-circulo-info: #b95588;

    --color-contacto-hover:#ffeff7;

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

    /* LADO DERECHO */
    --color-fondo-dch:rgba(255, 241, 254, 0.854);
    --color-btn-dch: #ffffff87;
    --color-btn-dch-dest: transparent;
    --color-btn-dch-hoover: #d69bcf;
    --color-fondo-accion:rgba(255 255 255 / 35%);
    --color-fill-iconos-dch:red;

    --color-fondo-dest: #292b3b;

    /* MODALES */
    --app-modal-fondo: rgb(255 213 254 / 75%);
    --app-modal-blur: blur(20px);
    --app-modal-border: var(--borde-maestro);
    --color-fondo-overlay: rgba(0, 0, 0,0.9);
    --color-fondo-input:rgba(255, 255, 255, 0.51);
    --close-btn: #3b3b3b;
    --close-btn-hover: #5703318a;

    /* Btn cambiar claro/oscuro */
    --dropdown-bg: #f7f7f7;
    --dropdown-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.2);
    --dropdown-svg-fill: #c2c200;
    --dropdown-fondo: rgba(255, 255, 255, 0.94);
    --dropdown-fondo-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.45) 100%);
    --dropdown-stroke: transparent;
    
}

.dark-mode {
    --magenta-logo: #ff68b7; /* Magenta brillante */
    --magenta-logo-oscuro1: #c00771;
    --magenta-logo-oscuro2: #8a0551;
    --magenta-logo-oscuro3: #610439;

    --scrollbar-bg: rgb(90 25 55 / 88%);

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

    /* COLOR TEXTO */
    --color-maestro-font-1: #e0e0e0; /* Texto claro */
    --color-maestro-font-2: #cccccc;
    --color-maestro-font-4: #bcbcbc;
    --color-maestro-font-1-suave: rgb(160, 160, 160);

    /* COLOR FONDOS */
    --color-maestro-fondo: rgb(0 0 0 / 25%); /* Fondo principal oscuro */
    --color-maestro-fondo-claro: #33172fb8; /* Fondo más claro para contraste */

    --color-maestro-boton: rgb(50, 20, 40 / 80%);
    --color-maestro-boton-hover: rgba(100, 40, 70, 0.77);

    --borde-maestro: 1px solid #060404;
    --borde-maestro-1: 1px solid rgb(0, 0, 0);
    --borde-maestro-2: 1px solid rgb(0, 0, 0);
    --borde-radio-maestro: 5px;

    --box-shadow-maestro: 0 4px 6px rgba(0, 0, 0, 0.4);

    --color-fondo-precarga: rgba(20, 20, 20, 1);
    --color-spin-precarga: 5px solid #ff68b7; /* Color del borde */


    /* APP HEADER */
    --color-fondo-app-header: transparent;
    --color-fondo-app-header-movil: #120e12;

    /* APP FOOTER */
    --color-fondo-app-footer: transparent;
    --color-fondo-app-footer-movil: #120e12;


    /* azul oscuro para fondo de video */
    --color-fondo-top-video: #000000c4;

    --app-fondo: var(--color-maestro-fondo);
    --app-blur: blur(20px);
    --app-border: var(--borde-maestro);

    /* HEADER */
    --color-burguer: var(--magenta-logo);
    --color-logo: var(--magenta-logo);
    --color-logo-2: var(--magenta-logo-oscuro1);

    --color-fondo-search: rgb(52 26 47 / 51%);

    --color-fondo-icono-1: #610439;
    --color-fondo-icono-1-hoover: #8a0551;
    --color-fondo-icono-2: rgba(255, 104, 183, 1);
    --color-fondo-icono-2-hoover: rgba(255, 68, 150, 1);

    /* FILTROS */
    --color-fondo-filtros: rgb(255 46 46 / 6%);


    /* LADO IZQUIERDO */
    --color-fondo-izq: #361d3275;
    --color-fondo-izq-hover: var(--color-maestro-boton-hover);
    --color-circulo-cat: #a63f7570;
    --color-texto-circulo-cat: white;

    /* LADO CENTRAL */
    --color-fondo-cent: rgb(63 27 51 / 13%);
    --color-fondo-cent-head: rgba(70, 30, 50, 0.35);
    --color-fondo-info-emp: rgba(50, 20, 40, 0.35);
    --color-fondo-info-emp-det: rgba(60, 25, 45, 0.35);
    --color-fondo-info-emp-det-hover: rgba(245, 110, 169, 0.3);
    --color-circulo-info: #ff68b7;

    --color-contacto-hover: rgba(77, 23, 46, 0.3);

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

    /* LADO DERECHO */
    --color-fondo-dch: rgb(64 30 53 / 39%);
    --color-btn-dch: #00000050;
    --color-btn-dch-dest: transparent;
    --color-btn-dch-hoover: #3b0a26d9;
    --color-fondo-accion: rgba(50, 20, 40, 0.5);
    --color-fill-iconos-dch:red;

    --color-fondo-dest: #111111;

    /* MODALES */
    --app-modal-fondo: rgb(47 24 37 / 75%);
    --app-modal-blur: blur(20px);
    --app-modal-border: var(--borde-maestro);
    --color-fondo-overlay: rgba(0, 0, 0, 0.9);
    --color-fondo-input: rgb(255 230 243 / 80%);
    --close-btn: #cccccc;
    --close-btn-hover: #ff68b7;

    /* Btn cambiar claro/oscuro */
    --dropdown-bg: #292929;
    --dropdown-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.4);
    --dropdown-svg-fill: #ff68b7;
    --dropdown-fondo: rgba(40, 40, 40, 0.94);
    --dropdown-fondo-grad: linear-gradient(180deg, rgba(50, 50, 50, 0.72) 0%, rgba(30, 30, 30, 0.45) 100%);
    --dropdown-stroke: transparent;
}