/* Hoja de estilos de la landing. Va embebida en el binario, igual que la
 * página y sus dos fuentes: sin CDN y sin una sola URL externa.
 *
 * Viste la página como divr.es, que es el producto que consume esta API:
 *
 *   - **El suelo de Divr.** Grafito con un punto verde (#0f1311), celdas que
 *     suben por filetes y no por rellenos más claros, y el violeta de Divr
 *     (#9d7bff) como único acento. Siempre oscura, como la portada de Divr.
 *   - **La voz de la máquina.** Navegación, botones, etiquetas y rótulos en
 *     JetBrains Mono, mayúsculas y espaciado; titulares en Archivo ancho.
 *   - **Una sola pantalla decide.** El explorador va justo debajo del
 *     titular porque es lo único que convence de verdad: la prosa sobre por
 *     qué los datos son buenos no vale lo que vale una respuesta real.
 *
 * Los nombres de los tokens son los de antes (`--acento`, `--panel`…) para
 * que el resto de la hoja no cambie; los valores son los de
 * `.sheet-world` en frontend/src/pages/Landing/landing.css de Divr.
 */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("/fonts/archivo.woff2") format("woff2-variations"), url("/fonts/archivo.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("/fonts/jetbrains-mono.woff2") format("woff2-variations"), url("/fonts/jetbrains-mono.woff2") format("woff2");
}

:root {
  --fondo: #0f1311;        /* ground */
  --fondo-alt: #1a201c;    /* gutter */
  --fondo-codigo: #0b0e0c;
  --panel: #141916;        /* cell */
  --texto: #e5ebe7;        /* ink */
  --texto-tenue: #a3b0a7;  /* ink-2 */
  --texto-3: #7c897f;      /* ink-3 */
  --borde: #252d28;        /* line */
  --borde-fuerte: #34403a; /* line-2 */

  --acento: #9d7bff;       /* dv */
  --acento-fuerte: #c9b8ff;
  --acento-boton: #6e45e2; /* dv-strong: el violeta que aguanta texto blanco */
  --acento-suave: color-mix(in oklab, #9d7bff 14%, transparent);
  --xl: #21a366;           /* el verde de la hoja: rótulos, nunca adorno */
  --verde: #4cc98a;
  --rojo: #ff8a7a;

  --ancho: 72rem;
  --ancho-app: 90rem;
  --aviso: #f2c94c;
  --fuente: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --radio: 8px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 1.5rem; }

a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 2px; }
strong { font-weight: 640; }
p { margin: 0 0 1rem; }

.saltar {
  position: absolute; left: -9999px;
  background: var(--acento); color: #fff; padding: 0.6rem 1rem; border-radius: 6px;
}
.saltar:focus { left: 1rem; top: 1rem; z-index: 50; }

/* ---------- Barra ---------- */

.barra {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--fondo) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.barra-int { display: flex; align-items: center; justify-content: space-between; height: 3.5rem; gap: 1rem; }

.marca {
  font-family: var(--fuente-mono);
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
}
.marca span { color: var(--texto-tenue); font-weight: 400; }

.barra-links { display: flex; align-items: center; gap: 1.25rem; font-size: 0.9375rem; }
.barra-links a { color: var(--texto-tenue); text-decoration: none; }
.barra-links a:hover { color: var(--texto); }

.barra-cta {
  white-space: nowrap;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--acento);
  border-radius: 999px;
  color: var(--acento) !important;
}
.barra-cta:hover { background: var(--acento-suave); }

/* ---------- Hero ---------- */

.hero {
  padding: 4.5rem 0 3rem;
  /* El degradado no es decoración gratuita: separa el titular del probador
   * sin meter una línea más en una página que ya tiene bastantes. */
  background:
    radial-gradient(60rem 22rem at 50% -8rem, var(--acento-suave), transparent 70%);
  border-bottom: 1px solid var(--borde);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0 0 1.25rem;
  font-family: var(--fuente-mono);
  font-size: 0.8125rem;
  color: var(--texto-tenue);
  text-transform: lowercase;
}
.punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent);
}

.hero h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  max-width: 20ch;
}

.entradilla {
  max-width: 58ch;
  font-size: 1.125rem;
  color: var(--texto-tenue);
}

.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0; }

.boton {
  display: inline-block;
  padding: 0.7rem 1.3rem;
  background: var(--acento);
  color: #fff;
  border: 1px solid var(--acento);
  border-radius: 8px;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.boton:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }
.boton:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
.boton:disabled { opacity: 0.55; cursor: progress; }

.boton.fantasma {
  background: transparent;
  color: var(--texto);
  border-color: var(--borde-fuerte);
}
.boton.fantasma:hover { background: var(--fondo-alt); border-color: var(--texto-tenue); }

.cifras-clave {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.25rem 2rem;
  margin: 3rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--borde);
}
.cifras-clave div { margin: 0; }
.cifras-clave dt {
  font-family: var(--fuente-mono);
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--acento);
}
.cifras-clave dd {
  margin: 0.15rem 0 0;
  font-size: 0.875rem;
  color: var(--texto-tenue);
  line-height: 1.4;
}

