/* ============================================================
   pmh — cómo se ve un texto escrito en Markdown   (2026-10-22)
   ------------------------------------------------------------
   La hoja de todo lo que sale de md2html() (inc/markdown.php) en
   pmh. La usan DOS lugares, y es a propósito que sea la misma:

     contenido.php    el artículo y el listado (la página pública)
     admin-texto.php  la VISTA PREVIA del editor

   Si la previa tuviera estilos propios mostraría algo distinto de
   lo que después se publica, y dejaría de servir para lo único que
   existe. Lo de la pantalla de edición (textarea, recuadros,
   instructivo) está aparte, en css/markdown-editor.css.

   Todo cuelga de .md-doc, el div que envuelve el texto en las dos
   puntas. Traído de desafiopinto (css/rp-markdown.css) y pasado al
   fondo oscuro de pmh: los colores salen del texto que hereda
   (.dark de Canvas) y las líneas son blanco transparente, así
   sirven sobre cualquier oscuro.

   POR QUE HACE FALTA
   ------------------
   El tema (Canvas, style.css) le pone `margin-bottom: 30px` a TODA
   <ul> y <ol> — también a las anidadas — y saca las viñetas en
   varios contextos. Un texto largo es justamente párrafos, listas,
   citas y alguna tabla.
   ============================================================ */

.md-doc {
	line-height: 1.75;
	overflow-wrap: break-word;
	--md-linea: rgba(255, 255, 255, .14);
	--md-fondo: rgba(255, 255, 255, .06);
	--md-suave: rgba(255, 255, 255, .62);
	--md-acento: var(--cnvs-themecolor, #ff3d00);
}

.md-doc > *:first-child { margin-top: 0; }
.md-doc > *:last-child  { margin-bottom: 0; }


/* --- Títulos ------------------------------------------------- */

.md-doc h1,
.md-doc h2,
.md-doc h3,
.md-doc h4,
.md-doc h5,
.md-doc h6 {
	line-height: 1.3;
	font-weight: 600;
	color: inherit;
}

.md-doc h1 { font-size: 1.6rem;  margin: 0 0 1rem; }

.md-doc h2 {
	font-size: 1.32rem;
	margin: 2.4rem 0 .9rem;
	padding-bottom: .35rem;
	border-bottom: 1px solid var(--md-linea);
}

.md-doc h3 { font-size: 1.14rem; margin: 2rem 0 .7rem; }
.md-doc h4 { font-size: 1rem;    margin: 1.7rem 0 .5rem; }

.md-doc h5,
.md-doc h6 {
	font-size: .92rem;
	margin: 1.5rem 0 .4rem;
	color: var(--md-suave);
	text-transform: uppercase;
	letter-spacing: .05em;
}


/* --- Párrafos ------------------------------------------------ */

.md-doc p { margin: 0 0 1.15rem; }

.md-doc strong { font-weight: 700; }
.md-doc del    { color: var(--md-suave); }

.md-doc a {
	color: var(--md-acento);
	text-decoration: underline;
	text-underline-offset: 2px;
}


/* --- Listas --------------------------------------------------
   El `margin` de las anidadas es lo que saca el pozo de 30px que
   mete el tema adentro del <li> del que cuelgan. */

.md-doc ul,
.md-doc ol {
	margin: 0 0 1.15rem;
	padding-left: 1.6rem;
}

.md-doc ul ul, .md-doc ul ol,
.md-doc ol ol, .md-doc ol ul {
	margin: .3rem 0;
}

.md-doc li { margin-bottom: .35rem; }
.md-doc li:last-child { margin-bottom: 0; }

.md-doc li > p { margin-bottom: .6rem; }
.md-doc li > p:last-child { margin-bottom: 0; }

.md-doc ul       { list-style: disc; }
.md-doc ul ul    { list-style: circle; }
.md-doc ul ul ul { list-style: square; }
.md-doc ol       { list-style: decimal; }
.md-doc ol ol    { list-style: lower-alpha; }
.md-doc ol ol ol { list-style: lower-roman; }

.md-doc li::marker { color: var(--md-suave); }


/* --- Cita / destacado ---------------------------------------- */

.md-doc blockquote {
	margin: 1.6rem 0;
	padding: .2rem 0 .2rem 1.2rem;
	border-left: 3px solid var(--md-acento);
	color: var(--md-suave);
	font-style: italic;
	font-size: 1.02rem;
}

.md-doc blockquote > *:last-child { margin-bottom: 0; }


/* --- Línea divisoria ----------------------------------------- */

.md-doc hr {
	margin: 2.4rem auto;
	width: 40%;
	border: 0;
	border-top: 1px solid var(--md-linea);
	opacity: 1;               /* bootstrap la deja en .25 y casi no se ve */
}


/* --- Tablas --------------------------------------------------
   md_tabla() envuelve cada tabla en .md-tabla para que en un
   teléfono se pueda arrastrar de costado. Sin eso, lo que desborda
   no es la tabla: es la página entera. */

.md-tabla {
	margin: 0 0 1.4rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.md-doc table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: .95rem;
	color: inherit;
	--bs-table-bg: transparent;    /* la clase .table de bootstrap pinta fondo blanco */
	--bs-table-color: inherit;
}

.md-doc th,
.md-doc td {
	padding: .55rem .8rem;
	border-bottom: 1px solid var(--md-linea);
	text-align: left;
	vertical-align: top;
}

.md-doc thead th {
	background: var(--md-fondo);
	border-bottom: 2px solid var(--md-linea);
	font-weight: 600;
	white-space: nowrap;
}

.md-doc tbody tr:last-child td { border-bottom: 0; }


/* --- Código -------------------------------------------------- */

.md-doc code {
	padding: .1em .35em;
	background: var(--md-fondo);
	border-radius: 4px;
	font-size: .9em;
	color: inherit;
}

.md-doc pre {
	margin: 0 0 1.3rem;
	padding: .9rem 1.1rem;
	background: var(--md-fondo);
	border: 1px solid var(--md-linea);
	border-radius: 6px;
	overflow-x: auto;
	color: inherit;
}

.md-doc pre code {
	padding: 0;
	background: none;
	font-size: .88rem;
}


/* --- Imágenes ------------------------------------------------ */

.md-doc img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}


/* --- Pantallas chicas ---------------------------------------- */

@media (max-width: 575px) {

	.md-doc { line-height: 1.7; }

	.md-doc h1 { font-size: 1.4rem; }
	.md-doc h2 { font-size: 1.18rem; margin-top: 1.9rem; }

	.md-doc ul,
	.md-doc ol { padding-left: 1.3rem; }

}