/* ----------------------------------------------------------- */
/* 1. CONFIGURACIÓN BASE                                       */
/* ----------------------------------------------------------- */
html {
    background: #DCE3E6;
    height: 100%;
}

body {
    background: #fff;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.6;
    margin: 2em auto; 
    padding: 2em;
    width: 90%;
    max-width: 900px;
    box-shadow: 0 0.3em 1em rgba(0,0,0,0.2);
    word-break: break-word;
    -webkit-text-size-adjust: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

/* ----------------------------------------------------------- */
/* 2. ENCABEZADO SUPERIOR (VISOR-CABECERA)                   */
/* ----------------------------------------------------------- */
#visor-cabecera {
    width: 100%;
    min-height: 80px;
    border-bottom: 8px solid #b2b2b2;
    margin-bottom: 2em;
    padding-bottom: 10px;
}

.herramientas {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#logo-izquierda {
    display: block;
}

#logo-izquierda h5 {
    text-align: left !important;
    font-size: 0.9em !important;
    font-weight: normal !important;
    color: #000000 !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.4;
}

#logo-izquierda p {
    margin: 0;
}

#logo-izquierda img {
    max-height: 18px !important;
    width: auto !important;
    display: inline-block !important;
}

#logo-derecha {
    display: block;
    text-align: right;
}

#logo-derecha img {
    max-height: 100px !important;
    width: auto !important;
}

/* ----------------------------------------------------------- */
/* 3. TÍTULOS Y ENCABEZADOS DEL ARTÍCULO                       */
/* ----------------------------------------------------------- */
h1, h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    display: block;
    padding: 10px 0;
}

h1 {
    font-size: 1.4em !important;
    line-height: 1.2 !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
    padding: 0 10px !important;
}

h2 {
    font-size: 1.4em !important;
    font-weight: normal !important;
    color: #555 !important;
}

h3, h4, h5 {
    text-align: center !important;
    margin-left: 0 !important;
}

/* ----------------------------------------------------------- */
/* 4. CONTENIDO Y COMPONENTES ESPECÍFICOS                      */
/* ----------------------------------------------------------- */
#contenedor-principal figure img,
#contenedor-principal .table-wrap img,
#contenedor-principal .disp-formula img {
    max-width: 60%;
    height: auto;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* ----------------------------------------------------------- */
/* 5. SECCIÓN DE REFERENCIAS Y BIBLIOGRAFÍA                    */
/* ----------------------------------------------------------- */
.seccion-referencias {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.lista-bibliografia {
    padding-left: 35px !important;
    padding-right: 10px !important;
    margin-left: 5px !important;
    list-style-position: outside !important; 
}

.lista-bibliografia li {
    margin-bottom: 10px;
    padding-left: 5px; 
}

/* ----------------------------------------------------------- */
/* 6. RESPONSIVE PARA MÓVILES                                  */
/* ----------------------------------------------------------- */
@media (max-width: 768px) {
    body {
        width: 95%;

        padding: 10px;
    }
    .herramientas {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    #logo-izquierda {
        text-align: center !important;
    }
    #logo-izquierda h5 {
        text-align: center !important;
    }
    #logo-derecha {
        text-align: center !important;
    }
	

/* Centraliza solo el título principal (h1) y el segundo título (h2) del inicio */
h1, h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    display: block;
    padding: 10px 0;
}
 h1 {
    text-align: center !important;
    font-size: 1.6em !important; /* Estaba en 2em por defecto, 1.6em es un tamaño más equilibrado */
    line-height: 1.2 !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
    padding: 0 10px !important; /* Espacio para que no toque los bordes en el celu */
}
 
	 h2 {
    text-align: center !important;
    font-size: 1.4em !important;
    font-weight: normal !important;
    color: #555 !important;
} 
	  
 
	 h6 {
    text-align: left!important;
    font-size: 0.9em !important;
    font-weight: normal !important;
    color: #000000 !important;
} 
	 
	  
/* Si tus títulos del cuerpo son h3, h4, etc., asegúrate de que sigan a la izquierda */
h3, h4, h5 {
    text-align: left !important;
    margin-left: 0 !important;
}

  /* Esto aplicará la misma tipografía a todo el documento */
  body, p, h1, h2, h3, div {
    font-family: Arial, Helvetica, sans-serif !important;
  }

 /* 1. Título principal del artículo (más grande y centrado) */
#title-block-header h1.title {
    font-size: 1.6em !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* 2. Títulos de las secciones del cuerpo (Introducción, Metodología, etc.) */
#contenedor-principal > h1 {
    font-size: 1.2em !important;
    text-align: left !important;
    margin-top: 1.5em !important;
    margin-bottom: 0.8em !important;
}
	/* Centrar imágenes mediante contenedor flexible y bloque */
img, 
figure img {
  display: block !important;
  margin: 15px auto !important;
  max-width: 100% !important;
  height: auto !important;
  float: none !important;
}

/* Si la imagen está dentro de un párrafo, forzar al párrafo a centrar su contenido */
p:has(img), 
div:has(img) {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

figure {
  display: block !important;
  text-align: center !important;
  margin: 20px auto !important;
  width: 100%;
}

figcaption {
  text-align: center !important;
}