/*-----------------------------------------------------------
  Envoltorio xa q la barra de nav esté en el centro de la V
-----------------------------------------------------------*/
.navbar-wrapper 
{
  position: fixed;  
  
  justify-content: center; /* Centra la barra */
  
  z-index: 1000;
  background:none;
  
  width: 100%;    
}






/********************************************************
    Barra de navegación q se colapsa en un botón
********************************************************/

.navbar 
{	
  background-color: #333;
  border-radius: 8px;
  
  padding: 10px 20px;
  
  display: flex;

  height:70px;
  width:70%;  		  
  
  
  justify-content: space-between;
  align-items: center;
}


	/* con esto digo q el menu colapsado no se vea */
	.menu-toggle {        
        display: none;
     }



    /********************************
     Estilos xa el menú de cabecera
    *********************************/	
    .menu  /*está dentro de la "nav" o barra de navegación, donde pongo atribs como su altura*/
    {
        transition: all 0.5s ease; /* Transición suave */

        
        background-image: url('../img/bg/bgUp.png');
        background-size:auto;  /* Covers the whole div */	
        background-position: center; 
        background-repeat:repeat;


        border-radius: var(--THEME-DEFAULT-BORDER-RADIUS);
        border-color: var(--BLUE2);
        
        /*top right bottom left*/		
        border-style:outset;  /*dashed ridge ridge dashed;/*	dotted	dashed	solid double groove ridge inset	outset	none	hidden*/
        border-width: 3px;		

        
        box-shadow: 10px 5px 25px 5px var(--BLUE3);
        /*
        The component of each <shadow> are interpreted as follows:
            1st <length> - Specifies the horizontal offset  of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.
            2nd <length> - Specifies the vertical offset  of the shadow. A positive value offsets the shadow down, a negative one up.
            3rd <length [0,∞]> - Specifies the blur radius. Negative values are invalid. If the blur value is zero, the shadow’s edge is sharp. Otherwise, the larger the value, the more the shadow’s edge is blurred. See Shadow Blurring, below.
            4th <length> - Specifies the spread distance. Positive values cause the shadow to expand in all directions by the specified radius. Negative values cause the shadow to contract. See Shadow Shape, below.
                        Note that for inner shadows, expanding the shadow (creating more shadow area) means contracting the shadow’s perimeter shape.
            color - Specifies the color of the shadow. If the color is absent, it defaults to currentColor.
            inset- lo pone por dentro - If present, the inset keyword changes the drop shadow from an outer box-shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner box-shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).
        */
    }


    .menu ul{
        list-style:none;		        		
    }    	
	
	.nav-links /*enlaces completos = icono + texto*/
	{
	  list-style: none;
	  display: flex;
	  gap: 20px; /*Espacio entre los items del barra de navegación*/
	  
	  padding-top:0;	  
	  margin-top:5px;
	}
	
	
	.menu a.current 
	{        
        border-width: var(--PADDING_OPS_MENU) !important;			        
		color:yellow;
    }    
    
    .menu a.current:hover 
    {         
        border-width: 0px !important;			             
        border-radius: 90px;            
        transition: background-color 0.3s ease-in-out;                         		
		color:orange;
    }

	
	
	
	
	/****************************************************
		Estilo gral de los links no seleccionados 
		(salvo el color, q lo pongo abajo)			
	 *****************************************************/
    .menu a, .menu a.noSelected1, .menu a.noSelected2, .menu a.noSelected3
	{
        font-family: var(--THEME-DEFAULT-FONT6);
        font-size: 1.8em !important;
  
        font-weight: 600;
        text-decoration:none;
        text-transform: capitalize; /*text-transform: uppercase;*/        
        
        /*IMPOR!! esto es xa poder poner txt a la dcha y luego manejarlo*/
        display: flex; 
        flex-direction: row; 
        /*align-items: baseline;        */
		align-items: center;        
        padding:var(--PADDING_OPS_MENU);		
     }
	 
     
     /*Borde q pongo a los enlaces al seleccionarlos*/
    .menu a.noSelected1:hover, .menu a.noSelected2:hover
    {	
		border: 2px dotted yellow !important; 			        		
		border-radius: 	var(--THEME-DEFAULT-BORDER-RADIUS2)  !important;
		box-shadow: 0 0 var(--PADDING_OPS_MENU) 4px yellow;
    }
	
	
	
	 /*Colores de los iconos + txt*/						 
	 .menu a.noSelected1, .customNavIcon1 {		 
		 color:var(--COLOR_ICONOMENU1) !important;					
	 } 	 
	 
	 .menu a.noSelected1:hover, .customNavIcon1:hover{/*xa el icono q lleva a la ppal del subdominio*/    
		color:var(--COLOR_ICONOMENU1_HOVER) !important;							
     }
	 
	 .menu a.noSelected1:hover{		 		
		 background-color:var(--BGCOLOR_SELECTEDMENU1);
	 }
	 
	 
	 .menu a.noSelected2, .customNavIcon2 {		 
		 color:var(--COLOR_ICONOMENU2) !important;					
	 } 	 
	 
	 .menu a.noSelected2:hover, .customNavIcon2:hover{/*xa el icono q lleva a la ppal del subdominio*/    
		color:var(--COLOR_ICONOMENU2_HOVER) !important;							
     }
	 
	 .menu a.noSelected2:hover{		 		 
		 background-color:var(--BGCOLOR_SELECTEDMENU2);
	 }
	 
	     

	/*
		Estilos xa los enlaces de menú q quiero simples: 
		sin borde y solo cambio de color o letra
	*/	
	
    .menu a.noSelected3:hover, .menu a.noSelected3.txtIcono:hover{			
	
		color: yellow !important;
		text-transform: italic;
    }
	
	.txtIcono:hover{				
		color: yellow !important;
		text-transform: italic;
    }
    
	

    
	
	
	/*Dentro de los enlaces del menú tengo 2 partes:
		icono (lo cojo de fontAwesome) y personalizo abajo
		txtIcono
		
	 Y tengo 4 tipos de iconos:
        -normal  (el .icono simple - arriba)
        -home    (link q lleva a javiemcriado.es)        
        -current (pag actual)
        -mail    (fa-envelope))
        
     */     
    
	.customNavIcon1, 	.customNavIcon2{
	  font-size: 40px; 	
	}


	
	/**Mail de la barra de navegación*/
	
	.customNavIcon3  {
	  font-size: 45px; 	
	  color: #F6F8AA !important;							  
	}	

	.customNavIcon3:hover{
        color:orange !important;						                  	
	}
	
	
	.menu a.mail
    {        
        padding-top:0px;		
    }
	
	.menu a.mail:hover
    {
        border-width: 0px !important;			
    }
	
	
	


	

	
	
	.fa, .fab
	{	
		/*OJO!! esto no hace el icono + grande...hace el padding + grande... x lo q lo quito
		width: 75px;         height: 50px; */
		
		
		text-shadow:0px 0px 0px 0px var(--BLUE1);		
	}
	
	.fa:hover, .fab:hover
	{	
		text-shadow:1px 1px 1px var(--BLUE1);		
		
	}
	/*
	i .fa, i.fa-fw, i.fa-envelope{
        margin-top:5px;
    }*/
	
    /* x si quieres bajar o subir el txt respecto al icono*/
	.txtIcono{        
        margin-left: 10px;
		font-size:17px;
    }
	
	
	
	
	/*Esto es solo xa el home */
	.icono, .iconoHome{
		width: 50px; 
        height: 50px; 
        margin-right: 10px;		
	}
     
    .imgHome:hover{               
        border-width: 0px;
        border-radius: 60px;    
        transition: box-shadow 0.3s ease-in-out;                 
        box-shadow: 0 0 12px 3px yellow;
    }        
    
	
	
	
	
	
	
	
	
	
	
