/* insights-fig-sales-playbook-template.css
   Extraido de insights-lib.css: SOLO los bloques de los cinco componentes que
   usa esta pieza (27 LAYERS, 04 FIELDS, 36 PARALLEL, 21 CYCLE, 43 SELF-CHECK).
   Regla de reglas-diseno-insights.md: 'Copia solo los bloques de los componentes
   que usa el articulo nuevo'.
   Generado por gen-pieza-sales-playbook.py. No editar a mano. */

/* >>> header (insights-lib.css 1-172) */
/* ==========================================================================
   TIPOGRAFIA: TODO POPPINS (2026-08-11)
   Una sola familia, en cinco pesos: 200 extralight, 300 light, 400 normal,
   700 bold, 800 extrabold. No hay 500 ni 600 y no hay familia mono: lo que
   antes era chrome en Geist Mono ahora es Poppins.
   OJO con el resto del sistema: sention.css todavia declara Geist en
   --font-sans y Geist Mono en --font-mono, y tokens.css declara Poppins. Como
   tokens.css carga despues, gana Poppins para el sans, pero --font-mono sigue
   saliendo de sention.css. Esta libreria ya no lo usa.
   ========================================================================== */

/* ==========================================================================
   INSIGHTS LIB - libreria de instrumentos del hub.
   Portada del catalogo v7 (2026-08-11). El mockup venia en Poppins y con 383
   hex a mano; aca todo sale de tokens y de la fuente del sistema.
   Carga SIEMPRE despues de insights-core.css y antes del CSS por articulo.
   Fuente de verdad de cada componente: component-catalog.md
   Los cuatro componentes en conflicto con el catalogo (FUNNEL trapecio, FAN
   torta, LAYERS piramide, STEPS con vino alternado) conservan aca su version
   v7 con sufijo -v7, y su version de doctrina vive en el mismo archivo mas
   abajo. Se muestran lado a lado en el lab hasta que Carlos elija.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LA PLACA DEL INSTRUMENTO ES BLANCA (2026-08-11)
   La pagina es arena; el instrumento va sobre blanco para que se despegue.
   El core deja `.ins-fig__panel { background: none }` y cada figura declaraba
   su forma; aca la libreria fija una sola: superficie blanca con aire.

   `--ins-paper` es el color de "papel" DENTRO del instrumento: el anillo que
   despega un nodo del eje, el fondo de una marca hueca, el relleno de un
   eslabon. Antes era arena porque el instrumento vivia sobre arena. Ahora
   apunta al mismo blanco de la placa, y si alguna figura vuelve a ir sobre
   arena se cambia esta sola variable.
   -------------------------------------------------------------------------- */
.ins-fig__panel {
  --ins-paper: var(--bg-raised);
  background: var(--ins-paper);
  padding: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
}

/* --------------------------------------------------------------------------
   REGLA DE PISO DE LA LIBRERIA
   El core mide la prosa: `.ins-prose p { max-width: var(--ins-measure) }`, y
   `--ins-measure` son 44rem. Un instrumento que use <p> como pieza
   estructural (la cadena, la barra de un galon, el rotulo de una espina)
   hereda ese tope y se queda corto aunque su contenedor sea mas ancho. Paso
   tres veces antes de escribirse esta regla. Un instrumento no es prosa: lo
   mide su figura, no la columna de lectura.
   -------------------------------------------------------------------------- */
/* Especificidad: `.ins-prose p` es (0,1,1). `.ins-fig__panel > *` es (0,1,0)
   y PIERDE, aunque cargue despues. Hay que subir a (0,2,1). */
.ins-prose .ins-fig__panel > *,
.ins-prose .ins-fig__panel > * > p,
.ins-prose .ins-fig__panel p { max-width: none; }


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

button,
    input {
      font: inherit;
    }

.ins-label {
  font-family: var(--font-sans);
      color: var(--text-primary);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.11em;
      text-transform: uppercase;
    }

.ins-value {
      color: var(--accent);
      font-weight: 700;
    }

