/*
 * Identidad de HodeiShield sobre Material for MkDocs.
 *
 * Paleta derivada del degradado REAL del logo (A109, colorize/impeccable):
 * `app/public/logo/hodeishield-favicon.svg` usa tres paradas —
 * #6C3AED (violeta) → #4F8FFC (azul) → #10B981 (esmeralda) — copiadas aquí
 * literalmente. Hasta este cambio la hoja usaba un morado plano
 * (`#9b7ff8`/`#7a5bf5`) heredado del escudo INVENTADO que el logo real ya
 * sustituyó: no había relación entre "la marca visible" (el favicon/logo)
 * y "la marca en el texto" (enlaces, insignias, primario/acento del tema).
 * Los tres tonos de abajo SON las tres paradas; los sufijos `-light`/`-dark`
 * son aclarados/oscurecidos de la parada violeta, medidos con la fórmula de
 * luminancia relativa WCAG (contraste re-verificado con playwright forzando
 * el toggle de esquema — ver el commit de A109 que introdujo este bloque
 * para la tabla de contraste medida).
 *
 * Deliberadamente NO se inventa un `scheme:` nuevo: se usan los esquemas
 * `default` (claro) y `slate` (oscuro) de Material, ya auditados para
 * contraste AA, y sólo se sustituye el color primario/acento por la receta
 * oficial de "custom colors" (`[data-md-color-primary="custom"]`). Un
 * primer intento con dos esquemas inventados ("hs-dark"/"hs-light") perdía
 * las variables de texto que Material sólo define para sus propios nombres
 * de esquema, dejando texto casi negro sobre fondo oscuro — se descartó
 * tras verlo en captura, no se re-arriesga.
 *
 * Bloques de código: se DEJAN en el gris neutro por defecto de Material
 * (no se tocan aquí). Decisión deliberada, no omisión: este es un sitio de
 * referencia técnica (`api/reference.md` enlaza al JSON OpenAPI real) y el
 * resaltado de sintaxis ya usa su propia paleta semántica (`pymdownx.
 * highlight`); pintar el fondo del bloque con un acento de marca competiría
 * con esa semántica sin añadir jerarquía — el propio DESIGN.md pide "gris
 * neutro cuando sirve al mundo visual", y aquí sirve: legibilidad de código
 * por encima de la decoración de marca.
 *
 * ---------------------------------------------------------------------
 * Crítica de color (owner, 2026-09-27): "tienen muy poco color". Medido
 * con playwright sobre el sitio construido (`mkdocs build`), fuera del
 * header y los enlaces el sitio era gris/negro puro — el degradado de tres
 * paradas del logo no aparecía en ningún otro sitio: ni en las tarjetas de
 * la portada, ni en el admonition `!!! info` (que usaba el cian genérico
 * de Material, `#00b8d4`, sin relación con la marca), ni en la cabecera
 * (que sólo mostraba la primera parada, plana, nunca las tres). Bloque
 * añadido para extender el USO de los tres tonos ya definidos arriba —
 * nunca se inventa un cuarto color — a: acento del admonition `info`,
 * borde superior + icono de las tarjetas `grid.cards` (ciclo de 3, una
 * parada por tarjeta) y una franja de degradado real bajo la cabecera.
 * Todo valor de contraste está medido con la misma fórmula de luminancia
 * relativa WCAG que el resto del fichero (ver script en el commit de esta
 * crítica), nunca a ojo.
 */

:root {
  --hs-brand-violet: #6c3aed; /* parada 1 del degradado del logo */
  --hs-brand-violet-light: #9875f2; /* violeta aclarado ~30 %: 5.64:1 sobre #0b0e1a, 5.03:1 sobre #141b2e */
  --hs-brand-violet-dark: #512bb1; /* violeta oscurecido ~25 %: 9.01:1 sobre blanco */
  --hs-brand-blue: #4f8ffc; /* parada 2 del degradado del logo (acento) */
  --hs-brand-blue-dark: #3f72ca; /* azul oscurecido ~20 %: 4.70:1 sobre blanco (pasa AA de texto), 4.25:1 sobre la franja del admonition info al 10% — el azul crudo da 3.15:1 sobre blanco y 2.85:1 sobre esa franja: insuficiente para el icono */
  --hs-brand-emerald: #10b981; /* parada 3 del degradado del logo */
  --hs-brand-emerald-dark: #096f4d; /* emerald oscurecido ~40 %: 6.19:1 sobre blanco, 5.33:1 sobre su franja translúcida */
  --hs-radius-sm: 6px;
  --hs-radius-md: 8px;
  --hs-radius-lg: 10px;
  --hs-radius-xl: 14px;
}

