﻿/* ==========================================================================
   Estilos modernos para Revista Científica - Adaptación CSIC
   ========================================================================== */

/* --- Variables de Color y Tipografía (Extraídas del logo CSIC) --- */
@import 'https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i&subset=cyrillic,cyrillic-ext,latin-ext'; 
:root {
    --csic-red: #A6192E;        /* Rojo corporativo CSIC */
    --csic-grey: #8A8B8C;       /* Gris corporativo */
    --text-dark: #2C2C2C;       /* Texto principal */
    --text-light: #595959;      /* Texto secundario/metadatos */
    --bg-page: #F4F5F7;         /* Fondo exterior gris de la pantalla */
    --bg-paper: #FFFFFF;        /* Fondo blanco del artículo */
    --border-color: #E2E2E2;
    
    --font-ui: "Roboto",sans-serif,"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue"; /* Títulos y UI */
    --font-text: "Roboto",sans-serif,"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue";          /* Cuerpo de texto */
}

/* --- Reseteo y Estructura Global --- */
* {
    box-sizing: border-box;
}

html {
    background-color: var(--bg-page);
    margin: 0;
    padding: 0;
}

body {
    max-width: 1028px; /* 900px de contenido + 128px de padding */
    margin: 3rem auto;
    background-color: var(--bg-paper);
    padding: 4rem 4rem 4rem 4rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    color: var(--text-dark);
    font-family: var(--font-text);
    line-height: 1.7;
}
.bold{
	font-weight: bold;
}
.italic{
	font-style: italic;
}
/* --- Cabecera: Logo y Metadatos --- */

/* Posicionamos el contenedor del SVG a la izquierda */
.imagen {
    float: left;
    width: 244px;
    margin-top: 0.6rem;
}

svg {
    width: 56%;
    height: auto;
    display: block;
    margin-top: 7px;
}

/* Contenedor principal de metadatos */
.meta {
    text-align: right;
	margin-bottom: 2.5rem
}

/* Contenedor del artículo (NUEVO ID) */
.articulo {
	/*border-top: 1px solid var(--border-color);*/ /* Línea divisoria de cabecera */
    /*padding-top: 3.5rem;*/
    margin-top: 4.5rem;
    clear: both;
}

a, .hipervinculo {
    color: var(--csic-red);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover, .hipervinculo:hover {
    color: #801222;
    text-decoration: underline;
}

.NIVELES-SUMARIO_NIVEL-1-SUMARIO a, .NIVELES-SUMARIO_NIVEL-2-SUMARIO a, .NIVELES-SUMARIO_NIVEL-3-SUMARIO a{
	color: var(--text-dark);
}
.BIBLIOGRAFIA_BIBLIOGRAFIA-PARRAFO a{
	color: var(--text-dark);
}

/* --- Textos de Cabecera y Metadatos --- */
.CABECERA_REVISTA {
    font-family: var(--font-ui);
    /*text-transform: uppercase;*/
    letter-spacing: 2px;
    font-size: 1.1rem;
    color: var(--csic-red);
/*    border-bottom: 2px solid var(--csic-red);
    padding-bottom: 0.5rem;*/
    margin-bottom: 0.2rem;
    font-weight: 600;
	font-style: italic;
}

.CABECERA_NUMERO, 
.CABECERA_ISSN, 
.CABECERA_DOI {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0;
	line-height: 1.3rem;
}

.CABECERA_SECCION {
    font-family: var(--font-ui);
    font-size: 1.4rem;
    color: var(--text-dark);
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
	border-top: 1px solid var(--text-dark);
	border-bottom: 1px solid var(--text-dark);
	padding: 0.5rem 0rem;
	margin-top: 4rem;
    clear: both; /* IMPORTANTE: Empuja "ARTICLE" debajo del logo para centrarlo en la hoja */
    display: block;
}

/* --- Títulos del Artículo --- */
.CABECERA_TITULO-ESP {
    font-family: var(--font-ui);
    font-size: 1.5rem;
    color: var(--text-dark);
    line-height: 2.2rem;
    margin-bottom: 1rem;
    text-align: center;
}

.CABECERA_TITULO-ENG {
    font-family: var(--font-ui);
    font-size: 1.2rem;
    color: var(--text-light);
    line-height: 1.9rem;
    font-weight: normal;
    margin-bottom: 1rem;
    text-align: center;
}

/* --- Autores y Filiaciones --- */
/*p.CABECERA_AUTOR:first-of-type{*/
.CABECERA_AUTOR {
	font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: bold;
    margin: 1.2rem 0 0.2rem 0;
    color: var(--text-dark);
	margin-top: 4rem;
	text-align: center;
}
/*.CABECERA_AUTOR {*/
.CABECERA_AUTOR ~ .CABECERA_AUTOR {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: bold;
    margin: 1.2rem 0 0.2rem 0;
    color: var(--text-dark);
	text-align: center;
}

.CABECERA_FILIACION, 
.CABECERA_AUTOR-LINKS {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 0.2rem 0;
	text-align: center;
}

/* --- Resumen y Palabras Clave --- */
.CABECERA_ABSTRACT, 
.CABECERA_RESUMEN,
.CABECERA_INFO-TITULO {
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--csic-red);
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.CUERPO_ABSTRACT_RESUMEN,
.CABECERA_KEYWORDS, 
.CABECERA_PALABRAS-CLAVE {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    background-color: var(--bg-page);
    padding: 1rem;
    border-left: 4px solid var(--csic-red);
    margin: 1rem 0;
    color: var(--text-light);
    text-align: justify;
    line-height: 1.6;
}

/* --- Bloque de Información Legal/Fechas --- */
.INFORMACION {
    background-color: var(--bg-page);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    border-radius: 6px;
    margin: 2.5rem 0;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--text-light);
}