.ins-loss {
      color: var(--accent-alt);
      font-weight: 700;
    }

/* 02 CHAIN */

/* 03 STEPS */

/* 04 FIELDS */

/* 05 SPEC */

/* 06 LEDGER */

/* 07 MATRIX */

/* 08 FAN */

/* 09 MAGNITUDE */

/* 10 OVERWRITE */

/* 11 SHOT */

/* 12 TABLE — el componente vive mas abajo, reescrito. Lo que habia aca era un
   selector huerfano (`.ins-table th,`) que quedo colgado al retirar las
   reglas del port y se pegaba a la regla siguiente: BULLET terminaba
   aplicandole display:grid a los <th> de cualquier tabla del sistema. */

/* 13 BULLET */









/* 14 WATERFALL */










/* 15 FUNNEL */

/* 16 SPLIT */










/* 17 DELTA */







/* 22 QUADRANT */





/* 27 LAYERS */

/* 33 SCORECARD */










/* >>> 21 CYCLE (insights-lib.css 645-804) */
/* ==========================================================================
   21 CYCLE  ·  .ins-cycle
   Reconstruido el 2026-08-12 y rehecho el mismo dia sobre una referencia de
   Carlos: anillo de sectores en GALON, cada uno con su titulo, su bajada y su
   lista rotulada. La version de discos sueltos unidos por arcos quedo
   descartada.

   Adentro de cada sector va titulo y una bajada corta, todo horizontal. Cada
   renglon de mas es un renglon que se sale del sector, y como el texto es
   blanco, lo que se sale cae sobre el hueco blanco y desaparece.

   Que muestra: un proceso que se retroalimenta, donde la salida de la ultima
   etapa alimenta a la primera. Si el proceso termina, va STEPS.

   Entre tres y cinco etapas. Con dos no hay ciclo y con seis no se lee.

   La punta de galon de cada sector encastra en la muesca del siguiente: la
   direccion la dice la FORMA, no una flecha agregada encima.

   Color: la referencia usa cuatro tintas distintas. El sistema tiene un solo
   azul, asi que los cuatro sectores son el mismo azul en cuatro
   intensidades. Aca la escala SI significa: las etapas de un ciclo estan
   ordenadas, y la intensidad refuerza por donde se empieza. (En el balanced
   scorecard se rechazo por lo contrario: ahi las cuatro perspectivas no
   tienen orden.)

   El corte que cierra el circulo puede estar condicionado: cuando lo esta se
   marca en vino sobre su propio borde, porque es un cierre que el registro no
   puede garantizar.
   ========================================================================== */
.ins-cycle { display: grid; gap: 0.7rem; width: 100%; }

/* El instrumento es cuadrado. A ancho completo se centra en vez de estirarse:
   un circulo de 1000px de diametro no es mas legible, solo mas grande. */
