/* ============================================================
   malapraxismedica.legal · theme-article.css
   Maquetación del artículo largo: listas, tablas, FAQ, figuras
   y bloques de contenido relacionado.
   Todo se apoya en tokens.css. Ni un color ni un espaciado suelto.
   ============================================================ */

/* ---------- ritmo general de la prosa ---------- */
.mx-prose > * + * { margin-top: var(--s-5); }
.mx-prose > h2 + *,
.mx-prose > h3 + * { margin-top: var(--s-4); }

/* La entradilla del artículo pesa un punto más que el cuerpo. */
.mx-prose > p:first-child {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--ink-2);
}

/* ---------- LISTAS ----------
   Fuera los marcadores del navegador. La viñeta es un filete corto
   en acento; la numeración va en mono, que es la voz utilitaria del
   sistema y da sensación de expediente. */
.mx-prose ul,
.mx-prose ol {
  list-style: none;
  padding-left: 0;
  margin-top: var(--s-5);
}

.mx-prose li {
  position: relative;
  padding-left: var(--s-6);
  margin-top: var(--s-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.mx-prose li > strong:first-child { color: var(--ink); }

/* viñeta: filete corto, alineado a la altura de la primera línea */
.mx-prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--lh-body) * 0.5em);
  width: 1rem;
  height: var(--bw);
  background: var(--acc);
}

/* numeración en mono, tabular para que no baile */
.mx-prose ol { counter-reset: mxitem; }
.mx-prose ol > li { counter-increment: mxitem; }
.mx-prose ol > li::before {
  content: counter(mxitem, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-mono);
  color: var(--acc);
  line-height: calc(var(--lh-body) * 1em);
}

/* listas anidadas */
.mx-prose li > ul,
.mx-prose li > ol { margin-top: var(--s-2); }

/* ---------- TABLAS ----------
   Sin caja exterior: filetes horizontales, como una ficha de
   expediente. Cabecera en mono para separarla del cuerpo. */
.mx-prose figure.wp-block-table,
.mx-prose .mx-tablewrap {
  margin: var(--s-6) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mx-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  line-height: 1.5;
  text-align: left;
}

.mx-prose thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  vertical-align: bottom;
  padding: 0 var(--s-4) var(--s-3) 0;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}

.mx-prose tbody td {
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: var(--bw) solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
}

/* primera columna: es la que da entrada a la fila */
.mx-prose tbody td:first-child {
  color: var(--ink);
  font-weight: 500;
}

.mx-prose thead th:last-child,
.mx-prose tbody td:last-child { padding-right: 0; }

.mx-prose tbody tr:last-child td { border-bottom: 0; }
.mx-prose tbody tr:hover td { background: var(--sup-1); }

/* En móvil una tabla de varias columnas con texto largo es ilegible por
   mucho que quepa. Se apila: cada fila pasa a ser una ficha y cada celda
   muestra su encabezado desde data-label. */
@media (max-width: 640px) {
  .mx-prose figure.wp-block-table { overflow-x: visible; }
  .mx-prose table,
  .mx-prose thead,
  .mx-prose tbody,
  .mx-prose tr,
  .mx-prose td { display: block; width: 100%; }

  .mx-prose thead { display: none; }

  .mx-prose tbody tr {
    border-top: 2px solid var(--ink);
    padding: var(--s-4) 0;
  }
  .mx-prose tbody tr:hover td { background: none; }

  .mx-prose tbody td {
    padding: 0 0 var(--s-3) 0;
    border-bottom: 0;
    font-size: var(--fs-body);
  }
  .mx-prose tbody td:last-child { padding-bottom: 0; }

  /* el encabezado de la columna, encima del dato */
  .mx-prose tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--s-1);
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--ink-3);
  }

  /* la primera celda hace de título de la ficha */
  .mx-prose tbody td:first-child {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 600;
    letter-spacing: var(--tr-tight);
    color: var(--ink);
  }
}

/* ---------- PREGUNTAS FRECUENTES ----------
   Respuestas siempre visibles: se leen mejor y son citables.
   El bloque va sobre Bruma para separarse del cuerpo, y cada pregunta
   se numera en mono igual que las listas ordenadas del artículo. Nada de
   glifos sueltos: el número es el ancla visual. */
.mx-prose .mx-faq {
  margin-top: var(--s-6);
  background: var(--sup-1);
  border-top: 2px solid var(--ink);
  padding: var(--s-6) var(--s-6) var(--s-2);
  counter-reset: mxfaq;
}

.mx-prose .mx-faq__item {
  counter-increment: mxfaq;
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: var(--s-4);
  align-items: start;
  padding: 0 0 var(--s-5);
  margin-bottom: var(--s-5);
  border-top: 0;
  border-bottom: var(--bw) solid var(--line-2);
}
.mx-prose .mx-faq__item:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

