/* insights-fig-sales-marketing-alignment.css
   Extraido de insights-lib.css: SOLO los bloques de los 4 componentes que usa
   esta pieza (02 CHAIN, 06 LEDGER, 41 TOGGLE), segun la regla de
   reglas-diseno-insights.md: 'Copia solo los bloques de los componentes que
   usa el articulo nuevo'. 17 kb contra los 197 de la libreria entera.
   Generado por gen-pieza-sales-marketing-alignment.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 */










/* >>> 41 TOGGLE (insights-lib.css 1895-2018) */
/* ==========================================================================
   41 TOGGLE  ·  .ins-toggle
   Construido el 2026-08-12. Tercero de la Ola 3, con JS propio:
   `assets/js/insights-toggle.js`.

   Que hace: un control de dos posiciones que alterna dos estados de la MISMA
   figura. Sirve cuando el antes y el despues comparten estructura y el cambio
   es el argumento: al no moverse nada mas que los valores, el ojo ve la
   diferencia sin compararla a mano.

   SIN JS SE VEN LOS DOS ESTADOS, apilados y cada uno con su rotulo. El control
   no aparece, porque sin script no controlaria nada: un boton muerto es peor
   que no tener boton.

   La transicion es solo opacidad y transform, como todo el resto.
   ========================================================================== */
.ins-toggle { display: grid; gap: 1rem; width: 100%; }

/* El control solo existe si el script corre. */
.ins-toggle__controls { display: none; gap: 0.4rem; }

.ins-toggle.is-live .ins-toggle__controls { display: flex; flex-wrap: wrap; }

.ins-toggle__control {
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: 0;
  background: var(--ins-paper, var(--bg-raised));
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.ins-toggle__control[aria-pressed="true"] {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--bg-raised);
}

.ins-toggle__control[aria-pressed="true"][data-kind="loss"] {
  background: var(--accent-alt);
  box-shadow: inset 0 0 0 1px var(--accent-alt);
}

.ins-toggle__states { display: grid; gap: 0.9rem; }

/* El rotulo del estado. Con el script vivo sobra: lo dice el control. */
.ins-toggle__who {
  max-width: none;
  margin: 0 0 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

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

.ins-toggle.is-live .ins-toggle__who { display: none; }

.ins-toggle.is-live .ins-toggle__state[hidden] { display: none; }

.ins-toggle__cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem;
}

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

.ins-toggle__state[data-kind="loss"] .ins-toggle__cell { box-shadow: inset 3px 0 0 var(--accent-alt); }

.ins-toggle__v {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: var(--accent);
}

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

/* El valor que no existe en ese estado. Vale mas escribirlo que dejarlo vacio:
   un hueco se lee como un error de carga, y esto es un dato. */
.ins-toggle__v[data-none] { font-size: 1.1rem; font-style: italic; }

.ins-toggle__k {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--text-muted);
}

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

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

  .ins-toggle.is-live .ins-toggle__state:not([hidden]) .ins-toggle__cell {
    animation: ins-toggle-in var(--dur-base) var(--ease-out) both;
    animation-delay: calc(var(--i) * 0.05s);
  }
}


/* >>> 02 CHAIN (insights-lib.css 3092-3237) */
/* ==========================================================================
   02 CHAIN - DOS FORMAS  ·  .ins-chain
   Secuencia donde algo se transmite entre estaciones y en algun punto se
   pierde. Renombrado de mkat-chain a ins-chain: el catalogo manda que un
   componente que sale de su pieza de origen pierde el namespace de la pieza.
   El CSS viejo sigue vivo en insights-fig-marketing-attribution y esa pieza
   no se toca; esto es la version de libreria.

   UNA sola forma: ESLABONES. La variante de estaciones se descarto el
   2026-08-11; su CSS sigue vivo solo dentro de la pieza publicada
   marketing-attribution, que no se toca.

   Comun: azul = todavia lleva el dato. Vino = el eslabon donde se pierde, y
   desde ahi el gris del que ya no puede probar nada. Tres estados, no dos, y
   ninguno depende solo del color: cada estacion lleva su .ins-sr en palabras.
   ========================================================================== */