.ins-cycle__plot {
  display: block;
  width: 100%;
  max-width: 40rem;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

/* El sector. La intensidad la fija --k (1 = el mas oscuro). */
.ins-cycle__seg {
  fill: color-mix(in srgb, var(--accent) calc(100% - (var(--k) - 1) * 8%), var(--ins-paper, var(--bg-raised)));
  stroke: none;
}

.ins-cycle__title {
  fill: var(--bg-raised);
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 700;
}

.ins-cycle__sub {
  fill: color-mix(in srgb, var(--bg-raised) 88%, var(--accent));
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
}

/* El numeral de etapa. Es un indice, y los indices van en vino. Vive fuera del
   anillo porque adentro seria vino sobre azul. */
.ins-cycle__n {
  fill: var(--accent-alt);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* El borde del corte condicionado. */
.ins-cycle__cut {
  fill: none;
  stroke: var(--accent-alt);
  stroke-width: 3;
  stroke-dasharray: 9 7;
}

.ins-cycle__cond {
  fill: var(--accent-alt);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  text-anchor: middle;
}

.ins-cycle__hub {
  fill: var(--ink, var(--text-primary));
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  text-anchor: middle;
}

.ins-cycle__scale {
  margin: 0;
  max-width: none;
  font-size: 0.74rem;
  color: var(--text-muted);
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes ins-cycle-in {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes ins-cycle-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Los sectores crecen desde el centro del ANILLO, no desde el suyo propio:
     con `fill-box` cada uno se expandiria desde su propio centroide y el
     anillo se desarmaria. Por eso el origen va en coordenadas del viewBox. */
  .ins-fig.is-in .ins-cycle__seg {
    transform-origin: 50% 50%;
    animation: ins-cycle-in var(--dur-base) var(--ease-out) both;
    animation-delay: calc((var(--i) - 1) * 0.12s);
  }

  .ins-fig.is-in .ins-cycle__title,
  .ins-fig.is-in .ins-cycle__sub,
  .ins-fig.is-in .ins-cycle__n {
    animation: ins-cycle-fade var(--dur-base) var(--ease-out) both;
    animation-delay: calc(0.35s + (var(--i) - 1) * 0.12s);
  }

  .ins-fig.is-in .ins-cycle__hub {
    animation: ins-cycle-fade var(--dur-base) var(--ease-out) 0.9s both;
  }

  .ins-fig.is-in .ins-cycle__cut,
  .ins-fig.is-in .ins-cycle__cond {
    animation: ins-cycle-fade var(--dur-base) var(--ease-out) 1.2s both;
  }
}

/* El instrumento es cuadrado, asi que no puede scrollear como los anchos: en
   una placa de 390px el dibujo entero mide 390 y un tipo de 19 se renderiza en
   8px. La solucion es al reves que en el TREND: se AGRANDA el tipo dentro del
   viewBox, que es coordenada del dibujo y escala con el. */
@media (max-width: 700px) {
  .ins-cycle__title { font-size: 38px; }

  .ins-cycle__sub { font-size: 24px; }

  .ins-cycle__n { font-size: 22px; }

  .ins-cycle__hub { font-size: 28px; }

  .ins-cycle__cond { font-size: 23px; }
}


/* >>> 36 PARALLEL (insights-lib.css 1156-1313) */
/* ==========================================================================
   36 PARALLEL  ·  .ins-parallel
   Reconstruido el 2026-08-12. Lo que habia era una grilla con filete en cada
   celda: doce filetes en una figura, contra el presupuesto del playbook.

   Que muestra: dos caminos paso a paso, cuando la divergencia es el punto.
   Con mas de dos, va TABLE.

   La forma: los dos caminos se enfrentan contra un EJE central que dice el
   paso. El de la izquierda se alinea a la derecha y el de la derecha a la
   izquierda, asi que las dos versiones del mismo paso se tocan en el eje y la
   diferencia se lee sin buscarla.

   El vino marca el camino que deja de poder probarse, desde la fila donde se
   parte y hasta el final. No es "el camino malo": es el que el registro ya no
   puede certificar.

   Filetes: uno solo, debajo del encabezado. Las filas se separan por aire.
   ========================================================================== */
.ins-parallel { display: grid; gap: 0; width: 100%; }

.ins-parallel__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7rem, 11rem) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: center;
  padding: 0.7rem 0;
}

.ins-parallel__head {
  padding-bottom: 0.7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 30%, transparent);
}

.ins-parallel__who {
  max-width: none;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.ins-parallel__who[data-side="a"] { text-align: right; }

.ins-parallel__who[data-side="b"] { text-align: left; }

.ins-parallel__who[data-kind="loss"] { color: var(--accent-alt); }

/* El eje. Dice el paso, y es lo unico que las dos columnas comparten. */
.ins-parallel__step {
  max-width: none;
  margin: 0;
  padding: 0.35rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
}

.ins-parallel__a,
.ins-parallel__b {
  max-width: none;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text-primary);
  text-wrap: pretty;
}

.ins-parallel__a { text-align: right; }

.ins-parallel__b { text-align: left; }

/* Desde donde se parten, el lado que deja de poder probarse va en vino. */
.ins-parallel__row[data-diff] .ins-parallel__b {
  font-weight: 700;
  color: var(--accent-alt);
}