/* ---------- Bloques ---------- */

main { padding: 3.5rem 0 4rem; }
.bloque { margin: 0 0 4.5rem; }

.titulo-bloque { margin: 0 0 1.75rem; }
.titulo-bloque h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.4rem, 3.5vw, 1.85rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.titulo-bloque p { margin: 0; color: var(--texto-tenue); max-width: 62ch; }

h3 { margin: 0 0 0.75rem; font-size: 1.0625rem; letter-spacing: -0.01em; }

code {
  font-family: var(--fuente-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: 4px;
}

pre {
  margin: 0 0 1rem;
  padding: 0.95rem 1.05rem;
  background: var(--fondo-codigo);
  border: 1px solid var(--borde);
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--texto);
}
pre code {
  font-size: 1em; padding: 0; background: none; border: none;
  white-space: pre; color: inherit;
}

/* ---------- Contenedor ancho ----------
 * El explorador es una herramienta de tres columnas, como las referencias de
 * las APIs de mercado: necesita más ancho que la prosa. El resto de la página
 * se queda en `--ancho` para que las líneas de texto no se estiren. */

.contenedor.ancho { max-width: var(--ancho-app); }

kbd {
  font-family: var(--fuente-mono);
  font-size: 0.75em;
  padding: 0.1em 0.4em;
  border: 1px solid var(--borde-fuerte);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--fondo-alt);
  color: var(--texto);
}

.tenue { color: var(--texto-tenue); }
.mono { font-family: var(--fuente-mono); }

/* ---------- Indicador de clave en la barra ---------- */

.estado-clave {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--fuente-mono);
  font-size: 0.75rem;
  color: var(--texto-tenue);
}
.estado-clave .luz {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--borde-fuerte);
}
.estado-clave.puesta { color: var(--verde); }
.estado-clave.puesta .luz {
  background: var(--verde);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent);
}

/* ---------- Tres pasos ---------- */

.pasos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem;
}
.paso {
  position: relative;
  padding: 1.15rem 1.15rem 1rem 3.6rem;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.paso h3 { margin: 0 0 0.35rem; }
.paso p { margin: 0; font-size: 0.9375rem; color: var(--texto-tenue); }
.paso-num {
  position: absolute; left: 1.1rem; top: 1.05rem;
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--acento-suave);
  color: var(--acento);
  border: 1px solid color-mix(in srgb, var(--acento) 45%, transparent);
  font-family: var(--fuente-mono);
  font-weight: 700;
  font-size: 0.875rem;
}
.sin-clave { margin: 1rem 0 0; font-size: 0.9375rem; color: var(--texto-tenue); }

/* ---------- Explorador ---------- */

.explorador {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr) minmax(0, 27rem);
  grid-template-areas:
    "lateral centro derecha"
    "lateral salida salida";
  background: var(--panel);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  overflow: hidden;
  /* La sombra es lo que lo levanta del resto de la página: es el elemento
   * que tiene que mirarse primero. */
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.7);
}

.lateral {
  grid-area: lateral;
  padding: 0.9rem 0.6rem 1rem;
  background: var(--fondo-alt);
  border-right: 1px solid var(--borde);
}
.centro { grid-area: centro; padding: 1.25rem 1.35rem 1.35rem; min-width: 0; }
.derecha {
  grid-area: derecha;
  padding: 1.25rem 1.25rem 1rem 0;
  min-width: 0;
}

/* Barra lateral */

.buscar input {
  width: 100%;
  padding: 0.45rem 0.65rem;
  background: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 6px;
  font: inherit;
  font-size: 0.8125rem;
}
.buscar input:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

