/*FORMATEAR LOS ESTILOS DEL NAVEGADOR. Hay Border, Padding y Content. El tamaño se ha limitado al border.*/
*{
    margin: 0px;
    padding:0px;
    box-sizing:border-box; 
    -webkit-text-size-adjust:none; /*hace que iphone usando safari no modifique el tamaño de la letra*/
    /*list-style: none; /*le quito los circulos a cualquier lista*/
    

}

/* html {
    
   
    line-height: 210%;
} */

.linea 

    
{
border: 1px cadetblue solid;
width: 130px;
margin-bottom: 3px;
transform: translateX(-50%);
left: 50%;
 

}

.anagrama {

    width: 135px; 
    height: 60px;
    border: none ; /*le quita las sombras al boton*/
    background-image: url(../Imagenes/favicon_anagrama.png);
    background-repeat: no-repeat; /*para que no se repita la imagen*/
    background-size: 105px;
    margin: 3px 2px 0px 14px;
    
    
} /*boton abrir el questionario*/


.botonsubir

{
    
	
	cursor:pointer;
	position: fixed;
	top:80px;
	right:20px;
    width: 32px;
    border-radius: 16px;
    background-image: url(../Imagenes/Flechaarribamenu.png);
    background-repeat: no-repeat;
    background-size: 33px;
    background-position: center;
    box-shadow: 0px 0px 10px 0px #222;
    visibility: hidden;
    height: 0;
    transition: all 1.5s ease-in-out;
    z-index: 1;

}

.botonsubir--visible {
    visibility: visible;
    height: 33px;
}

header{ /*creamos la barra superior*/

   background-color: #34495e; /*el fondo de la barra*/
   height: 70px; /*que la barra tenga ese alto*/
   position:absolute; top:10px; left: 40;/*que quede la barra fija al cerrar el navegador o bajar por la página*/
   z-index: 10000;
   border-radius: 20px;
   transition: border-top-right-radius 150ms ease;
   
   
   max-width: 750px;
   left: 50%; /*esto centra el menú, junto con el de abajo. Lo lleva a la mitad de la pagina*/
   transform: translate(-50%,0); /*desde la mitad de la pagina (eje X) lo vuelve a su sitio original cada vez que se cambia el tamaño del navegador*/
   
   
   
   /*border:0px solid rgb(255, 47, 47); /*por si quieres ver el borde*/
    /*margin: 10px auto 0;*/
    /*width: 100%; /*que ocupe todo el ancho*/
    /*opacity: 70%;*/
}

.headeralaizq{
    left: 7%;
    transform: translate(0,0); /*desde la mitad de la pagina (eje X) lo vuelve a su sitio original cada vez que se cambia el tamaño del navegador*/
    
}

.nav { /*le doy la misma distribución al menu pequeño que al submenu*/
    
    display: flex; /*transforma los datos de la columna (un h1 y una lista ) en una fila*/
    justify-content: space-between;/*pone todos los objetos en apartados entre la izquierda y derecha*/
    font-family:Verdana;/*tipo de letra*/
    padding-right: 15px;
    /*margin:auto; /*siempre se quedan los titulos de la barra de navegación centrados*/
    /*border: 2px solid green;*/
}


.sub_nav {/*este engloga al Sub-menu con el sub-sub menu en un desplegable*/
    
    
    /*border: 2px white solid;*/
    position: relative;
    display:inline-flex ; /*transforma los datos de la columna (un h1 y una lista ) en una fila*/
    /*flex-direction: row-reverse; /*indica comportamiento en eje principal: izquierda derecha (puede ponerlo al reves..*/
    font-family:Verdana;/*tipo de letra*/
    /*margin:auto; /*siempre se quedan los titulos de la barra de navegación centrados*/

}

.formtemas {

    margin-top: 17px;
}

.sub_formtemas {

    margin-top: 6px;
}


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


.sub_sub_nav {/*este engloga al Sub-menu con el sub-sub menu en un desplegable*/
    
    
    /*border: 2px white solid;*/
    position: relative;
    display:flex ; /*transforma los datos de la columna (un h1 y una lista ) en una fila*/
    /*flex-direction: row-reverse; /*indica comportamiento en eje principal: izquierda derecha (puede ponerlo al reves..*/
    justify-content: left;
    font-family:Verdana;/*tipo de letra*/
    /*margin:auto; /*siempre se quedan los titulos de la barra de navegación centrados*/

}

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

.nav_h1 { /*Trabajo con el titulo de la izquierda*/
    
    display: flex;
    align-items: center;
    font-size: small;
    color: white;
    justify-content: center;
    /*font-weight:bold;
    width: 200px; /*marca el ancho exterior donde estará contenido el texto*/
    line-height: 120%; /*el alto del texto*/
    text-align: center; /*texto centrado en el espacio definido arriba*/
    margin: 0.75% 1%; /*mueve el margen a la izquierda*/
    /*border:2px solid rgb(255, 47, 47);/*para ver el borde que defino en la siguiente línea*/
    text-decoration: none;
    font-size: 12px;
    max-width: 175px;
} 