.ins-parallel__row[data-diff] .ins-parallel__a { font-weight: 700; color: var(--ink, var(--text-primary)); }

/* La fila donde se parten. El eje lo dice una sola vez. */
.ins-parallel__fork {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7rem, 11rem) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: center;
  padding: 0.2rem 0;
}

.ins-parallel__forkmark {
  grid-column: 2;
  margin: 0;
  max-width: none;
  padding: 0.3rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  font-style: italic;
  text-align: center;
  color: var(--accent-alt);
  border-top: 2px solid var(--accent-alt);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes ins-parallel-in {
    from { opacity: 0; transform: translateY(0.4rem); }
    to   { opacity: 1; transform: none; }
  }

  .ins-fig.is-in .ins-parallel__row,
  .ins-fig.is-in .ins-parallel__fork {
    animation: ins-parallel-in var(--dur-base) var(--ease-out) both;
    animation-delay: calc((var(--i) - 1) * 0.08s);
  }
}

@media (max-width: 760px) {
  /* Enfrentados a 700px cada columna queda en 200px y el paso, en el medio,
     en 110: se rompen las tres. Se apila por paso: primero el paso, y debajo
     los dos caminos, cada uno con su rotulo. */
  .ins-parallel__row,
  .ins-parallel__fork { grid-template-columns: 1fr; gap: 0.35rem; }

  .ins-parallel__head { display: none; }

  /* Apilado, el eje tiene que ENCABEZAR los dos caminos. En el orden del DOM
     va en el medio, porque enfrentados esa es su posicion. */
  .ins-parallel__step { order: -1; text-align: left; }

  .ins-parallel__a,
  .ins-parallel__b { text-align: left; padding-left: 0.9rem; }

  .ins-parallel__a { box-shadow: inset 2px 0 0 var(--accent); }

  .ins-parallel__b { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--text-primary) 30%, transparent); }

  .ins-parallel__row[data-diff] .ins-parallel__b { box-shadow: inset 2px 0 0 var(--accent-alt); }

  .ins-parallel__forkmark { grid-column: 1; }

  /* En apilado hace falta decir de quien es cada renglon: enfrentados lo decia
     la posicion, y apilados no lo dice nadie. */
  .ins-parallel__a::before,
  .ins-parallel__b::before {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    content: attr(data-who);
  }
}


/* >>> 43 SELF-CHECK (insights-lib.css 1539-1743) */
/* ==========================================================================
   43 SELF-CHECK  ·  .ins-check
   Construido el 2026-08-12. Primero de la Ola 3, y el primero de la libreria
   con JS propio: `assets/js/insights-check.js`.

   Que hace: cuatro preguntas de si o no, y un veredicto por conteo.

   Donde va: en el punto de maxima tension del articulo, antes de la
   resolucion. Convierte el CTA en consecuencia de lo que el lector acaba de
   descubrir sobre si mismo, en vez de un boton al final.

   SIN JS EL CONTENIDO NO SE ESCONDE. Las tres lecturas posibles estan en el
   HTML, cada una con su condicion escrita ("zero or one", "two or three",
   "all four"), y se leen como una lista. El JS solo TAPA las dos que no
   aplican, y solo despues de que el lector contesto todo. Por eso el ocultado
   cuelga de `.is-live`, que la pone el script: si el script no corre, no hay
   nada oculto.

   Color: azul el camino que se puede defender, vino el que no. El veredicto
   del medio va en tinta, porque a mitad de camino no hay veredicto.

   Prohibido pedir datos personales aca. El dato se pide en la landing del
   magnet.
   ========================================================================== */
.ins-check { display: grid; gap: 0; width: 100%; }

