/* =========================================================================
   NOEMA · Actualizaciones · feed y detalle  (D13 y D14)
   Una hoja para las dos páginas. Verde en todo: en el sistema es el
   contexto y la investigación, y es el color que ya tiene esta sección en
   la barra.

   ORDEN DEL ARCHIVO
   01 · Cabecera del feed
   02 · La cola editorial
   03 · El filtro
   04 · La entrada del feed
   05 · Paginación con final visible
   06 · El detalle (D14)
   07 · Trazabilidad
   08 · Puntos de corte
   09 · Impresión
   ========================================================================= */


/* 01 · CABECERA DEL FEED ================================================= */
.cabecera-feed { padding-top: var(--e9); padding-bottom: var(--e7); }
.antetitulo-verde { color: var(--verde-profundo); }


/* 02 · LA COLA EDITORIAL =================================================
   Los números de la quincena, incluidos los descartados. Sin ese último
   número la capa 2 parece un sello de goma: si todo lo que entra se
   publica, no hay validación, hay tránsito. */
.cola {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--regla);
  margin-bottom: var(--e6);
}
.cola > div {
  padding: var(--e5) var(--e5) 0 0;
  border-right: 1px solid var(--borde-sutil);
}
.cola > div:last-child { border-right: 0; }
.cola > div:not(:first-child) { padding-left: var(--e5); }
.cola .rotulo {
  display: block;
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--verde-profundo); margin-bottom: 6px;
}
.cola .valor {
  font-family: var(--grot); font-weight: 700; font-size: 30px;
  letter-spacing: -.02em; color: var(--texto-principal);
}
.cola .glosa {
  display: block; font-size: 13px; color: var(--texto-secundario); margin-top: 4px;
}
/* El descarte es el dato que sostiene el modelo. Se marca. */
.cola .descartados .valor { color: var(--verde-profundo); }

.sello-revision {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e4) var(--e5);
  border-radius: var(--r-m);
  background: rgba(193, 229, 78, .30);
  font-family: var(--grot); font-size: 14px; line-height: 1.5;
  color: var(--texto-secundario);
  max-width: 68ch;
}
.sello-revision b { color: var(--texto-principal); font-weight: 600; }
.sello-revision .ms { color: var(--verde-profundo); margin-top: 2px; }


/* 03 · EL FILTRO ========================================================= */
.filtro-franja {
  position: sticky; top: var(--tope-filtro, var(--alto-nav)); z-index: 60;
  padding-block: var(--e4);
  background: var(--fondo-pagina);
  box-shadow: 0 1px 0 var(--borde-sutil);
}
.filtro-franja .contenido {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e5); flex-wrap: wrap;
}
.filtro { display: flex; gap: var(--e2); flex-wrap: wrap; }
.filtro button {
  font-family: var(--grot); font-size: 14px; font-weight: 500;
  padding: 9px 16px;
  border-radius: var(--r-boton);
  border: 1px solid var(--borde-sutil);
  background: var(--fondo-superficie);
  color: var(--texto-secundario);
  cursor: pointer;
}
.filtro button:hover { border-color: var(--borde-fuerte); color: var(--texto-principal); }
/* Verde lleno con papel encima: 5,8:1. */
.filtro button[aria-pressed="true"] {
  background: var(--verde-pleno); border-color: var(--verde-pleno); color: var(--papel);
}
.filtro .cuantos { opacity: .7; font-variant-numeric: tabular-nums; }
.conteo { margin: 0; }


/* 04 · LA ENTRADA DEL FEED ===============================================
   Fila con la fecha a la izquierda, como una bitácora. El «qué no cambió»
   se asoma ya aquí: es el campo que distingue esto de un changelog. */
.entradas { list-style: none; margin: 0; padding: 0; }
.entrada + .entrada { margin-top: var(--e4); }

.entrada a {
  display: grid; grid-template-columns: 116px minmax(0, 1fr);
  gap: var(--e6);
  padding: var(--e6);
  border-radius: var(--r-l);
  background: var(--fondo-superficie);
  text-decoration: none; color: inherit;
  transition: transform var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.entrada a:hover { transform: translateY(-2px); }
.entrada a:hover .entrada-titulo { text-decoration: underline; text-underline-offset: 4px; }

.entrada-fecha {
  font-family: var(--grot); font-size: 13px; font-weight: 600;
  color: var(--texto-secundario);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.entrada-fecha .dia {
  display: block;
  font-size: 26px; font-weight: 700; letter-spacing: -.02em;
  color: var(--texto-principal);
  line-height: 1;
}
.entrada-tema {
  display: inline-block; margin-top: var(--e3);
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--verde-profundo);
}

.entrada-titulo {
  font-family: var(--serif); font-weight: 700;
  font-size: 22px; line-height: 1.2;
  margin: 0 0 var(--e2);
}
.entrada-resumen {
  font-family: var(--grot); font-size: 15px; line-height: 1.55;
  color: var(--texto-secundario);
  margin: 0 0 var(--e4);
}
.entrada-no-cambio {
  display: flex; align-items: baseline; gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-radius: var(--r-m);
  background: var(--papel);
  font-family: var(--grot); font-size: 13.5px; line-height: 1.5;
  color: var(--texto-secundario);
}
.entrada-no-cambio b {
  color: var(--texto-principal); font-weight: 600;
  white-space: nowrap;
}
/* La entrada que la persona corrigió antes de publicar se marca. Es la
   prueba de que la capa 2 hace algo. */
.marca-corregido {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: var(--e3);
  font-family: var(--grot); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--grafito);
  background: var(--ambar-pleno);
  border-radius: var(--r-boton);
  padding: 2px 8px;
  vertical-align: 3px;
}


