/*Pasos a hacer para pasar de InDesgin a HTML
ESTA REVISTA TINE MUCHOS LISTADOS DE NÚMEROS, LETRAS Y GUIONES Y A SU VEZ MUCHOS NIVELES, ¡¡¡¡CUIDADO!!!

-- Eliminamos la línea al CSS de indesign, eso lo he hecho a mano.
-- Sacamos la css de Erips, este fichero a una carpeta que se llama css y que está en el mismo directorio que los ficheros html.
-- A continuación mediante búsqueda remplazo pasamos de la css de cada artículo y que lleva el nombre del artículo a un valor genérico
Buscamos
		<link href="(.+)/css/E_RIPS.css" rel="stylesheet" type="text/css" />
        <link href="(.+)css/idGeneratedStyles.css" rel="stylesheet" type="text/css" />

Remplazmos por, así metemos la css y la fuentes propias de la revista
        <link href="css/E_RIPS.css" rel="stylesheet" type="text/css" />
		<link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet">

así conseguiremos que todos los ficheros "tirén" de la css común que está en en una carpeta que los ficheros html

-- En el body le ponemos el idioma, lang="es-ES" para que así corten palabras

-- Eliminamos todas los href: absolutos y los ponemos relativos, o sea, se buscan cadenas tipo
E-RIPS_vol_5_n_1_12_jose_manuel_santos_jaen_v1.html
y se eliminan, o sea, desde a continuación de la primera " del href, hasta antes del #,
de esa forma las tablas de contenido y lsa notas pasan de href absolutos a relativos. ESTO HAY QUE TENER CUIDADO. PRIMERO HACEMOS ESTA BÚSQUEDA REMPLAZO EN LAS LLAMADAS A LAS NOTAS EN EL TEXTO
que lo que conseguimos es las llamadas a las notas salgan entre corchetes y con fondito y todo llamadas relativas, además creamos en la CSS .notas

buscamos 
<span class="Notas"><span id="footnote-(\d{3})-backlink"><a class="_idFootnoteLink _idGenColorInherit" href="\d\d(.*?)#footnote-(\d{3})">\[(\d{1,3})\]</a></span></span>

convertimos en 
<span class="notas" id="footnote-$1-backlink"><a href="#footnote-$3">[ $4 ]</a></span>

eso para las llamadas, para el número de la notas buscamos
<p class="nota_pie"><a class="_idFootnoteAnchor _idGenColorInherit" href="\d\d(.*?)#footnote-(\d{3})-backlink">\[(\d{1,3})\]</a>

convertimos en
<p class="nota_pie"><a class="notas" href="#footnote-$2-backlink">[ $3 ]</a>



-- Añadimos el identificador id="sumario" a la palabra sumario, 
para así poder volver desde cualquier epígrafe al comienzo del sumario, debe quedar algo así
<h3 class="nivel01" id="sumario">Sumario</h3>

-- Añadimos la vuelta desde cada uno de los epígrafes a la palabra sumario, para ello buscamos el final de la etiqueta <h3>, o ses </h3> y le añadimos delante 
<span class="notas"><a href="#sumario">^</a></span>, o sea,
Buscar
</h3>

remplazar por
<span class="notas"><a href="#sumario">^</a></span></h3>


-- Para los orcid buscamos un patrón  (\d{4}-\d{4}-\d{4}-\d{4}) (con un espacio delante) y sustituimos por
<a href="https://orcid.org/$1">$1</a>

-- Para poner las notas con fondo lo que hacemos es que buscamos al final del documento
<h3 class="nivel02"></a>Notas<span class="notas"><a href="#sumario">^</a></span></h3>
			<div class="notas"> 
y lo cambiamos por
<h3 class="nivel02"></a>Notas<span class="notas"><a href="#sumario">^</a></span></h3>
            <div class="notas">
            
Para los logos del ORCID como tiene la class _idGenObjectAttribute-1", hacemos una búsqueda, hay que tener cuidado, hay que hacerla una a una por si acaso.
_idGenObjectAttribute-1"

remplazamos por
logo_ORCID"
*/

body,
div,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
code,
blockquote {
    margin: 0;
    padding: 0;
    border-width: 0;
}

div.notas {
    padding: 0.5em;
}

