/* =============================================================================
   docs.css — lo que docs.describe.net necesita y el sitio no tiene.
   GENERADO por scripts/docs_theme.py. No editar acá: se reescribe en cada build.
   -----------------------------------------------------------------------------
   Regla dura heredada de site.css:5 y respetada línea por línea: NI UN COLOR
   LITERAL. Todo sale de var(--token). El único literal del producto es el
   favicon, que es un data: URI y no puede leer una custom property.

   Este archivo carga CUARTO, después de tokens.css -> theme-execution-market.css
   -> site.css, y su trabajo es exactamente el complemento de esos tres:
     · lo que site.css NO define (medido 2026-08-30, `grep -c` sobre site.css da
       0 para h4, h5, h6, ul, ol, li, hr, code, img y dl): la prosa de un
       markdown renderizado;
     · lo que el sitio no tiene porque ninguna de sus seis páginas lo necesita:
       un índice lateral y la grilla de dos columnas que lo sostiene;
     · lo que un VENDOR (Swagger UI, ReDoc) trae con su propia paleta y hay que
       traducir al idioma de la casa.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   SELLO DE HOST — estás en docs, no en el apex.
   La marca sigue diciendo «describe.net» y linkea al apex: es la misma casa.
   Lo que cambia es este rótulo, dibujado como `.meta` (site.css:212) para que
   se lea como metadato y no como una séptima pestaña de navegación.
   ------------------------------------------------------------------------ */
.hostmark {
  font-family: var(--font-data); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-tertiary); border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-chip); padding: 0 var(--space-1);
  align-self: center; white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   GRILLA DOCUMENTO + ÍNDICE
   Espeja `.verdict` (site.css:665-672), que es el layout asimétrico de la casa,
   con EL corte del sitio: 62rem.
   `minmax(0, 1fr)` y nunca `1fr`: el mínimo automático de un `1fr` es el
   min-content de su contenido, y una ruta como
   `/reputation/wallet/{wallet}?snapshot=true` es UNA palabra para el navegador
   — estiraría la columna y con ella la página (site.css:323-326).
   ------------------------------------------------------------------------ */
.doc {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
  gap: var(--space-8); align-items: start;
}
/* Un `display` de autor le gana a `[hidden]`: la regla del navegador vive en la
   hoja del user-agent y cualquier `display` declarado acá la pisa. Es la
   lección de site.css:36-44, aplicada sólo donde hace falta y no con un
   `!important` global. */
.doc[hidden], .toc[hidden] { display: none; }

.toc {
  /* 3.5rem es el `min-height` de `.top` (site.css:71). Bajo 48rem `.top` deja
     de ser sticky (site.css:1110), pero para entonces el índice ya es estático
     desde 62rem, así que los dos estados nunca se cruzan.
     🔴 El `.toc` NO puede vivir dentro de un `.scroll`: `overflow-x: auto` hace
     que `overflow-y` compute a `auto` también, y el sticky se ancla al
     contenedor en vez de al viewport. Eso ya se cobró un bug en las tablas
     (site.css:584-591). */
  position: sticky; top: calc(3.5rem + var(--space-4));
  max-height: calc(100vh - 3.5rem - var(--space-8)); overflow-y: auto;
}
.toc h2 {
  font-family: var(--font-data); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-tertiary); font-weight: var(--weight-regular);
  line-height: var(--leading-2xs); margin: 0 0 var(--space-3);
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { border-top: var(--border-width) solid var(--table-rule); }
/* El gesto es el de `.nav a` (site.css:81-86) rotado 90°: un borde de 2px
   transparente que se pinta en hover y en el actual. Por eso se ve de la casa
   sin inventar un componente nuevo. */
.toc a {
  display: block; padding: var(--space-2) 0 var(--space-2) var(--space-3);
  font-size: var(--text-sm); line-height: var(--leading-sm);
  color: var(--text-secondary); text-decoration: none;
  border-left: var(--border-width-emphasis) solid transparent;
  overflow-wrap: anywhere;
}
.toc a:hover { color: var(--text-primary); border-left-color: var(--border-hover); }
.toc a[aria-current="true"], .toc a:target { color: var(--text-primary); border-left-color: var(--accent); }
.toc .lvl3 a { padding-left: var(--space-6); font-size: var(--text-xs); }
.toc .lvl4 a { padding-left: var(--space-8); font-size: var(--text-xs); }

/* Un ancla debajo de una barra sticky queda TAPADA por la barra. `scroll-margin`
   es la corrección que no toca el layout: reserva el alto de `.top` más un
   respiro cuando el navegador salta a un `#id`. */
.prose :is(h2, h3, h4, h5, h6)[id] { scroll-margin-top: calc(3.5rem + var(--space-4)); }

