/* Fichero de css propias de la plantilla cassiopeia_filomena */
/* _________COLORES_____________ */
:root {
    --cassiopeia-color-primary: #2a4a82;
    --cassiopeia-color-link: #30638d;
    --cassiopeia-color-hover: #cf542b;
    --color-nombre-sitio: var(--cassiopeia-color-primary);
    --color-fondo-mainmenu: var(--cassiopeia-color-primary);
    --color-activo-mainmenu: steelblue;
    --color-resaltado-menu: #e9ecef;
    --color-activo-menulateral: #dce8f2;

}
  
.micolorprimario {
    color: var(--cassiopeia-color-primary);
}

.micolorhover {
    color: var(--cassiopeia-color-hover);
}

.micolorlink {
    color: var(--cassiopeia-color-link);
}
.micolorrojo {
 color: #9c2730;
}
.page-header{
    color: var(--cassiopeia-color-primary);
}
.card-header {
    color: var(--cassiopeia-color-primary);
}

h1, h2, h3, h4, h5 {
    color: var(--cassiopeia-color-primary);
}
li::marker {
    color: var(--cassiopeia-color-primary);
}
/* _________COLORES_____________FIN */

/* _________TIPO ESTILO LISTAS_____________*/
ul {
 list-style-type: square;	
}
/* _________TIPO ESTILO LISTAS_____________FIN*/


/* _________LINKS_____________*/
a:not([class]) {
text-decoration: none !important;	
}
a {
text-decoration: none !important;	
}
a:hover {
text-decoration: none !important;	
}
/* _________LINKS____________FIN*/

/* _________CABECERA_____________ */

.container-header{    /*Imagen background isobaras*/
 background-image: url(../images/fondo-isobaras_header.jpg);
 /* background-color: #ffffff; */
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}

.container-header .navbar-brand {
 padding-top: .7rem;     /*Altura en navbar-brand*/
 padding-bottom: .7rem;
 width: calc(90% - 8rem);    /*ancho de navbar para ajustarlo con posicion logo-right*/
}
.container-header .navbar-brand img { /*Ajuste de tamaño de LOGO*/
 width:11rem;   
 min-width: 5rem;
}
.container-header .navbar-brand a{ /*Se elimina Subrayado en enlace LOGO*/
 text-decoration: none;
}

.container-header .site-description { /*Nombre del sitio*/
 font-size: 2rem;
 /* display: inline-block; */
 /* font-weight: bold;  */
 color: var(--color-nombre-sitio);
 vertical-align: middle;
 width: inherit;
 text-align: center;
 white-space: nowrap;
}
.container-header .container-logo-right{ /*Ajuste de tamaño-comportamiento de posicion logo-right*/
 display: flex;
 position: relative;
 width: inherit;
 align-items: center;
 justify-content: flex-end;
}

.container-header .colormargin{
 background-color: var(--color-fondo-mainmenu); /*El color de la barra de menu ocupa todo el ancho*/
}
.container-header .container-nav{
 padding: .2em; /*Se reduce padding predefinido*/
}
.container-header nav {
 margin-top: 0; /* Se pone a 0 margin-top de nav*/
}

.container-header .container-search {
 margin-top: .1em;  /*Se reducen margenes del cointainer-search*/
 margin-bottom: .1em;
}

.searchbutton{ /*para gestionar aspecto del boton search*/
 background-color: transparent;
 border-color:white;
 margin-bottom: 0;
}
.searchbutton:hover{
 background-color: #6571a3;
 border-color:white;
}

@media (max-width:576px) {
 .container-header .navbar-brand {
     width: calc(85% - 3rem)  /*ajuste de navbar para pantallas pequeñas*/
 }
 .container-header .navbar-brand img {  /*Para pantallas <sm logo reducido*/
     width:5rem;   
 }
 .container-header .site-description { 
     font-size: 1.7rem;    /*letra del nombre del sitio reducida para pant peque*/
 }
 .container-header .container-logo-right {    
     align-items: flex-start; /*En pantallas pequeñas el login se sitúa arriba para no interferir con title*/        
 }
 
}

@media (max-width:768px) {
 .container-header .container-nav .container-search, .container-header .container-nav nav {
     margin-top: 0;
 }
 .container-header .container-search{
     margin-bottom: 0;
 }
 .container-header .container-nav {
     padding: .3em;
 }  
}

/*Alineamiento vertical Main menu */
header div.container-nav ul.mod-menu {
    align-items: center !important;
  }


/*_________FIN CABECERA_____________ */

/*____ botones para menus_____*/
a.itemmenuboton{
 font-size: 1.2em;
 background-color: #ffffff;
 color: var(--cassiopeia-color-primary);
 border: 1px solid var(--cassiopeia-color-primary);
 border-radius: 5px;
 padding:8px 5px;
 text-decoration: none;
}
a.itemmenuboton:hover{
 background-color: var(--cassiopeia-color-primary);
 color: #ffffff;
}
/*____ botones para menus___FIN_____*/

