/* =========================================================================
   NOEMA · Herramientas · índice y ficha  (D11 y D12)
   Una sola hoja para las dos páginas: comparten la tarjeta, los bloques de
   «exige» y «no resuelve» y el filtro.

   ESTA SECCIÓN VA EN MORADA, que es la paleta de la intervención de la IA,
   y el tema de la sección es la herramienta misma. El texto siempre va en
   --purpura-profundo: el tono medio da 4,47:1 sobre papel y se queda tres
   centésimas bajo AA. Como relleno sí sirve, y ahí se usa.

   ORDEN DEL ARCHIVO
   01 · Cabecera del índice
   02 · El filtro
   03 · La tarjeta de una guía
   04 · Exige antes · No resuelve
   05 · Etapa sin herramientas
   06 · La ficha (D12)
   07 · Puntos de corte
   08 · Impresión
   ========================================================================= */


/* 01 · CABECERA DEL ÍNDICE =============================================== */
.cabecera-herramientas { padding-top: var(--e9); padding-bottom: var(--e7); }

.antetitulo-ia { color: var(--purpura-profundo); }

/* El criterio de orden va escrito y con peso: una lista sin criterio
   declarado se lee como un ranking, y un ranking es popularidad. */
.criterio-orden {
  display: flex; align-items: baseline; gap: var(--e3);
  margin: 0 0 var(--e8);
  padding: var(--e4) var(--e5);
  border-radius: var(--r-m);
  background: rgba(93, 103, 226, .12);
  font-family: var(--grot); font-size: 15px; line-height: 1.5;
  color: var(--texto-secundario);
  max-width: 62ch;
}
.criterio-orden .ms { color: var(--purpura-profundo); }
.criterio-orden b { color: var(--texto-principal); font-weight: 600; }

.datos-herramientas {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--regla);
}
.datos-herramientas > div {
  padding: var(--e5) var(--e5) 0 0;
  border-right: 1px solid var(--borde-sutil);
}
.datos-herramientas > div:last-child { border-right: 0; }
.datos-herramientas > div:not(:first-child) { padding-left: var(--e5); }
.datos-herramientas .rotulo {
  display: block;
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--purpura-profundo); margin-bottom: 6px;
}
.datos-herramientas .valor {
  font-family: var(--grot); font-weight: 700; font-size: 30px;
  letter-spacing: -.02em; color: var(--texto-principal);
}
.datos-herramientas .glosa {
  display: block; font-size: 13px; color: var(--texto-secundario); margin-top: 4px;
}


/* 02 · EL FILTRO =========================================================
   Se pega debajo de la barra del sitio. El tope lo mide el guion: la barra
   no tiene el mismo alto en todos los cortes. */
.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); }
/* Morada pleno lleva PAPEL encima, 4,47:1. El grafito que había aquí era el
   par del naranja viejo y daba 3,2:1. El texto no se decide, se consulta. */
.filtro button[aria-pressed="true"] {
  background: var(--purpura-pleno); border-color: var(--purpura-pleno);
  color: var(--sobre-purpura-pleno);
}
/* La etapa que no admite ninguna herramienta se marca antes de tocarla. */
.filtro button[data-vacia="si"] {
  border-style: dashed;
}
/* Su número NO cuenta herramientas: cuenta lo que apoya el trabajo. Va en
   grafito y entre paréntesis para que se lea como otra cosa, porque si se
   leyera como herramientas la etapa dejaría de decir que no lleva ninguna. */
.filtro button[data-vacia="si"] .cuantos {
  color: var(--grafito-medio);
  opacity: 1;
}
.filtro button[data-vacia="si"] .cuantos::before { content: "("; }
.filtro button[data-vacia="si"] .cuantos::after  { content: ")"; }
.filtro button[data-vacia="si"][aria-pressed="true"] .cuantos {
  color: var(--sobre-purpura-pleno); opacity: .75;
}
.filtro .cuantos { opacity: .7; font-variant-numeric: tabular-nums; }
.conteo { margin: 0; }