/* ---------------------------------------------------------------------------
   PROSA DE UNA GUÍA RENDERIZADA
   site.css cubre `a`, `h1-h3`, `p`, `table`, `blockquote.voice` y `pre.code`.
   Todo lo de abajo es lo que NO cubre — verificado por conteo de selectores el
   2026-08-30: `grep -c '^h4' site.css` = 0, e igual h5, h6, ul, ol, li, hr,
   code, img, dl.
   ------------------------------------------------------------------------ */
.prose { max-width: 46rem; }              /* el mismo ancho que `.narrow` */
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: var(--space-10); margin-bottom: var(--space-4); }
.prose h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
/* h4 baja a texto base con peso: la escala de títulos se acaba en h3
   (site.css:185-191) y estirarla inventaría un cuarto tamaño de display. */
.prose h4 {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-base); line-height: var(--leading-base);
  letter-spacing: var(--tracking-tight); margin: var(--space-6) 0 var(--space-2);
}
/* h5 y h6 dejan de ser títulos y pasan a ser RÓTULOS: es el `.eyebrow` del
   sitio (site.css:200-208). Un quinto y sexto tamaño de título en una escala de
   diez pasos sería una diferencia que nadie puede ver. */
.prose h5, .prose h6 {
  font-family: var(--font-data); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-tertiary); font-weight: var(--weight-regular);
  line-height: var(--leading-2xs); margin: var(--space-6) 0 var(--space-2);
}
.prose ul, .prose ol { margin: var(--space-4) 0; padding-left: var(--space-5); }
.prose li { margin: var(--space-2) 0; line-height: var(--leading-base); }
.prose li > ul, .prose li > ol { margin: var(--space-2) 0; }
.prose li > p { margin: var(--space-2) 0; }
.prose hr {
  border: 0; border-top: var(--border-width) solid var(--border-subtle);
  margin: var(--space-8) 0;
}
.prose img { max-width: 100%; height: auto; display: block; margin: var(--space-4) 0; }
.prose dl { margin: var(--space-4) 0; }
.prose dt {
  font-family: var(--font-data); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-tertiary); margin-top: var(--space-3);
}
.prose dd { margin: var(--space-1) 0 0; }
/* `code` PELADO del markdown: site.css:167-180 sólo estiliza `code.k`, y un
   renderizador de markdown no pone clases. `overflow-wrap: anywhere` es
   OBLIGATORIO y no `break-word`: los dos parten la línea, pero sólo `anywhere`
   achica el ancho MÍNIMO del bloque, y el ancho mínimo es lo que dimensiona la
   columna de una grilla. Una ruta en mono mide 340 px y es UNA palabra. */
.prose :not(pre) > code {
  font-family: var(--font-data); font-size: 0.9em;
  background: var(--surface-sunken); padding: 0 var(--space-1);
  border-radius: var(--radius-chip); overflow-wrap: anywhere;
}
/* Un `<pre>` de markdown tampoco trae `class="code"`: se replica la regla de
   site.css:880-885 tal cual, con los mismos tokens. */
.prose pre {
  overflow-x: auto; background: var(--surface-sunken); color: var(--text-primary);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-surface); padding: var(--space-4);
  font-family: var(--font-data); font-size: var(--text-xs);
  line-height: var(--leading-sm); margin: var(--space-4) 0;
}
.prose pre code { background: none; padding: 0; font-size: inherit; }
/* La cita de markdown NO es `blockquote.voice`: esa familia (`--font-voice`,
   itálica) está reservada por contrato para «lo que dijo un humano»
   (tokens.css:241-246). Una nota de documentación no es una voz. Se queda con
   la barra de acento, que es el gesto, sin la familia, que es el significado. */
.prose blockquote {
  border-left: var(--border-width-emphasis) solid var(--accent);
  margin: var(--space-6) 0; padding: 0 0 0 var(--space-5);
  color: var(--text-secondary);
}
.prose blockquote > :first-child { margin-top: 0; }
.prose blockquote > :last-child { margin-bottom: 0; }
/* Una tabla de markdown NO puede entrar en el patrón tabla→tarjeta del sitio:
   ese patrón exige `data-label` en cada `<td>` (site.css:930-951) y un
   renderizador no lo pone. Así que se desliza dentro de su propia caja, que es
   lo que `.scroll` (site.css:582) ya da. El `<div class="scroll">` lo envuelve
   el generador; esto es el respaldo por si un `<table>` queda suelto. */
