/* =====================================================================
   blog.css — lo mínimo que el blog añade al sistema
   ---------------------------------------------------------------------
   Casi todo sale ya de estilo.css y calculadora.css: el cuerpo del
   artículo es `.articulo`, las tablas ya están estilizadas, y el aviso
   final es `.descargo`. Aquí sólo vive lo que no existía.

   El índice NO son tarjetas. La guía lo prohíbe explícitamente («si
   necesitas un nivel más, el problema es la jerarquía»), y además una
   rejilla de tarjetas convertiría el blog en un escaparate cuando lo que
   es —lo que tiene que parecer— es el índice de un manual técnico:
   reglas horizontales, fecha grabada en mono, y el título mandando.

   Ni un hex, ni un px suelto: todo con tokens.

   OJO CON LOS NOMBRES DE CLASE
   Estas páginas cargan estilo.css y calculadora.css antes que este
   archivo, así que cualquier nombre repetido gana el último y rompe algo
   sin avisar. Aquí ya pasó: `.entrada` es el envoltorio de los campos de
   la calculadora (`display:flex`, borde y fondo), y el índice del blog
   salía partido en tres columnas. Antes de inventarte una clase nueva,
   compruébalo:
     grep -n "\.tu-clase[ ,{:]" ../estilo.css ../calculadora.css
   ===================================================================== */

/* ---------- Índice de artículos ---------- */
.lista-posts{border-top:1px solid var(--linea);max-width:68ch}
.post{border-bottom:1px solid var(--linea);padding:var(--e5) 0}
.post h2{font-size:var(--t-l);margin:var(--e2) 0}
.post h2 a{color:var(--tx);text-decoration:none}
.post h2 a:hover{color:var(--acento-tx);text-decoration:underline}
.post p{color:var(--tx2);font-size:var(--t-s);margin:0}

/* La fecha en mono y en versalitas: es un dato, y los datos van en la
   monoespaciada. Misma regla que las cifras del recibo. */
.meta-post{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:baseline;
  font-family:var(--dato);font-weight:500;font-size:var(--t-xxs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--tx2)}

/* ---------- Cabecera del artículo ---------- */
.post-cab{max-width:68ch;margin-bottom:var(--e6)}
.post-cab h1{margin:var(--e3) 0}

/* Volver al índice. Flecha de texto, no icono: la guía prohíbe los
   emojis como iconos, y una flecha ‹ es un carácter, no un dibujo. */
.volver{display:inline-block;margin-bottom:var(--e5);
  font-family:var(--display);font-weight:600;font-stretch:78%;
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx2);text-decoration:none}
.volver:hover{color:var(--acento-tx)}

/* ---------- La tabla que se recalcula sola ----------
   Cuando los datos en vivo fallan, la cabecera de la calculadora se
   marca en rojo en vez de disimular. Aquí igual: si la tabla está
   usando valores de reserva, se dice. */
.tabla-viva{margin:var(--e4) 0}
.sello-vivo{font-family:var(--dato);font-weight:500;font-size:var(--t-xxs);
  letter-spacing:.08em;color:var(--tx2);margin-top:var(--e2)}
.sello-vivo.est{color:var(--neg)}

/* Fila destacada de una tabla: el caso que responde a la pregunta del
   titular. Pletina amarilla al canto, no fondo amarillo — sobre chapa el
   amarillo sólo rellena o hace de canto, nunca es texto. */
tr.destacada td{background:var(--senal-tinte);font-weight:600}
tr.destacada td:first-child{box-shadow:inset 3px 0 0 var(--senal)}

/* ---------- Nota de fuente al pie de una tabla ---------- */
.nota-tabla{font-size:var(--t-xs);color:var(--tx2);margin-top:var(--e3);
  max-width:68ch}

/* ---------- Enlaces entre artículos ---------- */
.siguiente{border-top:1px solid var(--linea);margin-top:var(--e7);
  padding-top:var(--e5);max-width:68ch}
.siguiente .rotulo{margin-bottom:var(--e3)}