/* 03 · LA TARJETA DE UNA GUÍA ============================================
   Aquí sí es tarjeta y no fila: cada guía trae dos listas cortas que hay
   que poder comparar de un vistazo entre una y otra. */
.rejilla-guias {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--medianil);
}

/* LOS GRUPOS POR FUNCIÓN, dentro de una etapa cargada.
   La etapa 05 sola trae 17 de las 24 guías, y diecisiete tarjetas seguidas
   dejan de leerse como un criterio y se leen como una lista.

   EL RÓTULO DEL GRUPO ES DELIBERADAMENTE DISCRETO. La jerarquía de esta
   pantalla la manda la etapa, no la función: si el rótulo pesara como un
   titular, la función parecería el criterio de orden, y el criterio es la
   exigencia. Por eso va en el tamaño de un antetítulo y sobre una regla,
   no en una caja ni con color de sección (18-08-2026). */
.grupo-funcion + .grupo-funcion { margin-top: var(--e8); }

.grupo-cabeza {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e4);
  padding-bottom: var(--e3);
  margin-bottom: var(--e5);
  border-bottom: 1px solid var(--regla);
}
.grupo-cabeza h2 {
  font-family: var(--grot); font-size: 13px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--purpura-profundo);
  margin: 0;
}
.grupo-cuantas {
  font-family: var(--grot); font-size: 12px;
  color: var(--texto-secundario);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rejilla-guias > li { display: flex; }

.guia {
  display: flex; flex-direction: column;
  width: 100%;
  background: var(--fondo-superficie);
  border-radius: var(--r-l);
  padding: var(--e6);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.guia:hover { transform: translateY(-2px); }
.guia:hover .guia-nombre { text-decoration: underline; text-underline-offset: 4px; }

.guia-cabeza {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e4);
  margin-bottom: var(--e2);
}
.guia-nombre {
  font-family: var(--serif); font-weight: 700;
  font-size: 22px; line-height: 1.15;
  margin: 0;
}
.guia-etapa {
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--purpura-profundo);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.guia-funcion {
  display: flex; align-items: center; gap: var(--e3);
  font-family: var(--grot); font-size: 12px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-secundario);
  margin: 0 0 var(--e4);
}

/* EL ACCESO, DESDE EL ÍNDICE.
   Va aquí por el mismo motivo que «exige antes» y «no resuelve»: es un
   requisito, y un requisito que solo aparece dentro de la ficha llega
   tarde. El grupo objetivo son estudiantes, y para ellos el freno
   económico es tan real como el conceptual.

   VA EN GRAFITO Y NUNCA EN COLOR DE PALETA. No es una fase del proceso,
   así que no le toca carmín, verde, azul ni ámbar; y no es la
   intervención de la IA, así que no le toca púrpura. Es un dato
   administrativo y se ve como tal.

   Los tres estados se separan por peso, no por tono: el que frena de
   verdad es el único que va relleno (17-08-2026). */
.guia-acceso {
  margin-left: auto; flex-shrink: 0;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10px; letter-spacing: .06em;
  border: 1px solid var(--borde-sutil);
  color: var(--texto-secundario);
  white-space: nowrap;
}
.guia-acceso[data-acceso="gratis"] { border-color: var(--borde-fuerte); }
.guia-acceso[data-acceso="pago"] {
  background: var(--grafito); border-color: var(--grafito);
  color: var(--papel);
}
.guia-glosa {
  font-family: var(--grot); font-size: 15px; line-height: 1.55;
  color: var(--texto-secundario);
  margin: 0 0 var(--e5);
}


/* 04 · EXIGE ANTES · NO RESUELVE =========================================
   Los dos campos que separan esto de un directorio. Van visibles desde el
   índice, no escondidos dentro de la ficha. */
.par-campos { margin-top: auto; display: grid; gap: var(--e3); }