/* ---------- Color primario/acento de marca (receta oficial de Material) ---------- */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--hs-brand-violet);
  --md-primary-fg-color--light: var(--hs-brand-blue);
  --md-primary-fg-color--dark: var(--hs-brand-violet-dark);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffff;
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--hs-brand-blue);
  --md-accent-fg-color--transparent: rgba(79, 143, 252, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: #ffffff;
}

/* ---------- Ajustes finos sobre el esquema oscuro (slate) ---------- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0b0e1a;
  --md-hue: 245;
  --md-typeset-a-color: var(--hs-brand-violet-light);
}

[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  background-color: #0d1120;
}

[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  background-color: #141b2e;
}

/* ---------- Ajustes finos sobre el esquema claro (default) ---------- */
[data-md-color-scheme="default"] {
  /* Parada 1 del degradado del logo tal cual: 6.06:1 sobre blanco, AA. */
  --md-typeset-a-color: var(--hs-brand-violet);
}

/* ---------- Tipografía (DESIGN.md · typography.*) ---------- */
.md-typeset {
  font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1;
}

.md-typeset h1,
.md-typeset h2 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-typeset code,
.md-typeset pre,
.md-typeset kbd {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* ---------- Componentes ---------- */
.md-typeset .admonition,
.md-typeset details,
.md-typeset pre,
.md-typeset code {
  border-radius: var(--hs-radius-md);
}

.md-typeset table:not([class]) {
  border-radius: var(--hs-radius-md);
  overflow: hidden;
}

/* Cabecera de las tablas de referencia de la API (api/overview.md, y por
   extensión cualquier tabla sin clase): un filete del acento del degradado
   (parada 2, azul) bajo la fila de cabecera. Es un borde decorativo, no
   texto — el umbral aplicable es 3:1 de componentes/UI (WCAG 1.4.11), que
   --hs-brand-blue cumple (3.15:1 sobre blanco, medido) sin competir con el
   texto de la tabla, que sigue usando el color por defecto de Material. */
.md-typeset table:not([class]) thead tr {
  border-bottom: 2px solid var(--hs-brand-blue);
}

/* Tarjetas de la portada (grid.cards, extensión pymdownx): Material las
   deja con su radio por defecto (2px, medido con impeccable/A109), muy por
   debajo de los 14px que DESIGN.md fija para `surface-card`
   (--radius-xl, DESIGN.md:359). Se alinean al token del sistema en vez de
   dejarlas leer como el theme sin tocar. */
.md-typeset .grid.cards > ul > li {
  border-radius: var(--hs-radius-xl);
}

.md-header,
.md-tabs {
  box-shadow: none;
}

/* Franja de degradado real (las tres paradas del logo) bajo la cabecera.
   Hasta esta crítica la cabecera sólo mostraba la parada 1 (violeta),
   plana — el degradado de tres tonos que sí existe en el logo/favicon no
   aparecía en ningún otro lugar del sitio. Filete de 3px, puramente
   decorativo (no transporta texto ni estado): no aplica ningún umbral de
   contraste de WCAG 1.4.11, que sólo cubre objetos gráficos que aportan
   información. */
.md-header {
  position: relative;
}

.md-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--hs-brand-violet) 0%,
    var(--hs-brand-blue) 50%,
    var(--hs-brand-emerald) 100%
  );
}

/* Franja reutilizada de la consola para las notas "Requiere plan" y "Rol"
   de las páginas de producto y de guías por rol. */