.ins-check__intro {
  max-width: none;
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Una pregunta. Un `fieldset` con `legend` seria lo canonico, pero el legend
   NO participa de la grilla del fieldset: se renderiza aparte y las dos
   respuestas se reparten las columnas solas, con el "Yes" comiendose la fila
   entera. Un `role="radiogroup"` con `aria-labelledby` da lo mismo al lector
   de pantalla y deja el layout en nuestras manos. */
.ins-check__q {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem 1rem;
  align-items: center;
  padding: 0.7rem 0;
}

.ins-check__opts { display: flex; gap: 0.4rem; }

.ins-check__label {
  max-width: none;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink, var(--text-primary));
}

.ins-check__n {
  margin-right: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-alt);
}

/* El boton de respuesta. El radio real sigue ahi, invisible pero enfocable:
   un boton falso rompe el teclado y el lector de pantalla. */
.ins-check__opt {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 4.4rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.ins-check__opt input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ins-check__opt:hover { color: var(--text-primary); }

.ins-check__opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Elegida. El "si" es lo que se puede probar y va en azul; el "no" es lo que
   el registro no puede certificar y va en vino. */
.ins-check__opt:has(input:checked) {
  color: var(--bg-raised);
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.ins-check__opt[data-answer="no"]:has(input:checked) {
  background: var(--accent-alt);
  box-shadow: inset 0 0 0 1px var(--accent-alt);
}

/* El contador. Solo aparece cuando el script corre. */
.ins-check__progress {
  display: none;
  margin: 0.3rem 0 0;
  max-width: none;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
}

.ins-check.is-live .ins-check__progress { display: block; }

.ins-check__outs { display: grid; gap: 0.5rem; margin-top: 1rem; }

.ins-check__out {
  padding: 0.9rem 1rem;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  box-shadow: inset 3px 0 0 var(--text-primary);
}

.ins-check__out[data-band="high"] {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.ins-check__out[data-band="low"] {
  background: color-mix(in srgb, var(--accent-alt) 7%, transparent);
  box-shadow: inset 3px 0 0 var(--accent-alt);
}

.ins-check__cond {
  max-width: none;
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ins-check__out[data-band="high"] .ins-check__cond { color: var(--accent); }

.ins-check__out[data-band="low"] .ins-check__cond { color: var(--accent-alt); }

.ins-check__verdict {
  max-width: none;
  margin: 0;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink, var(--text-primary));
}

.ins-check__why {
  max-width: none;
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-primary);
}

.ins-check__cta {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ins-check__out[data-band="low"] .ins-check__cta { color: var(--accent-alt); }

/* Con el script vivo, las lecturas se tapan hasta que el lector contesto todo,
   y despues queda solo la suya. */
.ins-check.is-live .ins-check__out { display: none; }

.ins-check.is-live[data-band="low"] .ins-check__out[data-band="low"],
.ins-check.is-live[data-band="mid"] .ins-check__out[data-band="mid"],
.ins-check.is-live[data-band="high"] .ins-check__out[data-band="high"] { display: block; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes ins-check-out {
    from { opacity: 0; transform: translateY(0.5rem); }
    to   { opacity: 1; transform: none; }
  }

  .ins-check.is-live[data-band] .ins-check__out {
    animation: ins-check-out var(--dur-base) var(--ease-out) both;
  }
}

@media (max-width: 620px) {
  /* La pregunta pasa arriba y las dos respuestas debajo, a lo ancho: en una
     sola fila el texto queda en 140px. */
  .ins-check__q { grid-template-columns: 1fr; }

  .ins-check__opts > * { flex: 1; }
}


/* >>> 04 FIELDS (insights-lib.css 3238-3532) */
/* ==========================================================================
   04 FIELDS  ·  .ins-box
   Pares clave/valor SIN orden que definen un objeto. Tres a seis.
   Que no tengan orden es la diferencia con STEPS, y por eso no llevan
   numeral: numerarlos afirmaria una secuencia que el objeto no tiene.

     A · CAJA   la forma del catalogo: una caja partida en celdas, cada campo
                en la suya. El objeto ES la caja; los campos son sus partes.

   La clave va en azul: es lo que el registro SI define. Un campo que el
   registro deja abierto lleva data-state="loss" y pasa a vino.
   ========================================================================== */
.ins-box {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  width: 100%;
  /* Un solo filete por borde compartido: la caja se dibuja con el borde de
     arriba y el de la izquierda del contenedor, y cada celda aporta el suyo
     de la derecha y el de abajo. Asi no hay lineas dobles entre celdas. */
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.ins-box__field {
  min-height: 6rem;
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: 1.1rem 1.2rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.ins-box__k {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.ins-box__v {
  max-width: none;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-primary);
  text-wrap: pretty;
}

/* El campo que el registro deja abierto. La clave cambia de color Y el campo
   gana un borde izquierdo: en monocromo se sigue distinguiendo. */
.ins-box__field[data-state="loss"] {
  border-left: 3px solid var(--accent-alt);
  margin-left: -1px;
}

.ins-box__field[data-state="loss"] .ins-box__k { color: var(--accent-alt); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes ins-box-in {
    from { opacity: 0; transform: translateY(0.4rem); }
    to   { opacity: 1; transform: none; }
  }

  /* La caja se completa campo por campo: el articulo dice que esta terminada
     cuando lleva los cuatro, y el movimiento cuenta hasta cuatro. */
  .ins-fig.is-in .ins-box__field {
    animation: ins-box-in var(--dur-base) var(--ease-out) both;
    animation-delay: calc((var(--i) - 1) * 0.1s);
  }
}

/* Cuatro campos en columna siguen siendo una caja; dos columnas de 150px no. */
@media (max-width: 640px) {
  .ins-box__field { min-height: 0; }
}

/* --------------------------------------------------------------------------
   B · TABLA  ·  .ins-box--table
   Copia de la referencia de Carlos (2026-08-11), con dos cambios que el
   pidio o que el sistema impone:

   - SIN ICONOS. Los circulos con icono de arriba se reemplazan por celdas de
     encabezado, que era el pedido. Los de la izquierda tambien salen: no hay
     set de iconos de marca, y media forma con icono y media sin se lee como
     un error.
   - La referencia alterna rojo y azul fila por fila. Eso es decoracion: la
     fila 2 no es de otra naturaleza que la 1. Todas las claves van en azul y
     el vino queda para la fila que el registro no puede certificar.

   La marca de estado de la derecha distingue por FORMA ademas de por color:
   check cuando el registro lo prueba, guion cuando no.
   -------------------------------------------------------------------------- */
.ins-box--table {
  display: grid;
  grid-template-columns:
    minmax(7rem, 0.85fr)          /* la clave, como barra llena */
    auto                          /* el galon de direccion      */
    repeat(var(--vals, 2), minmax(0, 1fr))
    auto;                         /* la marca de estado         */
  align-items: stretch;
  gap: 0.55rem 0;
  width: 100%;
  border: 0;
}

/* Encabezados: celdas, no rotulos colgados. La ultima va llena, como en la
   referencia, porque es la columna que cierra la lectura. */
/* Los encabezados van en SANS, no en mono. Geist Mono solo carga 400 y 500,
   asi que pedirle bold da faux-bold, que este proyecto prohibe. Geist sans si
   tiene 600 real. De paso pierden la caja alta y el tracking de la banda de
   chrome: son encabezados de tabla, no telemetria. */
.ins-box__h {
  padding: 0.65rem 0.9rem 0.75rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink, var(--text-primary));
}

.ins-box__h--fill {
  border-bottom: 0;
  background: var(--accent);
  color: var(--bg-raised);
  text-align: center;
}

/* La clave, barra llena. */
.ins-box--table .ins-box__k {
  display: flex;
  align-items: center;
  padding: 0.9rem 1rem;
  background: var(--accent);
  color: var(--bg-raised);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.ins-box--table [data-state="loss"] .ins-box__k { background: var(--accent-alt); }

/* El galon de direccion de la referencia, en tres puntas. Es geometria, no
   un icono: se dibuja con bordes. */
.ins-box__chev {
  display: flex;
  align-items: center;
  gap: 0.18rem;
  padding-inline: 0.9rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-raised));
}

.ins-box--table [data-state="loss"] .ins-box__chev {
  background: color-mix(in srgb, var(--accent-alt) 8%, var(--bg-raised));
}

.ins-box__chev i {
  width: 0.34rem;
  height: 0.34rem;
  border-top: 1.5px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-right: 1.5px solid color-mix(in srgb, var(--accent) 60%, transparent);
  transform: rotate(45deg);
}

.ins-box--table [data-state="loss"] .ins-box__chev i {
  border-color: color-mix(in srgb, var(--accent-alt) 60%, transparent);
}

/* Las celdas de valor son CELDAS: superficie propia con un tinte del color de
   su fila, no texto suelto sobre el papel. Con la hairline sola se leian como
   renglones de un parrafo largo; con el tinte, la fila se lee como fila.
   El tinte sale del mismo acento de la fila, asi que la de vino se tinta en
   vino y no hace falta una regla nueva por estado. */
.ins-box--table .ins-box__v {
  display: flex;
  align-items: center;
  padding: 0.9rem 1rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-raised));
  font-size: 0.8rem;
  line-height: 1.45;
}

.ins-box--table [data-state="loss"] .ins-box__v {
  background: color-mix(in srgb, var(--accent-alt) 8%, var(--bg-raised));
}

/* Una hairline vertical separa una celda de valor de la siguiente. Es la
   unica linea que queda adentro de la fila: el resto lo separa el color. */
.ins-box--table .ins-box__v + .ins-box__v {
  border-left: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.ins-box--table [data-state="loss"] .ins-box__v + .ins-box__v {
  border-left-color: color-mix(in srgb, var(--accent-alt) 18%, transparent);
}

/* La marca de estado: circulo con check o con guion. La forma cambia, asi que
   en monocromo se sigue leyendo cual es cual. */
.ins-box__flag {
  display: grid;
  place-items: center;
  padding-inline: 1rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-raised));
}