.grupo {
  margin: 1.1rem 0.5rem 0.35rem;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.ep {
  display: flex; align-items: flex-start; gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.55rem;
  margin: 0 0 1px;
  background: transparent;
  color: var(--texto);
  border: 1px solid transparent;
  border-radius: 7px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ep:hover { background: var(--panel); }
.ep.activo {
  background: var(--acento-suave);
  border-color: color-mix(in srgb, var(--acento) 40%, transparent);
}
.ep:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.ep .verbo {
  flex: none;
  margin: 0.15rem 0 0;
  font-family: var(--fuente-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--verde);
}
.ep-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ep-txt b { font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.ep.activo .ep-txt b { color: var(--acento); }
.ep-txt code {
  padding: 0; background: none; border: none;
  font-size: 0.6875rem; color: var(--texto-tenue);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ep-marca {
  flex: none;
  font-family: var(--fuente-mono);
  font-size: 0.625rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  border: 1px solid var(--borde-fuerte);
  color: var(--texto-tenue);
}
.ep-marca.libre { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 40%, transparent); }

.historial ul { list-style: none; margin: 0; padding: 0; }
.hist {
  display: flex; align-items: center; gap: 0.45rem;
  width: 100%;
  padding: 0.3rem 0.5rem;
  background: none; border: none; border-radius: 5px;
  color: var(--texto-tenue);
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  text-align: left;
  cursor: pointer;
}
.hist:hover { background: var(--panel); color: var(--texto); }
.hist-st { font-weight: 700; }
.hist-st.ok { color: var(--verde); }
.hist-st.mal { color: var(--rojo); }
.hist-ruta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Centro */

.doc-cabecera { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.doc-cabecera h3 { margin: 0; font-size: 1.35rem; letter-spacing: -0.015em; }
.insignia {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acento) 45%, transparent);
  color: var(--acento);
}
.insignia.libre { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 45%, transparent); }
.ep-desc { margin: 0.5rem 0 1rem; font-size: 0.9375rem; color: var(--texto-tenue); max-width: 62ch; }

.consola-barra {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem;
  background: var(--fondo);
  border: 1px solid var(--borde-fuerte);
  border-radius: 8px;
}

.metodo {
  font-family: var(--fuente-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.55rem;
  border-radius: 5px;
  background: var(--acento-suave);
  color: var(--acento);
  border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent);
}

.ruta-viva {
  flex: 1 1 auto; min-width: 0;
  padding: 0.35rem 0.3rem;
  background: transparent;
  color: var(--texto);
  border: none;
  font-family: var(--fuente-mono);
  font-size: 0.875rem;
}
.ruta-viva:focus { outline: none; }

.boton-icono {
  flex: none;
  display: inline-grid; place-items: center;
  min-width: 2rem; height: 2rem;
  padding: 0 0.4rem;
  background: transparent;
  color: var(--texto-tenue);
  border: 1px solid var(--borde);
  border-radius: 6px;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1;
  cursor: pointer;
}
.boton-icono:hover { color: var(--texto); border-color: var(--texto-tenue); }
.boton-icono:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

.parametros { margin: 1.25rem 0 0; }
.parametros h4, .fila-clave .param-cab label {
  margin: 0 0 0.6rem;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.param {
  padding: 0.85rem 0.9rem;
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: 8px;
  margin: 0 0 0.6rem;
}
.param-cab { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.4rem; flex-wrap: wrap; }
.param-cab label code { font-size: 0.875rem; color: var(--texto); font-weight: 650; }
.tipo { font-family: var(--fuente-mono); font-size: 0.6875rem; color: var(--texto-tenue); }
.param-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.param input, .clave-caja input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  background: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  font-family: var(--fuente-mono);
  font-size: 0.875rem;
  color-scheme: dark light;
}
.param input:focus-visible, .clave-caja input:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.param-ayuda { margin: 0.5rem 0 0.45rem; font-size: 0.8125rem; color: var(--texto-tenue); }
.sin-parametros { margin: 0; font-size: 0.875rem; color: var(--texto-tenue); }

.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.chip {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  background: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  font: inherit;
  font-family: var(--fuente-mono);
  font-size: 0.75rem;
  cursor: pointer;
}
.chip em {
  font-family: var(--fuente);
  font-style: normal;
  font-size: 0.6875rem;
  color: var(--texto-tenue);
}
.chip:hover { border-color: var(--texto-tenue); }
.chip.activo {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--acento);
}
.chip.activo em { color: inherit; opacity: 0.75; }
.chip:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.fila-clave { margin: 1rem 0 0; }
.fila-clave .param-cab label { margin: 0; }
.clave-caja { display: flex; gap: 0.4rem; }
.clave-caja .boton-icono { height: auto; }
.pista { display: block; margin-top: 0.4rem; font-size: 0.8125rem; color: var(--texto-tenue); }

.lanzar-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0 0; }
.lanzar-fila .boton { padding: 0 1.2rem; }
.atajo { font-size: 0.75rem; color: var(--texto-tenue); }

.campos-doc {
  margin: 1.25rem 0 0;
  border-top: 1px dashed var(--borde);
  padding-top: 0.9rem;
}
.campos-doc summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto-tenue);
}
.campos-doc summary:hover { color: var(--texto); }
.campos-doc dl { margin: 0.75rem 0 0; display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 0.45rem 1rem; }
.campos-doc dt code { font-size: 0.75rem; color: var(--acento); }
.campos-doc dd { margin: 0; font-size: 0.8125rem; color: var(--texto-tenue); }

/* Derecha: código */

.pestanas { margin: 0; }
.pestanas-botones { display: flex; align-items: flex-end; gap: 0.25rem; margin-bottom: -1px; }

.pestana {
  padding: 0.45rem 0.9rem;
  background: transparent;
  color: var(--texto-tenue);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.pestana:hover { color: var(--texto); }
/* El panel de código es oscuro en los dos temas, así que la pestaña activa
 * —que se funde con él— también lleva el texto claro. Con `var(--texto)` se
 * quedaba negro sobre negro en modo claro. */
.pestana.activo {
  background: var(--fondo-codigo);
  border-color: var(--borde);
  color: var(--texto);
}
.copiar-snippet { margin: 0 0 0.3rem auto; height: 1.75rem; min-width: 1.75rem; font-size: 0.8125rem; }
.pestanas pre { border-radius: 0 8px 8px 8px; margin: 0; font-size: 0.75rem; min-height: 9rem; }
.nota-snippet { margin: 0.6rem 0 0; font-size: 0.75rem; color: var(--texto-tenue); }

/* ---------- Salida ---------- */

.consola-salida {
  grid-area: salida;
  border-top: 1px solid var(--borde);
  background: var(--fondo-codigo);
  color: var(--texto);
  min-width: 0;
  transition: opacity 0.15s;
}
.consola-salida.cargando { opacity: 0.6; }

.salida-cabecera {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--borde);
}
.hueco-flex { flex: 1; }