.campo-guia {
  padding: var(--e4);
  border-radius: var(--r-m);
  background: var(--papel);
}
.campo-guia .rotulo-campo {
  display: block; margin-bottom: var(--e2);
  font-family: var(--grot); font-size: 10px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
}
.campo-exige .rotulo-campo    { color: var(--azul-profundo); }      /* la estructura */
.campo-no-resuelve .rotulo-campo { color: var(--carmin-profundo); }   /* la intención  */

.campo-guia ul { list-style: none; margin: 0; padding: 0; }
.campo-guia li {
  display: flex; align-items: baseline; gap: 7px;
  font-family: var(--grot); font-size: 13.5px; line-height: 1.45;
  color: var(--texto-secundario);
}
.campo-guia li + li { margin-top: 5px; }
.campo-guia li::before {
  content: "";
  width: 5px; height: 5px; flex: 0 0 5px;
  border-radius: 50%;
  position: relative; top: -2px;
}
/* EL CRUCE, dentro de «exige antes».
   Va en AZUL, que es la paleta de Fundamentos, y no en morada: estos enlaces
   no llevan a una herramienta, llevan a la biblioteca. El color dice a dónde
   va el clic antes de darlo (17-08-2026). */
.exige-donde {
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--borde-sutil);
}
.exige-donde[hidden] { display: none; }
.rotulo-donde {
  display: block; margin-bottom: var(--e3);
  font-family: var(--grot); font-size: 10px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--azul-profundo);
}
.exige-donde ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.exige-donde li {
  display: flex; align-items: baseline; gap: var(--e3);
  font-family: var(--grot); font-size: 14px; line-height: 1.4;
}
.exige-donde a {
  color: var(--azul-profundo); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--azul-claro);
}
.exige-donde a:hover { text-decoration-color: var(--azul-profundo); }
.minutos-donde {
  font-size: 12px; color: var(--texto-secundario);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.campo-exige li::before       { background: var(--azul-claro); }
.campo-no-resuelve li::before { background: var(--carmin-pleno); opacity: .6; }


/* 05 · ETAPA SIN HERRAMIENTAS ============================================
   Las etapas 03 y 04 no admiten ninguna. Devolver una lista vacía se
   leería como un error de la página; decirlo es el argumento del proyecto. */
.etapa-sin-herramientas {
  padding: var(--e8);
  border-radius: var(--r-l);
  border: 1px dashed var(--borde-fuerte);
}
.etapa-sin-herramientas[hidden] { display: none; }

/* El grupo de apoyo. Va DENTRO del bloque de etapa sin herramientas y
   deliberadamente más callado que una tarjeta de guía: estas no producen,
   así que no pueden competir visualmente con las que sí. */
.apoyo {
  margin-top: var(--e7);
  padding-top: var(--e6);
  border-top: 1px solid var(--borde-sutil);
}
.apoyo[hidden] { display: none; }
.apoyo-titulo {
  font-family: var(--grot); font-size: 17px; font-weight: 600;
  color: var(--purpura-profundo);   /* la morada marca dónde entra la herramienta */
  margin: 0 0 6px;
}
.apoyo-glosa {
  font-size: 15px; color: var(--texto-secundario);
  max-width: 56ch; margin: 0 0 var(--e5);
}
.apoyo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.apoyo-guia {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--e4) var(--e5);
  background: var(--fondo-superficie);
  border: 1px solid var(--borde-sutil);
  border-left: 3px solid var(--purpura-pleno);
  border-radius: var(--r-m);
  text-decoration: none;
}
.apoyo-guia:hover { border-color: var(--purpura-pleno); }
.apoyo-guia strong {
  font-family: var(--grot); font-size: 16px; font-weight: 600;
  color: var(--texto-principal);
}
.apoyo-guia span { font-size: 14px; color: var(--texto-secundario); }

/* Las superficies. Mismo esqueleto que el grupo de apoyo, pero en GRAFITO:
   no son la intervención de nadie, así que no les toca la morada. Y sin
   enlace, porque no tienen ficha. */
