@charset "utf-8";

/* Colección INFORMES F BBVA 

Gama de colores
BBVA Core Blue  		rgb(0,68, 129)	#004481
BBVA Core Blue Dark  	rgb(4, 50, 99)	#043263
BBVA Core Blue Light	rgb(20, 100, 165)	#1464A5
BBVA Sky Blue Light		#D4EDFC
 */


/* Esto lo paso también a constantes */
	.new-page {
		margin-top: 0;
		page-break-before: always;
		break-before: page;
	}
	.float-top {float: top; margin-top: 0; margin-bottom: 32px;} 
	.float-bottom {float: bottom;}   /* son los 2 pixeles que le sobran a la caja */
	.flex-row {display: flex;}
	.flex-column {display: flex; flex-direction: column;}
	.hidden {display:none;}


/*===================================SECCIONES===*/

/* Todas escepto las portadas, copy, índice y tal, van a 2 columnas en print
 */

@media print{
	.f-estaedicion,
	.f-presentacion,
	.f-prefacio,
	.f-reconocimientos,
	.f-introduccion,
	.m-prologo,
	.m-capitulo,
	.b-bibliografia	{
		column-count: 2;
		column-gap: 7mm;
	}
	/* 	Elementos, bloques que ocupan las dos columnas */

	div.bl-tit-cap,
	div.bl-tabla,
	div.bl-grafico,
	figure,
	div.separa-columnas {column-span: all;}	
}



/*Por orden se su posición en el libro*/

.f-cubierta {
	height:100%;
	width:auto;
	page-break-before:always;
	page-break-inside: avoid;
	text-align:center;
	margin-top: 0;
}
 

									/*Frontispicio*/
.f-frontispicio{}


									/*PORTADA y PORTADILLA*/
.f-portada,
.f-portadilla {
	margin:0; 
	padding-top: 0em;
	hyphens:none !important;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	-epub-hyphens:none;
	-adobe-hyphenate:none;
	text-indent: 0;	 
}
					   
	.f-portada h1,
	.f-portadilla h1,	
	.f-portada h1.h1-titulo {
		font-size: 2em;
		line-height: 1.2;	
		font-weight:bold;
		margin:0;	
		margin-bottom:.5em;
		margin-bottom: .5vh;
	}
	.f-portada h2,
	.f-portadilla h2,	
	.f-portada h2.h2-subtitulo {
    	color: #49A5E6;  	
		font-size:1.2em;
		line-height: 1.2;
		font-weight:bold;
		margin:0; 
		padding: 0!important;
		border-bottom: 0px;
		text-transform: none;	
		margin-top: 1vh !important;
	}  
div.bloque-autores {
	margin-top: 8em;
	margin-top: 8vh;
} 
	div.bloque-autores p {
		margin-bottom: 0;
		font-size: 1.1em;
		line-height: 1.2;
	}	

.f-portada div.logos {
	width: 25%;
	margin: 8em auto 2em auto;
	margin-top: 8vh;
	min-width: 100px;	
} 
.f-portada div.logos img {margin-left: -1.5vw;}

@media print{
	.f-portada, .f-portadilla {margin-left: 57mm;}
	.f-portada div.logos {
		margin-left: auto;
		margin-right: auto;
		width: 40mm;
		float: bottom;
	}	
}

/* PORTADA BBVA   CON LA CUBIERTA Y LA PORTADA SIDE-BY-SIDE */

div.portada-bbva {  /* contenedor general */
	display:flex;
	align-items: flex-start;
	width: 100%;
	margin-left: 0%;
}
	div.portada-bbva .bloque-cubierta { /* la cubierta */
		width: 80%;
		margin-right: 3em;
		margin-top: 107px;
	}
	
	div.portada-bbva .bloque-cubierta #img-cubierta {height: auto; }
	
	div.portada-bbva .bloque-portada { /* textos y lo de la portada */
	}
/* 			div.portada-bbva .bloque-portada h1 {margin-top: 30px;} */
			div.portada-bbva .bloque-portada div.logos {margin-left: 0; margin-bottom: 3em;}
			div.portada-bbva .bloque-portada div.logos img {margin-left: 0;}
	
@media (max-width: 700px) {
	div.portada-bbva {display: block; width: 100%; margin-left: 0;}
			div.portada-bbva div.bloque-autores {margin-top: 4vh;}
			div.portada-bbva div.logos {margin-top: 4vh; margin-left: auto;}
	div.portada-bbva .bloque-cubierta {
		width: 80%;
		margin-right: 0;
		margin-left: 10%;
		margin-top: 0px;
		margin-bottom: -80px;
	}
		div.portada-bbva .bloque-cubierta #img-cubierta {height: auto;}
}	

	
	