/* La marca: llena mientras el dato viaja, hueca cuando ya no esta. La forma
   cambia junto con el color, asi que en monocromo se sigue leyendo. */
/* El conector. Vivo mientras el dato viaja; punteado a partir del eslabon
   roto, que es lo que el registro ya no puede certificar. */
/* --------------------------------------------------------------------------
   B · ESLABONES  ·  .ins-chain--links
   -------------------------------------------------------------------------- */
.ins-chain--links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 1rem 0.5rem;
}

.ins-chain__link {
  position: relative;
  z-index: 1;
  width: 10rem;
  min-width: 0;
  min-height: 7.6rem;
  display: grid;
  place-content: center;
  gap: 0.12rem;
  margin-left: -1.5rem;
  padding: 1.1rem 1.6rem;
  border: 0.65rem solid var(--line);
  border-radius: 999px;
  background: var(--ins-paper);
  text-align: center;
}

.ins-chain__link:first-child { margin-left: 0; }

.ins-chain__link:nth-child(odd) { z-index: 2; }

/* Los que todavia llevan el dato, en azul. Los de despues quedan en la
   hairline: no es que sean menos importantes, es que ya no prueban nada. */
.ins-chain__link[data-carries] { border-color: var(--accent); }

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

/* El desfase alternado de la referencia v7, que es lo que hace que se lean
   como eslabones encastrados y no como una fila de circulos. */
.ins-chain__link:nth-child(even) { transform: translateY(0.6rem); }

.ins-chain__n {
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.ins-chain__link:not([data-carries]) .ins-chain__n { color: var(--text-muted); }
.ins-chain__link[data-state="loss"] .ins-chain__n { color: var(--accent-alt); }

.ins-chain__link b {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink, var(--text-primary));
}

.ins-chain__link small {
  font-size: 0.6rem;
  line-height: 1.25;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   MOVIMIENTO. El dato recorre la cadena: las estaciones entran en orden y el
   conector se estira. Reposo visible.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ins-chain-in {
    from { opacity: 0; transform: translateY(0.5rem); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes ins-chain-draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }



  .ins-fig.is-in .ins-chain--links .ins-chain__link {
    animation: ins-chain-in var(--dur-base) var(--ease-out) both;
    animation-delay: calc((var(--i) - 1) * 0.12s);
  }

  /* El desfase par es parte de la forma, no del movimiento: si la animacion
     lo pisara, los eslabones pares terminarian alineados y la cadena se
     desarmaria al final. */
  .ins-fig.is-in .ins-chain--links .ins-chain__link:nth-child(even) {
    animation-name: ins-chain-in-even;
  }

  @keyframes ins-chain-in-even {
    from { opacity: 0; transform: translateY(1.1rem); }
    to   { opacity: 1; transform: translateY(0.6rem); }
  }
}

/* --------------------------------------------------------------------------
   MOVIL
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {




  .ins-chain--links { flex-direction: column; }

  .ins-chain__link,
  .ins-chain__link:nth-child(even) {
    width: 100%;
    max-width: 15rem;
    height: auto;
    margin: -0.9rem 0 0;
    padding: 0.9rem 1.2rem;
    transform: none;
  }

  .ins-chain__link:first-child { margin-top: 0; }
}


/* >>> 06 LEDGER (insights-lib.css 3700-3873) */
/* ==========================================================================
   06 LEDGER  ·  .ins-ledger
   Aritmetica visible sobre una cifra: la operacion importa tanto como el
   resultado. Renombrado de mkat-ledger e ins-filterfig, que eran el mismo
   instrumento con dos nombres y dos piezas de origen.

     A · REPARTO     un total y sus partes. La parte que el registro no puede
                     trazar se acota con el corchete de vino.
     B · SUSTRACCION una cifra declarada de la que se van restando los casos
                     sin evidencia. Termina en una incognita, no en un numero:
                     el resultado es del lector, no nuestro.

   El aria-label dice la operacion COMPLETA en palabras. Es lo que un motor de
   IA cita, y sin eso la figura es invisible para AEO.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A · REPARTO  ·  .ins-ledger--split
   -------------------------------------------------------------------------- */
/* 2.4rem de aire porque el corchete cuelga de la barra y necesita respirar
   antes de las celdas: con 1.6rem tocaba el borde de la primera y se leia
   como parte de ella. */
.ins-ledger--split { display: grid; gap: 2.4rem; width: 100%; }

.ins-ledger__bar {
  position: relative;
  height: 2.8rem;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-raised));
}