/*---------------TRATAMIENTO DE LOS MENUS----------------*/




.nav_menu { /*Cojo todos los links en forma de lista <ul> y los transformo para poder trabajar con ellos*/

    display: flex; /*cojemos la lista definida como "ul" en columna y la transformo en una fila*/
    align-items:left;
    margin:center; /*centro las palabas en medio del menu*/
    list-style:none; /*le quita el subrayado*/
    /*border: 2px solid red;
    /*justify-content: space-between;*/
    margin-right: 0;
}
    

.nav_menu_link {/*Actuamos sobre cada uno de los links*/
    
    /*border:2px solid rgb(255, 47, 47);/*para identificar el borde del botón*/
    color: white; /*color letras menu*/
    font-size: 1.25rem;/*tamaño texto*/
    line-height: 70px;/*se coloca en el centro de esa distancia*/
    
    padding: 14px 2em;
    /*padding: 1.15em 2.3em;/*le damos distancia a cada uno de las palabras, primero arriba abajo y segundo izq, drecha*/
    border-radius:20px; /*esquinas redondeadas del cuadro del menu, para que el hover resalte todo ese recuadro*/
    text-transform:uppercase;/*todo en mayusculas*/
    width: max-content;/*no partas ningun titulo con dobles palabras*/
    text-decoration: none;/*le quitamos el subrayado de los links*/
    transition: all 400ms ease; /*que el efecto hoover (resaltado fondo al pasar el raton) sea suave*/
    font-size: 93%;
    /*font-size: calc(10.8px + (18 - 10.8) * ((100vw - 768px) / (1600 - 768)));
    /*position: relative; /*para que estos menus sean refencia de los siguientes submenus*/
    /*display:block;*/
    /*width: 20px;
    /*color:black;*/
    /*margin:0px 25px;/*margenes, cuando hay dos el primero arriba y a bajo y el segundo izq y der*/
    /*margin:auto; */
}

.nav_menu_link:hover { /*al pasar el raton por encima del menu, éste se convierte en una mano y cambia el color del fondo*/
    
    background: #1abc9c; /*el fondo resaltado rojo*/
}



/*---------------TRATAMIENTO DE LOS SUB MENUS---------------*/
                 
.sub_nav_menu { /*darle estilos a toda la lista del submenú*/

    /*border:2px solid pink; /*hacerle un borde para ver el objeto*/
    font-family: Verdana, Geneva, Tahoma, sans-serif;

    position: absolute; /*hace que el submenú no fuerze al titulo superior y lo separe*/
    z-index: 10001;
    
    list-style: none;
    /****************voy por aquí************/

    display:block;
    
    
    
    
    top: 70px; /*desde arriba le da distancia*/

            /***********************OCULTARIO PARA TRABAJAR***********************/

    visibility: hidden; /*para ocultarlo*/

            /***********************OCULTARIO PARA TRABAJAR***********************/
    
    
    background-color: #34495e; /*fondo*/
    width: 321px;
    /*width: 350px; /*ancho de la columna fijo*/
    padding: 5px 5px; /*separar los textos del cuadro que los contiene*/
    box-shadow: 10px 5px 5px rgb(199, 199, 199); /*se crea una sombra alrededor del submenú*/
    border-radius: 20px; /*le damos a la caja unos bordes redondeados*/
    opacity: 1; /*que no se vea nada del fondo*/
    z-index: 1; /*para que el indice esté por encima del contenido de la pagina*/


    /**************  de 1024***************/
    top: 65px; /*desde arriba le da distancia*/
    width: 150px; /*ancho de la columna fijo*/
    
    padding: 2px 2px; /*separar los textos del cuadro que los contiene*/
    box-shadow: 5px 5px 4px rgb(199, 199, 199); /*se crea una sombra alrededor del submenú*/
    margin-left: 5px;

    /*transition: all 1000ms ease; /*para que se vea el menu de forma progresiva /*NO IBA BIEN, hacia que al cambiar entre los menus se vieran tods¡¡*/
}



 
/*Opciones de .Js para fijar menus al presionar sobre el título*/
/*.sub_nav_menu_visible {visibility: visible;} /*esto es para .js cuando aprietas el boton del menu se queda visible el menu*/
/*.nav_menu_link_fondofijo{background: #1abc9c;} /*esto es para .js cuando aprietas el boton del menu se queda visible el fondo seleccionado*/
/*fin*/