/* =============== 					COPYRIGHT        ==============   */
.f-copyright{}
	.f-copyright p {	    	
        font-size:.9em;
        text-align:left;
    }
   		.f-copyright p.edicion {padding-top: 4em;}  
   		.f-copyright div.resto-copy {float: bottom;}   	
   			.f-copyright div.resto-copy p:last-of-type {margin-bottom: .3em;} 	
   		.f-copyright p.editor {padding-left: 1.1em; text-indent: -1.1em;}     		

/*  ============================   INDICE  ====================		 */
.f-indice {        
	hyphens:none !important;
   -webkit-hyphens: none;
   -moz-hyphens: none;
   -ms-hyphens: none;
   -epub-hyphens:none;
   -adobe-hyphenate:none;
}

.f-indice ol {margin:0;}
	.f-indice ol li ol {margin-left: 1em;  margin-top: 10px;}
		.f-indice ol li ol li ol {margin-left: 0.4em; margin-bottom: 5px;}
	 
	.f-indice li {
		list-style-type: none !important;
		color: black; 
		-webkit-text-fill-color: black;  			
		text-decoration: none; 
		background-color:transparent!important; 
		text-align: left;
	}  	
	.f-indice span.num-toc {   /* los número de epígrafe con ancho fijo según nivel */
		display: inline-block; 
		text-align: right;
		padding-right: .5em;  
	} 
	
	.f-indice ._1.sin-num-toc {margin-left:0em;}	 /* para entradas sin num-toc */			

	
	.f-indice li._1 {
		font-size: 1.1em;
		text-transform:uppercase;
		font-weight: 500;		
		margin-bottom: 1em;
		margin-left:1.5em;				
	}
		.f-indice li._1:last-of-type { margin-bottom: 0;}  /* por si se quiere que flote abajo */
		
		.f-indice li._1 span.num-toc {
			width: 1em; 
			margin-left:-1.5em;    
			text-align: left;   
		}
			
	.f-indice li._2 {               
		font-size: 1em;       
		font-weight: normal;
		margin-top: 0px;
		text-transform:none;	
		margin-left: 1em;			
	}
		.f-indice li._2 span.num-toc {
			width: 1.45em; 
			margin-left:-2.2em; 
			padding-right: .8em;   
		}
		
	.f-indice li._3 {               
		font-size: 1em;       
		margin-left: 3.5em;
	}
		.f-indice li._3 span.num-toc {
			width: 3em; 
			margin-left:-3.5em;    
			padding-right: .5em;   
		}	


	
			/* Lista de imágenes / cuadros / tablas			Tiene las dos clases: f-índice y f-listaimagenes */

.f-indice.f-listaimagenes ol {margin-left: 0;}

	.f-indice.f-listaimagenes li._1 {
		font-size: 1em;
		text-transform:none;
		font-weight: normal;
		margin-left: 7.5em;
	}
		.f-indice.f-listaimagenes li._1 span.num-toc {
			width: 7.5em; 
			margin-left:-8em;    
			text-align: left; 
			color: var(--color-mediumblue)!important;
    		-webkit-text-fill-color: var(--color-mediumblue)!important; 
		}	
		.f-indice.f-listaimagenes li.mas-margin-top {margin-top: 2em;}


		
/*Presentación    Vale para el resumen / Summary*/
.f-presentacion {}

div.resumen-ingles p {font-style: italic;}
div.resumen-ingles p em {font-style: normal;}

/*Capítulo*/
.m-capitulo{}

	

/*Esta edición    Vale para la sección Autores*/
.f-estaedicion {page-break-before: right;}
.f-estaedicion h2 {
	font-size:1.1em; 
	font-weight:bold;
	text-transform: uppercase;
	padding-bottom: 0px;
	padding-left: 0em;
	border-bottom: 0px solid;		
}
	.f-estaedicion h2 + p,
		 h2 + p[class^="i-"] + p {margin-top:0px;}

/*Dedicatoria*/
.f-dedicatoria {}
	.f-dedicatoria p{text-indent:0;}
	
/*Epígrafe*/
.f-epigrafe {}
    .f-epigrafe p {text-indent: 0;}

/*Reconocimientos*/
.f-reconocimientos{}

/*Prefacio*/
.f-prefacio {}

/*Introducción*/
.f-introduccion {}

/*Prólogo*/
.m-prologo {}

/*Lista de ilustraciones*/
.f-listailustraciones {}

/*Imágenes*/
.m-imagenes {margin: 0;}