/* 05 · PAGINACIÓN CON FINAL VISIBLE ======================================
   Explícita y con el final escrito. Scroll infinito aquí contradiría el
   principio 1 en la sección que más lo tentaría. */
.paginacion {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e5); flex-wrap: wrap;
  margin-top: var(--e8);
  padding-top: var(--e6);
  border-top: 1px solid var(--regla);
}
.paginacion .paginas {
  font-family: var(--grot); font-size: 14px;
  color: var(--texto-secundario);
  font-variant-numeric: tabular-nums;
}
.paginacion .paginas b { color: var(--texto-principal); font-weight: 600; }
.paginacion .botones { display: flex; gap: var(--e3); }
.paginacion button {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--grot); font-size: 14px; font-weight: 500;
  padding: 10px var(--e5);
  border-radius: var(--r-boton);
  border: 1px solid var(--borde-fuerte);
  background: var(--fondo-superficie);
  color: var(--texto-principal);
  cursor: pointer;
}
.paginacion button:hover:not([disabled]) { background: var(--papel); }
/* Apagado: los mismos tokens que el botón del sistema, para que no haya
   dos maneras distintas de decir «esto todavía no». */
.paginacion button[disabled] {
  background: var(--accion-apagada-fondo);
  color: var(--accion-apagada-texto);
  border-color: transparent;
  cursor: not-allowed;
}
.final-lista {
  margin-top: var(--e6);
  padding: var(--e5);
  text-align: center;
  font-family: var(--grot); font-size: 14px;
  color: var(--texto-secundario);
  border: 1px dashed var(--borde-sutil);
  border-radius: var(--r-m);
}
.final-lista[hidden] { display: none; }


/* 06 · EL DETALLE (D14) ================================================== */
.columna-detalle { max-width: calc(var(--lectura) + var(--margen) * 2); }
.detalle { padding-block: var(--e8) var(--e10); }
.detalle[hidden], .no-existe[hidden] { display: none; }

.migaja {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--grot); font-size: 14px; font-weight: 500;
  color: var(--verde-profundo);
  text-decoration: none;
  margin-bottom: var(--e7);
}
.migaja:hover { text-decoration: underline; text-underline-offset: 3px; }

.detalle-cabeza { margin-bottom: var(--e8); }
#d-titulo { margin: 0 0 var(--e4); }
#d-titulo:focus { outline: none; }
#d-titulo:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 6px; }
.d-resumen { margin: 0 0 var(--e6); max-width: 58ch; }
.detalle-datos {
  display: flex; flex-wrap: wrap; gap: var(--e3) var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--regla);
  font-family: var(--grot); font-size: 13px;
  color: var(--texto-secundario);
}
.detalle-datos span { display: inline-flex; align-items: center; gap: 7px; }
.detalle-datos .ms { color: var(--verde-profundo); }

/* Los tres bloques, en este orden. El tercero es el que nadie escribe. */
.tres-bloques { display: grid; gap: var(--e4); margin-bottom: var(--e8); }
.bloque-cambio {
  padding: var(--e6);
  border-radius: var(--r-l);
}
.bloque-cambio h2 {
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  margin: 0 0 var(--e3);
}
.bloque-cambio p {
  margin: 0;
  font-family: var(--grot); font-size: 18px; line-height: 1.65;
  color: var(--texto-principal);
}

.b-cambio  { background: var(--fondo-superficie); }
.b-cambio h2 { color: var(--texto-secundario); }

.b-importa { background: rgba(193, 229, 78, .30); }
.b-importa h2 { color: var(--verde-profundo); }

/* «Qué NO cambió» va sobre grafito: es el bloque que más trabajo hace de
   toda la pieza y el que ningún changelog escribe. Si fuera una tarjeta
   más, se leería como una nota al pie. */
.b-no-cambio {
  background: var(--fondo-inverso);
  color: var(--texto-inverso);
}
/* Ámbar PLENO, corregido el 24-08-2026. Estaba en Profundo, que es un
   escalón de fondo y lleva papel encima, nunca al revés: #5D1900 sobre
   grafito daba alrededor de 1,3:1 y el rótulo era ilegible. El Pleno da
   6,99:1, la misma pareja que la tabla del sistema ya trae medida.
   Se detectó al construir el bloque equivalente del blog. */
.b-no-cambio h2 { color: var(--ambar-pleno); }   /* 6,99:1 sobre grafito */
.b-no-cambio p {
  font-family: var(--serif); font-weight: 400;
  font-size: 21px; line-height: 1.45;
  color: var(--texto-inverso);
}