/* número de la pregunta, en la columna estrecha */
.mx-prose .mx-faq__q::before {
  content: counter(mxfaq, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-mono);
  color: var(--acc);
  position: static;
}

.mx-prose .mx-faq__q {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: var(--s-4);
  align-items: baseline;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  margin: 0 0 var(--s-3) 0;
  padding-left: 0;
  position: static;
}

.mx-prose .mx-faq__a {
  grid-column: 2;
  padding-left: 0;
}
.mx-prose .mx-faq__a p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.mx-prose .mx-faq__a p + p { margin-top: var(--s-3); }

@media (max-width: 640px) {
  .mx-prose .mx-faq { padding: var(--s-5) var(--s-4) var(--s-2); }
  .mx-prose .mx-faq__item,
  .mx-prose .mx-faq__q { grid-template-columns: 2.25rem 1fr; column-gap: var(--s-3); }
  .mx-prose .mx-faq__a { grid-column: 1 / -1; }
}

/* ---------- FIGURAS DENTRO DEL TEXTO ---------- */
.mx-prose figure:not(.wp-block-table) { margin: var(--s-7) 0; }
.mx-prose figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-2);
}
.mx-prose figcaption {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-mono);
  color: var(--ink-3);
  padding-left: var(--s-4);
  border-left: 2px solid var(--acc);
}

/* Figura a sangre: se sale de la medida de lectura en pantallas anchas. */
@media (min-width: 1100px) {
  .mx-prose figure.mx-bleed {
    width: calc(100% + 8rem);
    margin-left: -4rem;
  }
}

/* ---------- CITAS Y AVISOS EN EL CUERPO ---------- */
.mx-prose blockquote {
  margin: var(--s-6) 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  border-left: 2px solid var(--acc);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--ink);
}
.mx-prose blockquote p { margin: 0; }

/* El bloque de fuentes normativas del pie del artículo. */
.mx-prose > p.mx-disclaimer { margin-top: var(--s-6); }

/* ---------- ENLACES DEL CUERPO ----------
   Subrayado fino que se engorda al pasar: se ve que es un enlace
   sin romper el gris del texto. */
.mx-prose a {
  color: var(--acc);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--acc) 35%, transparent);
  transition: text-decoration-color var(--dur-1) var(--ease-out);
}
.mx-prose a:hover { text-decoration-color: var(--acc); }

/* Enlace suelto en su propio párrafo: se comporta como llamada. */
.mx-prose p > a:only-child {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--tr-mono);
  text-decoration: none;
  border-bottom: var(--bw) solid var(--acc);
  padding-bottom: 2px;
}
.mx-prose p > a:only-child::after {
  content: " \2192";
  transition: transform var(--dur-1) var(--ease-out);
  display: inline-block;
}
.mx-prose p > a:only-child:hover::after { transform: translateX(3px); }

/* ---------- CONTENIDO RELACIONADO / GUÍAS ----------
   La sección existía sin estilos propios. */
.mx-related { border-top: var(--bw) solid var(--line); }
.mx-related .mx-shead { margin-bottom: var(--s-6); }

.mx-related .mx-grid { gap: var(--s-6); }

.mx-related .mx-post {
  border-top: 2px solid var(--ink);
  padding-top: var(--s-4);
  gap: var(--s-2);
  transition: border-color var(--dur-1) var(--ease-out);
}
.mx-related .mx-post:hover { border-top-color: var(--acc); }

.mx-related .mx-post__t {
  font-size: var(--fs-h4);
  line-height: var(--lh-head);
  transition: color var(--dur-1) var(--ease-out);
}

/* Extracto de la tarjeta: hasta ahora reutilizaba la clase de
   categoría, que es un caption gris diminuto. Por eso se veía raro. */
.mx-post__x {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-3);
  font-weight: 350;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mx-related .mx-post::after {
  content: "Leer \2192";
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-mono);
  color: var(--acc);
}

@media (max-width: 780px) {
  .mx-related .mx-grid { gap: var(--s-5); }
}

/* ---------- ÍNDICE LATERAL ---------- */
.mx-toc a { transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.mx-toc a:hover { color: var(--ink); border-left-color: var(--acc); }

/* ---------- IMPRESIÓN ---------- */
@media print {
  .mx-toc, .mx-related, .site-header { display: none; }
  .mx-article { grid-template-columns: 1fr; }
}

/* ---------- MINIATURA DE LA TARJETA ----------
   Las tarjetas del hub, de guias y de relacionados ya llevan portada. */
.mx-post__img {
  margin-bottom: var(--s-3);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--sup-2);
}
.mx-post__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-2) var(--ease-out);
}
.mx-post:hover .mx-post__img img { transform: scale(1.03); }

/* con imagen, el filete superior de la tarjeta sobra */
.mx-related .mx-post:has(.mx-post__img),
.mx-section .mx-post:has(.mx-post__img) { border-top: 0; padding-top: 0; }