/* Para crear sombra en los menus*/
/* menu principal*/

/* Color para sobreado del menú del elemento activo */
.metismenu.mod-menu > li.metismenu-item.level-1.active{  
    background-color: var(--color-activo-mainmenu);
   border-radius: 5px;
 }


 .container-header .metismenu>li.active>a:after{
   background: none;
 }
 .container-header .metismenu>li.active>button:before{background: none;}
 
 /* Quitando recuadrito punteado al clicar en elemento de menú */
 .metismenu.mod-menu .metismenu-item>a:focus, .metismenu.mod-menu .metismenu-item>button:focus {
     outline:none;
 }

/* Sombreado de los elementos del menú principal */
.metismenu.mod-menu .metismenu-item>ul {
 box-shadow: 0 0 0.5em rgb(0 0 0 / 70%);
}
.metismenu.mod-menu .mm-collapse>li.parent>ul {
  box-shadow: 0 0 0.5em rgb(0 0 0 / 40%);
}

/* menu lateral */
.sidebar-left h3.card-header {
 color: var(--cassiopeia-color-primary) !important;
}
/*____ crear sombra en menus___FIN_____*/


/*____________Efecto sombreado menús ppal, izquierdo, derecho___________*/



.metismenu.mod-menu .metismenu-item:not(.level-2) > ul > li:hover {
    color: var(--cassiopeia-color-hover) ;  
    background-color: var(--color-resaltado-menu);
    cursor:pointer;
}

.metismenu.mod-menu .metismenu-item:not(.level-1) > ul,
.metismenu.mod-menu .metismenu-item:not(.level-2) > ul {
 list-style: none;
 padding: 0;
 border: 1px solid #f7f7f7  ; 
 border-radius:5px;
 box-shadow: 0 0 0.5em rgb(0 0 0 / 40%); 
 background-color: white;
} 


/*Sub-menú principal */
.metismenu.mod-menu .mm-collapse>li.parent>ul {
 background-color: white;
}
.metismenu.mod-menu .mm-collapse>li.parent>ul > li:hover {
  background-color: var(--color-resaltado-menu); 
} 

/* Clase para cambiar el estilo de los heading */
.estilocabecera li.nav-item .nav-header,.estilocabecera li.nav-item .divider {
    color: var(--secondary)!important;
    font-style: italic!important;
   
  }

/*__________Menu Izquierdo______________*/


/* Que se sombree el elemento del menú activo (en todos los estilos de menús laterales) */
.sidebar-left .mod-menu > li.nav-item.current.active {
    background-color: var(--color-activo-menulateral);
    color: white;
   }
.sidebar-left .mod-menu > li.nav-item.current {
    background-color: var(--color-activo-menulateral);
    color: white;
   }
.sidebar-left .mod-menu > li.metismenu-item.current.active {
    background-color: var(--color-activo-menulateral);
    color: white;
   }
.sidebar-left .mod-menu > li.metismenu-item.current {
    background-color: var(--color-activo-menulateral);
    color: white;
   }
.sidebar-left .mod-menu >li > ul > li.nav-item.current {
    background-color: var(--color-activo-menulateral);
    color: white;
   }
/* Que sea clicable todo lo coloreado, no solo el texto */
.sidebar-left .mod-menu > li.nav-item > a{
    display:block;
  }
.sidebar-left .mod-menu > li > ul > li.nav-item > a{
    display:block;
  }
.sidebar-left .mod-menu > li.metismenu-item > a {
    display:block;
  }
/*--------*/
.sidebar-left .metismenu li.parent > ul {
 list-style: none;
 padding: 0;
}

.sidebar-left .metismenu.mod-menu .mm-collapse > li  {
   display: block;      
   text-decoration: none;
     
}
.sidebar-left .metismenu.mod-menu > li:hover,
.sidebar-left .metismenu.mod-menu > li:active ,
.sidebar-left .metismenu.mod-menu > li:focus{

   color: var(--cassiopeia-color-hover); 
   background-color: var(--color-resaltado-menu);
   border:none;
 
}
.sidebar-left .metismenu.mod-menu .mm-collapse > li  a:hover, 
.sidebar-left .metismenu.mod-menu .mm-collapse > li  a:active,
.sidebar-left .metismenu.mod-menu .mm-collapse > li  a:focus {
   color: var(--cassiopeia-color-hover);
     
}
/* .container-sidebar-left .sidebar-left .card-body  {
 padding: 0;

} */
.container-sidebar-left .sidebar-left .card-body ul.mod-menu {
    flex: 1 1 auto;
}
.sidebar-left  .nav > li.nav-item {
 padding-left: 10px; 
  
}
.sidebar-left  .nav > li.nav-item .nav-header {
 color: var(--cassiopeia-color-hover);
 
}
.sidebar-left  .nav > li.nav-item > ul.mod-menu > li.deeper .parent {
  background-color: white;
}
.sidebar-left  .nav > li.nav-item > ul.mod-menu__sub > li:hover,
.sidebar-left  .nav > li.nav-item > ul.mod-menu__sub > li:hover,
.sidebar-left  .nav > li.nav-item > ul.mod-menu__sub > li:hover
{
   color: var(--cassiopeia-color-hover); 
   background-color: var(--color-resaltado-menu); 
   border:none;
  
}

