@charset "UTF-8";
/* CSS Document */

/*2.----FONT-FAMILY*/
/*lexend*/
@font-face {
font-family: lexend;
src:url("../../fuentes/lexend/Lexend-VariableFont_wght.ttf") format('truetype');	
/*font-display: swap;*/
}
/*vazirmatn*/
@font-face {
font-family: vazirmatn;
src:url("../../fuentes/vazirmatn/Vazirmatn-VariableFont_wght.ttf") format('truetype');
/*font-display: swap;*/
}

/*3.----FONT-SIZE ROOT*/
:root {
--font-size-xxs: clamp(0.5rem, 0.37vw + 0.96rem, 0.6rem);
--line-height-xxs: clamp(0.8rem, 0.37vw + 2.26rem, 0.9rem);
	
--font-size-xs: clamp(0.7rem, 0.37vw + 0.96rem, 0.8rem);
--line-height-xs: clamp(1.1rem, 0.37vw + 2.26rem, 1.2rem);	
	
--font-size-sm: clamp(0.9rem, 0.04vw + 0.61rem, 0.9rem);
--line-height-sm: clamp(1.4rem, 0.04vw + 0.61rem, 1.4rem);	
	
--font-size-base: clamp(1.05rem, 0.3vw + 0.90rem, 1.1rem);
--line-height-base: clamp(1.60rem, 0.3vw + 1.60rem, 1.9rem);	
  
--font-size-md: clamp(1.15rem, 0.3vw + 0.90rem, 1.15rem);
--line-height-md: clamp(1.60rem, 0.3vw + 1.60rem, 1.9rem);  
	
--font-size-lg: clamp(1.2rem, 1.56vw + 0.76rem, 1.3rem);    	
--line-height-lg: clamp(1.4rem, 1vw + 0.61rem, 1.7rem);   
  
--font-size-xl: clamp(1.5rem, 2.06vw + 0.76rem, 1.8rem);    	
--line-height-xl: clamp(1.9rem, 1.5vw + 0.61rem, 2.2rem);
  	
--font-size-xxl: clamp(1.6rem, 2.38vw + 1.6rem, 3.5rem);
--line-height-xxl: clamp(2.2rem, 2.38vw + 2.2rem, 4.0rem);
	
--font-size-xxxl: clamp(2.2rem, 10vw + 0.2rem, 4.2rem);
--line-height-xxxl: clamp(3.6rem, 10.0vw + 0.2rem, 5.2rem);
	
	
/*font family*/	
--fuente-principal: vazirmatn, sans-serif;
--fuente-secundaria: lexend, sans-serif;
--fuente-destacada: lexend, sans-serif;
--fuente-titulares: lexend, sans-serif;
--fuente-subtit: lexend, sans-serif;
--fuente-parrafo: vazirmatn, sans-serif;
--fuente-creditos: lexend, sans-serif;
  
/*globales para subtítulos de componentes: tablas, gráficas highcharts, datatables*/ 
--font-size-subtit-componente: calc(var(--font-size-base) - 2px); 
--line-height-subtit-componente: calc(var(--line-height-sm) - 3px);  
  
--font-weight-subtit-componente: 450; 
--font-variation-settings-subtit-componente: "wght" 650;
  
--color-subtit-componente: var(--base-a-0-100);  
  
}

p.txt-instr{
font-family: var(--fuente-creditos);
text-rendering: optimizeLegibility;
font-size: var(--font-size-xxs);
line-height: var(--line-height-xxs);
font-weight: 400;
font-variation-settings: "wght" 700;
color: var(--base-a-1-70);
text-transform: uppercase;
letter-spacing: 1px;	
margin-bottom: 0px;	
}