.hs-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.55rem;
  border-radius: var(--hs-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hs-badge--plan {
  /* Parada 1 del degradado (violeta) a 16 %. */
  background: rgba(108, 58, 237, 0.16);
  /* Re-medido con playwright (A109/colorize) sobre el degradado REAL: la
     franja anterior (`--hs-brand-purple-dark: #5f3fd6`, 5.39:1) queda
     sustituida por --hs-brand-violet-dark (#512bb1), derivado del mismo
     violeta del logo — 7.02:1 sobre esta franja translúcida en claro,
     sigue pasando AA con más margen que la corrección previa. */
  color: var(--hs-brand-violet-dark);
}

[data-md-color-scheme="slate"] .hs-badge--plan {
  /* --hs-brand-violet-light: 5.03:1 sobre esta franja en oscuro. */
  color: var(--hs-brand-violet-light);
}

.hs-badge--role {
  /* Parada 3 del degradado (esmeralda) a 16 %. */
  background: rgba(16, 185, 129, 0.16);
  /* --hs-brand-emerald-dark: 5.33:1 sobre esta franja translúcida en claro
     (el tono crudo #10b981 sólo da 2.98:1 aquí — insuficiente para AA). */
  color: var(--hs-brand-emerald-dark);
}

[data-md-color-scheme="slate"] .hs-badge--role {
  /* --hs-brand-emerald crudo: 6.06:1 sobre esta franja translúcida en
     oscuro — no hace falta aclarar/oscurecer en este esquema. */
  color: var(--hs-brand-emerald);
}

/* ---------- Admonition `info` con acento de marca (única variante usada
   en el sitio: 2 apariciones, ambas en api/overview.md) ---------- */
/* Material sin tocar pinta `!!! info` con su cian genérico (#00b8d4, medido
   en el CSS compilado de Material) — sin relación alguna con el degradado
   del logo. Se sustituye por la parada 2 (azul) del propio degradado, con
   las mismas reglas de Material (borde + título con fondo traslúcido al
   10% + icono enmascarado), sólo cambiando el color. El borde y el filete
   del icono son objetos gráficos no textuales: aplica el umbral de 3:1 de
   WCAG 1.4.11, no el de 4.5:1 de texto. */
.md-typeset .admonition.info,
.md-typeset details.info {
  /* --hs-brand-blue-dark: 4.70:1 sobre blanco — el azul crudo (3.15:1)
     pasa el umbral de 3:1 del borde con poco margen; se usa la variante
     oscurecida para tener holgura real, igual que --hs-brand-violet-dark
     en .hs-badge--plan arriba. */
  border-color: var(--hs-brand-blue-dark);
}

.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
  background-color: rgba(63, 114, 202, 0.1);
}

.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before {
  /* --hs-brand-blue-dark sobre la franja traslúcida de arriba: 4.25:1,
     medido por luminancia relativa (blend del 10% sobre blanco = #edf4ff;
     el azul crudo sólo da 2.85:1 ahí, insuficiente para 3:1). */
  background-color: var(--hs-brand-blue-dark);
}