.prose table { margin: var(--space-4) 0; display: block; overflow-x: auto; }
.prose .scroll { margin: var(--space-4) 0; }
.prose .scroll table { display: table; overflow: visible; }
.prose a { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   EL RESUMEN SIN JAVASCRIPT
   Lo único que lee un agente que no ejecuta JS, y lo que cerró el check
   `public-api-docs` de is-agentic (docs/BACKLOG.md:101). Va VISIBLE y arriba,
   no plegado: para el humano es el «de un vistazo» de la página, y para el
   scanner es texto real con encabezados reales.
   ------------------------------------------------------------------------ */
.resumen { padding: var(--space-8) 0; }
.resumen h2 { margin-bottom: var(--space-3); }
.resumen h3 { margin: var(--space-6) 0 var(--space-2); }
.resumen p { color: var(--text-secondary); }

/* ---------------------------------------------------------------------------
   EL SELLO DEL BUILD, en el pie.
   De cuándo es esta foto y de qué commit salió cada mitad. Se dibuja con `.kv`
   (site.css:685-687), que es la lista clave-valor de la casa.
   ------------------------------------------------------------------------ */
.sello { margin-top: var(--space-3); }
.sello dd { overflow-wrap: anywhere; font-size: var(--text-2xs); }
.sello dt { white-space: nowrap; }

/* =============================================================================
   SWAGGER UI — la traducción al idioma de la casa.
   Selectores verificados contra swagger-ui-dist 5.32.14 (swagger-ui.css,
   185.784 B, bajado el 2026-08-30). Ni un nombre de clase adivinado.
   Cada regla de acá pisa una del vendor que trae un literal: la lista de
   literales a vencer se sacó contando las 488 reglas base con color del CSS.
   NO se prende `html.dark-mode` (existe, 175 reglas) — el porqué está en el
   docstring del módulo.
   ============================================================================= */

/* (1) LA COLISIÓN CON site.css, que es lo primero que rompe.
   site.css declara reglas GLOBALES de elemento que caen dentro del Swagger:
     · `section { padding: 2rem 0; border-top: 1px }` (site.css:218) le pinta
       una raya y 32px a `section.models`;
     · `thead th { position: sticky; top: 0 }` (site.css:592) hace flotar los
       encabezados de las tablas de parámetros dentro de cada operación.
   Las dos se apagan acá y se re-declara lo que sí queremos. */
.swagger-ui section { padding: 0; border-top: 0; }
.swagger-ui thead th { position: static; }

/* (2) BASE: tipografía y tinta. El vendor abre con
   `.swagger-ui{color:#3b4151;font-family:sans-serif}`. */
.swagger-ui { color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); }
.swagger-ui .wrapper { max-width: none; padding: 0; }
/* El topbar verde no lo dibuja `BaseLayout`, pero la regla se deja: si alguien
   cambia el layout a `StandaloneLayout`, un topbar #1b1b1b con un input de
   borde #62a03f aparecería de golpe arriba del header de la casa. */
.swagger-ui .topbar { display: none; }
.swagger-ui a { color: var(--text-link); }
.swagger-ui a:hover { color: var(--text-link-hover); }
.swagger-ui select, .swagger-ui input[type=text], .swagger-ui input[type=email],
.swagger-ui input[type=file], .swagger-ui input[type=password], .swagger-ui input[type=search],
.swagger-ui textarea {
  background: var(--surface-raised); color: var(--text-primary);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-control); box-shadow: none;
  font-family: var(--font-data); font-size: var(--text-sm); font-weight: var(--weight-regular);
}
.swagger-ui label {
  color: var(--text-tertiary); font-family: var(--font-data); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  font-weight: var(--weight-regular);
}

/* (3) LA CABECERA DEL ESQUEMA (`.info`). */
.swagger-ui .info { margin: 0 0 var(--space-8); }
.swagger-ui .info hgroup.main { margin: 0 0 var(--space-3); }
.swagger-ui .info .title {
  color: var(--text-primary); font-family: var(--font-display);
  font-size: var(--text-3xl); line-height: var(--leading-3xl);
  font-weight: var(--weight-heading); letter-spacing: var(--tracking-tight);
}
/* La píldora de versión del vendor es `border-radius:57px` sobre #89bf04. Acá
   es un chip: esquina viva, sin matiz, y el número en tabulares. */
.swagger-ui .info .title small, .swagger-ui .info .title small.version-stamp {
  background: var(--surface-sunken); color: var(--text-secondary);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-chip); font-family: var(--font-data);
  font-size: var(--text-2xs); font-variant-numeric: var(--numeric-figures);
  letter-spacing: var(--tracking-label); padding: 0 var(--space-1);
  top: -0.35em; vertical-align: baseline;
}
.swagger-ui .info .title small pre { color: var(--text-secondary); font-family: var(--font-data); }
.swagger-ui .info h1, .swagger-ui .info h2, .swagger-ui .info h3,
.swagger-ui .info h4, .swagger-ui .info h5 {
  color: var(--text-primary); font-family: var(--font-display);
}
.swagger-ui .info li, .swagger-ui .info p, .swagger-ui .info table {
  color: var(--text-secondary); font-family: var(--font-body);
  font-size: var(--text-sm); line-height: var(--leading-sm);
}
.swagger-ui .info a { color: var(--text-link); font-family: var(--font-body); font-size: var(--text-sm); }
.swagger-ui .info a:hover { color: var(--text-link-hover); }
.swagger-ui .info .base-url {
  color: var(--text-tertiary); font-family: var(--font-data);
  font-size: var(--text-xs); font-weight: var(--weight-regular);
  overflow-wrap: anywhere;
}