.CABECERA_FECHAS, 
.CABECERA_CITACION, 
.CABECERA_CC-TEXTO {
    margin: 0.5rem 0;
}
.CABECERA_FECHAS a, 
.CABECERA_CITACION a, 
.CABECERA_CC-TEXTO a, 
.NOTAS a {
	color: var(--text-light);
}
/* --- Índice / Sumario (CLASES ACTUALIZADAS) --- */
.P-rrafo-b-sico { 
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    margin-top: 2rem;
    color: var(--text-dark);
    text-transform: uppercase;
}

.NIVELES-SUMARIO_NIVEL-1-SUMARIO {
    font-family: var(--font-ui);
    font-size: 1rem;
    margin: 0.5rem 0;
}

.NIVELES-SUMARIO_NIVEL-2-SUMARIO {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    margin: 0.3rem 0 0.3rem 1.5rem;
    color: var(--text-light);
}

.NIVELES-SUMARIO_NIVEL-3-SUMARIO {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    margin: 0.2rem 0 0.2rem 3rem;
    color: var(--text-light);
}

/* --- Cuerpo del Artículo --- */
.ARTICULO_NIVEL-1, .P-rrafo-b-sico {
    font-family: var(--font-ui);
    font-size: 1.2rem;
    color: var(--csic-red);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.ARTICULO_NIVEL-2 {
    font-family: var(--font-ui);
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.ARTICULO_NIVEL-3 {
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--text-dark);
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
}

.ARTICULO_PARRAFO, 
.Normal {
    text-align: justify;
    /*margin-bottom: 1.5rem;*/
    font-size: 0.9rem;
}
.ARTICULO_CITA-PARRAFO{
	margin-left: 50px;
	font-size: 0.8rem;
}
.NOTAS{
	font-size: 0.8rem;
    text-indent: -0.64rem;
}
.NOTAS .superindice{
	font-size: 0.6rem;
    vertical-align: super;
    display: inline-block;
    width: 0.4rem;
}
a.superindice {
    font-size: 0.6rem;
    vertical-align: super;
}

/* Listas dentro del texto */
ul {
    padding-left: 2rem;
    margin-bottom: 1.5rem;
}

.LISTA-RAYA-NIVEL-2, .LISTA-NUMERO-NIVEL-1 {
    margin-bottom: 0.5rem;
    text-align: justify;
	font-size: 0.9rem;
}

/* --- Imágenes y Pies de foto --- */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2.5rem auto 1rem auto;
    border-radius: 4px;
}

