/*
Creado por: Javier Lasén


[TABLA DE CONTENIDO]

1.	Importa las prererencias para el editor de datatable.
	(tiene que ir lo primero).
2.	Estilos generales.
3.	Icono de la página.
4.	Titular y Subtítulo.
5.1.	Cabecera con los campos de la tabla.
5.2.	Fondos de color de las filas de la tabla.
5.3.	Separar la tabla de los cuadros inferiores de información.
5.4.	Tamaño de la cáratula en la tabla.
		Clase creada en datatable_media_prin.js: "columnDefs",
		para controlar el tamaño de la carátula de la tabla
5.5.	Márgenes laterales de la información del campo detalles.
6.	Campos desactivados del cuadro de Mostrar columnas.
7.	Grupos de elementos de información de la página.
	Clase creada en el "dom" del archivo datatable.js.
8.1.	Botones de Imprimir ocultar campos y búsqueda avanzada.
8.2.	Separación de los tres botones de edición.
		Clase creada en el "buttons" del archivo datatable.js.
9.1.	Caja de texto del buscador.
9.2. 	Tamaño y ocultar el icono del buscador.
9.3.	Propiedades del texto "Buscar" en el buscador.
10.1. 	Información en la parte inferior de la tabla.
10.2.	Tamaño y color (sobre), de los iconos de la paginación.
		Clase creada en "language" del archivo datatable.js.
10.3.	Aspecto general de los botones de paginación.
10.4.	Color de los botones de la paginación.	
11.		Panel de búsqueda avanzada.
12.		Tamaño de las carátulas en datatable_biografia.js.



Tamaños de pantalla @media: 180px, 600px, 767px, 900px, 991px, 1023px.
*/






/* 1. Importa las prererencias para el editor de datatable*/
@import "estilos_editor.css";



/* 2. Estilos generales*/
/*Importar fuentes*/
@font-face {
	font-family: 'DINPro-Light';
	src: url('fuentes/DINPro/DINPro-Light tr.ttf');
}
@font-face {
	font-family: 'Catamaran-Light';
	src: url('fuentes/Catamaran/Catamaran-Light.ttf');
}



a {
    color: #00FFCF;
    text-decoration: none;
    background-color: transparent;
}
a:hover {
    color: #ACF50C;
    text-decoration: none;
    background-color: transparent;
}
main{
	margin-bottom: 100px;
}
td{ 
	/*font-family: Arial, Helvetica, sans-serif;*/
	font-family: DINPro-Light, Catamaran-Light, Calibri, sans-serif;
	color: #EBF2EF;
}   

/* 3. Icono de la página*/
.fa, .fas {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.8em;
}