/* (4) LA BARRA DE SERVIDORES. El vendor: `background:#fff` + una sombra. */
.swagger-ui .scheme-container {
  background: var(--surface-raised); box-shadow: var(--shadow-raised);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-surface);
  margin: 0 0 var(--space-6); padding: var(--space-4);
}
.swagger-ui .scheme-container .schemes > .schemes-server-container > label { color: var(--text-tertiary); margin: 0; }
.swagger-ui .servers-title, .swagger-ui .schemes-title { color: var(--text-tertiary); }

/* (5) EL TÍTULO DE GRUPO (`.opblock-tag`). El vendor lo pone a 24px sans. */
.swagger-ui .opblock-tag {
  color: var(--text-primary); font-family: var(--font-display);
  font-size: var(--text-2xl); line-height: var(--leading-2xl);
  font-weight: var(--weight-heading); letter-spacing: var(--tracking-tight);
  border-bottom: var(--border-width) solid var(--border-subtle);
  padding: var(--space-4) var(--space-2); margin: var(--space-8) 0 var(--space-3);
  transition-duration: var(--duration-fast);
}
.swagger-ui .opblock-tag:hover { background: var(--table-row-hover); }
.swagger-ui .opblock-tag small {
  color: var(--text-secondary); font-family: var(--font-body);
  font-size: var(--text-sm); line-height: var(--leading-sm);
}

/* (6) LA OPERACIÓN. El vendor tinta el bloque entero según el verbo
   (`.opblock-get{background:rgba(97,175,254,.1);border-color:#61affe}`) y le
   pone `border-radius:4px` y `box-shadow:0 0 3px`. Acá una operación es una
   FILA DE RECIBO: superficie elevada, borde de 1px, esquina viva, cero sombra.
   La elevación en esta piel se hace con borde y no con tono (EM:36-38). */
.swagger-ui .opblock,
.swagger-ui .opblock.opblock-get, .swagger-ui .opblock.opblock-post,
.swagger-ui .opblock.opblock-put, .swagger-ui .opblock.opblock-patch,
.swagger-ui .opblock.opblock-delete, .swagger-ui .opblock.opblock-head,
.swagger-ui .opblock.opblock-options, .swagger-ui .opblock.opblock-query {
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-surface); box-shadow: var(--shadow-raised);
  margin: 0 0 var(--space-2);
}
.swagger-ui .opblock:hover { border-color: var(--border-hover); }
.swagger-ui .opblock .opblock-summary {
  padding: var(--space-2) var(--space-3); border-color: var(--border-subtle);
}
.swagger-ui .opblock.is-open .opblock-summary {
  border-bottom: var(--border-width) solid var(--border-subtle);
}
/* LAS QUE ESCRIBEN LLEVAN BARRA IZQUIERDA. Es el gesto de `blockquote.voice` y
   de `.toc a` — 2px al costado — usado acá para lo que significa en esta piel:
   énfasis por GROSOR, nunca por matiz (tokens.css:93-96). */
.swagger-ui .opblock.opblock-post, .swagger-ui .opblock.opblock-put,
.swagger-ui .opblock.opblock-patch {
  border-left: var(--border-width-emphasis) solid var(--border-strong);
}
.swagger-ui .opblock.opblock-delete {
  border-left: var(--border-width-emphasis) solid var(--state-critical);
}
/* Deprecada: superficie `stale` y tinta `stale`, que es el par que el sistema
   ya tiene para «esto está viejo». NO se usa `--border-absent-style`
   (punteado): en este sistema el punteado significa «todavía no hay dato»
   (tokens.css:65-66) y una ruta deprecada tiene dato de sobra. */
.swagger-ui .opblock.opblock-deprecated {
  background: var(--surface-stale); border-color: var(--border-subtle); opacity: 1;
}
.swagger-ui .opblock.opblock-deprecated .opblock-summary-path,
.swagger-ui .opblock.opblock-deprecated .opblock-summary-description { color: var(--text-stale); }