/*para que se vea "centrado" en la pantalla y con márgenes arriba y abajo*/

body {
    width: 90%;
    max-width: 1200px;
    margin: 3em auto;
    background-color: white;
}

div.Marco-de-texto-b-sico {
    border-style: solid;
}

/*Para el logo de la cabecera*/
img.logo{
    height: 6em;
    display:block;
    margin: 0 auto 3em;
}

/*tablas*/

/*para que las tablas tengan overflow*/
div.tabla {
	overflow-x: auto;
	margin-bottom: 1em;
}
/*Tablas generales van sin borde y con márgenes superior e inferior de 2rem*/
table.tabla_Erips, table.tabla_resumen {
	border-collapse:collapse;
	border:0 none #000000;
	margin: 2rem auto;
	width: 100%;
}
/*Las celdas normales van con borde un 1px y en azul y con un padding de 0.5 rem*/
td{
	padding: 0.5rem;
	vertical-align: top;
	border: 1px solid #4c93b8;
}

td.Celda_cabec {
    background-color: #bfd8e6;
    vertical-align: middle;
}

td.Celda_vacia {
    border-width: 0;
}

td.Tit_resumen_izq, td.resumen_izq, td.Tit_resumen_drch, td.resumen_drch, td.resumen_centro {
    margin-top: 1em;
    border: none;
	border-bottom: 1px solid #4c93b8;;
}

td.resumen_centro, td.resumen_izq, td.resumen_drch{
	border-bottom-width:0;
}

td.resumen_centro{
	width: 5%;
}

td.Tit_resumen_izq, td.resumen_izq {
	width: 75%;
}

td.Tit_resumen_drch, td.resumen_drch { 
	width: 20%;
}


/*títulos tablas*/

p.table_title {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 2em auto 1em;
    text-align: center;
    text-align-last: center;
    text-indent: 0;
}

p.tabla, p.tabla_centro, p.tabla_dere {
    font-size: 0.9rem;
    text-indent: 0;
}

p.tabla {
    text-align: left;
    text-align-last: left;
}

p.tabla_centro {
    text-align: center;
    text-align-last: center;
}

p.tabla_dere {
    text-align: right;
    text-align-last: right;
}

/*títulos*/

h1.title,
h1.lautios,
h2.subtitle {
    hyphens: none;
    color: #006599;
    font-family: "Cormorant Garamond SemiBold", serif;
    font-size: 2rem;
    font-style: normal;
    font-variant: normal;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0.5em;
    orphans: 2;
    page-break-after: auto;
    page-break-before: auto;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
    text-transform: none;
    widows: 2;
}

h1.lautios {
    background-color: #d9e8f0;
}

h2.subtitle {
    color: #333333;
    font-family: "Open Sans Semibold", sans-serif;
    font-size: 1.5rem;
    margin-top: 1em;
}


/*encabezados*/

h3.nivel01,
h3.nivel02,
h3.nivel03,
h3.nivel04 {
    hyphens: none;
    color: #006599;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.2rem;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1.4;
    margin: 2em 0 1em;
    orphans: 2;
    page-break-after: auto;
    page-break-before: auto;
    text-align: left;
    text-decoration: none;
    text-indent: 0;
    text-transform: none;
    widows: 2;
}

/*nivel 01 es negrita y mayúsculas*/
h3.nivel01 {
    font-weight: 600;
    text-transform: uppercase;
}

/*nivel 02 es negrita y sin las mayúsculas*/
h3.nivel02 {
    font-weight: 600;
    text-transform: none;
}

/*la diferencia entre el nivel 02 y 03 es la cursiva*/
h3.nivel03 {
    font-style: italic;
    font-weight: 500;
}

h3.nivel04 {
    font-style: normal;
    font-weight: normal;
}


h3.nivel01 + h3.nivel02, h3.nivel02 + h3.nivel03, h3.nivel03 + h3.nivel04 {
    margin-top: 0;
}

/*párrafos*/

p {
    color: #000000;
    font-family: "Open Sans Light", sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-variant: normal;
    font-weight: 300;
    line-height: 1.4;
    margin: 0;
    orphans: 2;
    page-break-after: auto;
    page-break-before: auto;
    text-align: justify;
    text-align-last: left;
    text-decoration: none;
    text-indent: 1.75em;
    text-transform: none;
    widows: 2;
    hyphens: auto;
}

