@charset "UTF-8";

/* Hoja de estilos del currículum */

/* Google Fonts: Importación de tipografías externas */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');


/* Colores principales de la página, tipografía y tamaño base, márgenes… */
body{
	font-family: "Roboto", sans-serif;
	font-size: 14pt;
	font-weight: 300;
	background-color: #FFF;
	color: #333;
	margin: 3%;
}

/* Cabecera */
header{
	font-family: "Roboto Mono", monospace;
	font-size: 80%;
	text-align: right;
}

/* Encabezados */
h1{
	font-family: "Roboto Condensed", sans-serif;
	font-size: 300%;
	font-weight: 100;
	color: #000;
}
h2{
	font-family: "Roboto Condensed", sans-serif;
	font-size: 150%;
	font-weight: 400;
	color: #111;
	margin-top: 3.5ex;
}
h3{
	font-family: "Roboto Condensed", sans-serif;
	font-size: 130%;
	font-weight: 100;
	color: #222;
}

/* Menú de navegación */
nav{
	width: 30%;
	background-color: #EEE;
	border: 1px solid #000;
	margin: 0 0 2ex auto;
}

/* Párrafos */
p{
	line-height: 2.7ex;
}
address{
	font-family: "Roboto Mono", monospace;
	font-style: normal;
	font-size: 80%;
	margin-left: 2em;
}

/* Elementos inline */
em{
	font-weight: bolder;
}
sup {
	font-size: 60%;
}
del{
	color: #800;
}
ins{
	color: #080;
	text-decoration: inherit;
}
a{
	color: #37F;
	text-decoration: underline dotted;
}

/* Listas */
ul{
	list-style-type: square;
}
ol{
	list-style-type: upper-latin;
}
dl{
	margin-left: 2em;
}
dt{
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 700;
	margin-top: 2ex;
	margin-bottom: 1ex;
}
dd{
	font-style: italic;
	margin-bottom: 0.5ex;
}
li{
	margin: 1.5ex 0;
}

/* Tablas */
table{
	font-family: "Roboto Condensed", sans-serif;
	width: 60%;
	border-collapse: collapse;
}
col{
	width: 25%;
}
th{
	border: 1px solid #000;
	padding: 0.5ex 0.5em;
	font-size: 110%;
	font-weight: 500;
	background-color: #DDD;
}
td{
	border: 1px solid #000;
	padding: 0.5ex 0.5em;
	font-weight: 100;
}
caption{
	font-family: "Roboto Slab", serif;
	font-size: 80%;
	font-style: italic;
	text-align: left;
	margin-top: 1ex;
	caption-side: bottom;
}


/* Varios */
blockquote{
	background-color: rgba(0,136,255,0.1);
	font-family: "Roboto Slab", serif;
	font-size: 90%;
	font-style: normal;
	text-align: left;
	padding: 2ex 2em;
	width: 60%;
	border-radius: 15px;
	margin-left: 0; margin-right: auto;
}
pre{
	font-family: "Roboto Mono", monospace;
	font-size: 90%;
}
cite{
	font-style: normal;
}


/* Imágenes */
figure{
	margin: 0;
	padding: 0;
}
figcaption{
	font-family: "Roboto Slab", serif;
	font-size: 70%;
	font-style: normal;
	text-align: inherit;
	margin-top: 1ex;
}
img{
	border: 1px solid black;
	vertical-align: bottom;
}


/* Formularios */
form{
	width: 30%;
	margin-left: 3em;
	padding: 1ex 1em;
	border: 2px dotted black;
	border-radius: 20px;
	background-color: #F3F3F3;
	font-family: "Roboto Slab", serif;
}
fieldset{
	font-size: 90%;
}
legend{
	font-size: 90%;
}
label{
	display:block;
	font-size: 80%;
}
input{
	font-family: "Roboto Mono", monospace;
	}
select{
	font-family: "Roboto Mono", monospace;
}
button{
	width: 7em;
	font-family: "Roboto Mono", monospace;
}
legend{
	padding-bottom: 0.5ex;
}


/* Pie */
footer{
	margin: 0;
	margin-top: 4ex;
	padding: 1ex 1em;
	border: none;
	text-align: right;
	color: #FFF;
	background-color: #000;
}


/* CSS EXTRA (Avanzado) */

/* Cuerpo principal de la página */
body {width: auto; min-width: 480px; max-width: 968px; margin: 5% auto 5% 10%;}