.pastilla {
  font-family: var(--fuente-mono);
  font-size: 0.75rem;
  font-weight: 650;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--borde-fuerte);
  color: var(--texto-tenue);
}
.pastilla.ok { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 45%, transparent); }
.pastilla.mal { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 45%, transparent); }
.pastilla.cargando { color: var(--acento); border-color: var(--acento); }
.pastilla.ejemplo { color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 50%, transparent); }

.tiempo { font-family: var(--fuente-mono); font-size: 0.75rem; color: var(--texto-tenue); overflow-wrap: anywhere; }

.vistas { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--borde); border-radius: 7px; }
.vista {
  padding: 0.25rem 0.7rem;
  background: none; border: none; border-radius: 5px;
  color: var(--texto-tenue);
  font: inherit; font-size: 0.8125rem;
  cursor: pointer;
}
.vista:hover { color: var(--texto); }
.vista.activo { background: var(--fondo-alt); color: var(--texto); }
.consola-salida .boton-icono { border-color: var(--borde); color: var(--texto-tenue); height: 1.85rem; min-width: 1.85rem; font-size: 0.8125rem; }
.consola-salida .boton-icono:hover { color: var(--texto); border-color: var(--texto-tenue); }

.aviso-ejemplo {
  padding: 0.55rem 1rem;
  font-size: 0.8125rem;
  color: var(--aviso);
  background: color-mix(in srgb, var(--aviso) 9%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--aviso) 25%, transparent);
}

.salida-cuerpo { max-height: 34rem; overflow: auto; }
.panel-vista { padding: 1rem; }
.panel-vista pre { margin: 0; border: none; padding: 0; background: none; }

.vacio { padding: 1.5rem 0.5rem; max-width: 60ch; color: var(--texto-tenue); font-size: 0.9375rem; }
.vacio-titulo { color: var(--texto); font-size: 1rem; }
.vacio code, .panel-vista code:not(pre code) { background: var(--panel); border-color: var(--borde); color: var(--texto); }