/*Glosario*/
.b-glosario {}

									/*Bibliografía*/
.b-bibliografia{}
	.b-bibliografia p {
		font-size: .95em;	
		margin-left:0; 
		text-align: justify;
	}
		.b-bibliografia p:target {
  			background-color: #D4EDFC;				
  		}
  		
    span.guion-biblio {
        display:inline-block;
        width: 2em;
        text-align: right;
    }			
	.b-bibliografia a {
		text-decoration: none;
		background-color:transparent!important;
		overflow-wrap: break-word;
		word-wrap: break-word;
		-ms-word-break: break-all;
		word-break: break-all;
		word-break: break-word;	
	}
/* referencias desde el texto */
	span.ref-bib {
}
	



/*Más créditos*/
.b-mas-creditos{}

						/* Sección Notas*/
p.p-textonota {
	text-indent: 0;
	text-align: left;
	margin-left: 3em; 
	margin-bottom: .6em; 
	line-height: 1.25;
}
span.l-link-a-texto {
    display: inline-block; 
    width: 3em; 
    margin-left:-3.6em;    
    padding-right:.6em;  
    text-align: right;
    color: blue;
    -webkit-text-fill-color: blue;     
}

.l-refnota {
	font-size:0.7em;
	vertical-align:super;
	margin-left:0.1em;
}
	h1 > a > .l-refnota { /* para que tengan menor tamaño relativo cuando van sobre titulares */
		font-size:0.5em;
	}



/*===================================BLOQUES SEMÁNTICOS===*/

/*Por orden alfabético*/
.bl-audio{}

/*Bibliografía*/
.bl-bibliografia {}

	
/*Carta*/
.bl-carta {
	margin-top:1.5em;
	margin-bottom:1.5em;
	margin-left: 2em;
	margin-right:1em;
	text-align:justify;
}
	.bl-carta p {
		font-style:italic;
	}
	.bl-carta em {
		font-style:normal;
	}

/*Cita*/
.bl-cita {
	margin-top:1em; 
	margin-bottom:1em; 
	margin-left: 2em;  
}
	.bl-cita  p{
		font-size:1em; 
		text-indent:0px;
	}
	.bl-cita + p {text-indent:0;}	
	.bl-cita + p[class^="i-"] + p {text-indent:0px;}	


/*Cita inicio*/
.bl-cita-inicio {/*Texto que a veces se pone al principio de un capítulo, después del título*/
	margin-left:20%;
	margin-top:1em;
	font-size:1em;
	text-indent:0;
	hyphens: none;
}
	.bl-cita-inicio p {
		text-align: right;	
		font-style: italic;
	}
	.bl-cita-inicio .p-autor{
		margin-top: .3em;
		margin-left:0;
	}

								/*===== GRAFICOS - FOTOS ======= */
.bl-grafico {
	margin-top:0px; 
	margin-bottom:1em;
}
p.leyenda-grafico {
	text-indent: 0;
	font-family:BBVABenton, Arial, sans-serif;	    
	font-size: .95em;
	margin-top: -1em;
	margin-bottom: 1em;
}	

figure {}
	figcaption {margin-top: 1em;}
	
	figure img {margin: 0; padding: 0;
		height: auto;
		height: intrinsic;  /* Para Safari?? */
		width: 100%;
		/* max-height: 100%; */  /* Esto en Edge/Explorer lo interpreta como el 100% de la ventana y se deforma. Hay que quitarlo aquí o en media quierie */
	}
	
	figure.float-top {
		padding-top: 2px;   /* para igualar visualmente con el arranque del texto en la enfrentada */
		margin-bottom: 2em;  /* 2 líneas menos los 2 px de padding */
	}
	figure.float-bottom {
		margin-top: 2em;  
		margin-bottom: -0px;  /* para bajarlo hasta la línea?? */
	}

	
	figure.ancha,
	div.ancha,
	.ancha {
		column-span: all;
		width: 100%;
	}	
		figure.ancha div[class^="height"] {overflow: hidden;}


/* Para imágenes más bien verticales, al 70% del ancho y con su caption a la derecha.
En visor.css se pone al 100% de ancho y la figcaption debajo para pantallas de menos de 800px  */			
		figure.ancha.flex-row {justify-content: flex-start;}	
		figure.ancha.flex-row div {width: 70%;}
		figure.ancha.flex-row figcaption {
			width: 30%;
			padding-left: 1em;		
			align-self: flex-end;        
			hyphens: none;
			margin-bottom: 0px;
		}
		
		
		figure.ancha.flex-column {
			height: auto;   
/* 			height: 95vh; 
			margin: 0;        */  /* Esto soilo para impresión */
			justify-content:space-between;

		}	
			figure.ancha.flex-column img {
/* 				width: 90%;  */
				height: auto; 
				flex: 0 1 auto;
			}
			figure.ancha.flex-column figcaption {margin-bottom: 4px;}	
  
 