/* Estados de enlaces */
a {text-decoration: none; background-color: transparent; color: #08F;}
a:hover, a:focus {text-decoration: underline #08F dotted}

/* Ajustes del menú superior */
h1 {margin-top: 4ex;}
nav {position: fixed; top: 0; left: 0; background-color: #000; padding:0; margin: 0; width: 100%; z-index: 1000; font-size: 80%;}
nav a {display: inline-block; padding: 0.3em 1em; color: #FFF; width: auto; font-family: "Roboto", sans-serif; font-weight: 400;}
nav a:hover {background-color: #EEE; color: #000;}
nav>ul {display: inline; margin: 0; padding: 0; list-style: none;}
nav>ul>li {display: inline; margin: 0; padding: 0; border: none;}
li.plus>ul {display: none; position: absolute; list-style: none; width: 8em; margin: 0; padding: 0; margin-left: -6em; background-color: #000; border: 1px solid #000; }
li.plus:hover>ul {display: inline-block; top: 1.8em; box-shadow: 2px 2px 3px #777;}
li.plus>ul>li {display: list-item; margin: 0; padding: 0; font-style: italic;}
li.plus>ul>li>a {width: 75%;}
li.plus>a::after {content: " →"; color: #EEE;}
li.plus>a:hover::after {content: " ↓"; color: #000 !important;}

/* Foto personal */
#foto {float: right; margin: 0; margin-left: 1em;}
#foto>figcaption {font-size: 60%; font-style: normal; text-align: right;}

/* Imágenes con borde */
img.foto {border: 1px solid black;}

/* Descripción personal */
strong#name {font-family: "Roboto Condensed", sans-serif; font-size: 220%; font-weight: 200;}
#descripcion {width: 420px; margin-top: 4ex; text-align: justify; hyphens: auto;}
#descripcion::first-letter {color: #555; font-weight: 500; font-size: 500%; font-family: "Roboto Slab", serif; display: block; float: left; margin-right: 0.2em; text-shadow: 2px 2px 5px #777;}
address>p{margin: 1ex;}

/* Inserciones y borrados */
ins, del {color: currentColor;}
del {display: none;}

/* Listas */
ol>li::marker {color: #AAA; font-weight: bolder; font-family: "Roboto Condensed", sans-serif;}
h3#formacion-no-reglada+ul>li::marker {content: "§  "; color: #AAA; font-weight: bolder; font-family: "Roboto Condensed", sans-serif;}
fieldset>ul{list-style-type: none;}

/* Iconos */
.material-symbols-outlined {font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' -25, 'opsz' 24; vertical-align: bottom; margin-right: 0.5em;}

/* Sistema de comillas en las citaciones */
q {font-style: italic; font-weight: bolder; quotes: "«" "»" "‹" "›";}
blockquote>p:first-child::before {content: "«"; font-size: 130%; margin-right: 0.2em; color: #08F;}
blockquote>p:first-child::after {content: "»"; font-size: 130%; margin-left: 0.2em; color: #08F;}

/* Alternar fondos en las filas de las tablas regulares */
tr:nth-child(even) {background-color: #EEE;}
.tdarea{background-color: white;}

/* Licencia en el pie de página */
footer{border-radius: 2em}
footer>figure {text-align: right; padding: 1ex 0; margin: 0;}
footer>figure>figcaption {text-align: right; padding-right: 1.6em;}

/* Transiciones */
nav a {transition-property: background-color, color; transition-duration: 0.3s; transition-timing-function: linear; transition-delay: 0s; background-color: #000; color: #EEE;}
nav a:hover {transition-property: background-color, color;transition-duration: 0.3s; transition-timing-function: linear; transition-delay: 0s; background-color: #EEE; color: #000; text-decoration: none;}
img {transition-property: filter; transition-duration: 1.5s; transition-timing-function: linear; transition-delay: 0.2s; filter: grayscale(100%);}
img:hover {transition-property: filter; transition-duration: 1.5s; transition-timing-function: linear; transition-delay: 0.2s; filter: grayscale(0);}



/* Formatos de impresión */
@media print{
	@page {
		page-orientation: upright;
		size: A4 landscape;
		margin: 2cm 3cm;
	}
	* {color: black !important; text-decoration: none !important;}
	h1, h2 {margin-top: 0;}
	nav, form, #contacto, footer {display: none !important;}
	#idiomas+table {margin: 2cm auto; border: 1pt solid black;}
	blockquote {background-color: #DDD;}
	#formacion, #experiencia, #idiomas, #aficiones {page-break-before: always;}
}