/* (7) LA PÍLDORA DEL VERBO — la traducción del matiz a la oposición
   contorno/tinta. Base = LEE (GET, HEAD, OPTIONS): contorno, como `.btn.ghost`.

   🔴 CORRECCIÓN 2026-08-30, dejada escrita porque el bug era INVISIBLE en el
   CSS y sólo se vio en el navegador: esta regla base sola NO alcanza, y la
   página salió a producción con el `GET` en el azul de fábrica (#61affe)
   mientras todo el resto ya era del tema. Medido, no deducido:

       vendor  .swagger-ui .opblock.opblock-get .opblock-summary-method   (0,4,0)
       nuestro .swagger-ui .opblock .opblock-summary-method               (0,3,0)

   El vendor gana por UNA clase. Cargar `docs.css` después de `swagger-ui.css`
   —que es lo que hace `swagger_page()`— no arregla nada: el orden sólo desempata
   a IGUAL especificidad. Los verbos de ESCRITURA nunca mostraron el bug porque
   su regla de abajo ya listaba `.opblock.opblock-post` y empataba en (0,4,0).

   La tentación acá es `!important`, y sería el arreglo equivocado: taparía el
   síntoma en esta regla y dejaría las otras seis superficies que el vendor
   tinta por verbo (medidas abajo) con el matiz puesto. Se sube la especificidad
   enumerando, que es lo que el vendor hace y lo que se puede volver a auditar.

   EL VENDOR TINTA SIETE COSAS POR VERBO, no una — contadas sobre
   swagger-ui-dist@5 (185.784 B) el 2026-08-30. Las seis restantes están en el
   bloque (7.b). Un override que sólo pisa la píldora deja el bloque abierto
   con bordes de colores y las pestañas con subrayado de matiz. */
.swagger-ui .opblock.opblock-get .opblock-summary-method,
.swagger-ui .opblock.opblock-head .opblock-summary-method,
.swagger-ui .opblock.opblock-options .opblock-summary-method,
.swagger-ui .opblock .opblock-summary-method {
  background: transparent; color: var(--text-primary);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-chip); text-shadow: none;
  font-family: var(--font-data); font-size: var(--text-2xs);
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label);
  min-width: 4.5rem; padding: var(--space-1) var(--space-2);
}
/* ESCRIBE = tinta invertida, como el `.btn` primario y como el botón activo del
   `.seg` (site.css:654-659, :124-126). */
.swagger-ui .opblock.opblock-post .opblock-summary-method,
.swagger-ui .opblock.opblock-put .opblock-summary-method,
.swagger-ui .opblock.opblock-patch .opblock-summary-method,
.swagger-ui .opblock.opblock-delete .opblock-summary-method,
.swagger-ui .opblock.opblock-query .opblock-summary-method {
  background: var(--surface-inverse); color: var(--text-on-inverse);
  border-color: var(--action-edge);
}
.swagger-ui .opblock.opblock-deprecated .opblock-summary-method {
  background: transparent; color: var(--text-stale); border-color: var(--border-subtle);
}

/* (7.b) LAS OTRAS SEIS SUPERFICIES QUE EL VENDOR TINTA POR VERBO.
   Enumeradas contra swagger-ui-dist@5 el 2026-08-30 con:

       grep -o '\.swagger-ui \.opblock\.opblock-[a-z]*[^{]*{[^}]*}' swagger-ui.css

   Todas nacen en (0,4,0) o más, así que ninguna se pisa desde la regla de
   elemento: hay que enumerar el verbo. El matiz no carga significado solo en
   esta casa (design/BRAND.md), así que las siete se resuelven con el MISMO par
   de tokens y la diferencia lee/escribe queda en la píldora de (7). */
.swagger-ui .opblock.opblock-get .opblock-summary,
.swagger-ui .opblock.opblock-head .opblock-summary,
.swagger-ui .opblock.opblock-options .opblock-summary,
.swagger-ui .opblock.opblock-post .opblock-summary,
.swagger-ui .opblock.opblock-put .opblock-summary,
.swagger-ui .opblock.opblock-patch .opblock-summary,
.swagger-ui .opblock.opblock-delete .opblock-summary,
.swagger-ui .opblock.opblock-query .opblock-summary { border-color: var(--border-subtle); }

.swagger-ui .opblock.opblock-get .opblock-section-header,
.swagger-ui .opblock.opblock-head .opblock-section-header,
.swagger-ui .opblock.opblock-options .opblock-section-header,
.swagger-ui .opblock.opblock-post .opblock-section-header,
.swagger-ui .opblock.opblock-put .opblock-section-header,
.swagger-ui .opblock.opblock-patch .opblock-section-header,
.swagger-ui .opblock.opblock-delete .opblock-section-header,
.swagger-ui .opblock.opblock-query .opblock-section-header {
  background: var(--surface-sunken); box-shadow: none;
}

/* El subrayado de la pestaña activa y el borde superior del cuerpo: el vendor
   los usa como el ÚNICO indicador de estado, y en escala de grises los ocho
   matices caen en la misma banda de luminancia (BRAND.md). Van al acento, que
   ya lleva ratio calculado en los dos modos. */
.swagger-ui .opblock.opblock-get .tab-header .tab-item.active h4 span:after,
.swagger-ui .opblock.opblock-head .tab-header .tab-item.active h4 span:after,
.swagger-ui .opblock.opblock-options .tab-header .tab-item.active h4 span:after,
.swagger-ui .opblock.opblock-post .tab-header .tab-item.active h4 span:after,
.swagger-ui .opblock.opblock-put .tab-header .tab-item.active h4 span:after,
.swagger-ui .opblock.opblock-patch .tab-header .tab-item.active h4 span:after,
.swagger-ui .opblock.opblock-delete .tab-header .tab-item.active h4 span:after,
.swagger-ui .opblock.opblock-query .tab-header .tab-item.active h4 span:after {
  background: var(--accent);
}