.sidebar-left  .nav > li.nav-item:not(.parent):hover,
.sidebar-left  .nav > li.nav-item:not(.parent):active,
.sidebar-left  .nav > li.nav-item:not(.parent):focus
{
   color: var(--cassiopeia-color-hover); 
   background-color: var(--color-resaltado-menu); 
   border:none;
  
}
/*__________Menu Derecho______________*/
/* .container-sidebar-right .sidebar-right .card-body  {
    padding: 0;
   
   } */
.container-sidebar-right .sidebar-right .card-body ul.mod-menu {
       flex: 1 1 auto;
   }  
.sidebar-right  .nav > li.nav-item {
    padding-left: 10px; 
     
   }  
.sidebar-right  .nav > li.nav-item .nav-header {
    color: var(--cassiopeia-color-hover);
    
   }
.sidebar-right  .nav > li.nav-item > ul.mod-menu > li.deeper .parent {
     background-color: white;
   }
.sidebar-right .metismenu li.parent > ul {
    list-style: none;
    padding: 0;
   
   }   
.sidebar-right .metismenu.mod-menu .mm-collapse > li  {
      display: block;      
      text-decoration: none;
        
   }
.sidebar-right .metismenu.mod-menu > li:hover,
.sidebar-right .metismenu.mod-menu > li:active ,
.sidebar-right .metismenu.mod-menu > li:focus{
   
      color: var(--cassiopeia-color-hover); 
      background-color: var(--color-resaltado-menu); 
      border:none;
    
   }     
.sidebar-right .metismenu.mod-menu .mm-collapse > li  a:hover, 
.sidebar-right .metismenu.mod-menu .mm-collapse > li  a:active,
.sidebar-right .metismenu.mod-menu .mm-collapse > li  a:focus {
      color: var(--cassiopeia-color-hover);
        
   }  
  
/* Que se sombree el elemento del menú activo (en todos los estilos de menús laterales) */
.sidebar-right .mod-menu > li.nav-item.current.active {
    background-color: var(--color-activo-menulateral);
    color: white;
   }
.sidebar-right .mod-menu > li.nav-item.current {
    background-color: var(--color-activo-menulateral);
    color: white;
   }
.sidebar-right .mod-menu > li.metismenu-item.current.active {
    background-color: var(--color-activo-menulateral);
    color: white;
   }
.sidebar-right .mod-menu > li.metismenu-item.current {
    background-color: var(--color-activo-menulateral);
    color: white;
   }
.sidebar-right .mod-menu >li > ul > li.nav-item.current {
    background-color: var(--color-activo-menulateral);
    color: white;
   }
/* Que sea clicable todo lo coloreado, no solo el texto */
.sidebar-right .mod-menu > li.nav-item > a{
    display:block;
  }
.sidebar-right .mod-menu > li > ul > li.nav-item > a{
    display:block;
  }
.sidebar-right .mod-menu > li.metismenu-item > a {
    display:block;
  }
/*--------*/

.sidebar-right .metismenu li.parent > ul {
 list-style: none;
 padding: 0;
}   

.sidebar-right  .nav > li.nav-item > ul.mod-menu__sub > li:hover,
.sidebar-right  .nav > li.nav-item > ul.mod-menu__sub > li:hover,
.sidebar-right  .nav > li.nav-item > ul.mod-menu__sub > li:hover
   {
      color: var(--cassiopeia-color-hover); 
      background-color: var(--color-resaltado-menu); 
      border:none;
     
   } 


.sidebar-right  .nav > li.nav-item:not(.parent):hover,
.sidebar-right  .nav > li.nav-item:not(.parent):active,
.sidebar-right  .nav > li.nav-item:not(.parent):focus
   {
      color: var(--cassiopeia-color-hover); 
      background-color: var(--color-resaltado-menu); 
      border:none;
     
   }



/*_______Fin efecto sobreado menús_____________*/


/*____ resaltado CATEGORY BLOG_____*/

.resaltado1 .blog-item{
 transition: all .2s ease-in-out;
}
.resaltado1 .blog-item:hover {
 transform: scale(1.03);
 box-shadow: 0 10px 20px rgb(0 0 0 / 12%), 0 4px 8px rgb(0 0 0 / 6%);
}
/*____ resaltado CATEGORY BLOG___FIN_____*/

/* ___________ color fondo FOOTER ______________ */
.footer {
    background-image: none;
}
/* ___________ FIN_ color fondo FOOTER ______________ */