.sub_nav_menu_link {
    
    border-radius: 20px;
    padding: 5px 11px 5px 5px;
    display: block;/*lo convierto en un bloque sin que se parta y así se respetan los espacios*/
    color:white; /*texto blanco*/
    text-decoration: none; /*les quito el subrayado*/
    font-size: 0.9rem;
    margin-top: 0px;
    line-height: 20px;

/*************de 1024****************/
    font-size: 80%;
    padding: 5px 5px;
}

.sub_nav_menu_link_ep 
{
    
    
    
    color:white; /*texto blanco*/
    text-decoration: none; /*les quito el subrayado*/
    
    margin-top: 0px;
    line-height: 20px;

    font-size: 12px;
   
    border-radius: 20px;
  
    margin-left: 1px;
    padding: 4px 8px 4px 8px;
    
    display: flex;/*lo convierto en un bloque sin que se parta y así se respetan los espacios*/
    transform: translateX(-50%);
    left: 55%;
    position: relative;
}



    


.sub_nav_menu_link:hover, .sub_nav_menu_link_ep:hover { /*al pasar el raton por encima se convierte en una mano y cambia el color*/

    background: #1abc9c; /*el fondo resaltado*/
} 
   
                        /*---------------TRATAMIENTO DE LOS SUB SUB MENUS----------------*/

.sub_sub_nav_menu { /*darle estilos a la lista del sub-submenú*/
    
    /*border:2px solid blue; /*hacerle un borde para ver el objeto*/
    
    margin-left: 314px;
    position: absolute; /*hace que el submenú no fuerze al titulo superior y lo separe, además hace posible que los sub sub menus lo cojan como referente y aparezcan al lado a su altura*/
    top: 2px; /*desde arriba le da distancia*/
       
                        /***********************OCULTARIO PARA TRABAJAR***********************/

    list-style: none;

   visibility: hidden; /*para ocultarlo*/
    
    
                        /***********************OCULTARIO PARA TRABAJAR***********************/



    background-color: #34495e; /*fondo*/
    
    
    width:max-content; /*ancho de la columna igual al ancho del texto mas largo*/
    min-width: 310px;
    /*min-width: 300px; /*para que quede bien el primer submenú*/
    
    
    
    padding: 5px 5px; /*separar los textos del cuadro que los contiene*/
    box-shadow: 10px 5px 5px rgb(199, 199, 199); /*se crea una sombra alrededor del submenú*/
    border-radius: 20px; /*le damos a la caja unos bordes redondeados*/
    opacity: 1; /*que no se vea nada del fondo*/
    z-index: 1; /*para que el indice esté por encima del contenido de la pagina*/
    transition: all 350ms ease; /*para que se vea el menu de forma progresiva, si lo quitas no puedes cambiar de un menú a otro porque desaparece antes que llege el ratón /*NO IBA BIEN, hacia que al cambiar entre los menus se vieran tods¡¡*/
    /*de 1024*/
    margin-left: 148px;
    min-width : 0px;
    width: 260px;

}
 
 nav ul li ul li { /* al haber establecido sub_sub_nav_menu como absolute, los submenús aparecen a la altura de cada selección de sub menú*/
    position: relative;
}
 
/******************************************************************************************************************/


 .sub_sub_nav_menu_link {
    
    /*border:2px solid yellow; /*hacerle un borde para ver el objeto*/
    font-size: 80%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    position: relative;
    border-radius: 20px;
    padding: 6px 6px;
    color:white; /*texto blanco*/
    text-decoration: none; /*les quito el subrayado*/
    display: block;/*lo convierto en un bloque sin que se parta y así se respetan los espacios uno debajo de otro*/
    line-height: 18px;

}

.sub_sub_nav_menu_link:hover { /*al pasar el raton por encima se convierte en una mano y cambia el color*/

    background: #1abc9c; /*el fondo resaltado*/
} 

nav ul li:hover > ul{ /* ">ul" solo los directos de ul¡¡, al pasar el raton por encima del menu, se hace visible el submenú (por eso despues de hover hay un "ul", haciendolo visible*/

    visibility: visible; /*que haga visible el submenú*/
    /*opacity: 0.9; /*se sea opaco*/
    /*top: 0px; /*situación desde arriba*/
}

#sub_sub_sub_nav_menu13_ep { /* panel ejercicios prácticos t13: mismo estilo que sub_sub_nav_menu de Facturación */
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 5px;
    background-color: #34495e;
    width: max-content;
    min-width: 200px;
    padding: 5px 5px;
    border-radius: 20px;
    box-shadow: 10px 5px 5px rgb(199, 199, 199);
    width: 220px;
}