.swagger-ui .opblock.opblock-get .opblock-body > .opblock-description-wrapper,
.swagger-ui .opblock.opblock-head .opblock-body > .opblock-description-wrapper,
.swagger-ui .opblock.opblock-options .opblock-body > .opblock-description-wrapper,
.swagger-ui .opblock.opblock-post .opblock-body > .opblock-description-wrapper,
.swagger-ui .opblock.opblock-put .opblock-body > .opblock-description-wrapper,
.swagger-ui .opblock.opblock-patch .opblock-body > .opblock-description-wrapper,
.swagger-ui .opblock.opblock-delete .opblock-body > .opblock-description-wrapper,
.swagger-ui .opblock.opblock-query .opblock-body > .opblock-description-wrapper,
.swagger-ui .opblock.opblock-get thead tr td,
.swagger-ui .opblock.opblock-get thead tr th,
.swagger-ui .opblock.opblock-post thead tr td,
.swagger-ui .opblock.opblock-post thead tr th,
.swagger-ui .opblock.opblock-delete thead tr td,
.swagger-ui .opblock.opblock-delete thead tr th { border-color: var(--border-subtle); }
/* La ruta. 🔴 El vendor pone `word-break: break-word`; acá va
   `overflow-wrap: anywhere`, y la diferencia es medible: los dos parten la
   línea, pero sólo `anywhere` achica el ancho MÍNIMO del bloque, que es lo que
   dimensiona una columna de grilla (site.css:171-179, :982-987). Con
   `break-word` la ruta se parte y la página igual se desborda. */
.swagger-ui .opblock .opblock-summary-path,
.swagger-ui .opblock .opblock-summary-path__deprecated,
.swagger-ui .opblock .opblock-summary-operation-id {
  color: var(--text-primary); font-family: var(--font-data);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  word-break: normal; overflow-wrap: anywhere;
}
.swagger-ui .opblock .opblock-summary-description {
  color: var(--text-secondary); font-family: var(--font-body);
  font-size: var(--text-sm); word-break: normal; overflow-wrap: anywhere;
}

/* (8) EL CUERPO DE LA OPERACIÓN. */
.swagger-ui .opblock .opblock-section-header {
  background: var(--surface-sunken); box-shadow: none; min-height: 0;
  border-top: var(--border-width) solid var(--border-subtle);
  padding: var(--space-2) var(--space-3);
}
.swagger-ui .opblock .opblock-section-header h4,
.swagger-ui .opblock .opblock-section-header > label {
  color: var(--text-tertiary); font-family: var(--font-data);
  font-size: var(--text-2xs); font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.swagger-ui .opblock-description-wrapper, .swagger-ui .opblock-external-docs-wrapper,
.swagger-ui .opblock-title_normal {
  color: var(--text-secondary); font-family: var(--font-body);
  font-size: var(--text-sm); line-height: var(--leading-sm);
  padding: var(--space-4) var(--space-3);
}
.swagger-ui .opblock-body { padding: 0 var(--space-3) var(--space-3); }
/* Las pestañas (Example Value / Schema): el subrayado gris de 4px del vendor
   pasa a la regla de 2px del sitio, la misma de `.nav a`. */
.swagger-ui .opblock .tab-header .tab-item { padding: 0 var(--space-5) 0 0; }
.swagger-ui .opblock .tab-header .tab-item.active h4 span:after {
  background: var(--accent); height: var(--border-width-emphasis); bottom: -6px;
}
.swagger-ui .tab li { color: var(--text-secondary); font-family: var(--font-data); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.swagger-ui .tab li.active { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* (9) BOTONES. El vendor: borde 2px gris, radio 4px, sombra, y el `execute`
   en #4990e2. Acá calcan `.btn` / `.btn.ghost` de site.css:654-662. */
.swagger-ui .btn {
  background: var(--surface-raised); color: var(--text-primary);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-control); box-shadow: none;
  font-family: var(--font-data); font-size: var(--text-2xs);
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label);
  text-transform: uppercase; padding: var(--space-1) var(--space-4);
  transition-duration: var(--duration-fast);
}
.swagger-ui .btn:hover { background: var(--table-row-hover); border-color: var(--border-hover); box-shadow: none; }
.swagger-ui .btn.execute, .swagger-ui .btn.authorize {
  background: var(--action); color: var(--text-on-action); border-color: var(--action-edge);
}
.swagger-ui .btn.execute:hover, .swagger-ui .btn.authorize:hover { background: var(--action-hover); }
.swagger-ui .btn.authorize svg { fill: var(--text-on-action); color: var(--text-on-action); }
.swagger-ui .btn.cancel { background: var(--surface-raised); color: var(--text-primary); border-color: var(--border-strong); }
.swagger-ui .btn[disabled] { background: var(--surface-sunken); color: var(--text-tertiary); border-color: var(--border-subtle); opacity: 1; }
.swagger-ui .btn-group .btn:first-child, .swagger-ui .btn-group .btn:last-child { border-radius: var(--radius-control); }
.swagger-ui .btn-group { padding: var(--space-4) 0; gap: var(--space-2); }
.swagger-ui .copy-to-clipboard { background: var(--surface-inverse); border-radius: var(--radius-control); }
.swagger-ui .copy-to-clipboard:active { background: var(--action-hover); }
.swagger-ui .download-contents {
  background: var(--surface-inverse); color: var(--text-on-inverse);
  border-radius: var(--radius-control); font-family: var(--font-data);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-label);
}

