/* insights-fig-revops-agency-vs-revenue-engineering-partner.css
   Extraido de insights-lib.css: SOLO los bloques de los dos componentes que
   usa esta pieza (04 FIELDS forma tabla, 36 PARALLEL), mas el encabezado.
   Regla de reglas-diseno-insights.md: 'Copia solo los bloques de los componentes
   que usa el articulo nuevo'.
   Generado por gen-pieza-revops-partner.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 */










/* >>> 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);
  }
}


/* >>> 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; }
}