/*--tooltip*/
/*tooltip opción 1*/
span.tooltip{
display: inline-block;	
background-color: var(--base-a-2-100);
border-radius: var(--border-r-sm);
color: var(--bn-100);
line-height: var(--line-height-sm);	
cursor:help;		
padding: 2px 5px 0px 5px;		
}
[tip] .tooltip {
position: fixed;
-moz-transform: translateX(-20%) !important;
-webkit-transform: translateX(-20%) !important;
transform: translateX(-20%) !important; 	
max-width: 200px;	
font-family: var(--fuente-parrafo);	
font-size: var(--font-size-xs) !important;	
line-height: var(--line-height-xs) !important;
font-weight: 400 !important;	
font-variation-settings: "wght" 600 !important;
text-shadow: none !important;		
color: var(--base-a-1-100) !important;
background-color: var(--bn-100);	
border: 1px solid #ccc;
border-radius: var(--border-r-sm);	
visibility: hidden;
box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);	
opacity: 0;
z-index: 99;	
padding: 8px 12px 5px 12px !important;	
}
[tip]:hover .tooltip {
visibility: visible;
opacity: 1;
}

/*tooltip opción 2*/
.grp-tipLink{
position: relative;  
}
.grp-tipLink > span:first-of-type{
position: absolute;
top: 0px;  
left: 0px;
width: 100%;
height: calc(100% + 2px);
height: 100%;
border-radius: var(--border-r-xs);
/*background-color: var(--base-a-2-80);*/  
}
.tipLink{
vertical-align: top;
display: inline-block;
position: relative;
background-color: var(--base-a-2-80);  
border-radius: calc(var(--border-r-xs) + 1px);
color: var(--bn-100);
cursor: help;
padding: 0px 6px 0px 6px;  
}
.tipLink,
.tipLink sup {
position: relative;
vertical-align: top;
cursor: help;
color: var(--bn-100);
font-variation-settings: "wght" 600;
}

/*tooltip en párrafo de texto*/
.cont-section > div > p .tipLink{
line-height: calc(var(--line-height-base) - 7px);
margin-top: 1px;
padding: 3px 6px 0px 6px;  
}

/*tooltip en párrafo de texto (sección oscuro)*/
.cont-section > div > .txt > p .tipLink{
line-height: calc(var(--line-height-base) - 7px);
margin-top: 1px;
padding: 3px 6px 0px 6px;  
}

/*tooltip en pie de foto*/
.pie .grp-tipLink > span:first-of-type {
height: calc(100% - 2px);
}
.pie .tipLink {
top: -4px;
padding: 4px 6px 0px 6px;
}

/*tooltip en chap*/
.sec-chap .blq-wrapper article h2 span.grp-tipLink > span:first-of-type{
height: calc(100% + 3px);  
}

/*tooltip en texto tabla*/
.art-grid-blq--tabla-txt ul li p span.grp-tipLink > span.tipLink{
line-height: 20px !important;
}

/*btn tooltip párrafo texto corrido*/
/*.cont-section > div > p span.grp-tipLink > span:first-of-type{
top: -2px;
}*/

#tooltip {
font-family: var(--fuente-parrafo);
font-size: var(--font-size-xs) !important;
line-height: var(--line-height-xs) !important;
font-weight: 400 !important;
font-variation-settings: "wght" 600 !important;
color: var(--base-a-1-100) !important;
text-align: left;
border-radius: var(--border-r-sm);
position: absolute;
z-index: 99;
width: auto;
max-width: 170px;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
background-color: var(--bn-100);
box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
text-shadow: none !important;
border: 1px solid #ccc;
padding: 8px 12px 5px 12px !important;
word-wrap: break-word; /* evita textos largos desborden */
white-space: normal; /* permite textos largos se ajusten */ 
}
/* Flecha */
#tooltip-arrow {  
content: "";
position: absolute;
bottom: calc(100% + 1px);
border-width: 8px;
border-style: solid;
border-color: transparent transparent var(--base-a-1-100) transparent;
border-radius: var(--border-r-xs);
z-index: 1;
height: 0px;
pointer-events: none;
}

/* tooltip arriba en vez de abajo */
#tooltip.tooltip-top {
bottom: calc(100% + 10px);
top: auto !important;
}

#tooltip.tooltip-top::after {
top: 100%;
bottom: auto;
border-color: var(--base-a-1-100) transparent transparent transparent;
}

body.tablero-datos .nav--ficha--grp-cont-seccion h6 {
white-space: normal !important;
}


/*12.----MEDIA QUERIES*/
/*@media screen and (orientation:portrait){*/
@media screen and (max-width:851px){
.nav--ficha--grp-cont-seccion h6 {
white-space: nowrap;
}	
}