/* (10) TABLAS DE PARÁMETROS Y RESPUESTAS. En esta piel manda la regla
   horizontal y no la cebra (`--table-zebra: transparent`, EM:230). */
.swagger-ui table thead tr td, .swagger-ui table thead tr th {
  color: var(--table-header-ink); font-family: var(--font-data);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  border-bottom: var(--border-width-emphasis) solid var(--table-sticky-edge);
  padding: var(--space-2) 0;
}
.swagger-ui table tbody tr td { border-bottom: var(--border-width) solid var(--table-rule); }
.swagger-ui .parameter__name {
  color: var(--text-primary); font-family: var(--font-data);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}
.swagger-ui .parameter__name.required { font-weight: var(--weight-semibold); }
.swagger-ui .parameter__name.required span { color: var(--text-primary); }
/* «required» va como rótulo mono, no como una palabra roja: el sistema no tiene
   matiz de alarma y la información ya la carga el peso del nombre. */
.swagger-ui .parameter__name.required:after {
  color: var(--text-tertiary); font-family: var(--font-data);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; top: 0;
}
.swagger-ui .parameter__type, .swagger-ui .parameter__in, .swagger-ui .parameter__extension {
  color: var(--text-tertiary); font-family: var(--font-data);
  font-size: var(--text-2xs); font-style: normal; font-weight: var(--weight-regular);
}
.swagger-ui .parameter__deprecated {
  color: var(--text-stale); font-family: var(--font-data);
  font-size: var(--text-2xs); font-style: normal;
}
.swagger-ui .prop-type { color: var(--text-secondary); }
.swagger-ui .prop-format { color: var(--text-tertiary); }
.swagger-ui .response-col_status {
  color: var(--text-primary); font-family: var(--font-data);
  font-size: var(--text-sm); font-variant-numeric: var(--numeric-figures);
}
.swagger-ui .response-col_description, .swagger-ui .parameters-col_description {
  color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-sm);
}
.swagger-ui .response-undocumented, .swagger-ui .response-col_undocumented {
  color: var(--nodata-ink); font-family: var(--font-data);
}

/* (11) EL BLOQUE DE CÓDIGO. Con `syntaxHighlight.activated: false` esto es un
   `<pre class="microlight">` pelado, sin un solo estilo en línea — ver el
   docstring. Calca `pre.code` (site.css:880-885), que es el ÚNICO bloque de
   código del sitio: fondo hundido, una tinta, cero resaltado. */
.swagger-ui .opblock-body pre.microlight, .swagger-ui pre.microlight {
  background: var(--surface-sunken); color: var(--text-primary);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-surface); padding: var(--space-4);
  font-family: var(--font-data); font-size: var(--text-xs);
  line-height: var(--leading-sm); font-weight: var(--weight-regular);
  word-break: normal; overflow-wrap: anywhere; white-space: pre-wrap;
}
.swagger-ui .highlight-code > .microlight { max-height: 26rem; }
.swagger-ui .curl-command .microlight, .swagger-ui .request-url .microlight { margin: 0; }
.swagger-ui .markdown code, .swagger-ui .renderedMarkdown code {
  background: var(--surface-sunken); color: var(--text-primary);
  border-radius: var(--radius-chip); font-family: var(--font-data);
  padding: 0 var(--space-1); overflow-wrap: anywhere;
}
.swagger-ui .markdown pre, .swagger-ui .renderedMarkdown pre {
  color: var(--text-primary); font-weight: var(--weight-regular);
}
.swagger-ui .markdown p, .swagger-ui .renderedMarkdown p {
  color: var(--text-secondary); word-break: normal; overflow-wrap: anywhere;
}

