/* Guías permanentes del blog (/blog/<slug>, categoría Guías).
   Se carga después de la parte cabeza. Usa .prosa, .tabla, .faq y .art-cta de paginas.css y base.css. */

/* Nota de fuente o de unidades debajo de una tabla */
.prosa .fuente { margin-top: .5em; font-size: 14px; line-height: 1.5; color: var(--texto-2); }
.prosa .tabla-wrap + .fuente { margin-top: -.9em; }

/* Encabezados de fila en las tablas de la nota */
.prosa .tabla tbody th { font-weight: 600; color: var(--marino); }
.prosa .tabla tr.total th, .prosa .tabla tr.total td { font-weight: 700; color: var(--marino); background: var(--claro); }

/* Preguntas frecuentes dentro del cuerpo de la nota */
.prosa .faq { margin-top: 1.4em; }
.prosa .faq summary { font-size: 17px; line-height: 1.45; }
.prosa .faq details p { font-size: 16px; line-height: 1.65; }

/* Dos botones en el cierre de la nota */
.art-cta-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.art-cta-botones .btn { margin-top: 0; }

/* Celda vacía de la esquina en tablas comparativas */
.prosa .tabla thead td { background: var(--claro); }

@media (max-width: 600px) {
  .prosa .tabla { font-size: 13px; }
  .prosa .tabla th, .prosa .tabla td { padding: 9px 7px; }
  .art-cta-botones .btn { flex: 1 1 100%; justify-content: center; }

  /* Tablas de texto (.apilada): en el celular cada fila pasa a ser un bloque,
     con el nombre de la columna arriba de cada dato (data-label en cada td). */
  .prosa .tabla.apilada thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .prosa .tabla.apilada,
  .prosa .tabla.apilada tbody,
  .prosa .tabla.apilada tr,
  .prosa .tabla.apilada th,
  .prosa .tabla.apilada td { display: block; }
  .prosa .tabla.apilada { font-size: 15px; }
  .prosa .tabla.apilada tr { padding: 14px 16px; border-bottom: 1px solid var(--borde); }
  .prosa .tabla.apilada tbody tr:last-child { border-bottom: 0; }
  .prosa .tabla.apilada th, .prosa .tabla.apilada td { padding: 0; border: 0; }
  .prosa .tabla.apilada th[scope="row"] { font-size: 16px; }
  .prosa .tabla.apilada td { margin-top: 8px; }
  .prosa .tabla.apilada td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--texto-2); }

  /* Variante para datos cortos: la etiqueta a la izquierda y el dato a la derecha */
  .prosa .tabla.apilada.en-linea td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; }
  .prosa .tabla.apilada.en-linea td[data-label]::before { margin-bottom: 0; font-size: 14px; font-weight: 500; letter-spacing: 0; }

  /* Tablas numéricas de muchas columnas: menos aire entre celdas */
  .prosa .tabla.compacta th, .prosa .tabla.compacta td { padding: 9px 4px; }
  .prosa .tabla.compacta th:first-child, .prosa .tabla.compacta td:first-child { padding-left: 8px; }
  .prosa .tabla.compacta th:last-child, .prosa .tabla.compacta td:last-child { padding-right: 8px; }
}