.ins-box--table [data-state="loss"] .ins-box__flag {
  background: color-mix(in srgb, var(--accent-alt) 8%, var(--bg-raised));
}

.ins-box__flag span {
  position: relative;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--accent);
}

.ins-box__flag span::before {
  content: '';
  position: absolute;
  top: 0.34rem;
  left: 0.42rem;
  width: 0.32rem;
  height: 0.6rem;
  border-right: 2px solid var(--bg-raised);
  border-bottom: 2px solid var(--bg-raised);
  transform: rotate(45deg);
}

.ins-box--table [data-state="loss"] .ins-box__flag span { background: var(--accent-alt); }

/* Guion en vez de check: lo que el registro no puede certificar no se marca
   con una cruz (eso seria "esta mal"), se marca con un tramo abierto. */
.ins-box--table [data-state="loss"] .ins-box__flag span::before {
  top: 50%;
  left: 0.3rem;
  width: 0.75rem;
  height: 0;
  border-right: 0;
  border-bottom: 2px solid var(--bg-raised);
  transform: translateY(-1px);
}

/* Cada fila es un display: contents para que sus celdas caigan en la grilla
   madre y las columnas queden alineadas de punta a punta. */
.ins-box__row { display: contents; }

@media (prefers-reduced-motion: no-preference) {
  .ins-fig.is-in .ins-box--table .ins-box__k,
  .ins-fig.is-in .ins-box--table .ins-box__chev,
  .ins-fig.is-in .ins-box--table .ins-box__v,
  .ins-fig.is-in .ins-box--table .ins-box__flag {
    animation: ins-box-in var(--dur-base) var(--ease-out) both;
    animation-delay: calc((var(--i) - 1) * 0.09s);
  }
}

