/*
============================================================
 estilo_blog.css
 Estilos exclusivos para leer-articulo.php

 Cargar DESPUÉS de:
   /estilo/style.css
   /estilo/estilo.css

 Todo queda limitado a .texto-leer-articulo para no afectar
 al menú, footer, columna derecha ni al resto de la web.
============================================================
*/

.texto-leer-articulo
{
	/* Ajustes fáciles de modificar */
	--sangria-bullets: 34px;      /* desplaza la lista hacia la derecha */
	--espacio-bullet-texto: 4px;  /* separación entre bullet y texto */
	--espacio-parrafos: 8px;      /* separación creada al pulsar Enter */
	--color-borde-tabla: #dee2e6;
	--color-blockquote: #0d6efd;

	margin-top: 1.5em;
	font-size: 16px;
	line-height: 1.5;
	text-align: justify;
}


/* ==========================================================
   FOTO PRINCIPAL
   La foto YA usa Bootstrap:
   col-12 col-md-5 float-md-start me-md-4...
   No tocamos el float para que el texto siga rodeándola.
========================================================== */

.texto-leer-articulo > img
{
	height: auto;
}

/* En escritorio el float de Bootstrap se mantiene.
   En móvil Bootstrap ya quita el float y la deja a ancho completo. */


/* ==========================================================
   PÁRRAFOS
========================================================== */

.texto-leer-articulo p
{
	margin-top: 0;
	margin-bottom: var(--espacio-parrafos);
	padding: 0;
}

/* style.css elimina el margen del último párrafo de .content.
   Lo restauramos solamente dentro del artículo. */
.about .content .texto-leer-articulo p:last-child
{
	margin-bottom: var(--espacio-parrafos);
}


/* ==========================================================
   TÍTULOS DEL CONTENIDO
========================================================== */

.texto-leer-articulo h1,
.texto-leer-articulo h2,
.texto-leer-articulo h3,
.texto-leer-articulo h4,
.texto-leer-articulo h5,
.texto-leer-articulo h6
{
	padding: 0;
	color: inherit;
	text-align: left;
}

.texto-leer-articulo h1
{
    font-size: 16px;
    line-height: 1.25;
    font-weight: 400;
    margin: 0 0 8px 0;
}
.texto-leer-articulo h2
{
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	margin: 28px 0 12px 0;
}

.about .content .texto-leer-articulo h3
{
	font-size: 26px;
	line-height: 1.25;
	font-weight: 600;
	margin: 24px 0 10px 0;
	padding: 0;
}

.texto-leer-articulo h4
{
	font-size: 22px;
	line-height: 1.3;
	margin: 22px 0 10px 0;
}

.texto-leer-articulo h5
{
	font-size: 19px;
	line-height: 1.3;
	margin: 20px 0 10px 0;
}

.texto-leer-articulo h6
{
	font-size: 16px;
	line-height: 1.3;
	margin: 18px 0 10px 0;
}

/* El HTML actual contiene un H1 con un span a 1rem.
   Evita que el H1 aumente artificialmente esa primera línea. */
.texto-leer-articulo h1 span
{
	line-height: 1.45;
}


/* ==========================================================
   LISTAS
   Mantiene los bullets dentro del bloque de texto incluso
   mientras el texto está rodeando la imagen flotante.
========================================================== */

.about .content .texto-leer-articulo ul
{
	display: block;
	list-style-type: disc;
	list-style-position: outside !important;
	padding-left: var(--sangria-bullets) !important;
	margin-left: 0 !important;
	margin-top: 0;
	margin-bottom: var(--espacio-parrafos);
}

.about .content .texto-leer-articulo ul li
{
	position: static !important;
	padding-left: var(--espacio-bullet-texto) !important;
	text-indent: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 4px;
}

.about .content .texto-leer-articulo ul li + li
{
	margin-top: 0 !important;
}


/* Listas numeradas */
.about .content .texto-leer-articulo ol
{
	display: block;
	list-style-position: outside;
	padding-left: 40px;
	margin-top: 0;
	margin-bottom: 16px;
}

.about .content .texto-leer-articulo ol li
{
	position: static !important;
	padding-left: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 4px;
}


/* ==========================================================
   BLOCKQUOTE / BLOQUES DESTACADOS
========================================================== */

.texto-leer-articulo blockquote
{
	/*
	 * Al haber una imagen flotada a la izquierda, un blockquote normal
	 * puede extender su caja por detrás de la imagen. En ese caso la
	 * barra azul queda oculta y solo aparece cuando termina la foto.
	 *
	 * flow-root crea un nuevo contexto de formato y hace que el bloque
	 * se coloque correctamente al lado de la imagen, conservando visible
	 * la barra azul sin romper el efecto de texto rodeando la fotografía.
	 */
	display: flow-root;
	overflow: hidden;
	margin: 22px 0;
	padding: 8px 16px 8px 14px;
	border-left: 10px solid var(--color-blockquote);
	background: transparent;
	font-size: inherit;
	color: inherit;
}

.texto-leer-articulo blockquote p
{
	margin-bottom: 10px;
}

.texto-leer-articulo blockquote p:last-child
{
	margin-bottom: 0;
}

.texto-leer-articulo blockquote ul,
.texto-leer-articulo blockquote ol
{
	margin-bottom: 8px;
}


/* ==========================================================
   TABLAS
========================================================== */

.texto-leer-articulo table
{
	width: 100%;
	max-width: 100%;
	margin: 16px 0 28px 0;
	border-collapse: collapse;
	border-spacing: 0;
	text-align: left;
}

.texto-leer-articulo table th,
.texto-leer-articulo table td
{
	border: 1px solid var(--color-borde-tabla);
	padding: 10px 8px;
	vertical-align: top;
	text-align: left;
}

.texto-leer-articulo table th
{
	font-weight: 700;
}

.texto-leer-articulo table p
{
	margin: 0;
}


/* ==========================================================
   NEGRITAS, ENLACES E IMÁGENES INSERTADAS EN EL TEXTO
========================================================== */

.texto-leer-articulo strong,
.texto-leer-articulo b
{
	font-weight: 700;
}

.texto-leer-articulo a
{
	text-decoration: underline;
}

.texto-leer-articulo img:not(:first-child)
{
	max-width: 100%;
	height: auto;
}

.texto-leer-articulo iframe,
.texto-leer-articulo video
{
	max-width: 100%;
}


/* ==========================================================
   LÍNEAS HORIZONTALES
========================================================== */

.texto-leer-articulo hr
{
	margin: 24px 0;
	border: 0;
	border-top: 1px solid #dee2e6;
	opacity: 1;
}


/* ==========================================================
   MÓVIL
========================================================== */

@media (max-width: 767.98px)
{
	.texto-leer-articulo
	{
		font-size: 16px;
	}

	.texto-leer-articulo h2
	{
		font-size: 26px;
	}

	.about .content .texto-leer-articulo h3
	{
		font-size: 24px;
	}

	/* La foto principal ocupa todo el ancho y el texto queda debajo.
	   No se fuerza float: Bootstrap ya lo gestiona. */

	.texto-leer-articulo table
	{
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}