.sub_sub_sub_nav_menu { /*como se muestra el sub_sub_sub menu*/

     /*border:2px solid rgb(255, 47, 47); /*hacerle un borde para ver el objeto*/
     background-color: #3c5268; /*fondo*/
     width: 187px;
     /*background-color:red;*/
     border-radius: 20px;
     padding: 5px;
     font-size: 0.875rem;
     margin-left: 15px;
     display: none;
     list-style: none;
     z-index: 1;
     
         
}

.sub_sub_sub_nav_menu_visible {
    
    /*border:2px solid green;*/ 
    display:block;
    
}

/************************ ***********************************************************************************/
.sub_sub_sub_sub_nav_menu { /*como se muestra el sub_sub_sub menu*/

    /*border:2px solid rgb(255, 47, 47); /*hacerle un borde para ver el objeto*/
    background-color: #485e74; /*fondo*/
    width: 165px;
    /*background-color:red;*/
    border-radius: 20px;
    padding: 5px;
    font-size: 0.875rem;
    margin-left: 15px;
    display: none;
    list-style: none;
    
        
}


.sub_sub_sub_sub_nav_menu_visible {
    
    /*border:2px solid green;*/ 
    display:block;
    
}

.sub_sub_sub_sub_sub_nav_menu { /*como se muestra el sub_sub_sub menu*/

    /*border:2px solid rgb(255, 47, 47); /*hacerle un borde para ver el objeto*/
    background-color: #516e8a; /*fondo*/
    width: 145px;
    /*background-color:red;*/
    border-radius: 20px;
    padding: 5px;
    font-size: 0.875rem;
    margin-left: 15px;
    display: none;
    list-style: none;
    
        
}

.sub_sub_sub_sub_sub_nav_menu_visible {
    
    /*border:2px solid green;*/ 
    display:block;
    
}



.sub_sub_sub_nav_menu_link {
    
    /*border:2px solid rgb(255, 47, 47); /*hacerle un borde para ver el objeto*/
    /*position: relative;*/
    font-size: 80%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    
    border-radius: 20px;
    padding: 5px 6px;
    display: block;/*lo convierto en un bloque sin que se parta y así se respetan los espacios*/
    color:white; /*texto blanco*/
    text-decoration: none; /*les quito el subrayado*/
    line-height: 15px;
    
}



.sub_sub_sub_nav_menu_link:hover { /*al pasar el raton por encima se convierte en una mano y cambia el color*/

    background: #1abc9c; /*el fondo resaltado*/
} 





.boton_menu {
    display:none; /*está oculto*/
    background-image: url(../Imagenes/menu.svg);
    background-size: 40px;
    width: 45px;
    height: 45px;
    border-radius: 5px;
    background-color: rgb(69, 141, 123);
    margin: 10px 15px;
    
}


/****************BOTONES DEL CUESTIONARIO CAMBIANDO******************/

.sub_boton_menu {

    width: 19px; 
    height: 19px;
    border-radius: 15px;
    border: none ; /*le quita las sombras al boton*/
    background-color: #34495e;
    background-image: url(../Imagenes/Qnaranja.png);
    background-repeat: no-repeat; /*para que no se repita la imagen*/
    background-size: 16px;
    margin: 6px 2px 0px 4px;
    padding: 8px 20px 0px 0px;
    
} /*boton abrir el questionario*/

.sub_boton_menu_min {

    width: 19px; 
    height: 19px;
    border-radius: 15px;
    border: none ; /*le quita las sombras al boton*/
    background-color: #34495e;
    background-image: url(../Imagenes/qnaranjamin.png);
    background-repeat: no-repeat; /*para que no se repita la imagen*/
    background-size: 16px;
    margin: 6px 2px 0px 4px;
    padding: 4px 20px 0px 0px;
    
} /*boton abrir el questionario*/



.sub_boton_menu:hover {background-image: url(../Imagenes/Qverde.png);} /*le da color al boton a poner el raton encima*/

/*.sub_boton_menu_presionado{

    display: NONE;
} /*abre el menu .js*/

.sub_boton_menu_cambiofondo{

    background-color: red;
}
/****************************************************************/

.sub_sub_boton_menu {

    width: 19px; 
    height: 19px;
    border-radius: 15px;
    border: none ; /*le quita las sombras al boton*/
    background-color: #80aea2;
    background-image: url(../Imagenes/Flechaabajo.png);
    background-repeat: no-repeat; /*para que no se repita la imagen*/
    background-size: 20px;
    margin: 3px 5px 0px 0px;
    padding-right: 18px;
    /*de 1024*/
    background-size: 18px;
    width: 18px;
    height: 18px;
    border-radius: 15px;
    margin: 6px 2px 0px 0px;
        
    
    
} /*boton para expandir el sub_menu*/