.IMAGENES_IMAGEN-PIE, 
.List-Paragraph  {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--text-light);
    text-align: center;
    margin-bottom: 2rem;
	margin-top: 0rem;
    padding: 0 2rem;
	font-weight: bold;
}
.IMAGEN-TITULO,
.TABLAS_TITULOS-TABLA  {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--text-light);
    text-align: center;
	margin-top: 2rem;
	margin-bottom: 0.8rem;
    padding: 0 2rem;
	font-weight: bold;
}
.tooltip {
    position: static;
          display: inline-block;
}
.tooltip-content {
    display: none;
    position: absolute;
	background-color: #f9f9f9;
    max-width: 50%;
    min-width: auto;
    box-shadow: 5px 5px 16px 20px rgba(0,0,0,0.2);
    padding: 12px 16px;
    border-radius: 15px;
    text-align: justify;
	z-index: 1;
	color: #000000; 
}
.tooltip:hover .tooltip-content {
    display: block;
    position: absolute;
}

.tooltip:hover .tooltip-fig {
    display: block;
    position: absolute;
} 		  

/* --- Estilos de Tablas Científicas --- */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 0rem auto;
    font-family: var(--font-ui);
    font-size: 0.9rem;
}

table td, 
table th {
    /*padding: 12px 15px;*/
    border: 1px solid var(--text-dark);
}

table tr:first-child td,
table tr:first-child th {
    /*border-top: 2px solid var(--text-dark);
    border-bottom: 2px solid var(--text-dark);
    font-weight: bold;*/
}

table tr:last-child td {
    /*border-bottom: 2px solid var(--text-dark);*/
}

.TABLAS_TABLA-PARRAFO-CENT {
    text-align: center;
	margin: 0.5rem;
}

.TABLAS_TABLA-PARRAFO-IZQ {
    text-align: left;
 	padding-left: 0.6rem;
}

td p.IMAGEN-TITULO{
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: bold;
    text-align: center;
/*    margin-top: 2.5rem;
    margin-bottom: 1rem;*/
	margin: 0.5rem;
    color: var(--text-dark);	
}

/* --- Créditos Finales --- */
.creditos, 
.TEXTO-CREDITOS {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0.5rem 0;
    display: block;
}

.texto_creditos {
    font-weight: bold;
    color: var(--text-dark);
    display: inline-block;
    margin-top: 1.5rem;
}

/* --- Referencias Bibliográficas --- */
.REF-TITULO {
    font-family: var(--font-ui);
    font-size: 1.2rem;
    color: var(--csic-red);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
}

.BIBLIOGRAFIA_BIBLIOGRAFIA-PARRAFO {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    line-height: 1.5;
    padding-left: 2.5rem;
    text-indent: -2.5rem;
    margin-bottom: 0.8rem;
    text-align: left;
}
.zoom{      
	transition: width 1s, height 1s, transform 1s;
    -moz-transition: width 1s, height 1s, -moz-transform 1s;
    -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
    -o-transition: width 1s, height 1s,-o-transform 1s;
    cursor: zoom-in;
}
        
.zoom:hover{      
    transform : scale(1.1);
    -moz-transform : scale(1.1);    
    -webkit-transform : scale(1.1);  
    -o-transform : scale(1.1);      
} 

/* --- Adaptabilidad (Móviles y Tablets) --- */
@media (max-width: 1024px) {
    body {
        margin: 0;
        border-radius: 0;
        padding: 2rem 1.5rem;
        max-width: 100%;
    }
    
    body > div:first-child {
        float: none;
        width: 100%;
        max-width: 250px;
        margin: 0 auto 1.5rem auto;
    }
    
    #_idContainer001 {
        text-align: center;
    }
    
    .CABECERA_SECCION {
        margin-top: 2rem;
    }

    .CABECERA_TITULO-ESP {
        font-size: 1.8rem;
        text-align: center;
    }
    
    .CABECERA_TITULO-ENG {
        font-size: 1.3rem;
        text-align: center;
    }
    
    .BIBLIOGRAFIA_BIBLIOGRAFIA-PARRAFO {
        padding-left: 1.5rem;
        text-indent: -1.5rem;
    }
}