.superficies .apoyo-titulo { color: var(--texto-principal); }
.superficie {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--e4) var(--e5);
  background: var(--fondo-superficie);
  border: 1px solid var(--borde-sutil);
  border-left: 3px solid var(--grafito-medio);
  border-radius: var(--r-m);
}
.superficie strong {
  font-family: var(--grot); font-size: 16px; font-weight: 600;
  color: var(--texto-principal);
}
.superficie span { font-size: 14px; color: var(--texto-secundario); }
/* La nota es el límite que más se olvida, y en una superficie es lo único
   que hay que leer. Por eso va visible y no escondida en una ficha. */
.superficie em {
  font-style: normal;
  font-size: 13px; line-height: 1.5;
  color: var(--texto-secundario);
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--borde-sutil);
}


/* 06 · LA FICHA (D12) ==================================================== */
.columna-ficha { max-width: calc(var(--lectura) + var(--margen) * 2); }
.ficha-herramienta { padding-block: var(--e8) var(--e10); }
.ficha-herramienta[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(--purpura-profundo);
  text-decoration: none;
  margin-bottom: var(--e7);
}
.migaja:hover { text-decoration: underline; text-underline-offset: 3px; }

.ficha-cabeza { margin-bottom: var(--e8); }
#h-nombre { margin: 0 0 var(--e4); }
#h-nombre:focus { outline: none; }
#h-nombre:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 6px; }
.h-glosa { margin: 0 0 var(--e6); max-width: 56ch; }

.ficha-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);
}
.ficha-datos span { display: inline-flex; align-items: center; gap: 7px; }
.ficha-datos .ms { color: var(--purpura-profundo); }

/* Cómo se llamaba antes. Solo sale si la herramienta cambió de nombre.
   Va debajo del titular y no en una nota al pie: quien llegó buscando el
   nombre viejo necesita saber en la primera pantalla que llegó bien. */
.h-antes {
  font-family: var(--grot); font-size: 13px; font-style: italic;
  color: var(--texto-secundario);
  margin: calc(var(--e3) * -1) 0 var(--e4);
}

/* EL ACCESO EN LA FICHA.
   Mismo criterio de color que en el índice: grafito, nunca paleta. Aquí
   además lleva la línea de qué te deja hacer sin pagar, que es el dato
   que la persona necesita y el que ningún directorio escribe. */
.acceso-caja {
  display: flex; align-items: flex-start; gap: var(--e4);
  margin-top: var(--e5); padding: var(--e4) var(--e5);
  border-radius: var(--r-m);
  background: var(--superficie-tenue);
}
.acceso-etiqueta {
  flex-shrink: 0;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--grot); font-size: 11px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--borde-fuerte);
  color: var(--texto-principal);
  white-space: nowrap;
}
.acceso-etiqueta[data-acceso="pago"] {
  background: var(--grafito); border-color: var(--grafito);
  color: var(--papel);
}
.acceso-nota {
  margin: 0;
  font-family: var(--grot); font-size: 14px; line-height: 1.5;
  color: var(--texto-secundario);
}

@media (max-width: 640px) {
  .acceso-caja { flex-direction: column; gap: var(--e3); }
}


/* LOS CUATRO BLOQUES LARGOS ==============================================
   Qué es · Cómo funciona · Dónde entra · Qué cambió hace poco.

   Van después del límite, nunca antes de «exige» y «no resuelve». El
   motivo no es de maquetación: explicar la herramienta y dar casos de uso
   es la estructura de un directorio, y lo que evita que esta ficha se
   convierta en una es el orden en que llega la información.

   SE VEN COMO LECTURA Y NO COMO TARJETAS. Los dos campos de arriba son
   tarjetas porque se comparan entre guías; esto se lee de corrido, así
   que va sobre el papel, separado por regla y no por caja. Que se vea
   distinto es parte del argumento: son dos clases de contenido. */
.bloques-largos {
  margin-bottom: var(--e8);
  border-top: 1px solid var(--regla);
}
.bloque-largo {
  padding-top: var(--e6);
  margin-top: var(--e6);
  border-top: 1px solid var(--borde-sutil);
}
.bloque-largo:first-child { margin-top: 0; border-top: 0; }
.bloque-largo > h2 {
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--purpura-profundo);
  margin: 0 0 var(--e4);
}
.bloque-largo .parrafo { max-width: 62ch; margin: 0; }
.glosa-bloque {
  max-width: 62ch; margin: 0 0 var(--e5);
  font-family: var(--grot); font-size: 14px; line-height: 1.55;
  color: var(--texto-secundario);
}