p.autor {
    color: #006599;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 1em;
    text-align: center;
    text-align-last: center;
    text-indent: 0;
}

p.procedencia {
    text-align: center;
    text-align-last: center;
    text-indent: 0;
}

div.recibido, recibido_recesion {
    background-color: #d9e8f0;
    margin: 2em 0;
    padding: 0.5em;
}
p.recibido,
p.recibido_recesion {
    font-family: "Open Sans", sans-serif;
    color: #006599;
    text-align: right;
    text-align-last: right;
    text-indent: 0;
    margin: 0;
}

p.keywords {
    text-align: left;
    text-indent: 0;
}

p.resum_tit {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.2rem;
    font-weight: bold;
    text-align-last: left;
    text-indent: 0;
}

p.ss,
p.resumen_E,
p.resumen_I {
    text-indent: 0;
}

p.resumen_E + P.resumen_E, p.resumen_I + p.resumen_I {
    text-indent: 1.75rem;
}

p.bsc_CE, p.bsc_CE_ss, p.bsc_CE_centrado {
    margin-top: 1.5em;
}

p.bsc_CE_ss {
    text-indent: 0;
}

p.bsc_CE_centrado {
    text-align: center;
    text-align-last: center;
}
p.bibliog {
    margin-left: 1.75em;
    text-indent: -1.75em;
}

/*para las notas con listas y sangrías CS*/
p.nota_pie, p.nota_pie_1san, p.nota_pie_2san, p.nota_pie_CS {
    font-size: 0.9rem;
    text-indent: 0;
}

p.nota_pie_1san {
    margin-left: 3.4rem;
    text-indent: -1.3rem;
}

p.nota_pie_2san {
    margin-left: 4.4rem;
    text-indent: -1.3rem;
}

p.nota_pie_CS{
    text-indent: 1.75rem;
}

p.fuente_tabla {
    margin-top: 0.2em;
    font-size: 0.8rem;
    text-indent: 0;
    text-align: center;
    text-align-last: center;
}

p.lista_gui,
p.lista_let,
p.lista_num {
    margin: 1.5em 0 0 3.4em;
    text-indent: -1.65em;
}

p.lista_let, p.lista_gui {
    text-indent: -1.3em;
}


p.lista_num + p.lista_num, p.lista_let+ p.lista_let, p.lista_gui + p.lista_gui, p.lista_dentro + p.lista_num {
    margin-top: 0;
}

p.lista_gui_2,
p.lista_let_2,
p.lista_num_2{
    margin: 0 0 0 5.4em;
    text-indent: -1.65em;
}

/*párrafos siguientes a los números/letras/guiones sin números/letras/guiones*/
p.lista_dentro {
    margin: 0 0 0 3.4em;
    text-indent: 1.75em;
}

/*párrafos de citas dentro de una lista*/
p.cita_lista_dentro {
    margin: 1.5em 1.75em 0 5.15em;
    text-indent: 1.75em;
    font-size: 0.95rem;
}

p.cita_lista_dentro + p.cita_lista_dentro {
    margin: 0 1.75em 0 5.15em;
}

p.cita_lista_dentro + p.lista_dentro {
    margin-top: 1.5em;
}

/*párrafos de cita, listas dentro de citas y nivel dos de listas dentro de citas*/
p.cita, p.cita_ss, p.cita_1, p.cita_lista_1, p.cita_lista_2 {
    margin: 1.5em 1.75em 0;
    text-indent: 1.75em;
    font-size: 0.95rem;
}

p.cita + p.cita, p.cita_1 + p.cita {
    margin: 0 1.75em;
}

p.cita_1 {
    margin-top: 1.5em;
}

p.cita_ss {
    text-indent: 0;
}

p.cita_lista_1 {
    margin: 0 1.75em 0 5.5em;
    text-indent: -1.5em;
}

p.cita_lista_2 {
    margin: 0 1.75em 0 7em;
    text-indent: -1.5em;
}

p + p.citar_articulo_ss_B {
    margin-top: 2rem;
}

/*párrafos de dedicatorias y firmas de dedicatoria*/
p.dedicatoria, p.dedicatoria_firma {
    margin: 1em 0 1em 25%;
    text-indent: 1.75em;
    font-size: 0.95rem;
}