/* (12) LOS MODELOS. El vendor los apila con rgba(0,0,0,.05) y radio 4px. */
.swagger-ui section.models {
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-surface); margin: var(--space-8) 0;
}
.swagger-ui section.models.is-open h4 { border-bottom: var(--border-width) solid var(--border-subtle); }
.swagger-ui section.models h4 {
  color: var(--text-primary); font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: var(--weight-heading);
  padding: var(--space-3); transition-duration: var(--duration-fast);
}
.swagger-ui section.models h4:hover { background: var(--table-row-hover); }
.swagger-ui section.models h5 { color: var(--text-secondary); font-family: var(--font-display); font-size: var(--text-base); }
.swagger-ui section.models .model-container,
.swagger-ui section.models .model-container:hover {
  background: var(--surface-sunken); border-radius: var(--radius-surface);
  transition-duration: var(--duration-base);
}
.swagger-ui .model-box { background: var(--surface-sunken); border-radius: var(--radius-surface); }
.swagger-ui .model {
  color: var(--text-primary); font-family: var(--font-data);
  font-size: var(--text-xs); font-weight: var(--weight-regular);
}
.swagger-ui .model-title { color: var(--text-primary); font-family: var(--font-data); }
.swagger-ui .model-hint {
  background: var(--surface-inverse); color: var(--text-on-inverse);
  border-radius: var(--radius-chip); font-family: var(--font-data); font-size: var(--text-2xs);
}
.swagger-ui .model .property { color: var(--text-tertiary); }
.swagger-ui .model .property.primitive { color: var(--text-secondary); }
.swagger-ui table.model tr.property-row .star { color: var(--text-primary); }
.swagger-ui .model .deprecated span, .swagger-ui .model .deprecated td { color: var(--text-stale) !important; }
.swagger-ui .json-schema-2020-12__title,
.swagger-ui .json-schema-2020-12-keyword__name,
.swagger-ui .json-schema-2020-12-json-viewer__name { font-family: var(--font-data); }

/* (13) ERRORES Y CARGA. La franja roja del vendor pasa al `.callout` de la
   casa: borde de 2px `--state-caution` sobre su superficie (site.css:888-895). */
.swagger-ui .errors-wrapper {
  background: var(--state-caution-surface);
  border: var(--border-width-emphasis) solid var(--state-caution);
  border-radius: var(--radius-surface); margin: var(--space-4) 0;
  padding: var(--density-card); animation: none;
}
.swagger-ui .errors-wrapper hgroup h4, .swagger-ui .errors-wrapper .errors h4 {
  color: var(--text-primary); font-family: var(--font-display);
}
.swagger-ui .errors-wrapper .errors small { color: var(--text-tertiary); }
.swagger-ui .auth-container .errors {
  background-color: var(--state-caution-surface); color: var(--text-primary);
  border-radius: var(--radius-surface); font-family: var(--font-data);
}
.swagger-ui .loading-container .loading:after { color: var(--text-tertiary); font-family: var(--font-data); }
.swagger-ui .dialog-ux .modal-ux {
  background: var(--surface-raised); color: var(--text-primary);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-surface); box-shadow: var(--shadow-overlay);
}
.swagger-ui .dialog-ux .modal-ux-header h3 { color: var(--text-primary); font-family: var(--font-display); }
.swagger-ui .dialog-ux .backdrop-ux { background: var(--surface-overlay); }

/* =============================================================================
   REDOC — más liviano, porque la mitad del trabajo la hace su atributo `theme`
   (ver el docstring). Acá quedan sólo las piezas que el tema no alcanza y los
   nombres de clase ESTABLES: `redoc-wrap`, `menu-content`, `api-content`,
   `api-info`, `redoc-json`, `redoc-markdown` — los seis verificados presentes
   en el bundle redoc 2.5.3. El resto de sus clases las genera
   styled-components con un hash y no se puede apuntar a ellas.
   ============================================================================= */
.redoc-wrap, .menu-content { background: var(--surface-page); }
.menu-content { border-right: var(--border-width) solid var(--border-subtle); }
.api-content h1, .api-content h2, .api-content h3 {
  font-family: var(--font-display); letter-spacing: var(--tracking-tight);
}
.redoc-json, .redoc-markdown pre { font-family: var(--font-data); }
.redoc-markdown code, .redoc-markdown pre { overflow-wrap: anywhere; }
/* El contenedor de ReDoc arranca donde termina el header de la casa: sin esto
   su barra lateral pegajosa se mete debajo de la barra superior. */
#redoc { --dn-top: 3.5rem; }

/* =============================================================================
   EL ÚNICO CORTE: 62rem.
   ============================================================================= */
@media (max-width: 62rem) {
  .doc { grid-template-columns: minmax(0, 1fr); }
  /* El índice deja de flotar y pasa a ser un bloque arriba del texto. Se le
     pone un techo con scroll propio para que un documento de 40 encabezados no
     empuje el contenido fuera de la primera pantalla. */
  .toc { position: static; max-height: 18rem; order: -1; }
  .swagger-ui .opblock .opblock-summary { flex-wrap: wrap; }
  .swagger-ui .opblock .opblock-summary-path { flex-basis: 100%; }
}