/* Cómo funciona. Numerada porque son pasos en orden, y el último dice
   siempre qué controla la persona: es la frase que convierte una
   descripción en un criterio. */
.pasos-como {
  margin: 0; padding: 0; list-style: none;
  counter-reset: paso;
  max-width: 62ch;
}
.pasos-como li {
  counter-increment: paso;
  position: relative;
  padding-left: var(--e7);
  margin-bottom: var(--e4);
  font-family: var(--grot); font-size: 15px; line-height: 1.6;
  color: var(--texto-secundario);
}
.pasos-como li:last-child { margin-bottom: 0; }
.pasos-como li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .04em;
  color: var(--purpura-profundo);
  font-variant-numeric: tabular-nums;
}

/* Dónde entra. El encargo va primero y en negrita porque es lo que la
   persona reconoce como suyo o no; lo que hace la herramienta va debajo
   y en secundario, porque solo importa si el encargo se parece al tuyo. */
.lista-casos { margin: 0; padding: 0; list-style: none; }
.lista-casos li {
  padding: var(--e4) var(--e5);
  margin-bottom: var(--e3);
  border-radius: var(--r-m);
  background: var(--superficie-tenue);
  max-width: 62ch;
}
.lista-casos li:last-child { margin-bottom: 0; }
.lista-casos strong {
  display: block;
  font-family: var(--grot); font-size: 15px; font-weight: 600;
  color: var(--texto-principal);
  margin-bottom: 5px;
}
.lista-casos span {
  display: block;
  font-family: var(--grot); font-size: 14px; line-height: 1.55;
  color: var(--texto-secundario);
}

/* Qué cambió hace poco. La fecha va delante y en tabular: es lo primero
   que hay que poder mirar, porque una novedad sin fecha es rumor. */
.lista-novedades { margin: 0; padding: 0; list-style: none; max-width: 62ch; }
.lista-novedades li {
  display: flex; gap: var(--e4);
  padding-bottom: var(--e4); margin-bottom: var(--e4);
  border-bottom: 1px dashed var(--borde-sutil);
}
.lista-novedades li:last-child {
  padding-bottom: 0; margin-bottom: 0; border-bottom: 0;
}
.fecha-novedad {
  flex-shrink: 0; width: 11ch; padding-top: 2px;
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-secundario);
  font-variant-numeric: tabular-nums;
}
.texto-novedad {
  font-family: var(--grot); font-size: 15px; line-height: 1.6;
  color: var(--texto-secundario);
}
.enlace-novedad {
  display: inline-block; margin-top: 6px;
  font-size: 14px; font-weight: 500;
  color: var(--purpura-profundo);
  text-underline-offset: 3px;
}

@media (max-width: 640px) {
  .lista-novedades li { flex-direction: column; gap: 4px; }
  .fecha-novedad { width: auto; padding-top: 0; }
}

/* En la ficha los dos campos crecen: son el contenido principal, no un
   resumen. */
.campos-grandes {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--medianil);
  margin-bottom: var(--e8);
}
.campo-grande {
  padding: var(--e6);
  border-radius: var(--r-l);
}
.campo-grande h2 {
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  margin: 0 0 var(--e4);
}
.campo-grande ul { list-style: none; margin: 0; padding: 0; }
.campo-grande li {
  display: flex; align-items: baseline; gap: var(--e3);
  font-family: var(--grot); font-size: 17px; line-height: 1.5;
  color: var(--texto-principal);
}
.campo-grande li + li { margin-top: var(--e3); }
.campo-grande li::before {
  content: ""; width: 7px; height: 7px; flex: 0 0 7px;
  border-radius: 50%; position: relative; top: -2px;
}
.grande-exige { background: rgba(168, 225, 233, .16); }
.grande-exige h2 { color: var(--azul-profundo); }
.grande-exige li::before { background: var(--azul-pleno); }
.grande-no { background: rgba(214, 30, 97, .08); }
.grande-no h2 { color: var(--carmin-profundo); }
.grande-no li::before { background: var(--carmin-pleno); }