/* La parte trazable, llena. El resto queda como fondo: lo que no se puede
   probar no se dibuja lleno, se deja abierto. */
.ins-ledger__fill {
  display: block;
  width: var(--w, 50%);
  height: 100%;
  background: var(--accent);
}

/* El corchete acota el tramo sin trazar y NO CIERRA: es una medicion que
   nadie termino. Es la marca de vino de la figura. */
.ins-ledger__brk {
  position: absolute;
  right: 0;
  bottom: -1.15rem;
  width: calc(100% - var(--w, 50%));
  height: 0.8rem;
  border: 1.5px solid var(--accent-alt);
  border-top: 0;
}

.ins-ledger__rows {
  display: grid;
  grid-template-columns: repeat(var(--parts, 3), minmax(0, 1fr));
  gap: 0.6rem;
}

.ins-ledger__row {
  display: grid;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-raised));
}

.ins-ledger__row--void {
  background: color-mix(in srgb, var(--accent-alt) 10%, var(--bg-raised));
  box-shadow: inset 0 -3px 0 var(--accent-alt);
}

.ins-ledger__v {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink, var(--text-primary));
  font-variant-numeric: tabular-nums;
}

.ins-ledger__row--void .ins-ledger__v { color: var(--accent-alt); }

.ins-ledger__k {
  font-size: 0.7rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   B · SUSTRACCION  ·  .ins-ledger--filter
   -------------------------------------------------------------------------- */
.ins-ledger--filter { display: grid; width: 100%; }

.ins-ledger__head,
.ins-ledger__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
}

.ins-ledger__head { background: var(--accent); color: var(--bg-raised); }

.ins-ledger__head .ins-ledger__k { color: color-mix(in srgb, var(--bg-raised) 80%, var(--accent)); }

.ins-ledger__head .ins-ledger__v,
.ins-ledger__foot .ins-ledger__v { font-size: 1.5rem; }

.ins-ledger__head .ins-ledger__v { color: var(--bg-raised); }

.ins-ledger__steps { display: grid; }

.ins-ledger__step {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.7rem;
  max-width: none;
  margin: 0;
  /* Sin hairline por fila (playbook §1.4): un instrumento lleva DOS filetes,
     el que abre y el que cierra. Aca abre la banda llena del encabezado y
     cierra el filete de vino del remate; las restas se separan por aire. */
  padding: 0.95rem 1.1rem;
  font-size: 0.84rem;
  line-height: 1.45;
}

.ins-ledger__minus {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-alt);
  text-align: center;
}

/* El remate. La incognita va en vino porque es exactamente lo que el registro
   no puede certificar: pintarla de azul seria decir que es la respuesta. */
.ins-ledger__foot {
  border-bottom: 3px solid var(--accent-alt);
  background: color-mix(in srgb, var(--accent-alt) 8%, var(--bg-raised));
}

.ins-ledger__foot .ins-ledger__v { color: var(--accent-alt); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes ins-ledger-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  @keyframes ins-ledger-in {
    from { opacity: 0; transform: translateY(0.4rem); }
    to   { opacity: 1; transform: none; }
  }

  .ins-fig.is-in .ins-ledger__fill {
    transform-origin: 0 50%;
    animation: ins-ledger-fill var(--dur-slow) var(--ease-out) both;
  }

  .ins-fig.is-in .ins-ledger__brk {
    animation: ins-ledger-in var(--dur-base) var(--ease-out) 0.45s both;
  }

  .ins-fig.is-in .ins-ledger__row,
  .ins-fig.is-in .ins-ledger__step {
    animation: ins-ledger-in var(--dur-base) var(--ease-out) both;
    animation-delay: calc((var(--i) - 1) * 0.1s + 0.2s);
  }
}

@media (max-width: 640px) {
  .ins-ledger__rows { grid-template-columns: 1fr; }

  .ins-ledger__head,
  .ins-ledger__foot { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
}