p.dedicatoria_firma {
    text-align-last: right;
}

p.zz-doicp {
    color: #006599;
    font-family: "Times New Roman", serif;
    font-size: 1rem;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1.4;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    orphans: 1;
    page-break-after: auto;
    page-break-before: auto;
    text-align: left;
    text-decoration: none;
    text-indent: 0;
    text-transform: none;
    widows: 1;
}

p.fig {
    color: #000000;
    font-family: "Cormorant Garamond SemiBold", serif;
    font-size: 1rem;
    font-weight: normal;
    margin: 0.5em auto 2em;
    text-align: center;
    text-align-last: center;
    text-indent: 0;
}


/* párrafos para el sumario*/
p.summ,
p.summ02,
p.summ03,
p.summ04 {
    color: #000000;
    font-family: "Open Sans Light", sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-variant: normal;
    font-weight: 300;
    line-height: 1.4;
    margin: 0;
    orphans: 2;
    page-break-after: auto;
    page-break-before: auto;
    text-align: left;
    text-align-last: left;
    text-decoration: none;
    text-transform: uppercase;
    widows: 2;
    text-indent: 0em;
}

p.summ02 {
    margin-left: 2em;
    text-indent: -1em;
    text-transform: none;
}

p.summ03 {
    margin-left: 3em;
    text-indent: -1em;
    text-transform: none;
}

p.summ04 {
    margin-left: 4em;
    text-indent: -1em;
    text-transform: none;
}

p.pie_primero {
    color: #006599;
    font-family: "Cormorant Garamond", serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1.4;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    orphans: 1;
    page-break-after: auto;
    page-break-before: auto;
    text-align: left;
    text-decoration: none;
    text-indent: 0;
    text-transform: none;
    widows: 1;
}

span.bold {
    font-style: normal;
    font-weight: bold;
}

span.light_italic {
    /* color:#b10061; */
    font-style: italic;
    font-weight: normal;
}

span.mayusc_semib_italic {
    font-style: italic;
    font-variant: normal;
    font-weight: bold;
    text-transform: uppercase;
}

span.mayúsculas_italic {
    font-style: italic;
    font-variant: normal;
    font-weight: normal;
    text-transform: uppercase;
}

span.oculto {
    font-size: 0px;
}

span.numeros_listas {
    display: inline-block;
    width: 0.05rem;
}

span._idGenBNMarker-2 {
    display: inline-block;
    text-indent: 0;
    width: 23px;
}


/*para las notas, llamadas y vueltas, fondeamos el numero para ello pasamos el span de la llamadas a span class="notas",
 y la vuelta en el <a class="_idFootnoteAnchor _idGenColorInherit> convertimos en <a class="notas">*/

.notas {
    /* display:inline-block; */
    background-color: #d9e8f0;
    color: #006599;
}


img.logo_ORCID {
    height: 13px;
    /* width: 11px; */
}


/*Para los enlaces*/

a {
    color: #006599;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: none;
}


/* para las imágenes, lo de inline es para que el ORCID quede bien, y lo de abajo es para que las fotos se centren*/

img {
    display: inline;
    margin: auto;
}

img._100,
img._50,
img._75 {
    display: block;
    margin: 1em auto;
}

@media only screen and (min-width: 800px) and (max-width: 1200px) {
    img._100 {
        width: 70vw;
    }
    img._75 {
        width: 60vw;
    }
    img._50 {
        width: 50vw;
    }
}

@media only screen and (max-width: 799px) {
    img._100 {
        width: 95vw;
    }
    img._75 {
        width: 90vw;
    }
    img._50 {
        width: 85vw;
    }
}

.overlay {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* background: rgba(0, 0, 0, 0.7); */
    /* transition: opacity 50ms; */
    visibility: hidden;
    opacity: 0;
}

.overlay:target {
    visibility: visible;
    opacity: 1;
}

.popupBody {
    width: 46%;
    padding: 2%;
    border-radius: 15px;
    box-shadow: 0 0 5px #CCC;
    background: #FFF;
    position: relative;
    /* transition: all 5s ease-in-out; */
    margin: 20% auto;
}

/* #cerrar {
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #F00;
} */