/* El límite que más se olvida. Va solo y con aire: metido en una lista se
   pierde, y es la frase que más trabajo hace de toda la ficha. */
.limite-guia {
  margin-bottom: var(--e8);
  padding: var(--e6) var(--e7);
  border-radius: var(--r-l);
  background: var(--fondo-inverso);
  color: var(--texto-inverso);
}
.limite-guia .rotulo-limite {
  display: block; margin-bottom: var(--e3);
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--ambar-profundo);
}
.limite-guia p {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: 22px; line-height: 1.4;
}

/* El prompt base. Naranja, igual que en el plan: es el mismo objeto. */
.prompt-guia {
  margin-bottom: var(--e8);
  padding: var(--e6);
  border-radius: var(--r-l);
  background: rgba(93, 103, 226, .12);
}
.prompt-guia[hidden] { display: none; }
.prompt-guia h2 {
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--purpura-profundo);
  margin: 0 0 var(--e3);
}
.prompt-guia pre {
  margin: 0 0 var(--e4);
  font-family: var(--grot); font-size: 15px; line-height: 1.6;
  color: var(--texto-principal);
  white-space: pre-wrap;
  background: var(--fondo-superficie);
  border-radius: var(--r-s);
  padding: var(--e5);
}
.prompt-guia .aviso-prompt {
  margin: 0 0 var(--e4);
  font-family: var(--grot); font-size: 14px; line-height: 1.5;
  color: var(--texto-secundario);
}
.copiar-prompt {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; cursor: pointer;
  border: 1px solid var(--purpura-profundo);
  border-radius: var(--r-boton);
  padding: 9px var(--e5);
  font-family: var(--grot); font-size: 13px; font-weight: 600;
  color: var(--purpura-profundo);
}
.copiar-prompt:hover { background: rgba(93, 103, 226, .18); }

/* Sin prompt no se deja el hueco: se dice por qué no lo hay. */
.sin-prompt-guia {
  margin-bottom: var(--e8);
  padding: var(--e5) var(--e6);
  border-radius: var(--r-l);
  border: 1px dashed var(--borde-fuerte);
  font-family: var(--grot); font-size: 15px; line-height: 1.6;
  color: var(--texto-secundario);
}
.sin-prompt-guia[hidden] { display: none; }

/* Aplícalo en un plan · lila, el vínculo entre piezas */
.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(--purpura-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; }


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

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

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

  .guia { padding: var(--e5); }
  .guia-cabeza { flex-direction: column; gap: 4px; }
  .campos-grandes { grid-template-columns: 1fr; }
  .limite-guia { padding: var(--e5); }
  .limite-guia 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; }
  .etapa-sin-herramientas { padding: var(--e6); }
}


/* 08 · IMPRESIÓN ========================================================= */
@media print {
  .nav, .hoja-menu, .salto, .filtro-franja, .cierre-indice,
  .migaja, .aplicar, .paso-a-paso, .copiar-prompt, .pie { display: none !important; }
  .papel-reticulado { background-image: none !important; }
  body { background: none !important; font-size: 11pt; }
  .guia, .campo-grande, .prompt-guia, .limite-guia { break-inside: avoid; }
  /* Los bloques largos se imprimen: son contenido, no navegación. Lo que
     se evita es que un caso o una novedad se parta a la mitad. */
  .bloque-largo, .lista-casos li, .lista-novedades li { break-inside: avoid; }
  .lista-casos li { background: none !important; border: 1px solid #ccc; }
  .enlace-novedad { display: none !important; }
  .limite-guia { background: none !important; color: #000 !important; border: 1px solid #333; }
  .limite-guia .rotulo-limite { color: #000 !important; }
}