@media(min-width: 180px) {
	/* 4. Titular y Subtítulo */
	/* Titular */
	h1{
		color: #DBD2C8;
		text-transform: uppercase;
		font-size: 3em;
	}
	/* Subtítulo */
	#subtitulo{
		color: #DBD2C8;
		visibility: hidden;
	}

	/* 5.1. Cabecera con los campos de la tabla*/
	th{
		font-size: 1.7em;
		line-height: 1.1; /*Interlineado*/
	}
	/*Contenidos de la tabla y del panel del buscador avanzado,
	Ver: 11. Panel de búsqueda avanzada*/	
	td{
		font-size: 1.7em;
		line-height: 1.2; /*Interlineado*/
		/*line-height: normal;*/ /*Interlineado*/
	}

	/* 5.2.	Fondos de color de las filas de la tabla */
	/* Cabecera de la tabla, añadiendo 00 al número es transparente */
	table { background-color: #4E738A;}

	/* Fila impar 1  Original: #fafafa*/
	table.dataTable.display tbody tr.odd > .sorting_1, 
	table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
	/* Fila impar 2  Original: #fafafa*/
	table.dataTable.display tbody tr.odd > .sorting_3, 
	table.dataTable.order-column.stripe tbody tr.odd > .sorting_3,
	/* Fila impar 3  Original: #fafafa*/
	table.dataTable.display tbody tr.odd > .sorting_2, 
	table.dataTable.order-column.stripe tbody tr.odd > .sorting_2,
	/* Fila impar 4  Original: #fafafa*/
	table.dataTable.display tbody tr.odd, 
	table.dataTable.order-column.stripe tbody tr.odd {
		background-color: #0083AD;
	}

	/* Fila par 1  Original: #fafafa*/
	table.dataTable.display tbody tr.even > .sorting_1, 
	table.dataTable.order-column.stripe tbody tr.even > .sorting_1,
	/* Fila par 2  Original: #fafafa*/
	table.dataTable.display tbody tr.even > .sorting_3, 
	table.dataTable.order-column.stripe tbody tr.even > .sorting_3,
	/* Fila par 3  Original: #fafafa*/
	table.dataTable.display tbody tr.even > .sorting_2, 
	table.dataTable.order-column.stripe tbody tr.even > .sorting_2,
	/* Fila par 4  Original: #fafafa*/
	table.dataTable.display tbody tr.even, 
	table.dataTable.order-column.stripe tbody tr.even {
		background-color: #006E96;
	}

	/*  SELECCIONADO */
	/* Seleccionado, fila impar 1. Original #afbdd8*/
	table.dataTable.display tbody tr.odd.selected > .sorting_1, 
	table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1,
	/* Seleccionado, fila impar 2. Original #afbdd8*/
	table.dataTable.display tbody > tr.odd.selected > .sorting_3, 
	table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_3,
	/* Seleccionado, fila impar 3. Original #afbdd8*/
	table.dataTable.display tbody > tr.odd.selected > .sorting_2, 
	table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_2,
	/* Seleccionado, fila impar 4. Original #afbdd8*/
	table.dataTable.stripe tbody > tr.odd.selected, 
	table.dataTable.stripe tbody > tr.odd > .selected, 
	table.dataTable.display tbody > tr.odd.selected, 
	table.dataTable.display tbody > tr.odd > .selected,
	/* Seleccionado, fila par 1. Original #afbdd8*/
	table.dataTable.display tbody tr.even.selected > .sorting_1, 
	table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1,
	/* Seleccionado, fila par 2. Original #afbdd8*/
	table.dataTable.display tbody tr.even.selected > .sorting_3, 
	table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3,
	/* Seleccionado, fila par 3. Original #afbdd8*/
	table.dataTable.display tbody > tr.even.selected > .sorting_2, 
	table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_2,
	/* Seleccionado, fila par 4. Original #afbdd8*/
	table.dataTable.stripe tbody > tr.even.selected, 
	table.dataTable.stripe tbody > tr.even > .selected, 
	table.dataTable.display tbody > tr.even.selected, 
	table.dataTable.display tbody > tr.even > .selected {
	    background-color: #00615C;
	}
	/* Texto oculto de la tabla que se muestra con el botón responsive de datatable.
	Tiene que ser de un color un poco más oscuro que la fila par*/
	table.dataTable tbody tr { background-color: #21362C;}

	/* 5.3. Separar la tabla de los cuadros inferiores de información*/
	table.dataTable.no-footer { margin-bottom: 20px;}

	/* 5.4.	Tamaño de la cáratula en la tabla*/
	.ancho_col_imagen {width: 15%;}

	/* 6. Campos desactivados del cuadro de Mostrar columnas */
	div.dt-button-collection button.dt-button:active:not(.disabled), 
	div.dt-button-collection button.dt-button.active:not(.disabled), 
	div.dt-button-collection div.dt-button:active:not(.disabled), 
	div.dt-button-collection div.dt-button.active:not(.disabled), 
	div.dt-button-collection a.dt-button:active:not(.disabled), 
	div.dt-button-collection a.dt-button.active:not(.disabled) {
		background-color: #AE2020;
	    background-image: -webkit-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
	    background-image: -moz-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
	    background-image: -ms-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
	    background-image: -o-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
	    background-image: linear-gradient(to bottom, #b23030 100%, #b23030 100%);
	    box-shadow: inset 1px 1px 3px #DBD2C8;
	}

	/* 5.5. Márgenes laterales de la información del campo detalles */
	p {
		margin-left: 0px;
	    margin-right: 0px;
	}		

	/* 7. Grupos de elementos de información de la página */
	.cont_datatable{
		margin-bottom: 50px;
		/*margin-left: 15px;*/
	}
	.superior{
		margin-bottom: 20px;
	}
	.cont_botones,
	.cont_filtro,
	.cont_reg{
		display: flex;
		justify-content: center;	
	}
	.cont_info{
		display: flex;
		justify-content: center;
	}
	.cont_pagina{
		display: flex;
		justify-content: center;	
	}

	/* 8.1. Botones de Imprimir ocultar campos y búsqueda avanzada */
	.ico-datatable{
		width: 96px;
		height: 96px;
	}
	/*Color y opacidad*/
	.btn-secondary {
	    /*color: #EBF2EF;*/
	    background-color: #016C7A;
	    border-color: #016C7A;
	}
	.btn-secondary:hover {
	    background-color: #00615C;
	    border-color: #00615C;
	}
	.btn-secondary.disabled, 
	.btn-secondary:disabled {
	    /*color: #EBF2EF;*/
	    background-color: #6C757D;
	    border-color: #6C757D;
	}
	.btn.disabled, .btn:disabled {
	    opacity: .65;
	}

	/* 8.2. Separación de los tres botones de edición*/
	.espacio_botones{
		margin-left: 0px !important;
	}
	/*Color de los botones desactivados y 
	espacio entre grupo de tres botones.
	Es el mismo que el fondo de la aplicación.*/
	.btn-group, 
	.btn-group-vertical {
	    background-color: #00758D;
	}

	/* 9.1. Caja de texto del buscador*/
	div.dataTables_wrapper div.dataTables_filter input {
	    /*margin-left: 0.5em;*/
	    margin-left: 0px;
	    display: inline-block;
	    width: 100%;
	}
	.dataTables_wrapper .dataTables_filter input {
		/*margin-left: 0em;*/
	    /*El mismo color que el menú con 40% de transparencia (últimas dos cifras)*/
		/*background-color: #00615C40;
		border: 1px solid #006E96;
		border-radius: 3px;
		padding: 2px 10px 2px;*/ /*Para que el texto no se pegue a los extremos*/
		/*width: 430px; *//*Necesita un contenedor para usar %*/
		/*font-size: 3rem;*/
		/*font-size: 2.3rem;*/
		/*color: #EBF2EF;*/
		/*margin-left: 0px;
		margin-top: 30px;
		margin-bottom: 40px;*/
	}	

	/* 9.2. Tamaño y ocultar el icono del buscador */
	/*#buscar_datatable{*/
	.ico-datatable-buscar{
		width: 36px;
		height: 36px;
		display: none;
	}

	/* 9.3. Propiedades del texto "Buscar" en el buscador */
	div.dataTables_wrapper div.dataTables_filter input::placeholder {
		color: #EBF2EF;
		text-transform: uppercase;
		text-align: center;
	    opacity: 0.7;
	}

	/* 10.1. Información en la parte inferior de la tabla */
	.dataTables_wrapper .dataTables_length, 
	.dataTables_wrapper .dataTables_filter, 
	.dataTables_wrapper .dataTables_info, 
	.dataTables_wrapper .dataTables_processing, 
	.dataTables_wrapper .dataTables_paginate {
	    color: #DBD2C8;
	    font-size: 1.4rem;
	}
	/*Paginación*/
	/*Número de página*/
	.dataTables_wrapper .dataTables_paginate .paginate_button {
	    color: white !important;
	    border: 1px solid #007BFF00!important;
	    background-color: #007BFF!important;
	    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #007BFF), color-stop(100%, #007BFF))!important;
	    background: -webkit-linear-gradient(top, #007BFF 0%, #007BFF 100%)!important;
	    background: -moz-linear-gradient(top, #007BFF 0%, #007BFF 100%)!important;
	    background: -ms-linear-gradient(top, #007BFF 0%, #007BFF 100%)!important;
	    background: -o-linear-gradient(top, #007BFF 0%, #007BFF 100%)!important;
	    background: linear-gradient(to bottom, #007BFF00 0%, #007BFF00 100%)!important;
		padding: 5px;
		margin: 2px;
		font-size: 1.3em;
	}
	.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	    color: white !important;
	    border: 1px solid #007BFF00!important;
	    background-color: #007BFF!important;
	    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #007BFF), color-stop(100%, #007BFF))!important;
	    background: -webkit-linear-gradient(top, #007BFF 0%, #007BFF 100%)!important;
	    background: -moz-linear-gradient(top, #007BFF 0%, #007BFF 100%)!important;
	    background: -ms-linear-gradient(top, #007BFF 0%, #007BFF 100%)!important;
	    background: -o-linear-gradient(top, #007BFF 0%, #007BFF 100%)!important;
	    background: linear-gradient(to bottom, #007BFF00 0%, #007BFF00 100%)!important;
	    padding: 5px;
	    margin: 2px;
	}
	/*Número de página actual*/
	.dataTables_wrapper .dataTables_paginate 
	.paginate_button.current, .dataTables_wrapper 
	.dataTables_paginate .paginate_button.current:hover {
	    color: blue !important;
	}
	/*Posición*/
	.dataTables_wrapper .dataTables_length {
    	margin-top: 30px;	
	}		
	.dataTables_wrapper .dataTables_paginate {
		margin-top: 50px;
	}	

	/* 10.2. Tamaño y color (sobre), de los iconos de la paginación*/
	.ico-datatable-pagina{
	    width: 36px;
	    height: 36px;
	}
	.ico-datatable-pagina:hover{
		background-color: #00615C;
	}

	/* 10.3. Aspecto general de los botones de paginación */
	.page-link {
		padding: .0rem .0rem;
		margin-left: 0px;
		line-height: 1.2;
		color: #EBF2EF;
		background-color: #016C7A;
		border: 0px solid #016C7A;
	}
	.page-link:hover {
		color: #DBD2C8;
		background-color: #016C7A;
		border: 0px solid #016C7A;
	}
	.page-item.active .page-link {
	    z-index: 3;
	    color: #EBF2EF;
	    background-color: #007BFF;
	    border-color: #007BFF;
	}	

	/* 10.4. Color de los botones de la paginación */
	.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
	.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
	.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    	/*color: #a1a8cd !important;*/
    	opacity: 0.2;
	}

	/* 11. Panel de búsqueda avanzada */
	/* Etiquetas de campos del panel del buscador avanzado */
	.etiqueta{
		padding-left: 15px !important;
	}
	/* Margen entre campos (primero) del panel del buscador avanzado */
	.global_filter{
		margin-bottom: 7px;
	}
	/* Margen entre campos del panel del buscador avanzado */
	.column_filter{
		margin-bottom: 5px;
	}
	/* Contenedor de búsqueda avanzada*/
	.caja_filtro_avan{
		display: none;
		width: 90%;
		justify-content: center;
		margin-left: 0px;
		background-color: #027382;
	}
	/*Afecta al selector de número de páginas para los registros de la tabla y
	los campos del buscador avanzado.*/
	.form-control {
		font-size: 1.7rem;
		color: #EBF2EF !important;
		background-color: #016C7A !important;
		border: 0px solid #016C7A;
		border-radius: .15rem;
		transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	}
	.form-control:hover {
		background-color: #00615C !important;
		border: 0px solid #00615C;
	}
	.campos::placeholder {
		color: #EBF2EF;
		font-size: 1.7em;
		text-align: center;
		font-style: italic;
	}

	/* 12. Tamaño de la carátula en datatable_biografia.js */
	.caratula{width: 100%;}

}/* Final @media(180) */



@media(min-width: 600px) {
	/* 5.1. Cabecera con los campos de la tabla*/
	th{ font-size: 1.2em;}
	/*Contenidos de la tabla y del panel del buscador avanzado,
	Ver: 12. Búsqueda avanzada*/	
	td{ font-size: 1.3em;}

	/* 8.1. Botones de Imprimir ocultar campos y búsqueda avanzada*/
	.ico-datatable{
		width: 76px;
		height: 76px;
	}

	/* 9.1. Caja de texto del buscador*/
	.dataTables_wrapper .dataTables_filter input {
		/*font-size: 2.5rem;
		margin-left: 0px;*/
	}

	/* 9.2. Tamaño y ocultar el icono del buscador */
	/*#buscar_datatable{*/
	.ico-datatable-buscar{
		width: 76px;
		height: 76px;
	}

	/* 12. Tamaño de la carátula en datatable_biografia.js */
	.caratula{width: 200px;}

}/* Final @media(600) */



@media(min-width: 767px) {
	/* 2. Estilos generales*/
	/*Body recupera 15px, para ajustar el menú lateral*/
	body{ margin-left: 0px;}

	/* 5.5. Márgenes laterales de la información del campo detalles */
	p {
		margin-left: 25px;
	    margin-right: 25%;
	}

	/* 7. Grupos de elementos de información de la página */
/*	.cont_botones{ display: inline;}
	.cont_filtro{ display: inline;} */   

 	/* 8.1. Botones de Imprimir ocultar campos y búsqueda avanzada */
	.ico-datatable{
		width: 34px;
		height: 34px;
	}

	/* 8.2. Separación de los tres botones de edición*/
	.espacio_botones{
		margin-left: 15px !important;
	}	 

	/* 9.1. Caja de texto del buscador*/
	.dataTables_wrapper .dataTables_filter input {
		/*font-size: 1.6rem;
		margin-left: 0px;*/
	}

	/* 9.2. Tamaño y ocultar el icono del buscador */
	/*#buscar_datatable{*/
	.ico-datatable-buscar{
		width: 34px;
		height: 34px;
		display: inline;
	}

	/* 9.3. Propiedades del texto "Buscar" en el buscador*/
	div.dataTables_wrapper div.dataTables_filter input::placeholder {
	    opacity: 0;
	}	

	/* 10.1. Información en la parte inferior de la tabla */
	.dataTables_wrapper .dataTables_length, 
	.dataTables_wrapper .dataTables_filter, 
	.dataTables_wrapper .dataTables_info, 
	.dataTables_wrapper .dataTables_processing, 
	.dataTables_wrapper .dataTables_paginate {
	    color: #DBD2C8;
	    font-size: 1.2rem;
	}
	/*Paginación*/
	/*Número de página*/
	.dataTables_wrapper .dataTables_paginate .paginate_button {
		font-size: 1.2em;
	}

	/* 10.2. Tamaño y color (sobre), de los iconos de la paginación*/
	.ico-datatable-pagina{
	    width: 29px;
	    height: 29px;
	}

	/*11. Panel de búsqueda avanzada*/
	/* Contenedor de búsqueda avanzada*/
	.caja_filtro_avan{
		width: 70%;
		margin-left: 80px !important;
	}
	/*Afecta al selector de número de páginas para los registros de la tabla y
	los campos del buscador avanzado.*/
	.form-control {
		font-size: 1.3rem;
		color: #EBF2EF !important;
		background-color: #016C7A !important;
		border: 0px solid #016C7A;
		border-radius: .15rem;
		transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	}
	.form-control:hover {
		background-color: #00615C;
		border: 0px solid #ced4da;
	}

	.campos::placeholder { font-size: 0em;
color: red;
	}
}/* Final @media(767) */



@media(min-width: 900px) {
	/* 7. Grupos de elementos de información de la página */
/*	.cont_reg{ display: inline;}
	.cont_info{ display: inline;}
	.cont_pagina{ display: inline;	}*/

	/* 5.1. Cabecera con los campos de la tabla*/
	th{ font-size: 1.1em;}
	/*Contenidos de la tabla y del panel del buscador avanzado,
	Ver: 12. Búsqueda avanzada*/	
	td{ font-size: 1.2em;}   

	/* 11.1. Información general en la parte inferior de la tabla */
	/*Posición*/
	.dataTables_wrapper .dataTables_length {
    	margin-top: 10px;	
	}		
	.dataTables_wrapper .dataTables_paginate {
		margin-top: -100px;
	}
}/* Final @media(900) */



/*Con esta medida La posición no pega saltos entre 1000 y 1010px*/
@media(min-width: 991px) {
	/* 11.1. Información general en la parte inferior de la tabla */
	/*Posición*/
	.dataTables_wrapper .dataTables_paginate {
		margin-top: -60px;
	}
}



@media(min-width: 1023px) {
	/* 4. Titular y Subtítulo */
	h1{
		text-transform: none;
		text-align: left;
		font-weight: normal;
	}
	#subtitulo{
		visibility: visible;
		font-size: 0.4em;
	}

 	/* 8.1. Botones de Imprimir ocultar campos y búsqueda avanzada */
	.ico-datatable{
		width: 29px;
		height: 29px;
	}		

	/* 8.2. Separación de los tres botones de edición*/
	.espacio_botones{
		margin-left: 32px !important;
	}		

	/* 9.1. Caja de texto del buscador*/
	.dataTables_wrapper .dataTables_filter input {
		/*font-size: 1.2rem;
		margin-left: 0px;
		margin-top: 0px;
		margin-bottom: 0px;*/
	}

	/* 9.2. Tamaño y ocultar el icono del buscador */
	/*#buscar_datatable{*/
	.ico-datatable-buscar{
		width: 29px;
		height: 29px;
	}

}/* Final @media(1023) */