/* 07 · TRAZABILIDAD ======================================================
   De dónde salió esta entrada y quién la validó. Es lo que convierte «un
   sistema detecta, una persona valida» en algo comprobable. */
.traza {
  padding: var(--e6);
  border-radius: var(--r-l);
  border: 1px dashed var(--borde-fuerte);
  margin-bottom: var(--e8);
}
.traza h2 {
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--texto-secundario);
  margin: 0 0 var(--e5);
}
.pasos-traza { display: grid; gap: var(--e4); }
.paso-traza {
  display: grid; grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--e4); align-items: start;
  font-family: var(--grot); font-size: 15px; line-height: 1.55;
  color: var(--texto-secundario);
}
.paso-traza b { color: var(--texto-principal); font-weight: 600; }
.marca-traza {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--grot); font-size: 11px; font-weight: 700;
  background: var(--papel);
  color: var(--texto-secundario);
  border: 1px solid var(--borde-sutil);
}
.marca-traza.hecha { background: var(--verde-claro); border-color: var(--verde-pleno); color: var(--grafito); }
.marca-traza.hecha .ms { font-size: 15px; }
/* La nota de corrección es la prueba de que la revisión no es un trámite. */
.nota-correccion {
  margin-top: var(--e3);
  padding: var(--e4);
  border-radius: var(--r-m);
  background: rgba(247, 239, 138, .22);
  font-family: var(--grot); font-size: 14px; line-height: 1.55;
  color: var(--texto-principal);
}

.aplicar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e7); align-items: center;
  padding: var(--e7);
  border-radius: var(--r-l);
  background: rgba(93, 103, 226, .14);
  margin-bottom: var(--e8);
}
.aplicar .antetitulo { color: var(--purpura-profundo); }
.aplicar h2 { font-family: var(--serif); }

.paso-a-paso {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--medianil);
  padding-top: var(--e6);
  border-top: 1px solid var(--regla);
}
.paso-a-paso a {
  display: block; padding: var(--e5);
  border-radius: var(--r-m);
  text-decoration: none;
  background: var(--fondo-superficie);
  transition: transform var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.paso-a-paso a:hover { transform: translateY(-2px); }
.paso-a-paso .rotulo {
  display: block; margin-bottom: 6px;
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--verde-profundo);
}
.paso-a-paso .titulo-vecino {
  font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.25;
  color: var(--texto-principal);
}
.paso-a-paso .siguiente { text-align: right; }
.paso-a-paso .final {
  padding: var(--e5);
  font-family: var(--grot); font-size: 14px;
  color: var(--texto-secundario);
  align-self: center;
}
.paso-a-paso .final.siguiente { text-align: right; }


/* 08 · PUNTOS DE CORTE =================================================== */
@media (max-width: 1023px) {
  .cola { grid-template-columns: 1fr 1fr; }
  .cola > div:nth-child(2) { border-right: 0; }
  .cola > div:nth-child(3), .cola > div:nth-child(4) { padding-top: var(--e5); }
}

@media (max-width: 767px) {
  .cola { grid-template-columns: 1fr; }
  .cola > div { border-right: 0; border-top: 1px solid var(--borde-sutil); }
  .cola > div:first-child { border-top: 0; }
  .cola > div:not(:first-child) { padding-left: 0; }

  .filtro-franja .contenido { gap: var(--e3); }
  .conteo { width: 100%; }

  /* La fecha pasa a una línea sobre el titular: 116 px de columna en
     342 px de ancho dejan el título en dos palabras por renglón. */
  .entrada a { grid-template-columns: 1fr; gap: var(--e3); padding: var(--e5); }
  .entrada-fecha { display: flex; align-items: baseline; gap: var(--e3); padding-top: 0; }
  .entrada-fecha .dia { display: inline; font-size: 18px; }
  .entrada-tema { margin-top: 0; margin-left: auto; }

  .paginacion { flex-direction: column; align-items: stretch; }
  .paginacion .botones button { flex: 1; justify-content: center; }

  .bloque-cambio { padding: var(--e5); }
  .bloque-cambio p { font-size: 17px; }
  .b-no-cambio p { font-size: 19px; }
  .aplicar { grid-template-columns: 1fr; gap: var(--e5); }
  .aplicar .boton { width: 100%; }
  .paso-a-paso { grid-template-columns: 1fr; }
  .paso-a-paso .siguiente, .paso-a-paso .final.siguiente { text-align: left; }
}


/* 09 · IMPRESIÓN ========================================================= */
@media print {
  .nav, .hoja-menu, .salto, .filtro-franja, .paginacion,
  .migaja, .aplicar, .paso-a-paso, .cierre-indice, .pie { display: none !important; }
  .papel-reticulado { background-image: none !important; }
  body { background: none !important; font-size: 11pt; }
  .entrada a, .bloque-cambio, .traza { break-inside: avoid; }
  .b-no-cambio { background: none !important; color: #000 !important; border: 1px solid #333; }
  .b-no-cambio h2, .b-no-cambio p { color: #000 !important; }
}