.md-typeset .info > .admonition-title::after,
.md-typeset .info > summary::after {
  color: var(--hs-brand-blue-dark);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.info,
[data-md-color-scheme="slate"] .md-typeset details.info {
  /* --hs-brand-blue crudo: 5.44:1 sobre el fondo del admonition en oscuro
     (#141b2e) — de sobra, no hace falta oscurecerlo en este esquema. */
  border-color: var(--hs-brand-blue);
}

[data-md-color-scheme="slate"] .md-typeset .info > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .info > summary {
  background-color: rgba(79, 143, 252, 0.12);
}

[data-md-color-scheme="slate"] .md-typeset .info > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .info > summary::before {
  /* --hs-brand-blue sobre esa franja en oscuro: 4.71:1, medido. */
  background-color: var(--hs-brand-blue);
}

[data-md-color-scheme="slate"] .md-typeset .info > .admonition-title::after,
[data-md-color-scheme="slate"] .md-typeset .info > summary::after {
  color: var(--hs-brand-blue);
}

/* ---------- Tarjetas `grid.cards`: acento por parada, ciclo de 3 ----------
   Antes de esta crítica las tarjetas de la portada (y de guías por rol) no
   llevaban NINGÚN color de marca — sólo el radio de esquina (regla de
   arriba). Se añade un borde superior de 3px y se colorea el icono grande
   (`.twemoji.lg`, el que Material genera para `{ .lg .middle }`) con la
   misma parada, rotando violeta → azul → esmeralda por tarjeta. El titular
   de la tarjeta NO cambia de color (se queda con el texto por defecto, ya
   AA): sólo el borde y el icono son objetos gráficos, umbral 3:1. */
.md-typeset .grid.cards > ul > li {
  border-top: 3px solid var(--hs-brand-violet);
  /* --hs-brand-violet: 6.06:1 sobre la tarjeta clara (blanco) y 3.17:1
     sobre la tarjeta oscura (--md-default-bg-color en slate, #0b0e1a) —
     pasa 3:1 en los dos esquemas; se sustituye en slate más abajo por la
     variante clara para más margen visual, no porque ésta falle. */
}

.md-typeset .grid.cards > ul > li:nth-child(3n + 2) {
  border-top-color: var(--hs-brand-blue);
  /* --hs-brand-blue: 3.15:1 sobre blanco, 6.11:1 sobre #0b0e1a — pasa en
     los dos esquemas con el mismo valor, sin variante. */
}

.md-typeset .grid.cards > ul > li:nth-child(3n + 3) {
  /* --hs-brand-emerald-dark: 6.19:1 sobre blanco. El esmeralda crudo sólo
     da 2.54:1 sobre blanco — no pasa 3:1 en el esquema claro. */
  border-top-color: var(--hs-brand-emerald-dark);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li {
  /* --hs-brand-violet-light: 5.64:1 sobre #0b0e1a (vs 3.17:1 del violeta
     crudo) — mismo violeta, con holgura real en el esquema oscuro. */
  border-top-color: var(--hs-brand-violet-light);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:nth-child(3n + 3) {
  /* --hs-brand-emerald crudo: 7.58:1 sobre #0b0e1a — de sobra en oscuro. */
  border-top-color: var(--hs-brand-emerald);
}

.md-typeset .grid.cards > ul > li .twemoji.lg {
  color: var(--hs-brand-violet);
}

.md-typeset .grid.cards > ul > li:nth-child(3n + 2) .twemoji.lg {
  color: var(--hs-brand-blue);
}

.md-typeset .grid.cards > ul > li:nth-child(3n + 3) .twemoji.lg {
  color: var(--hs-brand-emerald-dark);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li .twemoji.lg {
  color: var(--hs-brand-violet-light);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:nth-child(3n + 3) .twemoji.lg {
  color: var(--hs-brand-emerald);
}

/*
 * Embed de demos interactivas de Storylane, sujeto a consentimiento
 * (`docs/assets/js/storylane-embed.js`, `hooks/consent_i18n.py`). Sin
 * `data-demo-url` (demo aun no grabada) el bloque es solo la captura, sin
 * marco ni sombra propios: la captura ya lleva su propio tratamiento visual.
 * Con URL y sin consentimiento, la captura se cubre con un boton que reutiliza
 * `.md-button--primary` (color de marca via `--md-primary-fg-color`, ya
 * mapeado a los tres tonos del logo -- no se inventa un cuarto color aqui).
 */
.hs-storylane {
  margin: 1.5em 0;
}

.hs-storylane__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--hs-radius-sm, 6px);
  border: 1px solid var(--md-default-fg-color--lightest);
}

.hs-storylane__media img,
.hs-storylane__media picture img {
  display: block;
  width: 100%;
  height: auto;
}

.hs-storylane--poster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
}

.hs-storylane__cta {
  align-self: center;
}

.hs-storylane__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--hs-radius-sm, 6px);
  overflow: hidden;
  border: 1px solid var(--md-default-fg-color--lightest);
}

.hs-storylane__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}