/**********************************************

	Media query xa pantallas medias y peqs  
		
**********************************************/
	
    @media (max-width: 1500px) 
    {	            
            
            .menu a{
                font-size: 1.3em !important;
				color:white;
             }
             
            .txtIcono{        
                 margin-top: 12px;
				 color:white;
            }
               
            /*Dentro de los enlaces del menú tengo 2 partes:*/
            .icono{
                 width: 40px; 
                 height: 40px; 
                 margin-right: 2px;
            }
            
            
            i .fab, i .fa, i.fa-fw, i.fa-envelope{
                font-size: 35px;
				color:white;
            }
            
            

            
            
    }
        
	
	
	
    /*Esto tengo q ponerlo xq si hace peq una vez cargado cab.php no carga luego cabMobile.php*/
    @media (max-width: 1024px) 
    {		
            .menu
            {
                 margin: 0 auto;	
                 width:80%;		
            }

            .menu a{
                font-size: 1.2em !important;
				color:white;
             }
             
            .txtIcono{        
                 margin-top: 15px;
				 color:white;
            }            
            
            
        
               
            /*Dentro de los enlaces del menú tengo 2 partes:*/
            .icono{
                 width: 35px; 
                 height: 35px; 
                 margin-right: 2px;
            }
            
            
            i .fab, i .fa, i.fa-fw, i.fa-envelope{
                font-size: 25px;
				color:white;
            }
            

           
    }
	