/* JSON con colores */
.json { font-size: 0.8125rem; line-height: 1.55; }
.json code { white-space: normal; }
.j-nodo { display: inline; }
.j-boton {
  display: inline; position: relative;
  padding: 0; margin: 0;
  background: none; border: none;
  font: inherit; color: inherit;
  cursor: pointer;
}
.j-boton::before { content: "▾"; margin-right: 0.3em; color: var(--texto-3); }
.j-boton:hover .j-p { color: var(--acento); }
.j-boton:focus-visible { outline: 1px solid var(--acento); }
.j-nodo.plegado > .j-boton::before { content: "▸"; }
.j-nodo:not(.plegado) > .j-boton .j-resumen,
.j-nodo:not(.plegado) > .j-boton .j-fin,
.j-nodo.plegado > .j-cuerpo,
.j-nodo.plegado > .j-cierre { display: none; }
.j-resumen { color: var(--texto-3); font-style: italic; font-size: 0.92em; }
.j-cuerpo { padding-left: 1.4em; border-left: 1px dotted var(--borde); margin-left: 0.2em; }
.j-linea { white-space: pre-wrap; overflow-wrap: anywhere; }
.j-clave { color: #c9b8ff; }
.j-str { color: #8fd9ae; }
.j-num { color: #f2c94c; }
.j-bool { color: #9d7bff; }
.j-null { color: var(--rojo); font-style: italic; }
.j-p { color: var(--texto-3); }
.json > code { display: block; }

/* ---------- Vista legible ---------- */

.tabla-scroll { overflow-x: auto; border: 1px solid var(--borde); border-radius: 8px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.tabla th, .tabla td { padding: 0.45rem 0.7rem; text-align: left; border-bottom: 1px solid var(--fondo-alt); white-space: nowrap; vertical-align: middle; }
.tabla thead th {
  position: sticky; top: 0;
  background: var(--panel);
  font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--texto-tenue);
}
.tabla thead th small { display: block; font-size: 0.625rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.tabla tbody tr:hover { background: var(--panel); }
.tabla tbody tr:last-child td, .tabla tbody tr:last-child th { border-bottom: none; }
.tabla .num { text-align: right; }
.tabla .nombre { white-space: normal; min-width: 12rem; color: var(--texto); }
.tabla .tenue { color: var(--texto-tenue); }
.tabla tr.estimado td { color: #c4cfc8; font-style: italic; }
.pie-tabla { margin: 0.6rem 0 0; font-size: 0.75rem; color: var(--texto-tenue); }

.herramientas { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0 0 0.8rem; }
.filtro {
  flex: 1 1 14rem;
  padding: 0.45rem 0.7rem;
  background: var(--panel); color: var(--texto);
  border: 1px solid var(--borde-fuerte); border-radius: 6px;
  font: inherit; font-size: 0.8125rem;
}
.filtro:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.consola-salida .chip { background: var(--panel); color: var(--texto); border-color: var(--borde-fuerte); }
.consola-salida .chip em { color: var(--texto-tenue); }
.consola-salida .chip.activo { background: var(--acento-suave); color: var(--acento); border-color: var(--acento); }

.etq {
  display: inline-block;
  font-size: 0.6875rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--borde-fuerte);
  color: var(--texto-tenue);
  white-space: nowrap;
}
.etq.ok { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 40%, transparent); }
.etq.aviso { color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 40%, transparent); }
.etq.mal { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 40%, transparent); }
.marcas { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }

.acciones-fila { text-align: right; }
.mini {
  margin-left: 0.3rem;
  padding: 0.2rem 0.55rem;
  background: none;
  color: var(--acento);
  border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent);
  border-radius: 5px;
  font: inherit; font-size: 0.75rem;
  cursor: pointer;
}
.mini:hover { background: var(--acento-suave); }

.cab-emisor { margin: 0 0 1rem; }
.cab-emisor h4 { margin: 0 0 0.35rem; font-size: 1.1rem; color: var(--texto); }
.ids { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.id-par { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.id-par small { font-size: 0.625rem; letter-spacing: 0.06em; color: var(--texto-3); }
.id-par code { font-size: 0.75rem; }

.subtitulo { margin: 1.25rem 0 0.5rem; font-size: 0.875rem; color: var(--texto); }
.subtitulo:first-of-type { margin-top: 0.5rem; }
.vacio-min { font-size: 0.875rem; color: var(--texto-tenue); }

.con-cita { text-decoration: underline dotted var(--texto-3); text-underline-offset: 3px; cursor: help; }
.consola-salida a { color: var(--acento-fuerte); }

/* Serie anual */

.leyenda { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0 0 0.6rem; font-size: 0.75rem; color: #c4cfc8; }
.leyenda span { display: inline-flex; align-items: center; gap: 0.35rem; }
.muestra { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; margin-right: 0.4rem; vertical-align: -0.05em; }
.leyenda .muestra { margin: 0; }
.muestra.rep { background: var(--verde); }
.muestra.der { background: var(--acento); }
.muestra.hue { background: transparent; border: 1px dashed var(--texto-tenue); }

.tabla-anual th.fijo {
  position: sticky; left: 0; z-index: 1;
  background: var(--fondo-codigo);
  font-weight: 500; color: var(--texto);
  text-transform: none; letter-spacing: 0; font-size: 0.8125rem;
  min-width: 11rem;
}
.tabla-anual thead th.fijo { z-index: 2; background: var(--panel); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-tenue); }
.tabla-anual th.fijo small { display: block; font-size: 0.625rem; color: var(--texto-3); }
.tabla-anual tbody tr:hover th.fijo { background: var(--panel); }
.tendencia { width: 90px; }
.tendencia svg { display: block; }
.spark { fill: none; stroke: var(--acento); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark-punto { fill: var(--acento); }

.celda { padding: 0.2rem 0.35rem !important; }
.cifra {
  display: inline-block;
  min-width: 5.5rem;
  padding: 0.25rem 0.4rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: var(--fuente-mono);
  font-size: 0.8125rem;
  text-align: right;
  cursor: pointer;
  color: var(--texto);
  border-left: 2px solid var(--verde);
}
.cifra:hover, .cifra:focus-visible { background: var(--fondo-alt); border-color: var(--borde-fuerte); outline: none; }
.cifra.der { border-left-color: var(--acento); }
.cifra.hue { color: var(--texto-3); border-left: 2px dashed var(--texto-3); }
.cifra sup { font-size: 0.6rem; margin-left: 0.15rem; color: var(--aviso); }
.cifra sup.mal { color: var(--rojo); }

/* Detalle de una cifra */

.detalle {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 45;
  width: min(26rem, calc(100vw - 2rem));
  max-height: calc(100vh - 6rem);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
  padding: 1rem 1.1rem 1.1rem;
}
.detalle-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 0.5rem; }
.detalle-cab h4 { margin: 0; font-size: 1rem; }
.det-grande { margin: 0 0 0.75rem; font-family: var(--fuente-mono); font-size: 1.35rem; font-weight: 650; }
.det-grande.rep { color: var(--verde); }
.det-grande.der { color: var(--acento); }
.det-grande.hue { color: var(--texto-tenue); }
.det-lista { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 0.9rem; margin: 0 0 0.9rem; font-size: 0.8125rem; }
.det-lista dt { color: var(--texto-tenue); }
.det-lista dd { margin: 0; overflow-wrap: anywhere; }
.hash { font-size: 0.6875rem; }
.detalle pre { font-size: 0.75rem; margin: 0; }

/* Errores y salud */

.tarjeta-error {
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--rojo) 35%, transparent);
  border-left: 3px solid var(--rojo);
  border-radius: 8px;
  background: color-mix(in srgb, var(--rojo) 6%, transparent);
  max-width: 44rem;
}
.err-cab { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.5rem; }
.err-cab code { font-size: 0.9375rem; color: var(--rojo); background: none; border: none; padding: 0; }
.err-que { margin: 0 0 0.35rem; color: var(--texto); }
.err-hacer, .err-msg { margin: 0 0 0.35rem; font-size: 0.875rem; color: #c4cfc8; }
.err-msg q { font-family: var(--fuente-mono); font-size: 0.8125rem; color: var(--texto-tenue); }
.err-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0 0; }
.err-acciones .boton { padding: 0.4rem 0.9rem; font-size: 0.8125rem; color: var(--texto); border-color: var(--borde-fuerte); }
.err-acciones .boton:hover { background: var(--panel); }

.salud { display: flex; align-items: center; gap: 0.9rem; padding: 0.5rem; }
.salud b { color: var(--texto); }
.salud p { margin: 0; font-size: 0.875rem; color: var(--texto-tenue); }
.salud-luz {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--verde) 20%, transparent);
}