.sub_sub_boton_menu:hover {background-color: #458D7B} /*le da color al boton a poner el raton encima*/

.sub_sub_boton_menu_presionado{background-image: url(../Imagenes/Flechaarriba.png);background-color: rgb(184, 214, 195) ;} /*abre el menu .js*/


/****************IMAGEN DE USUARIO EN EL MENU******************/

.imagenusuario {

    width: 50px; 
    height: 50px;
    display: block;
    border-radius: 15px;
    border: none ; /*le quita las sombras al boton*/
    background-color: #34495e;
    background-image: url(../Imagenes/usuarioblanco.png);
    background-repeat: no-repeat; /*para que no se repita la imagen*/
    background-size: 50px;
    margin: 10px 2px 0px 4px;
    padding: 6px 24px 0px 0px;
    
} /*boton abrir el questionario*/

.imagenusuario:hover {background-image: url(../Imagenes/usuarioverde.png);} /*le da color al boton a poner el raton encima*/

.acceso_sin_sesion {
    background-image: url(../Imagenes/usuarioblanco.png) !important;
}
.acceso_sin_sesion:hover {
    background-image: url(../Imagenes/usuarioverde.png) !important;
}

.acceso_con_sesion {
    background-image: url(../Imagenes/usuarioverde.png) !important;
}




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


/*se define como se verá el menu superior incrustado de index.html*/
/*Para compartir el menu superior con otros .html hay que introducirlo con iframe*/
/* ahora definimos como se adaptará ese iframe a los nuevos html*/




/*------------Formato del cuerpo de index.html------------*/

body{
    padding: 100px 20px;
    
    /*background-image: url(/Imagenes/fondonegocio.jpg);*/
    /*background-repeat: no-repeat;*/
    /*background-size:cover;*/
    }


@media  (max-width: 1024px){ /*tamaño ipad horizontalS*/

    
    
    
    

    
    
    
    

    

   
    nav ul li:hover > ul 
    
    { /*como es una tablet, ya no se hace visible al pasar el raton, ahora hay que hacer click*/
    
        visibility:visible ;
        /*display: grid; /*que no haga visible el submenú*/
    }

    /* .headeralaizq{
       left: 50%; /*esto centra el menú, junto con el de abajo. Lo lleva a la mitad de la pagina*/
       /*transform: translate(-50%,0); /*desde la mitad de la pagina (eje X) lo vuelve a su sitio original cada vez que se cambia el tamaño del navegador*/
           
        
   /* } */
    
    
}





/*aqui se define que pasará cuando la pantalla tenga menos espacio que el definido*/
@media  (max-width: 768px) { /*tamaño ipad vertical y aparece el boton del menu*/
    
        
    .header {
        height: 60px; /*que tenga ese alto*/
        border-radius: 0px;
        width: 98%; /*que cuando la pantalla esté por debajo de lo que marca @media, se adapte ocupando el 100%"*/
        left: 0px;
        position:absolute; top:10px; left: 40;/*que quede la barra fija al cerrar el navegador o bajar por la página*/
        border-radius: 20px;
        left: 50%; /*esto centra el menú, junto con el de abajo. Lo lleva a la mitad de la pagina*/
        transform: translate(-50%,0); /*desde la mitad de la pagina (eje X) lo vuelve a su sitio original cada vez que se cambia el tamaño del navegador*/
    }
    
    .nav {font-family:'Courier New', Courier, monospace;/*tipo de letra*/;padding-right: 0px;}
        
    .nav_h1 {/*Titulo de la izquierda*/
        width: 180px;
    } 
            
        
    .nav_menu {/*modificaciones para que el menu pase de estar arriba del todo como una fila, a que sea una columna oculta
        a la derecha*/

        flex-direction: column;/*el menu se transforma en una columna*/
        position: fixed; /*Lo ponemos fijo para poder bajarlo 60px y que no esté encima de menu principal*/
        top: 60px; /*bajarlo para que no ocupe el menu*/
        /*right: -45%; /*lo ocultamos enviandolo a la derecha del todo*/
        display: none;
        background-color: #2c3e50; /*color de fondo*/

        
        width: 40%; /*regula el ancho del menu*/
        /*height: calc(1024px - 60px);/* altura menu, recuerda que el menos de la operación debe estar separado¡¡¡ de los numeros)*/
        
        /*align-items: right; /*poner todo en el centro*/
        padding: 0px 20px;
        
        
        
        transition: 0.6s;
        border-radius: 20px;
            
        
        overflow-x: auto; /*cuando la barra sea mayor que el movil le sacara un scroll*/
        margin-right: 6%;

    }/*Creamos el menu horizontal*/

    .nav_menu_visible {display: block;right: -6%;} /*cuando presionas boton lo hace totalmente visible llevándolo a la derecha del todo*/

    
    .nav_menu_link {

        border: 1px #1abc9c solid;
        line-height: 55px;/*alineación desde arriba*/
        /*display: block;*/
        /*font-size: 16px;*/
        padding: 10px 20px;
        /*margin: 0px 0px;*/
        border-radius: 25px;
        font-size: 100%;
        

    }/*TITULOS FACTURACIÓN, IVA, CONTABILIDAD*/



    .sub_nav_menu { /*darle estilos a toda la lista del submenú*/
    
        position:relative;
        /*display: contents;*/
        display: none;
        /*visibility: visible;*/
        /*background-color: red;*/
        /*border:2px solid rgb(255, 47, 47); /*hacerle un borde para ver el objeto*/
        top:  5px ;/*desde arriba le da distancia*/
        width: 100%; /*ancho de la columna fijo*/
        padding: 2px 2px; /*separar los textos del cuadro que los contiene*/
        box-shadow: 2px 2px 2px rgb(199, 199, 199); /*se crea una sombra alrededor del submenú*/
        transition: all 350ms ease; /*para que se vea el menu de forma progresiva, si lo quitas no puedes cambiar de un menú a otro porque desaparece antes que llege el ratón /*NO IBA BIEN, hacia que al cambiar entre los menus se vieran tods¡¡*/
        margin-bottom: 10px; /*para que el submenú se aparte de FACTURACIÓN, IVA...*/   
    }
    
    .sub_nav_menu_facturacion_visible {

        display: block;
        visibility: visible;
    } /*se hace visible el menu de facturación únicamente*/

    .sub_nav_menu_IVA_visible {

        display: block;
        visibility: visible;
    } /*se hace visible el menu de IVA únicamente*/

    .sub_nav_menu_contabilidad_visible {

        display: block;
        visibility: visible;
    } /*se hace visible el menu de contabilidad únicamente*/

    .sub_nav_menu_perfil_visible {

        display: grid;
        visibility: visible;
    } 

    .sub_nav_menu_link {
    
        
        /*border:2px solid rgb(255, 47, 47); /*hacerle un borde para ver el objeto*/
        font-size: 70%;
        padding: 5px 5px;
        /*font-size: 12px;*/ /*tamaño del texto*/  
    }

    





    

    .sub_sub_nav_menu { /*darle estilos a la lista del sub-submenú*/
    
        /*border:2px solid blue; /*hacerle un borde para ver el objeto*/
        display: none; /*que no aparezcan los sub_sub_menus en una tablet inclinada*/
        /*margin-left: -190px;
        /*font-size: 12px;
        /*width: 100px;
        /*padding: 5px 5px; /*separar los textos del cuadro que los contiene*/
        /*box-shadow: -2px -2px 4px rgb(199, 199, 199); /*se crea una sombra alrededor del submenú*/
    }
        
        
    .boton_menu{

        display: block;  
        margin: 6px 15px;
    }/*el boton se hace visible al hacerlo pequeño*/
       
    

    .boton_menu_cambiocolorfondo {
        background-color: rgb(119, 210, 151);
                    
    } /*al pasar el raton por encima se convierte en una mano y cambia el color*/

    .imagenusuario {

        width: 37px; 
        height: 37px;
        background-size: 37px;
        margin: 0px 2px 8px 4px;
        
        
    } /*boton abrir el questionario*/

    .sub_sub_sub_nav_menu { /*como se muestra el sub_sub_sub menu*/

        /*border:2px solid rgb(255, 47, 47); /*hacerle un borde para ver el objeto*/
        
        border-radius: 20px;
        padding: 5px;
        
        margin-left: 5px;
        width: 150px;
        /*display: none;*/
    }

    .formtemas {margin-top: 9px;}
    .sub_boton_menu {background-size: 15px;padding: 4px 20px 0px 0px;}


    .sub_nav_menu_link_ep {display: none;}

    
.anagrama 
{

    
    background-image: url(../Imagenes/favicon_anagrama_WA.png);
    width: 50px;
    height: 45px;
    background-size: 47px;
    margin: 9px 2px 0px 18px;
    
    
    
} /*boton abrir el questionario*/



}




@media (max-width: 500px){ /*cuando la anchura sea inferior a 500 px*/
    
        
    .header{
            
        height: 60px; /*que tenga ese alto*/
        border-radius: 0px;
        width: 100%;
        left: 0px;
        position:absolute; top:10px; left: 40;/*que quede la barra fija al cerrar el navegador o bajar por la página*/
        border-radius: 25px;
        left: 50%; /*esto centra el menú, junto con el de abajo. Lo lleva a la mitad de la pagina*/
        transform: translate(-50%,0); /*desde la mitad de la pagina (eje X) lo vuelve a su sitio original cada vez que se cambia el tamaño del navegador*/
            
    }
    .nav {font-family:'Courier New', Courier, monospace;/*tipo de letra*/}
        
   
            
        
    .nav_menu { 

        flex-direction: column;/*el menu se transforma en una columna*/
        position: fixed; /*Lo ponemos fijo para poder bajarlo 60px y que no esté encima de menu principal*/
        top: 60px; /*bajarlo para que no ocupe el menu*/

        display:none;
        /*right: -80%; /*lo ocultamos enviandolo a la derecha del todo*/
        
        
        background-color: #2c3e50; /*color de fondo*/

        
        /*width: 67%; /*regula el ancho del menu*/
        /*height: calc(750px - 60px);/* altura menu, recuerda que el menos de la operación debe estar separado¡¡¡ de los numeros)*/
        
        align-items: right; /*poner todo en el centro*/
        padding: 10px 10px;
                        
        transition: 0.6s;
        border-radius: 25px;
               
        overflow-x: auto; /*cuando la barra sea mayor que el movil le sacara un scroll*/
        width: 45%;
        
    }/*Creamos el menu horizontal*/

    
    .nav_menu_visible { display:block;right: -5%;}


    .nav_menu_link {

        border: 1px #1abc9c solid;
        
        line-height: 45px;/*alineación desde arriba*/
        /*font-size: 18px;*/
        padding: 8px 8px;
        border-radius: 18px;
        
        
        
        
           
    }/*afecta a INICIO, FACTURACIÓN, IVA, CONTABILIDAD.
    Hacemos que el menu horizontal que acabamos de crear empieze debajo de la barra de menu*/

    .sub_boton_menu {

        width: 18px; 
        height: 18px;
        border-radius: 12px;
        border: none ; /*le quita las sombras al boton*/
        background-size: 16px;
        margin: 4px 2px 0px 2px;
        
        
        
    } /*boton abrir el questionario*/

    .sub_nav_menu { 
                   
        position:relative;
        /*display: none;*/
        top:  0px ;/*desde arriba le da distancia*/
        /*width: 100%; /*ancho de la columna fijo*/
        padding: 5px 5px; /*separar los textos del cuadro que los contiene*/
        box-shadow: 2px 2px 2px rgb(199, 199, 199); /*se crea una sombra alrededor del submenú*/
        transition: all 350ms ease; /*para que se vea el menu de forma progresiva, si lo quitas no puedes cambiar de un menú a otro porque desaparece antes que llege el ratón /*NO IBA BIEN, hacia que al cambiar entre los menus se vieran tods¡¡*/
        margin-bottom: 5px; /*para que el submenú se aparte de FACTURACIÓN, IVA...*/
        
           
    } /*esto afecta a cada uno de los submenus de FACTURACIÓN, IVA, CONTABILIDAD haciendolos invisibles y después uno a uno se van haciendo visibles con .Js*/

    .sub_nav_menu_facturacion_visible {

        display: block;
        visibility: visible;
    } /*se hace visible el menu de facturación únicamente*/

    .sub_nav_menu_IVA_visible {

        display: block;
        visibility: visible;
    } /*se hace visible el menu de IVA únicamente*/




    .sub_nav_menu_link {
    
              
        font-size: 65%;
        padding: 5px 5px;
        /*font-size: 10px;*/ /*tamaño del texto*/  
        
    } /*texto dentro de los cuadros de los submenus*/

    .sub_sub_nav_menu { /*darle estilos a la lista del sub-submenú*/
    
        display: none; /*que no aparezcan los sub_sub_menus en una tablet inclinada*/
        
    }
        
        
    .boton_menu{

        display: block;  
        margin: 6px 15px;
    }/*el boton se hace visible al hacerlo pequeño*/
     
    .imagenusuario {

        
        margin: 0px 2px 0px 4px;


    } /*boton abrir el questionario*/
}


/*---------------BOTÓN LUPA / BUSCADOR---------------*/

.li_boton_lupa {
    list-style: none;
    display: flex;
    align-items: center;
    padding: 0;
}

.boton_lupa {
    display: block;
    border: none;
    cursor: pointer;
    background-color: transparent;
    background-image: url(../Imagenes/lupa.png);
    background-repeat: no-repeat;
    background-size: 36px;
    background-position: center;
    width: 60px;
    height: 46px;
    border-radius: 20px;
    transition: all 400ms ease;
}

.boton_lupa:hover {
    background-color: #1abc9c;
}

.boton_lupa_activo {
    background-color: #1abc9c;
}

.barra_buscar {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background-color: #34495e;
    padding: 10px 14px 14px;
    border-radius: 0 0 18px 18px;
    z-index: 998;
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
    flex-direction: column;
    gap: 0;
}

.barra_buscar_visible {
    display: flex;
}

.header_buscar_abierto {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.barra_buscar_fila {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* ── Tabla de resultados ──────────────────────────────────────────── */
.resultados_buscar {
    width: 100%;
    margin-top: 10px;
}

.tabla_resultados {
    width: 100%;
    border-collapse: collapse;
    font-family: Verdana, sans-serif;
    background-color: transparent !important;
    font-size: 12px;
    color: #ecf0f1;
}

.tabla_resultados thead tr {
    background-color: rgba(0,0,0,0.25);
}

.tabla_resultados th {
    padding: 6px 10px;
    text-align: center;
    font-weight: bold;
    background-color: rgba(0,0,0,0.25) !important;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: #95a5a6;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.tabla_resultados td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    vertical-align: middle;
    background-color: transparent !important;
}

.fila_resultado {
    cursor: pointer;
    transition: background-color 200ms ease;
}

.fila_resultado:hover {
    background-color: rgba(26,188,156,0.2);
}

.fila_resultado:last-child td {
    border-bottom: none;
}

.badge_tema {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap;
}

.badge_facturacion { background-color: #2980b9; color: #fff; }
.badge_iva         { background-color: #8e44ad; color: #fff; }
.badge_contabilidad{ background-color: #27ae60; color: #fff; }

.fragmento_resultado {
    font-size: 11px;
    color: #bdc3c7;
    line-height: 1.45;
    max-width: 340px;
    text-align: justify;
}
.fragmento_resultado strong {
    color: #f0f4f8;
    font-weight: 700;
}

.resaltar {
    background-color: #f39c12;
    color: #2c3e50;
    border-radius: 2px;
    padding: 0 2px;
}

.resultados_vacio {
    color: #95a5a6;
    font-size: 12px;
    font-family: Verdana, sans-serif;
    padding: 8px 4px;
    margin: 0;
}

/* ── Historial de búsquedas ───────────────────────────────────────── */
.historial_lista {
    padding: 4px 0;
}

.historial_item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-family: Verdana, sans-serif;
    font-size: 13px;
    color: #ecf0f1;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 180ms ease;
}

.historial_item:hover {
    background-color: rgba(26,188,156,0.2);
}

.historial_icono {
    font-size: 13px;
    opacity: 0.6;
}

.input_buscar {
    padding: 8px 14px;
    border-radius: 20px;
    border: none;
    font-size: 14px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    width: 230px;
    outline: none;
    background-color: #f0f4f8;
    color: #2c3e50;
    -webkit-text-fill-color: #2c3e50;
}

.input_buscar:-webkit-autofill,
.input_buscar:-webkit-autofill:focus {
    -webkit-text-fill-color: #2c3e50 !important;
    -webkit-box-shadow: 0 0 0 30px #f0f4f8 inset !important;
}

.input_buscar::placeholder {
    color: #8fa3b1;
}

.boton_buscar_nav {
    background-color: #1abc9c;
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 10px;
    transition: background-color 300ms ease;
    flex-shrink: 0;
}

.boton_buscar_nav:hover {
    background-color: #16a085;
}

.boton_cerrar_buscar {
    background: transparent;
    color: #cdd6dd;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
    transition: color 300ms ease;
    flex-shrink: 0;
}

.boton_cerrar_buscar:hover {
    color: #1abc9c;
}

/* ── Paginación resultados búsqueda ──────────────────────────────── */
#paginacion_buscar {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.btn_pagina {
    background: transparent;
    border: 1px solid #4a5568;
    color: #8899aa;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    cursor: pointer;
    transition: background 200ms, color 200ms, border-color 200ms;
    white-space: nowrap;
}

.btn_pagina:hover {
    border-color: #1abc9c;
    color: #1abc9c;
}

.btn_pagina_activa {
    background: #1abc9c;
    border-color: #1abc9c;
    color: #ffffff;
}

@media (max-width: 768px) {
    .boton_lupa {
        display: none;
    }

    .barra_buscar {
        display: none !important;
    }
}

@media (max-width: 500px) {
    .boton_lupa {
        display: none;
    }

    .barra_buscar {
        display: none !important;
    }
}

/* ===== BANNER COOKIES RGPD ===== */
#cookie_banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99990;
    background: #1e2830;
    border-top: 2px solid #1abc9c;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 24px;
    font-family: sans-serif;
    font-size: 13px;
    color: #bdc3c7;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.4);
}

#cookie_banner_texto {
    margin: 0;
    line-height: 1.5;
    flex: 1;
}

#cookie_banner_link {
    color: #1abc9c;
    text-decoration: underline;
}

#cookie_banner_btn {
    flex-shrink: 0;
    background: #1abc9c;
    color: #1a1e23;
    border: none;
    border-radius: 4px;
    padding: 7px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

#cookie_banner_btn:hover {
    background: #16a085;
}

@media (max-width: 600px) {
    #cookie_banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 16px;
    }
}