@media (max-width: 768px) {
	
    
	.navbar 
    {   
      top: -10px; /* Distancia del menú desde la parte superior */      
    }



    /*Botón*/
    .menu-toggle {
      display: block;
      
      
      width: 60px;
      font-size: 25px;

      color:#E8F7FF;
      background-color:var(--BLUE3);

      border-color: var(--BLUE4);
      cursor: pointer;
    }    
    
    .menu
    {		
        background-color:transparent;
        background-image:none;
        border:none;   
        box-shadow:none;
        width: 200px;        
        position: fixed;
        left:-50px;
    }
	
	
	
    

/*Pos de los enlaces dentro del menú desplegable*/
    .nav-links 
    {
      
      width: 100%;
	  color:white;
      background-color:var(--BLUE3);

      font-size: 12px;
      padding: 10px;
      margin:10px;
      
      display:none;
      position: absolute;
      top: 50px;    left: 50px;

     
    }

    .nav-links.show {
      display: flex;
    }
	
	
    
    .menu a, .menu a.noSelected
    {      
        display: flex; 
        flex-direction: row; 
        align-items: flex-start;          
		color: #FFF !important;						
    }    
    
    
    .menu a:hover, .menu a.current,  menu a.current:hover {
        background-color:transparent !important;                        
        color: #FF0 !important;						
    }        
	
     
     /*Borde q pongo a los enlaces al seleccionarlos*/
    .menu a.noSelected:hover
    {	
		color: #FF0 !important;						
    }    
	
    
	 /*
	 Colores de los iconos + txt						 
	 .menu a.noSelected1, .customNavIcon1 {		 
		 color:var(--COLOR_ICONOMENU1) !important;					
	 } 	 
	 
	 .menu a.noSelected1:hover, .customNavIcon1:hover{/*xa el icono q lleva a la ppal del subdominio*/    
		/*color:var(--COLOR_ICONOMENU1_HOVER) !important;							
     }
	 
	 .menu a.noSelected1:hover{		 		
		 background-color:var(--BGCOLOR_SELECTEDMENU1);
	 }
	 
	 
	 .menu a.noSelected2, .customNavIcon2 {		 
		 color:var(--COLOR_ICONOMENU2) !important;					
	 } 	 
	 
	 .menu a.noSelected2:hover, .customNavIcon2:hover{/*xa el icono q lleva a la ppal del subdominio*/    
		/*color:var(--COLOR_ICONOMENU2_HOVER) !important;							
     }
	 
	 .menu a.noSelected2:hover{		 		 
		 background-color:var(--BGCOLOR_SELECTEDMENU2);
	 }
	 */
	     

	

    
	
	
	/*Dentro de los enlaces del menú tengo 2 partes:
		icono (lo cojo de fontAwesome) y personalizo abajo
		txtIcono
		
	 Y tengo 4 tipos de iconos:
        -normal  (el .icono simple - arriba)
        -home    (link q lleva a javiemcriado.es)        
        -current (pag actual)
        -mail    (fa-envelope))
        
     */     
    
	.customNavIcon1, 	.customNavIcon2{
	  font-size: 40px; 	
	}


	.menu a.mail
    {        
        padding-top:0px;/*var(--PADDING_OPS_MENU);*/

    }
	
	.menu a.mail:hover
    {
        border-width: 0px !important;			

        /*background-color:transparent !important;						                  
        /*padding-top:30px;/*var(--PADDING_OPS_MENU);*/		
    }
	
	/*
	.customNavIcon3  {
	  font-size: 45px; 	
	  color: #F6F8AA !important;							  
	}	

	.customNavIcon3:hover{
        color: #F33 !important;						                  	
	}
*/

	

	
	
	.fa, .fab
	{	
		/*OJO!! esto no hace el icono + grande...hace el padding + grande... x lo q lo quito
		width: 75px;         height: 50px; */
		
		
		text-shadow:0px 0px 0px 0px var(--BLUE1);		
	}
	
	.fa:hover, .fab:hover
	{	
		text-shadow:1px 1px 1px var(--BLUE1);		
		
	}
	/*
	i .fa, i.fa-fw, i.fa-envelope{
        margin-top:5px;
    }*/
	
    /* x si quieres bajar o subir el txt respecto al icono*/
	.txtIcono{        
        margin-left: 10px;
    }
	
	
	
	
	/*Esto es solo xa el home */
	.iconoHome{
		width: 50px; 
        height: 50px; 
        margin-right: 10px;		
	}
     
    .imgHome:hover{               
        border-width: 0px;
        border-radius: 60px;    
        transition: box-shadow 0.3s ease-in-out;                 
        box-shadow: 0 0 12px 3px yellow;
    }        
	
	
	

}