/* Aviso flotante al copiar */
.tostada {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 60;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  background: var(--texto);
  color: var(--fondo);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
}

/* ---------- Rejillas ---------- */

.rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 2rem; }
.rejilla-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.rejilla-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }

.tarjeta {
  padding: 1.15rem;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.tarjeta pre { font-size: 0.75rem; }
.tarjeta p { margin: 0; font-size: 0.9375rem; color: var(--texto-tenue); }

.nota {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  background: var(--acento-suave);
  border-left: 3px solid var(--acento);
  border-radius: 0 8px 8px 0;
  font-size: 0.9375rem;
  color: var(--texto-tenue);
}
.nota strong { color: var(--texto); }

.tira {
  padding: 2.25rem 0 0;
  border-top: 1px solid var(--borde);
}
.tira h2 { font-size: 1.25rem; margin: 0 0 0.75rem; }
.tira p { color: var(--texto-tenue); font-size: 0.9375rem; }

.dato {
  padding: 1rem;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.dato b {
  display: block;
  font-family: var(--fuente-mono);
  font-size: 1.5rem;
  color: var(--acento);
  letter-spacing: -0.02em;
}
.dato span { display: block; margin-top: 0.2rem; font-size: 0.8125rem; color: var(--texto-tenue); line-height: 1.45; }

/* ---------- Errores ---------- */

.tabla-errores { display: grid; gap: 0.4rem; }
.err {
  display: grid;
  grid-template-columns: minmax(11rem, auto) 3rem 1fr 8.5rem;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 8px;
}
.err.cab {
  background: none; border-color: transparent; padding-top: 0; padding-bottom: 0;
  font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texto-tenue);
}
.err code { background: none; border: none; padding: 0; color: var(--acento); font-size: 0.875rem; }
.err b { font-family: var(--fuente-mono); font-size: 0.8125rem; color: var(--texto-tenue); }
.err span { font-size: 0.9375rem; color: var(--texto-tenue); }
.err.cab span { font-size: inherit; }
.err em { font-style: italic; }
.err i { font-style: normal; font-size: 0.8125rem; font-weight: 600; }
.err i.si { color: var(--verde); }
.err i.no { color: var(--texto-tenue); }

/* ---------- Formulario de solicitud ---------- */

.rejilla-clave { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 2rem; align-items: start; }

.solicitud {
  padding: 1.25rem;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.campo { margin: 0 0 1rem; }
.campo label { display: block; margin-bottom: 0.35rem; font-size: 0.875rem; font-weight: 600; }
.campo input, .campo textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  font: inherit;
  font-size: 0.9375rem;
}
.campo textarea { resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

/* Fuera de la vista pero NO con `display:none` ni `visibility:hidden`: hay
 * bots que saltan justo esos dos y rellenarían el resto igual. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.estado {
  margin: 0.9rem 0 0;
  font-size: 0.875rem;
  color: var(--texto-tenue);
}
.estado.ok { color: var(--verde); }
.estado.mal { color: var(--rojo); }

/* La clave recién emitida: se lee y se copia, nada más. */
.clave-nueva {
  margin-top: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--acento-suave);
  border: 1px solid var(--acento);
  border-radius: var(--radio);
}
.clave-nueva-aviso { margin: 0 0 0.75rem; font-size: 0.9375rem; color: var(--texto-tenue); }
.clave-nueva-aviso strong { color: var(--texto); }
.clave-nueva .clave-caja { margin-bottom: 0.9rem; }
.clave-valor {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  background: var(--fondo-codigo);
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  font-family: var(--fuente-mono);
  font-size: 0.8125rem;
  color: var(--texto);
  overflow-wrap: anywhere;
}

/* ---------- Planes ---------- */

.plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.4rem;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.plan.vivo { border-color: var(--acento); }
.plan-nombre {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0;
  font-family: var(--fuente-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.plan-nombre .insignia { letter-spacing: 0; text-transform: none; }
.plan-cifra {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  font-variation-settings: "wdth" 108;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.plan-cifra span { font-size: 1rem; font-weight: 400; color: var(--texto-tenue); letter-spacing: 0; }
.plan-lista { margin: 0; padding-left: 1.1rem; font-size: 0.9375rem; color: var(--texto-tenue); }
.plan-lista li { margin: 0.2rem 0; }
.plan .boton { margin-top: auto; }
.avisame { width: 100%; margin-top: auto; }

.porque-manual h3 { margin-top: 0; }
.porque-manual p { font-size: 0.9375rem; color: var(--texto-tenue); }
.pie { font-size: 0.875rem; color: var(--texto-tenue); }

/* ---------- Pie ---------- */

.pie-pagina {
  padding: 2rem 0 3rem;
  background: var(--fondo-alt);
  border-top: 1px solid var(--borde);
  font-size: 0.9375rem;
  color: var(--texto-tenue);
}

/* ---------- La voz de Divr ----------
 * Lo que hace que esto se lea como divr.es y no sólo se coloree como ella:
 * titulares en Archivo ancho, y todo lo que es interfaz —navegación,
 * botones, rótulos, pestañas— en mono, mayúsculas y espaciado. */

::selection { background: color-mix(in oklab, var(--acento) 45%, transparent); color: #fff; }
:focus-visible { outline-color: var(--acento); }

body { font-variation-settings: "wdth" 100; }

.hero h1,
.titulo-bloque h2,
.tira h2 {
  font-variation-settings: "wdth" 108;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.hero h1 { font-size: clamp(2.4rem, 6.4vw, 4.25rem); line-height: 1.02; max-width: 18ch; }
.titulo-bloque h2 { font-size: clamp(1.75rem, 4.2vw, 2.75rem); line-height: 1.05; }

/* Rótulo de sección: el verde de la hoja, en mono. Es el único sitio donde
 * sale ese verde sin ser un estado. */
.rotulo,
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0 0 1rem;
  font-family: var(--fuente-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--xl);
}
.punto { background: var(--xl); box-shadow: 0 0 0 3px color-mix(in oklab, var(--xl) 25%, transparent); }

/* Barra: fina, translúcida, secciones en mono con la activa subrayada. */
.barra {
  background: color-mix(in oklab, var(--fondo) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: color-mix(in oklab, var(--borde) 70%, transparent);
}
.barra-int { height: 3.75rem; }
.marca { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.marca .logo { display: block; height: 1.5rem; width: auto; }
.marca span {
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 4px;
  font-family: var(--fuente-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.barra-links { gap: 1.4rem; }
.barra-links a,
.estado-clave {
  font-family: var(--fuente-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.barra-cta {
  padding: 0.5rem 0.95rem;
  border-radius: 6px;
  border-color: transparent;
  background: var(--acento-boton);
  color: #fff !important;
}
.barra-cta:hover { background: #7d57f0; }

/* Botones: rectángulos con la voz de la máquina. */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.875rem;
  padding: 0 1.375rem;
  border-radius: 6px;
  background: var(--acento-boton);
  border-color: var(--acento-boton);
  font-family: var(--fuente-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.boton:hover { background: #7d57f0; border-color: #7d57f0; }
.boton:active { transform: scale(0.97); }
.boton.fantasma {
  color: var(--texto);
  border-color: var(--borde-fuerte);
  background: color-mix(in oklab, var(--panel) 60%, transparent);
}
.boton.fantasma:hover { border-color: var(--texto-3); background: var(--fondo-alt); }
.err-acciones .boton { min-height: 2.25rem; padding: 0 1rem; font-size: 0.7rem; }

/* Portada: el campo de puntos de Divr detrás del titular. Es CSS puro —un
 * degradado repetido y una máscara— para no traerse ni un script. */
.hero {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 3.5rem;
  background: none;
  border-bottom: 1px solid var(--borde);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at center, color-mix(in oklab, var(--acento) 55%, transparent) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 75% 20%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse 70% 80% at 75% 20%, #000 10%, transparent 70%);
  opacity: 0.55;
  pointer-events: none;
}
.hero > * { position: relative; }
.entradilla { font-size: 1.1875rem; color: var(--texto-tenue); }
.entradilla strong { color: var(--texto); }

.cifras-clave dt {
  font-family: var(--fuente);
  font-variation-settings: "wdth" 108;
  font-size: 2rem;
  font-weight: 700;
  color: var(--texto);
}
.cifras-clave dd {
  font-family: var(--fuente-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Secciones: filete de borde a borde entre ellas, como en divr.es. */
main { padding-top: 0; }
main > .bloque { padding-top: 4.5rem; border-top: 1px solid var(--borde); }
main > .bloque:first-child { border-top: none; }

.grupo,
.param-cab .tipo,
.pastilla,
.vista,
.pestana,
.insignia,
.ep-marca,
.campos-doc summary {
  font-family: var(--fuente-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vista, .pestana { font-size: 0.7rem; }
.pastilla { font-size: 0.68rem; }
.paso-num { border-radius: 4px; }

.tarjeta, .paso, .dato { border-radius: var(--radio); }
.dato b {
  font-family: var(--fuente);
  font-variation-settings: "wdth" 108;
  font-size: 1.75rem;
  color: var(--texto);
}

/* ---------- Referencia ----------
 * La documentación de cada recurso, estática y legible sin JavaScript: lo
 * que un buscador y un lector de pantalla ven aunque no usen el explorador. */

.ref-indice {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: 0 0 2rem;
  padding: 0; list-style: none;
}
.ref-indice a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-family: var(--fuente-mono);
  font-size: 0.75rem;
  color: var(--texto-tenue);
  text-decoration: none;
}
.ref-indice a:hover { color: var(--texto); border-color: var(--borde-fuerte); background: var(--panel); }

.ref {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: 1.5rem 2rem;
  padding: 2rem 0;
  border-top: 1px solid var(--borde);
}
.ref:first-of-type { border-top: none; padding-top: 0; }
.ref-cab { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; }
.ref-cab h3 { margin: 0; font-size: 1.35rem; font-variation-settings: "wdth" 106; letter-spacing: -0.02em; }
.ref-ruta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--fuente-mono);
  font-size: 0.875rem;
  color: var(--texto);
}
.ref-ruta b { font-size: 0.68rem; letter-spacing: 0.08em; color: var(--verde); }
.ref-cuerpo > p { color: var(--texto-tenue); max-width: 62ch; }
.ref-cuerpo h4 {
  margin: 1.25rem 0 0.5rem;
  font-family: var(--fuente-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.ref-tabla { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.ref-tabla th, .ref-tabla td { padding: 0.5rem 0.75rem 0.5rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borde); }
.ref-tabla th { font-family: var(--fuente-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-3); }
.ref-tabla td:first-child { white-space: nowrap; }
.ref-tabla td { overflow-wrap: anywhere; }
.ref-tabla td code { color: var(--acento-fuerte); }
.ref-tabla .tipo { font-family: var(--fuente-mono); font-size: 0.75rem; color: var(--texto-3); white-space: nowrap; }
.ref-tabla td:last-child { color: var(--texto-tenue); }
.ref-lado pre { margin: 0; font-size: 0.75rem; }
.ref-lado .ref-probar { margin-top: 0.75rem; }
.ref-lado .ref-probar .boton { min-height: 2.25rem; padding: 0 1rem; font-size: 0.7rem; }

@media (max-width: 60rem) {
  .ref { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 46rem) {
  /* En móvil la tabla de parámetros apila la columna «Dónde» bajo el nombre. */
  .ref-tabla td:first-child { white-space: normal; }
  .ref-tabla .tipo { white-space: normal; }
}

/* Pie: marca de Divr y filete arriba. */
.pie-pagina .marca .logo { height: 1.25rem; }

/* ---------- Pantallas medianas y móvil ---------- */

@media (max-width: 75rem) {
  .explorador {
    grid-template-columns: 14rem minmax(0, 1fr);
    grid-template-areas:
      "lateral centro"
      "lateral derecha"
      "salida salida";
  }
  .derecha { padding: 0 1.35rem 1.25rem; }
}

@media (max-width: 52rem) {
  .explorador {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "lateral" "centro" "derecha" "salida";
  }
  .lateral { border-right: none; border-bottom: 1px solid var(--borde); padding: 0.75rem; }
  /* En móvil la lista de recursos pasa a ser una tira desplazable: seis
   * botones apilados empujarían el formulario fuera de la primera pantalla. */
  .lista-endpoints { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.6rem 0 0.1rem; }
  .lista-endpoints .grupo { display: none; }
  .ep { flex: none; width: auto; border-color: var(--borde); }
  .ep-txt code { display: none; }
  .historial { display: none; }
  .centro { padding: 1rem; }
  .derecha { padding: 0 1rem 1rem; }
  .param-fila { grid-template-columns: 1fr; }
}

@media (max-width: 46rem) {
  .barra-links a:not(.barra-cta) { display: none; }
  .barra-links { gap: 0.75rem; }
  .barra-cta { white-space: nowrap; }
  #estado-clave-txt { display: none; }
  .atajo { display: none; }
  .tabla-anual .tendencia { display: none; }
  .tabla-anual th.fijo { min-width: 8.5rem; white-space: normal; }
  .panel-vista { padding: 0.75rem; }
  .hero { padding: 3rem 0 2.5rem; }
  main { padding: 2.5rem 0 3rem; }
  .bloque { margin-bottom: 3.5rem; }
  .contenedor { padding: 0 1rem; }

  .salida-cabecera .hueco-flex { flex-basis: 100%; height: 0; }
  .campos-doc dl { grid-template-columns: 1fr; }

  .err, .err.cab { grid-template-columns: 1fr auto; }
  .err.cab { display: none; }
  .err span { grid-column: 1 / -1; }
  .err i { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .consola-salida { transition: none; }
}