/* EN Safari las imágnes aparecen altísimas deformadas, no entiendo porqué
Hay que darle altura máxima al contenedor, y luego quitárse en media query cuando las imágenes van una sobre otra.*/
.flex-row.bl-3 {max-height: 250px;}

/* No todos los navegadores distribuyen como se espera las imágenes... hay que darles ancho. */
.flex-row.bl-3 img {
	width: 33.3%;
	flex-grow: 1;
	flex-shrink: 1;
}

.flex-row.bl-2 {max-height: 350px;}
.flex-row.bl-2 img {
	width: 50%;
	flex-grow: 1;
	flex-shrink: 1;
}

   

@media print { 
	figure {margin-top: 1em;}
	
		div.flex-row {
			display: flex; 
			justify-content: space-between;
			width: 100%;
		}
		div.flex-row img {
			flex-shrink: 1;
			width: 32%;
		}
}
	




/*Poema*/
.bl-poema {
	text-align:center;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 1.5em; 
	margin-right: 0; 
}






								/*≠≠≠≠≠≠≠≠≠≠≠≠≠≠ TABLAS ≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠*/
								
.bl-tabla {margin-top:1em;  margin-bottom:1em;}
	.bl-tabla.float-bottom {margin-bottom:0px;}
.bl-tabla.tablapeq {column-count: 1;}

table {
	font-size: .9em;
	line-height:1.1;	
	border: hidden;	
}
.col-izq {text-align:left;}
.col-der {text-align:right;}

thead {
	text-indent: 0;
	hyphens:none !important;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	-epub-hyphens:none;
	-adobe-hyphenate:none;
	font-size: 1em;
}

	thead tr:first-child td {background-color: #004481; color: #ffffff; text-align: left; padding: 6px;}
	thead tr:nth-child(2) td {background-color: #49A5E6; color: #ffffff;}
	td.con-borde-bottom {border-bottom: .5px solid black!important;}

/* la columna izquierda alineada a la izquierda  y sin hyphens*/
tbody tr:nth-child(odd) {
  background: #E9E9E9;
}
tbody tr:nth-child(even) {
  background: #F4F4F4;
}

	tbody td:first-child {text-align: left; hyphens: none;}

.bl-tabla h5,
p.tit-tabla {
	font-family:BBVABenton, Arial, sans-serif;		
	font-weight: normal;
	background-color: #004481;
	color: white;
	margin-top: 0;
	margin-bottom: 5px; 
}	
p.p-fuente-graf {
/* 
	font-style: italic;
	padding-right: 30mm;
	margin-top: 5px; 
 */
}


				/*===================================LISTAS===*/		
.bl-lista {
	margin-top: 1em;
	margin-bottom: 1em;
}

ul,
ol {
	list-style-position: outside; 
	margin-left: 2em;
}
ul {list-style-type: none;}
	ul li:before {
	  content: '\2014';
	  position: absolute;
	  margin-left: -2em;
	}

ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ol.upper-roman {list-style-type: upper-roman;}			
ol.lower-roman {list-style-type: lower-alpha;}		
	ol.lower-roman ::marker {font-size: 1em;}
ol.style-none {list-style-type: none!important;}	
	
ol + p {text-indent:0;}	
ol + p[class^="i-"] + p {text-indent:0px;}	

.lista-cita {font-style: italic;}

			/*===================================PÁRRAFOS SEMÁNTICOS===*/
.p-titulo,
.p-autor,
.p-caption,
.p-firma,
.p-cargo-firma,
.p-fuente-graf  {text-indent: 0;}



				/*===================================LETRAS===*/
			
.l-dropcap {
	font-size: 4.5em;
	color: #990000;
	float: left;
	margin-left  : -0.1em;
	margin-right : 0.04em;
	margin-top : -0.2em;
	margin-bottom : -0.3em;
	font-weight: normal;
}


/* Subrayados a distancias controladas */
.under {
	  display: inline-block;
	  position: relative;
	  text-indent: 0;
}
.under::after {
	  content: '';
	  position: absolute;
	  left: 0;
	  display: inline-block;
	  height: 1em;
	  width: 100%;
	  border-bottom: 1px solid;
	  margin-top: 3px;
}

/* que las URL partan donde caiga */
span.longurl {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}