@media (max-width: 760px) {
  .ins-box--table {
    grid-template-columns: 1fr auto;
    gap: 0;
  }

  /* Los encabezados de columna no sobreviven al apilado: cada celda pasa a
     llevar su propia etiqueta con data-label, igual que las tablas del core. */
  .ins-box--table .ins-box__h { display: none; }

  .ins-box--table .ins-box__k { grid-column: 1 / -1; margin-top: 0.9rem; }

  .ins-box__chev { display: none; }

  .ins-box--table .ins-box__v {
    grid-column: 1;
    display: grid;
    gap: 0.2rem;
    padding: 0.7rem 0 0.7rem 0.9rem;
  }

  .ins-box--table .ins-box__v::before {
    content: attr(data-label);
    font-family: var(--font-sans);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .ins-box__flag { grid-column: 2; padding-inline: 0.6rem; }
}


/* >>> 27 LAYERS (insights-lib.css 5593-5684) */
/* ==========================================================================
   27 LAYERS  ·  .ins-layers
   Capas apiladas de un modelo, donde cada una DESCANSA sobre la anterior. Se
   usa cuando hay dependencia vertical: la de arriba necesita a la de abajo
   para existir. Si los elementos son pares sin jerarquia, va FIELDS.

   PROHIBIDA LA PIRAMIDE. Un apilado que se angosta hacia arriba dice que las
   capas superiores son mas chicas o menos importantes, y en un stack pasa lo
   contrario: la capa de arriba es la que el negocio ve. Ancho constante, y la
   dependencia se marca con la profundidad del color, no con el tamanio.

   La base va abajo y el numeral crece hacia arriba, como en cualquier plano
   de obra: se lee de abajo hacia arriba porque asi es como se construye.
   ========================================================================== */
.ins-layers { display: grid; gap: 0.4rem; width: 100%; }

.ins-layers__layer {
  display: grid;
  grid-template-columns: 2.6rem minmax(7rem, 0.32fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem 1rem;
  min-height: 4.2rem;
  padding: 0.85rem 1.1rem;
  /* La profundidad crece hacia la base: la capa de abajo es la que sostiene
     todo el resto, y por eso es la mas densa. */
  background: color-mix(in srgb, var(--accent) calc(18% + (var(--n, 4) - var(--i)) * 20%), var(--ins-paper, var(--bg-raised)));
  color: var(--ink, var(--text-primary));
}

/* Desde la mitad hacia abajo el fondo ya no aguanta tinta oscura. */
.ins-layers__layer[data-ink="light"] { color: var(--bg-raised); }

.ins-layers__layer[data-state="loss"] {
  background: color-mix(in srgb, var(--accent-alt) 16%, var(--ins-paper, var(--bg-raised)));
  box-shadow: inset 0 0 0 1.5px var(--accent-alt);
  color: var(--ink, var(--text-primary));
}

.ins-layers__n {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-alt);
  font-variant-numeric: tabular-nums;
}

.ins-layers__layer[data-ink="light"] .ins-layers__n { color: var(--bg-raised); }

.ins-layers__name { font-size: 0.92rem; font-weight: 700; }

.ins-layers__desc {
  max-width: none;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  text-wrap: pretty;
}

/* Lo que cada capa aporta, como fichas. Opcional. */
.ins-layers__items { grid-column: 3; display: flex; flex-wrap: wrap; gap: 0.3rem; }

.ins-layers__item {
  padding: 0.15rem 0.5rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink, var(--text-primary)) 22%, transparent);
  font-size: 0.7rem;
}

.ins-layers__layer[data-ink="light"] .ins-layers__item {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-raised) 50%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes ins-layers-in {
    from { opacity: 0; transform: translateY(0.4rem); }
    to   { opacity: 1; transform: none; }
  }

  /* Se apila DESDE LA BASE: el retardo mayor es para la capa de arriba,
     porque es la ultima que se puede construir. */
  .ins-fig.is-in .ins-layers__layer {
    animation: ins-layers-in var(--dur-base) var(--ease-out) both;
    animation-delay: calc((var(--n, 4) - var(--i)) * 0.11s);
  }
}

@media (max-width: 620px) {
  .ins-layers__layer { grid-template-columns: 2.2rem minmax(0, 1fr); }

  .ins-layers__desc,
  .ins-layers__items { grid-column: 2; }
}