/* ================== INFORME v2 · mesa de trabajo =========================

   LA PALETA SALE DEL TEAL DE MARCA (#13c1ac) Y ESTÁ CALCULADA, NO ELEGIDA A OJO.
   Una escala de nueve pasos del mismo tono, neutros con un dejo del mismo verde
   para que el gris no pelee con el acento, y tres colores categóricos validados
   con el script de la skill de visualización: separación CVD >= 13 (el piso es
   8), piso de visión normal 18, y los tres por encima de 3:1 contra la
   superficie. El gris pizarra no llega al piso de croma A PROPÓSITO: es la
   categoría "ausencia" y además viaja con forma propia (pin hueco con guión) y
   etiqueta, así que nunca depende del color.

   EL TEAL ESTÁ PARTIDO EN TRES, y cada uno tiene un trabajo:
     500 (#13c1ac) es la marca: identidad, nunca texto.
     600 (#0e9c8a) es el dato: rellenos, barras, pines.
     700 (#0a7d6e) es la acción: texto, botones, enlaces. 5,0:1 sobre blanco.

   JERARQUÍA POR PESO, NO POR TAMAÑO. Seis papeles de texto que se distinguen
   por grosor, color y tracking antes que por cuerpo: un título de tarjeta y un
   dato chico miden casi lo mismo y no se confunden nunca. Los números van con
   cifras tabulares para que las columnas no bailen.
   ========================================================================= */
/* LAS TRES SECCIONES DE INTELIGENCIA TAMBIEN, Y NO ES DECORACION. La paleta
   estaba scopeada a `#v2-app`, pero Alertas pinta cosas en el HOST, por
   fuera de `#v2-app`: el esqueleto de carga y `.int-vacio`. Un `var()` sin
   declarar no falla ruidosamente — invalida la declaracion entera y calla—,
   asi que `.int-vacio` venia saliendo sin sus colores desde que existe y
   nadie lo vio. Medido: `background-image` daba vacio en el esqueleto.
   El `#v2-app` que se monta adentro redeclara los mismos valores: no compite. */
#v2-app,#plat-problemas,#plat-partners,#plat-reglas{
  /* ── teal de marca, nueve pasos ── */
  --t50:#eefbf9; --t100:#d2f4ee; --t200:#a6e9df; --t300:#66d9c7; --t400:#2ecab4;
  --t500:#13c1ac; --t600:#0e9c8a; --t700:#0a7d6e; --t800:#0a625a;
  /* ── neutros con el mismo dejo verde ── */
  --n0:#fff; --n25:#f7faf9; --n50:#f2f6f6; --n100:#e8eeee; --n200:#dae3e3;
  --n300:#c4d0d0; --n400:#93a5a6;
  /* ── tinta: tres pesos de lectura, los tres sobre 5:1 ── */
  --i1:#0e1c1e; --i2:#465859; --i3:#5b6f70;
  /* ── ZLite: el logo de Znapp en azul marino, para la maqueta de envío ── */
  --v2-navy:#182849; --v2-navy-bg:#eef1f7;
  /* ── categóricos validados ── */
  --c-ok:#0e9c8a; --c-op:#b8760a; --c-no:#5f7f91;
  --op-t:#8f5a00; --op-bg:#fdf4e3; --op-bd:#f0dcb4; --op-hover:#faeacb;
  --mal:#b8262b; --mal-bg:#fdeef0; --mal-bd:#f4cdd0; --mal-d:#96181d;
  /* el rojo de la escala NO se lee sobre la tinta: 2,1:1 contra `--i1`. Este es
     el mismo rojo aclarado hasta pasar 4,5:1 sobre fondo oscuro, y existe
     porque la columna de navegación es la única superficie oscura que tiene
     que poder decir «vencido». */
  --mal-osc:#ff8f8f;
  /* tinta casi negra, de la MISMA familia que --t50..--t800: hacia falta un
     escalon mas oscuro que --t800 para texto sobre un fondo ya claro (hover
     de un boton primario, chip solido). No es un color nuevo, es el mismo
     que sigue la escala. */
  --t900:#04201d;
  /* borde de control: 3,2:1 sobre blanco. Ver el comentario de arriba. */
  --bd:#7f9394;
  /* ── sombras teñidas del fondo, nunca negro puro ── */
  --sh:0 1px 2px rgba(14,28,30,.04), 0 4px 14px rgba(14,28,30,.045);
  --sh2:0 2px 8px rgba(14,28,30,.06), 0 18px 44px rgba(14,28,30,.08);
  --eo:var(--ez-out);
  /* TRES FORMAS, no catorce. Los nombres viejos se conservan para no reescribir
     78 declaraciones, pero apuntan a la escala nueva: contenedor / control /
     chip. Habia 14 radios distintos sirviendo a ocho papeles reales. */
  --r20:14px; --r14:14px; --r10:8px; --r8:8px; --r6:6px;
  /* SEIS TAMANOS, no diecinueve. Los que habia estaban apretados en 2,5px de
     rango con cinco medios pixeles que existian solo para separarse del entero
     de al lado: por eso todo susurraba y nada mandaba.

     Y AHORA SE USAN. Estaban declarados y casi nada los llamaba: convivian con
     veinticuatro cuerpos escritos a mano, del 9px al 40px. Los que quedan en
     pixeles son del mapa, que tiene su propia escala, asi que mover un token
     mueve la pantalla.

     LAS DOS REGLAS QUE ORDENAN CUAL VA:
       --f1 es el PISO, y es solo para mayusculas y metadatos cortos. Un
       parrafo con line-height de lectura y un max-width en ch NUNCA es --f1,
       por chico que sea el lugar: se sube a --f2 y se achica el lugar.
       --f6 es el TECHO, y hay uno solo por pantalla. El titular del caso manda
       porque es lo unico a 32px, no porque sea grande: a 40px competia con su
       propio tablero de numeros y los dos gritaban. */
  /* LA ESCALA EMPIEZA EN f0. Habia diez `font-size:var(--f0)` sueltos por el archivo
     —pildoras, contadores, insignias— que eran un escalon de hecho sin nombre:
     cada vez que hacia falta un rotulo mas chico que f1 se escribia el literal
     otra vez, y ahi es donde las tipografias «salen de lugares distintos». */
  --f0:10px; --f1:11px; --f2:13px; --f3:15px; --f4:18px; --f5:24px; --f6:32px;
  /* TRES ELEVACIONES */
  --sh-rest:0 1px 2px rgba(14,28,30,.05);
  --sh-up:0 2px 10px rgba(14,28,30,.07);
  --sh-over:0 18px 44px rgba(14,28,30,.14);
  --ring:0 0 0 3px var(--t100);
  /* LA CERTEZA. El markup ya distingue los tres niveles con un icono de 12px
     que nadie mira; esto los hace legibles de un vistazo, que es lo que pide
     el brief: "si tenemos certeza podemos ser concretos; si es una hipotesis,
     debe verse como hipotesis".  dec = lo dijo el cliente. obs = lo vio el
     relevamiento. sup = lo dedujimos nosotros. */
  --cert-dec:var(--t700); --cert-obs:var(--i2); --cert-sup:var(--op-t);
  /* LOS CUATRO ESTADOS QUE PIDE "COLOR CON SIGNIFICADO": correcto, atención,
     problema y acción. Correcto y acción comparten el mismo teal -es la
     marca, y partirla en dos tonos solo para "significar distinto" diluye la
     marca sin agregar información real-, pero NUNCA en el mismo tipo de
     pieza: correcto es una LECTURA (un punto, un número que ya pasó la
     meta), acción es un CONTROL sólido (un botón relleno). La forma dice
     cuál es cuál, un quinto color no. Atención y problema sí llevan tono
     propio -ámbar y rojo- porque ahí la lectura cambia de verdad. */
  --v2-ok:var(--t700);
  --v2-alerta:var(--op-t); --v2-alerta-bg:var(--op-bg); --v2-alerta-bd:var(--op-bd);
  --v2-problema:var(--mal); --v2-problema-bg:var(--mal-bg); --v2-problema-bd:var(--mal-bd);
  --v2-accion:var(--t700);
}
/* EL LAYOUT DE LA CAPA VA APARTE DE LOS TOKENS, y no es cosmética: los tokens
   los comparten ahora las secciones de Alertas del home, que NO son
   capas a pantalla completa. Estaban en el mismo bloque, así que sumar el
   selector les habría dado `position:fixed` a secciones que viven dentro del
   scroll de la plataforma. Una definición, dos scopes, un solo lugar donde
   cambiar un color. */
#v2-app{
  /* EL ANCHO DE CONTENIDO DE INTELIGENCIA, EN UN SOLO LUGAR. Las tres rutas del
     grupo —Problemas, Partners y Reglas— se envolvian con tres maximos
     distintos (1180, 1340 y 1180), asi que el titulo arrancaba en x=72, x=134 y
     x=218 y el contenido saltaba de costado al cambiar de pestaña. Son la misma
     seccion del sidebar: tienen que empezar en el mismo lugar. */
  --int-wrap:1180px;
  position:fixed; inset:0; z-index:9998; color:var(--i1);
  display:flex; overflow:hidden;
  opacity:0;
  font-size:var(--f2); line-height:1.55; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
#v2-app.on{opacity:1}
#v2-app *{box-sizing:border-box}

/* ══════ EL MISMO v2, MONTADO DENTRO DEL HOME ══════
   Las secciones de «Alertas» alojan este mismo nodo en vez de una capa
   encima de la plataforma. Deja de ser `fixed`, pero NO deja de estar
   posicionado ni de necesitar altura de verdad: lo que cuelga de `#v2-app`
   -el lightbox, el toast, el bloqueo- se mide contra él. (Acá decía que el
   que se medía era el scrim del cajón de contexto; el cajón se borró y el
   `relative` sigue haciendo falta por los otros tres.) La topbar del home se mide sola y se
   escribe en `--int-top` desde `_intIr`; el 64px es sólo el piso por si esa
   medición no llegó a correr. */
/* EL `z-index:0` ERA UNA PANTALLA SIN SALIDA, MEDIDA. Creaba contexto de
   apilado, así que todo lo que cuelga de `#v2-app` quedaba confinado a ese
   cero: el wizard de Reglas se declara `z-index:10002` y terminaba pintándose
   DEBAJO del sidebar de la plataforma (`z-index:500`) y de su cabecera. O sea
   que el botón de volver y el logo del setup caían tapados por 52px de barra
   lateral, y al pasar el mouse esa barra se expandía a 228px y se comía media
   cabecera. Lo mismo con el lightbox de evidencia: cerrarlo tocando la
   izquierda navegaba a otra sección.
   Sigue necesitando estar POSICIONADO —el lightbox, el toast y el bloqueo de
   móvil se miden contra él— pero no necesita crear contexto: con `z-index`
   arriba de la plataforma, lo que cuelga adentro vuelve a poder taparla. */
#v2-app.dentro{
  position:relative; inset:auto; z-index:600;
  /* MIENTRAS EL WIZARD ESTA ABIERTO ESTE CONTEXTO SUBE POR ENCIMA DE LA BARRA
     LATERAL (650). `.v2-wz` es fixed con 10002, pero cuelga de aca: adentro de
     un contexto de 600 ese 10002 solo ordena hermanos, y contra el menu perdia
     siempre. Resultado: 228px del wizard tapados, y los clics de esa franja se
     los llevaba el menu. Se declara junto al 600 y no en otro bloque, para que
     el que cambie uno vea el otro. */
  opacity:1; transition:none;
}
/* EL ALTO DE VIEWPORT ES SOLO DE LA VISTA DEL CASO. Estaba en `.dentro` y lo
   pisaba despues `.vista-mirar` con `height:auto`: dos declaraciones del mismo
   valor para el mismo elemento, que es la trampa 5 de CLAUDE.md —gana la
   ultima y nadie sabe cual manda—. Se declara una vez, en la unica vista que
   lo necesita. */
#v2-app.dentro:not(.vista-mirar){height:calc(100dvh - var(--int-top, 64px))}
/* el sidebar propio se va: en el home esa función la cumple el de la
   plataforma, y dos columnas de navegación pegadas es la pregunta «¿en cuál
   estoy?» dos veces. */
#v2-app.dentro .v2-izq{display:none}
/* ════════ PARTNERS, REGLAS Y CAMPAÑAS SCROLLEAN COMO EL RESTO ════════
   `#v2-app.dentro` es una caja de alto de viewport con `overflow:hidden`, y eso
   es CORRECTO para Alertas: son dos columnas —la cola y el cajon del caso— que
   scrollean cada una por su lado, y para eso el contenedor tiene que tener un
   alto de verdad.
   Pero Partners, Reglas y Campañas son UNA pagina de una columna, igual que
   Comercios o Productos. Con la caja de alto fijo pasaban dos cosas que se ven:
   el contenido que no entraba quedaba RECORTADO —medido: 1791px adentro de
   886—, y cuando se le ponia scroll propio la seccion se comportaba distinto
   del resto de la app, con su barra adentro de su recuadro.
   Con `height:auto` la capa crece con su contenido y scrollea la pagina, que es
   lo que hacen todas las demas secciones. El `min-height` mantiene el fondo
   cubriendo la pantalla cuando hay poco contenido. `.vista-mirar` es la clase
   que ya distingue estas vistas de la del caso. */
#v2-app.dentro.vista-mirar{min-height:calc(100dvh - var(--int-top, 64px));overflow:visible}
/* ══ Y DEJA DE TAPAR LA TOPBAR ══
   MEDIDO: `.tb` es `sticky` con `z-index:150` y `#v2-app.dentro` tiene 600. Con
   la caja de alto fijo eso nunca se veia —la capa empezaba DEBAJO de la barra y
   no se movia—, pero ahora crece y scrollea: su borde superior sube a -194 y,
   con 600 contra 150, se pinta ENCIMA. La barra desaparecia detras del
   contenido.
   El 600 esta ahi para que lo que cuelga de la capa pueda tapar la plataforma.
   En estas tres vistas no cuelga nada que lo necesite, y sin `z-index` el nodo
   deja ademas de crear contexto de apilado, asi que el toast y el lightbox
   —fixed, con 10000— vuelven a valer contra toda la pagina en vez de quedar
   confinados adentro.
   `:not(.wz-on)` es obligatorio: `#v2-app.wz-on{z-index:10001}` es lo que hace
   que el wizard de Reglas no quede debajo del menu, y este selector es mas
   especifico, asi que sin la exclusion se lo comeria y volveria ese bug. */
#v2-app.dentro.vista-mirar:not(.wz-on){z-index:auto}
/* ════════ UN SOLO FONDO, Y ES EL DE LA PLATAFORMA ════════
   MEDIDO en Alertas: cuatro superficies apiladas con tres grises distintos —la
   plataforma en `#f4f7fa`, la capa y el panel en `#f2f6f6` (--n50), la columna
   de la lista y la bandeja en `#f7faf9` (--n25)—. Dos unidades de diferencia:
   imperceptibles como COLOR y perfectamente visibles como COSTURA. Por eso se
   veian «recuadros dentro de otro» sin que nadie hubiera dibujado un recuadro.
   Esos tres tonos tienen sentido cuando el v2 es una capa a pantalla completa y
   se pinta a si mismo. Montado adentro de la plataforma no: ya hay un fondo, y
   es el de la plataforma. Las superficies que SI tienen que distinguirse —las
   tarjetas— son blancas y siguen distinguiendose; lo que se va son los casi
   iguales, que no separaban nada y solo dejaban lineas. */
#v2-app.dentro,
#v2-app.dentro .v2-main,
#v2-app.dentro .v2-pan,
#v2-app.dentro .v2-band{background:transparent}
#v2-app.dentro.vista-mirar .v2-main{overflow:visible}
#v2-app.dentro.vista-mirar .v2-pan{overflow:visible}
/* y con él se van las dos salidas de la cabecera: «Informe clásico» y la cruz
   cerraban la capa, y acá cerrar dejaría la sección del home vacía. El pase al
   informe clásico sigue existiendo desde Campañas. */
#v2-app.dentro .v2-cab-r .v2-ib.cambio,
#v2-app.dentro .v2-cab-r .v2-ib.gr,
#v2-app.dentro .v2-cab-sep{display:none}
/* el bloqueo de móvil es `position:absolute;inset:0` contra `#v2-app`: sigue
   funcionando porque arriba quedó `relative`. */

/* la sección que lo aloja no puede seguir siendo un `display:block` sin alto */
#v2-app.wz-on{z-index:10001}
#plat-problemas.on,#plat-partners.on,#plat-reglas.on{
  display:flex; flex-direction:column; min-height:0; padding-top:0; padding-bottom:0}
.int-vacio{padding:64px 40px;text-align:center;color:var(--i3)}
.int-vacio b{display:block;font-size:var(--f4);font-weight:700;color:var(--i1);margin-bottom:8px}
/* ══ EL ESQUELETO DE INTELIGENCIA ══
   Reemplaza al telón a pantalla completa que decía «Armando tu tablero». Un
   telón dice «esperá»; un esqueleto dice QUÉ FORMA va a tener lo que viene, y
   deja al usuario parado adentro de la sección a la que entró.

   LA PRIMERA VERSIÓN MEDIA BIEN Y NO SE VEÍA. Las barras eran `--n50` sobre
   `--n100`, y el fondo de la plataforma es `#f4f7fa`: los tres son el mismo
   gris. En la captura a tamaño real no había esqueleto, había una pantalla
   vacía. Ahora la fila es una TARJETA BLANCA con borde —la misma forma que
   tiene un caso de verdad— y las barras van adentro, donde sí contrastan.

   El brillo va con `background-position` sobre un gradiente, que compone en el
   hilo del compositor. Animar `left` u `opacity` por barra costaría un layout
   por cuadro con veinte barras en pantalla. */
@keyframes intEsq{from{background-position:200% 0}to{background-position:-200% 0}}
.int-esq{padding:28px 32px;display:flex;flex-direction:column;gap:22px}
/* una sola clase pinta TODAS las barras; el tamaño y el radio los pone cada
   modificador. Así no hay dos reglas peleando por `background`. */
.int-esq-b{
  border-radius:var(--esq-r,8px);
  /* base --n200 y no --n100: sobre el fondo de la plataforma (#f4f7fa) el
     --n100 casi no se ve, y la cabecera quedaba sin presencia. */
  background:linear-gradient(90deg,var(--n200) 20%,var(--n50) 40%,var(--n200) 60%);
  background-size:200% 100%;
  animation:intEsq 1.4s ease-in-out infinite}
.int-esq-hd{display:flex;flex-direction:column;gap:10px}
.int-esq-t{width:min(320px,46%);height:26px}
.int-esq-s{width:min(520px,72%);height:14px}
.int-esq-chips{display:flex;gap:10px;flex-wrap:wrap}
.int-esq-chip{--esq-r:999px;width:104px;height:32px}
.int-esq-lista{display:flex;flex-direction:column;gap:12px}
.int-esq-fila{
  display:flex;align-items:center;gap:14px;
  height:76px;padding:0 18px;
  background:var(--n0);border:1px solid var(--n100);border-radius:12px}
.int-esq-ic{--esq-r:10px;width:38px;height:38px;flex:0 0 auto}
.int-esq-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
.int-esq-l1{width:38%;height:13px}
.int-esq-l2{width:62%;height:11px}
.int-esq-pill{--esq-r:999px;width:84px;height:26px;flex:0 0 auto}
/* las filas entran escalonadas: sin esto las cinco laten al unísono y se lee
   como un bloque parpadeando, no como una lista cargando. */
.int-esq-fila:nth-child(2) .int-esq-b{animation-delay:.08s}
.int-esq-fila:nth-child(3) .int-esq-b{animation-delay:.16s}
.int-esq-fila:nth-child(4) .int-esq-b{animation-delay:.24s}
.int-esq-fila:nth-child(5) .int-esq-b{animation-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .int-esq-b{animation:none;background:var(--n100)}}
@media (max-width:640px){
  .int-esq{padding:20px 16px;gap:18px}
  .int-esq-fila{height:64px;padding:0 12px;gap:10px}
  .int-esq-pill{display:none}}

/* Este reset llevaba el id (#v2-app button = 1,0,1) y le ganaba a TODAS las
   clases de boton del bloque (.v2-ib.pri = 0,2,0). Resultado: ningun boton
   del v2 uso nunca su tamaño, su peso ni su color — el primario salia con
   tinta oscura sobre el teal, 3,5:1, en vez de blanco sobre teal, 5,0:1.
   Con :where() el id no suma especificidad y el reset vuelve a ser un piso. */
:where(#v2-app) button{font:inherit;color:inherit}
/* Y los controles. Sin esto .v2-inp, .v2-sel, .v2-mini-sel, .v2-fm input y
   .v2-wz-mas-b renderizan en la fuente por defecto del navegador aunque tengan
   el tamano y el peso correctos: se ve en la pantalla, no en la hoja. */
:where(#v2-app) input, :where(#v2-app) select, :where(#v2-app) textarea{font:inherit}
#v2-app ::-webkit-scrollbar{width:11px;height:11px}
#v2-app ::-webkit-scrollbar-thumb{background:var(--n200);border-radius:var(--r6);border:3px solid transparent;background-clip:content-box}
#v2-app ::-webkit-scrollbar-thumb:hover{background:var(--n300);background-clip:content-box}
#v2-app ::-webkit-scrollbar-track{background:transparent}
.rx-lbl{font-size:var(--f1);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--n400)}
.rx-body{font-size:var(--f2);font-weight:450;line-height:1.62;color:var(--i2)}
.rx-body b{font-weight:650;color:var(--i1)}
.rx-meta{font-size:var(--f1);font-weight:500;color:var(--i3)}

/* ══════ BARRA SUPERIOR ══════
   Identidad y nada más: el logo del cliente en una placa, la marca en peso alto
   y la campaña como metadato. La cobertura vivía acá y se fue al tablero del
   caso, porque es de la campaña y no de la pantalla. */
.v2-cab{align-items:center;gap:0;padding:0;border-bottom:1px solid var(--n100)}
.v2-marca{display:flex;min-width:0;padding-right:20px}
.v2-logo{border:1px solid var(--n100);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.v2-logo img{max-width:100%;max-height:100%;object-fit:contain}
.v2-logo span{font-size:var(--f3);font-weight:700;color:var(--t700)}
.v2-marca-t{font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.v2-marca-s{font-size:var(--f1);font-weight:500;white-space:nowrap;display:flex;align-items:center;
  gap:6px;overflow:hidden;text-overflow:ellipsis}
.v2-punto{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* ══════ BOTONES ══════ */
.v2-ib{background:var(--n0);border:1px solid var(--bd);color:var(--i1);height:34px;min-width:34px;padding:0 13px;
  border-radius:var(--r8);cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:var(--f2);font-weight:600;
  transition:transform var(--tr-16) var(--eo),border-color var(--tr-16) ease,background var(--tr-16) ease,color var(--tr-16) ease,box-shadow var(--tr-16) ease;
  white-space:nowrap}
.v2-ib:active{transform:scale(.97)}
.v2-ib.pri{background:var(--t700);border-color:var(--t700);color:#fff}
.v2-ib:disabled{opacity:.5;cursor:default;transform:none}
.v2-ib svg{flex-shrink:0}
@media (hover:hover) and (pointer:fine){
  .v2-ib:hover{background:var(--n25);border-color:var(--i3);box-shadow:var(--sh)}
  .v2-ib.pri:hover{background:var(--t800);border-color:var(--t800);color:#fff;box-shadow:0 4px 14px rgba(10,125,110,.26)}
}
.v2-ib.gr{background:transparent;border-color:transparent}
@media (hover:hover){ .v2-ib.gr:hover{background:var(--n50);border-color:transparent;box-shadow:none} }

/* ══════ CUERPO ══════ */
.v2-body{flex:1;display:flex;min-height:0}

/* ══════ COLA DE TRABAJO ══════ */
/* EL BUSCADOR Y EL ORDEN SON UNA SOLA PIEZA CON EL BUSCADOR, Y SOLO GANAN SU
   LUGAR CON MUCHOS CASOS. Con tres sobran -son las dos navegaciones que "no
   tienen mucho sentido" con pocos, ya que se ve todo de un vistazo- y con
   cuarenta el buscador es lo primero que se usa. `.chico` los pliega a cero
   alto sin destruirlos, para no perder el foco ni lo escrito si la campaña
   crece. El corte lo pone `_v2Pintar` con el total de casos en foco. */
.v2-riel-hd.chico .v2-cola-q,.v2-riel-hd.chico .v2-cola-r{
  max-height:0;opacity:0;margin:0;padding:0;overflow:hidden;pointer-events:none}
.v2-cola-q{display:flex;align-items:center;gap:7px;height:32px;padding:0 10px;margin-bottom:8px;
  background:var(--n0);border:1px solid var(--bd);border-radius:var(--r8);
  transition:border-color var(--tr-16) ease,box-shadow var(--tr-16) ease}
.v2-cola-q svg{flex-shrink:0;color:var(--n400)}
.v2-cola-q:focus-within{border-color:var(--t400);box-shadow:0 0 0 3px var(--t50)}
:where(#v2-app) .v2-cola-q input{flex:1;min-width:0;height:100%;border:none;background:none;
  outline:none;font-size:var(--f2);font-weight:550;color:var(--i1);padding:0}
:where(#v2-app) .v2-cola-q input::placeholder{color:var(--n400);font-weight:450}
.v2-cola-r{display:flex;align-items:center;gap:6px;min-width:0}
.v2-fil{display:flex;gap:4px;flex-wrap:wrap;min-width:0;margin-bottom:7px}
.v2-fil:empty{display:none}
/* ══════ SEGUIMIENTO: EL AVANCE DE LA CAMPAÑA ═════════════════════════════
   El estado dejo de ser un campo del pie y paso a ser lo primero que se ve al
   abrir la cola. Una barra proporcional ordenada por cuanto falta —cerrados a
   la izquierda, sin empezar a la derecha— contesta «en que anda esto» sin leer
   una palabra, y cada tramo es el filtro de su estado: la leyenda y el control
   son la misma cosa, asi que no hay dos superficies diciendo lo mismo.
   VENCIDO ES UN TRAMO PROPIO aunque nadie lo marque: sale de la fecha de
   compromiso, se le resta a «esperando» para que los tramos sumen el universo,
   y es lo unico de esta columna con derecho a estar en rojo. */
.v2-segui{width:100%;display:block}
.v2-segui-t{display:flex;align-items:baseline;gap:7px;margin-bottom:8px}
.v2-segui-t b{font-size:var(--f3);font-weight:700;color:var(--i1);letter-spacing:-.3px;
  font-variant-numeric:tabular-nums}
.v2-segui-t i{font-style:normal;font-size:var(--f1);font-weight:500;color:var(--i3)}
.v2-segui-t .sp{flex:1}
:where(#v2-app) .v2-segui-x{background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;
  font-size:var(--f1);font-weight:650;color:var(--t700);text-decoration:underline;text-underline-offset:2px}
@media (hover:hover){ :where(#v2-app) .v2-segui-x:hover{color:var(--t800)} }
/* la barra: `flex-grow` proporcional al conteo, asi los tramos suman exacto y
   ninguno miente por redondeo. `min-width` deja ver un caso entre cuarenta. */
.v2-segui-b{display:flex;height:9px;border-radius:var(--r6);overflow:hidden;background:var(--n100);gap:2px}
:where(#v2-app) .v2-segui-b button{border:none;padding:0;height:100%;min-width:7px;cursor:pointer;
  border-radius:2px;transition:opacity .18s ease}
@media (hover:hover){ :where(#v2-app) .v2-segui-b button:hover{opacity:.7} }
.v2-segui-b button.mudo{opacity:.26}
.s-cerrado{background:var(--c-ok)}  .s-enviado{background:var(--t300)}
.s-venc{background:var(--mal)}      .s-curso{background:var(--c-op)}
/* neutro, pero no invisible: en --n300 el tramo se confundia con la canaleta y
   «sin empezar» se leia como si no hubiera nada */
.s-abierto{background:var(--n400)}
/* DESCARTADO NO ES VERDE. Cerrar corrigiendo y descartar salen los dos de la
   cola, pero uno es un problema resuelto y el otro una decisión de no
   trabajarlo: darles el mismo verde haría que la barra celebre lo que se
   dejó pasar. Va en el gris frío de «no aplica». */
.s-descart{background:var(--c-no)}
/* EL CHIP LLEVA EL COLOR DE SU TRAMO, o la barra y la leyenda son dos dibujos
   distintos del mismo dato. Seleccionado se marca con tinta y no con teal: el
   teal ya significa «esperando respuesta» dos centimetros mas arriba. */
 }
.v2-mini-sel{flex:1;background:var(--n0);border:1px solid var(--bd);color:var(--i1);height:32px;border-radius:var(--r8);
  padding:0 9px;font-size:var(--f1);font-weight:600;cursor:pointer}
.v2-mini-sel:focus{outline:none;border-color:var(--t200);box-shadow:0 0 0 3px var(--t50)}
.v2-cola-r .v2-mini-sel{flex:1 1 auto;min-width:0;height:30px}
:where(#v2-app) .v2-grp-all{flex-shrink:0;width:30px;height:30px;border-radius:var(--r8);
  border:1px solid var(--bd);background:var(--n0);color:var(--i3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color var(--tr-16) ease,border-color var(--tr-16) ease}
@media (hover:hover){ .v2-grp-all:hover{color:var(--i1);border-color:var(--n300)} }
.v2-lista{flex:1;overflow-y:auto;padding:13px 13px 18px;display:flex;flex-direction:column;gap:4px}
/* columna flex con scroll: sin esto el navegador comprime a los hijos contra el
   alto disponible, y con cuarenta filas se aplastan todas */
.v2-lista>*{flex-shrink:0}
/* ══ LA FILA ══
   Cuarenta casos no entran en tarjetas: entraban 3,5 en pantalla y el resto era
   scroll a ciegas. La fila mide 40px y trae lo unico que decide cual abrir
   primero: cuantos comercios, que problema y donde. El estado deja de ser una
   pastilla repetida cuarenta veces —«abierto» es el default, no una noticia— y
   pasa a ser una marca de 3px que solo aparece cuando dice algo. */
/* `flex-shrink:0`, y no es cosmético: la lista es una columna flex con scroll,
   y sin esto cada fila se comprime contra el alto disponible. Con cuarenta
   filas se comprimían todas y el número quedaba cortado por la mitad. */
.v2-it{display:flex;flex-shrink:0;align-items:center;gap:11px;width:100%;min-height:50px;text-align:left;
  background:none;border:1px solid transparent;border-radius:var(--r10);
  padding:8px 12px;cursor:pointer;margin:0;position:relative;overflow:hidden;
  transition:background .18s var(--v2-ez),border-color .18s var(--v2-ez),transform .18s var(--v2-ez)}
.v2-it:active{transform:scale(.985);transition-duration:.09s}
.v2-it.on{background:var(--t50);border-color:var(--t200)}
.v2-it::before{content:"";position:absolute;inset:3px auto 3px 0;width:3px;border-radius:0 3px 3px 0;
  background:transparent;transition:background .18s var(--eo)}
.v2-it.e-curso::before{background:var(--op-t)}
.v2-it.e-enviado::before{background:var(--t400)}
.v2-it.e-cerrado::before{background:var(--n300)}
.v2-it.e-venc::before{background:var(--mal)}
.v2-it.on::before{background:var(--t600)}
@media (hover:hover){ .v2-it:hover{background:var(--n25)}
  .v2-it.on:hover{background:var(--t50);border-color:var(--t400)} }
/* la fila perdio el borde permanente: sin esto el foco de teclado no se ve */
.v2-it:focus-visible,.v2-grp:focus-visible{outline:2px solid var(--t500);outline-offset:-2px;border-radius:var(--r10)}
/* el unico bloqueo real: sin destinatario no hay reclamo que mandar */
.v2-it-d{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--op-t)}
.v2-it .v2-est{flex-shrink:0;font-size:var(--f1);padding:2px 7px;letter-spacing:.05em}
.v2-it .v2-venc{flex-shrink:0;font-size:var(--f1);padding:1px 8px;letter-spacing:.05em}
/* El primario deshabilitado no existia: 'Armar el reclamo (0)' seguia en verde
   solido invitando a un reclamo sin comercios. */
:where(#v2-app) .v2-ib.pri[disabled]{background:var(--n100);color:var(--i3);
  box-shadow:none;cursor:not-allowed;opacity:1}
:where(#v2-app) .v2-ib.pri[disabled] svg{opacity:.5}

/* CAJA ALTA NO, Y ES UN CAMBIO DE LECTURA, NO DE GUSTO. «NUEVO / ABIERTO /
   EN CURSO» en versalitas con tracking se lee como un rótulo de sistema —algo
   que el producto se dice a sí mismo— y tarda más que la misma palabra en caja
   normal. La referencia las pone en caja normal y tiene razón: son el estado
   del trabajo de una persona, no una constante. */
.v2-est{display:inline-flex;align-items:center;gap:6px;font-size:var(--f1);font-weight:650;
  letter-spacing:-.01em;padding:3px 10px 3px 8px;border-radius:999px;white-space:nowrap;
  border:1px solid transparent}
.v2-est::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  flex:0 0 auto}
/* NUEVO es el que faltaba, y es el que hace que la columna informe: sin él, las
   diez filas decían «Abierto» y una columna con un solo valor no informa. */
.v2-est.nuevo{color:var(--v2-navy);background:var(--v2-navy-bg);border-color:#dbe2ef}
/* Abierto es «alguien lo miró», no un problema: pintarle un punto rojo gastaba
   la unica alarma que tiene el producto, y cuando todo alarma nada alarma. */
.v2-est.abierto{color:var(--i2);background:var(--n0);border-color:var(--n200)}
.v2-est.abierto::before{background:var(--n400)}
.v2-est.curso{color:var(--op-t);background:var(--op-bg);border-color:var(--op-bd)}
.v2-est.enviado{color:var(--t700);background:var(--t50);border-color:var(--t100)}
.v2-est.cerrado{color:var(--t800);background:var(--t100);border-color:var(--t200)}
.v2-est.venc{color:#fff;background:var(--mal);border-color:var(--mal)}
/* desestimado usa el mismo gris frío que su tramo en la barra: cerrar
   corrigiendo y decidir no trabajarlo no pueden verse igual. */
.v2-est.descart,
.v2-est.cerrado.descart{color:var(--c-no);background:var(--n50);border-color:var(--n200)}
.v2-cola-ft{padding:11px 14px 15px;font-size:var(--f1);font-weight:500;color:var(--i3);line-height:1.5}
/* ══════ ARCHIVO ═══════════════════════════════════════════════════════════
   Un caso cerrado deja de ocupar lugar en la cola —no es trabajo pendiente—
   pero NO desaparece: baja a un plegado al pie con su fecha de cierre y un
   boton para reabrirlo. Nada se borra en silencio es una regla del producto,
   no una cortesia, asi que el archivo esta siempre, aunque este cerrado. */
.v2-sega{margin:4px 0 0;border-top:1px solid var(--n100);padding-top:10px}
:where(#v2-app) .v2-sega-h{display:flex;align-items:center;gap:8px;width:100%;background:none;
  border:none;padding:7px 5px;cursor:pointer;text-align:left;border-radius:var(--r8);
  color:var(--c-ok);transition:background var(--tr-14) ease}
@media (hover:hover){ .v2-sega-h:hover{background:var(--n25)} }
.v2-sega-h .n{font-size:var(--f1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--i3)}
.v2-sega-c{font-size:var(--f1);font-weight:700;background:var(--n50);color:var(--i2);
  padding:2px 7px;border-radius:var(--r6)}
.v2-sega-h svg:last-child{margin-left:auto;color:var(--n400);transition:transform .2s var(--eo)}
.v2-sega.abierto .v2-sega-h svg:last-child{transform:rotate(90deg)}
.v2-sega-w{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s var(--eo)}
.v2-sega.abierto .v2-sega-w{grid-template-rows:1fr}
.v2-sega-in{overflow:hidden;min-height:0;padding-top:2px}
.v2-sega-i{display:flex;align-items:center;gap:8px}
:where(#v2-app) .v2-sega-ab{flex:1;min-width:0;display:flex;align-items:center;gap:11px;text-align:left;
  background:none;border:none;cursor:pointer;padding:8px 10px;border-radius:var(--r10);
  transition:background var(--tr-16) var(--eo)}
.v2-sega-n{font-size:var(--f3);font-weight:700;letter-spacing:-.4px;color:var(--i3);
  min-width:26px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.v2-sega-tx{min-width:0}
.v2-sega-tx b{display:block;font-size:var(--f2);font-weight:600;color:var(--i2);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-sega-tx i{display:block;font-style:normal;font-size:var(--f1);font-weight:450;
  color:var(--i3);margin-top:2px}
:where(#v2-app) .v2-sega-vol{flex-shrink:0;background:none;border:1px solid var(--n200);cursor:pointer;
  font-size:var(--f1);font-weight:600;color:var(--i2);padding:5px 10px;border-radius:999px;
  white-space:nowrap;transition:border-color var(--tr-16) var(--eo),color var(--tr-16) var(--eo)}
@media (hover:hover){ .v2-sega-ab:hover{background:var(--n25)}
  .v2-sega-vol:hover{border-color:var(--t400);color:var(--t700)} }

/* ══════ EL MEJOR ESTADO DEL PRODUCTO ══════════════════════════════════════
   Cuando no queda nada por hacer la pantalla decia «Nada en este filtro» sobre
   un gris, que es como se ve una pantalla rota. Terminar la campaña es el
   unico momento del informe en que el cliente gano algo, y se ve: el tilde se
   dibuja una vez —feedback de haber llegado a cero, no decoracion— y abajo
   quedan los dos numeros que resumen lo que se hizo. */
.v2-segui-ok{position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:42px 22px 30px}
/* EN EL PANEL SE LLEVA LA PANTALLA. Centrado y chico en 1500px de ancho se veia
   como un cartel de error; el unico momento en que el cliente gano algo tiene
   que tener tierra propia. El halo es un radial del teal de marca —el mismo
   verde que significa «cerrado» en la barra de avance— y no un color nuevo. */
.v2-segui-ok.gr{padding:0 24px}
.v2-segui-ok.gr::before{content:"";position:absolute;left:50%;top:50%;width:900px;height:620px;
  transform:translate(-50%,-52%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(19,193,172,.13),rgba(19,193,172,0) 72%)}
.v2-segui-ok>*{position:relative}
.v2-segui-ok .ring{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--t50);color:var(--c-ok);
  box-shadow:0 0 0 1px var(--t100),0 0 0 11px rgba(19,193,172,.075)}
.v2-segui-ok.gr .ring{width:108px;height:108px;background:var(--n0);
  box-shadow:0 0 0 1.5px var(--t200),0 0 0 18px rgba(19,193,172,.09),var(--sh2)}
@keyframes v2tilde{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}
.v2-segui-ok .ring path{stroke-dasharray:26;stroke-dashoffset:26;animation:v2tilde .5s var(--eo) .12s forwards}
@media (prefers-reduced-motion:reduce){ .v2-segui-ok .ring path{animation:none;stroke-dashoffset:0} }
.v2-segui-ok b{margin-top:17px;font-size:var(--f4);font-weight:700;color:var(--i1);letter-spacing:-.35px}
.v2-segui-ok.gr b{margin-top:26px;font-size:var(--f6);letter-spacing:-1.1px;line-height:1.1}
.v2-segui-ok p{margin-top:8px;font-size:var(--f2);font-weight:450;color:var(--i2);line-height:1.62;max-width:46ch}
.v2-segui-ok.gr p{margin-top:11px;font-size:var(--f3);line-height:1.6;max-width:52ch;color:var(--i2)}
.v2-segui-ok .n{margin-top:20px;display:flex;border:1px solid var(--n100);border-radius:var(--r14);
  background:var(--n0);overflow:hidden}
.v2-segui-ok.gr .n{margin-top:26px;box-shadow:var(--sh)}
.v2-segui-ok .n div{padding:12px 20px}
.v2-segui-ok.gr .n div{padding:16px 30px}
.v2-segui-ok .n div+div{border-left:1px solid var(--n100)}
.v2-segui-ok .n i{display:block;font-style:normal;font-size:var(--f5);font-weight:700;color:var(--i1);
  letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.v2-segui-ok.gr .n i{font-size:var(--f6);letter-spacing:-1px}
.v2-segui-ok .n u{display:block;text-decoration:none;font-size:var(--f1);font-weight:600;
  color:var(--i3);margin-top:3px}
.v2-segui-ok.gr .n u{margin-top:5px}
/* la fecha no va adentro del parrafo: ahi era una tercera frase que nadie lee,
   y aca abajo es el pie de los dos numeros, que es de lo que habla */
.v2-segui-ok .f{margin-top:10px;font-size:var(--f1);font-weight:500;color:var(--i3)}
.v2-segui-ok .a{margin-top:20px;display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.v2-segui-ok.gr .a{margin-top:26px}

/* los otros tres vacios comparten forma: icono apagado, una frase que dice por
   que esta vacio, y —si hay algo que hacer— el boton que lo llena. */
.v2-segui-vac{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 18px}
.v2-segui-vac>svg{color:var(--n300)}
.v2-segui-vac b{margin-top:13px;font-size:var(--f3);font-weight:650;color:var(--i1);letter-spacing:-.2px}
.v2-segui-vac.gr b{font-size:var(--f4);letter-spacing:-.4px}
.v2-segui-vac p{margin-top:7px;font-size:var(--f2);font-weight:450;color:var(--i2);line-height:1.6;max-width:44ch}
.v2-segui-vac.gr p{max-width:56ch}
.v2-segui-vac .a{margin-top:16px;display:flex;gap:9px;flex-wrap:wrap;justify-content:center}

/* ══════ PANEL ══════ */
.v2-pan{flex:1;display:flex;flex-direction:column;min-width:0}
.v2-sel{background:var(--n0);border:1px solid var(--bd);color:var(--i1);height:34px;border-radius:var(--r8);
  padding:0 11px;font-size:var(--f2);font-weight:600;cursor:pointer;transition:border-color var(--tr-16) ease,box-shadow var(--tr-16) ease}
.v2-sel:focus{outline:none;border-color:var(--t200);box-shadow:0 0 0 3px var(--t50)}
/* `.v2-tab` se fue con la barra de pestañas del caso: `class="v2-tab` no lo
   emite nadie. `clases-muertas.py` no las cazaba porque el nombre es prefijo de
   `v2-tabs`/`_v2Tabs`, que sí existen. */
.v2-cont{flex:1;overflow-y:auto}
.v2-ver-t{font-size:var(--f3);font-weight:500;line-height:1.5;color:var(--i2);max-width:74ch}
.v2-ver-t b{color:var(--i1);font-weight:700}
.v2-ver-t i{font-style:normal;color:var(--op-t);font-weight:700}

/* ══════ MAPA ══════
   Referencia, no contenido: la trama va toda en un gris parejo, sin jerarquía
   de color en las calles y sin nombres de calle, y el único color que aporta
   el basemap es el agua —celeste, por el filtro que arma `_v2FiltroAgua`—.
   Todo lo demás que tiene color en esta caja es un pin. */
.v2-map{flex:1;background:var(--n50);position:relative}
.v2-map.leaflet-container{background:var(--n50);font:inherit}
/* el filtro toca sólo la capa de trama: la de rótulos ya es gris pura y
   pasarla por el filtro sería pagarlo dos veces por nada */
.v2-map .v2-tr img.leaflet-tile{opacity:.92}
.v2-map .leaflet-control-zoom{border:1px solid var(--n200);box-shadow:var(--sh);
  border-radius:var(--r8);overflow:hidden}
.v2-map .leaflet-control-zoom a{background:var(--n0);color:var(--i2);border-color:var(--n100);
  width:30px;height:30px;line-height:30px;font-size:var(--f4);transition:background var(--tr-14) ease,color var(--tr-14) ease}
@media (hover:hover){ .v2-map .leaflet-control-zoom a:hover{background:var(--n50);color:var(--i1)} }
.v2-map .leaflet-tooltip{background:var(--n0);border:1px solid var(--n100);box-shadow:var(--sh);
  border-radius:var(--r10);color:var(--i1);font-size:var(--f1);font-weight:500;padding:9px 12px;line-height:1.45}
.v2-map .leaflet-tooltip::before{display:none}
/* Esri pide atribución y va puesta, pero como pie de foto: presente, chiquita
   y sin competir. Apagarla sería usar los tiles fuera de sus condiciones. Los
   9px son a propósito -uno de los seis tamaños la haría competir con el mapa
   mismo-, así que ese uno queda fuera de escala con la razón escrita acá. */
.v2-map .leaflet-control-attribution{background:rgba(255,255,255,.72);color:var(--n400);
  font-size:var(--f1);font-weight:500;line-height:1.5;padding:1px 6px;border-radius:var(--r6) 0 0 0;box-shadow:none}
.v2-map .leaflet-control-attribution a{color:var(--n400);text-decoration:none}

.v2-pin{position:relative;transition:transform .18s var(--eo);transform-origin:50% 100%}
/* sombra corta y clara: el pin se apoya en el mapa, no flota sobre él */
.v2-pin svg.mk{display:block;filter:drop-shadow(0 1.5px 2px rgba(14,28,30,.2))}
/* el halo del elegido: sin trazo no ocupa nada, y al elegirlo engorda */
.v2-pin .mk .ha{stroke:#fff;stroke-width:0;transition:stroke-width .18s var(--eo)}
.v2-pin .g{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
@media (hover:hover){ .v2-pin:hover{transform:scale(1.14) translateY(-2px);z-index:600} }
.v2-pin.sel{z-index:700}
.v2-pin.sel .mk{filter:drop-shadow(0 3px 5px rgba(14,28,30,.26))}
.v2-pin.sel .mk .ha{stroke-width:5}
.v2-pin.off{opacity:.2;pointer-events:none}
/* EL GRUPO: un disco con el numero, del color de lo que mas tiene adentro.
   Redondo y no una gota, porque no senala UN punto: cubre una zona. */
.v2-clu{display:flex;align-items:center;justify-content:center;border-radius:50%;
  font-weight:800;font-size:var(--f2);color:#fff;cursor:pointer;
  border:2.5px solid rgba(255,255,255,.92);
  box-shadow:0 3px 10px rgba(14,28,30,.28);font-variant-numeric:tabular-nums;
  transition:transform var(--tr-16) var(--eo)}
@media (hover:hover){ .v2-clu:hover{transform:scale(1.08)} }
.v2-pinw{opacity:0;transform:translateY(-8px) scale(.88);animation:v2cae .4s var(--eo) forwards}
@keyframes v2cae{to{opacity:1;transform:none}}

.v2-mapc{position:absolute;z-index:500;display:flex;flex-wrap:wrap;max-width:calc(100% - 100px)}
/* el chip lleva EL MISMO gráfico que el pin, no un punto de color: así la
   referencia y el mapa se leen con la misma clave y no hay que traducir */
.v2-mc{display:inline-flex;align-items:center;gap:7px;background:var(--n0);
  border:1px solid var(--n200);border-radius:999px;font-weight:600;
  color:var(--i2);cursor:pointer;box-shadow:var(--sh);
  transition:transform var(--tr-16) var(--eo),border-color var(--tr-16) ease,color var(--tr-16) ease,opacity var(--tr-16) ease}
.v2-mc:active{transform:scale(.96)}
.v2-mc.off{opacity:.42}
.v2-mc b{color:var(--i1);font-weight:700}
.v2-mc svg{flex-shrink:0;display:block}
@media (hover:hover){ .v2-mc:hover{border-color:var(--n300);color:var(--i1)} }

/* ══════ COMPOSICIÓN DEL ESFUERZO ══════ */
.v2-comp{display:flex;height:12px;border-radius:var(--r6);overflow:hidden;background:var(--n50);gap:2px}
.v2-comp i{display:block;height:100%;transition:width .7s var(--eo);width:0;border-radius:var(--r6)}
.v2-comp .e1{background:var(--c-ok)} .v2-comp .e2{background:var(--c-op)} .v2-comp .e3{background:var(--c-no)}
.v2-esf{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.v2-esf-i{display:grid;grid-template-columns:12px 1fr auto;gap:12px;align-items:start}
.v2-esf-i>i{width:12px;height:12px;border-radius:var(--r6);margin-top:4px}
.v2-esf-i b{display:block;font-size:var(--f2);font-weight:650;color:var(--i1);margin-bottom:2px}
.v2-esf-i span{font-size:var(--f2);font-weight:450;color:var(--i2);line-height:1.5}

/* ══════ «QUÉ PASÓ», EN TRES COLUMNAS A LA VEZ ══════
   Inspirado en una maqueta de referencia (docs/Demo inspiracion.png): el
   hallazgo, el mapa y el ranking de dónde se concentra se leen juntos, sin
   que ninguno tape al otro. Un solo componente nuevo y reusable -la tarjeta
   de hallazgo `.v2-hal`, con su color según el tono- y el resto reusa lo que
   ya existía (`.v2-br` para el ranking, `.v2-mc` para la leyenda del mapa). */
.v2-q1{display:grid;grid-template-columns:.86fr 1.34fr .8fr;gap:18px;align-items:start;margin-top:18px}
@media (max-width:1180px){ .v2-q1{grid-template-columns:1fr} }
.v2-q1-lbl{font-size:var(--f3);font-weight:650;color:var(--i1);letter-spacing:-.1px;margin:0 0 3px}

/* LA TARJETA DE HALLAZGO. Un hecho con su número, nunca relleno: si no hay
   segundo hallazgo, la columna se queda con uno solo y el resto es aire. */
.v2-hal{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-radius:var(--r14);
  border:1px solid transparent}
.v2-hal+.v2-hal{margin-top:10px}
.v2-hal-i{width:32px;height:32px;border-radius:var(--r10);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;background:var(--n0)}
.v2-hal-t{font-size:var(--f2);font-weight:450;line-height:1.5;color:var(--i2);padding-top:3px}
.v2-hal-t b{font-weight:700;color:var(--i1)}
.v2-hal.mal{background:var(--v2-problema-bg);border-color:var(--v2-problema-bd)}
.v2-hal.mal .v2-hal-i{color:var(--v2-problema)}
.v2-hal.op{background:var(--v2-alerta-bg);border-color:var(--v2-alerta-bd)}
.v2-hal.op .v2-hal-i{color:var(--v2-alerta)}
.v2-hal.neutro{background:var(--n50);border-color:var(--n200)}
.v2-hal.neutro .v2-hal-i{color:var(--i2)}
/* EL RANKING REUSA `.v2-br` -el mismo bloque que ya pintaba «en qué barrios se
   concentra»-, con un modificador: chip numerado en vez de barra, y clickeable
   -filtra Comercios por esa localidad en vez de sólo mostrarla. */
.v2-br.rk{grid-template-columns:22px 1fr auto 16px;gap:10px;padding:7px 6px;border-radius:var(--r10);
  cursor:pointer;transition:background var(--tr-14) ease}
@media (hover:hover){ .v2-br.rk:hover{background:var(--n50)} }
.v2-br.rk .v2-br-rn{width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:var(--v2-problema-bg);color:var(--v2-problema);font-size:var(--f1);font-weight:700;
  display:flex;align-items:center;justify-content:center}
.v2-br.rk .v2-br-n{color:var(--i1);font-weight:600}
.v2-br.rk .v2-br-v{color:var(--v2-problema)}
.v2-br.rk .v2-br-cv{color:var(--n400);display:flex}
.v2-q1-rkw{display:flex;flex-direction:column;gap:2px}
/* LA LEYENDA DEL MAPA MINI: mismos chips que el mapa grande de Comercios
   (`.v2-mc`), reusados abajo del mapa en vez de flotando encima -a este alto
   no hay lugar para superponerlos sin tapar pines. */
.v2-mapleg{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 0}
.v2-mapleg .v2-mc{box-shadow:none;border-color:var(--n100)}

/* ══════ COMPARACIÓN ══════ */
.v2-vs{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;row-gap:12px}
.v2-vs-n{font-size:var(--f1);font-weight:500;color:var(--i2);white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.v2-vs-b{height:26px;border-radius:var(--r8);background:var(--n50);overflow:hidden;min-width:60px}
.v2-vs-b i{display:block;height:100%;width:0;border-radius:var(--r8);transition:width .7s var(--eo)}
.v2-vs-b.mal i{background:var(--mal)}
.v2-vs-b.ok i{background:var(--c-ok)}
.v2-vs-v{font-size:var(--f3);font-weight:700;letter-spacing:-.5px;min-width:48px;text-align:right}
.v2-vs-v.mal{color:var(--mal)} .v2-vs-v.ok{color:var(--t700)}
/* Cuando la diferencia no sobrevive al tamaño de la muestra, las barras no se
   pintan de rojo y verde: el color afirmaría más de lo que el número sostiene, y
   el texto de al lado estaría diciendo lo contrario que la imagen. */
.v2-vs-b.tenue i{background:var(--n300)}
.v2-vs-v.tenue{color:var(--i2)}

/* ══════ LA CADENA DE RAZONAMIENTO ══════
   El resumen es una sola pregunta hecha cinco veces, siempre en el mismo orden.
   El numeral no es decoración: es lo que hace que en el tercer caso el lector ya
   sepa dónde va a estar lo que busca. Por eso el título va en tinta y en caja
   baja, y no como el rótulo gris del resto de las bandas: éstos son el esqueleto
   de la pantalla y aquéllos separan piezas dentro de una respuesta. */
/* LA CADENA DE RAZONAMIENTO. Cinco preguntas fijas, y el rotulo de cada una se
   queda pegado arriba mientras leés su respuesta: a 400px de scroll ya no sabés
   cuál de las cinco estás contestando, y esa es la promesa entera del v2. */
.v2-preg{display:flex}
.v2-preg .q{flex-shrink:0;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700}
.v2-preg .t{font-weight:700;color:var(--i1)}
.v2-preg .n{white-space:nowrap}

/* ══════ POR QUÉ ESTÁ MAL ══════
   La regla es lo único de la tarjeta a 15px, porque es la afirmación: todo lo
   demás la sostiene o la debilita. Su marca de procedencia va al lado y no
   debajo, porque la regla y de dónde sale son una sola cosa. */
.v2-reg{display:flex;flex-wrap:wrap;align-items:center;gap:9px 12px}
.v2-reg-mal{flex-shrink:0;width:28px;height:28px;border-radius:var(--r10);background:var(--mal-bg);
  color:var(--mal);display:flex;align-items:center;justify-content:center}
.v2-reg-t{font-size:var(--f3);font-weight:650;line-height:1.45;letter-spacing:-.2px;color:var(--i1);max-width:62ch}
.v2-reg-d{font-size:var(--f2);font-weight:450;line-height:1.62;color:var(--i2);margin:11px 0 0;max-width:80ch}
.v2-reg-d b{font-weight:650;color:var(--i1)}
.v2-apo{display:flex;flex-direction:column;gap:15px;margin-top:12px}
.v2-apo-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.v2-apo-t{font-size:var(--f2);font-weight:650;color:var(--i1);line-height:1.4}
.v2-apo-d{font-size:var(--f2);font-weight:450;color:var(--i2);line-height:1.6;margin-top:6px;max-width:62ch}
.v2-apo-d b{font-weight:650;color:var(--i1)}
.v2-vs-c{font-size:var(--f2);font-weight:450;color:var(--i2);line-height:1.6;margin:14px 0 0}
.v2-vs-c b{font-weight:650;color:var(--i1)}

/* ══════ A QUIÉN LE TOCA ══════
   No lleva el riel teal de `.v2-paso` a propósito: hay un solo próximo paso por
   pantalla, y si dos piezas se pintan igual el ojo busca dos. */
.v2-toca{max-width:82ch}
.v2-toca-n{font-size:var(--f4);font-weight:700;letter-spacing:-.4px;color:var(--i1);line-height:1.25}
.v2-toca-d{font-size:var(--f2);font-weight:450;color:var(--i2);line-height:1.62;margin:9px 0 0;max-width:76ch}
.v2-toca-d b{font-weight:650;color:var(--i1)}
.v2-toca-b{margin-top:12px}

/* ══════ CÓMO SE VERIFICA ══════ */
.v2-esc{display:flex;flex-direction:column;margin-top:15px}
.v2-esc-i{display:grid;grid-template-columns:21px 1fr;gap:13px;padding-bottom:17px;position:relative}
.v2-esc-i:last-child{padding-bottom:0}
.v2-esc-i::before{content:"";position:absolute;left:10px;top:24px;bottom:0;width:1px;background:var(--n100)}
.v2-esc-i:last-child::before{display:none}
.v2-esc-n{width:21px;height:21px;border-radius:50%;border:1px solid var(--n200);background:var(--n0);
  display:flex;align-items:center;justify-content:center;font-size:var(--f1);font-weight:700;color:var(--i3);
  position:relative;z-index:1}
.v2-esc-i.hoy .v2-esc-n{background:var(--t700);border-color:var(--t700);color:#fff}
.v2-esc-t{font-size:var(--f2);font-weight:650;color:var(--i1);line-height:1.35;padding-top:3px}
.v2-esc-i.hoy .v2-esc-t{color:var(--t800)}
.v2-esc-d{font-size:var(--f2);font-weight:450;color:var(--i2);line-height:1.6;margin-top:6px;max-width:72ch}
.v2-esc-d b{font-weight:650;color:var(--i1)}

/* ══════ AGRUPAR POR INTERLOCUTOR ══════
   Con tres casos la cola se lee de un vistazo; con cuarenta, no. Lo que ordena
   el trabajo no es cuántos casos hay sino a cuántas personas hay que
   escribirles, así que los que van al mismo interlocutor viajan juntos. */
/* prefijada, no `.c`: la app tiene una clase global `.c` que es una tarjeta
   entera (borde, fondo, 20px de padding y radio 12) y se colaba adentro del
   contador. No se ve en la hoja, se ve en getComputedStyle.
   La forma del grupo vive mas abajo, en el bloque 3 del rediseño: es sticky y
   plegable, y las dos cosas necesitan el envoltorio `.v2-grp-w`. */

/* ══════ VENCIDO ══════
   No es un estado que alguien marque: sale de una fecha, y por eso aparece solo. */
.v2-venc{display:inline-flex;align-items:center;gap:5px;font-size:var(--f1);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--mal);background:var(--mal-bg);
  border:1px solid var(--mal-bd);border-radius:999px;padding:2px 8px}

/* ══════ PERSEGUIR: compromiso, escalar, revisita ══════ */
.v2-sig{display:grid;grid-template-columns:1fr;gap:16px;margin-top:17px;padding-top:16px;
  border-top:1px solid var(--n100)}
@media (min-width:1100px){ .v2-sig{grid-template-columns:1fr 1fr;gap:26px} }
.v2-sig-t{font-size:var(--f2);font-weight:650;color:var(--i1);line-height:1.4}
.v2-sig-d{font-size:var(--f2);font-weight:450;color:var(--i2);line-height:1.6;margin-top:6px;max-width:64ch}
.v2-sig-d b{font-weight:650;color:var(--i1)}
.v2-sig-a{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:11px}
.v2-fec{background:var(--n0);border:1px solid var(--bd);color:var(--i1);height:32px;border-radius:var(--r8);
  padding:0 10px;font:inherit;font-size:var(--f1);font-weight:600}
.v2-fec:focus{outline:none;border-color:var(--t500);box-shadow:0 0 0 3px rgba(19,193,172,.12)}

/* La revisita es una misión paga: la confirmación no es un `confirm()` que
   tapa la pantalla, es un panel que deja el costo a la vista mientras se
   decide, y que se puede cancelar sin haber pedido nada. */
.v2-pedi{background:var(--op-bg);border:1px solid var(--op-bd);border-radius:var(--r14);
  padding:15px 16px;margin-top:12px}
.v2-pedi-t{font-size:var(--f2);font-weight:700;color:var(--op-t);line-height:1.4}
.v2-pedi-d{font-size:var(--f2);font-weight:450;color:var(--i2);line-height:1.6;margin-top:6px;max-width:66ch}
.v2-pedi-d b{font-weight:700;color:var(--i1)}
.v2-pedi-n{display:flex;gap:22px;margin:13px 0 0;flex-wrap:wrap}
.v2-pedi-v{font-size:var(--f4);font-weight:700;letter-spacing:-.5px;color:var(--i1);line-height:1}
.v2-pedi-l{font-size:var(--f1);font-weight:500;color:var(--i3);margin-top:5px}

/* ══════ SE VOLVIÓ A MEDIR ══════ */
.v2-remed{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin-top:12px}
.v2-remed .ic{width:26px;height:26px;flex-shrink:0;border-radius:var(--r8);background:var(--n50);
  color:var(--i3);display:flex;align-items:center;justify-content:center}
.v2-remed.hay .ic{background:var(--t50);color:var(--t700)}

/* ══════ EL SETUP, ARRIBA DE LA COLA ══════
   El chip de la barra no alcanzaba: habia que saber que estaba. Esto ocupa
   lugar a proposito mientras falte algo, y se achica a una linea cuando se
   completa o cuando lo cierran. Nunca bloquea. */
.v2-setup{width:100%;text-align:left;border-radius:var(--r14);font:inherit}
.v2-setup.abierto{background:var(--op-bg);border:1px solid var(--op-bd);padding:13px 14px 14px}
.v2-setup-h{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.v2-setup-h .ic{color:var(--op-t);display:flex}
.v2-setup-h b{font-size:var(--f1);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--op-t)}
.v2-setup-x{margin-left:auto;background:none;border:none;color:var(--op-t);opacity:.6;
  cursor:pointer;padding:2px;display:flex;border-radius:var(--r6)}
@media (hover:hover){ .v2-setup-x:hover{opacity:1;background:rgba(143,90,0,.09)} }
.v2-setup-t{font-size:var(--f2);font-weight:700;color:var(--i1);letter-spacing:-.15px;line-height:1.3}
.v2-setup-d{font-size:var(--f2);font-weight:450;color:var(--i2);line-height:1.55;margin-top:6px}
.v2-setup.min,.v2-setup.listo{display:flex;align-items:center;gap:8px;background:var(--n0);
  border:1px solid var(--n100);padding:9px 12px;cursor:pointer;color:var(--i2);
  font-size:var(--f2);font-weight:500;line-height:1.45}
.v2-setup.min{color:var(--op-t);background:var(--op-bg);border-color:var(--op-bd)}
.v2-setup.listo{color:var(--t700);background:var(--t50);border-color:var(--t100);cursor:default}
.v2-setup.min i{margin-left:auto;font-style:normal;font-weight:700;text-decoration:underline}
.v2-setup b{font-weight:700}

/* el caso que acaba de aparecer se enciende, para que el ojo lo encuentre sin
   tener que releer la cola entera */
.v2-it.nuevo{animation:v2nue 2.4s var(--eo) forwards}
/* UNA sola animación, y con `forwards`. Antes eran dos reglas: `.v2-it` traía
   `opacity:0` + `animation:v2sube` (el 0→1), y este shorthand lo PISABA entero.
   Resultado: la tarjeta que el producto quiere destacar quedaba en opacity:0 y
   el resaltado teal de 2,2s corría sobre algo que no se veía. Y con
   prefers-reduced-motion sí se veía, porque ese bloque mata la animación: el
   único que se lo perdía era el usuario normal. */
@keyframes v2nue{
  0%{opacity:0;transform:translateY(6px);border-color:var(--t500);box-shadow:0 0 0 4px rgba(19,193,172,.16)}
  14%{opacity:1;transform:none;border-color:var(--t500);box-shadow:0 0 0 4px rgba(19,193,172,.16)}
  62%{opacity:1;transform:none;border-color:var(--t500);box-shadow:0 0 0 4px rgba(19,193,172,.16)}
  100%{opacity:1;transform:none;border-color:transparent;box-shadow:none}}
@media (prefers-reduced-motion:reduce){ .v2-it.nuevo{animation:none;border-color:var(--t500)} }

/* ══════ EDITOR DE ABASTECIMIENTO ══════ */
/* Acá había un cuerpo de declaraciones sin su selector —`overflow:hidden;
   text-overflow:ellipsis;white-space:nowrap}`— desde antes del corte en siete:
   alguien borró el selector y dejó las llaves. El navegador lo descartaba
   entero, así que no rompía nada, pero se leía como si le pertenecieran a la
   regla de abajo. Lo encontró el chequeo de CSS roto, que existe desde hoy. */
.v2-cxa-i{width:170px;flex-shrink:0;background:var(--n0);border:1px solid var(--bd);color:var(--i1);
  height:30px;border-radius:var(--r8);padding:0 10px;font:inherit;font-size:var(--f1);font-weight:500}
.v2-cxa-i::placeholder{color:var(--n400)}
.v2-cxa-i:focus{outline:none;border-color:var(--t500);box-shadow:0 0 0 3px rgba(19,193,172,.12)}

/* ══════ SETUP GUIADO ══════════════════════════════════════════════════════
   Un paso a paso sobre la capa del v2. Tres reglas que lo separan de un wizard
   de los que molestan:

   1. NUNCA BLOQUEA. Se entra y se sale cuando se quiere, y el informe funciona
      con cero pasos hechos. El botón de salir está siempre a la vista.
   2. NO PREGUNTA LO QUE YA SABE. Cada paso llega pre-llenado con lo que el
      relevamiento encontró, y confirmar es un clic. Escribir es la excepción.
   3. CADA PASO MUESTRA QUÉ COMPRA. A la derecha, en vivo, qué cambia en el
      informe si lo declarás. El brief pide que el setup justifique el trabajo
      que pide: esto es esa justificación, en pantalla y con números.

   Y tiene dos velocidades: la de arriba se resuelve con un clic, y "afinar"
   abre el detalle granular para el que quiera. Simplicidad de entrada,
   profundidad disponible. */
.v2-wz{position:fixed;inset:0;z-index:10002;background:var(--n25);color:var(--i1);
  display:flex;flex-direction:column;opacity:0;transition:opacity .22s ease;
  /* UN SOLO RIEL PARA LAS CUATRO FRANJAS, y antes eran tres distintos: la
     barra arrancaba en 22px, las tarjetas del cuerpo en 79 y el pie en 166.
     Nada de eso se leia como una columna. `--wz-riel` es el ancho util y
     `--wz-gut` el margen minimo; los dos numeros son los que YA tenia el
     cuerpo (1380 - 2x13 de padding interno, y 40+13), asi que las tarjetas no
     se mueven un pixel: se mueven las otras tres franjas hasta ellas. */
  --wz-riel:1354px; --wz-gut:53px}
.v2-wz.on{opacity:1}

.v2-wz-bar{position:relative;padding:0 var(--wz-gut);height:58px;flex-shrink:0;
  background:var(--n0);border-bottom:1px solid var(--n100)}
.v2-wz-bar-in{max-width:var(--wz-riel);margin:0 auto;height:100%;
  display:flex;align-items:center;gap:16px}
/* LA FLECHA VIVE EN EL MARGEN, FUERA DEL RIEL, y por eso el titulo puede
   empezar donde empiezan las tarjetas. Adentro del riel siempre iba a quedar
   corrido por el ancho de la flecha. Abajo de 760px el riel ya es todo el
   ancho, asi que vuelve a la fila. */
.v2-wz-back{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:1}
.v2-wz-t{font-size:var(--f3);font-weight:700;letter-spacing:-.3px;color:var(--i1)}
/* el padding de abajo es cero porque el pie anclado llega hasta el borde: con
   40px quedaba una franja de fondo entre la barra y el final del panel. */
.v2-wz-main{flex:1;overflow-y:auto;padding:34px 40px 28px;min-width:0}
/* ══ EN EL CELULAR LA FLECHA VUELVE A LA FILA ══ y la barra tiene que volver a
   ser una fila con ella: sacada del `position:absolute` sin eso, quedaba como
   bloque arriba del titulo y «Guardar y salir» se le montaba encima. Medido a
   390px. */
@media (max-width:760px){
  .v2-wz{--wz-gut:16px}
  .v2-wz-bar{display:flex;align-items:center;gap:10px}
  .v2-wz-back{position:static;transform:none;flex:0 0 auto}
  .v2-wz-bar-in{flex:1 1 auto;min-width:0;gap:10px}
  .v2-wz-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* UNA SOLA COLUMNA. El paso compartia el ancho con la tarjeta «Que te compra»
   -300px pegados a la derecha- y eso apretaba justo a los dos pasos que mas
   lugar necesitan: una lista de cientos de SKUs y una grilla de 24 provincias.
   La tarjeta se fue al pie y ahora es una linea, asi que el paso se queda con
   todo el ancho. */
.v2-wz-in{max-width:1120px;margin:0 auto;display:block}
.v2-wz-h{font-size:var(--f5);font-weight:700;letter-spacing:-.9px;line-height:1.16;color:var(--i1);margin:9px 0 0}
/* 66ch dejaba metros de aire vacío a la derecha en una pantalla de 1120px de
   ancho -el título y la grilla de abajo sí lo usaban entero-. 92ch sigue
   siendo una línea legible pero deja de pelear con el resto del layout. */
.v2-wz-sub{font-size:var(--f2);font-weight:450;line-height:1.6;color:var(--i2);margin:11px 0 0;max-width:92ch}
.v2-wz-sub b{font-weight:650;color:var(--i1)}
.v2-wz-c{margin-top:24px}
/* "afinar": el detalle granular no molesta al que no lo quiere */
.v2-wz-mas{margin-top:18px;border-top:1px solid var(--n100);padding-top:16px}
.v2-wz-mas-b{display:flex;align-items:center;gap:8px;background:none;border:none;padding:0;
  cursor:pointer;font:inherit;font-size:var(--f1);font-weight:650;color:var(--t700)}
.v2-wz-mas-b svg{transition:transform .2s var(--eo)}
.v2-wz-mas.abierto .v2-wz-mas-b svg{transform:rotate(90deg)}
.v2-wz-mas-c{margin-top:15px}

/* el panel que dice qué compra el paso */
@keyframes v2impPum{
  0%{box-shadow:0 0 0 0 rgba(19,193,172,.55); border-color:var(--t500)}
  100%{box-shadow:0 0 0 12px rgba(19,193,172,0); border-color:var(--n100)}
}
/* EL PIE DEL PASO: UNA LINEA CON UN ESTADO, NO UNA TARJETA CON UN NUMERO.
   Era un rotulo «Que te compra», un numero a 32px, una etiqueta y un parrafo,
   apilados en una columna propia. El numero no decia de que era y el conjunto
   no se leia como nada. Ahora hay dos caras y se distinguen por color: ambar
   mientras falta declararlo, teal cuando ya esta. */
.v2-wz-imp.flash{animation:v2impPum .9s var(--eo)}
.v2-wz-imp{display:flex;align-items:flex-start;gap:11px;margin-top:26px;
  background:var(--op-bg);border:1px solid var(--op-bd);border-radius:var(--r14);
  padding:13px 16px;font-size:var(--f2);font-weight:450;line-height:1.55;color:var(--i2)}
.v2-wz-imp.ok{background:var(--t50);border-color:var(--t200)}
.v2-wz-imp-i{flex-shrink:0;display:flex;margin-top:1px;color:var(--op-t)}
.v2-wz-imp.ok .v2-wz-imp-i{color:var(--t700)}
.v2-wz-imp-t b{font-weight:700;color:var(--i1)}

/* el aviso de lo declarado y no medido: aclaracion, no alarma */
.v2-sindato{display:flex;align-items:flex-start;gap:8px;margin:12px 11px 4px;
  padding:11px 13px;border-radius:var(--r10);background:var(--n25);
  border:1px solid var(--n100);font-size:var(--f1);font-weight:450;
  line-height:1.5;color:var(--i3)}
.v2-sindato svg{flex-shrink:0;margin-top:1px;color:var(--n400)}
.v2-sindato b{font-weight:650;color:var(--i2)}
/* QUE SE ANUNCIE ABRIR UN BLOQUE. Todo el wizard se repinta entero con
   `innerHTML` en cada cambio -es como se resuelve el bug del paso 4 en
   `_v2Aplicar`, ver ese comentario-, así que un `transition` normal no tiene
   de dónde salir: el nodo viejo y el nuevo no son el mismo elemento. Una
   `animation` sí funciona, porque corre sobre CÓMO NACE el nodo nuevo y no
   necesita continuidad con el anterior. Es corta a propósito -0,22s- porque
   corre en cada repintado del bloque, no sólo al abrirlo: mejor un settle
   parejo que uno largo que se sienta distinto según qué la disparó. */
@keyframes v2medb{0%{opacity:0;transform:translateY(-5px)}100%{opacity:1;transform:none}}
.v2-fr-l{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:4px 0;
  font-size:var(--f2);font-weight:500;line-height:1.5;color:var(--i2)}
.v2-fr-l span{min-width:0}
:where(#v2-app) .v2-fr-i{width:68px;flex-shrink:0;-webkit-appearance:none;appearance:none;
  background-color:var(--n0);border:1px solid var(--ctl-bd);border-radius:var(--r8);
  color:var(--i1);box-shadow:var(--ctl-sh);padding:5px 9px;font:inherit;font-size:var(--f2);
  font-weight:650;text-align:center;font-variant-numeric:tabular-nums;
  transition:var(--ctl-fx)}
:where(#v2-app) .v2-fr-i::placeholder{color:var(--ctl-ph);font-weight:500;opacity:1}
:where(#v2-app) .v2-fr-i:focus{outline:none;border-color:var(--t600);box-shadow:var(--ring)}
@media (hover:hover){
  :where(#v2-app) .v2-fr-i:hover{border-color:var(--ctl-bd-h)}
}
/* EL STEPPER: un numero que se ELIGE, no se escribe. Las flechitas nativas del
   input se sacan -quedan las propias, mas grandes y con mejor blanco- porque
   duplicaban el control. `-webkit-tap-highlight-color` en los botones evita el
   flash gris de iOS al tocar rapido, que con dos toques seguidos (subir varias
   veces) se notaba. */
:where(#v2-app) .v2-fr-i::-webkit-inner-spin-button,
:where(#v2-app) .v2-fr-i::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
:where(#v2-app) .v2-fr-i{-moz-appearance:textfield}
.v2-fr-step{display:inline-flex;align-items:stretch;flex-shrink:0}
.v2-fr-step .v2-fr-i{width:52px;border-radius:0;border-left-width:0;border-right-width:0;
  position:relative;z-index:1}
:where(#v2-app) .v2-fr-stepb{flex-shrink:0;width:26px;display:flex;align-items:center;
  justify-content:center;background:var(--n25);border:1px solid var(--ctl-bd);color:var(--i2);
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:var(--ctl-fx)}
:where(#v2-app) .v2-fr-stepb:first-child{border-radius:var(--r8) 0 0 var(--r8)}
:where(#v2-app) .v2-fr-stepb:last-child{border-radius:0 var(--r8) var(--r8) 0}
:where(#v2-app) .v2-fr-stepb:active{background:var(--t100);color:var(--t700);transform:scale(.94)}
@media (hover:hover){ :where(#v2-app) .v2-fr-stepb:hover{background:var(--t50);color:var(--t700);
  border-color:var(--ctl-bd-h)} }
/* EL NÚMERO QUE PAGA. Este es literalmente «el efecto en el momento» del
   rediseño: un pulso breve de fondo, no un rebote, para que el ojo note que
   ESTE número es el que acaba de cambiar sin gritar en cada repintado. */
@keyframes v2vive{0%{background:var(--t200)}100%{background:var(--t50)}}
/* pantallas angostas: la frase se parte igual, pero el numero no se despega */
/* ── WZ·2 · TU PORTAFOLIO ───────────────────────────────────────────────── */
/* La lista de SKUs es la unica pieza del setup que puede traer CUATROCIENTOS
   nodos. Por eso lo primero es la barra —buscador, filtro y contador— y esa
   barra queda PEGADA ARRIBA mientras la lista corre: con 400 tarjetas, un
   contador que se va con el scroll deja de existir justo cuando hace falta. */
.v2-obl{margin-top:2px}
.v2-obl-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:11px;
  flex-wrap:wrap;padding:11px 0 12px;background:var(--n25);
  /* `.v2-wz-main` tiene 34px de padding arriba, y la barra se pega al borde del
     scrollport: sin esto, el titulo del paso se veia pasar por esa franja al
     scrollear. La sombra plana la tapa con el mismo fondo. */
  box-shadow:0 -40px 0 0 var(--n25)}
.v2-obl-busc{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;
  background:var(--n0);border:1px solid var(--bd);border-radius:var(--r10);padding:0 11px;
  color:var(--n400);transition:border-color var(--tr-16) ease,box-shadow var(--tr-16) ease}
.v2-obl-busc:focus-within{border-color:var(--t500);box-shadow:0 0 0 3px rgba(19,193,172,.12);color:var(--i3)}
:where(#v2-app) .v2-obl-busc input{flex:1;min-width:0;background:none;border:none;outline:none;
  font:inherit;font-size:var(--f2);font-weight:500;color:var(--i1);padding:9px 0}
.v2-obl-busc input::placeholder{color:var(--n400);font-weight:450}
.v2-obl-busc input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* el filtro de vista: tres estados con su cuenta al lado, para no tener que
   marcar y contar a ojo cuantos quedan afuera */
.v2-obl-seg{display:inline-flex;background:var(--n50);border:1px solid var(--bd);border-radius:var(--r10);
  padding:2px;gap:2px;flex-shrink:0}
:where(#v2-app) .v2-obl-seg button{display:flex;align-items:center;gap:6px;background:none;border:none;
  border-radius:var(--r6);padding:6px 11px;cursor:pointer;font:inherit;font-size:var(--f1);font-weight:650;
  color:var(--i3);white-space:nowrap;
  transition:background var(--tr-14) ease,color var(--tr-14) ease,transform var(--tr-14) var(--eo)}
:where(#v2-app) .v2-obl-seg button:active{transform:scale(.97)}
@media (hover:hover){ :where(#v2-app) .v2-obl-seg button:hover{color:var(--i1)} }
:where(#v2-app) .v2-obl-seg button.on{background:var(--n0);color:var(--i1);
  box-shadow:0 1px 2px rgba(14,28,30,.10)}
.v2-obl-seg button i{font-style:normal;font-weight:700;font-size:var(--f1);color:var(--n400);
  background:var(--n0);border-radius:var(--r6);padding:1px 5px}
.v2-obl-seg button.on i{background:var(--n50);color:var(--i2)}

/* EL CONTADOR, SIEMPRE A LA VISTA. Es la unica respuesta a «¿cuantos llevo?» */
.v2-obl-cta{flex-shrink:0;font-size:var(--f2);font-weight:500;color:var(--i2);
  background:var(--n0);border:1px solid var(--n100);border-radius:var(--rpill);padding:6px 13px}
.v2-obl-cta b{font-weight:700;color:var(--i1)}

/* las masivas son texto, no botones: al lado de 400 tarjetas, tres botones
   solidos compiten con lo que importa */
.v2-obl-acc{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:var(--f1);font-weight:600;color:var(--n400);margin:0 0 12px}
:where(#v2-app) .v2-obl-acc button{background:none;border:none;padding:2px 0;cursor:pointer;
  font:inherit;font-size:var(--f1);font-weight:650;color:var(--t700);
  border-bottom:1px solid transparent;transition:border-color var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-obl-acc button:hover{border-bottom-color:var(--t400)} }
.v2-obl-acc button+button::before{content:"·";color:var(--n300);margin-right:7px;font-weight:400}

/* LA GRILLA. minmax(252px) entra en tres columnas a 1120 y baja sola. */
.v2-obl-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:10px}
.v2-obl-c{display:flex;align-items:stretch;gap:11px;text-align:left;font:inherit;cursor:pointer;
  background:var(--n0);border:1px solid var(--n100);border-radius:var(--r14);padding:12px 13px;
  box-shadow:var(--sh);
  transition:border-color var(--tr-16) ease,background var(--tr-16) ease,box-shadow var(--tr-16) ease,transform var(--tr-16) var(--eo)}
@media (hover:hover){ .v2-obl-c:hover{border-color:var(--n300);transform:translateY(-1px);box-shadow:var(--sh2)} }
.v2-obl-c:active{transform:scale(.985)}
/* MARCADO Y SIN MARCAR SE TIENEN QUE DISTINGUIR SIN LEER: aro teal, fondo
   tenido y el tilde lleno. Con 400 en pantalla, «Obligatorio»/«Opcional» en
   letra chica no es una diferencia, es una lectura. */
.v2-obl-c.on{border-color:var(--t400);background:var(--t50);box-shadow:0 0 0 3px rgba(19,193,172,.13)}
@media (hover:hover){ .v2-obl-c.on:hover{border-color:var(--t500)} }
.v2-obl-c-a{flex-shrink:0;align-self:flex-start;width:34px;height:34px;border-radius:var(--r8);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--f1);font-weight:800;letter-spacing:.02em}
/* La reja iguala el alto de las tarjetas de una fila, pero adentro los nombres
   ocupan una linea o dos. Sin esto, la barrita de distribucion quedaba a
   distinta altura en cada tarjeta y la fila se leia desalineada. */
.v2-obl-c-x{flex:1;min-width:0;display:flex;flex-direction:column}
.v2-obl-c-x b{display:block;font-size:var(--f2);font-weight:650;color:var(--i1);line-height:1.35;
  letter-spacing:-.15px}
/* el codigo, en monoespaciada: es por lo que se busca cuando el nombre no se
   recuerda, y truncado con ellipsis para que una clave larga no rompa la reja */
.v2-obl-c-x i{display:block;font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--f1);font-weight:500;color:var(--n400);margin:3px 0 9px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-obl-c-b{display:block;height:3px;border-radius:2px;background:var(--n100);margin-top:auto;overflow:hidden}
.v2-obl-c-b u{display:block;height:100%;border-radius:2px;text-decoration:none;opacity:.55}
.v2-obl-c-x em{display:block;font-style:normal;font-size:var(--f1);font-weight:500;color:var(--i3);margin-top:5px}
/* la casilla: vacia con borde en reposo, llena cuando esta marcado */
.v2-obl-c-t{flex-shrink:0;align-self:flex-start;width:22px;height:22px;border-radius:var(--r6);background:var(--n0);
  border:1.5px solid var(--bd);color:transparent;display:flex;align-items:center;justify-content:center;
  transition:background var(--tr-16) ease,border-color var(--tr-16) ease,color var(--tr-16) ease}
.v2-obl-c.on .v2-obl-c-t{background:var(--t700);border-color:var(--t700);color:#fff}
@media (hover:hover){ .v2-obl-c:hover .v2-obl-c-t{border-color:var(--i3)}
  .v2-obl-c.on:hover .v2-obl-c-t{border-color:var(--t700)} }

:where(#v2-app) .v2-obl-mas{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:11px;background:var(--n0);border:1px dashed var(--n200);border-radius:var(--r10);
  padding:11px;cursor:pointer;font:inherit;font-size:var(--f2);font-weight:650;color:var(--i2);
  transition:border-color var(--tr-16) ease,color var(--tr-16) ease}
@media (hover:hover){ :where(#v2-app) .v2-obl-mas:hover{border-color:var(--t400);color:var(--t800)} }
.v2-obl-mas i{font-style:normal;font-weight:500;color:var(--n400)}
.v2-obl-vac{font-size:var(--f2);font-weight:450;color:var(--i3);padding:26px 2px;text-align:center}

/* LA REGLA. Dos frases encadenadas, con el numero adentro de la frase: se lee
   «un comercio cumple si los tiene todos / y quiero que cumplan el 90 %». */
.v2-obl-regla{margin-top:20px;padding-top:15px;border-top:1px dashed var(--n200)}
.v2-obl-regla-t{font-size:var(--f1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--i3);margin-bottom:9px}
.v2-obl-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 0}
.v2-obl-r.sub{padding-left:16px;border-left:2px solid var(--n100);margin-left:2px}
.v2-obl-r-n{font-size:var(--f2);font-weight:500;color:var(--i1)}
.v2-obl-r-s{font-size:var(--f2);font-weight:500;color:var(--i2)}
.v2-obl-r .v2-cxa-i.chico{width:86px;flex-shrink:0}
.v2-obl-ej{font-size:var(--f1);font-weight:450;color:var(--i3);line-height:1.6;margin:6px 0 0;max-width:70ch}
.v2-obl-ej b{font-weight:700;color:var(--i2)}

/* AFINAR EL DETALLE: LA LISTA POR CANAL.
   Un canal por fila y PLEGADO: con cuatro canales y cuatrocientos SKUs, todo
   abierto son mil seiscientas filas. Se abre uno por vez. */
.v2-obl-intro{font-size:var(--f2);font-weight:450;color:var(--i2);line-height:1.6;margin:0 0 14px;max-width:70ch}
.v2-obl-intro b{font-weight:650;color:var(--i1)}
.v2-obl-nada{display:flex;align-items:flex-start;gap:10px;font-size:var(--f2);font-weight:450;
  color:var(--i2);line-height:1.6;background:var(--n25);border:1px solid var(--n100);
  border-radius:var(--r10);padding:12px 14px;max-width:74ch}
.v2-obl-nada svg{flex-shrink:0;margin-top:2px;color:var(--n400)}
.v2-obl-nada b{font-weight:650;color:var(--i1)}
.v2-obl-cw{border:1px solid var(--n100);border-radius:var(--r10);background:var(--n0);margin-bottom:8px}
.v2-obl-cw.ab{border-color:var(--n200);box-shadow:var(--sh)}
:where(#v2-app) .v2-obl-ch{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;
  padding:12px 14px;cursor:pointer;font:inherit;text-align:left;border-radius:var(--r10);
  transition:background var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-obl-ch:hover{background:var(--n25)} }
.v2-obl-ch>svg{flex-shrink:0;color:var(--n400);transition:transform .2s var(--eo)}
.v2-obl-ch.ab>svg{transform:rotate(90deg)}
.v2-obl-ch b{font-size:var(--f2);font-weight:650;color:var(--i1)}
.v2-obl-ch i{font-style:normal;font-size:var(--f1);font-weight:500;color:var(--n400)}
.v2-obl-ch .sp{flex:1}
.v2-obl-ch em{flex-shrink:0;font-style:normal;font-size:var(--f1);font-weight:600;color:var(--i3);
  background:var(--n50);border-radius:var(--rpill);padding:3px 9px}
.v2-obl-ch.pro em{background:var(--t50);color:var(--t800)}
.v2-obl-cb{padding:2px 14px 14px;border-top:1px solid var(--n50)}
.v2-obl-cn{font-size:var(--f1);font-weight:600;color:var(--i3);margin:12px 0 8px}
.v2-obl-cn b{font-weight:700;color:var(--i1)}
/* adentro de un canal la lista es de pastillas, no de tarjetas: es un recorte
   de la general y tiene que leerse como una lista, no competir con ella */
.v2-obl-cl{display:flex;flex-wrap:wrap;gap:7px}
.v2-obl-ci{display:inline-flex;align-items:center;gap:7px;background:var(--n0);
  border:1px solid var(--n200);border-radius:var(--rpill);padding:6px 13px 6px 8px;cursor:pointer;
  font:inherit;font-size:var(--f1);font-weight:600;color:var(--i2);
  transition:border-color var(--tr-16) ease,background var(--tr-16) ease,color var(--tr-16) ease,transform var(--tr-14) var(--eo)}
.v2-obl-ci:active{transform:scale(.97)}
@media (hover:hover){ .v2-obl-ci:hover{border-color:var(--n300)} }
.v2-obl-ci.on{border-color:var(--t400);background:var(--t50);color:var(--t800)}
.v2-obl-ci-t{width:17px;height:17px;border-radius:var(--r6);background:var(--n0);border:1.5px solid var(--bd);
  color:transparent;display:flex;align-items:center;justify-content:center;
  transition:background var(--tr-16) ease,border-color var(--tr-16) ease,color var(--tr-16) ease}
.v2-obl-ci.on .v2-obl-ci-t{background:var(--t700);border-color:var(--t700);color:#fff}

@media (prefers-reduced-motion:reduce){
  .v2-obl-c,.v2-obl-ci,.v2-obl-seg button{transition:none}
  .v2-obl-c:active,.v2-obl-ci:active,.v2-obl-seg button:active{transform:none}
}

/* ── WZ·3 · TU PRECIO ───────────────────────────────────────────────────── */

/* TRES BLOQUES NUMERADOS, Y EL ORDEN ES EL CONTENIDO: el precio, la
   tolerancia, y qué significa eso en pesos. El número grande de la izquierda
   no es decoración: es lo único que dice que hay una secuencia y que la
   segunda pregunta no se puede contestar antes que la primera. */
:where(#v2-app) .v2-wzp-b{border-top:1px solid var(--n100);padding-top:20px;margin-top:22px}
:where(#v2-app) .v2-wzp-b:first-child{border-top:none;padding-top:0;margin-top:0}
:where(#v2-app) .v2-wzp-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
:where(#v2-app) .v2-wzp-hn{flex-shrink:0;width:22px;height:22px;border-radius:50%;
  background:var(--i1);color:var(--n0);font-size:var(--f1);font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:1px}
:where(#v2-app) .v2-wzp-ht{flex:1;min-width:0}
:where(#v2-app) .v2-wzp-ht b{display:block;font-size:var(--f3);font-weight:700;
  color:var(--i1);letter-spacing:-.2px}
:where(#v2-app) .v2-wzp-ht i{display:block;font-style:normal;font-size:var(--f2);
  font-weight:450;color:var(--i2);line-height:1.5;margin-top:3px}

/* EL CONTADOR. Con cuatrocientos SKUs, cuántos siguen sin precio ES el estado
   del paso: el tilde del riel no alcanza, porque va a decir «falta» hasta el
   último. Va a la derecha del título y con el número en cuerpo grande. */
:where(#v2-app) .v2-wzp-c{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;
  font-size:var(--f2);font-weight:600;color:var(--op-t);background:var(--op-bg);
  border:1px solid var(--op-bd);border-radius:999px;padding:5px 13px}
:where(#v2-app) .v2-wzp-c b{font-size:var(--f4);font-weight:700;letter-spacing:-.4px}
:where(#v2-app) .v2-wzp-c.ok{color:var(--t700);background:var(--t50);border-color:var(--t200)}

/* la barra de herramientas de la lista */
:where(#v2-app) .v2-wzp-t{display:flex;align-items:center;gap:9px;margin-bottom:12px;flex-wrap:wrap}
:where(#v2-app) .v2-wzp-q{flex:1;min-width:190px;display:flex;align-items:center;gap:8px;
  background:var(--n0);border:1px solid var(--bd);border-radius:var(--r10);padding:0 11px;
  color:var(--n400);transition:border-color var(--tr-16) ease,box-shadow var(--tr-16) ease}
:where(#v2-app) .v2-wzp-q:focus-within{border-color:var(--t500);box-shadow:var(--ring);color:var(--t700)}
:where(#v2-app) .v2-wzp-q svg{flex-shrink:0}
:where(#v2-app) .v2-wzp-q input{flex:1;min-width:0;border:none;background:none;outline:none;
  font:inherit;font-size:var(--f2);font-weight:500;color:var(--i1);padding:8px 0}
:where(#v2-app) .v2-wzp-q input::-webkit-search-cancel-button{-webkit-appearance:none}
:where(#v2-app) .v2-wzp-o,
:where(#v2-app) .v2-wzp-p{display:inline-flex;align-items:center;gap:7px;background:var(--n0);
  border:1px solid var(--n200);border-radius:var(--r10);padding:8px 13px;cursor:pointer;
  font:inherit;font-size:var(--f2);font-weight:600;color:var(--i2);
  transition:border-color var(--tr-16) ease,color var(--tr-16) ease,background-color var(--tr-16) ease,transform var(--tr-16) var(--eo)}
:where(#v2-app) .v2-wzp-o svg{opacity:.25;transition:opacity var(--tr-16) ease}
:where(#v2-app) .v2-wzp-o.on{border-color:var(--t200);background:var(--t50);color:var(--t700)}
:where(#v2-app) .v2-wzp-o.on svg{opacity:1}
:where(#v2-app) .v2-wzp-p.on{border-color:var(--i1);background:var(--i1);color:var(--n0)}
@media (hover:hover){
  :where(#v2-app) .v2-wzp-o:hover,
  :where(#v2-app) .v2-wzp-p:hover{border-color:var(--n300);color:var(--i1)}
  :where(#v2-app) .v2-wzp-p.on:hover{border-color:var(--i1);color:var(--n0);opacity:.9}
}
:where(#v2-app) .v2-wzp-o:active,
:where(#v2-app) .v2-wzp-p:active{transform:scale(.97)}
:where(#v2-app) .v2-wzp-n{font-size:var(--f1);font-weight:600;color:var(--i3);
  margin-left:auto;padding-right:2px}

/* LA LISTA. Tres columnas fijas, y las dos de la derecha rotuladas: LO QUE
   VIMOS y LO QUE DECLARÁS. Confundir la referencia nuestra con la política del
   cliente es exactamente el error que este paso existe para evitar, así que la
   separación tiene que ser espacial y no una aclaración en letra chica. */
:where(#v2-app) .v2-wzp-cab{display:grid;grid-template-columns:1fr 150px 232px;gap:14px;
  align-items:end;padding:0 0 7px;border-bottom:1px solid var(--n200)}
:where(#v2-app) .v2-wzp-cab span{font-size:var(--f1);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--i3)}
:where(#v2-app) .v2-wzp-cab .obs{color:var(--cert-obs)}
:where(#v2-app) .v2-wzp-cab .dec{color:var(--cert-dec);text-align:right}
:where(#v2-app) .v2-wzp-f{display:grid;grid-template-columns:1fr 150px 232px;gap:14px;
  align-items:center;padding:8px 0;border-bottom:1px solid var(--n50)}
/* `hidden` sola no alcanza contra un `display` propio: pasó una vez y la fila
   quedaba visible con el buscador escrito. */
:where(#v2-app) .v2-wzp-f[hidden]{display:none}
:where(#v2-app) .v2-wzp-fn{min-width:0}
:where(#v2-app) .v2-wzp-fn b{display:block;font-size:var(--f2);font-weight:600;color:var(--i1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(#v2-app) .v2-wzp-fn i{display:block;font-style:normal;font-size:var(--f1);
  font-weight:500;color:var(--i3);margin-top:2px}
:where(#v2-app) .v2-wzp-fo b{font-size:var(--f3);font-weight:700;color:var(--cert-obs);
  letter-spacing:-.2px;font-variant-numeric:tabular-nums}
:where(#v2-app) .v2-wzp-fo b.na{font-size:var(--f1);font-weight:600;color:var(--n400);
  letter-spacing:0;text-transform:uppercase}
/* El input arriba y la consecuencia abajo, los dos pegados a la derecha. En una
   fila el rótulo quedaba apretado contra el campo en dos renglones de 90px y se
   leía como ruido; debajo tiene la columna entera y dice lo único que importa
   después de escribir el número: entre qué dos precios queda en rango. */
:where(#v2-app) .v2-wzp-fd{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
:where(#v2-app) .v2-wzp-fd em{max-width:100%;font-style:normal;font-size:var(--f1);
  font-weight:500;color:var(--n400);line-height:1.35;text-align:right}
:where(#v2-app) .v2-wzp-f.dec .v2-wzp-fd em{color:var(--t700)}
:where(#v2-app) .v2-wzp-fd em b{font-weight:700;font-variant-numeric:tabular-nums}

/* el campo de plata: el signo adentro, y el borde teal cuando ya es tuyo */
:where(#v2-app) .v2-wzp-in{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  background:var(--n0);border:1px solid var(--bd);border-radius:var(--r10);padding:0 11px;
  transition:border-color var(--tr-16) ease,box-shadow var(--tr-16) ease,background-color var(--tr-16) ease}
:where(#v2-app) .v2-wzp-in span{font-size:var(--f2);font-weight:600;color:var(--n400)}
:where(#v2-app) .v2-wzp-in input{width:96px;border:none;background:none;outline:none;font:inherit;
  font-size:var(--f2);font-weight:650;color:var(--i1);padding:8px 0;
  font-variant-numeric:tabular-nums;text-align:right}
:where(#v2-app) .v2-wzp-in input::placeholder{font-weight:500;color:var(--n400)}
:where(#v2-app) .v2-wzp-in:focus-within{border-color:var(--t500);box-shadow:var(--ring)}
:where(#v2-app) .v2-wzp-in.dec{border-color:var(--t300);background:var(--t50)}
:where(#v2-app) .v2-wzp-in.dec span{color:var(--t700)}
:where(#v2-app) .v2-wzp-in.otro input{width:52px;text-align:center}

:where(#v2-app) .v2-wzp-vac{font-size:var(--f2);font-weight:500;color:var(--i3);
  margin:16px 0 0;text-align:center}
:where(#v2-app) .v2-wzp-vac[hidden]{display:none}
:where(#v2-app) .v2-wzp-mas{display:block;width:100%;margin-top:11px;background:none;
  border:1px dashed var(--n200);border-radius:var(--r10);padding:9px;cursor:pointer;
  font:inherit;font-size:var(--f2);font-weight:600;color:var(--t700);
  transition:border-color var(--tr-16) ease,background-color var(--tr-16) ease}
:where(#v2-app) .v2-wzp-mas[hidden]{display:none}
@media (hover:hover){ :where(#v2-app) .v2-wzp-mas:hover{border-color:var(--t300);background:var(--t50)} }

/* ── pegar la lista ─────────────────────────────────────────────────────── */
:where(#v2-app) .v2-wzp-pg{background:var(--n25);border:1px solid var(--n200);
  border-radius:var(--r14);padding:15px 16px;margin-bottom:14px}
:where(#v2-app) .v2-wzp-pgp{font-size:var(--f2);font-weight:450;line-height:1.55;
  color:var(--i2);margin:0 0 11px;max-width:70ch}
:where(#v2-app) .v2-wzp-pgp b{font-weight:650;color:var(--i1)}
:where(#v2-app) .v2-wzp-ta{width:100%;box-sizing:border-box;background:var(--n0);
  border:1px solid var(--bd);border-radius:var(--r10);padding:10px 12px;font:inherit;
  font-size:var(--f2);font-weight:500;color:var(--i1);line-height:1.55;resize:vertical;
  white-space:pre;overflow:auto;transition:border-color var(--tr-16) ease,box-shadow var(--tr-16) ease}
:where(#v2-app) .v2-wzp-ta:focus{outline:none;border-color:var(--t500);box-shadow:var(--ring)}
:where(#v2-app) .v2-wzp-ta::placeholder{color:var(--n400);font-weight:450}
:where(#v2-app) .v2-wzp-pga{display:flex;gap:9px;margin-top:11px}

/* LA PREVIA. Nunca se aplica a ciegas: primero se ve qué matcheó y qué no, con
   el motivo de cada descarte, y el botón que escribe está DESPUÉS de eso. */
:where(#v2-app) .v2-wzp-pv{margin-top:15px;border-top:1px solid var(--n200);padding-top:14px}
:where(#v2-app) .v2-wzp-pvh{display:flex;align-items:center;gap:8px;font-size:var(--f2);
  font-weight:600;color:var(--i2);margin-bottom:8px}
:where(#v2-app) .v2-wzp-pvh b{font-weight:700;color:var(--i1)}
:where(#v2-app) .v2-wzp-pvh.ok{color:var(--t700)} :where(#v2-app) .v2-wzp-pvh.ok b{color:var(--t700)}
:where(#v2-app) .v2-wzp-pvh.no{color:var(--op-t);margin-top:14px}
:where(#v2-app) .v2-wzp-pvh.no b{color:var(--op-t)}
:where(#v2-app) .v2-wzp-pvl{max-height:190px;overflow:auto;background:var(--n0);
  border:1px solid var(--n100);border-radius:var(--r10);padding:2px 12px}
:where(#v2-app) .v2-wzp-pvf{display:flex;align-items:baseline;gap:12px;padding:6px 0;
  border-bottom:1px solid var(--n50);font-size:var(--f2)}
:where(#v2-app) .v2-wzp-pvf:last-child{border-bottom:none}
:where(#v2-app) .v2-wzp-pvf span{flex:1;min-width:0;font-weight:500;color:var(--i1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(#v2-app) .v2-wzp-pvf em{flex-shrink:0;font-style:normal;font-size:var(--f1);
  font-weight:600;color:var(--n400);font-variant-numeric:tabular-nums}
:where(#v2-app) .v2-wzp-pvf em b{font-size:var(--f2);font-weight:700;color:var(--t700)}
:where(#v2-app) .v2-wzp-pvl.no .v2-wzp-pvf span{color:var(--i3)}
:where(#v2-app) .v2-wzp-pvl.no .v2-wzp-pvf em{color:var(--op-t)}
:where(#v2-app) .v2-wzp-apl{margin-top:14px}

/* ── 2 · la tolerancia ──────────────────────────────────────────────────── */
:where(#v2-app) .v2-wzp-tol{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
:where(#v2-app) .v2-wzp-ch{background:var(--n0);border:1px solid var(--n200);border-radius:var(--r10);
  padding:9px 17px;cursor:pointer;font:inherit;font-size:var(--f3);font-weight:650;color:var(--i2);
  font-variant-numeric:tabular-nums;
  transition:border-color var(--tr-16) ease,color var(--tr-16) ease,background-color var(--tr-16) ease,transform var(--tr-16) var(--eo)}
@media (hover:hover){ :where(#v2-app) .v2-wzp-ch:hover{border-color:var(--n300);color:var(--i1)} }
:where(#v2-app) .v2-wzp-ch:active{transform:scale(.97)}
:where(#v2-app) .v2-wzp-ch.on{border-color:var(--t500);background:var(--t50);color:var(--t700);
  box-shadow:var(--ring)}
:where(#v2-app) .v2-wzp-nota{display:flex;align-items:flex-start;gap:9px;margin:14px 0 0;
  font-size:var(--f2);font-weight:450;line-height:1.55;color:var(--i2);max-width:78ch}
:where(#v2-app) .v2-wzp-nota b{font-weight:650;color:var(--i1)}
:where(#v2-app) .v2-wzp-nota svg{flex-shrink:0;margin-top:3px;color:var(--i3)}

/* ── 3 · qué significa en pesos ─────────────────────────────────────────── */
:where(#v2-app) .v2-wzp-eq{font-size:var(--f3);font-weight:450;line-height:1.6;color:var(--i2);
  margin:0;max-width:72ch}
:where(#v2-app) .v2-wzp-eq b{font-weight:700;color:var(--i1);font-variant-numeric:tabular-nums}
/* La regla: el eje va de −2·tol a +2·tol, así la banda en rango ocupa
   exactamente el medio y las tres marcas caen en 25 / 50 / 75. Es un dibujo a
   escala de la cuenta que hace el motor, no una ilustración. */
:where(#v2-app) .v2-wzp-r{margin-top:22px;padding-bottom:2px}
:where(#v2-app) .v2-wzp-rb{position:relative;height:10px;border-radius:var(--r6);background:var(--n100);
  overflow:hidden}
:where(#v2-app) .v2-wzp-rb i{position:absolute;left:25%;width:50%;top:0;bottom:0;
  background:var(--n300)}
:where(#v2-app) .v2-wzp-r.mio .v2-wzp-rb i{background:var(--t500)}
:where(#v2-app) .v2-wzp-re{position:relative;height:48px;margin-top:9px}
:where(#v2-app) .v2-wzp-re span{position:absolute;top:0;transform:translateX(-50%);
  text-align:center;white-space:nowrap}
:where(#v2-app) .v2-wzp-re b{display:block;font-size:var(--f2);font-weight:700;color:var(--i2);
  font-variant-numeric:tabular-nums}
/* `.eje` y no `.c`: `.c` es una tarjeta global de la app y le pintaba un fondo
   blanco redondeado a la marca del medio. La trampa esta escrita en CLAUDE.md. */
:where(#v2-app) .v2-wzp-re .eje b{font-size:var(--f4);color:var(--i1);letter-spacing:-.3px}
:where(#v2-app) .v2-wzp-re u{display:block;text-decoration:none;font-size:var(--f1);
  font-weight:600;color:var(--n400);margin-top:2px}
:where(#v2-app) .v2-wzp-r.mio .v2-wzp-re .eje u{color:var(--t700)}
:where(#v2-app) .v2-wzp-rx{display:flex;justify-content:space-between;margin-top:2px;
  font-size:var(--f1);font-weight:600;color:var(--n400)}

@media (max-width:1180px){
  :where(#v2-app) .v2-wzp-cab,
  :where(#v2-app) .v2-wzp-f{grid-template-columns:1fr 120px 190px;gap:10px}
  :where(#v2-app) .v2-wzp-in input{width:74px}
}
@media (prefers-reduced-motion:reduce){
  :where(#v2-app) .v2-wzp-o,:where(#v2-app) .v2-wzp-p,:where(#v2-app) .v2-wzp-ch{transition:none}
}

/* ── WZ·4 · DONDE QUERES ESTAR ──────────────────────────────────────────── */
/* NADA DE ESTO MIDE EN PX FIJOS, y por eso sobrevivio a la mudanza. Se pintaba
   en dos lugares con dos anchos -el paso del wizard y el cajon lateral de
   460px- y no hacia falta ni una segunda version ni una media query: la grilla
   de provincias va por `auto-fill` y cae de cinco columnas a dos sola. Hoy el
   cajon no existe y el unico lugar es el satelite `objetivo`. */
/* LA AGRUPACIÓN DEPENDE DEL CLIENTE (WZ·4, arriba de "Dónde querés estar").
   _ZN_ACC adivina por nombre de columna; esto deja corregirlo por operación:
   un chip por corte descubierto, tocarlo declara "acá hay alguien a cargo" y
   sube al mismo peso que cadena/distribuidor. `.fija` son los que ya venían
   arriba por el nombre solo -no hace falta tocarlos-, atenuados y sin click. */
.v2-agr{padding:13px 15px;background:var(--n25);border:1px solid var(--n100);
  border-radius:var(--r14);margin-bottom:2px}
.v2-agr-h{font-size:var(--f3);font-weight:700;color:var(--i1);margin-bottom:4px}
.v2-agr-p{font-size:var(--f2);font-weight:450;line-height:1.5;color:var(--i3);margin-bottom:10px}
.v2-agr-cs{display:flex;flex-wrap:wrap;gap:7px}
:where(#v2-app) .v2-agr-c{font:inherit;font-size:var(--f2);font-weight:600;color:var(--i2);
  background:var(--n0);border:1px solid var(--n200);border-radius:999px;padding:6px 13px;
  cursor:pointer;transition:var(--ctl-fx)}
:where(#v2-app) .v2-agr-c i{font-style:normal;font-weight:500;color:var(--i3);margin-left:2px}
:where(#v2-app) .v2-agr-c.on{background:var(--t600);border-color:var(--t600);color:#fff}
:where(#v2-app) .v2-agr-c.fija{background:var(--t50);border-color:var(--t200);color:var(--t700);
  cursor:default;opacity:.85}
@media (hover:hover){ :where(#v2-app) .v2-agr-c:not(.fija):not(.on):hover{border-color:var(--ctl-bd-h)} }

.v2-obj{display:flex;flex-direction:column;gap:13px}

/* EL RESUMEN. Con veinticuatro provincias mas localidades, canales y cadenas,
   lo declarado no se puede leer barriendo casillas: se dice arriba en una
   linea, y es lo primero que se ve al volver. */
.v2-obj-sum{display:flex;align-items:center;gap:10px;padding:10px 13px;
  background:var(--t50);border:1px solid var(--t200);border-radius:var(--r14);
  font-size:var(--f2);font-weight:500;color:var(--i2);line-height:1.45}
.v2-obj-sum>svg{flex-shrink:0;color:var(--t700)}
.v2-obj-sum>span{flex:1;min-width:0}
.v2-obj-sum b{font-weight:700;color:var(--i1)}
.v2-obj-sum em{font-style:normal;color:var(--n400);margin:0 3px}
.v2-obj-sum.vacio{background:var(--op-bg);border-color:var(--op-bd)}
.v2-obj-sum.vacio>svg{color:var(--op-t)}
:where(#v2-app) .v2-obj-borrar{flex-shrink:0;background:none;border:none;padding:2px 3px;
  cursor:pointer;font-size:var(--f1);font-weight:600;color:var(--i3);
  text-decoration:underline;text-underline-offset:2px;transition:color var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-obj-borrar:hover{color:var(--mal)} }

/* LA LEYENDA. Los tres estados con su efecto dicho en una linea cada uno, y con
   el mismo icono que despues aparece en cada casilla: es lo unico que hace que
   la grilla compacta de provincias se pueda leer sin adivinar. */
.v2-obj-leg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.v2-obj-leg li{display:flex;align-items:flex-start;gap:8px;font-size:var(--f1);
  font-weight:450;color:var(--i2);line-height:1.5}
.v2-obj-leg b{font-weight:700;color:var(--i1)}
.v2-obj-p{flex-shrink:0;width:19px;height:19px;border-radius:var(--r6);display:flex;
  align-items:center;justify-content:center;margin-top:-1px;
  border:1px solid var(--n200);background:var(--n50);color:var(--i3)}
.v2-obj-p.si{background:var(--t50);border-color:var(--t200);color:var(--t700)}
.v2-obj-p.no{background:var(--mal-bg);border-color:var(--mal-bd);color:var(--mal)}

/* EL CONTROL DE TRES ESTADOS. Eran dos botones y volver a tocar el activo lo
   apagaba: la tercera opcion existia y no se veia. Ahora es un boton por
   estado, los tres siempre presentes, y el puesto se lee sin comparar con nada.
   `mini` es la grilla de provincias, donde son veinticuatro casillas y las
   palabras no entran: van los tres iconos de la leyenda. */
.v2-tri{display:inline-flex;flex-shrink:0;gap:2px;padding:2px;background:var(--n50);
  border:1px solid var(--bd);border-radius:var(--r8)}
:where(#v2-app) .v2-tri button{display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:var(--r6);padding:3px 9px;cursor:pointer;
  font-size:var(--f1);font-weight:600;color:var(--i3);white-space:nowrap;line-height:1.5;
  transition:background var(--tr-14) ease,color var(--tr-14) ease,transform var(--tr-14) var(--eo)}
:where(#v2-app) .v2-tri.mini button{padding:3px 6px}
:where(#v2-app) .v2-tri button:active{transform:scale(.94)}
@media (hover:hover){ :where(#v2-app) .v2-tri button:hover{color:var(--i1);background:var(--n0)} }
:where(#v2-app) .v2-tri button.on{background:var(--n0);color:var(--i1);
  box-shadow:0 1px 2px rgba(14,28,30,.10)}
:where(#v2-app) .v2-tri button.on.si{color:var(--t700)}
:where(#v2-app) .v2-tri button.on.no{color:var(--mal)}
/* el de declarar de a muchas no tiene estado: no es «como esta», es «poneles» */
.v2-obj-bulk{display:inline-flex;align-items:center;gap:7px;flex-shrink:0}
.v2-obj-bl{font-size:var(--f1);font-weight:600;color:var(--i3);white-space:nowrap}
:where(#v2-app) .v2-tri.bulk{background:none;border:none;padding:0;gap:4px}
:where(#v2-app) .v2-tri.bulk button{border:1px solid var(--n200);background:var(--n0);
  border-radius:var(--r6);color:var(--i3)}
@media (hover:hover){ :where(#v2-app) .v2-tri.bulk button:hover{border-color:var(--t400);
  color:var(--t700);background:var(--n0)} }

/* LAS SECCIONES. Con el pais entero mas localidades, canales y cadenas esto no
   entra en una pantalla desplegado: cada seccion se pliega y su titulo dice lo
   que hay adentro sin abrirla. Plegar NO repinta —es una clase sobre el nodo
   que ya esta—, asi el buscador no pierde el foco. */
.v2-obj-s{border:1px solid var(--n100);border-radius:var(--r14);background:var(--n0)}
:where(#v2-app) .v2-obj-sh{display:flex;align-items:center;gap:9px;width:100%;background:none;
  border:none;padding:11px 13px;cursor:pointer;text-align:left;border-radius:var(--r14);
  transition:background var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-obj-sh:hover{background:var(--n25)} }
.v2-obj-sh>svg{flex-shrink:0;color:var(--n400);transition:transform .22s var(--eo)}
.v2-obj-s.abierto .v2-obj-sh>svg{transform:rotate(90deg)}
.v2-obj-sh .t{font-size:var(--f2);font-weight:700;color:var(--i1);letter-spacing:-.2px}
.v2-obj-sh>i{font-style:normal;font-size:var(--f1);font-weight:500;color:var(--i3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-obj-sh .sp{flex:1;min-width:6px}
.v2-obj-tag{flex-shrink:0;font-size:var(--f1);font-weight:700;padding:1px 8px;border-radius:var(--r6);
  background:var(--n50);border:1px solid var(--n200);color:var(--i2);margin-left:5px}
.v2-obj-tag.pend{background:var(--op-bg);border-color:var(--op-bd);color:var(--op-t)}
.v2-obj-sw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s var(--eo)}
.v2-obj-s.abierto .v2-obj-sw{grid-template-rows:1fr}
/* el padding va en un envoltorio propio: puesto sobre el que se colapsa, deja
   un sobrante de catorce pixeles visible con la seccion cerrada */
.v2-obj-si{overflow:hidden;min-height:0}
.v2-obj-sb{padding:0 13px 13px}

.v2-obj-nota{font-size:var(--f1);font-weight:450;color:var(--i2);line-height:1.55;margin:0 0 11px}
.v2-obj-nota b{font-weight:650;color:var(--i1)}
.v2-obj-cab{font-size:var(--f1);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--n400);margin:16px 0 4px}

/* LA GRILLA DEL PAIS. Agrupada por region porque veinticuatro casillas en una
   grilla plana no se recorren: se barren. */
.v2-obj-pais{display:flex;align-items:center;justify-content:flex-end;
  padding-bottom:11px;border-bottom:1px solid var(--n100)}
.v2-obj-reg{margin-top:13px}
.v2-obj-reg-h{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.v2-obj-reg-h>span:first-child{font-size:var(--f1);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--n400)}
.v2-obj-reg-h .sp{flex:1;min-width:6px}
/* MÁS DENSA A PROPÓSITO. Con 196px entraban cinco columnas a 1120px y
   veinticuatro provincias se sentían una pared; a 160px entran siete u ocho y
   el mapa se lee como mapa, no como formulario. */
.v2-obj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:5px}
.v2-obj-c{display:flex;align-items:center;gap:6px;min-width:0;padding:4px 5px 4px 8px;
  border:1px solid var(--n100);border-radius:var(--r8);background:var(--n0);
  transition:border-color var(--tr-14) ease,background-color var(--tr-14) ease}
.v2-obj-c.si{border-color:var(--t200);background:var(--t50)}
.v2-obj-c.no{border-color:var(--mal-bd);background:var(--mal-bg)}
.v2-obj-c-n{flex:1;min-width:0;font-size:var(--f1);font-weight:600;color:var(--i1);line-height:1.4}
/* el nombre largo ENVUELVE, no se trunca: «Ciudad de Bueno…» no es una
   provincia, y la casilla es lo unico que la nombra */
.v2-obj-c .v2-obj-c-n{overflow-wrap:anywhere}
.v2-obj-c-n i{font-style:normal;font-weight:600;color:var(--n400)}
.v2-obj-c.no .v2-obj-c-n{color:var(--i2)}

/* LAS FILAS: canales, cadenas y las localidades ya declaradas o del dato */
.v2-obj-f{display:flex;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--n50)}
.v2-obj-f:last-child{border-bottom:none}
.v2-obj-f .v2-obj-c-n{font-weight:500}
.v2-obj-f.nueva .v2-obj-c-n i{color:var(--op-t)}
/* que relacion tiene esta localidad con su provincia: hereda, o la afina */
.v2-obj-her{display:block;font-style:normal;font-size:var(--f1);font-weight:500;
  color:var(--i3);margin-top:2px}
.v2-obj-her.afina{color:var(--op-t)}

/* EL BUSCADOR DE LOCALIDADES. Son miles: una lista completa no es informacion,
   es una pared. */
.v2-obj-bus{display:flex;align-items:center;gap:8px;background:var(--n0);
  border:1px solid var(--ctl-bd,var(--bd));border-radius:var(--r8);padding:0 11px;
  transition:var(--ctl-fx,border-color var(--tr-base) ease)}
.v2-obj-bus>svg{flex-shrink:0;color:var(--n400)}
:where(#v2-app) .v2-obj-bus input{flex:1;min-width:0;background:none;border:none;outline:none;
  padding:9px 0;font-size:var(--f2);font-weight:500;color:var(--i1);box-shadow:none}
:where(#v2-app) .v2-obj-bus input::placeholder{color:var(--ctl-ph,var(--n400));font-weight:450}
.v2-obj-bus:focus-within{border-color:var(--t500);box-shadow:0 0 0 3px rgba(19,193,172,.12)}
.v2-obj-sug{display:none}
.v2-obj-sug.on{display:block;margin-top:9px;padding:2px 11px;background:var(--n25);
  border:1px solid var(--n100);border-radius:var(--r8)}
.v2-obj-sug-v{padding:9px 0;font-size:var(--f1);font-weight:450;color:var(--i3)}
:where(#v2-app) .v2-obj-mas{margin-top:10px;background:none;border:1px solid var(--n200);
  border-radius:var(--r8);padding:4px 10px;cursor:pointer;font-size:var(--f1);font-weight:600;
  color:var(--i2);transition:border-color var(--tr-14) ease,color var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-obj-mas:hover{border-color:var(--t400);color:var(--t700)} }

@media (prefers-reduced-motion:reduce){
  .v2-obj-sw,.v2-obj-sh>svg,.v2-obj-c,:where(#v2-app) .v2-tri button{transition:none}
}

/* ── WZ·5 · QUIEN EJECUTA ───────────────────────────────────────────────── */
/* El paso es TRES bloques y se leen en ese orden: cuánto falta cubrir, tu
   gente, y los huecos. La grilla de una fila por corte que había antes hacía
   escribir el mismo nombre y el mismo correo una vez por corte. */

/* [hidden] tiene que ganarle a los `display` de abajo, o el campo «otro» y el
   filtro de búsqueda se quedan visibles con las reglas puestas. */
:where(#v2-app) .v2-pn-alt [hidden],
:where(#v2-app) .v2-pn-pick [hidden]{display:none!important}

/* — el hueco, dibujado — */
.v2-pn-cob{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--op-bg);border:1px solid var(--op-bd);border-radius:var(--r14);
  padding:12px 15px;margin:0 0 16px}
.v2-pn-cob.full{background:var(--t50);border-color:var(--t200)}
.v2-pn-cob-t{font-size:var(--f2);font-weight:450;color:var(--i2);line-height:1.5}
.v2-pn-cob-t b{font-weight:700;color:var(--i1)}
.v2-pn-tira{display:flex;flex-wrap:wrap;gap:3px;align-items:center;flex:1;min-width:150px;
  justify-content:flex-end}
.v2-pn-tira i{width:9px;height:16px;border-radius:2px;display:block;
  background:var(--n0);border:1px solid var(--op-bd);
  transition:background .18s var(--eo),border-color .18s var(--eo)}
.v2-pn-tira i.caso{border-color:var(--op-t)}
.v2-pn-tira i.on{background:var(--t600);border-color:var(--t600)}
.v2-pn-tira em{font-size:var(--f1);font-weight:650;color:var(--i3);font-style:normal;margin-left:3px}

/* — rótulo de sección — */
.v2-pn-rot{display:flex;align-items:center;gap:7px;font-size:var(--f1);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--i3);margin:22px 0 10px}
.v2-pn-rot i{font-style:normal;background:var(--n50);border-radius:var(--rpill);
  padding:1px 7px;letter-spacing:0;color:var(--i2)}
.v2-pn-rot.ok{color:var(--t700)}
.v2-pn-rot.av{color:var(--op-t)}
.v2-pn-rot.av i{background:var(--op-bg);color:var(--op-t)}

/* — controles: uno solo, y las variantes son el ancho — */
:where(#v2-app) .v2-pn-i{height:34px;padding:0 10px;font:inherit;font-size:var(--f2);
  -webkit-appearance:none;appearance:none;
  font-weight:500;color:var(--i1);background-color:var(--n0);border:1px solid var(--ctl-bd,var(--bd));
  border-radius:var(--r10);min-width:0;box-shadow:var(--ctl-sh);
  transition:var(--ctl-fx,border-color var(--tr-base) ease,box-shadow var(--tr-base) ease)}
:where(#v2-app) .v2-pn-i:focus{outline:none;border-color:var(--t600);box-shadow:var(--ring)}
:where(#v2-app) .v2-pn-i::placeholder{color:var(--ctl-ph,var(--i3));font-weight:450}
/* EL SELECT, CON SU FLECHA. Sin sumarlo al grupo de abajo -«25209»- este
   traía la del sistema operativo, que en Windows es literalmente la de 1998:
   era el ejemplo de manual del diagnóstico «parece Windows 98». */
:where(#v2-app) select.v2-pn-i{cursor:pointer;padding-right:31px;
  background-image:var(--chev);background-repeat:no-repeat;background-position:right 11px center}
@media (hover:hover){ :where(#v2-app) select.v2-pn-i:hover{border-color:var(--ctl-bd-h,var(--n300))} }
:where(#v2-app) .v2-pn-i[disabled]{background-color:var(--n50);color:var(--i3);cursor:not-allowed;
  box-shadow:none;background-image:none}

/* — crear: una línea, y Enter alcanza — */
.v2-pn-alt{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  background:var(--n25);border:1px dashed var(--n300);border-radius:var(--r14);padding:11px 12px}
.v2-pn-alt .nom{flex:2 1 190px}
.v2-pn-alt .tp{flex:0 1 168px}
.v2-pn-alt .ot{flex:1 1 130px}
.v2-pn-alt .ml{flex:2 1 190px}
:where(#v2-app) .v2-pn-add{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 15px;
  font:inherit;font-size:var(--f2);font-weight:650;color:#fff;background:var(--t700);
  border:1px solid var(--t700);border-radius:var(--r10);cursor:pointer;flex-shrink:0;
  transition:transform var(--tr-16) var(--eo),background var(--tr-16) ease}
@media (hover:hover){ :where(#v2-app) .v2-pn-add:hover{background:var(--t800)} }
:where(#v2-app) .v2-pn-add:active{transform:scale(.97)}

/* — traer lo que ya está cargado en Configuración — */
.v2-pn-tr{margin-top:11px;background:var(--t50);border:1px solid var(--t200);
  border-radius:var(--r14);padding:12px 14px}
.v2-pn-tr-t{font-size:var(--f2);font-weight:450;color:var(--i2);line-height:1.5}
.v2-pn-tr-t b{font-weight:700;color:var(--i1)}
.v2-pn-tr-c{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
:where(#v2-app) .v2-pn-tr-b{display:inline-flex;align-items:center;gap:5px;height:29px;padding:0 11px;
  font:inherit;font-size:var(--f2);font-weight:600;color:var(--t800);background:var(--n0);
  border:1px solid var(--t200);border-radius:var(--rpill);cursor:pointer;
  transition:transform var(--tr-16) var(--eo),border-color var(--tr-16) ease,background var(--tr-16) ease}
.v2-pn-tr-b i{font-style:normal;font-weight:500;color:var(--i3)}
@media (hover:hover){ :where(#v2-app) .v2-pn-tr-b:hover{border-color:var(--t500);background:var(--t50)} }
:where(#v2-app) .v2-pn-tr-b:active{transform:scale(.97)}
:where(#v2-app) .v2-pn-tr-b.todos{background:var(--t700);border-color:var(--t700);color:#fff}
@media (hover:hover){ :where(#v2-app) .v2-pn-tr-b.todos:hover{background:var(--t800)} }

/* — la tarjeta del partner — */
.v2-pn-c{background:var(--n0);border:1px solid var(--n100);border-radius:var(--r14);
  box-shadow:var(--sh);margin-bottom:10px;overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease}
.v2-pn-c.abierto{border-color:var(--t300);box-shadow:var(--sh2)}
.v2-pn-c.arm{border-color:var(--mal-bd);background:var(--mal-bg)}
.v2-pn-c-h{display:flex;gap:8px;align-items:center;padding:11px 12px;flex-wrap:wrap}
.v2-pn-av{width:28px;height:28px;border-radius:50%;flex-shrink:0;background:var(--t100);
  color:var(--t800);display:flex;align-items:center;justify-content:center;
  font-size:var(--f2);font-weight:700}
.v2-pn-c-h .nm{flex:2 1 160px;font-weight:650}
.v2-pn-c-h .tp{flex:0 1 168px}
.v2-pn-c-h .ml{flex:2 1 180px}
:where(#v2-app) .v2-pn-x{display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:30px;min-width:30px;padding:0 8px;font:inherit;font-size:var(--f2);font-weight:600;
  color:var(--i3);background:none;border:1px solid transparent;border-radius:var(--r10);
  cursor:pointer;flex-shrink:0;transition:transform var(--tr-16) var(--eo),color var(--tr-16) ease,background var(--tr-16) ease}
@media (hover:hover){ :where(#v2-app) .v2-pn-x:hover{color:var(--mal);background:var(--mal-bg)} }
:where(#v2-app) .v2-pn-x:active{transform:scale(.94)}
:where(#v2-app) .v2-pn-x.arm{background:var(--mal);border-color:var(--mal);color:#fff;padding:0 12px}
:where(#v2-app) .v2-pn-x.no{color:var(--i2)}

.v2-pn-c-b{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding:0 12px 11px;margin-top:-2px}
:where(#v2-app) .v2-pn-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 6px 0 10px;
  font:inherit;font-size:var(--f2);font-weight:600;color:var(--t800);background:var(--t50);
  border:1px solid var(--t200);border-radius:var(--rpill);cursor:pointer;
  transition:transform var(--tr-16) var(--eo),background var(--tr-16) ease,border-color var(--tr-16) ease}
.v2-pn-chip i{font-style:normal;font-weight:500;color:var(--t700);opacity:.8}
.v2-pn-chip i.fuera{color:var(--i3);font-size:var(--f1)}
.v2-pn-chip .x{display:flex;color:var(--t700);opacity:.55}
@media (hover:hover){ :where(#v2-app) .v2-pn-chip:hover{background:var(--mal-bg);border-color:var(--mal-bd);color:var(--mal)}
  .v2-pn-chip:hover i,.v2-pn-chip:hover .x{color:var(--mal);opacity:1} }
:where(#v2-app) .v2-pn-chip:active{transform:scale(.96)}
.v2-pn-vac{font-size:var(--f2);font-weight:450;color:var(--i3);line-height:1.5;flex:1 1 200px}
:where(#v2-app) .v2-pn-mas{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;
  font:inherit;font-size:var(--f2);font-weight:650;color:var(--t700);background:var(--n0);
  border:1px dashed var(--t300);border-radius:var(--rpill);cursor:pointer;margin-left:auto;
  transition:transform var(--tr-16) var(--eo),background var(--tr-16) ease}
@media (hover:hover){ :where(#v2-app) .v2-pn-mas:hover{background:var(--t50)} }
:where(#v2-app) .v2-pn-mas:active{transform:scale(.97)}
:where(#v2-app) .v2-pn-mas.on{background:var(--t700);border-color:var(--t700);border-style:solid;color:#fff}
.v2-pn-c-f{padding:0 12px 11px;font-size:var(--f1);font-weight:500;color:var(--i3)}
.v2-pn-c-f b{font-weight:700;color:var(--i2)}
/* Lo que tiene asignado DE RESPONSABILIDAD -distinto de lo que cubre DE
   TERRITORIO, que son las chips de abajo-. Fondo teal clarito para que se lea
   como "esto ya está resuelto", no como una alerta. */
.v2-pn-c-resp{margin:0 12px 9px;padding:7px 11px;background:var(--t50);border-radius:var(--r8);
  font-size:var(--f1);font-weight:500;color:var(--t800);line-height:1.5}
.v2-pn-c-resp b{font-weight:700;margin-right:5px}

/* — el selector de cortes — */
.v2-pn-pick{border-top:1px solid var(--n100);background:var(--n25);padding:11px 12px}
:where(#v2-app) .v2-pn-q{width:100%;height:32px;padding:0 11px;font:inherit;font-size:var(--f2);
  font-weight:500;color:var(--i1);background:var(--n0);border:1px solid var(--bd);
  border-radius:var(--r10);margin-bottom:9px}
:where(#v2-app) .v2-pn-q:focus{outline:none;border-color:var(--t500);box-shadow:0 0 0 3px rgba(19,193,172,.14)}
.v2-pn-pick-b{max-height:270px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;
  padding-right:3px}
.v2-pn-dim{display:flex;align-items:center;gap:8px;margin:9px 0 3px}
.v2-pn-dim:first-child{margin-top:0}
.v2-pn-dim b{font-size:var(--f1);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--i3)}
.v2-pn-dim span{font-size:var(--f1);font-weight:600;color:var(--n400)}
:where(#v2-app) .v2-pn-dim button{margin-left:auto;background:none;border:none;padding:0;cursor:pointer;
  font:inherit;font-size:var(--f1);font-weight:700;color:var(--t700)}
@media (hover:hover){ :where(#v2-app) .v2-pn-dim button:hover{text-decoration:underline} }

:where(#v2-app) .v2-pn-op{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  min-height:32px;padding:5px 10px;font:inherit;font-size:var(--f2);font-weight:500;color:var(--i1);
  background:var(--n0);border:1px solid var(--n100);border-radius:var(--r10);cursor:pointer;
  transition:transform var(--tr-16) var(--eo),border-color var(--tr-16) ease,background var(--tr-16) ease}
@media (hover:hover){ :where(#v2-app) .v2-pn-op:hover{border-color:var(--t300);background:var(--t50)} }
:where(#v2-app) .v2-pn-op:active{transform:scale(.995)}
.v2-pn-op .mk{width:16px;height:16px;flex-shrink:0;border-radius:var(--r6);border:1.5px solid var(--bd);
  background:var(--n0);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background var(--tr-16) ease,border-color var(--tr-16) ease}
.v2-pn-op .v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-pn-op i{font-style:normal;font-size:var(--f1);font-weight:600;color:var(--i3);flex-shrink:0}
.v2-pn-op em{font-style:normal;font-size:var(--f1);font-weight:600;color:var(--i3);flex-shrink:0;
  max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(#v2-app) .v2-pn-op.on{border-color:var(--t500);background:var(--t50);font-weight:650}
.v2-pn-op.on .mk{background:var(--t700);border-color:var(--t700)}
:where(#v2-app) .v2-pn-op.aj{background:var(--n50);color:var(--i2)}
.v2-pn-op.aj .mk{border-style:dashed}

/* — los huecos — */
.v2-pn-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 11px;
  background:var(--n0);border:1px solid var(--n100);border-radius:var(--r10);margin-bottom:5px}
.v2-pn-h-n{flex:1 1 170px;min-width:0;font-size:var(--f2);font-weight:650;color:var(--i1);
  display:flex;flex-direction:column;gap:1px}
.v2-pn-h-n em{font-style:normal;font-size:var(--f1);font-weight:600;color:var(--i3);
  letter-spacing:.06em;text-transform:uppercase}
.v2-pn-h>i{font-style:normal;font-size:var(--f1);font-weight:600;color:var(--i3);flex-shrink:0}
.v2-pn-h .sel{flex:0 1 210px}

/* ── WZ·6 · TU VARA, Y EL CIERRE ────────────────────────────────────────── */

/* LOS DOS DIALES. Cada umbral es una pregunta grande, una barra que se
   arrastra, y debajo LAS COSAS QUE SE LLEVA PUESTAS, ordenadas por tamaño y
   sobre un mismo eje: el ancho de una barra es su magnitud contra el máximo del
   eje, y la línea de corte se planta en `valor/eje`. Por eso se entiende
   moviéndolo: la línea barre la lista y lo que queda a la izquierda se apaga. */
.v2-varas{display:flex;flex-direction:column;gap:14px}
.v2-vara{background:var(--n0);border:1px solid var(--n100);border-radius:var(--r14);
  padding:20px 22px 18px}
.v2-vara-q{font-size:var(--f4);font-weight:450;letter-spacing:-.3px;line-height:1.4;color:var(--i2)}
.v2-vara-q b{font-weight:700;color:var(--i1)}
.v2-vara-q .v2-vara-v{display:inline-block;min-width:1.2em;text-align:right;color:var(--t700)}
.v2-vara-a{font-size:var(--f2);font-weight:450;line-height:1.6;color:var(--i3);
  margin:9px 0 0;max-width:74ch}

/* La barra. El reset con `#id` del bloque le gana a cualquier clase, así que
   `appearance:none` va acá y no se discute con nadie. */
.v2-vara{--v2-th:20px}
.v2-vara-r{-webkit-appearance:none;appearance:none;display:block;height:26px;
  width:calc(100% + var(--v2-th));margin:16px 0 0 calc(var(--v2-th) / -2);
  background:none;cursor:pointer}
.v2-vara-r:focus{outline:none}
.v2-vara-r::-webkit-slider-runnable-track{height:6px;border-radius:var(--r6);background:var(--n100)}
.v2-vara-r::-moz-range-track{height:6px;border-radius:var(--r6);background:var(--n100)}
.v2-vara-r::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:var(--v2-th);height:var(--v2-th);
  margin-top:-7px;border-radius:50%;background:var(--t700);border:3px solid var(--n0);
  box-shadow:var(--sh-up);transition:transform var(--tr-16) var(--eo)}
.v2-vara-r::-moz-range-thumb{width:var(--v2-th);height:var(--v2-th);border-radius:50%;background:var(--t700);
  border:3px solid var(--n0);box-shadow:var(--sh-up)}
.v2-vara-r:active::-webkit-slider-thumb{transform:scale(1.12)}
.v2-vara-r:focus-visible::-webkit-slider-thumb{box-shadow:var(--ring)}

/* La lista, con la línea de corte encima. */
.v2-vara-enc{display:flex;justify-content:flex-end;margin-top:15px;
  font-size:var(--f1);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--n400)}
.v2-vara-lw{position:relative;margin-top:6px}
.v2-vara-cut{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--t500);
  transform:translateX(-.5px);pointer-events:none;z-index:2;
  transition:left .12s var(--eo)}
.v2-vara-cut::before{content:'';position:absolute;left:-3px;top:0;width:7px;height:7px;
  border-radius:50%;background:var(--t500)}
.v2-vara-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  max-height:238px;overflow-y:auto}
.v2-vara-f{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px;
  grid-template-areas:'t n' 'b b';gap:2px 12px;padding:7px 0 9px;
  border-bottom:1px solid var(--n50);
  transition:opacity var(--tr-16) var(--eo),filter var(--tr-16) var(--eo)}
.v2-vara-f:last-child{border-bottom:none}
.v2-vara-f-t{grid-area:t;font-size:var(--f2);font-weight:450;color:var(--i2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-vara-f-t b{font-weight:650;color:var(--i1)}
.v2-vara-f-n{grid-area:n;text-align:right;font-size:var(--f2);font-weight:700;color:var(--i1)}
.v2-vara-f-b{grid-area:b;display:block;height:5px;border-radius:var(--r6);background:var(--n50);
  overflow:hidden}
.v2-vara-f-b i{display:block;height:100%;border-radius:var(--r6);background:var(--t400);
  transition:background var(--tr-16) ease}
/* LO QUE QUEDA AFUERA NO DESAPARECE: se apaga. Se sigue midiendo, y decirlo con
   un vacío sería mentir. */
.v2-vara-f.fuera{opacity:.34}
.v2-vara-f.fuera .v2-vara-f-b i{background:var(--n300)}
.v2-vara-f.fuera .v2-vara-f-t{text-decoration:line-through;text-decoration-color:var(--n300)}
.v2-vara-cap{font-size:var(--f2);font-weight:450;line-height:1.55;color:var(--i3);
  margin-top:12px;padding-top:11px;border-top:1px solid var(--n100)}
.v2-vara-cap b{font-weight:700;color:var(--i1)}
.v2-vara-cap.vacio{margin-top:16px;padding-top:0;border-top:none;max-width:70ch}

/* LA PREVISUALIZACIÓN, Y EL BOTÓN QUE LA CONFIRMA. Ámbar mientras se prueba,
   porque todavía no pasó nada: teal diría que ya está declarado. */
.v2-vara-cf{display:none}
.v2-vara-cf.on{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--op-bg);border:1px solid var(--op-bd);border-radius:var(--r14);
  padding:13px 16px;animation:v2varaCf .22s var(--eo)}
@keyframes v2varaCf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.v2-vara-cf-t{flex:1;min-width:260px;font-size:var(--f2);font-weight:450;line-height:1.55;
  color:var(--i2)}
.v2-vara-cf-t b{font-weight:700;color:var(--i1)}
.v2-vara-cf-t i{font-style:normal;font-weight:600;color:var(--op-t)}
.v2-vara-fija{display:flex;align-items:flex-start;gap:9px;margin:2px 0 0;
  font-size:var(--f2);font-weight:450;line-height:1.55;color:var(--i3);max-width:82ch}
.v2-vara-fija svg{flex-shrink:0;margin-top:3px;color:var(--n400)}
.v2-vara-fija b{font-weight:700;color:var(--i2)}
@keyframes v2fin{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.v2-wz-fin-b{margin-top:26px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.v2-wz-fin-b .v2-ib{height:40px;padding:0 18px}

/* LA TRANSICIÓN. Tapa el wizard, dice qué cambió, y se va. Las líneas entran
   escalonadas de a 65ms: es lo suficiente para leerse en orden y no tanto como
   para que se sienta una espera. */
.v2-wz-sal{position:fixed;inset:0;z-index:10005;background:var(--n25);
  display:flex;align-items:center;justify-content:center;padding:30px;cursor:pointer;
  opacity:0;transition:opacity .2s ease}
.v2-wz-sal.on{opacity:1}
.v2-wz-sal-c{width:100%;max-width:560px;background:var(--n0);border:1px solid var(--n100);
  border-radius:var(--r14);box-shadow:var(--sh-over);padding:26px 28px 22px;
  transform:scale(.98);transition:transform .26s var(--eo)}
.v2-wz-sal.on .v2-wz-sal-c{transform:none}
.v2-wz-sal-h{font-size:var(--f5);font-weight:700;letter-spacing:-.7px;color:var(--i1);
  margin-bottom:18px}
.v2-wz-sal-l{display:grid;grid-template-columns:20px minmax(0,1fr);gap:11px;align-items:start;
  padding:8px 0;opacity:0;animation:v2salL .34s var(--eo) forwards}
@keyframes v2salL{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.v2-wz-sal-p{display:flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:var(--op-bg);color:var(--op-t);margin-top:1px}
.v2-wz-sal-l.ok .v2-wz-sal-p{background:var(--t50);color:var(--t700)}
.v2-wz-sal-l b{display:block;font-size:var(--f2);font-weight:700;color:var(--i1);line-height:1.45}
.v2-wz-sal-l i{display:block;font-style:normal;font-size:var(--f2);font-weight:450;
  color:var(--i3);line-height:1.5;margin-top:1px}
.v2-wz-sal-n{margin-top:16px;padding-top:14px;border-top:1px solid var(--n100);
  font-size:var(--f1);font-weight:500;color:var(--i3);
  opacity:0;animation:v2salL .34s var(--eo) .5s forwards}

/* LA CONFIRMACIÓN DE LO DESTRUCTIVO. Va al tope de todo porque se dispara
   desde adentro del wizard, que ya está en 10002. */
.v2-wz-conf{position:fixed;inset:0;z-index:10008;background:rgba(14,28,30,.42);
  display:flex;align-items:center;justify-content:center;padding:26px;
  opacity:0;transition:opacity .18s ease}
.v2-wz-conf.on{opacity:1}
.v2-wz-conf-c{width:100%;max-width:452px;background:var(--n0);border-radius:var(--r14);
  box-shadow:var(--sh-over);padding:24px 26px 20px;text-align:left;
  transform:scale(.96);transition:transform .2s var(--eo)}
.v2-wz-conf.on .v2-wz-conf-c{transform:none}
.v2-wz-conf-i{width:38px;height:38px;border-radius:50%;background:var(--mal-bg);color:var(--mal);
  display:flex;align-items:center;justify-content:center;margin-bottom:15px}
.v2-wz-conf-c h3{font-size:var(--f4);font-weight:700;letter-spacing:-.4px;line-height:1.3;
  color:var(--i1);margin:0}
.v2-wz-conf-d{font-size:var(--f2);font-weight:450;line-height:1.6;color:var(--i2);margin-top:10px}
.v2-wz-conf-d b{font-weight:700;color:var(--i1)}
.v2-wz-conf-b{display:flex;gap:9px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
/* el único botón rojo del v2, y sólo para lo que no se puede deshacer */
.v2-ib.mal{background:var(--mal);border-color:var(--mal);color:#fff}
@media (hover:hover) and (pointer:fine){
  .v2-ib.mal:hover{background:var(--mal-d);border-color:var(--mal-d);color:#fff;
    box-shadow:0 4px 14px rgba(184,38,43,.26)} }
@media (prefers-reduced-motion:reduce){.v2-wz,
.v2-vara-cut,
.v2-vara-cf.on,
.v2-wz-sal,
.v2-wz-sal-c,
.v2-wz-sal-l,
.v2-wz-sal-n,
.v2-wz-conf,
.v2-wz-conf-c{transition:none;animation:none}
  .v2-wz-sal-l,.v2-wz-sal-n{opacity:1}
}

/* ══════════════════════════════════════════════════════════════════════════
   «TUS REGLAS» EN CINCO PASOS (`_V2_WZ5`), CON STEPPER. Reemplaza al riel y al
   «Paso N de M» de arriba. Reusa `.v2-wz-ops`/`.v2-wz-op*` (la grilla de
   opciones grandes, existía sin usar) y `.v2-fr-step`/`.v2-fr-i`/
   `.v2-fr-stepb` (el stepper) tal cual estaban.
   ══════════════════════════════════════════════════════════════════════════ */
.v2-tu-nav{display:flex;gap:4px;flex-wrap:wrap}
:where(#v2-app) .v2-tu-back{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--n25);
  border:1px solid var(--n100);color:var(--i2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background var(--tr-14) ease,color var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-tu-back:hover{background:var(--n100);color:var(--i1)} }
.v2-tu-main{background:var(--n25)}
.v2-ctl-card{border-radius:var(--r14);transition:border-color var(--tr-16) var(--eo),box-shadow var(--tr-16) var(--eo)}
.v2-ctl-card:not(.collapsed){background:var(--n0);border:1px solid var(--n100);
  padding:20px 24px 22px;margin-bottom:14px}
.v2-ctl-card:not(.collapsed).on{border-color:var(--t300);box-shadow:0 0 0 3px var(--t50)}
/* ══ REPLEGADO ES UNA TARJETA, NO UN RENGLON DE TABLA ══
   Era `padding:13px 2px` con un filete abajo: tres filas pegadas, sin borde,
   sin fondo y sin nada que dijera que cada una abre la suya. Ahora cada una
   tiene caja, aire y su icono; el hover levanta el borde y el `:active` la
   hunde apenas, que es lo que hace que se sienta pulsable antes de pulsarla. */
.v2-ctl-card.collapsed{display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--n0);border:1px solid var(--n100);
  transition:border-color var(--tr-16) var(--eo),box-shadow var(--tr-16) var(--eo),
             transform var(--tr-14) var(--eo)}
.v2-ctl-card.collapsed.on{border-color:var(--t200)}
@media (hover:hover){
  .v2-ctl-card.collapsed:hover{border-color:var(--n300);
    box-shadow:0 2px 10px rgba(14,28,30,.05)}
}
.v2-ctl-card.collapsed:active{transform:scale(.995)}
/* EL ICONO ES EL HILO con la tarjeta de variable del paso de arriba: el mismo
   glifo, la misma caja. Sin el, nada decia de cual de las tres salio este
   parametro. */
.v2-ctl-row-ic{flex:0 0 auto;width:30px;height:30px;border-radius:var(--r8);
  display:flex;align-items:center;justify-content:center;
  background:var(--n50);color:var(--i3)}
.v2-ctl-card.on .v2-ctl-row-ic{background:var(--t100);color:var(--t800)}
/* el chevron adentro de un boton redondo: es lo que hace obvio que despliega */
.v2-ctl-row-ch{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--i3);
  background:var(--n50);
  transition:background var(--tr-14) ease,color var(--tr-14) ease}
@media (hover:hover){
  .v2-ctl-card.collapsed:hover .v2-ctl-row-ch{background:var(--t50);color:var(--t700)}
}
.v2-ctl-row-ch.abierta{background:var(--t50);color:var(--t700)}
:where(#v2-app) .v2-ctl-row-b{flex:1;min-width:0;display:flex;align-items:center;gap:10px;
  background:none;border:none;padding:0;cursor:pointer;font:inherit;text-align:left;color:inherit}
.v2-ctl-row-b.tit{flex:0 0 auto;gap:7px;color:var(--i2)}
.v2-ctl-row-b.tit svg{flex-shrink:0}
/* la frase declarada es larga: la columna crece y se corta con puntos
   suspensivos en vez de empujar al chevron fuera de la tarjeta */
.v2-ctl-row-t{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.v2-ctl-row-t b{font-size:var(--f2);font-weight:700;color:var(--i1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-ctl-row-t i{font-style:normal;font-size:var(--f1);font-weight:450;line-height:1.45;
  color:var(--i3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-ctl-card.collapsed:not(.on) .v2-ctl-row-t i{color:var(--i3)}
.v2-ctl-row-r{flex:0 0 auto;min-width:0;display:flex;align-items:center;justify-content:flex-end;
  gap:7px;font-size:var(--f2);font-weight:450;color:var(--i2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.v2-ctl-row-r svg{flex-shrink:0}
.v2-ctl-row-r svg:last-child{color:var(--i3)}
.v2-ctl-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--n50)}
.v2-ctl-top b{font-size:var(--f3);font-weight:700;color:var(--i1)}
:where(#v2-app) .v2-ctl-tog{flex-shrink:0;font:inherit;font-size:var(--f1);font-weight:650;
  color:var(--i3);background:var(--n50);border:1px solid var(--n200);border-radius:999px;
  padding:5px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  transition:background var(--tr-14) ease,color var(--tr-14) ease,border-color var(--tr-14) ease}
:where(#v2-app) .v2-ctl-tog.on{background:var(--t700);border-color:var(--t700);color:#fff}
/* `Activo` dejo de ser un boton (punto 8): como <span> no debe ofrecer
   ningun gesto -ni cursor ni hover-, o sigue prometiendo que se puede tocar. */
/* la rigurosidad al lado del titulo: empuja al cartel `Activo` contra el
   borde y se queda con el espacio del medio */
/* ══ TACHITO DE BORRADOR (punto 3) ══ arriba a la derecha de la tarjeta, sobre
   el pill de estado que dice «En borrador»: es la accion de ESE estado. Discreto
   hasta que se lo mira -es destructivo, no tiene que invitar- y rojo al pasar. */
:where(#v2-app) .v2-rgc-del{position:absolute;top:10px;right:10px;z-index:2;
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;border:1px solid transparent;background:transparent;
  color:var(--i3);cursor:pointer;opacity:.5;
  transition:opacity var(--tr-14) ease,color var(--tr-14) ease,background var(--tr-14) ease}
@media (hover:hover){
  :where(#v2-app) .v2-rgc:hover .v2-rgc-del{opacity:1}
  :where(#v2-app) .v2-rgc-del:hover{color:var(--danger,#dc2626);
    background:var(--danger-bg,#fef2f2);border-color:var(--danger-bd,#fecaca)}
}
:where(#v2-app) .v2-rgc-del:focus-visible{opacity:1;outline:2px solid var(--danger,#dc2626);
  outline-offset:2px}
/* la tarjeta en borrador deja lugar para el tacho: sin esto el pill de estado
   queda debajo del boton y no se puede leer */
:where(#v2-app) .v2-rgc.borrador .v2-rgc-b{padding-right:46px}
/* ══ PASO «QUE CAMPANAS» (punto 4) ══ */
/* una sola columna, mismo padding y mismo ancho maximo que los pasos con riel */
:where(#v2-app) .v2-wz5.solo{grid-template-columns:minmax(0,1fr)}
/* ══ REVISAR (puntos 4 y 5) ══ */
/* el tercer estado: ni listo ni roto — propuesto y sin confirmar */
:where(#v2-app) .v2-rev-d li.prop{color:var(--op-t,#8a5a00)}
:where(#v2-app) .v2-rev-d li.prop svg{color:var(--op-t,#8a5a00)}
/* LA ETIQUETA ES UNA PILDORA Y YA TENIA ESTILO (v2.css:5993). Lo unico que le
   faltaba era poder BAJAR A SU RENGLON cuando la tarjeta es angosta: con el
   nombre y la pildora peleando el mismo renglon de 230px, las dos se partian en
   tres lineas cada una. */
:where(#v2-app) .v2-rev-d li{flex-wrap:wrap;row-gap:4px}
/* ══ EL RENGLON DE UN CONTROL EN REVISAR ══ el nombre manda y empuja a las
   fichas contra el borde; si no entran, bajan a su renglon en vez de partir el
   nombre en tres lineas. */
:where(#v2-app) .v2-rev-li-n{flex:1 1 auto;min-width:0}
:where(#v2-app) .v2-rev-d li .v2-rev-u,
:where(#v2-app) .v2-rev-d li .v2-sev{flex:0 0 auto}
/* ══ PARA QUE CAMPANAS ══ */
:where(#v2-app) .v2-rev-camp{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;
  padding:14px 16px;background:var(--n0);border:1px solid var(--n100);
  border-radius:var(--r12)}
:where(#v2-app) .v2-rev-camp-t{display:inline-flex;align-items:center;gap:9px;
  font-size:var(--f2);color:var(--t700)}
:where(#v2-app) .v2-rev-camp-t b{font-weight:700;color:var(--i1)}
:where(#v2-app) .v2-rev-camp-n{font-size:var(--f1);color:var(--i3)}
:where(#v2-app) .v2-rev-camp.lista{gap:10px}
:where(#v2-app) .v2-rev-camp-c{display:inline-flex;align-items:center;gap:9px;
  padding:5px 12px 5px 5px;background:var(--n25);border:1px solid var(--n100);
  border-radius:999px;font-size:var(--f2);font-weight:650;color:var(--i1)}
:where(#v2-app) .v2-rev-camp-f{width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  background-size:cover;background-position:center}
/* ══ QUE PASA CUANDO UNA REGLA SALTA ══ no es un aviso: es el contrato. Va en
   el teal del producto y no en el ambar de los pendientes. */
:where(#v2-app) .v2-rev-pasa{display:flex;align-items:flex-start;gap:12px;
  margin:16px 0 4px;padding:15px 17px;background:var(--t50);
  border:1px solid var(--t100);border-radius:var(--r14);color:var(--i2)}
:where(#v2-app) .v2-rev-pasa>svg{flex:0 0 auto;color:var(--t700);margin-top:1px}
:where(#v2-app) .v2-rev-pasa b{display:block;font-size:var(--f2);font-weight:700;
  color:var(--i1);margin-bottom:3px}
:where(#v2-app) .v2-rev-pasa span{display:block;font-size:var(--f1);font-weight:450;
  line-height:1.55;color:var(--i2)}
:where(#v2-app) .v2-rev-d li>svg{flex:0 0 auto}
:where(#v2-app) .v2-rev-d li i{white-space:nowrap}
:where(#v2-app) .v2-rev-prop{display:flex;align-items:flex-start;gap:13px;
  background:var(--op-bg,#fff8e6);border:1px solid var(--op-bd,#f2d68a);
  border-radius:var(--r16,14px);padding:16px 18px;margin-bottom:16px;flex-wrap:wrap}
:where(#v2-app) .v2-rev-prop>svg{color:var(--op-t,#8a5a00);flex:0 0 auto;margin-top:1px}
:where(#v2-app) .v2-rev-prop>div{flex:1 1 320px;min-width:0;display:flex;
  flex-direction:column;gap:3px}
:where(#v2-app) .v2-rev-prop b{font-size:var(--f3);font-weight:700;color:var(--op-t,#8a5a00)}
:where(#v2-app) .v2-rev-prop span{font-size:var(--f1);color:var(--i2);line-height:1.45}
:where(#v2-app) .v2-rev-prop button{flex:0 0 auto;align-self:center}
/* la misma tarjeta que usan el cabezal y los otros pasos, para que el paso
   nuevo no se lea como una pantalla distinta */
:where(#v2-app) .v2-wz5-bl{background:var(--n0);border:1px solid var(--n100);
  border-radius:var(--r20);padding:22px;margin-top:14px}
/* ══ DOS NIVELES, Y ANTES ERAN UNO ══
   La decision de arriba -«toda tu base»- y cada campania estaban dibujadas
   igual: mismo alto, mismo borde, mismo tilde. O sea que la respuesta que dan
   casi todos se leia como el primer item de una lista de tres, y la pantalla
   entera era una pila de recuadros de 1350px con cuatro palabras adentro.
   Ahora la de arriba es una tarjeta con icono y bajada, y las campanias son
   una grilla de dos columnas con foto: dos formas distintas para dos
   decisiones distintas. */
:where(#v2-app) .v2-wzc-todas{display:flex;align-items:center;gap:14px;width:100%;
  padding:18px 20px;text-align:left;cursor:pointer;font:inherit;color:inherit;
  background:var(--n0);border:1.5px solid var(--n200);border-radius:var(--r14);
  transition:border-color var(--tr-16) var(--eo),background var(--tr-16) var(--eo),
             box-shadow var(--tr-16) var(--eo),transform var(--tr-14) var(--eo)}
:where(#v2-app) .v2-wzc-todas-i{flex:0 0 auto;width:42px;height:42px;border-radius:var(--r10);
  display:flex;align-items:center;justify-content:center;
  background:var(--n50);color:var(--i3);
  transition:background var(--tr-16) var(--eo),color var(--tr-16) var(--eo)}
:where(#v2-app) .v2-wzc-todas.on{border-color:var(--t600);background:var(--t50);
  box-shadow:0 0 0 3px var(--t100)}
:where(#v2-app) .v2-wzc-todas.on .v2-wzc-todas-i{background:var(--t100);color:var(--t800)}
@media (hover:hover){
  :where(#v2-app) .v2-wzc-todas:hover{border-color:var(--t400)}
  :where(#v2-app) .v2-wzc-i:hover{border-color:var(--t400);
    box-shadow:0 2px 12px rgba(14,28,30,.06)}
}
:where(#v2-app) .v2-wzc-todas:active,:where(#v2-app) .v2-wzc-i:active{transform:scale(.99)}

/* ══ EL BUSCADOR ══ no repinta el paso: ver `_v2WzCampRepintar`. */
:where(#v2-app) .v2-wzc-caja{margin-top:2px}
:where(#v2-app) .v2-wzc-bar{display:flex;align-items:center;gap:9px;margin:0 0 12px;
  padding:0 12px;height:42px;background:var(--n0);
  border:1px solid var(--n200);border-radius:var(--r10);
  transition:border-color var(--tr-16) var(--eo),box-shadow var(--tr-16) var(--eo)}
:where(#v2-app) .v2-wzc-bar:focus-within{border-color:var(--t400);box-shadow:0 0 0 3px var(--t50)}
:where(#v2-app) .v2-wzc-lupa{flex:0 0 auto;display:inline-flex;color:var(--i3)}
:where(#v2-app) .v2-wzc-q{flex:1 1 auto;min-width:0;height:100%;border:none;background:none;
  outline:none;font:inherit;font-size:var(--f2);color:var(--i1)}
:where(#v2-app) .v2-wzc-q::placeholder{color:var(--i3);font-weight:450}
:where(#v2-app) .v2-wzc-x-btn{flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--n50);border:none;color:var(--i3)}
@media (hover:hover){ :where(#v2-app) .v2-wzc-x-btn:hover{background:var(--n100);color:var(--i1)} }
:where(#v2-app) .v2-wzc-cta{flex:0 0 auto;font-size:var(--f1);font-weight:650;color:var(--i3);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ══ LA GRILLA ══ dos columnas: cuatro tarjetas entran sin scrollear, que es
   lo que hace que el paginador se vea. Una sola columna abajo de 720px. */
:where(#v2-app) .v2-wzc-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
:where(#v2-app) .v2-wzc-i{display:flex;align-items:center;gap:12px;width:100%;
  padding:11px 13px;text-align:left;cursor:pointer;font:inherit;color:inherit;
  background:var(--n0);border:1px solid var(--n100);border-radius:var(--r12);
  transition:border-color var(--tr-16) var(--eo),background var(--tr-16) var(--eo),
             box-shadow var(--tr-16) var(--eo),transform var(--tr-14) var(--eo)}
:where(#v2-app) .v2-wzc-i.on{border-color:var(--t600);background:var(--t50)}
/* LA FOTO ES EL ANCLA. El cliente reconoce su campania por la tapa antes que
   por el nombre -es la misma que ve en el Centro-, y donde no hay foto hay un
   degrade estable por nombre, no un placeholder gris: dos campanias distintas
   tienen que verse distintas aunque ninguna tenga imagen. */
:where(#v2-app) .v2-wzc-foto{flex:0 0 auto;width:44px;height:44px;border-radius:var(--r10);
  background-size:cover;background-position:center;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
:where(#v2-app) .v2-wzc-foto-l{font-size:var(--f3);font-weight:800;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.25)}
:where(#v2-app) .v2-wzc-x{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
:where(#v2-app) .v2-wzc-x b{font-size:var(--f2);font-weight:700;line-height:1.25;color:var(--i1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(#v2-app) .v2-wzc-x i,:where(#v2-app) .v2-wzc-x u{font-style:normal;text-decoration:none;
  font-size:var(--f1);color:var(--i3);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(#v2-app) .v2-wzc-todas .v2-wzc-x b{font-size:var(--f3);font-weight:700}
:where(#v2-app) .v2-wzc-todas .v2-wzc-x i{font-size:var(--f2)}
:where(#v2-app) .v2-wzc-e{flex:0 0 auto;font-size:var(--f0);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;
  color:var(--i3);background:var(--n50)}
:where(#v2-app) .v2-wzc-e.activa{color:var(--t700);background:var(--t50)}
:where(#v2-app) .v2-wzc-e.pausada{color:var(--op-t,#8a5a00);background:var(--op-bg,#fdf6e6)}
:where(#v2-app) .v2-wzc-ck{flex:0 0 22px;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--n200);background:var(--n0);color:transparent;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--tr-16) var(--eo),border-color var(--tr-16) var(--eo)}
:where(#v2-app) .v2-wzc-todas.on .v2-wzc-ck,:where(#v2-app) .v2-wzc-i.on .v2-wzc-ck{
  background:var(--t600);border-color:var(--t600);color:#fff}
:where(#v2-app) .v2-wzc-o{display:flex;align-items:center;gap:12px;margin:20px 0 14px;
  font-size:var(--f1);font-weight:650;color:var(--i3)}
:where(#v2-app) .v2-wzc-o::before,:where(#v2-app) .v2-wzc-o::after{content:"";
  flex:1;height:1px;background:var(--n100)}
:where(#v2-app) .v2-wzc-vac{margin:6px 0 0;font-size:var(--f2);color:var(--i3)}
:where(#v2-app) .v2-wzc-pg{display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:14px;font-size:var(--f1);font-weight:650;color:var(--i3);
  font-variant-numeric:tabular-nums}
:where(#v2-app) .v2-wzc-pb{width:32px;height:32px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:50%;border:1px solid var(--n200);background:var(--n0);
  color:var(--i2);cursor:pointer;transition:border-color var(--tr-14) ease,color var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-wzc-pb:not([disabled]):hover{
  border-color:var(--t400);color:var(--t700)} }
:where(#v2-app) .v2-wzc-pb[disabled]{opacity:.4;cursor:default}
/* ══ Y EN EL CELULAR EL TEXTO SE PARTE, NO SE CORTA ══
   Los puntos suspensivos son la salida correcta cuando hay una columna al lado
   peleando el ancho; en una sola columna dejan «Toda tu bas…» y «Yerba …», que
   no identifican nada. Medido a 390px. */
@media (max-width:720px){
  :where(#v2-app) .v2-wzc-g{grid-template-columns:minmax(0,1fr)}
  :where(#v2-app) .v2-wzc-x b,
  :where(#v2-app) .v2-wzc-x i,
  :where(#v2-app) .v2-wzc-x u{white-space:normal;overflow:visible;text-overflow:clip}
  :where(#v2-app) .v2-wzc-bar{height:auto;flex-wrap:wrap;padding:9px 12px;row-gap:6px}
  :where(#v2-app) .v2-wzc-q{height:24px;flex:1 1 140px}
  :where(#v2-app) .v2-wzc-cta{flex:1 0 100%;text-align:right}
  :where(#v2-app) .v2-wzc-todas{padding:14px 15px;gap:11px}
  /* la tarjeta replegada del paso 3, por lo mismo */
  :where(#v2-app) .v2-ctl-row-t b,
  :where(#v2-app) .v2-ctl-row-t i{white-space:normal;overflow:visible;text-overflow:clip}
  :where(#v2-app) .v2-ctl-row-res{display:none}
  :where(#v2-app) .v2-ctl-card.collapsed .v2-ctl-row-b{gap:11px}
}
:where(#v2-app) .v2-ctl-rig{margin-left:auto;margin-right:10px;display:inline-flex}
.v2-seg-p-lbl{align-self:center;padding:0 9px 0 3px;font-size:var(--f1);font-weight:650;
  color:var(--i3);letter-spacing:.02em}
/* PEGADA A LA CABECERA, y con el ancho de una nota y no el de una franja:
   una linea de 1300px se lee como un aviso del sistema, una de 760 como el pie
   del control que explica. */
:where(#v2-app) .v2-pz-hint.solo{margin:-2px 0 20px;max-width:860px}
:where(#v2-app) span.v2-ctl-tog{cursor:default}
:where(#v2-app) span.v2-ctl-tog:hover{border-color:var(--n200);color:var(--i3)}
:where(#v2-app) span.v2-ctl-tog.on:hover{border-color:var(--t700);color:#fff}
@media (hover:hover){ :where(#v2-app) .v2-ctl-tog:not(.on):hover{border-color:var(--i3);color:var(--i1)} }
/* el toggle replegado es sólo el círculo -sin texto-, para no competir con
   el renglón de resumen que ya dice el estado con su color */
:where(#v2-app) .v2-ctl-card.collapsed .v2-ctl-tog{width:22px;height:22px;padding:0;
  border-radius:50%;justify-content:center}
.v2-ctl-fr{display:flex;flex-direction:column}
.v2-seg-p-wrap{display:flex;gap:6px;flex-wrap:wrap}
:where(#v2-app) .v2-seg-p.pers{border-style:dashed;color:var(--i3)}
:where(#v2-app) .v2-seg-p.pers.on{background:var(--i2);border-color:var(--i2);
  border-style:solid;color:#fff}
:where(#v2-app) .v2-ctl-sel{height:30px;font-size:var(--f1);padding:0 8px}
.v2-ctl-prev{margin-top:8px;padding:8px 12px;border-radius:var(--r10);font-size:var(--f2);
  font-weight:450;line-height:1.5;color:var(--i2);background:var(--n25);
  display:flex;align-items:flex-start;gap:8px}
.v2-ctl-prev svg{flex-shrink:0;margin-top:2px}
.v2-ctl-prev b{font-weight:750;color:var(--i1)}
.v2-ctl-prev i{font-style:normal;color:var(--i3)}
.v2-ctl-prev.ok{background:var(--t50);color:var(--t800)}
.v2-ctl-prev.ok b{color:var(--t800)}
.v2-ctl-prev.info{background:var(--n50)}
.v2-ctl-prev.warn{background:var(--op-bg);color:var(--op-t)}
.v2-ctl-prev.warn b{color:var(--op-t)}
.v2-ctl-prev.mal{background:var(--mal-bg);color:var(--mal)}
.v2-ctl-prev.mal b{color:var(--mal)}
.v2-ctl-niv{display:inline-block;padding:1px 8px;border-radius:99px;font-size:var(--f1);
  font-weight:700;letter-spacing:.01em;white-space:nowrap;vertical-align:baseline}
.v2-ctl-prev .v2-ctl-niv.info{background:var(--n100);color:var(--i2)}
/* SÓLIDA, no el mismo tinte clarito del bloque que ahora la rodea (79-9): si
   pill y fondo comparten `--op-bg`/`--mal-bg`, la píldora -que es la
   consecuencia, la parte que más importa- se funde en el papel en vez de
   pararse sobre él. */
.v2-ctl-prev .v2-ctl-niv.warn{background:var(--op-t);color:#fff}
.v2-ctl-prev .v2-ctl-niv.mal{background:var(--mal);color:#fff}
.v2-ctl-prev.nd{background:var(--n25);color:var(--i3)}
.v2-ctl-warn{margin-top:7px;display:flex;flex-direction:column;gap:5px}
.v2-ctl-warn span{display:flex;align-items:flex-start;gap:6px;font-size:var(--f1);
  color:var(--op-t);line-height:1.5}
.v2-ctl-warn svg{flex-shrink:0;margin-top:2px}
.v2-asig-p{display:flex;gap:6px;flex-wrap:wrap}
:where(#v2-app) .v2-seg-p{font:inherit;font-size:var(--f1);font-weight:600;color:var(--i3);
  background:var(--n50);border:1px solid var(--n100);border-radius:999px;padding:5px 12px;
  cursor:pointer;transition:background var(--tr-14) ease,color var(--tr-14) ease,border-color var(--tr-14) ease}
:where(#v2-app) .v2-seg-p.on{background:var(--t700);border-color:var(--t700);color:#fff}
@media (hover:hover){ :where(#v2-app) .v2-seg-p:not(.on):hover{border-color:var(--i3);color:var(--i1)} }
@media (prefers-reduced-motion:reduce){.v2-tu-back,
.v2-ctl-card,
.v2-ctl-tog,
.v2-seg-p{transition:none}
}

/* ══════ BARRAS ══════
   `.v2-brs`/`.v2-br-b` -el wrapper y la barra de progreso que pintaban «En
   qué barrios se concentran»- quedaron sin quien las emita: ese desplegable
   se reemplazó por el ranking de la pregunta 1 (`.v2-br.rk`, en «5 · LAS
   BANDAS»), que reusa `.v2-br` pero no dibuja barra. Una clase que nadie usa
   se lee como disponible y se termina usando mal, así que se retiran. */
.v2-br{display:grid;grid-template-columns:1fr 34px;gap:9px;align-items:center;font-size:var(--f1);font-weight:500;color:var(--i2)}
.v2-br-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-br-v{text-align:right;font-weight:700;color:var(--i1)}

/* ══════ RITMO ══════ */
.v2-tl{display:flex;align-items:flex-end;gap:3px;height:58px}
.v2-tl-d{flex:1;max-width:34px;background:var(--t200);border-radius:var(--r6) var(--r6) 0 0;min-height:3px;transition:background var(--tr-14) ease}
@media (hover:hover){ .v2-tl-d:hover{background:var(--c-ok)} }
.v2-tl-x{display:flex;justify-content:space-between;font-size:var(--f1);font-weight:500;color:var(--i3);margin-top:10px}

/* ══════ PRÓXIMO PASO ══════
   Sólo `.v2-paso-a` sigue viva: la fila de botones. El resto -tarjeta propia
   con ícono, kicker, título y párrafo- se fue con la ronda que fusionó «qué
   tipo de jugada es esta» y «cuál es el próximo clic» en una sola tarjeta
   (`_v2PasoInfo` + el `.v2-qh` de la pregunta 4, en `_v2Resumen`): el título
   y el kicker de acá repetían en prosa lo que el estado de arriba y el
   propio botón ya dicen. */

/* ══════ TERRITORIO (arriba de Comercios) ══════ */
.v2-terr{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--n25);
  border:1px solid var(--n100);border-radius:var(--r14);padding:13px 17px;margin-bottom:18px}
.v2-terr-i{flex-shrink:0;width:32px;height:32px;border-radius:var(--r10);background:var(--t50);
  color:var(--t700);display:flex;align-items:center;justify-content:center}
.v2-terr-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.v2-terr-k{display:block;font-size:var(--f1);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--i3)}
.v2-terr-v{font-size:var(--f2);font-weight:650;color:var(--i1)}
.v2-terr .v2-b{margin-left:auto}
@media (max-width:900px){ .v2-terr .v2-b{margin-left:0} }

/* ══════ TABLA ══════ */
/* `min-width` NO ES UN ANCHO: es un piso. Con 240px fijos y un placeholder de
   38 caracteres, «Buscar comercio, dirección o barrio» se cortaba en «…o
   barric», que se lee como un bug y no como una abreviatura. Ahora crece con el
   lugar que haya y el piso baja a 200, que es lo que necesita en un ancho
   apretado. */
.v2-inp{background:var(--n0);border:1px solid var(--bd);color:var(--i1);height:34px;border-radius:var(--r8);
  padding:0 12px;font-size:var(--f2);min-width:200px;flex:1 1 300px;max-width:420px;
  transition:border-color var(--tr-16) ease,box-shadow var(--tr-16) ease}
.v2-inp::placeholder{color:var(--n400)}
.v2-inp:focus{outline:none;border-color:var(--t200);box-shadow:0 0 0 3px var(--t50)}
.v2-cnt{font-size:var(--f1);font-weight:500;color:var(--i2);margin-left:auto}
.v2-cnt b{color:var(--t700);font-weight:700}
.v2-tw{background:var(--n0);border:1px solid var(--n100);border-radius:var(--r20)}
.v2-t{width:100%;border-collapse:collapse;font-size:var(--f2)}
.v2-t th{text-align:left;font-size:var(--f1);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);
  padding:13px 16px;border-bottom:1px solid var(--n100);position:sticky;top:0;background:var(--n0);z-index:2}
.v2-t thead th:first-child{border-top-left-radius:19px}
.v2-t thead th:last-child{border-top-right-radius:19px}
.v2-t td{padding:11px 16px;border-bottom:1px solid var(--n100);color:var(--i2);vertical-align:middle;font-weight:450}
.v2-t tbody tr:last-child td{border-bottom:none}
.v2-t tbody tr:last-child td:first-child{border-bottom-left-radius:19px}
.v2-t tbody tr:last-child td:last-child{border-bottom-right-radius:19px}
.v2-t tbody tr{cursor:pointer;transition:background .13s ease}
@media (hover:hover){ .v2-t tbody tr:hover td{background:var(--n25)} }
.v2-t tr.off td{background:var(--n50)}
.v2-t tr.off td b{text-decoration:line-through;color:var(--i3)}
.v2-t tr.act td{background:var(--t50)}
.v2-t td b{color:var(--i1);font-weight:650}
.v2-ck{width:16px;height:16px;accent-color:var(--t700);cursor:pointer;margin:0;display:block}
.v2-th-mini{width:42px;height:42px;border-radius:var(--r10);object-fit:cover;display:block;border:1px solid var(--n100)}
.v2-pill{font-size:var(--f1);font-weight:700;padding:3px 9px;border-radius:var(--r6);white-space:nowrap;display:inline-block;
  letter-spacing:.02em}
.v2-pill.si{color:var(--t700);background:var(--t50)}
.v2-pill.op{color:var(--op-t);background:var(--op-bg)}
.v2-pill.no{color:var(--i3);background:var(--n50)}

/* ══════ COMERCIOS AGRUPADOS POR QUIÉN LOS ATIENDE ══════
   Sólo aparece cuando `_v2Grupos` encontró más de un destino: un solo grupo
   sería la misma lista con un rótulo alrededor, así que la fila de cabecera
   no es una tarjeta -es un renglón dentro de la misma tabla, con la trama que
   ya usa el territorio arriba (`--n25`)-, para que agrupar no multiplique
   superficies nuevas. */
.v2-tgr-hd td{padding:0;border-bottom:1px solid var(--n100);cursor:default;background:var(--n25)!important}
.v2-tgr-row{display:flex;align-items:baseline;gap:10px;padding:9px 16px;flex-wrap:wrap}
.v2-tgr-nm{font-size:var(--f2);font-weight:700;color:var(--i1)}
.v2-tgr-nm i{font-style:normal;font-weight:500;color:var(--i3)}
.v2-tgr-sub{font-size:var(--f1);font-weight:500;color:var(--i3)}
.v2-tgr-n{margin-left:auto;font-size:var(--f1);font-weight:700;color:var(--v2-ok);
  background:var(--t50);border-radius:999px;padding:2px 9px}
.v2-tgr-hd.sin .v2-tgr-nm{color:var(--v2-alerta)}
.v2-tgr-hd.sin .v2-tgr-n{color:var(--v2-alerta);background:var(--v2-alerta-bg)}
.v2-tgr-hint{font-size:var(--f1);font-weight:450;color:var(--i3);padding:0 16px 10px;line-height:1.5}
.v2-tgr-hint b{font-weight:700;color:var(--v2-alerta)}

/* ══════ FICHA DEL PDV ══════ */
.v2-dr{position:absolute;top:0;right:0;bottom:0;width:450px;background:var(--n0);border-left:1px solid var(--n100);
  box-shadow:-10px 0 46px rgba(14,28,30,.11);transform:translateX(100%);
  transition:transform .26s var(--eo);display:flex;flex-direction:column}
.v2-dr.on{transform:none}
.v2-dr-hd{padding:18px 20px;border-bottom:1px solid var(--n100);display:flex;align-items:flex-start;gap:12px}
.v2-dr-t{flex:1;min-width:0}
.v2-dr-t b{font-size:var(--f3);font-weight:700;letter-spacing:-.3px;display:block;color:var(--i1)}
.v2-dr-t span{font-size:var(--f1);font-weight:450;color:var(--i2)}
.v2-dr-b{flex:1;overflow-y:auto;padding:20px}
.v2-dr-s{font-size:var(--f1);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--n400);margin:24px 0 12px}
.v2-dr-s:first-child{margin-top:0}
.v2-dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:var(--f2)}
.v2-dl dt{color:var(--i3);font-weight:450} .v2-dl dd{margin:0;color:var(--i1);font-weight:600;text-align:right}
.v2-dr-g{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.v2-dr-g img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r14);border:1px solid var(--n100);
  cursor:pointer;transition:transform .18s var(--eo)}
@media (hover:hover){ .v2-dr-g img:hover{transform:scale(1.03)} }
.v2-mini-t{width:100%;border-collapse:collapse;font-size:var(--f1)}
.v2-mini-t th{text-align:left;font-size:var(--f1);font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--n400);padding:8px;border-bottom:1px solid var(--n100)}
.v2-mini-t td{padding:9px 8px;border-bottom:1px solid var(--n100);color:var(--i2);font-weight:450}
.v2-mini-t td b{color:var(--i1);font-weight:650}
.v2-mini-t tr.propia td{background:var(--t50)}

/* ══════ FOTOS ══════ */
.v2-gal{display:grid}
.v2-ph{position:relative;aspect-ratio:3/4;border-radius:var(--r14);overflow:hidden;background:var(--n50);cursor:pointer;
  border:1px solid var(--n100);transition:transform .2s var(--eo),box-shadow .2s ease}
.v2-ph:active{transform:scale(.985)}
@media (hover:hover){ .v2-ph:hover{transform:translateY(-3px);box-shadow:var(--sh2)} }
.v2-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s var(--eo)}
/* la foto respira apenas al pasar el mouse: dice «esto se agranda» sin
   competir con el subtítulo, que ya sube de opacidad con el mismo gesto */
@media (hover:hover){ .v2-ph:hover img{transform:scale(1.06)} }
.v2-ph-c{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 11px;font-size:var(--f1);line-height:1.35;color:#fff;
  background:linear-gradient(transparent,rgba(8,20,22,.9))}
.v2-ph-c b{display:block;font-weight:650}
.v2-ph-c span{color:rgba(255,255,255,.78);font-size:var(--f1);font-weight:450}
/* LA ETIQUETA REUSA `.v2-pill` -misma pieza que en Comercios-, sólo que acá
   flota sobre la foto y necesita sombra propia para leerse sobre cualquier
   imagen, clara u oscura. */
.v2-ph .v2-pill{position:absolute;left:8px;top:8px;z-index:2;box-shadow:0 1px 4px rgba(4,20,22,.35)}
/* ══════ VIDA: ENTRADA ESCALONADA, RESPETANDO REDUCED-MOTION ══════
   La misma animación sirve para la tabla de Comercios y la galería de
   Evidencias: nace apagada y sube, con un delay que crece fila a fila -lo
   lee `--i`, puesto en el propio nodo al armar el HTML. Sin
   `prefers-reduced-motion` no hay ninguna razón para no jugarla; con él, ni
   se declara. */
@media (prefers-reduced-motion:no-preference){
  .v2-t tbody tr,.v2-ph{animation:v2listin .32s var(--eo) both;
    animation-delay:calc(var(--i,0)*16ms)}
}
@keyframes v2listin{from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:none}}
.v2-fm{display:grid;gap:12px}
/* la etiqueta de campo no compite con la de seccion: minuscula y en tinta */
.v2-fm label{display:block;font-size:var(--f1);font-weight:600;color:var(--i3);margin-bottom:5px}
.v2-fm input{width:100%;background:var(--n0);border:1px solid var(--bd);color:var(--i1);border-radius:var(--r8);
  padding:9px 12px;font-size:var(--f2);transition:border-color var(--tr-16) ease,box-shadow var(--tr-16) ease}
.v2-fm input::placeholder{color:var(--n400)}
.v2-fm input:focus{outline:none;border-color:var(--t200);box-shadow:0 0 0 3px var(--t50)}
.v2-tira{display:flex;gap:6px;overflow:hidden;margin-top:6px}
.v2-tira img{width:48px;height:48px;object-fit:cover;border-radius:var(--r10);border:1px solid var(--n100);flex-shrink:0}
.v2-tira .mas{width:48px;height:48px;border-radius:var(--r10);background:var(--n50);display:flex;align-items:center;
  justify-content:center;font-size:var(--f1);font-weight:700;color:var(--i2);flex-shrink:0}

.v2-vacio{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;
  text-align:center;color:var(--i3);gap:12px;padding:32px}
.v2-vacio b{color:var(--i1);font-weight:650}
.v2-vacio>svg{color:var(--n300)}

/* ══════ LIGHTBOX Y AVISO ══════ */
.v2-lb{position:fixed;inset:0;z-index:9999;background:rgba(10,22,24,.85);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:36px}
.v2-lb.on{display:flex;animation:v2fade .18s ease}
:where(#v2-app) .v2-lb-x{position:absolute;right:22px;top:22px;width:42px;height:42px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);border:0;cursor:pointer;color:#fff;
  transition:background var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-lb-x:hover{background:rgba(255,255,255,.3)} }
.v2-lb img{cursor:default}
@keyframes v2fade{from{opacity:0}to{opacity:1}}
.v2-lb img{max-width:min(94vw,1040px);max-height:86vh;border-radius:var(--r20);box-shadow:0 24px 70px rgba(0,0,0,.44)}
.v2-lb-c{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-size:var(--f2);font-weight:500;color:rgba(255,255,255,.86)}
/* EL AVISO NO VA EN EL MEDIO, Y ES UN BUG MEDIDO, NO UNA PREFERENCIA. Centrado
   abajo caía exactamente encima de las dos últimas filas de la lista y del
   botón «Armar el reclamo», que son las dos cosas que uno está por tocar
   cuando el aviso aparece. Un cartel que tapa el botón que acabás de apretar
   no es feedback: es una puerta cerrada durante cuatro segundos.
   Va abajo a la IZQUIERDA, pegado al riel: ahí no hay nada que tocar en
   ninguna de las tres pantallas de Alertas. Y `pointer-events:none` ya
   estaba, así que aunque roce algo, el clic pasa. */
/* ABAJO A LA IZQUIERDA DEL CONTENIDO, Y ANGOSTO. Centrado abajo tapaba el
   botón «Armar el reclamo» —el único de la pantalla— y arriba a la derecha
   tapaba los tres números de contexto. Acá, sobre la última fila de la lista,
   es lo menos caro que hay: es transitorio, no se puede tocar
   (`pointer-events:none`) y no hay ninguna acción debajo. */
.v2-toast{position:fixed;left:18px;bottom:22px;
  transform:translateY(10px);z-index:10000;max-width:min(360px,calc(100vw - 60px));
  background:var(--i1);color:#fff;padding:13px 21px;border-radius:var(--r14);box-shadow:var(--sh2);
  font-size:var(--f2);font-weight:600;line-height:1.45;opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .22s var(--eo)}
body.zn-sb-fijo .v2-toast{left:calc(var(--sb-w) + 18px);max-width:min(360px,calc(100vw - var(--sb-w) - 60px))}
.v2-toast.on{opacity:1;transform:none}
/* EN TELEFONO EL AVISO VA ARRIBA. Abajo tapaba el unico boton de la pantalla:
   a 390 el v2 muestra «este informe se usa en una computadora» y ofrece un solo
   camino —«Ver el informe clasico»—, y el cartel negro le quedaba justo encima,
   asi que el aviso dejaba la pantalla sin salida. Arriba no tapa nada: el
   encabezado mide 64px. */
@media (max-width:760px){
  .v2-toast{top:76px;bottom:auto;left:16px;right:16px;max-width:none;
    transform:translateY(-12px)}
  .v2-toast.on{transform:none}
}


/* ══════ PROCEDENCIA ══════
   La marca que dice de donde sale cada afirmacion. Es lo mas repetido de la
   pantalla, asi que no anima y casi no pesa: 'declarado' y 'observado' son
   texto gris con un glifo de color, y solo 'falta declararlo' -`.v2-b.falta`-
   se pinta, porque es el unico que pide algo. `supuesto` se retiro del v2: las
   bases son dos, declarado y observado, y las dos se pueden defender. El anillo punteado de `.v2-b.falta` dice "sin confirmar"
   sin depender del color. */
.v2-b{
  white-space:nowrap;vertical-align:middle;background:none;border:none}
.v2-b svg{flex-shrink:0} .v2-b.dec svg{color:var(--t600)} .v2-b.obs svg{color:var(--i2)}
.v2-b.falta{
  border-radius:var(--r6)}
button.v2-b.falta{cursor:pointer;transition:background var(--tr-16) ease,transform var(--tr-16) var(--eo)}
button.v2-b.falta u{text-decoration-color:var(--op-bd);text-underline-offset:2px}
@media (hover:hover){ button.v2-b.falta:hover{background:var(--op-hover)} }
button.v2-b.falta:active{transform:scale(.97)}

/* ══════ CONTEXTO ══════ */
.v2-ctxb{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;
  border-radius:var(--r8);border:1px solid var(--bd);background:var(--n0);cursor:pointer;
  font-size:var(--f2);font-weight:600;color:var(--i1);white-space:nowrap;
  transition:background var(--tr-16) ease,border-color var(--tr-16) ease,transform var(--tr-16) var(--eo)}
.v2-ctxb:active{transform:scale(.97)}
@media (hover:hover){ .v2-ctxb:hover{background:var(--n25);border-color:var(--i3)} }
.v2-ctxb b{font-weight:700;font-variant-numeric:tabular-nums}
.v2-ctxb .de{color:var(--i3);font-weight:500}
.v2-ctxb.vacio{border-color:var(--op-bd);background:var(--op-bg);color:var(--op-t)}
@media (hover:hover){ .v2-ctxb.vacio:hover{background:var(--op-hover);border-color:var(--op-t)} }
/* Marca por que este corte esta primero. Ambar solo cuando ademas falta
   decidirlo: ahi la decision compra algo. Decidido, se calma. */
.v2-cx-caso{display:inline-block;margin-left:8px;font-size:var(--f1);font-weight:700;
  letter-spacing:.01em;padding:1px 7px;border-radius:var(--r6);vertical-align:1px;
  color:var(--i2);background:var(--n50);border:1px solid var(--n200)}
.v2-cx-caso.pend{color:var(--op-t);background:var(--op-bg);border-color:var(--op-bd)}
/* El track iba en --n50 sobre tarjeta blanca: 1,06:1. Sin nada elegido los
   dos botones se veian iguales y no se leia como un control. El borde es el
   mismo --bd que el resto de lo que se puede tocar. */
.v2-seg{display:inline-flex;background:var(--n50);border:1px solid var(--bd);border-radius:var(--r8);
  padding:2px;flex-shrink:0;gap:2px}
.v2-seg button{background:none;border:none;border-radius:var(--r6);padding:3px 9px;cursor:pointer;
  font-size:var(--f1);font-weight:600;color:var(--i3);white-space:nowrap;
  transition:background var(--tr-14) ease,color var(--tr-14) ease,transform var(--tr-14) var(--eo)}
.v2-seg button:active{transform:scale(.96)}
@media (hover:hover){ .v2-seg button:hover{color:var(--i1)} }
.v2-seg button.on{background:var(--n0);color:var(--i1);box-shadow:0 1px 2px rgba(14,28,30,.10)}
.v2-seg button.on.si{color:var(--t700)}
.v2-seg button.on.no{color:var(--mal)}
/* `neu`: el lado apagado no es un error. En «objetivo / no» el rojo dice
   algo, en «obligatorio / opcional» diría que lo normal está mal. */
.v2-seg.neu button.on.no{color:var(--i1)}

/* ══════ NO SON DESVIOS ══════ */
.v2-nd{margin:4px 0 0;border-top:1px solid var(--n100);padding-top:10px}
.v2-nd-h{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;
  padding:7px 5px;cursor:pointer;text-align:left;border-radius:var(--r8);
  transition:background var(--tr-14) ease}
@media (hover:hover){ .v2-nd-h:hover{background:var(--n25)} }
.v2-nd-h .n{font-size:var(--f1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--i3)}
/* PREFIJADA. `.c` a secas hereda la tarjeta global de la app, y como el v2
   redefine --bd en gris oscuro, el contador llevaba un borde de 1px que nadie
   pidio: es el bug de `.c` y el de --bd a la vez. */
.v2-nd-h .v2-nd-c{font-size:var(--f1);font-weight:700;background:var(--n50);color:var(--i2);
  padding:2px 7px;border-radius:var(--r6);border:0}
/* borrar: discreto al pie del paso, nunca cerca del primario */
.v2-wz-borrar{display:inline-flex;align-items:center;gap:7px;background:none;border:none;
  cursor:pointer;font-size:var(--f1);font-weight:500;color:var(--n400);padding:14px 0 0;
  transition:color var(--tr-16) var(--eo)}
.v2-wz-cero{display:inline-flex;align-items:center;gap:8px;margin:22px auto 0;
  background:none;border:1px solid var(--n200);border-radius:999px;cursor:pointer;
  font-size:var(--f2);font-weight:600;color:var(--i3);padding:9px 16px;
  transition:border-color var(--tr-16) var(--eo),color var(--tr-16) var(--eo)}
@media (hover:hover){ .v2-wz-borrar:hover{color:var(--mal)}
  .v2-wz-cero:hover{border-color:var(--mal-bd);color:var(--mal)} }
@keyframes v2entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* el plegado se abre de verdad: los items existen siempre y el alto se anima */
.v2-nd-w{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s var(--eo)}
.v2-nd.abierto .v2-nd-w{grid-template-rows:1fr}
.v2-nd-in{overflow:hidden;min-height:0;padding-top:2px}
/* la capa entra con peso, y sale mas rapido: descartar es acelerar */
#v2-app{transform:scale(.988);transition:opacity .2s ease,transform .26s var(--eo)}
#v2-app.on{transform:none}

/* FUERA DE TU FOCO. Era la superficie mas muerta del producto: renglones de
   texto plano, sin el conteo de comercios que en la cola grita a 24px, y sin
   nada que se pareciera a un control aunque el copy prometia "vuelven de un
   clic". Ahora es una tarjeta apagada, con su numero y su accion explicita. */
.v2-nd-i{align-items:center;gap:8px}
/* ARRIBA Y NO AL MEDIO: con titulos de dos renglones el numero quedaba
   alineado con la SEGUNDA linea, que se lee como si perteneciera al motivo
   y no al caso. */
.v2-nd-ab{flex:1;min-width:0;display:flex;align-items:flex-start;gap:11px;text-align:left;
  background:none;border:none;cursor:pointer;padding:9px 10px;border-radius:var(--r10);
  transition:background var(--tr-16) var(--eo)}
.v2-nd-n{font-size:var(--f3);font-weight:700;letter-spacing:-.4px;color:var(--i3);
  min-width:26px;text-align:right;flex-shrink:0}
.v2-nd-tx{min-width:0}
.v2-nd-tx b{display:block;font-size:var(--f2);font-weight:600;color:var(--i2);line-height:1.35}
.v2-nd-tx i{display:block;font-style:normal;font-size:var(--f1);font-weight:450;
  color:var(--i3);margin-top:2px}
.v2-nd-vol{flex-shrink:0;background:none;border:1px solid var(--n200);cursor:pointer;
  font-size:var(--f1);font-weight:600;color:var(--i2);padding:5px 10px;
  border-radius:999px;white-space:nowrap;opacity:.6;
  transition:opacity var(--tr-16) var(--eo),border-color var(--tr-16) var(--eo),color var(--tr-16) var(--eo)}
/* visible siempre, no solo en hover: una accion que hay que descubrir pasando
   el mouse no esta ofrecida, y el copy promete que vuelven de un clic */
.v2-nd-i:hover .v2-nd-vol,.v2-nd-vol:focus-visible{opacity:1}
@media (hover:hover){ .v2-nd-ab:hover{background:var(--n25)}
  .v2-nd-vol:hover{border-color:var(--t400);color:var(--t700)} }
/* EN UN RETENIDO ES LA ACCION PRINCIPAL DE LA FILA, no un «traerlo de vuelta»
   secundario. Con el opacity .6 de arriba se leia desactivado, y un boton que
   parece apagado no se toca: es lo unico de esa lista que el cliente puede
   resolver ahora mismo. */
.v2-nd-vol.esp{opacity:1;border-color:var(--t200);color:var(--t700)}
@media (hover:hover){ .v2-nd-vol.esp:hover{background:var(--t50);border-color:var(--t400)} }
.v2-nd-h svg{margin-left:auto;color:var(--n400);transition:transform .2s var(--eo)}
.v2-nd.abierto .v2-nd-h svg{transform:rotate(90deg)}
.v2-nd-i{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:9px 5px;border-radius:var(--r8);transition:background var(--tr-14) ease}
@media (hover:hover){ .v2-nd-i:hover{background:var(--n25)} }
.v2-nd-i b{display:block;font-size:var(--f1);font-weight:600;color:var(--i2);line-height:1.4}
.v2-nd-i span{display:block;font-size:var(--f1);font-weight:450;color:var(--i3);margin-top:3px}

/* el aviso que lleva el caso que el cliente saco de objetivo */
.v2-fuera{display:flex;gap:11px;align-items:flex-start;background:var(--n50);
  border:1px solid var(--n200);margin-bottom:18px;
  font-size:var(--f1);font-weight:450;color:var(--i2);line-height:1.55}
.v2-fuera b{color:var(--i1);font-weight:650}
.v2-fuera svg{flex-shrink:0;margin-top:1px;color:var(--i3)}
.v2-bases{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-top:15px;padding-top:13px;border-top:1px dashed var(--n200)}
/* Una sola receta para los tres niveles de certeza, en todo el producto. */
.v2-b{font-size:var(--f1);font-weight:600;letter-spacing:.01em;border-radius:999px;
  padding:3px 10px;display:inline-flex;align-items:center;gap:6px}
.v2-b.dec{color:var(--cert-dec);background:var(--t50)}
.v2-b.obs{color:var(--cert-obs);background:var(--n50)}
.v2-b.falta{color:var(--cert-sup);background:transparent;border:1px dashed var(--op-bd);padding:2px 9px}
.v2-b.falta u{text-decoration:none;border-bottom:1px dotted currentColor}

@media (max-width:1280px){

  .v2-cab .v2-ib.gr span,.v2-marca-s{max-width:none}
  .v2-dr{width:100%}
}
@media (prefers-reduced-motion:reduce){
  #v2-app,#v2-app *{transition:none!important;animation:none!important}
  #v2-app{transform:none!important}
  .v2-nd-w{grid-template-rows:1fr!important}
  .v2-it,.v2-pinw{opacity:1;transform:none}
}


/* ═══════════════════════════════════════════════════════════════════════════
   REDISEÑO «FOCO ÚNICO»
   ───────────────────────────────────────────────────────────────────────────
   Una cosa a la vez, con aire, y el caso ocupando la pantalla.

   TRES DECISIONES, Y TODO LO DEMAS SALE DE ELLAS.

   1. UNA COSA A LA VEZ, Y LA COLA MANDA MIENTRAS NO HAYA CASO. La lista
      ocupa el centro entero hasta que elegís algo; ahí se achica a 352px y
      el caso se lleva el resto. `_v2ColaTog` la saca del todo para leer un
      caso ancho. (El diseño original tenía la cola replegada a 82px y
      entrando por encima del documento: se retiró junto con el modo
      angosto, y con él la razón por la que Leaflet no se remedía. Hoy el
      ancho SÍ cambia, y por eso `_v2ColaTog` dispara un `resize`.)

   2. EL CASO ES UN DOCUMENTO, NO UN TABLERO. El titulo deja de ser una
      linea y pasa a ser un bloque compuesto sobre su propia superficie: de
      que corte hablamos, el titular a 34px, y los cuatro numeros que lo
      sostienen a la derecha. Debajo, la cadena de razonamiento como cinco
      SECCIONES DE ANCHO COMPLETO, cada una sobre su banda de fondo.
      Las bandas no son decoracion: son la unica forma de que el ojo sepa,
      sin leer, que cambio de pregunta.

        1  que paso            papel
        2  por que esta mal    ambar   (es la acusacion)
        3  a quien le toca     pizarra (es la persona)
        4  que hacer           teal    (es la accion)
        5  como se verifica    tinta   (cierra, y contrasta)

      La quinta invierte los tokens en su propio scope: todo lo que vive
      adentro usa var(), asi que no hay una sola regla que reescribir.

   3. LO QUE SE LEE Y LO QUE SE HACE NO COMPARTEN SUPERFICIE. El estado y
      «Armar el reclamo» bajan a una barra fija al pie, con su propio fondo
      y su propia sombra. Arriba queda el documento, limpio.

   Y el color deja de ser un acento sobre gris: la barra superior es una
   superficie de tinta con el teal encima, cada banda tiene tono propio y los
   numeros llevan el color de lo que dicen. Nada pintado porque si.
   ═══════════════════════════════════════════════════════════════════════════ */

#v2-app{
  /* LA PALETA. El chrome era casi negro (#082220) y pesaba demasiado: "achica
     la pantalla". Ahora es claro y de otro color, y el contraste lo hace el
     TONO y no la oscuridad. Tres opciones vivas para elegir mirando:
     La barra superior se retiro: estos tokens los usa la barra de accion del
     pie, que sigue siendo chrome.
       --v2-cro              la superficie del chrome (la barra de accion)
       --v2-cro-f/-h/-b/-b2  relleno, hover y bordes SOBRE el chrome
       --v2-tx/-tx2/-tx-str  el texto sobre el chrome, en tres pesos */
  /* LA BARRA ES DE LA FAMILIA DEL TEAL DE MARCA (#13c1ac), no un gris. Clara
     para no achicar la pantalla, pero del color que identifica al producto,
     con el acento saturado reservado al filete y a los datos. */
  --v2-cro:#cbeee5; --v2-cro2:#b6e5da;
  --v2-tx:#0f4c43; --v2-tx2:#3b7a70; --v2-tx-str:#04332c;
  /* SOBRE CHROME CLARO, UN CONTROL SE LEVANTA CON BLANCO, NO CON UN TINTE.
     El 5% de negro que sobre fondo oscuro rendia como relieve, sobre claro no
     registra: el boton desaparece. Se ve en pantalla, no en la hoja. */
  --v2-cro-f:rgba(255,255,255,.72); --v2-cro-h:#ffffff;
  --v2-cro-b:rgba(4,51,44,.18); --v2-cro-b2:rgba(4,51,44,.34);
  --v2-logo:rgba(255,255,255,.96);
  --v2-band-1:#ffffff; --v2-band-2:#fdf5e7; --v2-band-3:#eef4f3; --v2-band-4:#eafaf7; --v2-band-5:#dff5f0;
  --segH:61px;
  background:var(--n50);
}

/* ══════ 1 · LA BARRA: MAS ALTA, DE TINTA, Y CADA COSA CON SU RAZON ══════
   Tenia 58px y tres metricas puestas una al lado de la otra sin jerarquia.
   Ahora tiene 74, es una superficie propia (no una linea sobre el fondo) y
   lleva SOLO lo suyo: de quien es el dato, que campaña, el setup y las dos
   salidas. Los conteos de casos se fueron al riel, y la cobertura al tablero
   del caso: los dos son lugares donde el numero significa algo. */

/* DOS COLUMNAS, Y LA DE LA DERECHA EMPIEZA CON SU CABECERA. #v2-app apila en
   FILA: el riel de arriba abajo, y el documento entero -cabecera, cuerpo- en
   .v2-main. */
#v2-app{flex-direction:row}
.v2-main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
/* LA CABECERA NO ES UNA BARRA, Y ESO ES EL PUNTO. Tenia 74px de superficie
   propia y de otro color para decir tres cosas que son del documento: de quien
   es el dato, que campaña, y las dos salidas. Una cuarta superficie que
   cortaba la pantalla con una franja justo arriba de lo que hay que leer.
   Ahora es la primera linea del cuerpo, sobre el MISMO papel que el informe y
   sin borde: no hay costura porque no hay dos superficies. Su alto es
   exactamente el de la marca del riel, asi que las dos cabeceras -la del
   producto y la del cliente- caen en el mismo renglon. */
.v2-cab{height:var(--v2-cab-h);flex-shrink:0;background:var(--n0);display:block}
/* el logo del cliente arranca donde arranca el texto del informe: los dos
   salen del mismo `.v2-in`, asi que coinciden a cualquier ancho de ventana */
.v2-cab-in{display:flex;align-items:center;gap:0;height:100%}
.v2-cab-r{margin-left:auto;display:flex;align-items:center;gap:7px;min-width:0}
/* EL BLOQUE DE MARCA. Sobre papel el logo ya no necesita su placa blanca para
   levantarse del fondo: alcanza el gris mas frio y un borde de pelo. */
.v2-marca{padding:0 24px 0 0;gap:13px;align-items:center}
.v2-logo{height:38px;min-width:38px;max-width:104px;padding:5px 8px;
  background:var(--n25);border-color:var(--n150,var(--n100));border-radius:var(--r8);box-shadow:none}
.v2-marca-t{color:var(--i1);font-size:var(--f3);letter-spacing:-.3px;line-height:1.25}
.v2-marca-s{color:var(--i2);margin-top:2px}
.v2-marca-s .sep{color:var(--n300)}
.v2-punto{background:var(--t400);box-shadow:0 0 0 3px rgba(46,202,180,.18)}
/* El chip es lo unico de la cabecera que PIDE una accion, asi que es lo unico
   que se pinta. Vacio va en ambar; con algo declarado, en tinta sobre gris. */
/* EL BOTON MAS IMPORTANTE DE LA PANTALLA, Y SE VEIA COMO EL MENOS. Todo lo
   que el informe muestra sale de lo que se declara acá: si esto no se toca, el
   producto entrega la mitad de lo que puede. Solido, no contorneado; con
   sombra propia, que es lo unico que lo levanta del papel de la cabecera.
   VACIO ES AMBAR Y LATE. No por adorno: sin nada declarado el informe funciona
   igual pero no sabe que te importa, y ese es EL momento de apretarlo. Cuando
   ya hay algo, el ambar se apaga y pasa a teal: la llamada cumplio y deja de
   pedir. El latido es de opacidad y no de tamano —no empuja a los vecinos— y
   se apaga entero con `prefers-reduced-motion`. */
.v2-cab .v2-ctxb{height:38px;padding:0 15px;border-radius:var(--r10);
  background:var(--t700);border-color:var(--t700);color:#fff;
  box-shadow:0 1px 2px rgba(4,51,44,.14),0 4px 12px rgba(10,125,110,.18)}
.v2-cab .v2-ctxb b{color:#fff}
.v2-cab .v2-ctxb .de{color:rgba(255,255,255,.72)}
.v2-cab .v2-ctxb svg{opacity:.92}
@media (hover:hover){ .v2-cab .v2-ctxb:hover{background:var(--t800);border-color:var(--t800);
  box-shadow:0 2px 4px rgba(4,51,44,.16),0 8px 20px rgba(10,125,110,.24)} }
.v2-cab .v2-ctxb.vacio{background:var(--op-t);border-color:var(--op-t);color:#fff;
  box-shadow:0 1px 2px rgba(90,58,0,.16),0 4px 14px rgba(176,116,0,.26);
  animation:v2core 2.6s var(--eo) infinite}
.v2-cab .v2-ctxb.vacio b,.v2-cab .v2-ctxb.vacio .de{color:#fff}
.v2-cab .v2-ctxb.vacio .de{color:rgba(255,255,255,.76)}
@media (hover:hover){ .v2-cab .v2-ctxb.vacio:hover{background:var(--op-t);border-color:var(--op-t);
  animation:none} }
@keyframes v2core{ 0%,100%{box-shadow:0 1px 2px rgba(90,58,0,.16),0 4px 14px rgba(176,116,0,.26)}
  50%{box-shadow:0 1px 2px rgba(90,58,0,.16),0 4px 20px rgba(176,116,0,.5)} }
/* el filete que separa la accion de las salidas */
.v2-cab-sep{width:1px;height:22px;background:var(--n200);margin:0 4px;flex-shrink:0}

/* ══════ 2 · LA COLA ══════
La lista de trabajo, en el centro. El detalle de por qué manda el ancho
entero y cómo se achica con un caso abierto está en el comentario que
acompaña a `.v2-riel`, unas líneas abajo. */
/* LAS DOS CURVAS DEL BLOQUE, y no hay una tercera. `--v2-ez` es la de cajon:
   arranca rapido y frena largo, que es lo que hace que una superficie se
   sienta pesada sin sentirse lenta. `--v2-ez-corta` es la de la vuelta. */
#v2-app{--v2-ez:cubic-bezier(.32,.72,0,1); --v2-ez-corta:cubic-bezier(.4,.02,.34,1);
  --v2-riel-ab:352px; --v2-cab-h:64px; --v2-riel-pad:12px}
/* LA COLA ES EL CENTRO, NO UNA BARRA. Estaba fija en 352px y las filas se
   apretaban hasta cortar los títulos, mientras el caso se llevaba mil píxeles
   aunque no hubiera ninguno elegido. Ahora manda la lista: ocupa el centro
   entero, y sólo cuando elegís un caso se achica a su ancho de trabajo para
   dejarle lugar al panel. Es la misma pantalla en dos estados. */
/* La cola es el piso de abajo de `.v2-izq`: el borde y la sombra que la
   separaban del caso se los quedó la columna, o quedaban dos líneas paralelas
   a 236px de distancia diciendo lo mismo. */
.v2-riel{flex:1 1 auto;min-width:0;min-height:0;background:var(--n0);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:height .34s var(--v2-ez)}
/* La sombra hacia la derecha la levantaba del papel cuando era una columna
   entera y valía la pena avisar que se podía plegar. Ahora es el piso de abajo
   de una columna de 236px: una sombra de 38px sobre el caso es una mancha, no
   una pista. */
/* EL RIEL YA NO SE ENCOGE A UNA COLUMNA DE ICONOS. Tenía dos anchos —172 con
   los nombres recortados y 352 con todo— y el angosto no servía para nada: un
   índice que esconde los nombres deja de ser un índice, y para ganar 180px de
   panel no vale perder el saber dónde estás. Ahora hay un solo ancho y un solo
   gesto: está, o no está. Ocultarlo del todo sí sirve —para mirar una
   evidencia o el mapa a pantalla ancha— y volver es un clic. */
/* el atajo, dicho donde ya se explica lo otro que hay que saber del pie. Sólo
   aparece con más de tres casos: con dos, moverse con el mouse es más rápido
   que aprender una tecla. */
.v2-ft-k{display:inline-flex;align-items:center;gap:3px;margin-left:6px;white-space:nowrap}
/* `--f1` es el piso de la escala y una tecla suelta es exactamente para lo que
   existe: mayúscula corta. Bajar a 9px por «entra mejor» es empezar la escala
   de nuevo por abajo. */
.v2-ft-k kbd{font:inherit;font-size:var(--f1);font-weight:700;line-height:1;color:var(--i2);
  background:var(--n0);border:1px solid var(--n200);border-bottom-width:2px;
  border-radius:var(--r6);padding:1px 4px}

/* ══════ EL TABLERO DE ENTRADA ══════
   Cuatro números y lo que pide atención hoy. Los números son grandes porque son
   la respuesta a la primera pregunta que se hace al entrar —«¿cómo venimos?»—
   y el rótulo va debajo, chico: el dato manda, la palabra lo nombra. */
/* SE ALINEA A LA IZQUIERDA, aunque venga envuelto en `.v2-vacio`: ese
   contenedor centra —y está bien que centre un estado vacío— pero un tablero
   centrado deja los números flotando y rompe la columna de lectura. */
/* CUATRO CELDAS SIN CAJA. Con borde cada una serían cuatro rectángulos más en
   una pantalla que ya tiene la cola al lado; una línea vertical entre ellas
   alcanza para agruparlas y pesa mucho menos. */
/* EL KPI ACCIONABLE SE VE DISTINTO DEL QUE SOLO INFORMA: cursor, hover y una
   flecha que aparece al pasar. Sin eso el cliente descubre que se puede tocar
   probando, que es la peor forma de descubrir algo. */
 }
 }
/* la fila urgente ES un botón: lo que se hace con ella es abrirla. Un div con
   `cursor:pointer` no llega por teclado. */
 }
/* la miniatura ocupa su columna aunque no cargue: sin reservarla, las filas con
   foto y sin foto quedan desalineadas entre sí. */
/* ══════ LAS VISTAS DEL PANEL: campañas, partners, tus reglas ══════
   Comparten cabecera y aviso porque son la misma clase de pantalla: un título
   que dice qué se está mirando, una advertencia cuando el dato es parcial, y el
   contenido. Sin esto el aviso se desbordaba encima del riel. */
.v2-vis-w{max-width:1000px}
.v2-vis-h h2{font-size:var(--f5);font-weight:700;letter-spacing:-.6px;line-height:1.2;margin:0 0 5px;color:var(--i1)}
.v2-vis-h p{margin:0;font-size:var(--f2);font-weight:450;line-height:1.6;color:var(--i2);max-width:70ch}
/* EL AVISO ES UNA GRILLA Y NO UN FLEX: con flex el `<span>` no tiene ancho
   mínimo y el texto se estruja en una columna de una palabra por línea, que fue
   exactamente lo que pasó. `minmax(0,1fr)` es lo que se lo impide. */
.v2-vis-av{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;
  margin-top:16px;padding:12px 15px;background:var(--op-bg);border:1px solid var(--op-bd);
  border-radius:var(--r10);font-size:var(--f2);line-height:1.55;color:var(--op-t)}
.v2-vis-av>svg{margin-top:2px;flex-shrink:0}
.v2-vis-av b{font-weight:700}

/* ══════ LA LISTA DE CAMPAÑAS ══════
   Una fila por campaña, con lo que tiene adentro. La que se está mirando se
   marca y no ofrece botón: «Ir» a donde ya estás es una puerta que no lleva a
   ningún lado. */
.v2-cmps{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.v2-cmp{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;
  padding:12px 15px;background:var(--n0);border:1px solid var(--n100);border-radius:var(--r14)}
.v2-cmp.on{border-color:var(--t300);background:var(--t50)}
.v2-cmp-n b{display:block;font-size:var(--f3);font-weight:650;color:var(--i1);letter-spacing:-.2px}
.v2-cmp-n i{display:block;font-style:normal;font-size:var(--f1);font-weight:500;color:var(--i3);margin-top:1px}
.v2-cmp-d{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--f1);color:var(--i3)}
.v2-cmp-d b{font-size:var(--f2);font-weight:700;color:var(--i1);font-variant-numeric:tabular-nums}
.v2-cmp-d .mal b{color:var(--mal)}
.v2-cmp-x{font-style:italic}
.v2-cmp-aq{font-size:var(--f1);font-weight:700;color:var(--t700);text-transform:uppercase;letter-spacing:.5px}

/* la tarjeta de setup no manda en esta pantalla: acota su ancho al de una
   columna de lectura y deja de competir con la lista. */
.v2-setup-w{max-width:640px;margin-bottom:16px}

/* ══════ LA FILA ANCHA ══════
   Grilla y no flex: con flex, un título largo empuja al resto y dos filas
   vecinas dejan de alinearse, que es lo que hace que una lista se lea como un
   volcado. Las columnas son fijas salvo el título, que es el que puede crecer. */
:where(#v2-app) .v2-ia{display:grid;
  grid-template-columns:34px minmax(0,1fr) 92px minmax(0,168px) 104px 52px 18px;
  align-items:center;gap:14px;width:100%;text-align:left;
  padding:9px 14px;background:var(--n0);border:1px solid var(--n100);
  border-left:3px solid var(--n300);border-radius:var(--r10);margin-bottom:5px;
  cursor:pointer;transition:border-color var(--tr-16) ease,box-shadow var(--tr-16) ease}
@media (hover:hover){ :where(#v2-app) .v2-ia:hover{border-color:var(--n200);
  border-left-color:var(--t600);box-shadow:var(--sh)} }
:where(#v2-app) .v2-ia:focus-visible{outline:2px solid var(--t400);outline-offset:2px}
.v2-ia-i{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:var(--r8);background:var(--n50);color:var(--i2)}
.v2-ia-t{min-width:0}
.v2-ia-t b{display:block;font-size:var(--f2);font-weight:600;color:var(--i1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-ia-t i{display:block;font-style:normal;font-size:var(--f1);font-weight:450;color:var(--i3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-ia-n{text-align:right}
.v2-ia-n b{font-size:var(--f3);font-weight:700;color:var(--i1);font-variant-numeric:tabular-nums}
.v2-ia-n i{font-style:normal;font-size:var(--f1);color:var(--i3);margin-left:4px}
.v2-ia-q{font-size:var(--f1);font-weight:500;color:var(--i2);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-ia-q em{font-style:normal;color:var(--n400)}
.v2-ia-q em.v2-ia-sin{color:var(--op-t);font-weight:600}
.v2-ia-e{display:flex;justify-content:flex-end}
.v2-ia-f{width:52px;height:34px;border-radius:var(--r6);overflow:hidden;background:var(--n50)}
.v2-ia-f img{width:100%;height:100%;object-fit:cover;display:block}
:where(#v2-app) .v2-ia>svg{color:var(--n300)}
.v2-ia.e-venc{border-left-color:var(--mal)}
.v2-ia.e-curso{border-left-color:var(--c-op)}
.v2-ia.e-enviado{border-left-color:var(--t300)}
.v2-ia.e-cerrado{border-left-color:var(--n300)}
.v2-ia.e-cerrado .v2-ia-t b{font-weight:500;color:var(--i2)}
:where(#v2-app) .v2-ia.on{border-color:var(--t400);background:var(--t50);box-shadow:var(--sh)}
.v2-ia.cero{opacity:.55}
/* con el panel del caso abierto la lista se angosta: se van las columnas que
   se pueden deducir del caso que estás mirando, y queda lo que se escanea. */
/* CON UN CASO ABIERTO, LA LISTA VUELVE A SER UNA COLUMNA DE APOYO. Los cuatro
   KPI en 70px cada uno rompían el número en tres líneas, y la tarjeta de setup
   se comía media columna: los dos son de la vista bandeja, y con un caso
   adelante lo que importa es el caso. El estado se va de la fila porque el
   borde izquierdo ya lo dice por color, y así el título respira. */
#v2-app.con-caso .v2-lh-k,#v2-app.con-caso .v2-setup-w{display:none}
#v2-app.con-caso .v2-ia{grid-template-columns:30px minmax(0,1fr) 46px;gap:10px;padding:8px 11px}
#v2-app.con-caso .v2-ia-q,#v2-app.con-caso .v2-ia-f,#v2-app.con-caso .v2-ia-e,
#v2-app.con-caso .v2-ia>svg{display:none}
#v2-app.con-caso .v2-ia-n i{display:none}
#v2-app.con-caso .v2-ia-i{width:30px;height:30px}
#v2-app.con-caso .v2-ia-t b{font-size:var(--f1)}
#v2-app.con-caso .v2-lh{padding:16px 18px 10px}
#v2-app.con-caso .v2-lh h1{font-size:var(--f4);letter-spacing:-.4px}
#v2-app.con-caso .v2-riel-hd{padding:0 18px 10px;flex-wrap:wrap}
#v2-app.con-caso .v2-cola-q{max-width:none;flex:1 0 100%}
#v2-app.con-caso .v2-cola-r{margin-left:0}
#v2-app.con-caso .v2-fil{padding:0 18px}
#v2-app.con-caso .v2-lista{padding:12px 18px 18px}
#v2-app.con-caso .v2-cola-ft,#v2-app.con-caso .v2-riel-f{padding-left:18px;padding-right:18px}
@media (max-width:1180px){
  .v2-ia{grid-template-columns:34px minmax(0,1fr) 62px 92px 18px}
  .v2-ia-q,.v2-ia-f{display:none}
  .v2-ia-n i{display:none}
}

/* ══════ LA CABECERA DE LA LISTA ══════
   Qué estoy mirando, cuánto hay, y recién después cómo lo filtro. Ese orden es
   el de las preguntas que se hacen al llegar, y por eso el título es lo único
   grande de la columna. */
.v2-lh{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px 24px 14px;flex-shrink:0}
.v2-lh-t{min-width:0}
.v2-lh h1{font-size:var(--f5);font-weight:700;letter-spacing:-.6px;line-height:1.15;
  margin:0;color:var(--i1)}
.v2-lh-sub{margin:3px 0 0;font-size:var(--f2);font-weight:450;color:var(--i2)}
:where(#v2-app) .v2-lh .v2-riel-t{position:static;width:auto;height:auto;padding:7px;
  background:none;border:0;border-radius:var(--r8);color:var(--i3);cursor:pointer;flex-shrink:0}
@media (hover:hover){ :where(#v2-app) .v2-lh .v2-riel-t:hover{background:var(--n50);color:var(--i1)} }

/* ACÁ VIVÍAN LAS CUATRO CELDAS DE `#v2-kpis`, que era un hueco del riel viejo
   —el que reemplazó la bandeja— y por lo tanto no estaba en el DOM: la función
   que las pintaba corría en cada repintado y el resultado se descartaba.
   Los tres números que valían la pena volvieron como `.v2-band-ctx`, al lado
   del título de Problemas, y su estilo vive allá. */

/* los controles dejan de estirarse: un `<select>` de 600px con tres opciones
   adentro se lee como un campo roto. */
#v2-app .v2-riel-hd{padding:0 24px 12px;gap:10px;flex-direction:row;align-items:center;
  max-height:none;opacity:1;overflow:visible;border-bottom:1px solid var(--n100)}
#v2-app .v2-cola-q{flex:1;min-width:0;max-width:420px}
#v2-app .v2-cola-r{flex-shrink:0;margin-left:auto}
#v2-app .v2-mini-sel{max-width:190px}
#v2-app .v2-fil{padding:0 24px;margin:12px 0 0}
#v2-app .v2-lista{padding:14px 24px 20px}
#v2-app .v2-cola-ft,#v2-app .v2-riel-f{padding-left:24px;padding-right:24px}

/* ══════ LA COLUMNA IZQUIERDA: SÓLO NAVEGACIÓN, Y OSCURA ══════
   Tuvo la cola adentro durante una ronda, y fue un error de lectura de la
   referencia: hay DOS imágenes y describen DOS pantallas. `Demo inspiracion.png`
   muestra UN CASO abierto a ancho completo; `CHAT GPT Imagen Dashboard Campaña
   v2.png` muestra LA BANDEJA, con la lista mandando en el cuerpo y el caso en
   un panel lateral. Se mezclaron, y cada ronda deshacía la anterior.
   Resuelto así: la lista NO vive acá —vive en el cuerpo, que es su lugar— y
   esta columna vuelve a ser sólo navegación. Y vuelve a ser oscura, que es como
   está en la referencia de la bandeja y como estaba antes: es la única
   superficie oscura, y por eso el ojo entiende sin una línea que eso es «dónde
   estoy» y lo de al lado es «qué estoy mirando». */
.v2-izq{width:224px;flex-shrink:0;display:flex;flex-direction:column;
  min-height:0;background:var(--i1)}
.v2-side{flex:1 1 auto;min-height:0;background:var(--i1);color:var(--n200);
  display:flex;flex-direction:column;overflow:hidden}
.v2-side-m{padding:16px 16px 12px;border-bottom:1px solid rgba(255,255,255,.07)}
/* EL LOGO, UNA SOLA VEZ. `_v2RielMarca` pinta el ícono Y el logotipo, y las
   reglas que mostraban uno u otro según el ancho del riel se fueron con el modo
   angosto: quedaban los dos encima, que es el rectángulo blanco que se veía.
   Acá manda el logotipo. */
/* el contenedor traía `background:var(--n0)` y su borde: la marca no necesita
   caja cuando la columna entera ya es una superficie. */
.v2-side-m .v2-riel-m{display:block;background:transparent;border-bottom:0;
  padding:0;height:auto;overflow:visible}
.v2-side-m .v2-riel-mi{display:none}
/* el logotipo va invertido a blanco: el PNG viene en la tinta de marca y sobre
   la columna oscura no se veria. */
.v2-side-m .v2-riel-mf{display:block;max-width:104px;height:auto;
  filter:brightness(0) invert(1);opacity:.9}
.v2-side-nav{flex:1;padding:12px 10px;overflow-y:auto}
.v2-side-f{padding:12px}

/* los grupos no llevan línea: el espacio ya los separa, y una línea por grupo
   en una columna de 224px son tres rectángulos más. */
/* LOS COLORES DE ESTA COLUMNA SON TINTA, NO BLANCO TRANSLÚCIDO. Estaban
   escritos como `rgba(255,255,255,.38)` porque el fondo era oscuro; con el
   fondo claro no dan gris claro, dan invisible. No se traduce la opacidad tal
   cual —blanco .38 sobre oscuro pesa como tinta .55 sobre claro—, así que cada
   una se eligió por lo que tiene que pesar, no por el número que tenía. */
.v2-side .v2-nav-g{font-size:var(--f1);font-weight:700;color:rgba(255,255,255,.38);
  text-transform:uppercase;letter-spacing:.6px;padding:14px 8px 5px}
.v2-side .v2-nav-g:first-child{padding-top:2px}
:where(#v2-app) .v2-side .v2-nv{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;padding:7px 9px;border-radius:var(--r8);cursor:pointer;text-align:left;transition:background var(--tr-14) ease;gap:10px}
.v2-side .v2-nv-i{display:flex;align-items:center;color:rgba(255,255,255,.42);flex-shrink:0}
.v2-side .v2-nv-t{flex:1;min-width:0;font-size:var(--f2);font-weight:500;color:rgba(255,255,255,.72)}
:where(#v2-app) .v2-side .v2-nv.on .v2-nv-i{color:rgba(255,255,255,.9)}
:where(#v2-app) .v2-side .v2-nv.alerta .v2-nv-i{color:var(--mal-osc)}
@media (hover:hover){ :where(#v2-app) .v2-side .v2-nv:hover .v2-nv-i{color:rgba(255,255,255,.75)} }
.v2-side .v2-nv-n{font-size:var(--f1);font-weight:700;color:rgba(255,255,255,.45);
  font-variant-numeric:tabular-nums;min-width:20px;text-align:right}
@media (hover:hover){
  :where(#v2-app) .v2-side .v2-nv:hover{background:rgba(255,255,255,.06)}
  :where(#v2-app) .v2-side .v2-nv:hover .v2-nv-t{color:#fff}
}
/* EL ACTIVO ES UN BLOQUE TEAL LLENO. Sobre esta columna oscura el teal es
   acento y no superficie: es el unico bloque saturado de la navegacion, y hay
   uno solo. Es lo que hace la referencia de la bandeja. */
:where(#v2-app) .v2-side .v2-nv.on{background:var(--t700)}
:where(#v2-app) .v2-side .v2-nv.on .v2-nv-t{color:#fff;font-weight:650}
:where(#v2-app) .v2-side .v2-nv.on .v2-nv-n{color:rgba(255,255,255,.85)}
/* vencido con algo adentro grita en el número y no en el rótulo: en rojo el
   renglón entero pediría atención aunque el dato sea 0. */
:where(#v2-app) .v2-side .v2-nv.alerta .v2-nv-n{color:var(--mal-osc)}
:where(#v2-app) .v2-side .v2-nv.alerta.on{background:var(--mal-d)}
:where(#v2-app) .v2-side .v2-nv.alerta.on .v2-nv-n{color:#fff}
/* Y EL ROTULO TAMBIEN. La regla generica pinta el texto de `--mal-d` porque
   ahi el fondo es `--mal-bg`, que es claro; en el sidebar el fondo se pisa a
   `--mal-d` y el texto quedaba del MISMO color que su fondo. Medido: 1.0:1 de
   contraste. Entrar a Campañas hacia desaparecer la palabra «Campañas» y
   dejaba un icono y un «1/2» sueltos. */
:where(#v2-app) .v2-side .v2-nv.alerta.on .v2-nv-t{color:#fff}

/* el pedido del pie: aparece SÓLO si hay algo sin declarar. Una tarjeta que
   dice «está todo bien» es ruido permanente. */
/* los destinos que todavía no existen se dicen apagados y no se pueden tocar:
   un renglón que no lleva a ningún lado se prueba una vez y siembra la duda
   sobre todos los demás. */
:where(#v2-app) .v2-side .v2-nv.pronto{cursor:default;opacity:.42}
.v2-side .v2-nv.pronto .v2-nv-n{font-size:var(--f1);text-transform:uppercase;
  letter-spacing:.08em;opacity:.8}
@media (hover:hover){ :where(#v2-app) .v2-side .v2-nv.pronto:hover{background:none} }

.v2-side-op{padding:12px 13px;border-radius:var(--r10);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09)}
.v2-side-op-t{font-size:var(--f1);font-weight:700;color:rgba(255,255,255,.55);
  text-transform:uppercase;letter-spacing:.5px}
.v2-side-op-d{font-size:var(--f1);font-weight:450;color:rgba(255,255,255,.72);
  line-height:1.5;margin:4px 0 10px}
:where(#v2-app) .v2-side-op-b{display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;font-size:var(--f1);font-weight:650;color:var(--i1);background:#fff;
  border:0;border-radius:var(--r6);padding:7px 10px;cursor:pointer}
@media (hover:hover){ :where(#v2-app) .v2-side-op-b:hover{background:var(--t100)} }

/* Bajo 1100px se angosta la COLUMNA, no la navegación: el piso de arriba no
   puede encogerse solo sin dejar la cola colgando a otro ancho. Lo que se va es
   el texto de los destinos, que a 64px no se lee igual. */
@media (max-width:1100px){ .v2-izq{width:64px}
  .v2-side .v2-nav-g,.v2-side .v2-nv-t,.v2-side-op{display:none}
  .v2-side .v2-nv{justify-content:center}
}

/* ══════ LA NAVEGACIÓN DEL RIEL ══════
   Es lo que lo convierte en índice: cada tramo del trabajo es un destino con su
   número, y debajo están las otras dos cosas que se miran desde acá. El número
   va a la derecha y alineado en columna —tabular-nums— porque lo que se hace
   con esta lista es comparar cantidades de un vistazo, no leerla. */
.v2-nav{padding:10px 10px 8px;border-bottom:1px solid var(--n100);flex-shrink:0}
.v2-nav-g{font-size:var(--f1);font-weight:700;color:var(--i3);text-transform:uppercase;
  letter-spacing:.5px;padding:8px 6px 4px}
.v2-nav-g:first-child{padding-top:2px}
:where(#v2-app) .v2-nv{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;background:none;border:0;padding:6px 8px;border-radius:var(--r8);
  cursor:pointer;text-align:left;transition:background var(--tr-14) ease,color var(--tr-14) ease}
.v2-nv-t{font-size:var(--f2);font-weight:550;color:var(--i2)}
.v2-nv-n{font-size:var(--f2);font-weight:700;color:var(--i3);font-variant-numeric:tabular-nums;
  min-width:22px;text-align:right}
@media (hover:hover){ :where(#v2-app) .v2-nv:hover{background:var(--n50)}
  :where(#v2-app) .v2-nv:hover .v2-nv-t{color:var(--i1)} }
:where(#v2-app) .v2-nv.on{background:var(--t50)}
:where(#v2-app) .v2-nv.on .v2-nv-t{color:var(--t800);font-weight:700}
:where(#v2-app) .v2-nv.on .v2-nv-n{color:var(--t700)}
/* vencido con algo adentro es lo único que grita, y grita en el número: el
   rótulo en rojo haría que la fila entera pida atención aunque el dato sea 0. */
:where(#v2-app) .v2-nv.alerta .v2-nv-n{color:var(--mal)}
:where(#v2-app) .v2-nv.alerta.on{background:var(--mal-bg)}
:where(#v2-app) .v2-nv.alerta.on .v2-nv-t{color:var(--mal-d)}

/* EL CUERPO NO SE GATEA CON EL CASO. Acá decía `display:none`, y sólo lo
   encendía `#v2-app.con-caso`. Eso era correcto cuando `.v2-main` era nada más
   que el panel del caso; dejó de serlo en `d4de9af` («la lista pasa al centro
   y el caso a un panel»), que metió la cola ADENTRO de `.v2-main`. Desde ahí,
   estar sin caso abierto —o cerrar uno y volver al listado, que es el bucle
   principal— dejaba la pantalla ENTERA en blanco con el sidebar diciendo
   «Todo el trabajo 10». Quién se muestra con caso y quién sin caso ya lo
   deciden `.v2-pan` y `.v2-band`, cada una por su lado. */
#v2-app .v2-main{display:flex;flex:1 1 auto;min-width:0;background:var(--n25)}
#v2-app.con-caso .v2-riel{flex:1 1 auto;width:auto;min-height:0}
/* Plegar la cola ahora la achica en ALTO, no en ancho: es un piso de la columna
   izquierda y no una columna. Sigue dejando la navegación a la vista, que es lo
   que hacía falta para volver. */
.v2-riel.oculta{height:0;flex:0 0 0;box-shadow:none;border-right:0}
.v2-riel.oculta>*{opacity:0;pointer-events:none}
.v2-riel{width:var(--v2-riel-ab)}
@media (max-width:1280px){ #v2-app{--v2-riel-ab:312px} }

/* LA MARCA DE ZNAPP, Y SUS DOS FORMAS PUESTAS. Las dos viven en el DOM, una
   sobre la otra, y se cruzan con opacidad: la Z no desaparece para que
   aparezca otra cosa, se convierte. Apiladas en la misma celda de grid, asi
   que ninguna empuja a la otra ni salta al terminar. Su alto es EXACTAMENTE el
   de la cabecera del cuerpo, y no por simetria: asi la marca del producto y la
   del cliente caen en el mismo renglon. SOLA Y A LA IZQUIERDA, que es de quien
   es el producto. (Decia "en los dos anchos, 172px ya alcanza": los dos anchos
   se retiraron y el riel quedo en 224. Ver el comentario de `.v2-riel-f`.) */
.v2-riel-m{height:var(--v2-cab-h);flex-shrink:0;display:grid;
  grid-template-columns:minmax(0,1fr);align-items:center;justify-items:start;
  padding:0 16px;border-bottom:1px solid var(--n100);overflow:hidden;
  background:var(--n0)}
.v2-riel-mi,.v2-riel-mf{grid-area:1/1;display:block;max-width:100%;
  transition:opacity .2s ease}
.v2-riel-mi{width:28px;height:28px;object-fit:contain}
.v2-riel-mf{height:25px;max-width:170px;object-fit:contain;object-position:left center;opacity:0}
.v2-riel .v2-riel-mi{opacity:0}
.v2-riel .v2-riel-mf{opacity:1}
b.v2-riel-mi,b.v2-riel-mf{font-size:var(--f3);font-weight:700;letter-spacing:-.3px;
  color:var(--t700);width:auto;height:auto;white-space:nowrap}

/* EL BOTON QUE ABRE. «N casos» en texto plano, sin caja ni relleno -no hace
   falta adorno para decir cuantos hay-, con la flecha como unica pista de que
   es un boton. Abierto crece a la frase entera y la flecha se da vuelta. */
:where(#v2-app) .v2-riel-t{height:46px;flex-shrink:0;display:flex;flex-direction:row;
  align-items:center;justify-content:flex-start;gap:7px;background:none;border:none;
  border-bottom:1px solid var(--n100);cursor:pointer;color:var(--i2);width:100%;
  padding:0 16px;overflow:hidden;
  transition:background .2s var(--v2-ez),padding .34s var(--v2-ez)}
.v2-riel .v2-riel-t{padding:0 12px 0 16px}
.v2-riel-tn{font-size:var(--f3);font-weight:700;color:var(--i1);line-height:1;
  letter-spacing:-.3px;font-variant-numeric:tabular-nums;flex-shrink:0;
  transition:opacity var(--tr-16) ease,max-width .34s var(--v2-ez)}
.v2-riel .v2-riel-tn{opacity:0;max-width:0;overflow:hidden}
/* el corto es el espejo del largo: uno vive donde el otro no cabe */
.v2-riel-tc{font-size:var(--f1);font-weight:700;letter-spacing:.03em;color:var(--i3);
  white-space:nowrap;overflow:hidden;flex-shrink:0;
  transition:opacity var(--tr-16) ease,max-width .3s var(--v2-ez)}
.v2-riel .v2-riel-tc{opacity:0;max-width:0;flex:0 0 0}
/* LA FLECHA DICE QUE ESTO SE ABRE, y girada dice como se cierra. Sin ella la
   columna es muda: el numero se lee como un rotulo y no como un boton. */
.v2-riel-t svg{color:var(--n400);flex-shrink:0;margin-left:1px;
  transition:transform .34s var(--v2-ez),color .2s ease}
.v2-riel .v2-riel-t svg{margin-left:auto;transform:rotate(180deg);color:var(--t600)}
@media (hover:hover){ .v2-riel-t:hover{background:var(--t50)}
  .v2-riel-t:hover .v2-riel-tn{color:var(--t700)}
  .v2-riel-t:hover svg{color:var(--t600)} }

/* BUSCADOR, CHIPS Y ORDEN. Existen SIEMPRE en el DOM: la base los deja en
   cero alto y `.v2-riel .v2-riel-hd` los abre, asi que lo que escribiste en el
   buscador sigue ahi cuando la cola vuelve, en vez de destruirse con el nodo. */
.v2-riel-hd{flex-shrink:0;padding:0 12px;max-height:0;opacity:0;overflow:hidden;
  border-bottom:1px solid transparent;
  transition:max-height .34s var(--v2-ez),opacity var(--tr-16) ease,padding .34s var(--v2-ez)}
.v2-riel .v2-riel-hd{max-height:200px;opacity:1;padding:12px 12px 10px;
  border-bottom-color:var(--n100)}

/* LA LISTA. Un solo scroller en los dos anchos. SIN mascara de degradado: los
   encabezados de grupo son `sticky` y una mascara crea contexto de apilado que
   los rompe. Se vio, no se supuso. */
:where(#v2-app) .v2-lista{flex:1;overflow-y:auto;overflow-x:hidden;
  padding:10px var(--v2-riel-pad) 14px;display:flex;flex-direction:column;gap:5px;
  align-items:stretch;position:relative;scrollbar-width:thin;
  transition:padding .34s var(--v2-ez)}
.v2-riel .v2-lista{padding:11px 12px 18px;gap:3px}
#v2-app .v2-lista::-webkit-scrollbar{width:5px}
#v2-app .v2-lista::-webkit-scrollbar-thumb{background:var(--n200);border-radius:3px;border:none}
#v2-app .v2-lista::-webkit-scrollbar-track{background:none}

/* EL PIE DE LA COLA, QUE HOY VIVE EN LA OTRA COLUMNA. El molde sigue acá
   —lo usa `#v2-side-f`, donde pinta `_v2SidePie`— pero adentro del riel está
   apagado a propósito (`.v2-riel .v2-riel-f{display:none}`, unas líneas abajo).
   Con él se fueron los comentarios que explicaban cómo se recortaba cada pieza
   a 172px: no hay dos anchos, hay una columna que está o no está. */
.v2-riel-f{flex-shrink:0;padding:10px var(--v2-riel-pad) 12px;border-top:1px solid var(--n100);
  transition:padding .34s var(--v2-ez)}
.v2-riel-f:empty{display:none;padding:0;border:none}
.v2-riel .v2-riel-f{display:none}
:where(#v2-app) .v2-riel-b{width:100%;display:flex;align-items:center;gap:11px;
  border-radius:var(--r10);border:1px solid transparent;background:none;cursor:pointer;
  padding:8px 12px;color:var(--i2);font:inherit;text-align:left;
  transition:background .18s var(--v2-ez),border-color .18s var(--v2-ez)}
@media (hover:hover){ .v2-riel-b:hover{background:var(--n25)} }
/* ESPERAR LLEVA TEAL, DESCARTAR LLEVA AMBAR. Lo retenido es lo unico del pie
   que el cliente puede resolver ahora, asi que se lee como una accion y no
   como una lista de lo que quedo afuera. */
/* La pantalla de espera: la lista alineada a la izquierda aunque el bloque
   este centrado -una lista centrada no se lee-, y el numero en teal, que es
   lo que tiene que saltar de cada renglon. */
/* UN SOLO HIJO. `.v2-segui-vac .a` es flex en fila, asi que la lista, los
   botones y el cierre se acomodaban uno al lado del otro en vez de apilarse.
   El envoltorio los devuelve a flujo normal sin tocar la regla de arriba, que
   la usan otros seis estados vacios. */
.v2-esp-w{width:100%;display:block}
/* ARRIBA, NO AL MEDIO. Es el molde del estado vacio pero no es un vacio: con
   ocho mediciones el centrado vertical la empujaba fuera de la pantalla por
   los dos lados a la vez. */
.v2-segui-vac.esp{justify-content:flex-start;padding-top:26px;padding-bottom:40px}
/* DOS COLUMNAS CUANDO HAY LUGAR. Ocho renglones en una sola columna obligan a
   scrollear para saber cuanto hay, y el «cuanto hay» es todo el argumento de
   esta pantalla. `auto-fit` la deja en una sola columna en pantallas angostas
   sin una media query aparte. */
.v2-esp-l{margin:6px auto 0;text-align:left;max-width:940px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:2px 30px}
.v2-esp-n{flex-shrink:0;min-width:34px;font-size:var(--f4);font-weight:700;
  letter-spacing:-.5px;color:var(--t700);font-variant-numeric:tabular-nums}
.v2-esp-a{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
/* El boton del renglon no compite con el primario de abajo: va chico, sin
   relleno, y aparece pegado a su propia medicion. */
.v2-esp-ok{margin:8px 0 2px;padding:5px 11px}
.v2-esp-top{padding:10px 10px 0}
/* EL SEGUIMIENTO. Va arriba del todo y por eso lleva su propia superficie: no
   es una de las cinco preguntas, es el estado de algo que ya hiciste. El tono
   sale del estado y no del gusto: vencido en ambar -pide algo hoy-, cerrado en
   teal, en curso neutro. */
.v2-hilo{border-bottom:1px solid var(--n200)}
.v2-hilo.venc{background:var(--op-bg)}
.v2-hilo.ok{background:var(--t50)}
.v2-hilo-h{display:flex;align-items:center;gap:8px;margin-bottom:9px;color:var(--i2)}
.v2-hilo-h b{font-size:var(--f2);font-weight:700;letter-spacing:-.2px;color:var(--i1)}
.v2-hilo-h i{font-size:var(--f1);font-weight:650;font-style:normal;color:var(--i3);
  border:1px solid var(--n200);border-radius:999px;padding:2px 9px}
.v2-hilo.venc .v2-hilo-h i{color:var(--op-t);border-color:var(--op-bd)}
.v2-hilo.ok .v2-hilo-h i{color:var(--t700);border-color:var(--t200)}
.v2-hilo-p{margin:0;font-size:var(--f3);color:var(--i1);line-height:1.45;max-width:78ch}
.v2-hilo-f{margin:7px 0 0;font-size:var(--f2);color:var(--i2);line-height:1.5;max-width:78ch}
.v2-hilo-n{margin-top:12px;max-width:520px}
.v2-hilo-a{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.v2-hilo-x{margin:0 0 7px;font-size:var(--f2);line-height:1.5;color:var(--t3)}
/* Lo vencido en ambar: es lo unico de la cola que pide algo HOY. */
:where(#v2-app) .v2-riel-b.venc{border-color:var(--op-bd)}
.v2-riel-b.venc .v2-riel-b-i{background:var(--op-bg);color:var(--op-t)}
.v2-riel-b.venc .v2-riel-b-t{color:var(--op-t);font-weight:650}
@media (hover:hover){ .v2-riel-b.venc:hover{background:var(--op-bg)} }
:where(#v2-app) .v2-riel-b.venc.on{background:var(--op-bg)}
/* La linea de estado tiene que LEERSE como estado y no como mas oracion: a
   igual peso y color se lee todo corrido, que es como se veia. */
.v2-riel-b.venc .v2-riel-b-t em{display:block;font-style:normal;font-weight:600;
  font-size:var(--f1);line-height:1.3;color:var(--op-t);opacity:.68;margin-top:4px}
/* El banner de vencidos envuelve SIEMPRE. Tuvo un `white-space:nowrap`
   scopeado a `.v2-riel:not(.abierta)` que, con el riel abierto, cortaba «tocá
   para ver todos» —la mitad que dice cómo salir del filtro—. La regla se fue
   con `.abierta`; queda escrito por qué este texto no se recorta. */
.v2-esp-p{margin:16px auto 0;max-width:56ch;font-size:var(--f2);color:var(--i3);line-height:1.5}
:where(#v2-app) .v2-riel-b.esp{border-color:var(--t200)}
.v2-riel-b.esp .v2-riel-b-i{background:var(--t50);color:var(--t700)}
.v2-riel-b.esp .v2-riel-b-t{color:var(--t800);font-weight:650}
@media (hover:hover){ .v2-riel-b.esp:hover{background:var(--t50)} }
/* el motivo mas frecuente es un umbral o un foco sin declarar -no un problema
   del cliente-, asi que lleva el tono de aviso, no el rojo de «problema» */
.v2-riel-b-i{flex-shrink:0;width:30px;height:30px;border-radius:var(--r8);
  background:var(--op-bg);color:var(--op-t);display:flex;align-items:center;justify-content:center}
.v2-riel-b-n{flex-shrink:0;min-width:26px;text-align:right;font-size:var(--f3);font-weight:700;
  letter-spacing:-.4px;color:var(--i1);font-variant-numeric:tabular-nums}
.v2-riel-b-t{flex:1;min-width:0;font-size:var(--f2);font-weight:600;color:var(--i2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Con el riel plegado el texto tiene su propia fila y todo el ancho, pero
   seguia en `nowrap` con ellipsis: «3 vencidos · el peor hace 15d» se leia
   «3 / vencidos · el peor …», y hace cuanto -lo unico que dice cuan urgente
   es- era justo la mitad que se cortaba. */
/* el pie de texto de la cola, solo cuando hay lugar para leerlo */
.v2-cola-ft{flex-shrink:0}

/* ══════ 3 · LA COLA A ESCALA: GRUPOS PLEGABLES Y ENCABEZADO STICKY ══════
   Con cuarenta casos la lista plana es scroll a ciegas. Se pliega por
   interlocutor —que es a quien hay que escribirle— y el rotulo de cada grupo
   se queda pegado arriba mientras se recorren sus filas, pero SOLO mientras
   dura el grupo: es sticky dentro de su propio `.v2-grp-w`. */
.v2-grp-w{display:flex;flex-shrink:0;flex-direction:column;margin:0}
:where(#v2-app) .v2-grp{position:sticky;top:0;z-index:2;flex-shrink:0;display:flex;align-items:center;gap:8px;
  width:100%;background:var(--n0);border:none;border-bottom:1px solid var(--n100);
  padding:6px 8px 6px 6px;margin:5px 0 2px;cursor:pointer;text-align:left;
  transition:background var(--tr-14) ease}
.v2-grp .v2-venc{flex-shrink:0;font-size:var(--f1);padding:1px 8px;letter-spacing:.05em}
.v2-grp .v2-it-d{margin-left:1px}
.v2-grp-w:first-child .v2-grp{margin-top:0}
@media (hover:hover){ .v2-grp:hover{background:var(--n25)} }
.v2-grp .ic{width:17px;height:17px;flex-shrink:0;border-radius:var(--r6);background:var(--t50);color:var(--t700);
  display:flex;align-items:center;justify-content:center}
.v2-grp .n{font-size:var(--f2);font-weight:700;letter-spacing:-.15px;color:var(--i1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-grp-c{font-size:var(--f1);font-weight:600;color:var(--i3);white-space:nowrap;margin-left:auto}
.v2-grp>svg{flex-shrink:0;color:var(--n400);transform:rotate(90deg);
  transition:transform .18s var(--eo)}
.v2-grp-w.off .v2-grp>svg{transform:none}
.v2-grp-b{display:flex;flex-direction:column;gap:4px;padding-left:9px;margin-left:8px;
  border-left:2px solid var(--t100)}
.v2-grp-w.off .v2-grp-b{display:none}
.v2-grp-w.off .v2-grp{border-bottom-color:transparent}

/* ══════ 3.5 · LA BANDEJA ══════
   La pantalla de «Todo el trabajo» y de cada tramo: la tabla de problemas
   ocupando el cuerpo. Antes esto no existía —entrar a un tramo sólo filtraba
   una cola de 340px al costado mientras un caso cualquiera seguía ocupando el
   centro—, y por eso el pedido de «que la lista tenga protagonismo» no se
   arreglaba con estilo: no había una vista que agrandar.
   Referencia: `CHAT GPT Imagen Dashboard Campaña v2.png`. */
.v2-band{flex:1 1 auto;min-width:0;overflow:auto;background:var(--n25)}
.v2-band-in{max-width:var(--int-wrap);margin:0 auto;padding:26px 26px 40px}
/* ══ LA CABECERA ══
   Título y bajada a la izquierda; a la derecha los tres controles que no se
   esconden nunca: buscar, filtrar y la puerta a Reglas. Van al ras de la línea
   de base del título para que el bloque lea como una sola cabecera. */
.v2-band-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:22px;flex-wrap:wrap}
/* EL TITULO CEDE Y LOS CONTROLES NO. Al reves -que es como quedo primero- el
   buscador se encogia a 195px y su propio placeholder no entraba: un campo
   que no puede decir que busca. */
.v2-band-hx{flex:1 1 280px;min-width:0;display:flex;align-items:flex-start;gap:15px}
.v2-band-hxt{min-width:0}
/* EL EMBLEMA DE LA SECCION. Mismo lenguaje que las cuatro tarjetas de abajo
   -circulo teñido, icono de 22- para que la cabecera y el tablero se lean como
   una sola pieza y no como un titulo suelto arriba de unas cajas. */
.v2-band-em{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;margin-top:4px;
  background:var(--t50);color:var(--t700);box-shadow:0 0 0 6px rgba(19,193,172,.07)}
/* EL ROTULO DE CONTEXTO: sobre que relevamiento estas parado. */
.v2-band-k{display:block;font-size:var(--f1);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t700);margin-bottom:5px}
.v2-band-k[hidden]{display:none}
/* EL GRUPO DE CONTROLES NO SE PARTE. El filete y la puerta a Reglas vivian
   sueltos al lado de este bloque, asi que al achicar la ventana la puerta se
   desprendia sola a un renglon propio, alineada a la izquierda y debajo del
   titulo: el control mas importante de la pantalla, en el peor lugar posible.
   Adentro del grupo, el grupo entero baja junto y sigue pegado a la derecha. */
/* con la puerta en la linea del titulo, buscar y filtrar bajan a su propio
   renglon: dejan de competir con ella y ganan el ancho que les faltaba */
.v2-band-hc{display:flex;align-items:center;gap:10px;flex:1 1 100%;flex-wrap:nowrap;
  justify-content:flex-start;margin-left:0;padding-bottom:2px;margin-top:4px}
.v2-band-t{font-size:var(--f6);font-weight:700;letter-spacing:-1.1px;line-height:1.05;
  color:var(--i1);margin:0}
.v2-band-d{font-size:var(--f2);font-weight:450;color:var(--i3);margin:7px 0 0;
  max-width:62ch}
@media (max-width:1280px){ .v2-band-q{flex:0 0 230px} }
@media (max-width:900px){ .v2-band-hc{width:100%} .v2-band-q{flex:1 1 auto}
  .v2-band-em{display:none} }


/* LA TIRA DE TRES NUMEROS DE CONTEXTO SE FUE A LAS TARJETAS DE LA CABECERA.
   `.v2-k` se queda porque la usa el tablero de Partners, que es de donde
   salio el ladrillo. */
:where(#v2-app) .v2-k{display:flex;align-items:baseline;gap:6px;white-space:nowrap;
  padding:2px 15px;border-left:1px solid var(--n100);background:none;border-top:0;
  border-right:0;border-bottom:0;text-align:left;color:inherit}
:where(#v2-app) .v2-band-ctx .v2-k:first-child{border-left:0}
.v2-k b{font-size:var(--f2);font-weight:700;letter-spacing:-.2px;color:var(--i1);
  font-variant-numeric:tabular-nums}
.v2-k span{font-size:var(--f1);font-weight:500;color:var(--i3);line-height:1.3}
:where(#v2-app) .v2-k.esp b{color:var(--v2-alerta)}
:where(#v2-app) .v2-k.esp span{color:var(--op-t)}
@media (max-width:1280px){ .v2-band-ctx{display:none} }

/* ══ LAS CUATRO TARJETAS DE LA CABECERA ══
   Referencia: `docs/inspiracion/Alertas 1.png`. La primera pesa una vez y media
   que las otras tres porque contesta la pregunta que se hace primero —«¿qué
   miro?»— y trae adentro la alerta concreta con la que se empieza; las otras
   tres son lecturas de una línea. */
/* TRES TARJETAS, NO CUATRO: «Comercios afectados» se retiro (punto 12) y la
   cuarta columna quedaba vacia, con las otras tres encogidas contra la
   izquierda. La primera sigue siendo la ancha porque es «tu foco de hoy». */
.v2-bk{display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:12px;margin-bottom:20px;
  align-items:stretch}

/* ── 1 · TU FOCO DE HOY ── */
.v2-fk{display:flex;flex-direction:column;gap:11px;min-width:0;position:relative;
  padding:15px 17px 0;border-radius:var(--r14);
  border:1px solid var(--mal-bd);border-left:0;
  background:linear-gradient(100deg,#fdeef0 0%,#fef5f6 46%,var(--n0) 100%);
  overflow:hidden}
/* la barra roja es un pseudo y no un `border-left`: con borde, el gradiente
   arrancaba 4px adentro y se veía un escalón contra el radio de la esquina. */
.v2-fk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--mal)}
.v2-fk.calmo{border-color:var(--t200);
  background:linear-gradient(100deg,var(--t50) 0%,#f4fcfa 46%,var(--n0) 100%)}
.v2-fk.calmo::before{background:var(--t600)}
.v2-fk-a{display:flex;align-items:flex-start;gap:13px;min-width:0}
.v2-fk-ic{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:#fbdde1;color:var(--mal);
  box-shadow:0 0 0 6px rgba(184,38,43,.07)}
.v2-fk.calmo .v2-fk-ic{background:var(--t100);color:var(--t700);
  box-shadow:0 0 0 6px rgba(19,193,172,.08)}
.v2-fk-x{min-width:0;display:flex;flex-direction:column;gap:3px}
.v2-fk-k{font-size:var(--f0);font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mal)}
.v2-fk.calmo .v2-fk-k{color:var(--t700)}
.v2-fk-t{font-size:var(--f4);font-weight:750;letter-spacing:-.45px;line-height:1.2;
  color:var(--i1)}
.v2-fk-ps{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:5px}
.v2-fk-p{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:var(--f1);font-weight:650;color:var(--i2);
  background:var(--n0);border:1px solid var(--n200)}
.v2-fk-p i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.v2-fk-p.s-crit i{background:var(--mal)} .v2-fk-p.s-alto i{background:var(--op-t)}
.v2-fk-p.s-medio i{background:#c9971f}
/* LA MÁS URGENTE NO ES UN ADORNO DE LA TARJETA: es la única alerta que la
   pantalla nombra antes de que uno filtre nada, y abre el caso de un clic. */
/* LA FILA SE SALIA POR ABAJO. Tenia `margin-bottom:-14px` de cuando la
   tarjeta cerraba con 14px de padding; al pasar el padding de abajo a cero
   -para que la fila llegue al borde- ese margen negativo la empujo 14px FUERA
   de la caja, y `overflow:hidden` le corto el segundo renglon: el titulo de
   la alerta mas urgente se leia a la mitad. Va en cero, y el aire de abajo lo
   pone el padding de la fila, que es de quien es. */
:where(#v2-app) .v2-fk-u{display:flex;align-items:center;gap:10px;width:auto;margin:auto -17px 0;
  padding:11px 17px 12px;text-align:left;cursor:pointer;color:var(--i2);
  background:rgba(255,255,255,.5);border:0;border-top:1px solid rgba(184,38,43,.15);
  border-radius:0;
  transition:background var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-fk-u:hover{background:rgba(255,255,255,.92)} }
:where(#v2-app) .v2-fk-u:active{transform:scale(.995)}
.v2-fk-u-i{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:flex;
  align-items:center;justify-content:center;background:var(--n0);color:var(--mal);
  border:1px solid var(--mal-bd)}
.v2-fk-u-x{min-width:0;display:flex;flex-direction:column;gap:1px;flex:1}
.v2-fk-u-x em{font-style:normal;font-size:var(--f1);font-weight:750;color:var(--mal)}
/* CON POCO ANCHO LA CUENTA BAJA Y EL TITULO NO SE RECORTA. Al reves -que es
   como estaba- «Mal ubicado en la go...» dejaba de nombrar la alerta, que es
   lo unico que esta fila tiene que hacer. */
.v2-fk-u-l{display:flex;align-items:baseline;gap:5px;min-width:0;flex-wrap:wrap}
.v2-fk-u-l b{font-size:var(--f2);font-weight:650;color:var(--i1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-fk-u-l i{font-style:normal;font-size:var(--f1);font-weight:450;color:var(--i3);
  white-space:nowrap;flex:0 0 auto}
.v2-fk-u>svg:last-child{flex:0 0 auto;color:var(--n400)}

/* ── 2, 3 y 4 · UNA LECTURA POR TARJETA ──
   Ícono y número en el mismo renglón —el número es el dato y el ícono su
   etiqueta gráfica—, y debajo el rótulo, la aclaración y el pie. El pie es lo
   único que cambia de forma entre las tres: barra, proporción o píldora. */
:where(#v2-app) .v2-bk-c{display:flex;flex-wrap:wrap;align-items:center;gap:0 11px;
  min-width:0;padding:14px 16px 13px;text-align:left;position:relative;
  background:var(--n0);border:1px solid var(--n100);border-radius:var(--r14);
  transition:border-color var(--tr-16) var(--v2-ez),box-shadow var(--tr-16) var(--v2-ez),
    transform var(--tr-16) var(--v2-ez)}
:where(#v2-app) .v2-bk-c.clic{cursor:pointer}
@media (hover:hover){ :where(#v2-app) .v2-bk-c.clic:hover{border-color:var(--n300);
  box-shadow:var(--sh-up);transform:translateY(-1px)} }
@media (prefers-reduced-motion:reduce){ :where(#v2-app) .v2-bk-c{transition:none}
  :where(#v2-app) .v2-bk-c.clic:hover{transform:none} }
.v2-bk-ic{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:var(--n50);color:var(--i2)}
.v2-bk-n{font-size:var(--f5);font-weight:750;letter-spacing:-.9px;line-height:1;
  color:var(--i1);font-variant-numeric:tabular-nums}
.v2-bk-l{flex:1 0 100%;margin-top:11px;font-size:var(--f3);font-weight:600;
  letter-spacing:-.2px;color:var(--i1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-bk-s{flex:1 0 100%;margin-top:3px;font-size:var(--f2);font-weight:450;color:var(--i3);
  line-height:1.35}
.v2-bk-pie{flex:1 0 100%;margin-top:11px;display:flex;align-items:center;gap:9px;min-width:0}
.v2-bk-bar{flex:1;min-width:0;height:6px;border-radius:999px;background:var(--n100);
  overflow:hidden;display:block}
.v2-bk-bar i{display:block;height:100%;border-radius:999px;background:var(--t600);
  transition:width var(--tr-16) var(--v2-ez)}
.v2-bk-bar.com i{background:var(--v2-navy)}
.v2-bk-bn{font-style:normal;font-size:var(--f1);font-weight:600;color:var(--i3);
  font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}
.v2-bk-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  font-size:var(--f1);font-weight:700}
.v2-bk-pill.op{background:var(--op-bg);color:var(--op-t);border:1px solid var(--op-bd)}
.v2-bk-pill.ok{background:var(--t50);color:var(--t700);border:1px solid var(--t100)}
/* el color del ícono dice de qué habla la tarjeta, y es el mismo que usa el
   resto de la app para esa idea: teal para lo que avanza, azul para el
   territorio, ámbar para lo que falta declarar. */
.k-seg .v2-bk-ic{background:var(--t50);color:var(--t700)}
.k-resp .v2-bk-ic{background:var(--n50);color:var(--i2)}
.k-esp .v2-bk-ic{background:var(--op-bg);color:var(--op-t)}
.k-esp{border-color:var(--op-bd)}
/* EL CORTE A DOS COLUMNAS ES A 1360 Y NO A 1180, y la diferencia son los
   227px de la barra lateral: la media query mide la VENTANA y las tarjetas
   viven en lo que queda. A 1280 de ventana el contenido son 1000, o sea
   tarjetas de 217px donde «6 alertas requieren atencion» se parte en dos
   renglones y las pildoras en otros dos. */
/* TRES COLUMNAS Y NO DOS. Con «Tu foco de hoy» a todo el ancho, dos columnas
   dejaban la cuarta tarjeta sola en una fila con una celda vacia al lado:
   ochenta pixeles de nada en el lugar mas caro de la pantalla. Las otras tres
   son del mismo tamano y entran juntas. */
@media (max-width:1360px){ .v2-bk{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v2-fk{grid-column:1/-1} }
@media (max-width:860px){ .v2-bk{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .v2-bk{grid-template-columns:minmax(0,1fr)} }

/* ══ LA FILA DE HERRAMIENTAS ══
   Gravedades a la izquierda, cómo se mira a la derecha. Los chips ceden ancho
   —se recortan si hace falta—; los de la derecha no, porque son controles y
   medio control no sirve. */
.v2-band-fil{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:13px;flex-wrap:nowrap}
.v2-band-chips{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  min-width:0;flex:1 1 auto;overflow:hidden}
.v2-band-her{display:flex;align-items:center;gap:9px;flex:0 0 auto}
@media (max-width:980px){ .v2-band-fil{flex-wrap:wrap}
  .v2-band-chips{flex-wrap:wrap;overflow:visible} }

/* EL BUSCADOR VIVE EN LA CABECERA, con «Filtros» y la puerta a Reglas. */
.v2-band-q{flex:0 0 352px;min-width:0;display:flex;align-items:center;gap:8px;
  background:var(--n0);border:1px solid var(--n200);border-radius:var(--r10);
  padding:0 12px;height:38px;color:var(--i3);
  transition:border-color var(--tr-14) ease,box-shadow var(--tr-14) ease}
.v2-band-q:focus-within{border-color:var(--t600);box-shadow:var(--ring)}
:where(#v2-app) .v2-band-q input{flex:1;min-width:0;border:0;background:none;outline:none;
  font-size:var(--f2);font-weight:450;color:var(--i1);height:100%}

/* «ORDENAR POR» LLEVA SU RÓTULO. Un desplegable que dice «Más recientes» sin
   decir de qué se lee como un filtro puesto y no como un orden elegido. */
.v2-band-ord{display:flex;align-items:center;gap:8px}
.v2-band-ord>span{font-size:var(--f2);font-weight:500;color:var(--i3);white-space:nowrap}
:where(#v2-app) .v2-band-ord select{height:34px;padding:0 30px 0 12px;font-size:var(--f2);
  font-weight:600;color:var(--i1);background:var(--n0) var(--chev) no-repeat right 11px center;
  border:1px solid var(--n200);border-radius:var(--r10);cursor:pointer;
  -webkit-appearance:none;appearance:none}
@media (hover:hover){ :where(#v2-app) .v2-band-ord select:hover{border-color:var(--i3)} }
@media (max-width:1240px){ .v2-band-ord>span{display:none} }

/* ══ FILTRAR DE VERDAD ══
   Acá decía que el filtrado no estaba construido y que un select que no filtra
   es peor que no tenerlo. Sigue siendo cierto — y por eso ahora los tres
   filtran: dónde, con qué regla y quién lo resuelve. Las opciones se arman con
   los valores presentes en los casos, así que ninguna deja la lista vacía. */
.v2-band-fw{position:relative}
:where(#v2-app) .v2-band-fbt{display:inline-flex;align-items:center;gap:7px;height:40px;
  padding:0 13px;font-size:var(--f2);font-weight:600;color:var(--i2);background:var(--n0);
  border:1px solid var(--n200);border-radius:var(--r10);cursor:pointer;
  transition:border-color var(--tr-14) ease,color var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-band-fbt:hover{border-color:var(--i3);color:var(--i1)} }
:where(#v2-app) .v2-band-fbt.on{border-color:var(--t600);color:var(--t800);background:var(--t50)}
:where(#v2-app) .v2-band-fbt.con{border-color:var(--t600);color:var(--t800)}
.v2-band-fn{font-size:var(--f0);font-weight:700;background:var(--t600);color:#fff;
  border-radius:999px;min-width:17px;height:17px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 5px}
.v2-band-fn:empty{display:none}
/* EL POPOVER CUELGA DEL BORDE DERECHO DEL BOTON. Con `left:0` se abria hacia
   afuera de la pantalla: «Filtros» vive ahora en la cabecera, pegado al borde
   derecho, y los cuatro selectores quedaban cortados por la mitad. */
.v2-band-pop{position:absolute;top:calc(100% + 7px);right:0;z-index:40;min-width:300px;
  background:var(--n0);border:1px solid var(--n200);border-radius:var(--r14);
  box-shadow:var(--sh-over);padding:15px;
  /* cuelga de la esquina superior derecha de «Filtros»: sale de ahi. */
  transform-origin:100% 0;
  /* transicion y no keyframe: este popover se abre y se cierra seguido, y un
     keyframe reinicia desde cero cada vez que lo interrumpen. */
  opacity:1;transform:none;
  transition:opacity var(--mo-3) var(--ez-out),transform var(--mo-3) var(--ez-out)}
@starting-style{ .v2-band-pop{opacity:0;transform:translateY(-5px) scale(.96)} }
@media (prefers-reduced-motion:reduce){ .v2-band-pop{transition:none} }
.v2-band-pop-in{display:flex;flex-direction:column;gap:12px}
.v2-band-pf{display:flex;flex-direction:column;gap:5px}
.v2-band-pf>span{font-size:var(--f1);font-weight:650;color:var(--i2)}
:where(#v2-app) .v2-band-plim{align-self:flex-start;font-size:var(--f1);font-weight:650;
  color:var(--i3);background:none;border:0;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;padding:2px 0}
@media (hover:hover){ :where(#v2-app) .v2-band-plim:hover{color:var(--mal)} }
/* `.v2-band-ord` se declara una sola vez, arriba, con la cabecera: el orden
   se mudo alla y dejar la version vieja aca la pisaba entera. */

/* ══ LOS CHIPS DE GRAVEDAD ══
   Un punto de color, la palabra en plural y la cuenta. El punto existe para que
   no dependa sólo del color: quien no distingue rojo de ámbar sigue leyendo
   «Críticas». La de críticas va teñida ya en reposo —es la única— porque es la
   que la referencia destaca y es la que se toca. */
:where(#v2-app) .v2-chip{display:inline-flex;align-items:center;gap:7px;height:33px;
  padding:0 14px;font-size:var(--f2);font-weight:650;color:var(--i2);background:var(--n0);
  border:1px solid var(--n200);border-radius:999px;cursor:pointer;white-space:nowrap;
  box-shadow:var(--sh-rest);
  transition:border-color var(--tr-14) ease,background var(--tr-14) ease,
    color var(--tr-14) ease,transform var(--tr-14) var(--v2-ez)}
:where(#v2-app) .v2-chip i{width:7px;height:7px;border-radius:50%;background:var(--n300);
  flex:0 0 auto}
:where(#v2-app) .v2-chip b{font-weight:650;font-variant-numeric:tabular-nums;color:var(--n400)}
@media (hover:hover){ :where(#v2-app) .v2-chip:hover{border-color:var(--i3);color:var(--i1)} }
:where(#v2-app) .v2-chip:active{transform:scale(.97)}
:where(#v2-app) .v2-chip.vacio{opacity:.55;box-shadow:none}
:where(#v2-app) .v2-chip.on{background:var(--i1);border-color:var(--i1);color:#fff}
:where(#v2-app) .v2-chip.on b{color:rgba(255,255,255,.72)}
:where(#v2-app) .v2-chip.s-crit{background:var(--mal-bg);border-color:var(--mal-bd);
  color:var(--mal)}
:where(#v2-app) .v2-chip.s-crit b{color:rgba(184,38,43,.62)}
:where(#v2-app) .v2-chip.s-crit i{background:var(--mal)}
:where(#v2-app) .v2-chip.s-alto i{background:var(--op-t)}
:where(#v2-app) .v2-chip.s-medio i{background:#c9971f}
:where(#v2-app) .v2-chip.s-bajo i{background:var(--c-no)}
:where(#v2-app) .v2-chip.s-crit.on{background:var(--mal);border-color:var(--mal);color:#fff}
:where(#v2-app) .v2-chip.s-alto.on{background:var(--op-t);border-color:var(--op-t);color:#fff}
:where(#v2-app) .v2-chip.s-medio.on{background:#a67b12;border-color:#a67b12;color:#fff}
:where(#v2-app) .v2-chip.s-bajo.on{background:var(--t700);border-color:var(--t700);color:#fff}
:where(#v2-app) .v2-chip.on i{background:rgba(255,255,255,.9)}
:where(#v2-app) .v2-chip.on b{color:rgba(255,255,255,.72)}
/* el conmutador lista/tarjetas: dos botones en una sola cápsula */
.v2-band-vw{display:inline-flex;background:var(--n0);border:1px solid var(--n200);
  border-radius:var(--r10);overflow:hidden}
:where(#v2-app) .v2-band-vw button{width:36px;height:34px;display:flex;align-items:center;
  justify-content:center;background:none;border:0;cursor:pointer;color:var(--n400);
  transition:color var(--tr-14) ease,background var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-band-vw button:hover{color:var(--i2)} }
:where(#v2-app) .v2-band-vw button.on{background:var(--i1);color:#fff}

/* ══ EL RENGLÓN QUE CUENTA, Y LA BARRA DE SELECCIÓN ══
   El mismo lugar dice «7 alertas» mientras no hay nada tildado y se convierte
   en las acciones en cuanto lo hay: la barra aparece donde estaba mirando el
   ojo, no flotando sobre la lista tapando dos filas. */
.v2-band-n{display:flex;align-items:center;gap:8px;margin-bottom:10px;min-height:32px}
.v2-band-n-t{font-size:var(--f3);font-weight:700;letter-spacing:-.3px;color:var(--i1);
  font-variant-numeric:tabular-nums}
.v2-band-n-d{font-style:normal;font-size:var(--f2);font-weight:500;color:var(--i3)}
.v2-selb{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px 6px 14px;
  background:var(--i1);border-radius:var(--r10);color:#fff;
  animation:v2selIn .16s var(--v2-ez) both}
@keyframes v2selIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .v2-selb{animation:none} }
.v2-selb>b{font-size:var(--f2);font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.v2-selb-n{font-style:normal;font-size:var(--f2);font-weight:450;color:rgba(255,255,255,.66);
  white-space:nowrap;font-variant-numeric:tabular-nums;
  padding-left:11px;border-left:1px solid rgba(255,255,255,.2)}
.v2-selb-sp{flex:1}
:where(#v2-app) .v2-selb-b{display:inline-flex;align-items:center;gap:7px;height:30px;
  padding:0 13px;font-size:var(--f2);font-weight:650;color:#fff;white-space:nowrap;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r8);cursor:pointer;
  transition:background var(--tr-14) ease,border-color var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-selb-b:hover{background:rgba(255,255,255,.22)} }
:where(#v2-app) .v2-selb-b:active{transform:scale(.97)}
/* armado: el segundo clic descarta de verdad, así que el botón deja de
   parecerse a sus vecinos antes de hacerlo. */
:where(#v2-app) .v2-selb-b.arm{background:var(--mal);border-color:var(--mal)}
:where(#v2-app) .v2-selb-x{width:30px;height:30px;display:flex;align-items:center;
  justify-content:center;color:rgba(255,255,255,.7);background:none;border:0;cursor:pointer;
  border-radius:var(--r8);transition:color var(--tr-14) ease,background var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-selb-x:hover{color:#fff;
  background:rgba(255,255,255,.14)} }

/* ══ LA PÍLDORA DE GRAVEDAD ══
   Un punto de color y una palabra. El punto existe para que no dependa sólo
   del color: quien no distingue rojo de ámbar sigue leyendo «Crítico». */
.v2-sev{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;
  border-radius:999px;font-size:var(--f1);font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;border:1px solid transparent}
.v2-sev i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.v2-sev.s-crit{background:var(--mal-bg);color:var(--mal);border-color:var(--mal-bd)}
.v2-sev.s-alto{background:var(--op-bg);color:var(--op-t);border-color:var(--op-bd)}
.v2-sev.s-medio{background:#fdf8e8;color:#8a6d10;border-color:#f0e4bc}
.v2-sev.s-bajo{background:var(--t50);color:var(--t700);border-color:var(--t100)}

/* ══ LAS FILAS ══
   LA FILA DEJÓ DE SER UN `<button>`. Tiene adentro una casilla de selección y
   un botón de tomar, y meter controles dentro de un `<button>` es la trampa que
   ya costó caro: el parser cierra el de afuera y la grilla se rompe en silencio.
   Ahora es un `<div>` con un botón ABSOLUTO por debajo que lo cubre entero —el
   área clicable no se perdió, el foco de teclado tampoco— y los dos controles
   viven arriba con `pointer-events` propios. */
.v2-band-tb{background:var(--n0);border:1px solid var(--n100);border-radius:var(--r14);
  overflow:hidden}
.v2-bf{position:relative;display:grid;width:100%;text-align:left;
  grid-template-columns:20px 46px minmax(0,1fr) 96px 104px 142px 96px 28px 16px;
  align-items:center;gap:14px;padding:13px 18px;
  border-top:1px solid var(--n100);transition:background var(--tr-14) ease}
.v2-bf:first-child{border-top:0}
:where(#v2-app) .v2-bf-hit{position:absolute;inset:0;z-index:0;padding:0;margin:0;
  background:none;border:0;cursor:pointer;border-radius:0}
:where(#v2-app) .v2-bf-hit:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--t600)}
.v2-bf>*:not(.v2-bf-hit){position:relative;z-index:1;pointer-events:none;min-width:0}
:where(#v2-app) .v2-bf .v2-bf-ck,
:where(#v2-app) .v2-bf .v2-bf-tomar{pointer-events:auto}
@media (hover:hover){ .v2-bf:hover{background:var(--n25)} }
/* LA BARRA ROJA ES DE LAS CRÍTICAS Y DE NADIE MÁS. En la referencia sólo la
   primera fila la tiene: es el acento que dice «empezá por acá», y ponerlo en
   cuatro filas lo convierte en decoración. */
.v2-bf.sv-crit::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--mal);z-index:2}
/* LA FILA ELEGIDA SE TIÑE DE SU GRAVEDAD, no de rojo siempre: pintar de rojo un
   caso «Bajo» era decir dos cosas contradictorias sobre la misma fila. */
.v2-bf.on{background:var(--n50);box-shadow:inset 3px 0 0 var(--i1)}
.v2-bf.on.sv-crit{background:var(--mal-bg);box-shadow:none}
.v2-bf.on.sv-alto{background:var(--op-bg);box-shadow:inset 3px 0 0 var(--op-t)}
.v2-bf.on.sv-medio{background:#fdf8e8;box-shadow:inset 3px 0 0 #a67b12}
.v2-bf.on.sv-bajo{background:var(--t50);box-shadow:inset 3px 0 0 var(--t600)}
.v2-bf.tic{background:var(--t50)}
.v2-bf.tic.on{background:var(--t100)}

.v2-bf-ck{display:flex;align-items:center;justify-content:center;cursor:pointer}
:where(#v2-app) .v2-bf-ck input{width:17px;height:17px;margin:0;cursor:pointer;
  accent-color:var(--t600)}
.v2-bf-th{width:46px;height:46px;border-radius:var(--r10);overflow:hidden;position:relative;
  background:var(--n50);border:1px solid var(--n100);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--i3)}
.v2-bf-th img{width:100%;height:100%;object-fit:cover;display:block}
.v2-bf-tx{display:flex;flex-direction:column;gap:2px}
.v2-bf-t{font-size:var(--f3);font-weight:650;letter-spacing:-.2px;color:var(--i1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-bf-s{font-size:var(--f2);font-weight:450;color:var(--i3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* LOS TRES DATOS DEL RENGLÓN DE ABAJO: cuántos comercios, dónde, y con qué
   regla. El tercero es el que faltaba, y es el que contesta «¿y esto por qué es
   una alerta?» sin abrir nada. Se recorta con puntos suspensivos y nunca parte
   en dos renglones: una lista donde cada fila mide distinto no se puede barrer. */
.v2-bf-m{display:flex;align-items:center;gap:15px;font-size:var(--f2);font-weight:500;
  color:var(--i3);margin-top:3px;flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
.v2-bf-mi{display:inline-flex;align-items:center;gap:6px;min-width:0;
  overflow:hidden;text-overflow:ellipsis}
.v2-bf-mi svg{flex:0 0 auto;color:var(--n400)}
.v2-bf-mi.reg{min-width:0;flex:0 1 auto}
/* ══ QUIÉN LO RESUELVE ══
   Dos círculos con «?» adentro no son un responsable. El rol arriba
   —Distribuidor, Vendedor, Agencia— y abajo si está asignado o no, que es lo
   único que se hace con ese dato: declararlo. */
.v2-bf-rp{display:flex;align-items:center;gap:10px}
.v2-bf-rpx{display:flex;flex-direction:column;gap:1px;min-width:0}
.v2-bf-rpx b{font-size:var(--f2);font-weight:650;color:var(--i1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-bf-rpx em{font-style:normal;font-size:var(--f2);font-weight:450;color:var(--i3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-bf-rp.sin .v2-bf-rpx em{color:var(--n400)}
.v2-bf-av{width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--f1);font-weight:700;letter-spacing:.02em;
  background:var(--v2-navy-bg);color:var(--v2-navy)}
.v2-bf-av.yo{background:var(--t700);color:#fff}
.v2-bf-rp.sin .v2-bf-av{background:var(--n50);color:var(--n400);border:1px solid var(--n100)}
.v2-bf-f{font-size:var(--f2);font-weight:450;color:var(--i3);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* TOMAR SIGUE COSTANDO UN CLIC, y dejó de ser una columna de datos: se revela
   al pasar el mouse por la fila y está siempre disponible por teclado. */
:where(#v2-app) .v2-bf-tomar{width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--n400);background:var(--n0);border:1px dashed var(--n300);opacity:0;
  transition:opacity var(--tr-14) ease,color var(--tr-14) ease,
    border-color var(--tr-14) ease,background var(--tr-14) ease}
.v2-bf:hover .v2-bf-tomar,
:where(#v2-app) .v2-bf-tomar:focus-visible,
:where(#v2-app) .v2-bf-tomar.yo{opacity:1}
:where(#v2-app) .v2-bf-tomar.yo{color:var(--t700);border-style:solid;
  border-color:var(--t200);background:var(--t50)}
@media (hover:hover){ :where(#v2-app) .v2-bf-tomar:hover{color:var(--t700);
  border-color:var(--t600);border-style:solid;background:var(--t100)} }
.v2-bf-ch{color:var(--n400);display:flex;align-items:center;justify-content:flex-end}
@media (hover:hover){ .v2-bf:hover .v2-bf-ch{color:var(--i2)} }

/* el botón de tomar en la barra del panel */
:where(#v2-app) .v2-pan-tomar{display:inline-flex;align-items:center;gap:7px;
  font-size:var(--f1);font-weight:650;color:var(--i2);background:none;
  border:1px dashed var(--n300);border-radius:var(--r8);padding:4px 10px 4px 6px;
  cursor:pointer}
:where(#v2-app) .v2-pan-tomar.on{border-style:solid;border-color:var(--t600);
  color:var(--t800);background:var(--t100)}
@media (hover:hover){ :where(#v2-app) .v2-pan-tomar:hover{border-color:var(--i3);color:var(--i1)} }
/* el recorte «míos» */
:where(#v2-app) .v2-band-mios{display:inline-flex;align-items:center;gap:7px;height:34px;
  font-size:var(--f2);font-weight:650;color:var(--i2);background:var(--n0);
  border:1px solid var(--n200);border-radius:999px;padding:0 15px;cursor:pointer;
  transition:border-color var(--tr-14) ease,background var(--tr-14) ease,color var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-band-mios:hover{border-color:var(--i3);color:var(--i1)} }
:where(#v2-app) .v2-band-mios.on{background:var(--i1);border-color:var(--i1);color:#fff}
.v2-band-mios-n{font-weight:700;font-variant-numeric:tabular-nums;opacity:.72}
.v2-band-mios-n:empty{display:none}

/* ══ CON EL PANEL ABIERTO ══
   La lista pierde la hora y el rol escrito, no las columnas que se comparan
   mientras se recorre: gravedad, estado y la cara de quién la tiene. El dato
   que se va lo dice el caso abierto, que es justo lo que está a la derecha. */
#v2-app.con-caso .v2-bf{grid-template-columns:18px 40px minmax(0,1fr) 84px 92px 30px 24px 14px;
  gap:9px;padding:11px 13px}
#v2-app.con-caso .v2-bf-f{display:none}
#v2-app.con-caso .v2-bf-rpx{display:none}
#v2-app.con-caso .v2-bf-th{width:40px;height:40px}
#v2-app.con-caso .v2-bf-m{gap:10px}
#v2-app.con-caso .v2-bf-mi.reg{display:none}
#v2-app.con-caso .v2-bf-sev .v2-sev,
#v2-app.con-caso .v2-bf-est .v2-est{font-size:var(--f0);padding:3px 8px}
#v2-app.con-caso .v2-bf-av{width:26px;height:26px}
/* `.con-caso` ES DE LA BANDEJA, NO DE TODO EL v2: la clase queda puesta en
   `#v2-app` mientras haya un caso elegido, así que sin acotar se colaba en
   Partners y en Reglas, que comparten los mismos ladrillos. */
#v2-app.con-caso .v2-band .v2-bk{grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}
#v2-app.con-caso .v2-band .v2-fk{grid-column:1/-1}
/* con el cajon abierto quedan dos columnas y tres tarjetas: la ultima se
   llevaba una fila con una celda vacia al lado. Ocupa las dos. */
#v2-app.con-caso .v2-band .v2-bk>.v2-bk-c:last-child{grid-column:1/-1}
/* CON EL CAJON ABIERTO LA FILA DE HERRAMIENTAS SE APILA. A ~450px las
   gravedades y los tres controles de la derecha se repartian el renglon a la
   mitad cada uno y las dos mitades terminaban en cuatro renglones cada una:
   ocho lineas de controles arriba de una lista de la que se veian tres filas.
   Apilados son dos. Se declara en bloque -y no con `flex-wrap`- para que no
   dependa de que ninguna base de flex gane por orden. */
#v2-app.con-caso .v2-band .v2-band-fil{display:block}
#v2-app.con-caso .v2-band .v2-band-chips{display:flex;flex-wrap:wrap;overflow:visible;
  margin-bottom:14px;gap:7px}
#v2-app.con-caso .v2-band .v2-band-her{display:flex;flex-wrap:wrap;justify-content:flex-start;
  gap:8px}
#v2-app.con-caso .v2-band .v2-bk-c{padding:10px 12px}
#v2-app.con-caso .v2-band .v2-bk-ic{width:26px;height:26px;border-radius:8px}
#v2-app.con-caso .v2-band .v2-bk-ic svg{width:14px;height:14px}
#v2-app.con-caso .v2-band .v2-bk-n{font-size:var(--f4);letter-spacing:-.6px}
#v2-app.con-caso .v2-band .v2-bk-l{font-size:var(--f2);margin-top:8px}
#v2-app.con-caso .v2-band .v2-bk-s{display:none}
#v2-app.con-caso .v2-band .v2-bk-pie{margin-top:8px}
#v2-app.con-caso .v2-band .v2-fk{padding:13px 15px 0;gap:10px}
#v2-app.con-caso .v2-band .v2-fk-u{margin:auto -15px 0;padding:9px 15px}
#v2-app.con-caso .v2-band .v2-fk-t{font-size:var(--f3)}
#v2-app.con-caso .v2-band .v2-fk-ic{width:30px;height:30px}
#v2-app.con-caso .v2-band .v2-band-hc{flex-wrap:wrap;justify-content:flex-end}
#v2-app.con-caso .v2-band .v2-band-q{flex:0 0 190px}
/* CON EL PANEL ABIERTO LAS TARJETAS NO SE VUELVEN UNA SOLA: a una columna la
   foto se estiraba a 700px de ancho y la vista dejaba de servir para barrer. */
#v2-app.con-caso .v2-band .v2-band-cards{grid-template-columns:repeat(auto-fill,minmax(186px,1fr))}

/* ══ LAS TARJETAS ══
   El mismo array, mirado por la evidencia. Sirve para barrer «qué góndolas
   están mal» sin abrir nada, que es una pregunta distinta de «cuál agarro
   primero» — y es la única vista donde la foto tiene tamaño para decir algo. */
.v2-band-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;
  align-items:stretch}
:where(#v2-app) .v2-bc{display:flex;flex-direction:column;height:100%;text-align:left;cursor:pointer;
  background:var(--n0);border:1px solid var(--n100);border-radius:var(--r14);overflow:hidden;
  padding:0;transition:border-color var(--tr-16) var(--v2-ez),box-shadow var(--tr-16) var(--v2-ez),
    transform var(--tr-16) var(--v2-ez)}
@media (hover:hover){ :where(#v2-app) .v2-bc:hover{border-color:var(--n300);
  box-shadow:var(--sh-up);transform:translateY(-2px)} }
@media (prefers-reduced-motion:reduce){ :where(#v2-app) .v2-bc{transition:none}
  :where(#v2-app) .v2-bc:hover{transform:none} }
:where(#v2-app) .v2-bc.on{border-color:var(--i1);box-shadow:var(--ring)}
:where(#v2-app) .v2-bc.on.sv-crit{border-color:var(--mal);box-shadow:0 0 0 3px var(--mal-bd)}
:where(#v2-app) .v2-bc.on.sv-alto{border-color:var(--op-t);box-shadow:0 0 0 3px var(--op-bd)}
.v2-bc-ph{position:relative;display:block;aspect-ratio:16/10;max-height:190px;background:var(--n50);
  border-bottom:1px solid var(--n100);overflow:hidden;max-width:100%}
.v2-bc-ph img{width:100%;height:100%;object-fit:cover;display:block}
.v2-bc-em{position:absolute;left:9px;top:9px;width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.94);
  color:var(--i1);box-shadow:0 1px 4px rgba(0,0,0,.16)}
.v2-bc-ph .v2-sev{position:absolute;right:9px;top:9px}
.v2-bc-ph:not(.con) .v2-bc-em{left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;box-shadow:none;background:var(--n0);border:1px solid var(--n100)}
.v2-bc-b{display:flex;flex-direction:column;gap:6px;padding:12px 13px 13px;flex:1}
.v2-bc-t{font-size:var(--f2);font-weight:700;letter-spacing:-.2px;color:var(--i1);
  line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.v2-bc-m{display:flex;align-items:center;gap:5px;font-size:var(--f1);font-weight:500;
  color:var(--i3);flex-wrap:wrap}
.v2-bc-f{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;
  border-top:1px solid var(--n100);flex-wrap:wrap}
.v2-bc-h{font-size:var(--f1);font-weight:500;color:var(--i3);margin-left:auto}
.v2-bc-f .v2-bf-cars{margin-left:auto}

.v2-band-pie{display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:var(--f1);font-weight:500;color:var(--i3);margin-top:15px;flex-wrap:wrap}
.v2-band-pie b{font-weight:700;color:var(--i1);font-variant-numeric:tabular-nums}
.v2-band-pie i{font-style:normal;color:var(--n400)}
.v2-pag{display:inline-flex;align-items:center;gap:4px}
:where(#v2-app) .v2-pag button{min-width:31px;height:31px;padding:0 8px;display:flex;
  align-items:center;justify-content:center;font-size:var(--f1);font-weight:650;
  color:var(--i2);background:var(--n0);border:1px solid var(--n200);border-radius:var(--r8);
  cursor:pointer;font-variant-numeric:tabular-nums;
  transition:border-color var(--tr-14) ease,background var(--tr-14) ease,color var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-pag button:not(:disabled):hover{border-color:var(--i3);
  color:var(--i1)} }
:where(#v2-app) .v2-pag button.on{background:var(--i1);border-color:var(--i1);color:#fff}
:where(#v2-app) .v2-pag button:disabled{opacity:.4;cursor:default}
.v2-pag-e{color:var(--n400);padding:0 2px}

/* ══════ 4 · EL PANEL COMO DOCUMENTO ══════ */
/* EL PANEL ENTRA POR LA DERECHA Y NO TAPA LA LISTA. Es el modo Jira que se
   pidió: se elige un problema y se abre al lado, sin perder de vista dónde
   estabas ni cuántos quedan. */
/* EL REPARTO DEL ANCHO ES EL DE LA REFERENCIA. Estaba en 38%, o sea 488px a
   1512, y con eso los tres chips de la ficha se apilaban en tres renglones y la
   foto entraba a 150px. En `docs/inspiracion/Problemas.png` el panel se lleva
   ~45% —los chips van en UNA fila y la foto mide 210px— y la lista sigue
   entrando entera. El panel es donde se decide; la lista solo elige. */
/* ══ EL PANEL ES UN CAJÓN, NO UNA TARJETA FLOTANTE ══
   La sección lleva `42px 52px 66px` —el padding de la plataforma— y eso le
   quedaba dando vuelta AL PANEL: arriba, a la derecha y abajo. Un cajón que
   entra desde el borde derecho tiene que tocar el borde; el aire va adentro,
   con el texto. Los márgenes negativos cancelan el padding de la sección en
   los tres lados que dan al borde, y el izquierdo queda porque ahí está la
   lista. Y se lleva la mitad de la pantalla, que es lo que hace falta para
   leer un caso sin scrollear tres veces. */
#v2-app.con-caso .v2-pan{flex:0 0 clamp(560px, 58%, 980px);
  border-left:1px solid var(--n200);box-shadow:-18px 0 44px rgba(14,28,30,.07)}
#v2-app:not(.con-caso) .v2-pan{display:none}
@media (max-width:1180px){ #v2-app.con-caso .v2-band{display:none}
  #v2-app.con-caso .v2-pan{flex:1 1 auto} }

/* EL ENCABEZADO DEL CASO, EN MODO PANEL. Está diseñado para el ancho de una
   pantalla —foto al costado, titular a 32px, magnitud en tarjeta aparte— y en
   480px eso no se encoge: se desarma. La foto empuja al titular a una columna
   de nueve caracteres y la tarjeta de la magnitud se monta encima.
   Acá la misma información se apila: la foto pasa a ser una banda ancha, el
   titular baja un escalón de tipografía y la magnitud se estira a lo ancho en
   vez de flotar al costado. No se saca nada, se reordena. */
.v2-pan-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 16px 11px 12px;border-bottom:1px solid var(--n100);background:var(--n0);
  position:sticky;top:0;z-index:12}
/* el pase al otro producto: dos renglones, porque el nombre solo no dice qué
   vas a encontrar del otro lado. */
:where(#v2-app) .v2-ib.cambio{display:inline-flex;align-items:center;gap:9px;
  background:var(--n0);border:1px solid var(--n200);border-radius:var(--r10);
  padding:6px 13px 6px 11px;color:var(--i2);height:auto;cursor:pointer}
@media (hover:hover){ :where(#v2-app) .v2-ib.cambio:hover{border-color:var(--i3);
  background:var(--n25);color:var(--i1)} }
.v2-ib-x{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.v2-ib-x b{font-size:var(--f1);font-weight:650;color:var(--i1)}
.v2-ib-x span{font-size:var(--f1);font-weight:450;color:var(--i3);white-space:nowrap}

.v2-pan-bar-r{display:flex;align-items:center;gap:4px}
:where(#v2-app) .v2-pan-full{display:inline-flex;align-items:center;gap:6px;
  font-size:var(--f1);font-weight:650;color:var(--i2);background:none;
  border:1px solid var(--n200);border-radius:var(--r8);padding:5px 10px;cursor:pointer}
@media (hover:hover){ :where(#v2-app) .v2-pan-full:hover{background:var(--n50);
  border-color:var(--i3);color:var(--i1)} }

/* EL MODO ANCHO. El panel se lleva la fila entera y la lista se va; no es otra
   pantalla ni otro DOM, es el mismo panel con el límite del otro lado. Por eso
   la transición es sobre `flex-basis` y no una aparición: se ve de dónde salió
   y adónde vuelve. */
#v2-app.con-caso .v2-pan{transition:flex-basis .28s var(--v2-ez)}
/* Partners, Campañas y Tus reglas se leen enteras: son pantallas de declarar,
   no de comparar contra la lista. */
#v2-app.vista-mirar .v2-band{display:none}
#v2-app.vista-mirar .v2-pan{flex:1 1 auto;box-shadow:none;border-left:0}
#v2-app.con-caso.pan-ancho .v2-band{display:none}
#v2-app.con-caso.pan-ancho .v2-pan{flex:1 1 auto;box-shadow:none;border-left:0}
/* ampliado hay ancho de sobra: el caso vuelve a leerse como documento, con el
   cuerpo centrado y las tres columnas del resumen que en 480px no entraban. */
#v2-app.pan-ancho .v2-pan .v2-in{max-width:var(--int-wrap);margin:0 auto;padding:0 26px}
#v2-app.pan-ancho .v2-pan .v2-hero-g{grid-template-columns:minmax(0,1fr) 280px;gap:28px}
#v2-app.pan-ancho .v2-pan .v2-hero-t{font-size:var(--f6);letter-spacing:-1.1px}
#v2-app.pan-ancho .v2-pan .v2-q1{grid-template-columns:1fr 1.4fr 1fr}
@media (prefers-reduced-motion:reduce){ #v2-app.con-caso .v2-pan{transition:none} }
:where(#v2-app) .v2-pan-back{display:inline-flex;align-items:center;gap:7px;
  font-size:var(--f1);font-weight:650;color:var(--i2);background:none;border:0;
  padding:5px 7px;border-radius:var(--r8);cursor:pointer}
@media (hover:hover){ :where(#v2-app) .v2-pan-back:hover{background:var(--n50);color:var(--i1)} }
:where(#v2-app) .v2-pan-x{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:var(--r8);color:var(--i3);background:none;border:0;
  cursor:pointer}
@media (hover:hover){ :where(#v2-app) .v2-pan-x:hover{background:var(--n50);color:var(--i1)} }

/* LA BARRA DE ACCIÓN SE APILA. Tiene tres cosas en fila —cuántos van, en qué
   estado, y el botón— y a 480px el botón se cortaba por la mitad: el único
   control irreversible de la pantalla, ilegible. Acá el botón se lleva su
   propio renglón y el ancho entero, que además es como está en la referencia. */
/* LA BARRA DEL PIE SE RETIRÓ, así que el contenido deja de reservarle 126px.
   Eran 126 de los ~820 de alto útil del panel: una sexta parte de la pantalla
   gastada en repetir un botón que ya está en «Acción recomendada». */
.v2-pan{--v2-accion-h:14px}
#v2-app.pan-ancho .v2-pan{--v2-accion-h:14px}


/* LAS CLASES SON `.v2-dat*` Y NO `.v2-tl*`: `.v2-tl` YA EXISTIA, es el
   histograma de «Cuándo se visitaron», y estas reglas se lo estaban comiendo
   —le ponían fondo blanco, borde y padding a un gráfico de barras—. No dio un
   solo error: se vio porque los tiles medían fuera de su propio contenedor.
   Es la trampa que el CLAUDE.md nombra primero: antes de nombrar algo, grep. */
/* los tres datos duros, en una franja al pie del encabezado: no son tarjetas
   —serían tres cajas más sobre un panel que ya tiene dos— sino tres columnas
   separadas por un filete. */
/* el padding de arriba no es aire decorativo: sin él la franja arranca pegada
   al borde del hero y sus rótulos quedan debajo del bloque teñido, así que se
   leían los valores sin saber de qué eran. */
.v2-dat{background:var(--n0);border-bottom:1px solid var(--n100);padding:14px 0;
  position:relative;z-index:1}
.v2-dat-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border:1px solid var(--n100);border-radius:var(--r12);overflow:hidden}
.v2-dat-i{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;min-width:0;
  border-right:1px solid var(--n100)}
.v2-dat-i:last-child{border-right:0}
.v2-dat-ic{width:26px;height:26px;flex-shrink:0;border-radius:var(--r8);
  display:flex;align-items:center;justify-content:center;
  background:var(--n50);color:var(--i3)}
.v2-dat-x{min-width:0;display:flex;flex-direction:column;gap:2px}
.v2-dat-l{font-size:var(--f1);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--i3)}
.v2-dat-v{font-size:var(--f1);font-weight:500;color:var(--i1);line-height:1.35}
.v2-dat-v b{font-weight:700;font-variant-numeric:tabular-nums}
.v2-dat-falta{color:var(--v2-alerta);font-weight:650}
/* con el panel angosto los tres no entran en fila: la regla, que es la que más
   texto tiene, se lleva el renglón entero. */
@media (max-width:1180px){ .v2-dat-g{grid-template-columns:1fr 1fr} }
.v2-pan .v2-dat-g{grid-template-columns:1fr 1fr}
.v2-pan .v2-dat-i:nth-child(3){grid-column:1 / -1;border-right:0;
  border-top:1px solid var(--n100)}
.v2-pan .v2-dat-i:nth-child(2){border-right:0}
#v2-app.pan-ancho .v2-pan .v2-dat-g{grid-template-columns:repeat(3,minmax(0,1fr))}
#v2-app.pan-ancho .v2-pan .v2-dat-i:nth-child(3){grid-column:auto;border-top:0}
#v2-app.pan-ancho .v2-pan .v2-dat-i:nth-child(2){border-right:1px solid var(--n100)}

/* ══════ LOS CINCO PASOS, DE A UNO ══════
   El Resumen medía 3.117px —3,1 veces el panel— con las cinco preguntas
   apiladas, así que «a quién le toca», que es la que decide el trabajo, vivía a
   dos pantallas y media de scroll. No se sacó ninguna: se muestran de a una.
   LA TIRA ES EL RESUMEN. Cada chip lleva la respuesta corta de su pregunta, así
   que leer los cinco de un renglón ya contesta qué pasó, dónde, por qué, quién
   y qué hacer, sin abrir nada. Por eso los chips son altos y no pastillas: no
   son un filtro, son el índice del razonamiento. */
/* ══ EL DOCUMENTO DEL CASO ══
   Acá vivían la tira de cinco chips y la regla que escondía cuatro de las
   cinco preguntas. Se fueron las dos: un problema no se entiende de a
   preguntas sueltas, se entiende leyendo hacia abajo. Lo que resolvía el
   largo —3.117px de scroll— ahora lo resuelve la banda de impacto de arriba,
   que contesta qué, cuánto y con qué regla sin scrollear, más que la
   evidencia y los comercios dejaron de apilarse acá: son dos renglones que
   se abren. */
.v2-doc>.v2-sec{display:block}

/* la actividad: una lista fechada, no una tarjeta por evento. Cinco tarjetas
   apiladas en 480px son cinco rectángulos y ningún hilo; lo que se lee acá es
   el ORDEN, y el orden lo hace la línea. */
.v2-act{border-top:1px solid var(--n100);background:var(--n0);padding:16px 0 18px}
.v2-act-t{display:flex;align-items:center;gap:7px;font-size:var(--f1);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--i3);margin-bottom:11px}
.v2-act-v{font-size:var(--f2);font-weight:450;color:var(--i3);margin:0;line-height:1.5}
.v2-act-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.v2-act-i{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;
  align-items:start;padding:8px 0;position:relative}
.v2-act-i+.v2-act-i{border-top:1px solid var(--n50)}
.v2-act-ic{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--t100);color:var(--t700);flex-shrink:0}
.v2-act-x{min-width:0;display:flex;flex-direction:column;gap:1px}
.v2-act-x b{font-size:var(--f2);font-weight:650;color:var(--i1)}
.v2-act-x span{font-size:var(--f1);font-weight:450;color:var(--i3)}
.v2-act-f{font-size:var(--f1);font-weight:500;color:var(--i3);white-space:nowrap;
  font-variant-numeric:tabular-nums;padding-top:2px}

.v2-pan .v2-in{max-width:none;padding:0 20px}
.v2-pan .v2-hero{padding:18px 0 16px}
/* EN EL PANEL LA FOTO NO ES UN BANNER. Era `width:100%;order:-1`: 128px de
   imagen antes de decir de qué problema se trata, con el titular tercero. La
   referencia la pone AL LADO del titular y del tamaño de una foto. */
/* LA FOTO SE LLEVA UN TERCIO DEL CAJON, como en la referencia. A 150px fijos
   -lo que habia- no se distinguia una gondola de una pared, y era la unica
   pieza del caso que se entiende sin leer. */
.v2-pan .v2-hero-g{grid-template-columns:minmax(0,1fr) clamp(150px,32%,300px);
  gap:18px;align-items:start}
@media (max-width:1240px){ #v2-app.con-caso:not(.pan-ancho) .v2-pan .v2-hero-g{
  grid-template-columns:minmax(0,1fr)} }
.v2-pan .v2-hero-t{font-size:var(--f4);letter-spacing:-.5px;max-width:none}
.v2-pan .v2-hero-d{font-size:var(--f2);margin-top:8px;max-width:none}
.v2-pan .v2-hero-k{gap:7px;margin-bottom:9px}
.v2-pan .v2-hero-em{width:44px;height:44px;margin-top:0}
/* el cuerpo del caso también deja de ser de tres columnas: a 480px, tres
   columnas son tres tiras de 140px y ninguna se lee. */
.v2-pan .v2-q1{grid-template-columns:1fr}
.v2-pan .v2-band-in{padding:0}
.v2-pan{background:var(--n50);position:relative}
.v2-cont{padding:0;overscroll-behavior:contain}
/* EL CUERPO APROVECHA EL ANCHO. El padding era 44px, pero el que limitaba de
   verdad era el max-width de 1240: en 1600 el texto medía 1225 y sobraban 300px
   a los costados. Se baja el padding a la mitad Y se sube el tope, o bajar el
   padding no habria ganado casi nada. */
.v2-in{max-width:1440px;margin:0 auto;padding:0 22px;width:100%}
@media (max-width:1280px){ .v2-in{padding:0 26px} }

/* el bloque de titulo: una portada compuesta, no una ficha tecnica.
   El lavado de teal entra por el angulo de arriba a la izquierda, justo
   detras del emblema, y se apaga antes de llegar al tablero de numeros: la
   superficie tiene direccion y no es un rectangulo pintado. */
/* SIN LA RAYA TEAL DE ARRIBA. La cabecera del cuerpo (cliente, campaña,
   fechas) ahora vive pegada encima de esto, también blanca y sin borde
   inferior, para leerse como una sola superficie -es lo que se pidió-. Con
   esa costura de por medio, la raya de 3px dejaba de ser un acento del hero
   y pasaba a leerse como el borde de una cabecera nueva, cortando esa misma
   superficie que se estaba uniendo. Se saca; el lavado radial de fondo se
   mantiene porque no corta nada, sólo templa el blanco. */
/* EL LAVADO ERA TEAL, Y TEAL ES «CORRECTO/ACCIÓN» EN EL SISTEMA DE COLOR: un
   caso del Resumen es siempre un PROBLEMA -es lo que dice la pregunta 2 de la
   cadena-, así que el tinte y el emblema pasan a `--v2-problema`, no a la
   marca. Referencia: docs/Demo inspiracion.png. */
/* EL LAVADO SE HACE VER. Era un radial que se apagaba al 52% y sobre blanco
   quedaba en una insinuación: el hero de un PROBLEMA se leía igual de neutro
   que cualquier encabezado. Ahora entra pleno desde la izquierda y se apaga
   recién pasando el titular, que es el reparto de la referencia: el lado del
   problema teñido, el lado del tamaño en blanco. */
/* EL ENCABEZADO ES BLANCO. Tenia un lavado rosa en diagonal detras del titular,
   las pildoras y los chips; en `docs/inspiracion/Problemas.png` lo unico teñido
   es la banda de magnitud, y el resto de la ficha es blanco sobre el gris de la
   pagina. El lavado le sacaba a la banda el unico trabajo que tiene, que es
   avisar de que gravedad estamos hablando. */
.v2-hero{background:var(--n0);border-bottom:1px solid var(--n200);padding:30px 0 28px;position:relative}
.v2-hero-g{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:26px;align-items:start}
@media (max-width:1180px){ .v2-hero-g{grid-template-columns:1fr;gap:18px} }

/* LA FOTO DEL RELEVAMIENTO. Recortada y no contenida: es una FOTO, se mira y se
   recorta; contenerla dejaría dos franjas vacías a los costados por cada
   celular que la sacó en otra proporción. El emblema se le monta en la esquina
   como el badge de la referencia, y por eso la figura es el contexto de
   posicionamiento. */
.v2-hero-ev{position:relative;margin:0;width:100%;aspect-ratio:4/3;
  border-radius:var(--r14);overflow:hidden;background:var(--v2-problema-bg);
  border:1px solid var(--n0);
  box-shadow:0 1px 2px rgba(14,28,30,.05),0 12px 30px rgba(14,28,30,.10)}
.v2-hero-ev img{width:100%;height:100%;object-fit:cover;display:block}
.v2-hero-w{min-width:0}
/* EL EMBLEMA. Es lo unico del caso que se entiende sin leer, asi que lleva la
   tinta saturada y un halo que lo separa del lavado del fondo. Se alinea con
   el titular y no con el rotulo: es la mayuscula de la portada. */
.v2-hero-em{width:62px;height:62px;flex-shrink:0;border-radius:var(--r14);color:#fff;margin-top:-3px;
  display:flex;align-items:center;justify-content:center;
  background:var(--v2-problema);
  box-shadow:0 2px 4px rgba(4,51,44,.14),0 12px 26px rgba(184,38,43,.30)}
@media (max-width:1400px){ .v2-hero-em{width:54px;height:54px;border-radius:var(--r14)} }
@media (max-width:1180px){ .v2-hero-em{width:46px;height:46px;border-radius:var(--r14);margin-top:0} }
.v2-hero-k{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
/* DOS CHIPS Y NO SE PARECEN. `.det` dice QUE PASA y es el que grita: campo
   rojo pleno, que sobre el lavado del hero es la única pieza saturada además
   del emblema. `.cat` dice CÓMO SE AGRUPA -zona, cadena- y es contexto: pasa a
   contorno neutro. Iban los dos en rojo sobre rosa y competían entre sí
   diciendo cosas de distinto nivel. */
.v2-hero-k .det,.v2-hero-k .cat{display:inline-flex;align-items:center;gap:6px;
  font-size:var(--f1);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  border-radius:999px;padding:4px 11px 4px 9px}
.v2-hero-k .det{color:#fff;background:var(--v2-problema);border:1px solid var(--v2-problema)}
.v2-hero-k .cat{color:var(--i3);background:rgba(255,255,255,.72);border:1px solid var(--n200)}
.v2-hero-k .det svg{opacity:.9}
.v2-hero-k .cat svg{opacity:.6}
.v2-hero-t{font-size:var(--f6);font-weight:700;letter-spacing:-1.1px;line-height:1.1;color:var(--i1);
  margin:0;max-width:24ch}
/* el DÓNDE, en la tinta del problema: es la parte del titular sobre la que se
   actúa -a esa cadena o a esa zona es a quien se le reclama-. */
/* Un solo escalon, y recien cuando el ancho aprieta de verdad: con 24ch de tope
   los 32px entran enteros hasta 1180. El corte de 1400 existia solo porque a
   40px no entraban. */
@media (max-width:1180px){ .v2-hero-t{font-size:var(--f5);letter-spacing:-.7px;max-width:none} }
.v2-hero-d{font-size:var(--f3);font-weight:450;line-height:1.5;color:var(--i2);margin:11px 0 0;max-width:66ch}
.v2-hero-d b{font-weight:650;color:var(--i1)}
/* `.v2-hero-n/-v/-l` siguen vivas: las usa el mini-tablero de «Explorar»
   (`_v2Explorar`, mas abajo en el archivo), que no es de este caso y no se
   toca en esta ronda. LO QUE ERA EL TABLERO DEL CASO -`.v2-hero-camp`,
   `.v2-hero-tab`, `.v2-hero-i`- se fue: ver `.v2-hero-mag` y `.v2-hero-sup`
   un poco mas abajo. */
.v2-hero-n{display:flex;flex-direction:column;gap:9px;align-items:stretch;
  background:var(--n0);border:1px solid var(--n100);border-radius:var(--r14);padding:11px;
  box-shadow:0 1px 2px rgba(14,28,30,.04),0 12px 30px rgba(14,28,30,.075)}
.v2-hx-aro{flex-shrink:0}
.v2-hero-v{font-size:var(--f5);font-weight:700;letter-spacing:-.9px;line-height:1;color:var(--i1);
  font-variant-numeric:tabular-nums}
.v2-hero-l{font-size:var(--f1);font-weight:500;color:var(--i3);margin-top:5px;line-height:1.35;max-width:112px}
.v2-hero-l b{display:block;font-weight:700;color:var(--t700);margin-top:2px}
@media (max-width:1180px){ .v2-hero-n{width:100%} }
/* LO QUE ERA TARJETA, DESPUES LINEA DEBAJO DEL TITULO, Y AHORA NI ESO. La
   campaña y la proyeccion son apoyo -no la magnitud del caso, ni parte de
   «qué pasó»-, asi que ya no viven en el encabezado: se leen plegadas dentro
   de «Por qué vale la pena» (pregunta 4, `_v2Resumen`). La clase se reusa
   ahi tal cual: sigue siendo texto corrido, sin fondo, sin borde. */
.v2-hero-sup{font-size:var(--f2);font-weight:450;color:var(--i3);line-height:1.6;
  margin:0 0 10px;max-width:78ch}
.v2-hero-sup b{font-weight:700;color:var(--i1)}
.v2-hero-sup b.ok{color:var(--v2-ok)}
.v2-hero-sup b.op{color:var(--v2-alerta)}
/* ══════ 5 · LAS BANDAS ══════ */
.v2-sec{--band:var(--v2-band-1);background:var(--band);padding:44px 0 50px;position:relative}
.v2-sec.b2{--band:var(--v2-band-2)}
.v2-sec.b3{--band:var(--v2-band-3)}
.v2-sec.b4{--band:var(--v2-band-4)}
.v2-sec+.v2-sec{border-top:1px solid rgba(14,28,30,.07)}
/* LA QUINTA BANDA. Era oscura e invertia TODA la paleta en su scope (texto
   casi blanco, tarjetas oscuras). Al pasar el informe a light mode eso queda
   blanco sobre blanco: la inversion se retira y la banda se distingue por su
   tinte y por un filete de acento, no por invertirse. Es la seccion que
   cierra el argumento, asi que sigue teniendo peso propio. */
.v2-sec.ink{
  --band:var(--v2-band-5);
  box-shadow:inset 3px 0 0 var(--t500);
}

/* el rotulo de la pregunta se queda pegado bajo el segmentado, y lleva el tono
   de SU banda: si llevara uno fijo, al scrollear se veria el de la anterior. */
.v2-preg{margin:0 0 22px;position:sticky;top:var(--segH);z-index:4;padding:12px 0 13px;
  background:var(--band);align-items:center;gap:14px}
.v2-preg:first-child{margin-top:0}
.v2-preg .q{width:34px;height:34px;font-size:var(--f2);background:var(--t700);box-shadow:0 0 0 4px var(--t50)}
.v2-sec.ink .v2-preg .q{background:var(--t600);color:#fff;box-shadow:0 0 0 4px rgba(46,202,180,.18)}
.v2-preg .t{font-size:var(--f5);letter-spacing:-.8px}
/* Cuando el titular del caso baja a --f5, el titulo de seccion tiene que bajar
   con el o los dos miden igual y se pierde el escalon: abajo de 1180 son
   --f5 y --f4, arriba son --f6 y --f5. Es el mismo salto, corrido. */
@media (max-width:1180px){ .v2-preg .t{font-size:var(--f4);letter-spacing:-.5px} }
.v2-preg .ln{flex:1;min-width:14px;height:0;background:none}
/* EL RIEL DE LAS CINCO PREGUNTAS. Reemplaza al filete que se desvanecia:
   cinco tramos, llenos hasta donde vas. Es la unica pieza que dice, sin una
   palabra, que el caso es un argumento con partes y en que parte estas. */
.v2-preg-r{display:inline-flex;gap:4px;align-items:center;flex-shrink:0;margin-left:2px}
.v2-preg-r i{width:16px;height:5px;border-radius:999px;background:var(--n200);
  transition:background .2s var(--eo),width .2s var(--eo)}
.v2-preg-r i.ya{background:var(--t300)}
.v2-preg-r i.hoy{width:30px;background:var(--t600)}
.v2-sec.ink .v2-preg-r i{background:rgba(14,28,30,.14)}
.v2-sec.ink .v2-preg-r i.ya{background:var(--t300)}
.v2-sec.ink .v2-preg-r i.hoy{background:var(--t600)}
@media (max-width:1180px){ .v2-preg-r{display:none} }
.v2-preg .n{font-size:var(--f1);font-weight:600;color:var(--i3);letter-spacing:.02em}.v2-sec.b1 .v2-tw,
.v2-sec.b1 .v2-desp{background:var(--n25)}
.v2-sec .v2-ver-t{line-height:1.6;max-width:70ch}

/* ══════ 6 · DESPLEGAR EN EL LUGAR ══════
   Profundizar deja de ser saltar de pestaña: un renglon con chevron que abre
   el detalle donde estaba, con el alto animado. */
.v2-desp{border:1px solid var(--n200);border-radius:var(--r14);background:var(--n0);overflow:hidden}.v2-desp+.v2-desp{margin-top:12px}
:where(#v2-app) .v2-desp-h{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:none;border:none;padding:14px 17px;cursor:pointer;font:inherit;
  transition:background var(--tr-16) var(--eo)}
@media (hover:hover){ .v2-desp-h:hover{background:var(--n25)} }
.v2-desp-h .ic{width:26px;height:26px;flex-shrink:0;border-radius:var(--r8);background:var(--t50);
  color:var(--t700);display:flex;align-items:center;justify-content:center}
.v2-desp-h b{font-size:var(--f3);font-weight:650;color:var(--i1);letter-spacing:-.15px}
.v2-desp-h .sp{margin-left:auto;font-size:var(--f1);font-weight:500;color:var(--i3);white-space:nowrap}
.v2-desp-h .cv{flex-shrink:0;transition:transform .22s var(--eo)}
.v2-desp.on .v2-desp-h .cv{transform:rotate(90deg)}
.v2-desp-w{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s var(--eo)}
.v2-desp.on .v2-desp-w{grid-template-rows:1fr}
.v2-desp-in{overflow:hidden;min-height:0}
.v2-desp-b{padding:0 17px;border-top:1px solid var(--n100)}
.v2-desp.on .v2-desp-b{padding:16px 17px 18px}

/* ══════ 6bis · LO ACCIONABLE, CON CARA PROPIA ══════
   Un boton gris adentro de un parrafo tiene el mismo peso visual que el
   parrafo. Este es el UNICO componente del cuerpo que significa "esto lo
   hacés vos", y se reconoce de lejos por tres cosas que no tiene ninguna
   otra pieza: el filete de teal a la izquierda, el lavado en diagonal, y la
   trama de rayas dibujada en la esquina. Se usa poco a proposito. */
.v2-hx-acc{position:relative;border-radius:var(--r20);overflow:hidden;
  background:linear-gradient(128deg,var(--t50) 0%,var(--n0) 34%);
  border:1px solid var(--t200);
  box-shadow:0 2px 4px rgba(4,51,44,.07),0 16px 38px rgba(4,51,44,.13)}
.v2-hx-acc::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;z-index:2;
  background:linear-gradient(180deg,var(--t400),var(--t700))}
/* la trama: rayas a 135 grados que se apagan en diagonal hacia adentro. Es una
   firma, no una textura de fondo: por eso vive en una esquina y no en todo. */
.v2-hx-acc-tr{position:absolute;right:0;top:0;width:250px;height:170px;pointer-events:none;
  background:repeating-linear-gradient(135deg,var(--t300) 0 2px,rgba(0,0,0,0) 2px 11px);
  -webkit-mask-image:linear-gradient(217deg,#000 6%,rgba(0,0,0,0) 64%);
  mask-image:linear-gradient(217deg,#000 6%,rgba(0,0,0,0) 64%);opacity:.55}
.v2-hx-acc-in{position:relative;z-index:1}
/* la ficha de adentro se apoya en la superficie del componente: pierde su
   borde, su sombra y su filete, que ahora los pone el componente */
:where(#v2-app) .v2-hx-acc .v2-ib{height:38px;padding:0 16px;font-size:var(--f2)}
:where(#v2-app) .v2-hx-acc .v2-ib.pri{box-shadow:0 1px 2px rgba(4,51,44,.24),0 6px 16px rgba(10,125,110,.24)}
/* la version chica: la usa una accion suelta, asi que se cine al boton en
   vez de tirar una banda vacia de punta a punta, y la trama se apaga. */
.v2-hx-acc.mini{margin-top:12px;display:inline-block}
.v2-hx-acc.mini .v2-hx-acc-tr{width:150px;height:96px;opacity:.34}
.v2-hx-acc.mini .v2-hx-acc-in{padding:11px 14px}
.v2-hx-acc.mini .v2-sig-a{margin-top:0}
@media (hover:hover){ .v2-hx-acc:hover{border-color:var(--t300)} }

/* los desplegables dejan de ser renglones planos: la fila entera se levanta
   al pasarle por encima y el chevron se apoya en su propio chip */
@media (hover:hover){ .v2-desp:hover{border-color:var(--t200)} }
.v2-desp-h .cv{width:24px;height:24px;border-radius:999px;background:var(--n50);
  display:flex;align-items:center;justify-content:center;color:var(--i3)}
.v2-desp.on .v2-desp-h .cv{background:var(--t50);color:var(--t700)}

/* ══════ 7 · LA BARRA DE ACCION, AL PIE Y CON SUPERFICIE PROPIA ══════
   El estado y «Armar el reclamo» estaban tirados arriba, sobre la misma
   superficie que el titulo. Bajan a una barra fija: lo que se lee y lo que se
   hace no comparten fondo. */
/* SON DOS NUMEROS Y NO UNO, y confundirlos costo una regresion en la misma
   sesion: `min-height` es el PISO de la barra —70px, que es su diseño— y
   `--v2-accion-h` es el AIRE que el contenido se reserva abajo. Al poner el
   mismo valor en los dos, la barra se estiraba a 126px aunque le alcanzaran 78,
   y tapaba la tira de los cinco pasos, que cae justo ahi. El piso no se toca;
   el aire se pasa de generoso a proposito, que no cuesta nada.
   LA BARRA CRECE CON LO QUE TIENE ADENTRO. Declaraba `height:70px` fijo
   mientras `.v2-pan .v2-accion` le pone `flex-wrap:wrap`: cuando el contenido
   pasaba a un segundo renglon, ese renglon caia por debajo de `bottom:0` y lo
   recortaba `.v2-main{overflow:hidden}`. Medido: en el panel angosto la barra
   necesita 78px a 1512 —el CTA se cortaba 8px— y 126px a 1280, donde «Armar el
   reclamo» quedaba ENTERO fuera de pantalla y sin manera de llegar. Es el boton
   que es el objetivo del producto. Anclada abajo, `min-height` la deja crecer
   para arriba, que es lo unico que no recorta nadie. */
.v2-accion-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--n400)}
.v2-accion-dot.curso{background:var(--v2-alerta)}
.v2-accion-dot.enviado{background:var(--v2-ok)}
.v2-accion-dot.cerrado{background:var(--t600)}
.v2-accion-dot.nuevo{background:var(--v2-navy)}
.v2-accion-dot.venc{background:var(--mal)}
.v2-accion-dot.descart{background:var(--c-no)}
/* el tratamiento del selector de estado viaja con el: la barra se fue, el
   control no. Alto 30 porque ahora vive en el encabezado del panel. */
:where(#v2-app) .v2-pan-est .v2-sel{background:#fff;border-color:var(--n200);
  color:var(--i1);font-weight:650}
:where(#v2-app) .v2-pan-est .v2-sel option{color:var(--i1)}
/* el documento no queda debajo de la barra */
.v2-cont.conaccion{padding-bottom:var(--v2-accion-h,70px)}

/* ══════ 8 · EL MAPA ══════
   Todo lo de esta caja —zoom, chips, ficha— usa el mismo blanco, el mismo
   borde y la misma sombra corta que las tarjetas del informe: son partes del
   panel, no widgets pegados encima de un mapa ajeno. */
.v2-map{min-height:520px}
.v2-mapw{position:relative;border:1px solid var(--n200);border-radius:var(--r14);overflow:hidden;background:var(--n0)}
.v2-mapc{left:12px;top:12px;gap:7px}
.v2-mc{padding:6px 14px 6px 9px;font-size:var(--f1)}
.v2-mc.off b{text-decoration:line-through}
.v2-pin{width:32px;height:41px}
.v2-pin .g{top:7px;height:18px}
/* la ficha del pin, adentro del mapa: profundizar sin salir de la pantalla */
.v2-mapf{position:absolute;left:12px;right:12px;bottom:12px;z-index:520;
  background:var(--n0);border:1px solid var(--n200);border-radius:var(--r14);
  box-shadow:0 4px 8px rgba(14,28,30,.06), 0 14px 32px rgba(14,28,30,.13);padding:12px 14px;
  display:flex;align-items:center;gap:13px;
  transform:translateY(14px);opacity:0;pointer-events:none;
  transition:transform .2s var(--eo),opacity var(--tr-16) ease}
.v2-mapf.on{transform:none;opacity:1;pointer-events:auto}
.v2-mapf-i{width:34px;height:34px;flex-shrink:0;border-radius:var(--r10);display:flex;
  align-items:center;justify-content:center;color:#fff}
.v2-mapf-t{flex:1;min-width:0}
.v2-mapf-t b{display:block;font-size:var(--f2);font-weight:700;color:var(--i1);letter-spacing:-.15px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-mapf-t span{display:block;font-size:var(--f1);font-weight:450;color:var(--i2);margin-top:2px}
:where(#v2-app) .v2-mapf-x{background:none;border:none;cursor:pointer;color:var(--n400);padding:5px;
  display:flex;border-radius:var(--r6)}
@media (hover:hover){ .v2-mapf-x:hover{background:var(--n50);color:var(--i1)} }

/* ══════ 9 · RECLAMO ══════ */
.v2-dest{display:flex;align-items:center;gap:13px;background:var(--t50);border:1px solid var(--t200);
  border-radius:var(--r14);padding:14px 16px}
.v2-dest.sin{background:var(--op-bg);border-color:var(--op-bd)}
.v2-dest-i{width:34px;height:34px;flex-shrink:0;border-radius:var(--r10);background:var(--t700);color:#fff;
  display:flex;align-items:center;justify-content:center}
.v2-dest.sin .v2-dest-i{background:var(--op-t)}
.v2-dest-t{flex:1;min-width:0}
.v2-dest-t b{display:block;font-size:var(--f3);font-weight:700;color:var(--i1);letter-spacing:-.2px}
.v2-dest-t span{display:block;font-size:var(--f1);font-weight:450;color:var(--i2);margin-top:3px;line-height:1.5}
.v2-dest-t em{font-style:normal;font-weight:650;color:var(--t800)}
.v2-dest.sin .v2-dest-t em{color:var(--op-t)}

/* elegir QUE se reclama: una fila por grupo, con su numero y su casilla */
.v2-elg{border:1px solid var(--n200);border-radius:var(--r14);overflow:hidden;background:var(--n0)}
:where(#v2-app) .v2-elg-i{display:flex;align-items:center;gap:13px;padding:13px 15px;
  border:none;border-bottom:1px solid var(--n100);width:100%;text-align:left;background:none;
  cursor:pointer;font:inherit;transition:background var(--tr-16) var(--eo)}
.v2-elg-i:last-of-type{border-bottom:none}
@media (hover:hover){ .v2-elg-i:hover{background:var(--n25)} }
.v2-elg-k{width:20px;height:20px;flex-shrink:0;border-radius:var(--r6);border:1.5px solid var(--bd);
  display:flex;align-items:center;justify-content:center;color:#fff}
.v2-elg-i.on .v2-elg-k{background:var(--t700);border-color:var(--t700)}
.v2-elg-n{font-size:var(--f4);font-weight:700;letter-spacing:-.6px;color:var(--i1);min-width:34px;
  font-variant-numeric:tabular-nums}
.v2-elg-i:not(.on) .v2-elg-n,.v2-elg-i:not(.on) .v2-elg-t b{color:var(--n400)}
.v2-elg-t{flex:1;min-width:0}
.v2-elg-t b{display:block;font-size:var(--f2);font-weight:650;color:var(--i1);line-height:1.35}
.v2-elg-t span{display:block;font-size:var(--f1);font-weight:450;color:var(--i2);line-height:1.5;margin-top:3px}
.v2-elg-ft{display:flex;align-items:center;gap:10px;padding:12px 15px;background:var(--n25);
  border-top:1px solid var(--n100);font-size:var(--f2);font-weight:500;color:var(--i2)}
.v2-elg-ft b{font-weight:700;color:var(--i1)}


/* ══════ 10 · DETALLE FINO ══════ */
.v2-gal{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px}
.v2-tw{box-shadow:none;border-color:var(--n200)}
.v2-sec .rx-lbl{color:var(--i3)}
.v2-vacio b{font-size:var(--f3)}
.v2-cont .v2-sec:first-of-type{padding-top:38px}
/* el aviso de fuera-de-objetivo va antes de la primera banda, de lado a lado */
.v2-fuera{margin:0;border-radius:0;border-left:none;border-right:none;border-top:none;padding:14px 44px}
@media (max-width:1280px){ .v2-fuera{padding:14px 26px} }

@media (max-width:1100px){
  #v2-app{--v2-riel-ab:min(324px,calc(100vw - 104px))}
  .v2-hero-t{font-size:var(--f5)}
}
@media (prefers-reduced-motion:reduce){
  .v2-cab .v2-ctxb.vacio{animation:none!important}.v2-riel,
.v2-riel-m,
.v2-riel-t,
.v2-riel-t svg,
.v2-riel-hd,
.v2-lista,
.v2-riel-f,
.v2-riel-b,
.v2-riel-n,
.v2-mapf{transition:none!important}
  .v2-desp-w{transition:none!important}
}


/* ── remates del rediseño ──────────────────────────────────────────────── */
/* el riel y la cola son absolutos DENTRO del cuerpo, no de la ventana */
.v2-body{position:relative}
/* el cuerpo de la pestaña entra; antes la regla apuntaba a .v2-cont, que
   ahora es el scroller y ya no se reescribe */
.v2-cuerpo.entra>*{animation:v2entra .22s var(--eo) both}
.v2-cont.entra>*{animation:none}
/* el mapa de Leaflet necesita alto propio dentro del marco. En Comercios
   comparte pantalla con la tabla, así que baja de los 520px que tenía cuando
   ocupaba media pantalla del Resumen: ahí alcanza con ubicar, la tabla es la
   que se lee fila por fila. */
.v2-mapw .v2-map{height:400px;min-height:400px}
/* EL MAPA VUELVE AL RESUMEN, Y AHORA CON SU PROPIA COLUMNA: es «dónde pasó»
   a golpe de vista, con contexto alrededor (el hallazgo a un lado, el ranking
   al otro) en vez de una ilustración chica. Sube de 190 a 280px -el pedido
   era agrandarlo- y la leyenda de composición baja del overlay a una fila
   fija debajo (`.v2-mapleg`), que a este ancho de columna no tapa pines. */
.v2-mapw.mini .v2-map{height:280px;min-height:280px}
.v2-mapw.mini .v2-mapc{display:none}
.v2-mapw.mini .leaflet-control-zoom{transform:scale(.86);transform-origin:100% 0}
/* «no son desvíos» vive en la cola desplegada */
.v2-riel .v2-nd{margin-top:14px}
/* Explorar comparte el bloque de titulo con un caso, pero no tiene accion */
#v2-pan .v2-cont:not(.conaccion){padding-bottom:0}
/* el aviso de contexto arriba de la cola no puede tapar el primer caso */
.v2-setup{margin-bottom:14px}.v2-sec.b1 .v2-tw,
.v2-sec.b1 .v2-desp,
.v2-sec.b1 .v2-mapw,
.v2-sec.b1 .v2-elg{background:var(--n0)}

/* LOS PANELES DE LEAFLET SE ESCAPAN. `.v2-pan` es position:relative con
   z-index auto, asi que NO contiene a sus hijos posicionados: los panes del
   mapa (z-index 400 y 600) compiten en el mismo contexto que el riel, la cola
   y la barra de accion. El velo de la cola estaba puesto en 35 y el mapa se
   le dibujaba encima: la cola se abria y abajo no pasaba nada. */
.v2-dr{z-index:858}
.v2-riel{z-index:880}

/* cinco interlocutores apilados eran 300px de scroll antes de llegar a nada */
@media (min-width:1000px){
  .v2-fm{grid-template-columns:1fr 1fr 1fr;align-items:end}
  .v2-fm>div:nth-child(4){grid-column:1/-1}
}
.v2-elg-i{padding-left:18px}

/* el pin elegido tiene que ganarle a 33 iguales: crece, se le pone el anillo
   blanco (`.ha`) y sube de piso con setZIndexOffset. La sombra NO engorda:
   con anillo ya se distingue, y una sombra fuerte lo despega del mapa */
.v2-pin.sel{transform:scale(1.34) translateY(-4px)}
.v2-map .leaflet-control-zoom{margin-top:12px;margin-right:12px}

/* #f7faf9 contra blanco no es un escalon: la banda 1 seguia leyendose como
   parte del bloque de titulo y el documento arrancaba sin arrancar */
.v2-sec.b1{--band:var(--n50)}

/* ══ EL RECLAMO: UNA COSA A LA VEZ ═════════════════════════════════════════
   Antes había tres bloques abiertos al mismo tiempo, cada uno con su guía, su
   ayuda y su chip de estado, más un riel de progreso arriba que los repetía y
   un panel de vista previa siempre desplegado. Dos pantallas y media de
   formulario para mandar un correo, y el cliente lo dijo: «hay demasiado
   pasando, es poco intuitivo y abrumador».

   Ahora es UNA caja con tres renglones. Se abre uno, los otros dos esperan
   plegados diciendo en una línea lo que ya resolvieron. Lo que se sacó: el
   riel (los renglones plegados YA son el riel), los chips de estado (el
   renglón entero se pinta), las bajadas de cada paso, las ayudas debajo de
   cada campo, el contador de caracteres y la vista previa siempre abierta.

   Un solo acento —el teal de marca—, un solo color de alarma —el ámbar de
   «falta algo»—, y tres formas: contenedor 14, control 8, chip píldora. */
.v2-sec.rec{padding:28px 0 36px}
.v2-rec{border:1px solid var(--n200);border-radius:var(--r14);background:var(--n0);
  box-shadow:var(--sh-rest);overflow:hidden;margin-bottom:18px}

/* EL RENGLÓN. Plegado es un renglón de 54px que se lee de un vistazo: número,
   qué decide, qué quedó decidido. Abierto crece y su cabecera se vuelve un
   título. El estado no es un chip al lado: es el número, que pasa de gris a
   tilde teal o a ámbar. */
.v2-rp+.v2-rp{border-top:1px solid var(--n100)}
.v2-rp:not(.act){background:var(--n25)}
:where(#v2-app) .v2-rp-h{display:grid;grid-template-columns:26px auto 1fr auto;align-items:center;
  gap:13px;width:100%;background:none;border:none;border-radius:0;padding:15px 20px;
  cursor:pointer;font:inherit;text-align:left;
  transition:background var(--tr-16) var(--eo)}
@media (hover:hover){ :where(#v2-app) .v2-rp:not(.act) .v2-rp-h:hover{background:var(--n50)} }
:where(#v2-app) .v2-rp.act .v2-rp-h{cursor:default;padding-bottom:4px}
.v2-rp-n{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:var(--f2);font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--n0);color:var(--i2);box-shadow:inset 0 0 0 1.5px var(--n200);
  transition:background .22s var(--eo),color .22s var(--eo),box-shadow .22s var(--eo)}
.v2-rp.ok .v2-rp-n{background-color:var(--t700);color:transparent;box-shadow:none;
  background-image:var(--tick);background-repeat:no-repeat;background-position:center}
.v2-rp.falta .v2-rp-n{background:var(--op-t);color:#fff;box-shadow:none}
.v2-rp-t{font-size:var(--f2);font-weight:650;color:var(--i2);letter-spacing:-.1px;white-space:nowrap}
.v2-rp.act .v2-rp-t{font-size:var(--f3);font-weight:700;color:var(--i1);letter-spacing:-.3px}
.v2-rp-v{font-size:var(--f2);font-weight:500;color:var(--i3);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-rp.falta .v2-rp-v{color:var(--op-t);font-weight:650}
.v2-rp.act .v2-rp-v{display:none}
.v2-rp-x{font-size:var(--f1);font-weight:650;color:var(--n400);white-space:nowrap;
  transition:color var(--tr-16) var(--eo)}
@media (hover:hover){ .v2-rp:not(.act):hover .v2-rp-x{color:var(--t700)} }
.v2-rp-b{padding:8px 20px 20px 59px}
@media (max-width:760px){
  :where(#v2-app) .v2-rp-h{grid-template-columns:26px 1fr auto;row-gap:2px;padding:13px 15px}
  .v2-rp-v{grid-column:2/-1}
  .v2-rp-b{padding:8px 15px 18px}
}

/* el aviso del destinatario: declarado (teal), cargado a mano (neutro, e
   invita a declararlo) y nadie (ámbar) */
.v2-dest.prop{background:var(--n0);border-color:var(--n200)}
.v2-dest.prop .v2-dest-i{background:var(--i1)}
.v2-dest.prop .v2-dest-t em{color:var(--i1)}
.v2-dest{box-shadow:none}

/* QUIÉN LO RESUELVE. Eran cinco renglones altos con su descripción cada uno:
   250px para elegir una etiqueta. Ahora son cinco píldoras en una línea, y la
   descripción vive en el title. */
.v2-qch{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0 16px}
:where(#v2-app) .v2-qc{background:var(--n0);border:1px solid var(--ctl-bd);color:var(--i2);
  border-radius:999px;padding:0 13px;height:30px;font:inherit;font-size:var(--f2);font-weight:600;
  cursor:pointer;transition:background var(--tr-16) var(--eo),border-color var(--tr-16) var(--eo),
  color var(--tr-16) var(--eo),transform .12s var(--eo)}
@media (hover:hover){ :where(#v2-app) .v2-qc:hover{border-color:var(--ctl-bd-h);color:var(--i1)} }
:where(#v2-app) .v2-qc:active{transform:scale(.97)}
:where(#v2-app) .v2-qc.on{background:var(--t700);border-color:var(--t700);color:#fff}

.v2-rec2c{display:grid;gap:22px;align-items:start}
@media (min-width:1180px){ .v2-rec2c{grid-template-columns:1.15fr 1fr;gap:28px} }
.v2-recfm{display:grid;gap:12px}
@media (min-width:820px){
  .v2-recfm{grid-template-columns:1fr 1fr auto;align-items:end}
  .v2-recfm>div:nth-child(3){grid-column:1/3}
}
.v2-recsub{display:block;font-size:var(--f1);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--n400);margin-bottom:9px}

/* LAS PRUEBAS. Eran tres renglones con ícono en cuadrado teal y una bajada
   cada uno. El paquete no es una decisión: es un hecho, y entra en tres
   fichas de una línea. */
.v2-adjc{display:flex;flex-wrap:wrap;gap:7px}
.v2-adjc>span{display:inline-flex;align-items:center;gap:7px;background:var(--n25);
  border:1px solid var(--n200);border-radius:var(--r8);padding:7px 11px;
  font-size:var(--f1);font-weight:650;color:var(--i1);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.v2-adjc>span svg{color:var(--t700);flex-shrink:0}
.v2-adjc i{font-style:normal;font-family:inherit;font-size:var(--f1);font-weight:450;color:var(--i3);font-family:"DM Sans",sans-serif}

/* ── los tres destinos ──
   La bajada de cada uno («Asunto, cuerpo y el paquete adjunto») decía lo que
   el formulario de abajo muestra. Se fue: quedan la marca, el nombre y, en los
   dos que no están conectados, la etiqueta que lo dice. */
.v2-recd{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:15px}
@media (max-width:700px){ .v2-recd{grid-template-columns:1fr} }
:where(#v2-app) .v2-recdi{display:flex;align-items:center;gap:11px;background:var(--n0);
  border:1px solid var(--ctl-bd);border-radius:var(--r8);padding:11px 13px;cursor:pointer;font:inherit;
  text-align:left;position:relative;overflow:hidden;
  transition:transform var(--tr-16) var(--eo),border-color var(--tr-16) var(--eo),box-shadow var(--tr-16) var(--eo)}
.v2-recdi b{font-size:var(--f2);font-weight:650;color:var(--i1);letter-spacing:-.1px}
.v2-recdi.on{border-color:var(--t600);box-shadow:0 0 0 2px var(--t100)}
:where(#v2-app) .v2-recdi:active{transform:scale(.98)}
@media (hover:hover){ .v2-recdi:hover{border-color:var(--ctl-bd-h)} .v2-recdi.on:hover{border-color:var(--t600)} }
.v2-recdi::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--mrk,var(--t600));opacity:0;transition:opacity .2s var(--eo)}
.v2-recdi.on::before{opacity:1}
.v2-recdm{width:30px;height:30px;flex-shrink:0;border-radius:var(--r8);display:flex;align-items:center;justify-content:center}
.v2-recdok{margin-left:auto;flex-shrink:0;width:18px;height:18px;border-radius:50%;
  background-color:var(--t700);background-image:var(--tick);background-repeat:no-repeat;
  background-position:center}
.v2-recmq{font-style:normal;font-size:var(--f1);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--i2);background:var(--n100);border:1px solid var(--n200);border-radius:999px;padding:1px 6px}

/* el formulario del destino: dos campos arriba, el cuerpo abajo a lo ancho */
.v2-recfrm{display:grid;gap:14px}
@media (min-width:820px){ .v2-recfrm{grid-template-columns:1fr 1fr;gap:14px 18px} }
.v2-recopc{font-style:normal;font-size:var(--f1);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--t800);background:var(--t50);border:1px solid var(--t200);border-radius:999px;padding:1px 7px}
:where(#v2-app) .v2-recta{width:100%;padding:11px 13px;font:inherit;
  font-size:var(--f2);line-height:1.65;resize:vertical;min-height:86px}
:where(#v2-app) .v2-recta:focus{outline:none;border-color:var(--t600);box-shadow:var(--ring);
  background-color:var(--n0)}

/* LO QUE ZNAPP AGREGA ya no es un `<pre>` plegado: se lee dentro de la
   maqueta de envío, más abajo (`.v2-mock`). Ver ese bloque. */

/* ══════ LA MAQUETA: CÓMO LE LLEGA AL DESTINATARIO ══════════════════════════
   Hasta acá lo único que probaba que el texto existía era un `<pre>` -doce
   líneas de texto plano-. El pedido fue verlo COMO LO VE EL OTRO: el asunto y
   el cuerpo adentro de una ventana con forma de correo, o de mensaje, o de
   ticket, según el canal elegido arriba. Es maqueta -no manda nada de
   verdad-, y por eso la firma es ZLite: el logo de Znapp recoloreado a azul
   marino por CSS, sin duplicar el PNG que ya vive en la barra lateral. */
.v2-mock{border:1px solid var(--n200);border-radius:var(--r14);background:var(--n0);
  overflow:hidden;margin-top:16px;box-shadow:var(--sh)}
.v2-mock-rot{font-size:var(--f1);font-weight:600;color:var(--i3);margin:16px 0 0;
  display:flex;align-items:center;gap:6px}
/* EL MARCADOR SE FUERZA A NEGRO Y SE RECOLOREA: es la unica forma de pintar
   un PNG entero de un solo color por CSS sin duplicarlo en base64. El glifo
   ya es un degrade dentro de la familia teal, asi que sale limpio. */
.v2-zlite-mk{display:block;filter:brightness(0) saturate(100%) invert(13%) sepia(28%)
  saturate(2380%) hue-rotate(196deg) brightness(93%) contrast(97%)}
.v2-zlite-tx{font-weight:800;color:var(--v2-navy)}
.v2-mock-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;background:var(--v2-navy-bg);border-bottom:1px solid var(--n200)}
/* ── LA MAQUETA DE ZLITE ──
   Es el unico canal propio, asi que es el unico que se pinta con la marca: en
   los otros tres el mensaje llega A la herramienta del cliente y ponerle
   nuestro logo arriba lo hacia parecer otra app. Fondo navy en la cabecera
   porque ZLite ES la marca en azul marino, y el cuerpo en papel para que las
   fotos y el pedido se lean como contenido y no como una pieza de marca. */
.v2-mock.zlite{border-radius:var(--r14);overflow:hidden;border:1px solid var(--n200);
  box-shadow:var(--sh-up);max-width:420px}
.v2-mock-zl-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;background:var(--v2-navy)}
.v2-mock-brand.zl span{color:#fff}
.v2-mock-brand.zl .v2-zlite-mk{filter:brightness(0) invert(1)}
.v2-mock-zl-tag{font-size:var(--f1);font-weight:600;color:rgba(255,255,255,.66);white-space:nowrap}
.v2-mock-zl-b{padding:14px}
.v2-mock-zl-t{font-size:var(--f3);font-weight:700;color:var(--i1);line-height:1.3;
  letter-spacing:-.2px;margin-bottom:8px}
.v2-mock-zl-n{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  padding:5px 11px;border-radius:99px;background:var(--n50);color:var(--i2);
  font-size:var(--f1);font-weight:600}
.v2-mock-zl-n b{color:var(--i1);font-weight:800}
/* dos acciones y una sola manda: la que cierra el caso es la solida */
.v2-mock-zl-ac{display:flex;gap:8px;margin-top:13px}
.v2-mock-zl-b1,.v2-mock-zl-b2{flex:1;text-align:center;padding:9px 10px;
  border-radius:var(--r8);font-size:var(--f2);font-weight:700}
.v2-mock-zl-b1{background:var(--n50);color:var(--i2);border:1px solid var(--n200)}
.v2-mock-zl-b2{background:var(--v2-accion);color:#fff}
/* el nombre del cliente de correo o de Jira, que reemplazo a la marca */
.v2-mock-cli{font-size:var(--f1);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--i3)}
.v2-mock-brand{display:flex;align-items:center;gap:8px}
.v2-mock-brand span{font-weight:800;font-size:var(--f2);color:var(--v2-navy);letter-spacing:-.2px}
.v2-mock-ahora{font-size:var(--f1);color:var(--i3)}
.v2-mock-meta{padding:12px 16px;border-bottom:1px solid var(--n100);display:grid;gap:6px}
.v2-mock-meta div{display:grid;grid-template-columns:56px 1fr;gap:8px;font-size:var(--f2)}
.v2-mock-meta b{color:var(--i3);font-weight:600}
.v2-mock-meta span{color:var(--i1);word-break:break-word}
.v2-mock-body{padding:16px}
.v2-mock-ln{margin:0 0 7px;font-size:var(--f2);color:var(--i1);line-height:1.55}
.v2-mock-ln:last-child{margin-bottom:0}
.v2-mock-ln.li{padding-left:14px;position:relative}
.v2-mock-ln.li::before{content:'•';position:absolute;left:0;color:var(--i3)}
.v2-mock-sp{height:8px}
.v2-mock-p{margin:0 0 12px;font-size:var(--f2);color:var(--i1);line-height:1.55;white-space:pre-wrap}
/* slack: avatar + burbuja, como cualquier mensaje de un bot */
.v2-mock.slack .v2-mock-hd{display:none}
.v2-mock-sk-row{display:flex;gap:10px;padding:14px 16px}
.v2-mock-sk-av{flex-shrink:0;width:36px;height:36px;border-radius:var(--r8);background:var(--v2-navy-bg);
  display:flex;align-items:center;justify-content:center}
.v2-mock-sk-b{min-width:0;flex:1}
.v2-mock-sk-hd{display:flex;align-items:baseline;gap:7px;margin-bottom:3px}
.v2-mock-sk-hd b{color:var(--v2-navy)}
.v2-mock-sk-app{font-style:normal;font-size:var(--f1);font-weight:700;background:var(--n100);
  color:var(--i2);border-radius:3px;padding:1px 4px}
.v2-mock-sk-hd span{font-size:var(--f1);color:var(--i3)}
/* jira: cabecera con el mismo marco, la sumatoria como titulo y la tabla */
.v2-mock-jira-id{font-size:var(--f1);color:var(--i3);font-weight:700}
.v2-mock-jira-t{font-size:var(--f3);font-weight:700;color:var(--i1);margin:14px 16px 0}
.v2-mock.jira .v2-mock-p{margin:14px 16px 0}
.v2-mock-h3{margin:16px 16px 0;font-size:var(--f2);font-weight:700;color:var(--i1)}
.v2-mock-tb{border-collapse:collapse;margin:10px 16px 14px;width:calc(100% - 32px)}
.v2-mock-tb th,.v2-mock-tb td{border:1px solid var(--n200);padding:6px 9px;font-size:var(--f1);text-align:left}
.v2-mock-tb th{background:var(--n25);color:var(--i2)}
.v2-mock.jira .v2-mock-ln{margin:0 16px 8px}

/* ══════ LA RAMPA DE SALIDA ═══════════════════════════════════
   EL COMPONENTE DISTINTIVO DE LO ACCIONABLE. Todo el informe son superficies
   blancas con borde: leer. Esta es la unica pieza rellena de la pantalla, y
   por eso se ve desde el otro lado del cuarto. Tiene DOS estados y son
   distintos de verdad, no un boton que se apaga:

     falta  →  superficie ambar, dibujo en contorno, dice que falta
     listo  →  superficie teal llena, dibujo solido, el boton en blanco

   El dibujo es propio (`_v2RecArte`): el sobre saliendo y las pruebas que
   quedan atras. Cuenta lo que hace el boton sin una palabra. */
.v2-lanz{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;
  border-radius:var(--r14);padding:16px 20px;border:1px solid var(--op-bd);
  background:var(--op-bg);
  transition:background .3s var(--eo),border-color .3s var(--eo),box-shadow .3s var(--eo)}
.v2-lanz-a{width:52px;height:52px;flex-shrink:0;display:block}
.v2-lanz-t{min-width:0}
.v2-lanz-t b{display:block;font-size:var(--f3);font-weight:700;letter-spacing:-.3px;color:var(--i1)}
.v2-lanz-t span{display:block;font-size:var(--f2);font-weight:450;line-height:1.55;
  color:var(--i2);margin-top:4px;max-width:62ch}
.v2-lanz-t em{font-style:normal;font-weight:650;color:var(--op-t)}
.v2-lanz-b{display:flex;flex-wrap:wrap;gap:9px;align-items:center;justify-content:flex-end}
:where(#v2-app) .v2-lanz-b .v2-ib{height:40px;padding:0 17px}
.v2-lanz.listo{background:linear-gradient(135deg,var(--t700),var(--t800));
  border-color:var(--t800);box-shadow:var(--sh-up)}
.v2-lanz.listo .v2-lanz-t b{color:#fff}
.v2-lanz.listo .v2-lanz-t span{color:var(--t50)}
.v2-lanz.listo .v2-lanz-t em{color:#fff;font-weight:700}
:where(#v2-app) .v2-lanz.listo .v2-ib{background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.36);color:#fff}
@media (hover:hover){
  :where(#v2-app) .v2-lanz.listo .v2-ib:hover{background:rgba(255,255,255,.22);
    border-color:rgba(255,255,255,.55);color:#fff;box-shadow:none}
}
:where(#v2-app) .v2-lanz.listo .v2-ib.pri,
:where(#v2-app) .v2-lanz.listo .v2-ib.pri:disabled{background:#fff;border-color:#fff;
  color:var(--t800);font-weight:700}
@media (hover:hover){
  :where(#v2-app) .v2-lanz.listo .v2-ib.pri:hover{background:var(--t50);border-color:var(--t50);color:var(--t800)}
}
/* Apagado NO es opacity: es gris con tinta legible, porque un control apagado
   hay que poder leerlo. */
:where(#v2-app) .v2-lanz .v2-ib.pri:disabled{background:var(--n100);border-color:var(--n200);
  color:var(--i3);opacity:1;cursor:not-allowed}
:where(#v2-app) .v2-lanz .v2-ib:disabled{opacity:1;cursor:not-allowed}
:where(#v2-app) .v2-lanz.listo .v2-ib:disabled{background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.78)}
.v2-lanz .v2-ib:disabled .v2-recmq{background:var(--n0);border-color:var(--n200)}
@media (max-width:1040px){
  .v2-lanz{grid-template-columns:auto 1fr;gap:14px}
  .v2-lanz-b{grid-column:1/-1;justify-content:flex-start}
}

/* MOVIMIENTO CON MOTIVO, Y ES UNO SOLO: cambiar de destino REHACE el
   formulario, así que entra como algo nuevo y no como un texto que mutó solo.
   Las tres marcas no se mueven, porque no cambiaron. */
@keyframes v2reccambia{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
#v2-rec-envio.cambia .v2-recfrm>*{animation:v2reccambia .24s var(--eo) both}
#v2-rec-envio.cambia .v2-recfrm>*:nth-child(2){animation-delay:.05s}
#v2-rec-envio.cambia .v2-recfrm>*:nth-child(3){animation-delay:.09s}
@media (prefers-reduced-motion:reduce){
  #v2-rec-envio.cambia .v2-recfrm>*{animation:none}
  .v2-rp-n{transition:none}
}
/* ══════════════════════════════════════════════════════════════════════════
   LOS CONTROLES · LA CAPA QUE FALTABA
   El cliente dijo «se siente muy Windows 98», y tenia razon por una causa
   concreta: cada campo era un rectangulo con un borde de 1px y nada mas. Cinco
   campos apilados se leen como un formulario de 1998 aunque el resto de la
   pantalla este cuidado. Lo que sigue no cambia ni un dato: cambia como se
   comporta y como se ve TODO control del v2, en un solo lugar.

   Cuatro decisiones:
   1. EL CAMPO ES UN HUECO, NO UNA CAJA. Fondo apenas mas frio que el papel y
      una sombra interior de 1px arriba: el ojo lee «acá se escribe» antes de
      leer la etiqueta. Al enfocarlo se vuelve blanco puro, y ese salto de
      fondo hace la mitad del trabajo del anillo.
   2. UN SOLO ANILLO DE FOCO. Habia cuatro tratamientos distintos (--t200 con
      --t50, --t500 con un rgba a mano, --t600 con --ring). Ahora es siempre
      borde --t600 mas --ring, y por eso se reconoce.
   3. LOS ESTADOS SE VEN. hover, foco, error y deshabilitado tienen cada uno su
      forma. Deshabilitado NO es opacity: es gris con tinta legible, porque un
      control apagado hay que poder leerlo.
   4. NADA NATIVO. El select trae su propia flecha, el checkbox su propia
      marca, el number pierde las flechitas del navegador y gana cifras
      tabulares alineadas a la derecha. La flecha y la marca van como data URI
      porque acá no hay npm ni librería de íconos: se dibujan a mano.
   ═══════════════════════════════════════════════════════════════════════ */
:where(#v2-app){
  --ctl-bg:#fbfdfd;
  --ctl-bd:#c3d1d1;
  --ctl-bd-h:#8ea2a3;
  --ctl-ph:#6d8182;
  --ctl-sh:inset 0 1px 2px rgba(14,28,30,.055);
  --ctl-fx:border-color var(--tr-base) var(--eo),box-shadow var(--tr-base) var(--eo),background-color var(--tr-base) var(--eo);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235b6f70' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6'/%3E%3C/svg%3E");
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}:where(#v2-app) .v2-inp,
:where(#v2-app) .v2-sel,
:where(#v2-app) .v2-mini-sel,
:where(#v2-app) .v2-fec,
:where(#v2-app) .v2-cxa-i,
:where(#v2-app) .v2-fm input,
:where(#v2-app) .v2-recta{
  -webkit-appearance:none;appearance:none;
  background-color:var(--ctl-bg);border:1px solid var(--ctl-bd);color:var(--i1);
  box-shadow:var(--ctl-sh);transition:var(--ctl-fx)}:where(#v2-app) .v2-inp::placeholder,
:where(#v2-app) .v2-fm input::placeholder,
:where(#v2-app) .v2-cxa-i::placeholder,
:where(#v2-app) .v2-recta::placeholder{
  color:var(--ctl-ph);font-weight:450;opacity:1}
@media (hover:hover){:where(#v2-app) .v2-inp:hover,
:where(#v2-app) .v2-sel:hover,
:where(#v2-app) .v2-mini-sel:hover,
:where(#v2-app) .v2-fec:hover,
:where(#v2-app) .v2-cxa-i:hover,
:where(#v2-app) .v2-fm input:hover,
:where(#v2-app) .v2-recta:hover{
    border-color:var(--ctl-bd-h);background-color:var(--n0)}
}:where(#v2-app) .v2-inp:focus,
:where(#v2-app) .v2-sel:focus,
:where(#v2-app) .v2-mini-sel:focus,
:where(#v2-app) .v2-fec:focus,
:where(#v2-app) .v2-cxa-i:focus,
:where(#v2-app) .v2-fm input:focus,
:where(#v2-app) .v2-recta:focus{
  outline:none;background-color:var(--n0);border-color:var(--t600);box-shadow:var(--ring)}:where(#v2-app) .v2-inp:disabled,
:where(#v2-app) .v2-sel:disabled,
:where(#v2-app) .v2-mini-sel:disabled,
:where(#v2-app) .v2-fec:disabled,
:where(#v2-app) .v2-cxa-i:disabled,
:where(#v2-app) .v2-fm input:disabled,
:where(#v2-app) .v2-recta:disabled{
  background-color:var(--n50);border-color:var(--n200);color:var(--i3);
  -webkit-text-fill-color:var(--i3);box-shadow:none;cursor:not-allowed}:where(#v2-app) .v2-recta{border-radius:var(--r14)}

/* ── el select con SU flecha. Sin esto el v2 muestra la del sistema, que en
      Windows es literalmente la de 1998 ── */
:where(#v2-app) .v2-sel,:where(#v2-app) .v2-mini-sel,:where(#v2-app) select.v2-cxa-i{
  padding-right:31px;background-image:var(--chev);background-repeat:no-repeat;
  background-position:right 11px center;cursor:pointer}
:where(#v2-app) select:disabled{background-image:none}
@media (hover:hover){
  :where(#v2-app) .v2-sel:hover,:where(#v2-app) .v2-mini-sel:hover{background-position:right 10px center}
}

/* ── number: sin las flechitas, con cifras tabulares alineadas a la derecha ── */
:where(#v2-app) input[type=number]::-webkit-outer-spin-button,
:where(#v2-app) input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
:where(#v2-app) input[type=number]{-moz-appearance:textfield}
:where(#v2-app) .v2-cxa-i[type=number]{text-align:right;font-variant-numeric:tabular-nums;font-weight:650}

/* ── fecha: el ícono del navegador queda, atenuado, y se enciende al pasar ── */
:where(#v2-app) .v2-fec{padding-right:9px}
:where(#v2-app) .v2-fec::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer;
  transition:opacity var(--tr-base) var(--eo)}
:where(#v2-app) .v2-fec:hover::-webkit-calendar-picker-indicator{opacity:1}

/* ── el checkbox, dibujado ── */
:where(#v2-app) input[type=checkbox]{
  -webkit-appearance:none;appearance:none;width:17px;height:17px;flex-shrink:0;margin:0;
  border:1.5px solid var(--ctl-bd);border-radius:var(--r6);background-color:var(--n0);
  box-shadow:var(--ctl-sh);cursor:pointer;display:inline-block;vertical-align:-3px;
  background-repeat:no-repeat;background-position:center;
  transition:var(--ctl-fx),transform .12s var(--eo)}
:where(#v2-app) input[type=checkbox]:checked{background-color:var(--t700);border-color:var(--t700);
  background-image:var(--tick);box-shadow:none}
:where(#v2-app) input[type=checkbox]:active{transform:scale(.9)}
:where(#v2-app) input[type=checkbox]:focus-visible{outline:none;box-shadow:var(--ring)}
:where(#v2-app) input[type=checkbox]:disabled{background-color:var(--n50);border-color:var(--n200);
  cursor:not-allowed}
@media (hover:hover){ :where(#v2-app) input[type=checkbox]:hover:not(:disabled){border-color:var(--ctl-bd-h)} }
.v2-elg-i:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--t500)}
.v2-elg-k{transition:background var(--tr-16) var(--eo),border-color var(--tr-16) var(--eo),transform .12s var(--eo)}
.v2-elg-i:active .v2-elg-k{transform:scale(.9)}

/* ══════ EL CAMPO CON GUÍA ═══════════════════════════════════════════════
   Un ícono a la izquierda dice de qué es el campo antes de leer la etiqueta,
   y cambia de color con el estado: gris vacío, tinta escrito, teal enfocado,
   ámbar si falta. Es la pieza que convierte cinco rectángulos iguales en
   cinco campos distintos. */
.v2-fld{min-width:0}
.v2-fld-l{display:flex;align-items:center;gap:8px;font-size:var(--f1);font-weight:650;
  color:var(--i2);margin-bottom:6px}
.v2-fld-b{position:relative;display:block}
.v2-fld-g{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:flex;
  color:var(--n400);pointer-events:none;transition:color var(--tr-16) var(--eo);z-index:1}
:where(#v2-app) .v2-fld-b input{width:100%;height:40px;border-radius:var(--r8);
  padding:0 13px 0 38px;font-size:var(--f2);font-weight:500}
.v2-fld.hay .v2-fld-g{color:var(--i2)}
.v2-fld-b:focus-within .v2-fld-g{color:var(--t600)}
.v2-fld.pide .v2-fld-g{color:var(--op-t)}
:where(#v2-app) .v2-fld.pide input{border-color:var(--op-t);box-shadow:0 0 0 3px var(--op-bg)}
:where(#v2-app) .v2-fld.pide input:focus{border-color:var(--op-t);box-shadow:0 0 0 3px var(--op-bd)}

/* El campo guiado usa clases propias, así que hay que darle el sistema: sin
   esto hereda el borde del navegador, que es exactamente lo que se vino a
   sacar. */
:where(#v2-app) .v2-fld-b input{-webkit-appearance:none;appearance:none;
  background-color:var(--ctl-bg);border:1px solid var(--ctl-bd);color:var(--i1);
  box-shadow:var(--ctl-sh);transition:var(--ctl-fx)}
:where(#v2-app) .v2-fld-b input::placeholder{color:var(--ctl-ph);font-weight:450;opacity:1}
@media (hover:hover){
  :where(#v2-app) .v2-fld-b input:hover{border-color:var(--ctl-bd-h);background-color:var(--n0)}
}
:where(#v2-app) .v2-fld-b input:focus{outline:none;background-color:var(--n0);
  border-color:var(--t600);box-shadow:var(--ring)}
:where(#v2-app) .v2-fld-b input:disabled{background-color:var(--n50);border-color:var(--n200);
  color:var(--i3);-webkit-text-fill-color:var(--i3);box-shadow:none;cursor:not-allowed}
:where(#v2-app) .v2-fld .v2-fld-l{display:flex}
:where(#v2-app) .v2-fld .v2-fld-l svg{flex-shrink:0;color:var(--n400)}
:where(#v2-app) .v2-fld.pide .v2-fld-b input{border-color:var(--op-t);box-shadow:0 0 0 3px var(--op-bg)}
:where(#v2-app) .v2-fld.pide .v2-fld-b input:focus{border-color:var(--op-t);box-shadow:0 0 0 3px var(--op-bd)}
.v2-recfm-a{display:flex;align-items:flex-end}

/* LA BARRA DE ACCIÓN PINTA SU SELECT CON `background` (atajo), y el atajo
   borra la flecha dibujada. Acá vuelve, con el mismo dibujo. */
:where(#v2-app) .v2-pan-est .v2-sel{background-image:var(--chev);
  background-repeat:no-repeat;background-position:right 9px center;padding-right:27px}

/* ── ACCIONES POR TIPO DE CASO ─────────────────────────────────────────────
   La pregunta 4 dice qué hacer, y qué hacer depende de la métrica. Todo esto
   vive ADENTRO de `.v2-hx-acc`, que ya pone fondo, borde, filete y trama: acá
   no se declara ni una superficie más. Lo único que se pone es el padding, que
   antes lo traía `.v2-paso` porque era lo único que había adentro.

   SIN COLOR POR FAMILIA A PROPÓSITO. Son seis familias y la paleta tiene tres
   categóricos validados: inventar seis acentos para rotular un renglón es
   volver a los catorce radios. La familia se lee porque está escrita.
   ═════════════════════════════════════════════════════════════════════════ */
/* LA FRASE QUE DESPUES SALE TAL CUAL adentro del texto. Es la unica de la
   pantalla que no describe: se manda. Por eso va citada y sobre blanco. */
.v2-qh-pide{margin-top:18px;padding:12px 15px;border-radius:var(--r10);
  background:var(--n0);border:1px solid var(--t200);display:grid;gap:5px}
.v2-qh-pide>span{font-size:var(--f1);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--t700)}
.v2-qh-pide q{font-size:var(--f3);font-weight:600;color:var(--i1);line-height:1.5;
  quotes:"\00ab" "\00bb"}
/* las tres cosas que Znapp pone en la mano: filas, no tarjetas. Una tarjeta
   adentro de otra tarjeta adentro del componente accionable son tres bordes
   para decir lo mismo. */
.v2-qh-acc{display:grid;margin-top:20px}
.v2-qh-i{display:grid;grid-template-columns:30px 1fr auto;gap:14px;align-items:start;
  padding:13px 0;border-top:1px solid var(--t100)}
.v2-qh-i:first-child{border-top:none;padding-top:4px}
.v2-qh-i>.ic{width:30px;height:30px;border-radius:var(--r10);background:var(--t50);
  color:var(--t700);display:flex;align-items:center;justify-content:center}
.v2-qh-i b{display:block;font-size:var(--f2);font-weight:650;color:var(--i1);margin-bottom:3px}
.v2-qh-i .v2-qh-p{font-size:var(--f2);font-weight:450;color:var(--i2);line-height:1.55;max-width:64ch}
.v2-qh-i .v2-qh-p b{display:inline;margin:0;font-weight:650;color:var(--i1)}
/* la hoja de pedido de portafolio obligatorio: el SKU y en cuantos falta */
.v2-qh-sku{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.v2-qh-sku i{font-style:normal;font-size:var(--f1);font-weight:650;color:var(--i1);
  background:var(--n0);border:1px solid var(--n200);border-radius:var(--rpill);padding:3px 10px}
.v2-qh-sku i s{text-decoration:none;color:var(--i3);font-weight:500}
/* LAS DOS ADVERTENCIAS. «Esto no es X» va en ambar porque es lo que evita el
   movimiento equivocado; el interlocutor va en tinta porque es un dato, y
   ademas la pregunta 3 sigue proponiendo lo suyo: aca no se cambia, se avisa. */
.v2-qh-no,.v2-qh-int{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start;
  margin-top:15px;font-size:var(--f2);font-weight:450;line-height:1.55;max-width:74ch}
.v2-qh-no{color:var(--op-t)}
.v2-qh-int{color:var(--i2)}
.v2-qh-no>svg,.v2-qh-int>svg{margin-top:2px}
.v2-qh-int>svg{color:var(--i3)}
.v2-qh-no b,.v2-qh-int b{font-weight:650}
@media (max-width:1180px){
  .v2-qh-i{grid-template-columns:30px 1fr;row-gap:10px}
  .v2-qh-i .v2-ib{grid-column:2;justify-self:start}
}

/* ══════ EL CORTE: ABAJO DE 860px NO HAY v2 ══════
   El piso real: la lista no baja de 352px sin cortar los titulos, y el cuerpo
   necesita ~472, o sea ~824 mas el padding del `.v2-in`. El corte va en 860 y
   no mas abajo para que el bloqueo aparezca ANTES de que se vuelva ridiculo,
   y deja intactos los breakpoints de 1100, 1040 y 900, que si funcionan.
   Se ocultan el riel y el cuerpo —no se tapan— porque son ellos los que
   desbordan: con el bloqueo encima y el desborde vivo debajo, la pagina
   seguiria scrolleando de costado. */


/* ══════ EL TRABAJO DE LAS OTRAS CAMPAÑAS, en la cola ══════
   Van en su propio bloque y no mezcladas con la cola viva: de éstas sabemos lo
   que dice su foto y no su evidencia, y una fila que promete lo mismo que sus
   vecinas y entrega menos es peor que una fila que dice qué es. */
.v2-otra{margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--n200)}
.v2-otra-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:0 2px 7px;font-size:var(--f1)}
.v2-otra-h b{font-weight:700;color:var(--i2);text-transform:uppercase;letter-spacing:.4px}
.v2-otra-h span{font-weight:500;color:var(--i3)}
:where(#v2-app) .v2-otra-i{display:grid;grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;gap:8px;width:100%;text-align:left;background:var(--n0);
  border:1px solid var(--n100);border-radius:var(--r8);padding:7px 9px;margin-bottom:4px;
  cursor:pointer;opacity:.86;transition:opacity var(--tr-16) ease,border-color var(--tr-16) ease}
@media (hover:hover){ :where(#v2-app) .v2-otra-i:hover{opacity:1;border-color:var(--t400)} }
.v2-otra-n{font-size:var(--f2);font-weight:700;color:var(--i1);text-align:right}
.v2-otra-t{font-size:var(--f1);font-weight:600;color:var(--i1);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-otra-t i{font-style:normal;font-weight:450;color:var(--i3)}
.v2-otra-t i::before{content:' · '}
.v2-otra-e{font-size:var(--f1);font-weight:600;color:var(--i3);white-space:nowrap}
.v2-otra-i.venc{border-left:3px solid var(--mal)}

/* ══ PARTNERS · LA SECCIÓN ════════════════════════════════════════════════
   Dos columnas: la lista manda y el resumen acompaña. El resumen NO es un
   tablero: son cuatro números y un reparto por tipo, y por eso vive en 300px
   y no en la mitad de la pantalla. Debajo de 1180 el rail se apila abajo,
   porque a ese ancho una columna de 300 le come el aire a la lista, que es lo
   que se vino a leer.
   TODO LO QUE PINTA ACÁ SALE DE `.v2-pn-*` DONDE YA EXISTÍA: el avatar, los
   inputs, los chips de cobertura y el botón de borrar son los mismos, con las
   mismas clases. Lo nuevo es la composición. */
/* SIN `.v2-in`, Y NO ES CAPRICHO: `.v2-pan .v2-in{max-width:none}` le gana por
   especificidad a cualquier clase suelta que se le ponga al lado, asi que un
   `class="v2-in v2-pt-w"` se ensancha hasta el borde y el max-width de aca
   abajo no se aplica nunca. Medido: 1548px donde decia 1340. */
.v2-pt-w{max-width:var(--int-wrap);margin:0 auto;padding:0 26px;width:100%}
.v2-pt-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.v2-pt-main{min-width:0}
.v2-pt-rail{display:flex;flex-direction:column;gap:12px;position:sticky;top:12px}
@media (max-width:1180px){
  .v2-pt-cols{grid-template-columns:minmax(0,1fr)}
  .v2-pt-rail{position:static;flex-direction:row;flex-wrap:wrap}
  .v2-pt-rail>*{flex:1 1 260px}
}
:where(#v2-app) .v2-pt-q{flex:3 1 240px;width:auto;height:34px}
.v2-pt-n{font-size:var(--f1);font-weight:700;color:var(--i3);margin-left:auto;white-space:nowrap}

.v2-pt-l{display:flex;flex-direction:column;gap:7px}
.v2-pt-av{width:34px;height:34px;font-size:var(--f3)}
.v2-pt-id{min-width:0}
.v2-pt-id b{display:block;font-size:var(--f3);font-weight:650;color:var(--i1);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-pt-id b.x{color:var(--n400);font-weight:500}
.v2-pt-id em{display:block;font-style:normal;font-size:var(--f1);font-weight:500;color:var(--i3);
  line-height:1.4;margin:1px 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-pt-tag{display:inline-block;font-size:var(--f1);font-weight:700;letter-spacing:.04em;
  color:var(--i2);background:var(--n50);border-radius:var(--rpill,999px);padding:2px 8px}
/* LA SITUACIÓN ES MEDIDA, NO DECLARADA. La referencia trae acá un «Activo / En
   revisión» que nadie declaró en este producto y que no sale de ningún dato:
   pintarlo sería inventarlo. En su lugar va lo que el trabajo dice de cada uno
   —vencidos, esperando respuesta, casos vivos— que es lo que hace falta para
   decidir a quién llamar hoy. */
.v2-pt-sit{font-size:var(--f1);font-weight:700;white-space:nowrap;padding:3px 9px;
  border-radius:var(--rpill,999px);background:var(--n50);color:var(--i2);justify-self:start}
.v2-pt-sit.ok{background:var(--t50);color:var(--t700)}
.v2-pt-sit.av{background:var(--op-bg);color:var(--op-t)}
.v2-pt-sit.mal{background:var(--mal-bg);color:var(--mal)}
.v2-pt-sit.x{background:transparent;color:var(--n400);font-weight:500}

/* la ficha: cuatro bloques, y los dos que no son datos ocupan el ancho */
.v2-pt-f{border-top:1px solid var(--n100);background:var(--n25);padding:14px;
  display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* ═══════ DE QUÉ SE HACE CARGO UN PARTNER ═══════
   El editor que reemplaza el viaje a Reglas. Un grupo por dimensión que el
   relevamiento haya medido —territorio, cadena, y las que traiga— y adentro un
   botón por valor, con cuántos comercios cae cada uno: ese número es lo que
   convierte «CABA» en una decisión y no en una etiqueta.
   El que ya tiene dueño se marca aparte: tomarlo se lo saca a otro, y eso hay
   que verlo ANTES de tocar, no enterarse por el aviso de después. */
.v2-ptr{display:flex;flex-direction:column;gap:16px;margin-top:4px}
.v2-ptr-g{min-width:0}
.v2-ptr-gh{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.v2-ptr-gh svg{color:var(--t700);flex:0 0 auto}
.v2-ptr-gh b{font-size:var(--f2);font-weight:750;color:var(--i1)}
.v2-ptr-gh em{font-style:normal;font-size:var(--f1);font-weight:600;color:var(--i3);
  font-variant-numeric:tabular-nums}
:where(#v2-app) .v2-ptr-todos{margin-left:auto;flex:0 0 auto;background:none;border:0;
  padding:4px 2px;font:inherit;font-size:var(--f1);font-weight:700;color:var(--t700);
  cursor:pointer;border-radius:var(--r8)}
@media (hover:hover){ :where(#v2-app) .v2-ptr-todos:hover{text-decoration:underline} }
.v2-ptr-vs{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:8px}
/* CADA VALOR ES UN BOTÓN, y se ve que lo es: caja propia, casilla a la
   izquierda y el conteo a la derecha. Con chips planos no se distinguía lo
   elegido de lo elegible. */
:where(#v2-app) .v2-ptr-v{display:flex;align-items:center;gap:9px;width:100%;min-width:0;
  text-align:left;padding:9px 11px;background:var(--n0);border:1px solid var(--n200);
  border-radius:var(--r10);cursor:pointer;font:inherit;
  transition:background var(--mo-2) var(--ez-out),border-color var(--mo-2) var(--ez-out)}
@media (hover:hover){ :where(#v2-app) .v2-ptr-v:hover{border-color:var(--t300);
  background:var(--t50)} }
:where(#v2-app) .v2-ptr-v.on{border-color:var(--t600);background:var(--t50)}
.v2-ptr-ck{flex:0 0 auto;width:18px;height:18px;border-radius:6px;border:1.5px solid var(--n300);
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:background var(--mo-2) var(--ez-out),border-color var(--mo-2) var(--ez-out)}
.v2-ptr-v.on .v2-ptr-ck{background:var(--t600);border-color:var(--t600)}
.v2-ptr-v.on .v2-ptr-ck svg{animation:wzTilde var(--mo-3) var(--ez-pop) backwards}
/* ENVUELVE, NO SE CORTA. MEDIDO: «CIUDAD DE BUENOS AIRES» perdia 51px de
   texto y quedaba «CIUDAD DE BUE...». Es el nombre de lo que estas por poner
   a cargo de alguien: cortarlo justo donde deja de distinguirse de otro es lo
   peor que puede pasar en esta lista. La tarjeta tiene alto de sobra. */
.v2-ptr-t{flex:1;min-width:0;font-size:var(--f2);font-weight:600;color:var(--i1);
  line-height:1.25;overflow-wrap:anywhere}
.v2-ptr-v.on .v2-ptr-t{font-weight:700;color:var(--t800)}
.v2-ptr-n{flex:0 0 auto;font-size:var(--f1);font-weight:700;color:var(--i3);
  font-variant-numeric:tabular-nums;background:var(--n50);border-radius:999px;padding:1px 7px}
.v2-ptr-v.on .v2-ptr-n{background:var(--n0);color:var(--t700)}
/* el que ya es de otro: se puede tomar, pero se avisa antes y no después */
:where(#v2-app) .v2-ptr-v.aj{border-style:dashed}
.v2-ptr-aj{flex:1 0 100%;font-size:var(--f0);font-weight:650;color:var(--op-t);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){ .v2-ptr-vs{grid-template-columns:minmax(0,1fr)} }

/* ══ EL AIRE DE LA SECCION ══
   Cinco bloques se apilaban con la misma separacion que hay ENTRE las
   tarjetas de adentro de cada uno —doce pixeles—, asi que no se leian como
   cinco bloques sino como una lista larga de cajas. Entre bloques va mas que
   entre hermanos: es lo unico que dice donde termina uno y empieza otro. */
.v2-bk-3{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:26px}
.v2-pt-bk .v2-bk-c{min-height:92px}
.v2-rg-top .v2-pta{margin-bottom:26px}
.v2-rg-top .v2-band-ctx{margin:14px 0 20px}
.v2-rg-top .v2-rg-barra{margin-bottom:18px}
@media (max-width:900px){ .v2-bk-3{grid-template-columns:minmax(0,1fr)} }

.v2-pt-bloque{background:var(--n0);border:1px solid var(--n100);border-radius:var(--r10);padding:12px}
.v2-pt-bloque.ancho{grid-column:1/-1}
.v2-pt-bt{display:flex;align-items:center;gap:7px;font-size:var(--f1);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--i3);margin:0 0 9px}
.v2-pt-bt>svg{color:var(--n400)}
.v2-pt-bt i{font-style:normal;letter-spacing:0;text-transform:none;font-weight:600;
  margin-left:auto;color:var(--t700)}
.v2-pt-bp{margin:8px 0 0;font-size:var(--f2);font-weight:450;line-height:1.55;color:var(--i2)}
.v2-pt-bp b{font-weight:700;color:var(--i1);font-variant-numeric:tabular-nums}
.v2-pt-kpi{display:flex;flex-wrap:wrap;gap:8px}
.v2-pt-kpi>div{flex:1 1 120px;padding:9px 12px;background:var(--n25);border-radius:var(--r10);
  border:1px solid var(--n100)}
.v2-pt-kpi b{display:block;font-size:var(--f5);font-weight:700;letter-spacing:-.6px;color:var(--i1);
  line-height:1.1;font-variant-numeric:tabular-nums}
.v2-pt-kpi i{display:block;font-style:normal;font-size:var(--f1);font-weight:500;color:var(--i3);
  margin-top:2px}
.v2-pt-kpi>div.av{background:var(--op-bg);border-color:var(--op-bd)}
.v2-pt-kpi>div.av b{color:var(--op-t)}
.v2-pt-kpi>div.mal{background:var(--mal-bg);border-color:var(--mal-bd)}
.v2-pt-kpi>div.mal b{color:var(--mal)}
.v2-pt-kpi>div.ok b{color:var(--t700)}
.v2-pt-cs{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:1px}
.v2-pt-cs li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:8px 11px;
  background:var(--n25);border-radius:var(--r8);font-size:var(--f2)}
.v2-pt-cs li.venc{background:var(--mal-bg)}
.v2-pt-cs li.mas{background:none;color:var(--i3);font-size:var(--f1);font-weight:600;padding:5px 11px}
.v2-pt-cs b{font-weight:650;color:var(--i1)}
.v2-pt-cs em{font-style:normal;font-size:var(--f1);font-weight:500;color:var(--i3);flex:1;min-width:0}
.v2-pt-cs span{font-size:var(--f1);font-weight:600;color:var(--i3);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.v2-pt-cs span.mal{color:var(--mal);font-weight:700}
.v2-pt-cs span.av{color:var(--op-t);font-weight:700}
@media (max-width:900px){ .v2-pt-f{grid-template-columns:1fr} .v2-pt-bloque{grid-column:1/-1} }

/* el rail */
.v2-pt-card{background:var(--n0);border:1px solid var(--n100);border-radius:var(--r14);
  padding:14px;box-shadow:var(--sh-rest)}
.v2-pt-card.sig{background:var(--t50);border-color:var(--t200);box-shadow:none}
.v2-pt-ct{font-size:var(--f1);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--i3);margin:0 0 11px}
.v2-pt-card p{margin:0 0 11px;font-size:var(--f2);font-weight:450;line-height:1.55;color:var(--i2)}
.v2-pt-card p b{font-weight:700;color:var(--i1)}
.v2-pt-cp{margin:-6px 0 11px!important}

/* ── crear ─────────────────────────────────────────────────────────────── */
:where(#v2-app) .v2-pt-volver{display:inline-flex;align-items:center;gap:6px;background:none;
  border:0;padding:0;margin:0 0 14px;cursor:pointer;font:inherit;font-size:var(--f2);
  font-weight:600;color:var(--t700)}
@media (hover:hover){ :where(#v2-app) .v2-pt-volver:hover{text-decoration:underline} }
.v2-pt-pasos{display:flex;align-items:center;gap:12px;margin:0 0 20px;flex-wrap:wrap}
.v2-pt-pasos>span{display:flex;align-items:center;gap:8px;font-size:var(--f2);font-weight:600;
  color:var(--n400)}
.v2-pt-pasos>span.on{color:var(--i1)}
.v2-pt-pasos i{display:flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:var(--n100);color:var(--i3);font-style:normal;font-size:var(--f1);
  font-weight:700}
.v2-pt-pasos>span.on i{background:var(--t700);color:#fff}
.v2-pt-pasos em{font-style:normal;font-size:var(--f1);font-weight:600;color:var(--t700);
  background:var(--t50);border-radius:var(--rpill,999px);padding:2px 8px}
.v2-pt-pasos .li{flex:1;min-width:24px;max-width:90px;height:1px;background:var(--n200)}
.v2-pt-form{background:var(--n0);border:1px solid var(--n100);border-radius:var(--r14);
  padding:18px;box-shadow:var(--sh-rest)}
.v2-pt-ft{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 16px;
  padding-bottom:14px;border-bottom:1px solid var(--n50)}
.v2-pt-ft i{display:flex;align-items:center;justify-content:center;width:24px;height:24px;
  flex-shrink:0;border-radius:50%;background:var(--t700);color:#fff;font-style:normal;
  font-size:var(--f1);font-weight:700}
.v2-pt-ft b{font-size:var(--f4);font-weight:700;color:var(--i1);letter-spacing:-.3px}
.v2-pt-ft em{font-style:normal;font-size:var(--f2);font-weight:450;color:var(--i3);width:100%}
.v2-pt-fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  margin:0 0 16px}
.v2-pt-lb{display:block}
.v2-pt-lb>span{display:block;font-size:var(--f1);font-weight:700;color:var(--i2);margin:0 0 5px}
.v2-pt-lb>span b{color:var(--mal)}
.v2-pt-lb>span em{font-style:normal;font-weight:500;color:var(--n400);margin-left:5px}
:where(#v2-app) .v2-pt-lb .v2-pn-i{width:100%;height:38px}
.v2-pt-lb.tipo{margin:0 0 16px}
.v2-pt-tps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
/* GRILLA Y NO FLEX-WRAP: con `flex-wrap` un nombre de dos líneas -«Vendedor o
   repositor»- empujaba su descripción y las siete tarjetas quedaban con el
   texto a distinta altura. Acá el avatar ocupa las dos filas y el texto
   siempre arranca donde mismo. */
:where(#v2-app) .v2-pt-tp{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:2px 9px;align-content:start;text-align:left;
  padding:10px 11px;background:var(--n0);border:1px solid var(--n200);border-radius:var(--r10);
  cursor:pointer;font:inherit;color:var(--i1);
  transition:border-color var(--tr-base) var(--eo),background var(--tr-base) var(--eo)}
.v2-pt-tp>.v2-pn-av{grid-row:1/3;align-self:start}
@media (hover:hover){ :where(#v2-app) .v2-pt-tp:hover{border-color:var(--t300);background:var(--t50)} }
:where(#v2-app) .v2-pt-tp.on{border-color:var(--t600);background:var(--t50);box-shadow:var(--ring)}
.v2-pt-tp b{font-size:var(--f2);font-weight:650;line-height:1.35;align-self:center;min-height:28px;
  display:flex;align-items:center}
.v2-pt-tp em{font-style:normal;font-size:var(--f1);font-weight:500;color:var(--i3);line-height:1.4}
:where(#v2-app) .v2-pt-otro{width:100%;max-width:260px;margin-top:9px;height:38px}
.v2-pt-fp{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:start;
  margin:0;padding:11px 13px;background:var(--t50);border-radius:var(--r10);font-size:var(--f2);
  font-weight:450;line-height:1.55;color:var(--i2)}
.v2-pt-fp>svg{margin-top:2px;color:var(--t700)}
.v2-pt-fp b{font-weight:700;color:var(--i1)}
.v2-pt-fa{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:16px}
.v2-pt-prev{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 11px;align-items:center;
  padding:12px;background:var(--n25);border:1px solid var(--n100);border-radius:var(--r10)}
.v2-pt-prev .v2-pt-id,.v2-pt-prev .v2-pt-pm,.v2-pt-prev .v2-pt-sit{grid-column:2}
.v2-pt-pm{font-size:var(--f1);font-weight:500;color:var(--i3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ── lo que la sección le agrega a las piezas que ya existían ──────────── */
/* EL COLOR DEL AVATAR DICE EL PAPEL EN LA CADENA, y son tres familias, no
   ocho colores: quién abastece o ejecuta afuera (teal), el retail (pizarra),
   y las áreas de adentro del cliente (ámbar). Sale del flujo de valor, no de
   una paleta elegida a ojo, y usa los tres categóricos ya validados. */
.v2-pn-av.tp-distribuidor,.v2-pn-av.tp-vendedor,.v2-pn-av.tp-agencia{
  background:var(--t100);color:var(--t800)}
.v2-pn-av.tp-cadena{background:#e7eef2;color:#3b5766}
.v2-pn-av.tp-comercial,.v2-pn-av.tp-trade,.v2-pn-av.tp-interno{
  background:var(--op-bg);color:var(--op-t)}
.v2-pn-av.tp-otro{background:var(--n100);color:var(--i3)}
/* la tarjeta de Reglas: el partner se lee, no se edita */
.v2-pn-c-nm{flex:2 1 160px;min-width:0}
.v2-pn-c-nm b{display:block;font-size:var(--f2);font-weight:650;color:var(--i1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-pn-c-nm em{display:block;font-style:normal;font-size:var(--f1);font-weight:500;color:var(--i3)}
.v2-pn-c-ml{flex:2 1 170px;min-width:0;font-size:var(--f1);font-weight:500;color:var(--i3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-pn-c-ml.x{color:var(--n400)}
:where(#v2-app) .v2-pn-x.ed{width:auto;padding:0 10px;color:var(--t700);font-size:var(--f1);
  font-weight:650}
@media (hover:hover){ :where(#v2-app) .v2-pn-x.ed:hover{background:var(--t50);color:var(--t800)} }
:where(#v2-app) .v2-pn-alt-mas{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:var(--f1);font-weight:650;color:var(--t700);white-space:nowrap}
@media (hover:hover){ :where(#v2-app) .v2-pn-alt-mas:hover{text-decoration:underline} }


/* ══════════════════════════════════════════════════════════════════════════
   REGLAS — LA PROGRESION DE CINCO PASOS, EL RESUMEN VIVO Y LA PANTALLA DE
   INICIO
   ══════════════════════════════════════════════════════════════════════════
   Tres piezas nuevas y una sola idea: que se vea de un golpe QUE es criterio,
   QUE es alerta y QUE es responsabilidad. Antes las tres eran una oracion
   corrida de tres renglones. La columna izquierda -numero + icono- es la que
   hace el trabajo: da el eje vertical por el que el ojo baja sin releer.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── el alcance: una sola linea, y no compite con nada ─────────────────── */
.v2-rg-alc{display:flex;align-items:flex-start;gap:10px;margin-top:16px;
  padding:11px 14px;border:1px solid var(--n100);border-radius:var(--r10);
  background:var(--n25);font-size:var(--f1);font-weight:450;line-height:1.55;color:var(--i2)}
.v2-rg-alc>svg{flex-shrink:0;margin-top:2px;color:var(--i3)}
.v2-rg-alc b{font-weight:700;color:var(--i1)}
.v2-rg-alc i{font-style:italic}

/* ── los cinco pasos ──────────────────────────────────────────────────── */
/* ══ LA MUESTRA MINIMA, LA PRIORIDAD Y EL RESPONSABLE ══
   Las tres piezas que entraron cuando el setup paso de cinco pasos a tres. */
.v2-min{display:flex;flex-direction:column;gap:7px;min-width:0}
.v2-min-f{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.v2-min-f>span{font-size:var(--f2);font-weight:600;color:var(--i2);flex:0 0 auto}
/* CAMPO DE NUMERO, NO DESPLEGABLE. Usaba `.v2-sel`, que dibuja la flecha de un
   select: un campo que promete opciones y al tocarlo no ofrece ninguna. */
.v2-min-i{width:132px;flex:0 0 auto;padding:8px 11px;font:inherit;font-size:var(--f2);
  font-weight:650;color:var(--i1);background:var(--n0);border:1px solid var(--n200);
  border-radius:var(--r10);outline:none;font-variant-numeric:tabular-nums;
  transition:border-color var(--mo-2) var(--ez-out),box-shadow var(--mo-2) var(--ez-out)}
.v2-min-i:focus{border-color:var(--t600);box-shadow:var(--ring)}
.v2-min-i::placeholder{color:var(--n400);font-weight:450}
.v2-min-d{margin:0;font-size:var(--f1);font-weight:450;line-height:1.5;color:var(--i3)}
.v2-min-d b{font-weight:700;color:var(--i2)}

/* el bloque de responsables del paso Revisar */
.v2-rev-resp{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.v2-rev-resp-l{display:flex;flex-wrap:wrap;gap:8px}
.v2-rev-resp-i{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;
  background:var(--n0);border:1px solid var(--n200);border-radius:var(--rpill,999px)}
.v2-rev-resp-i svg{color:var(--t700);flex:0 0 auto}
.v2-rev-resp-i b{font-size:var(--f2);font-weight:700;color:var(--i1)}
.v2-rev-resp-i em{font-style:normal;font-size:var(--f1);font-weight:600;color:var(--i3);
  font-variant-numeric:tabular-nums}
.v2-rev-nota{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:var(--f2);
  font-weight:450;line-height:1.55;color:var(--i2)}
.v2-rev-nota svg{flex:0 0 auto;margin-top:3px;color:var(--op-t)}
.v2-rev-nota b{font-weight:700;color:var(--i1)}
:where(#v2-app) .v2-prio.nd.on{background:var(--n50);border-color:var(--n300);color:var(--i2)}
.v2-resp-cx{display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0}
.v2-resp-ok,.v2-resp-nd{display:flex;align-items:flex-start;gap:8px;margin:0;
  font-size:var(--f2);font-weight:450;line-height:1.5;color:var(--i2)}
.v2-resp-ok svg{color:var(--t600);flex:0 0 auto;margin-top:3px}
.v2-resp-nd svg{color:var(--op-t);flex:0 0 auto;margin-top:3px}
.v2-resp-ok b,.v2-resp-nd b{font-weight:700;color:var(--i1)}
/* `.v2-pn-mas` trae `margin-left:auto` de la ficha de partner, donde va
   pegado al borde derecho. Aca es la salida de un parrafo y va donde termina
   de leerse: a la izquierda, con el texto. */
:where(#v2-app) .v2-resp-cx .v2-pn-mas{margin-left:0;align-self:flex-start}

/* ══ LOS TRES PASOS: UN RIEL, Y CADA PREGUNTA CON SU ANCHO ══
   Eran tres columnas -numero 34px, pregunta 196px, controles en el resto-, o
   sea que la pregunta partia en tres renglones y los campos vivian en poco mas
   de la mitad de la tarjeta. Ahora el numero va solo en un riel angosto que
   los hila 1-2-3 con una linea, y la pregunta y los controles se reparten TODO
   el ancho restante, uno debajo del otro.
   El aire tambien cambia: 15px entre pasos no alcanzaba para que se leyeran
   como tres cosas, y un filete los separaba como una tabla. Ahora los separa
   el espacio, que es mas barato de leer que una linea. */
.v2-pz-w{display:flex;flex-direction:column;margin:6px 0 0}
.v2-pz{display:grid;grid-template-columns:26px minmax(0,1fr);
  column-gap:14px;row-gap:12px;align-items:start;padding:0 0 26px;position:relative}
.v2-pz:last-child{padding-bottom:2px}
.v2-pz-l{grid-row:1/span 2;align-self:stretch;display:flex;flex-direction:column;
  align-items:center;position:relative}
/* la linea que hila los pasos. Se corta en el ultimo, que es donde termina */
.v2-pz:not(:last-child) .v2-pz-l::after{content:'';position:absolute;
  top:30px;bottom:-26px;left:50%;width:2px;margin-left:-1px;
  background:var(--n100);border-radius:999px}
.v2-pz-n{width:26px;height:26px;border-radius:50%;background:var(--n0);
  border:1.5px solid var(--n200);color:var(--i3);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--f2);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
  transition:background var(--tr-16) var(--eo),border-color var(--tr-16) var(--eo),
             color var(--tr-16) var(--eo)}
/* DECLARADO = TILDE. Es el unico lugar donde se ve que falta sin leer los
   campos, y es lo que convierte la tarjeta en algo que se recorre. */
.v2-pz.hecho .v2-pz-n{background:var(--t600);border-color:var(--t600);color:#fff}
.v2-pz.hecho:not(:last-child) .v2-pz-l::after{background:var(--t200)}
.v2-pz-i{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;color:var(--i3);vertical-align:-4px;margin-right:7px}
.v2-pz.hecho .v2-pz-i{color:var(--t700)}
.v2-pz-t{grid-column:2;padding-top:2px;min-width:0}
.v2-pz-t b{display:flex;align-items:center;font-size:var(--f3);font-weight:700;
  color:var(--i1);letter-spacing:-.2px}
.v2-pz-t i{display:block;font-style:normal;font-size:var(--f2);font-weight:450;
  line-height:1.5;color:var(--i3);margin-top:3px}
.v2-pz-c{grid-column:2;min-width:0;display:flex;flex-direction:column;gap:11px}
/* ══ TU PRECIO SUGERIDO, ADENTRO DEL PASO QUE LO PIDE ══
   Es el unico campo del setup que no cabe en la frase -son N SKUs, no un
   numero-, asi que va como una lista corta con su propio marco. El numero
   medido a la izquierda del campo y no adentro: tiene que poder compararse con
   lo que uno escribe, no desaparecer cuando uno escribe. */
.v2-pcio{margin-top:4px;border:1px solid var(--n100);border-radius:var(--r12);
  background:var(--n25);padding:13px 15px 11px}
.v2-pcio-h{margin-bottom:11px}
.v2-pcio-h b{display:block;font-size:var(--f2);font-weight:700;color:var(--i1)}
.v2-pcio-h i{display:block;font-style:normal;font-size:var(--f1);font-weight:450;
  line-height:1.5;color:var(--i3);margin-top:3px}
.v2-pcio-f{display:flex;align-items:center;gap:12px;padding:7px 0;
  border-top:1px solid var(--n50)}
.v2-pcio-f:first-of-type{border-top:none}
.v2-pcio-n{flex:1 1 auto;min-width:0;font-size:var(--f2);font-weight:600;color:var(--i1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-pcio-o{flex:0 0 auto;font-size:var(--f1);color:var(--i3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-pcio-in{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;height:34px;
  padding:0 10px;background:var(--n0);border:1px solid var(--n200);border-radius:var(--r8);
  transition:border-color var(--tr-16) var(--eo),box-shadow var(--tr-16) var(--eo)}
.v2-pcio-in:focus-within{border-color:var(--t400);box-shadow:0 0 0 3px var(--t50)}
.v2-pcio-in.dec{border-color:var(--t300);background:var(--t50)}
.v2-pcio-in>span{font-size:var(--f1);font-weight:650;color:var(--i3)}
:where(#v2-app) .v2-pcio-in input{width:76px;border:none;background:none;outline:none;
  font:inherit;font-size:var(--f2);font-weight:650;color:var(--i1);text-align:right;
  font-variant-numeric:tabular-nums;padding:0;-moz-appearance:textfield}
:where(#v2-app) .v2-pcio-in input::-webkit-outer-spin-button,
:where(#v2-app) .v2-pcio-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
:where(#v2-app) .v2-pcio-mas{margin-top:9px;background:none;border:none;padding:0;cursor:pointer;
  font:inherit;font-size:var(--f1);font-weight:650;color:var(--t700);text-decoration:underline;
  text-underline-offset:3px}
@media (hover:hover){ :where(#v2-app) .v2-pcio-mas:hover{color:var(--t800)} }
.v2-pcio-sin{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--n50);font-size:var(--f1);line-height:1.5;color:var(--op-t,#8a5a00)}
.v2-pcio-sin>svg{flex:0 0 auto;margin-top:2px}
@media (max-width:720px){
  .v2-pcio-f{flex-wrap:wrap;row-gap:6px}
  .v2-pcio-n{flex:1 0 100%;white-space:normal;overflow:visible;text-overflow:clip}
  .v2-pcio-in{margin-left:auto}
}
.v2-pz-c .v2-fr-l{padding:0}
/* la explicacion de lo que compra el nivel elegido: nota, no tarjeta */
.v2-pz-hint{display:flex;align-items:flex-start;gap:9px;
  font-size:var(--f1);font-weight:450;line-height:1.55;color:var(--i2);
  padding:10px 13px;border-radius:var(--r10);background:var(--t50);
  border:1px solid var(--t100)}
.v2-pz-hint-i{flex:0 0 auto;color:var(--t700);margin-top:1px;display:inline-flex}
.v2-pz-hint b{font-weight:700;color:var(--i1)}
/* «ahora la regla la definis vos»: el §22, dicho donde se ve */
.v2-pz.pers .v2-pz-i{background:var(--op-bg);color:var(--op-t)}
.v2-pz-tuyo{font-size:var(--f1);font-weight:650;color:var(--op-t);
  display:flex;align-items:center;gap:6px}
.v2-pz-tuyo::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--op-t)}
/* los actores con nombre del tipo declarado */
.v2-pz-act{display:flex;align-items:center;flex-wrap:wrap;gap:7px;
  padding:9px 11px;border-radius:var(--r8);background:var(--n25);border:1px solid var(--n50)}
.v2-pz-act.vacio{justify-content:space-between}
.v2-pz-act-l{font-size:var(--f1);font-weight:650;color:var(--i3)}
.v2-pz-act b{font-weight:700;color:var(--i1)}
.v2-pz-act>span:not(.v2-pz-act-b):not(.v2-pz-act-n):not(.v2-pz-act-l){
  font-size:var(--f1);font-weight:450;color:var(--i2)}
.v2-pz-act-b{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 4px;
  border-radius:999px;background:var(--n0);border:1px solid var(--n100);
  font-size:var(--f1);font-weight:600;color:var(--i1)}
.v2-pz-act-b .av{width:19px;height:19px;border-radius:50%;background:var(--t100);color:var(--t800);
  display:flex;align-items:center;justify-content:center;font-size:var(--f0);font-weight:700}
.v2-pz-act-mas{font-size:var(--f1);font-weight:500;color:var(--i3)}
.v2-pz-act-n{flex-basis:100%;font-size:var(--f1);font-weight:450;line-height:1.5;color:var(--i3)}
.v2-pz-act-add{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;
  border-radius:var(--r8);background:var(--n0);border:1px dashed var(--bd);cursor:pointer;
  font:inherit;font-size:var(--f1);font-weight:650;color:var(--t700)}
@media (hover:hover){ .v2-pz-act-add:hover{border-color:var(--t500);background:var(--t50)} }

/* ── la cadena: condicion → accion → destinatario ──────────────────────── */
.v2-flj{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;
  padding:11px 13px;border-radius:var(--r10);background:var(--t50);border:1px solid var(--t100)}
.v2-flj-p{font-size:var(--f1);font-weight:650;color:var(--t800);min-width:0}
.v2-flj-p.falta{color:var(--op-t);border-bottom:1px dashed var(--op-bd)}
.v2-flj-f{display:flex;color:var(--t500);flex-shrink:0}

/* ── la columna de la derecha: como va quedando la regla ───────────────── */
/* `.v2-rg-split` y `.v2-rg-main` se fueron con la pantalla de dos columnas del
   paso 2 viejo; el ancho de la columna de la regla ahora lo pone `.v2-wz5`. */

/* ── la pantalla de inicio de Reglas ───────────────────────────────────── */
/* MISMO SELECTOR DE DOS CLASES QUE `.v2-pan .v2-in{max-width:none}`, o pierde:
   una clase sola no le gana a un descendiente, y la pantalla se estiraba a
   1500 y pico dejando cuatro columnas de tarjetas de 340. */
.v2-pan .v2-rg{max-width:1180px;margin:0 auto;padding:0 26px 40px}
/* ══ EL TITULO DE REGLAS, CON EL MISMO EMBLEMA QUE ALERTAS ══
   Se entra de una pantalla a la otra todo el tiempo y una abria con emblema
   y la otra con el rotulo pelado: son la misma app y tienen que presentarse
   igual. Mismo circulo teñido de 46 con icono de 22 que `.v2-band-em`, y el
   icono es el que Reglas ya tiene en el menu —el del titulo y el del menu no
   pueden ser dos dibujos distintos para la misma seccion—. */
.v2-rg-h.con-em{display:flex;align-items:flex-start;gap:15px}
.v2-rg-ht{min-width:0}
.v2-rg-em{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;margin-top:2px;
  background:var(--t50);color:var(--t700);box-shadow:0 0 0 6px rgba(19,193,172,.07)}
@media (max-width:760px){ .v2-rg-em{display:none} }
.v2-rg-h h2{font-size:var(--f5);font-weight:700;letter-spacing:-.6px;line-height:1.2;
  margin:0 0 6px;color:var(--i1)}
.v2-rg-h p{margin:0;font-size:var(--f2);font-weight:450;line-height:1.6;color:var(--i2);max-width:74ch}
.v2-rg-card{background:var(--n0);border:1px solid var(--n100);border-radius:var(--r14);
  padding:15px 16px 8px}
.v2-rg-card.on{border-color:var(--t200)}
.v2-rg-card-h{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
  padding-bottom:11px;border-bottom:1px solid var(--n50)}
.v2-rg-card-h .ic{width:32px;height:32px;border-radius:var(--r8);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--n50);color:var(--i3)}
.v2-rg-card.on .v2-rg-card-h .ic{background:var(--t100);color:var(--t700)}
.v2-rg-card-h .tt{flex:1;min-width:0}
.v2-rg-card-h .tt b{display:block;font-size:var(--f3);font-weight:700;letter-spacing:-.3px;
  color:var(--i1);line-height:1.25}
.v2-rg-card-h .tt i{display:block;font-style:normal;font-size:var(--f1);font-weight:450;
  color:var(--i3);line-height:1.5;margin-top:3px}
.v2-rg-tag{flex-shrink:0;font-size:var(--f1);font-weight:700;padding:2px 9px;border-radius:var(--r6);
  background:var(--n50);border:1px solid var(--n100);color:var(--i3);white-space:nowrap}
.v2-rg-tag.on{background:var(--t50);border-color:var(--t200);color:var(--t700)}
.v2-rg-ms{display:flex;flex-direction:column}
.v2-rg-m{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 9px;width:100%;
  text-align:left;cursor:pointer;background:none;border:none;font:inherit;color:var(--i1);
  padding:11px 4px;border-bottom:1px solid var(--n50);border-radius:var(--r8)}
.v2-rg-m:last-child{border-bottom:none}
.v2-rg-m-t{grid-column:1;grid-row:1}
.v2-rg-m-d{grid-column:1;grid-row:2}
.v2-rg-m>svg{grid-column:2;grid-row:1/3;align-self:center;color:var(--n400);flex-shrink:0}
@media (hover:hover){ .v2-rg-m:hover{background:var(--n25)} }
.v2-rg-m-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.v2-rg-m-t b{font-size:var(--f2);font-weight:650;color:var(--i1)}
.v2-rg-m-d{font-size:var(--f1);font-weight:450;line-height:1.5;color:var(--i3);
  overflow-wrap:anywhere}
.v2-rg-m.off .v2-rg-m-t b{color:var(--i3);font-weight:500}
.v2-rg-est{font-style:normal;font-size:var(--f1);font-weight:700;padding:1px 7px;
  border-radius:var(--r6);white-space:nowrap}
.v2-rg-est.ok{background:var(--t50);color:var(--t700)}
.v2-rg-est.ret{background:var(--op-bg);color:var(--op-t)}
.v2-rg-est.off{background:var(--n50);color:var(--n400)}
/* ── el ancho: «Te proponemos» es la unica que lleva dos columnas ──────── */
.v2-wz-in.ancho{max-width:1340px}
@media (max-width:1180px){
  /* debajo de esto la columna de 302px deja al contenido en 700 y pico, que es
     donde los cinco pasos empiezan a envolver: el resumen se va abajo, entero,
     y deja de ser sticky porque un sticky de ancho completo persigue al que
     scrollea. */
  .v2-rg-split{grid-template-columns:minmax(0,1fr);gap:20px}
  .v2-pz{grid-template-columns:34px minmax(0,1fr);gap:11px}
  .v2-pz-c{grid-column:2}
}

.v2-bloq{display:none}
@media (max-width:860px){
  /* la columna de navegación entra acá también: es nueva y el corte no la
     conocía, así que abajo de 860 quedaba una franja oscura al lado del
     cartel que dice que esto se usa en una computadora. */
  /* `.v2-izq` y no `.v2-side`/`.v2-riel`: los dos dejaron de ser hijos de
     `#v2-app` y pasaron a ser pisos de la columna izquierda, y un `>` que ya no
     empareja no da error, sólo deja de esconder lo que tenía que esconder. */
  #v2-app>.v2-izq,#v2-app>.v2-main{display:none}
  .v2-bloq{display:flex;align-items:center;justify-content:center;
    position:absolute;inset:0;z-index:9000;background:var(--n25);padding:24px}
}

/* EL TELEFONO DE UN PARTNER ES LA UNICA ACCION DE SU TARJETA, asi que se ve
   como accion y no como un link del navegador: sin esto Chrome lo pinta con su
   azul -y morado despues de marcarlo-, el unico color de la tarjeta que no sale
   del sistema. Media bien y se veia roto, que es de las pocas cosas que ninguna
   sonda dice. */
:where(#v2-app) .v2-pn-tel{color:var(--t700);font-weight:650;text-decoration:none}
@media (hover:hover){:where(#v2-app) .v2-pn-tel:hover{color:var(--t800);text-decoration:underline}}
/* «persona · telefono» necesita mas base que un correo, o elide antes de tiempo */
:where(#v2-app) .v2-pn-c-ml.cto{flex:2 1 210px}
:where(#v2-app) .v2-pn-c-ml.cto b{color:var(--i2);font-weight:650}

/* ══════════════════════════════════════════════════════════════════════════
   EL RECLAMO COMO PANTALLA · `.v2-rp*`
   ══════════════════════════════════════════════════════════════════════════
   Era un acordeón en el panel de 448px y por eso «se desarmaba»: una palabra
   por renglón y los botones pintados encima del texto. Todos los arreglos
   anteriores fueron `@media` sobre el VIEWPORT mientras el que medía 448 era
   el PANEL, así que a 1512 no disparaban nunca. Ahora la pantalla es propia y
   ancha, y las dos columnas colapsan por `container`, no por viewport.
   Referencia: `docs/inspiracion/Inspiracion reclamo.png`. */
.v2-rp{height:100%;overflow:auto;background:var(--n25);container-type:inline-size}
.v2-rp-top{position:sticky;top:0;z-index:6;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:12px 24px;background:var(--n25);
  border-bottom:1px solid var(--n100)}
.v2-rp-g{display:grid;grid-template-columns:minmax(0,1fr) 364px;gap:18px;
  padding:20px 24px 40px;align-items:start;max-width:1420px;margin:0 auto}
@container (max-width:1060px){ .v2-rp-g{grid-template-columns:minmax(0,1fr)} }
.v2-rp-main{display:flex;flex-direction:column;gap:18px;min-width:0}

/* ── el cabezal: de qué problema estamos hablando ── */
.v2-rp-prob{background:var(--n0);border:1px solid var(--n100);border-radius:var(--r20);
  overflow:hidden}
.v2-rp-prob-t{display:grid;grid-template-columns:132px minmax(0,1fr) auto auto;gap:20px;
  align-items:center;padding:18px 20px}
@container (max-width:820px){ .v2-rp-prob-t{grid-template-columns:96px minmax(0,1fr);
  gap:14px} .v2-rp-mag,.v2-rp-imp{grid-column:1/-1} }
.v2-rp-ph{position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--r14);
  overflow:hidden;background:var(--n50);border:1px solid var(--n100);max-width:100%}
.v2-rp-ph img{width:100%;height:100%;object-fit:cover;display:block}
.v2-rp-ph-em{position:absolute;left:7px;top:7px;width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.94);
  color:var(--i1);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.v2-rp-ph:not(.con) .v2-rp-ph-em{left:50%;top:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;background:var(--n0);border:1px solid var(--n100);box-shadow:none}
.v2-rp-prob-x{min-width:0}
.v2-rp-kick{display:inline-flex;align-items:center;gap:6px;font-size:var(--f1);font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--mal);background:var(--mal-bg);
  border:1px solid var(--mal-bd);border-radius:999px;padding:3px 10px;margin-bottom:9px}
.v2-rp-prob-x h2{margin:0;font-size:var(--f5);font-weight:700;letter-spacing:-.8px;
  line-height:1.18;color:var(--i1)}
.v2-rp-h-d{color:var(--mal)}
.v2-rp-prob-x p{margin:6px 0 0;font-size:var(--f2);font-weight:450;color:var(--i3);
  line-height:1.5;max-width:62ch}
.v2-rp-mag{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--n25);
  border:1px solid var(--n100);border-radius:var(--r14)}
.v2-rp-mag b{display:block;font-size:var(--f5);font-weight:700;letter-spacing:-.9px;
  line-height:1;color:var(--i1);font-variant-numeric:tabular-nums}
.v2-rp-mag span{display:block;font-size:var(--f1);font-weight:500;color:var(--i3);
  margin-top:4px;line-height:1.35}
.v2-rp-imp{display:flex;flex-direction:column;align-items:flex-start;padding:12px 16px;
  background:var(--n25);border:1px solid var(--n100);border-radius:var(--r14);min-width:160px}
.v2-rp-imp-l{font-size:var(--f1);font-weight:600;color:var(--i3);margin-bottom:5px}
.v2-rp-imp-r{font-size:var(--f2);font-weight:700;color:var(--i1);line-height:1.3}
.v2-rp-cels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--n100);background:var(--n25)}
@container (max-width:820px){ .v2-rp-cels{grid-template-columns:repeat(2,minmax(0,1fr))} }
.v2-rp-cel{display:flex;align-items:flex-start;gap:10px;padding:13px 18px;min-width:0;
  border-left:1px solid var(--n100)}
.v2-rp-cel:first-child{border-left:0}
.v2-rp-cel-i{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;background:var(--n0);border:1px solid var(--n100);color:var(--i2);
  flex:0 0 auto;margin-top:2px}
.v2-rp-cel-x{min-width:0;display:flex;flex-direction:column}
.v2-rp-cel-x span{font-size:var(--f1);font-weight:500;color:var(--i3)}
/* ENVUELVE, NO SE CORTA. Cuatro celdas en 800px dan 200 cada una, y ahí
   «CIUDAD DE BUENOS AIRES» y «Znapp propone: Distribuidor» quedaban cortados
   con puntos suspensivos — los dos datos que hacen falta para saber a quién se
   le está por mandar el reclamo. Dos renglones entran y se leen. */
.v2-rp-cel-x b{font-size:var(--f2);font-weight:650;color:var(--i1);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}


/* ── el formulario, en cuatro bloques numerados ── */
.v2-rp-form{background:var(--n0);border:1px solid var(--n100);border-radius:var(--r20);
  padding:22px}
.v2-rp-fhd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:15px;
  align-items:center;padding-bottom:20px;border-bottom:1px solid var(--n100);margin-bottom:20px}
@container (max-width:760px){ .v2-rp-fhd{grid-template-columns:auto minmax(0,1fr)}
  .v2-rp-hitos{grid-column:1/-1} }
.v2-rp-fhd-i{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;background:var(--t600);color:#fff;flex:0 0 auto}
.v2-rp-fhd-x h3{margin:0;font-size:var(--f4);font-weight:700;letter-spacing:-.5px;color:var(--i1)}
.v2-rp-fhd-x p{margin:4px 0 0;font-size:var(--f2);font-weight:450;color:var(--i3);
  line-height:1.5;max-width:70ch}
.v2-rp-hitos{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px}
.v2-rp-hitos li{display:flex;align-items:center;gap:7px;font-size:var(--f1);font-weight:600;
  color:var(--n400);white-space:nowrap}
.v2-rp-hitos li+li::before{content:"";width:20px;height:1px;background:var(--n200);
  margin-right:1px}
.v2-rp-hitos li span{width:22px;height:22px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:var(--f1);font-weight:700;
  background:var(--n50);color:var(--n400);border:1px solid var(--n200)}
.v2-rp-hitos li.act{color:var(--i1)}
.v2-rp-hitos li.act span{background:var(--i1);color:#fff;border-color:var(--i1)}
.v2-rp-hitos li.ok{color:var(--t800)}
.v2-rp-hitos li.ok span{background:var(--t600);color:#fff;border-color:var(--t600)}

.v2-rp-b{border:1px solid var(--n100);border-radius:var(--r14);margin-bottom:14px;
  overflow:hidden;background:var(--n0)}
.v2-rp-b-h{display:flex;align-items:flex-start;gap:11px;padding:14px 16px 12px}
.v2-rp-b-n{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:var(--f1);font-weight:700;
  background:var(--n50);color:var(--i2);border:1px solid var(--n200)}
.v2-rp-b.ok .v2-rp-b-n{background:var(--t600);color:#fff;border-color:var(--t600)}
.v2-rp-b-h b{display:block;font-size:var(--f2);font-weight:700;color:var(--i1);
  letter-spacing:-.2px}
.v2-rp-b-h span{display:block;font-size:var(--f1);font-weight:450;color:var(--i3);
  margin-top:3px;line-height:1.45}
.v2-rp-sel{font-style:normal;font-weight:700;color:var(--t700);margin-left:8px}
.v2-rp-b-c{padding:0 16px 16px}

/* los cuatro canales */
.v2-rc-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@container (max-width:900px){ .v2-rc-g{grid-template-columns:repeat(2,minmax(0,1fr))} }
:where(#v2-app) .v2-rc{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:3px;padding:13px 14px 34px;text-align:left;cursor:pointer;background:var(--n0);
  border:1px solid var(--n200);border-radius:var(--r14);
  transition:border-color var(--tr-16) var(--v2-ez),box-shadow var(--tr-16) var(--v2-ez),
    background var(--tr-16) var(--v2-ez)}
@media (hover:hover){ :where(#v2-app) .v2-rc:hover{border-color:var(--i3)} }
:where(#v2-app) .v2-rc.on{border-color:var(--t600);background:var(--t50);box-shadow:var(--ring)}
.v2-rc-i{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;background:var(--n25);border:1px solid var(--n100);margin-bottom:7px}
.v2-rc.on .v2-rc-i{background:var(--n0);border-color:var(--t200)}
.v2-rc-t{font-size:var(--f2);font-weight:700;color:var(--i1)}
.v2-rc-d{font-size:var(--f1);font-weight:450;color:var(--i3);line-height:1.4}
.v2-rc-r{position:absolute;right:11px;top:11px;width:19px;height:19px;border-radius:50%;
  border:1.5px solid var(--n300);display:flex;align-items:center;justify-content:center;
  color:#fff}
.v2-rc.on .v2-rc-r{background:var(--t600);border-color:var(--t600)}
/* LO QUE NO ESTÁ CONECTADO SE DICE EN LA TARJETA, no en un toast después de
   apretar. Tres de los cuatro canales arman el texto para pegar; decirlo antes
   es lo único que evita que alguien crea que Znapp postea en su Slack. */
.v2-rc-b{position:absolute;right:11px;bottom:11px;font-size:var(--f0);font-weight:650;
  color:var(--i3);background:var(--n50);border:1px solid var(--n200);border-radius:999px;
  padding:2px 8px}

/* destinatarios */
.v2-rp-dests{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:12px}
.v2-rp-dest{display:inline-flex;align-items:center;gap:9px;padding:6px 8px 6px 7px;
  background:var(--n0);border:1px solid var(--n200);border-radius:var(--r10);max-width:100%}
.v2-rp-dest.sin{border-color:var(--op-bd);background:var(--op-bg)}
.v2-rp-dest-x{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.v2-rp-dest-x b{font-size:var(--f2);font-weight:650;color:var(--i1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-rp-dest-x span{font-size:var(--f1);font-weight:450;color:var(--i3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(#v2-app) .v2-rp-dest-x2{width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;background:none;border:0;
  cursor:pointer;color:var(--n400);transition:color var(--tr-14) ease,background var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-rp-dest-x2:hover{background:var(--mal-bg);color:var(--mal)} }
.v2-rp-buscar{display:flex;gap:9px;align-items:center}
.v2-rp-buscar .v2-band-q{flex:1}
.v2-rp-sug{display:flex;flex-direction:column;gap:2px;margin-top:9px}
:where(#v2-app) .v2-rec-sugi{display:flex;align-items:center;gap:10px;padding:8px 10px;
  text-align:left;background:none;border:0;border-radius:var(--r10);cursor:pointer;width:100%;
  transition:background var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-rec-sugi:hover{background:var(--n25)} }
.v2-rec-sugx{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.3}
.v2-rec-sugx b{font-size:var(--f2);font-weight:650;color:var(--i1)}
.v2-rec-sugx span{font-size:var(--f1);font-weight:450;color:var(--i3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-rec-sugm{color:var(--t600);flex:0 0 auto}
.v2-rec-sug-v{font-size:var(--f1);font-weight:450;color:var(--i3);line-height:1.55;
  padding:10px 12px;background:var(--n25);border-radius:var(--r10)}
.v2-rp-vacio{display:flex;align-items:center;gap:9px;font-size:var(--f2);font-weight:500;
  color:var(--op-t);background:var(--op-bg);border:1px solid var(--op-bd);
  border-radius:var(--r10);padding:11px 13px;margin-bottom:12px}

/* evidencias */
.v2-rp-evi{display:flex;align-items:center;gap:12px;padding:13px 14px;background:var(--n25);
  border:1px solid var(--n100);border-radius:var(--r12)}
.v2-rp-evi-i{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;background:var(--n0);border:1px solid var(--n100);color:var(--t700);
  flex:0 0 auto}
.v2-rp-evi-x{flex:1;min-width:0}
.v2-rp-evi-x b{display:block;font-size:var(--f2);font-weight:650;color:var(--i1)}
.v2-rp-evi-x span{display:block;font-size:var(--f1);font-weight:450;color:var(--i3);margin-top:2px}
.v2-rp-cuantas{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.v2-rp-cuantas>span{font-size:var(--f1);font-weight:600;color:var(--i2)}
.v2-rp-cuantas select{max-width:190px}

/* mensaje */
.v2-rp-f{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;position:relative}
.v2-rp-f>span{font-size:var(--f1);font-weight:650;color:var(--i2)}
.v2-rp-cnt{position:absolute;right:11px;bottom:9px;font-style:normal;font-size:var(--f1);
  font-weight:600;color:var(--n400);font-variant-numeric:tabular-nums;pointer-events:none}
.v2-rp-pista{display:flex;align-items:flex-start;gap:7px;margin:0 0 10px;font-size:var(--f1);
  font-weight:450;color:var(--i3);line-height:1.5}
.v2-rp-pista svg{flex:0 0 auto;margin-top:1px}
.v2-rp-hechos summary{font-size:var(--f1);font-weight:650;color:var(--i2);cursor:pointer;
  padding:7px 0}
.v2-rp-hechos pre{margin:4px 0 0;padding:12px 14px;background:var(--n25);border-radius:var(--r10);
  font-size:var(--f1);line-height:1.6;color:var(--i2);white-space:pre-wrap;word-break:break-word;
  max-height:300px;overflow:auto;border:1px solid var(--n100)}

.v2-rp-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:18px;border-top:1px solid var(--n100);flex-wrap:wrap}
.v2-rp-pie-r{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-left:auto}
:where(#v2-app) .v2-ib.big{height:44px;padding:0 22px;font-size:var(--f2)}

/* ── la columna derecha: el problema, siempre a la vista ── */
.v2-rp-side{position:sticky;top:64px;background:var(--n0);border:1px solid var(--n100);
  border-radius:var(--r20);overflow:hidden;max-height:calc(100vh - 120px);
  display:flex;flex-direction:column}
@container (max-width:1060px){ .v2-rp-side{position:static;max-height:none} }
.v2-rp-side-h{display:flex;align-items:center;gap:8px;padding:13px 16px;
  border-bottom:1px solid var(--n100);font-size:var(--f2);font-weight:700;color:var(--i1);
  background:var(--n25)}
.v2-rp-side-b{padding:15px 16px 18px;display:flex;flex-direction:column;gap:14px;
  overflow:auto}
.v2-rp-side-t{display:grid;grid-template-columns:74px minmax(0,1fr);gap:12px;align-items:start}
.v2-rp-side-t h4{margin:7px 0 0;font-size:var(--f2);font-weight:700;color:var(--i1);
  line-height:1.3}
.v2-rp-side-t p{margin:4px 0 0;font-size:var(--f1);font-weight:450;color:var(--i3);line-height:1.5}
.v2-rp-side-n{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  padding:12px 0;border-top:1px solid var(--n100);border-bottom:1px solid var(--n100)}
.v2-rp-side-n>div{min-width:0}
.v2-rp-side-n b{display:block;font-size:var(--f4);font-weight:700;letter-spacing:-.5px;
  line-height:1;color:var(--i1);font-variant-numeric:tabular-nums}
.v2-rp-side-n span{display:block;font-size:var(--f1);font-weight:500;color:var(--i3);
  margin-top:4px;line-height:1.3}
.v2-rp-side-n .aro{display:flex;align-items:center;gap:7px}
.v2-rp-side-c{display:flex;flex-direction:column;gap:6px}
.v2-rp-side-ct{display:flex;align-items:center;gap:7px;font-size:var(--f1);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--i3)}
.v2-rp-side-ct button{margin-left:auto;text-transform:none;letter-spacing:0}
.v2-rp-side-c>b{font-size:var(--f2);font-weight:700;color:var(--i1)}
.v2-rp-side-c>p{margin:0;font-size:var(--f1);font-weight:450;color:var(--i3);line-height:1.55}
.v2-rp-side-c.seg{background:var(--t50);border:1px solid var(--t100);border-radius:var(--r12);
  padding:12px 13px}
.v2-rp-toca{display:flex;align-items:center;gap:9px}
.v2-rp-toca>span:last-child{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.v2-rp-toca b{font-size:var(--f2);font-weight:650;color:var(--i1)}
.v2-rp-toca span span{font-size:var(--f1);font-weight:450;color:var(--i3)}

/* ══ EL DOCUMENTO DEL CASO: la acción recomendada y lo que se abre ══ */
/* `.v2-opens` y `.v2-open*` pintaban los dos renglones plegados del pie del
   cajon -«Comercios afectados» y «Evidencias»-. El primero es hoy el boton
   «Ver comercios» y el segundo la tarjeta «Evidencia». */

/* ══════════════════════════════════════════════════════════════════════════
   REGLAS · el setup de cinco pasos y su pantalla de inicio
   ══════════════════════════════════════════════════════════════════════════
   Referencias: `Reglas 1..2` y `reglas 3 paso 1..4`. Lo que había eran cuatro
   píldoras de texto plano en la barra de arriba y una lista larguísima de doce
   tarjetas apiladas — el cliente lo describió como «un quilombo, no se entiende
   nada, no tiene uso», y tenía razón: la pantalla no decía dónde estabas, ni
   cuánto faltaba, ni qué pertenecía a qué dimensión. */

/* ── EL STEPPER ──────────────────────────────────────────────────────────
   Tres estados y ninguno se parece al otro:
     PENDIENTE  circulo blanco con borde gris y su numero adentro.
     RESUELTO   circulo teal lleno con un tilde.
     EN CURSO   circulo teal lleno con su NUMERO y un aro alrededor.
   El aro es lo que dice «estas aca», y hace falta justamente porque un paso
   en curso suele estar ademas resuelto: sin el, «en curso» y «hecho» eran los
   dos un circulo teal lleno y la barra no decia donde estabas parado.
   EL RIEL ES CONTINUO. Eran segmentos de 1px pegados al borde del boton —que
   tiene 9px de padding— asi que quedaban cortos, despegados del circulo y a
   distinta altura segun el largo del rotulo. Ahora salen del centro de un
   circulo al del siguiente, miden 2px y se tinen de teal hasta el ultimo
   resuelto: el avance se lee sin contar tildes. */
/* el mismo respiro lateral que `.v2-wz-main` (40px), para que la barra y el
   cuerpo compartan margen y la pantalla se lea como una sola pieza */
.v2-st-w{background:var(--n0);border-bottom:1px solid var(--n100);padding:0 var(--wz-gut);flex-shrink:0}
/* ═════════ LOS CINCO PASOS, PAREJOS ═════════
   MEDIDO: los circulos caian a 336, 220, 270 y 250px de distancia, y los
   tramos median 91, 72, 101 y 118. No era casualidad: cada paso era un item
   de `flex:1 1 0` con el circulo y la ETIQUETA al lado, y la linea vivia
   adentro del item ocupando lo que sobraba. Como «Quien resuelve» es el doble
   de largo que «Revisar», a cada linea le quedaba un resto distinto. Con la
   etiqueta al costado no hay arreglo posible salvo darle a todas el mismo
   ancho fijo, que rompe con la traduccion o con el zoom del navegador.

   La etiqueta baja DEBAJO del circulo y cada paso ocupa una columna igual.
   Ahi la geometria se resuelve sola: los circulos caen en el centro de su
   columna —parejos por construccion— y cada tramo se dibuja del centro de un
   circulo al centro del siguiente, asi que los cuatro miden exactamente lo
   mismo sin importar cuanto diga cada etiqueta. */
/* LAS COLUMNAS SON LAS QUE HAYA, NO CINCO. Estaba escrito `repeat(5,...)` de
   cuando el asistente tenia cinco pasos; hoy tiene tres, asi que los tres
   ocupaban las primeras tres de cinco y la barra entera quedaba corrida a la
   izquierda. Medido a 1600px: el centro de los pasos caia en x=564 y el del
   contenido de abajo en x=805. Con `grid-auto-flow:column` las columnas salen
   de la cantidad real de pasos, asi que queda centrada con tres, con cuatro o
   con los que vengan. */
.v2-st{list-style:none;margin:0 auto;padding:13px 0 11px;display:grid;
  grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:start;
  gap:0;max-width:var(--wz-riel)}
.v2-st::-webkit-scrollbar{display:none}
.v2-st-i{position:relative;min-width:0}
/* EL TRAMO VA DE CENTRO A CENTRO. `left:50%` es el centro de este circulo y
   `right:-50%` el del siguiente; los 22px de cada lado son el radio del
   circulo mas un respiro, asi que la linea nace y muere pegada al borde sin
   tocarlo. Todos los tramos salen identicos porque todas las columnas lo son. */
.v2-st-i:not(:last-child)::before{content:"";position:absolute;z-index:0;
  top:21px;left:calc(50% + 22px);right:calc(-50% + 22px);
  height:2px;border-radius:2px;background:var(--n200)}
/* el tramo que sigue a un paso resuelto ya se recorrio */
.v2-st-i.ok::before{background:var(--t300)}
:where(#v2-app) .v2-st-i button{position:relative;z-index:1;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:7px;padding:7px 6px 5px;
  background:none;border:0;cursor:pointer;border-radius:var(--r14);min-width:0;
  transition:background var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-st-i button:hover{background:var(--n50)} }
:where(#v2-app) .v2-st-i button:focus-visible{outline:0;box-shadow:var(--ring)}
.v2-st-n{width:28px;height:28px;border-radius:50%;flex:0 0 auto;display:flex;position:relative;z-index:1;
  align-items:center;justify-content:center;font-size:var(--f2);font-weight:700;
  background:var(--n0);color:var(--n400);border:1px solid var(--n200);
  font-variant-numeric:tabular-nums;
  transition:background var(--tr-14) ease,color var(--tr-14) ease,
    border-color var(--tr-14) ease,box-shadow var(--tr-16) var(--v2-ez)}
.v2-st-t{font-size:var(--f2);font-weight:600;color:var(--i3);line-height:1.25;
  text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-st-i.ok .v2-st-n{background:var(--t600);color:#fff;border-color:var(--t600)}
.v2-st-i.ok .v2-st-t{color:var(--t800)}
.v2-st-i.on .v2-st-n{background:var(--t700);color:#fff;border-color:var(--t700);
  box-shadow:0 0 0 4px var(--t100)}
.v2-st-i.on .v2-st-t{color:var(--i1);font-weight:750}
@media (prefers-reduced-motion:reduce){ .v2-st-n{transition:none} }
/* en angosto la etiqueta se va y quedan los cinco circulos con su linea: es
   la misma geometria, sin texto. */
@media (max-width:820px){ .v2-st-t{display:none} }

/* ══════════ EL SETUP SE EXPLICA SOLO ══════════
   El pedido traía cuatro preguntas —¿esto se puede tocar? ¿qué hace? ¿a dónde me
   lleva? ¿qué acaba de pasar?— y el movimiento sólo contesta la última. Las dos
   del medio se contestaron con palabras (ver `_v2Wz5Pie`). Acá van las otras
   dos: la forma, que dice qué se toca, y la respuesta, que dice qué pasó.

   ── 1 · EL FOCO, UNA VEZ PARA TODO EL SETUP ──
   MEDIDO: de las ocho clases de control que viven en el wizard, UNA sola tenía
   regla de `:focus-visible`. El que navega con teclado no ve dónde está parado
   en un formulario de cinco pasos —y el foco es, junto con `:hover`, una de las
   tres cosas que ninguna herramienta de `dev/` puede medir, así que se escribe
   por sistema y no se descubre probando—. Una regla cubre todo lo enfocable de
   adentro, y cualquier control que se agregue mañana la hereda sin acordarse. */
:where(#v2-wz) button:focus-visible,
:where(#v2-wz) select:focus-visible,
:where(#v2-wz) input:focus-visible,
:where(#v2-wz) [tabindex]:focus-visible{
  outline:2px solid var(--t600);outline-offset:2px}

/* ── 2 · LA BARRA DE PASOS SE VE COMO LO QUE ES: NAVEGACIÓN ──
   MEDIDO: los cinco pasos son `<button>` sin borde ni fondo. Son la navegación
   principal del setup —se puede saltar a cualquiera— y en reposo no había una
   sola señal de que se pudieran tocar; el `:hover` era un gris que casi no se
   distingue del papel. Ahora el hover tiñe y levanta el círculo: el mismo gesto
   que hace la pieza al activarse, insinuado. */
@media (hover:hover){
  :where(#v2-app) .v2-st-i button:hover{background:var(--t50)}
  :where(#v2-app) .v2-st-i button:hover .v2-st-n{border-color:var(--t300);
    transform:translateY(-1px)}
  :where(#v2-app) .v2-st-i button:hover .v2-st-t{color:var(--i1)}
}
.v2-st-n{transform:translateY(0)}

/* ── 3 · EL PASO ENTRA, NO APARECE ──
   Cambiar de paso reescribe el cuerpo entero de un cuadro al otro: el ojo no
   tiene cómo saber si cambió la pantalla o se recargó la página. Con una entrada
   de 300ms el cambio se lee como un paso de una secuencia, que es lo que es.
   `backwards` y no `forwards`: el estado normal de un paso es verse, y si la
   animación no corre —extensión, navegador viejo— se ve igual. */
.v2-wz5,.v2-wz5-main.ancho{animation:wzPaso var(--mo-4) var(--ez-out) backwards}
@keyframes wzPaso{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* y los bloques de adentro entran corridos, en el orden en que se leen */
.v2-wz5>*{animation:wzPaso var(--mo-4) var(--ez-out) backwards}
.v2-wz5>*:nth-child(2){animation-delay:50ms}
.v2-wz5>*:nth-child(3){animation-delay:100ms}

/* ── 4 · EL TILDE DE UNA DIMENSIÓN CONFIRMA EL CLIC ──
   Prender una dimensión en el paso 1 escribe hasta tres controles y repinta la
   tarjeta; el tilde aparecía ya puesto. Que ENTRE es la señal de «fui yo»: sin
   eso, con seis tarjetas parecidas, no queda claro cuál se movió. El rebote es
   el único de toda la pantalla y por eso se nota. */
/* EL TILDE LO PONE EL <svg>, NO EL <span>. Con el DOM parcheado el circulo
   sobrevive al clic —por eso ahora puede TRANSICIONAR de vacio a teñido, que
   antes era imposible— y el que nace es el tilde de adentro. El keyframe va
   ahi: es el unico nodo que efectivamente aparece. */
.v2-dim.on .v2-dim-ck svg{animation:wzTilde var(--mo-3) var(--ez-pop) backwards}
@keyframes wzTilde{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.v2-dim-ck{transition:background var(--mo-2) var(--ez-out),
  border-color var(--mo-2) var(--ez-out),transform var(--mo-2) var(--ez-pop)}
.v2-dim.on .v2-dim-ck{transform:scale(1.08)}
/* el icono y el pie de la tarjeta acompanan, para que lo que se pinta sea LA
   TARJETA y no un tilde suelto en una esquina. */
.v2-dim-i{transition:background var(--mo-2) var(--ez-out),color var(--mo-2) var(--ez-out),
  border-color var(--mo-2) var(--ez-out)}

/* ── 5 · EL PARÁMETRO QUE SE ABRE VIENE DE SU FILA ──
   La tarjeta desplegada aparecía entera en el lugar donde había un renglón de
   40px, y el contenido de abajo saltaba. Entrando desde arriba —que es donde
   estaba la fila que tocaste— el salto se lee como que ESO se abrió. */
/* MISMO CRITERIO: la tarjeta del parametro sobrevive al clic, asi que el
   keyframe iria sobre algo que no aparece y no correria nunca. Lo que nace al
   desplegar es el cuerpo —los cinco campos— y es lo que tiene que entrar. */
.v2-cfg-b.abierta .v2-pz-w,.v2-cfg-b.abierta .v2-ctl-top{
  animation:wzAbre var(--mo-4) var(--ez-out) backwards}
@keyframes wzAbre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* y la caja acompana el cambio de alto con su borde y su sombra, que si
   pueden transicionar porque el nodo es el mismo. */
:where(#v2-app) .v2-cfg-b .v2-ctl-card{transition:border-color var(--mo-3) var(--ez-out),
  box-shadow var(--mo-3) var(--ez-out),background var(--mo-3) var(--ez-out)}
/* el chevron de la fila plegada gira cuando abre, así que la flecha y el panel
   dicen lo mismo */
.v2-cfg-b .v2-ctl-row-b.tit>svg{transition:transform var(--mo-3) var(--ez-out)}

/* ── 6 · EL DESTINO, EN EL BOTÓN DE AVANCE ──
   `Continuar a <b>Cómo medir</b>`: el verbo en peso normal y el destino en
   negrita. Dos pesos en un botón suenan a mucho, y son justo lo que hace que se
   lea «continuar → ahí» en vez de una frase larga. */
.v2-wz5-pie b{font-weight:800}
:where(#v2-app) .v2-wz5-pie .v2-ib{gap:7px}

/* ── EL ARMAZÓN DE UN PASO ─────────────────────────────────────────────── */
/* ══ EL PASO SE QUEDA CON EL ANCHO QUE OCUPABA EL RESUMEN ══
   Los pasos 2, 3 y 4 tenían una tercera columna de 320px con «Resumen de la
   regla»: un panel de solo lectura que repetia, en texto corrido, lo que el
   usuario acababa de elegir dos columnas mas a la izquierda. En una pantalla
   que ya viene cargada, esos 320px valen mas como lugar para lo que SI se
   toca. El paso 1 nunca tuvo resumen —tiene «¿Como funciona?», que explica y
   no repite— asi que ese se queda como estaba.
   Y el respiro lateral baja de 22 a 13 —un 40%— en los cinco pasos: con el
   contenido metido en tarjetas que ya tienen su propio padding, el margen
   exterior no separaba nada de nada, solo angostaba. */
.v2-wz5{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:20px;
  max-width:1380px;margin:0 auto;padding:22px 13px 44px;align-items:start}
.v2-wz5.tres{grid-template-columns:272px minmax(0,1fr)}
@media (max-width:1240px){ .v2-wz5.tres{grid-template-columns:238px minmax(0,1fr)} }
@media (max-width:940px){ .v2-wz5,.v2-wz5.tres{grid-template-columns:minmax(0,1fr)} }
.v2-wz5-main{min-width:0;display:flex;flex-direction:column;gap:18px}
.v2-wz5-hd{display:flex;align-items:flex-start;gap:15px;background:var(--n0);
  border:1px solid var(--n100);border-radius:var(--r20);padding:20px 22px}
.v2-wz5-hd-i{width:48px;height:48px;border-radius:15px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;background:var(--t50);color:var(--t700);
  border:1px solid var(--t100)}
.v2-wz5-hd-p{font-size:var(--f1);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--i3)}
.v2-wz5-hd h2{margin:5px 0 0;font-size:var(--f5);font-weight:700;letter-spacing:-1px;
  line-height:1.14;color:var(--i1)}
.v2-wz5-hd p{margin:7px 0 0;font-size:var(--f2);font-weight:450;color:var(--i3);
  line-height:1.55;max-width:74ch}
.v2-wz5-hd p:empty{display:none}
.v2-wz5-nota{display:flex;align-items:flex-start;gap:9px;padding:13px 15px;
  background:var(--t50);border:1px solid var(--t100);border-radius:var(--r14);
  font-size:var(--f2);font-weight:450;color:var(--i2);line-height:1.55}
.v2-wz5-nota svg{flex:0 0 auto;margin-top:2px;color:var(--t700)}
/* ══ EL PIE VA ANCLADO ABAJO ══
   «Continuar» vivia al final del cuerpo del paso, asi que en los pasos largos
   —la lista de SKUs, la grilla de provincias— habia que scrollear hasta el
   fondo para encontrar como seguir. Ahora el nodo se mueve al pie, que es
   HERMANO del contenedor que scrollea: ni tapa el ultimo bloque (como haria
   un `fixed`) ni se va de pantalla, y ocupa el ancho entero en vez del de la
   columna del medio. */
.v2-wz-foot{flex-shrink:0;background:var(--n0);border-top:1px solid var(--n100);
  box-shadow:0 -6px 20px rgba(14,28,30,.06);padding:0 var(--wz-gut)}
.v2-wz-foot:empty{display:none}
.v2-wz5-pie{display:flex;align-items:center;justify-content:space-between;gap:14px;
  max-width:var(--wz-riel);margin:0 auto;padding:13px 0;flex-wrap:wrap}
.v2-wz5-pie-r{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
/* el motivo va PEGADO al boton apagado, no en un cartel arriba: la pregunta
   se hace mirando el boton, y la respuesta tiene que estar ahi. */
.v2-wz5-falta{display:inline-flex;align-items:center;gap:7px;margin-left:auto;
  font-size:var(--f1);font-weight:600;color:var(--op-t);max-width:46ch;line-height:1.35}
.v2-wz5-falta+.v2-wz5-pie-r{margin-left:14px}
.v2-wz5-falta svg{flex:0 0 auto}
/* `default` decia «esto no es un boton»; `not-allowed` dice «es un boton y
   ahora no», que es la verdad. */
:where(#v2-wz) .v2-ib:disabled{cursor:not-allowed}

/* la columna «¿Cómo funciona?» del paso 1 */
.v2-wz5-lado{position:sticky;top:14px}
.v2-wz5-lado-c{background:var(--n0);border:1px solid var(--n100);border-radius:var(--r20);
  padding:20px}
.v2-wz5-lado-i{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;background:var(--t50);color:var(--t700);border:1px solid var(--t100);
  margin-bottom:13px}
.v2-wz5-lado-c h3{margin:0;font-size:var(--f4);font-weight:700;letter-spacing:-.5px;color:var(--i1)}
.v2-wz5-lado-c>p{margin:7px 0 16px;font-size:var(--f2);font-weight:450;color:var(--i3);
  line-height:1.55}
.v2-wz5-como{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.v2-wz5-como li{display:flex;gap:11px;align-items:flex-start}
.v2-wz5-como li>span{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:var(--f1);font-weight:700;
  background:var(--t600);color:#fff}
.v2-wz5-como b{display:block;font-size:var(--f2);font-weight:650;color:var(--i1);line-height:1.3}
.v2-wz5-como i{display:block;font-style:normal;font-size:var(--f1);font-weight:450;
  color:var(--i3);margin-top:3px;line-height:1.45}
.v2-wz5-tip{display:flex;align-items:flex-start;gap:8px;margin-top:16px;padding:11px 12px;
  background:var(--t50);border-radius:var(--r12);font-size:var(--f1);font-weight:450;
  color:var(--i2);line-height:1.5}
.v2-wz5-tip svg{flex:0 0 auto;margin-top:1px;color:var(--t700)}

/* ── PASO 1 · LAS SEIS DIMENSIONES ─────────────────────────────────────── */
.v2-dims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:1180px){ .v2-dims{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .v2-dims{grid-template-columns:minmax(0,1fr)} }
.v2-dim{position:relative;display:flex;flex-direction:column;background:var(--n0);
  border:1px solid var(--n200);border-radius:var(--r20);overflow:hidden;
  transition:border-color var(--tr-16) var(--v2-ez),box-shadow var(--tr-16) var(--v2-ez)}
.v2-dim.on{border-color:var(--t600);box-shadow:0 0 0 3px var(--t50)}
.v2-dim.nd{opacity:.72}
:where(#v2-app) .v2-dim-b{display:block;width:100%;text-align:left;background:none;border:0;
  cursor:pointer;padding:18px 18px 14px;position:relative}
@media (hover:hover){ :where(#v2-app) .v2-dim-b:hover{background:var(--n25)} }
.v2-dim-i{display:flex;width:44px;height:44px;border-radius:14px;align-items:center;
  justify-content:center;background:var(--n50);color:var(--i2);border:1px solid var(--n100);
  margin-bottom:13px}
.v2-dim.on .v2-dim-i{background:var(--t50);color:var(--t700);border-color:var(--t200)}
.v2-dim-ck{position:absolute;right:16px;top:16px;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--n300);display:flex;align-items:center;justify-content:center;
  color:#fff}
.v2-dim.on .v2-dim-ck{background:var(--t600);border-color:var(--t600)}
.v2-dim-t{display:block;font-size:var(--f3);font-weight:700;letter-spacing:-.35px;
  color:var(--i1);line-height:1.25}
.v2-dim-d{display:block;font-size:var(--f2);font-weight:450;color:var(--i3);
  margin-top:5px;line-height:1.5}
.v2-dim-f{display:flex;align-items:center;gap:9px;padding:0 18px 16px;flex-wrap:wrap}
.v2-dim-ok{display:inline-flex;align-items:center;gap:6px;font-size:var(--f1);font-weight:650;
  color:var(--t800);background:var(--t50);border:1px solid var(--t100);border-radius:999px;
  padding:4px 11px}
:where(#v2-app) .v2-dim-sel{font-size:var(--f1);font-weight:650;color:var(--i2);
  background:var(--n0);border:1px solid var(--n200);border-radius:999px;padding:6px 15px;
  cursor:pointer;transition:border-color var(--tr-14) ease,color var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-dim-sel:hover{border-color:var(--t600);
  color:var(--t800);background:var(--t50)} }
:where(#v2-app) .v2-dim-cfg{display:inline-flex;align-items:center;gap:4px;margin-left:auto;
  font-size:var(--f1);font-weight:700;color:var(--t700);background:none;border:0;cursor:pointer;
  padding:4px 2px}
@media (hover:hover){ :where(#v2-app) .v2-dim-cfg:hover{color:var(--t800);text-decoration:underline;
  text-underline-offset:3px} }
.v2-dim-n{display:flex;align-items:center;gap:6px;padding:9px 18px;font-size:var(--f1);
  font-weight:500;color:var(--op-t);background:var(--op-bg);border-top:1px solid var(--op-bd)}
.v2-dim-n.nd{color:var(--i3);background:var(--n25);border-top-color:var(--n100)}

/* ── PASO 2/3/4 · el índice de dimensiones ─────────────────────────────── */
.v2-dimnav{position:sticky;top:14px;min-width:0}
.v2-dimnav-c{background:var(--n0);border:1px solid var(--n100);border-radius:var(--r20);
  padding:16px}
.v2-dimnav-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.v2-dimnav-c h3{margin:0;font-size:var(--f4);font-weight:750;letter-spacing:-.4px;color:var(--i1)}
/* cuantas quedan, al lado del titulo: es el unico numero de la columna que habla
   del CONJUNTO, y contesta «cuanto me falta» antes de leer una sola fila. */
.v2-dimnav-n{flex:0 0 auto;font-size:var(--f1);font-weight:700;color:var(--t700);
  background:var(--t50);border-radius:999px;padding:2px 9px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-dimnav-c>p{margin:6px 0 15px;font-size:var(--f1);font-weight:450;color:var(--i3);
  line-height:1.5}
.v2-dimnav-c ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
:where(#v2-app) .v2-dimnav-b{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:11px 12px;background:none;border:1px solid transparent;border-radius:var(--r12);
  cursor:pointer;min-width:0;
  transition:background var(--tr-14) ease,border-color var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-dimnav-b:hover{background:var(--n25);
  border-color:var(--n200)} }
/* LA ELEGIDA SE VE DESDE EL OTRO LADO DE LA PANTALLA. Con un velo teñido y un
   filete de 2px apenas se distinguia de la de al lado, y esta columna existe
   justo para contestar «¿cual estoy editando?». Filete de 3, borde propio, el
   nombre en tinta de marca y el chevron encendido. */
:where(#v2-app) .v2-dimnav-b.on{background:var(--t50);border-color:var(--t200);
  box-shadow:inset 3px 0 0 var(--t600)}
:where(#v2-app) .v2-dimnav-b.on .tx{color:var(--t800);font-weight:750}
:where(#v2-app) .v2-dimnav-b.on>svg{color:var(--t600)}
.v2-dimnav-b .ic{width:32px;height:32px;border-radius:10px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;background:var(--n50);color:var(--i2);
  transition:background var(--tr-14) ease,color var(--tr-14) ease}
.v2-dimnav-b.on .ic{background:var(--n0);color:var(--t700);box-shadow:0 1px 3px rgba(11,31,42,.10)}
/* ENVUELVEN. Los cinco nombres salían cortados —«Que falte mi prod…», «Que me
   falten SK…»— y ese rail es la única forma de saber en qué dimensión estás
   parado: ninguno se leía entero. En dos renglones entran los cinco. */
.v2-dimnav-b .cu{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
/* un escalon mas de cuerpo que antes: el indice no puede leerse peor que lo que
   indexa. */
.v2-dimnav-b .tx{min-width:0;font-size:var(--f2);font-weight:700;color:var(--i1);
  line-height:1.25;letter-spacing:-.15px}
/* LA BARRA DICE LO MISMO QUE EL NUMERO, PERO SIN LEER. Recorrer cinco renglones
   comparando «2/3» con «1/2» obliga a parar en cada uno; cinco barras se
   comparan de un vistazo. El numero se queda igual, para el que quiere el dato
   exacto. */
/* DOS CAPAS, Y CUENTAN COSAS DISTINTAS: `i` es lo que elegiste -y es el mismo
   numero que el «2/3» de al lado-, y `em` es cuanto de eso ya puede juzgar.
   Cuando estan parejas la barra se ve de un solo color, que es justo el estado
   en el que no hay nada que mirar. */
.v2-dimnav-b .ba{position:relative;height:4px;border-radius:999px;background:var(--n100)}
.v2-dimnav-b .ba i,.v2-dimnav-b .ba em{position:absolute;inset:0 auto 0 0;display:block;
  height:100%;border-radius:999px;transition:width var(--mo-3) var(--ez-out)}
.v2-dimnav-b .ba i{background:var(--n300)}
.v2-dimnav-b .ba em{background:var(--t600)}
.v2-dimnav-b.medio .ba i{background:var(--t200)}
.v2-dimnav-b.full .ba i{background:var(--t200)}
.v2-dimnav-b .n{font-size:var(--f2);font-weight:750;font-variant-numeric:tabular-nums;
  color:var(--i1);flex:0 0 auto;align-self:flex-start;margin-top:1px}
.v2-dimnav-b .n u{text-decoration:none;font-weight:600;color:var(--n400)}
.v2-dimnav-b.cero .n{color:var(--n400)}
.v2-dimnav-b.full .n{color:var(--t700)}
.v2-dimnav-b.medio .n{color:var(--op-t)}
.v2-dimnav-b>svg{color:var(--n300);flex:0 0 auto}
:where(#v2-app) .v2-dimnav-mas{display:flex;align-items:center;gap:7px;width:100%;
  margin-top:11px;padding:9px 10px;font-size:var(--f1);font-weight:650;color:var(--i2);
  background:none;border:1px dashed var(--n300);border-radius:var(--r10);cursor:pointer}
@media (hover:hover){ :where(#v2-app) .v2-dimnav-mas:hover{border-color:var(--t600);
  color:var(--t800);border-style:solid} }

/* ── el cuerpo de configuración ────────────────────────────────────────── */
.v2-cfg{background:var(--n0);border:1px solid var(--n100);border-radius:var(--r20);
  padding:20px}
.v2-cfg-dim{display:flex;align-items:center;gap:12px;padding-bottom:16px;
  border-bottom:1px solid var(--n100);margin-bottom:18px;flex-wrap:wrap}
.v2-cfg-dim .ic{width:40px;height:40px;border-radius:12px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;background:var(--t50);color:var(--t700);
  border:1px solid var(--t100)}
.v2-cfg-dim>div{flex:1;min-width:0}
.v2-cfg-dim>div b{display:block;font-size:var(--f4);font-weight:700;letter-spacing:-.4px;color:var(--i1)}
.v2-cfg-dim>div span{display:block;font-size:var(--f1);font-weight:450;color:var(--i3);margin-top:2px}
.v2-cfg-n2{font-size:var(--f1);font-weight:700;color:var(--i2);background:var(--n50);
  border-radius:999px;padding:4px 11px;white-space:nowrap}
.v2-cfg-est{font-size:var(--f1);font-weight:650;color:var(--i3);background:var(--n50);
  border:1px solid var(--n200);border-radius:999px;padding:4px 11px;white-space:nowrap}
.v2-cfg-est.medio{color:var(--op-t);background:var(--op-bg);border-color:var(--op-bd)}
.v2-cfg-est.full{color:var(--t800);background:var(--t50);border-color:var(--t200)}
.v2-cfg-s{display:flex;align-items:flex-start;gap:11px;margin:22px 0 13px}
.v2-cfg-s:first-of-type{margin-top:0}
.v2-cfg-sn{width:23px;height:23px;border-radius:50%;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:var(--f1);font-weight:700;
  background:var(--i1);color:#fff}
/* `>div` importa: sin él esta regla también pintaba `.v2-cfg-sn` —que es un
   span hermano— en gris sobre tinta, así que el número del paso desaparecía
   adentro de su propio círculo. */
.v2-cfg-s>div b{display:block;font-size:var(--f2);font-weight:700;color:var(--i1)}
.v2-cfg-s>div span{display:block;font-size:var(--f1);font-weight:450;color:var(--i3);
  margin-top:2px;line-height:1.45}
.v2-cfg-p{margin:11px 0 0;font-size:var(--f1);font-weight:450;color:var(--i3);line-height:1.55}
.v2-cfg-p.warn{color:var(--op-t)}
.v2-cfg-vac{display:flex;align-items:center;gap:9px;padding:16px;background:var(--n25);
  border:1px dashed var(--n300);border-radius:var(--r12);font-size:var(--f2);
  font-weight:500;color:var(--i3)}
/* ══ TRES PARAMETROS, TRES PIEZAS IGUALES ══
   Replegados, lo que se ve es la LISTA: cuantos parametros hay y que cada
   uno abre el suyo. Van pegados uno a otro con un filete en medio —no
   separados por 16px de aire— porque separadas se leian como tres tarjetas
   sueltas y juntas se leen como lo que son: las partes de una misma
   configuracion. El que esta abierto se despega del grupo con su sombra, y
   asi no hace falta ningun cartel que diga cual estas editando. */
.v2-cfg-b{margin:0 0 9px}
.v2-cfg-b:last-child{margin-bottom:0}
/* ══ CADA PARAMETRO ES UNA CAJA, NO UN RENGLON ══
   Replegados eran tres renglones separados por un filete, y un filete no
   dice «esto se abre»: dice «esto es una lista». Con borde propio, fondo y un
   chevron con forma de boton, la fila se lee como lo que es —una pieza
   cerrada que guarda adentro la configuracion de ESA variable— y se ve de un
   vistazo cuantas son. El estilo se declara ACA ADENTRO y no en
   `.v2-ctl-card.collapsed`, que es la clase compartida: la misma fila vive
   tambien en el panel de «Tus reglas» y ahi no tiene que cambiar. */
:where(#v2-app) .v2-cfg-b .v2-ctl-card.collapsed{
  gap:12px;padding:12px 14px;background:var(--n0);
  border:1px solid var(--n200);border-radius:var(--r14);
  transition:border-color var(--tr-16) var(--eo),box-shadow var(--tr-16) var(--eo)}
@media (hover:hover){
  :where(#v2-app) .v2-cfg-b .v2-ctl-card.collapsed:hover{border-color:var(--t300);
    box-shadow:0 2px 10px rgba(11,31,42,.05)}
}
/* el que ya esta contando se distingue por el filo teñido del costado, que es
   el mismo recurso que usa la lista de dimensiones de la izquierda. */
:where(#v2-app) .v2-cfg-b .v2-ctl-card.collapsed.on{box-shadow:inset 3px 0 0 var(--t500)}
/* EL CHEVRON ES UN BOTON, no un adorno al final del texto. Redondo, con su
   fondo, separado del resumen: eso es lo que dice «aca hay algo adentro». */
.v2-cfg-b .v2-ctl-row-r svg:last-child{width:26px;height:26px;padding:6px;
  margin-left:4px;border-radius:50%;background:var(--n50);color:var(--i2);
  box-sizing:border-box;
  transition:background var(--tr-14) ease,transform var(--tr-16) var(--eo)}
@media (hover:hover){
  .v2-cfg-b .v2-ctl-card.collapsed:hover .v2-ctl-row-r svg:last-child{
    background:var(--t50);color:var(--t700)}
}
/* abierto: se despega del grupo y el chevron ya apunta para arriba */
.v2-cfg-b.abierta{position:relative;z-index:1;margin:12px 0 14px}

/* las variables de una dimensión */
.v2-vars{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:11px}
:where(#v2-app) .v2-var{position:relative;display:flex;flex-direction:column;text-align:left;
  padding:13px 13px 14px;background:var(--n0);border:1px solid var(--n200);border-radius:var(--r14);
  cursor:pointer;transition:border-color var(--tr-16) var(--v2-ez),background var(--tr-16) var(--v2-ez)}
@media (hover:hover){ :where(#v2-app) .v2-var:hover{border-color:var(--i3)} }
:where(#v2-app) .v2-var.on{border-color:var(--t600);background:var(--t50)}
/* el tilde de la variable nace al prenderla: mismo rebote que en el paso 1,
   asi los dos gestos de «elegir» se sienten el mismo gesto. */
.v2-var.on .v2-var-ck svg{animation:wzTilde var(--mo-3) var(--ez-pop) backwards}
.v2-var-i{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;background:var(--n50);color:var(--i2);border:1px solid var(--n100);
  margin-bottom:9px}
.v2-var.on .v2-var-i{background:var(--n0);color:var(--t700);border-color:var(--t200)}
.v2-var-ck{position:absolute;right:11px;top:11px;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--n300);display:flex;align-items:center;justify-content:center;
  color:var(--n400)}
.v2-var.on .v2-var-ck{background:var(--t600);border-color:var(--t600);color:#fff}
.v2-var-t{display:block;font-size:var(--f2);font-weight:700;color:var(--i1);line-height:1.3}
.v2-var-d{display:block;font-size:var(--f1);font-weight:450;color:var(--i3);margin-top:4px;
  line-height:1.45}
.v2-var-f{display:inline-block;margin-top:8px;font-size:var(--f0);font-weight:700;color:var(--op-t);
  background:var(--op-bg);border:1px solid var(--op-bd);border-radius:999px;padding:2px 8px}

/* ── PASO 3 · responsables, prioridad y umbral ─────────────────────────── */
.v2-resps{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:11px}
:where(#v2-app) .v2-resp{position:relative;display:flex;flex-direction:column;text-align:left;
  padding:13px;background:var(--n0);border:1px solid var(--n200);border-radius:var(--r14);
  cursor:pointer;transition:border-color var(--tr-16) var(--v2-ez),background var(--tr-16) var(--v2-ez)}
@media (hover:hover){ :where(#v2-app) .v2-resp:hover{border-color:var(--i3)} }
:where(#v2-app) .v2-resp.on{border-color:var(--t600);background:var(--t50)}
:where(#v2-app) .v2-resp.nuevo{border-style:dashed}
.v2-resp-av{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;background:var(--v2-navy-bg);color:var(--v2-navy);font-size:var(--f2);
  font-weight:700;margin-bottom:9px}
.v2-resp.nuevo .v2-resp-av{background:var(--n50);color:var(--i3)}
.v2-resp-r{position:absolute;right:11px;top:11px;width:19px;height:19px;border-radius:50%;
  border:1.5px solid var(--n300);display:flex;align-items:center;justify-content:center;color:#fff}
.v2-resp.on .v2-resp-r{background:var(--t600);border-color:var(--t600)}
.v2-resp-t{display:block;font-size:var(--f2);font-weight:700;color:var(--i1);line-height:1.3}
.v2-resp-d{display:block;font-size:var(--f1);font-weight:450;color:var(--i3);margin-top:3px}
.v2-tipo-w{margin-top:15px;padding-top:14px;border-top:1px dashed var(--n200)}
.v2-tipo-l{display:block;font-size:var(--f1);font-weight:600;color:var(--i3);margin-bottom:8px}
.v2-tipo-mez{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:var(--f1);
  font-weight:500;color:var(--op-t)}
/* ══ UN SEGMENTADO DE TRES, NO CUATRO PILDORAS SUELTAS ══
   Los tres niveles son UNA escala y se eligen comparandolos, asi que van
   pegados y en orden. «Sin declarar» sale del grupo: no es un cuarto nivel
   -mas bajo que «Baja»- sino no elegir, que significa otra cosa. */
.v2-prios{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.v2-prio-seg{display:inline-flex;background:var(--n50);border:1px solid var(--n200);
  border-radius:999px;padding:3px;gap:2px}
:where(#v2-app) .v2-prio{min-width:92px;height:34px;padding:0 18px;font-size:var(--f2);
  font-weight:650;color:var(--i2);background:transparent;border:none;
  border-radius:999px;cursor:pointer;
  transition:background var(--tr-14) ease,color var(--tr-14) ease,transform var(--tr-14) var(--eo)}
@media (hover:hover){ :where(#v2-app) .v2-prio:not(.on):hover{background:var(--n0);color:var(--i1)} }
:where(#v2-app) .v2-prio:active{transform:scale(.97)}
:where(#v2-app) .v2-prio.baja.on{background:var(--t600);color:#fff}
:where(#v2-app) .v2-prio.media.on{background:#a67b12;color:#fff}
:where(#v2-app) .v2-prio.alta.on{background:var(--mal);color:#fff}
:where(#v2-app) .v2-prio-nd{height:30px;padding:0 12px;font-size:var(--f1);font-weight:600;
  color:var(--i3);background:none;border:1px dashed var(--n200);border-radius:999px;
  cursor:pointer;transition:color var(--tr-14) ease,border-color var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-prio-nd:hover{color:var(--i1);border-color:var(--i3)} }
.v2-prio-n{flex-basis:100%;font-size:var(--f1);font-weight:450;line-height:1.5;color:var(--i3)}
.v2-umb{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.v2-umb-f{display:flex;flex-direction:column;gap:5px;flex:1 1 200px;min-width:0}
.v2-umb-f.corto{flex:0 0 auto;min-width:118px}
.v2-umb-f>span{font-size:var(--f1);font-weight:650;color:var(--i2)}
.v2-umb-fake{height:40px;display:flex;align-items:center;padding:0 13px;font-size:var(--f2);
  font-weight:500;color:var(--i3);background:var(--n25);border:1px solid var(--n200);
  border-radius:var(--r10)}
.v2-umb-n{position:relative}
.v2-umb-n input{padding-right:44px !important;width:100%}
.v2-umb-n i{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-style:normal;
  font-size:var(--f1);font-weight:650;color:var(--i3);pointer-events:none}
.v2-umb-x{flex:1 1 100%;display:flex;align-items:flex-start;gap:8px;margin-top:4px;
  padding:11px 13px;background:var(--n25);border-radius:var(--r10);font-size:var(--f1);
  font-weight:500;color:var(--i2);line-height:1.5}
.v2-umb-x svg{flex:0 0 auto;margin-top:1px;color:var(--t700)}

/* ── PASO 4 · qué pasa ─────────────────────────────────────────────────── */
.v2-pasas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
@media (max-width:600px){ .v2-pasas{grid-template-columns:minmax(0,1fr)} }
:where(#v2-app) .v2-pasa{position:relative;display:flex;flex-direction:column;text-align:left;
  padding:14px;background:var(--n0);border:1px solid var(--n200);border-radius:var(--r14);
  cursor:pointer;transition:border-color var(--tr-16) var(--v2-ez),background var(--tr-16) var(--v2-ez)}
@media (hover:hover){ :where(#v2-app) .v2-pasa:hover{border-color:var(--i3)} }
:where(#v2-app) .v2-pasa.on{border-color:var(--t600);background:var(--t50)}
.v2-pasa-i{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;background:var(--n50);color:var(--i2);border:1px solid var(--n100);
  margin-bottom:9px}
.v2-pasa.on .v2-pasa-i{background:var(--n0);color:var(--t700);border-color:var(--t200)}
.v2-pasa-r{position:absolute;right:12px;top:12px;width:19px;height:19px;border-radius:50%;
  border:1.5px solid var(--n300);display:flex;align-items:center;justify-content:center;color:#fff}
.v2-pasa.on .v2-pasa-r{background:var(--t600);border-color:var(--t600)}
.v2-pasa-t{display:block;font-size:var(--f2);font-weight:700;color:var(--i1);line-height:1.3}
.v2-pasa-d{display:block;font-size:var(--f1);font-weight:450;color:var(--i3);margin-top:4px;
  line-height:1.45}
.v2-canps{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
:where(#v2-app) .v2-canp{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;
  font-size:var(--f2);font-weight:650;color:var(--i2);background:var(--n0);
  border:1px solid var(--n200);border-radius:var(--r10);cursor:pointer;
  transition:border-color var(--tr-14) ease,background var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-canp:hover{border-color:var(--i3)} }
:where(#v2-app) .v2-canp.on{border-color:var(--t600);background:var(--t50);color:var(--t800)}
.v2-canp i{font-style:normal;font-size:var(--f0);font-weight:650;color:var(--i3);background:var(--n50);
  border-radius:999px;padding:2px 7px}
:where(#v2-app) .v2-canp.x{border-style:dashed;color:var(--i3);font-weight:500}
.v2-flow{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.v2-flow li{display:flex;align-items:flex-start;gap:11px;padding:11px 0;position:relative}
.v2-flow li+li::before{content:"";position:absolute;left:12px;top:-11px;height:11px;width:1px;
  background:var(--n200)}
.v2-flow-n{width:25px;height:25px;border-radius:50%;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:var(--f1);font-weight:700;
  background:var(--i1);color:#fff}
.v2-flow li.off .v2-flow-n{background:var(--n200);color:var(--i3)}
.v2-flow-i{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;background:var(--n50);color:var(--i2)}
.v2-flow li.off .v2-flow-i{opacity:.55}
.v2-flow>li>div b{display:block;font-size:var(--f2);font-weight:650;color:var(--i1)}
.v2-flow li.off b{color:var(--i3)}
.v2-flow span:not(.v2-flow-n):not(.v2-flow-i){display:block;font-size:var(--f1);font-weight:450;
  color:var(--i3);margin-top:2px;line-height:1.45}

/* ── PASO 5 · revisar ──────────────────────────────────────────────────── */
.v2-wz5-main.ancho{grid-column:1/-1}
.v2-rev-b{background:var(--n0);border:1px solid var(--n100);border-radius:var(--r20);
  overflow:hidden}
.v2-rev-h{display:flex;align-items:center;gap:14px;padding:16px 20px;
  border-bottom:1px solid var(--n100)}
.v2-rev-h>div{flex:1;min-width:0}
.v2-rev-h b{display:block;font-size:var(--f4);font-weight:700;letter-spacing:-.4px;color:var(--i1)}
.v2-rev-h span{display:block;font-size:var(--f1);font-weight:450;color:var(--i3);margin-top:3px}
.v2-rev-c{padding:16px 20px 20px}
/* 230px partia en dos lineas hasta «Mi producto en gondola». 290 deja entrar un
   nombre entero y sigue dando tres columnas a 1600px. */
.v2-rev-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.v2-rev-d{background:var(--n25);border:1px solid var(--n100);border-radius:var(--r14);padding:13px}
.v2-rev-d-h{display:flex;align-items:center;gap:9px;margin-bottom:10px;flex-wrap:wrap}
.v2-rev-d-h .ic{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;background:var(--n0);color:var(--t700);
  border:1px solid var(--n100)}
.v2-rev-d-h b{font-size:var(--f2);font-weight:700;color:var(--i1);min-width:0;flex:1}
.v2-rev-d-h em{font-style:normal;font-size:var(--f1);font-weight:650;color:var(--t800);
  background:var(--t50);border-radius:999px;padding:3px 9px}
.v2-rev-d ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.v2-rev-d li{display:flex;align-items:center;gap:7px;font-size:var(--f1);font-weight:500;
  color:var(--i2);line-height:1.35}
.v2-rev-d li.ok svg{color:var(--t600);flex:0 0 auto}
.v2-rev-d li.falta{color:var(--op-t)}
.v2-rev-d li.falta svg{color:var(--op-t);flex:0 0 auto}
.v2-rev-d li i{font-style:normal;font-size:var(--f0);font-weight:700;color:var(--op-t);
  background:var(--op-bg);border-radius:999px;padding:1px 7px;margin-left:auto}
.v2-rev-q{display:flex;align-items:center;gap:9px}
.v2-rev-q>span:last-child{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.v2-rev-q b{font-size:var(--f2);font-weight:650;color:var(--i1)}
.v2-rev-q b.x{color:var(--op-t)}
.v2-rev-q i{font-style:normal;font-size:var(--f1);font-weight:450;color:var(--i3)}
.v2-rev-pu{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.v2-rev-u{display:inline-flex;align-items:center;gap:6px;font-size:var(--f1);font-weight:500;
  color:var(--i2);background:var(--n0);border:1px solid var(--n100);border-radius:999px;
  padding:3px 10px}
.v2-rev-ac{font-size:var(--f1);font-weight:650;color:var(--i1);background:var(--n0);
  border:1px solid var(--n200);border-radius:999px;padding:4px 11px}
.v2-rev-av,.v2-rev-ok{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;
  border-radius:var(--r20)}
.v2-rev-av{background:var(--op-bg);border:1px solid var(--op-bd)}
.v2-rev-av svg{color:var(--op-t);flex:0 0 auto;margin-top:1px}
.v2-rev-ok{background:var(--t50);border:1px solid var(--t100)}
.v2-rev-ok svg{color:var(--t700);flex:0 0 auto;margin-top:1px}
.v2-rev-av>div,.v2-rev-ok>div{flex:1;min-width:0}
.v2-rev-av b,.v2-rev-ok b{display:block;font-size:var(--f3);font-weight:700;color:var(--i1)}
.v2-rev-av span,.v2-rev-ok span{display:block;font-size:var(--f2);font-weight:450;color:var(--i2);
  margin-top:4px;line-height:1.55;max-width:72ch}
.v2-rev-cero{display:flex;justify-content:center;padding:4px 0}

/* ── LA PANTALLA DE REGLAS ─────────────────────────────────────────────── */
/* EL RIEL SE ANGOSTA PARA QUE LA TARJETA ENTRE. En `Reglas 2` los seis titulos
   van en UNA linea; con el riel a 330 las tarjetas quedaban en 380px y cuatro de
   seis se partian en dos —y una grilla donde cada tarjeta mide distinto se lee
   como un error de datos—. El resumen de la derecha no necesita 330: son tres
   numeros y seis barras. */
.v2-rg-split2{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:18px;align-items:start}
@media (max-width:1080px){ .v2-rg-split2{grid-template-columns:minmax(0,1fr)} }
.v2-rg-main,.v2-rg-vac{min-width:0;display:flex;flex-direction:column;gap:16px}
.v2-rg-eyb{display:block;font-size:var(--f1);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--i3);margin-bottom:6px}
.v2-rg-lado{position:sticky;top:14px}
.v2-rg-lado-c{background:var(--n0);border:1px solid var(--n100);border-radius:var(--r20);
  padding:20px}
.v2-rg-lado-i{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;background:var(--t50);color:var(--t700);border:1px solid var(--t100);
  margin-bottom:13px}
.v2-rg-lado-c h3{margin:0;font-size:var(--f4);font-weight:700;letter-spacing:-.5px;color:var(--i1)}
.v2-rg-lado-c>p{margin:7px 0 16px;font-size:var(--f2);font-weight:450;color:var(--i3);
  line-height:1.55}
.v2-rg-lado-c h4{margin:18px 0 10px;font-size:var(--f1);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--i3)}
.v2-rg-lado-p{display:flex;align-items:flex-start;gap:8px;margin-top:16px;padding:12px 13px;
  background:var(--t50);border-radius:var(--r12);font-size:var(--f1);font-weight:450;
  color:var(--i2);line-height:1.5}
.v2-rg-lado-p svg{flex:0 0 auto;margin-top:1px;color:var(--t700)}
.v2-rg-ayuda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.v2-rg-ayuda li{display:flex;gap:11px;align-items:flex-start}
.v2-rg-ayuda li>span{width:30px;height:30px;border-radius:10px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;background:var(--t50);color:var(--t700)}
.v2-rg-ayuda b{display:block;font-size:var(--f2);font-weight:650;color:var(--i1);line-height:1.3}
.v2-rg-ayuda i{display:block;font-style:normal;font-size:var(--f1);font-weight:450;
  color:var(--i3);margin-top:3px;line-height:1.45}
.v2-rg-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;
  padding:14px 0;border-top:1px solid var(--n100);border-bottom:1px solid var(--n100)}
.v2-rg-nums b{display:block;font-size:var(--f5);font-weight:700;letter-spacing:-.9px;line-height:1;
  color:var(--i1);font-variant-numeric:tabular-nums}
.v2-rg-nums span{display:block;font-size:var(--f1);font-weight:500;color:var(--i3);margin-top:5px}
.v2-rg-nums .ok b{color:var(--t700)}
.v2-rg-nums .op b{color:var(--op-t)}
.v2-rg-dims{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
:where(#v2-app) .v2-rg-dims button{display:grid;grid-template-columns:26px minmax(0,1fr) auto;
  gap:8px;width:100%;text-align:left;padding:8px;background:none;border:0;
  border-radius:var(--r10);cursor:pointer;align-items:center;
  transition:background var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-rg-dims button:hover{background:var(--n25)} }
.v2-rg-dims .ic{display:flex;align-items:center;justify-content:center;color:var(--i2)}
.v2-rg-dims .tx{font-size:var(--f1);font-weight:600;color:var(--i1);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-rg-dims .n{font-size:var(--f1);font-weight:700;color:var(--i3);
  font-variant-numeric:tabular-nums}
.v2-rg-dims .bar{grid-column:2/-1;height:4px;border-radius:2px;background:var(--n100);
  overflow:hidden}
.v2-rg-dims .bar i{display:block;height:100%;border-radius:2px;background:var(--n300)}
.v2-rg-dims .bar i.activa{background:var(--t600)}
.v2-rg-dims .bar i.borrador{background:var(--op-t)}
.v2-rg-barra{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.v2-rg-q{flex:1 1 150px;min-width:130px;max-width:260px}
/* LAS TARJETAS DE UNA MISMA FILA TERMINAN A LA MISMA ALTURA. El subtítulo de
   una envuelve a dos líneas y el de al lado no, así que el borde inferior de la
   fila quedaba dentado y los pies desalineados. */
.v2-rgc-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
  align-items:stretch}
@media (max-width:820px){ .v2-rgc-g{grid-template-columns:minmax(0,1fr)} }
.v2-rgc{display:flex;flex-direction:column;height:100%;position:relative;
  background:var(--n0);border:1px solid var(--n200);
  border-radius:var(--r20);overflow:hidden;
  transition:border-color var(--tr-16) var(--v2-ez),box-shadow var(--tr-16) var(--v2-ez)}
@media (hover:hover){ .v2-rgc:hover{border-color:var(--n300);box-shadow:var(--sh-up)} }
.v2-rgc.activa{border-color:var(--t200)}
:where(#v2-app) .v2-rgc-b{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;
  align-items:flex-start;width:100%;text-align:left;padding:17px 18px 13px;background:none;
  border:0;cursor:pointer}
/* el emblema de la referencia mide ~48: es lo que identifica la regla de un
   vistazo en una grilla de seis, y a 42 competia con el estado. */
.v2-rgc-i{width:48px;height:48px;border-radius:14px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;background:var(--n50);color:var(--i2);
  border:1px solid var(--n100)}
.v2-rgc.activa .v2-rgc-i{background:var(--t50);color:var(--t700);border-color:var(--t200)}
.v2-rgc-x{min-width:0}
.v2-rgc-x b{display:block;font-size:var(--f2);font-weight:700;letter-spacing:-.2px;
  color:var(--i1);line-height:1.3}
.v2-rgc-x span{display:block;font-size:var(--f1);font-weight:450;color:var(--i3);margin-top:4px;
  line-height:1.45}
.v2-rgc-est{display:inline-flex;align-items:center;gap:6px;font-size:var(--f1);font-weight:700;
  border-radius:999px;padding:4px 11px;white-space:nowrap;border:1px solid transparent}
.v2-rgc-est i{width:6px;height:6px;border-radius:50%;background:currentColor}
.v2-rgc-est.ok{color:var(--t800);background:var(--t50);border-color:var(--t200)}
.v2-rgc-est.op{color:var(--op-t);background:var(--op-bg);border-color:var(--op-bd)}
.v2-rgc-est.nd{color:var(--i3);background:var(--n50);border-color:var(--n200)}
.v2-rgc-ch{color:var(--n400);align-self:center}
.v2-rgc-m{display:flex;align-items:center;gap:14px;padding:0 18px 14px;flex-wrap:wrap;
  margin-top:auto}
.v2-rgc-m span{display:inline-flex;align-items:center;gap:6px;font-size:var(--f1);
  font-weight:500;color:var(--i3)}
.v2-rgc-m b{font-weight:700;color:var(--i1);font-variant-numeric:tabular-nums}
.v2-rgc-m i.x{font-style:normal;color:var(--op-t);font-weight:600}
.v2-rgc-pie{position:relative;display:flex;align-items:center;gap:8px;padding:11px 18px 13px;
  background:var(--n25);border-top:1px solid var(--n100);font-size:var(--f1);font-weight:500;
  color:var(--i3)}
.v2-rgc-pie b{font-weight:700;color:var(--i1)}
.v2-rgc-pie.ok{background:var(--t50);border-top-color:var(--t100);color:var(--t800)}
.v2-rgc-pie.ok b{color:var(--t900)}
/* una regla activa CON comercios en problema no es una buena noticia: es
   trabajo. El pie ámbar es el que dice cuánto. */
.v2-rgc-pie.mal{background:var(--op-bg);border-top-color:var(--op-bd);color:var(--op-t)}
.v2-rgc-pie.mal b{color:var(--op-t)}
.v2-ctxb-b{font-style:normal;font-size:var(--f0);font-weight:700;margin-left:7px;padding:2px 7px;
  border-radius:999px;background:var(--op-bg);color:var(--op-t)}
.v2-rgc-pie svg{flex:0 0 auto}
.v2-rg-tip{display:flex;align-items:center;gap:11px;padding:15px 18px;background:var(--n0);
  border:1px solid var(--n100);border-radius:var(--r20);font-size:var(--f2);font-weight:450;
  color:var(--i3);line-height:1.55;flex-wrap:wrap}
.v2-rg-tip svg{flex:0 0 auto;color:var(--t700)}
.v2-rg-tip>span{flex:1;min-width:200px}
/* el vacío */
.v2-rg-vac-c{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:34px 24px 40px;background:var(--n0);border:1px solid var(--n100);
  border-radius:var(--r20)}
.v2-rg-arte{width:min(280px,72%);height:auto;margin-bottom:18px}
.v2-rg-vac-c h3{margin:0;font-size:var(--f6);font-weight:700;letter-spacing:-1.2px;
  color:var(--i1);line-height:1.12}
.v2-rg-vac-c>p{margin:11px 0 24px;font-size:var(--f3);font-weight:450;color:var(--i3);
  line-height:1.6;max-width:56ch}
:where(#v2-app) .v2-rg-vac-l{margin-top:14px;font-size:var(--f2);font-weight:650;
  color:var(--t700);background:none;border:0;cursor:pointer;text-decoration:underline;
  text-underline-offset:4px;padding:4px}
@media (hover:hover){ :where(#v2-app) .v2-rg-vac-l:hover{color:var(--t800)} }

/* los controles del setup y del reclamo son más altos que el `.v2-sel` de una
   barra: acá son campos de formulario, no controles de chrome. */
.v2-umb .v2-sel,.v2-umb .v2-inp,.v2-band-pf .v2-sel,
.v2-rp-cuantas .v2-sel,.v2-rp-f .v2-inp{height:40px;font-size:var(--f2);
  border-radius:var(--r10);padding-left:13px}
.v2-umb .v2-sel,.v2-band-pf .v2-sel,.v2-rp-cuantas .v2-sel{width:100%;padding-right:33px}
.v2-rp-f .v2-recta{min-height:96px;padding:11px 13px;font-size:var(--f2);
  font-weight:450;line-height:1.55;resize:vertical;font-family:inherit}
.v2-band-pf .v2-sel{max-width:100%}

/* ── PARTNERS · las mismas tarjetas que Reglas, con la identidad adelante ── */
.v2-ptc .v2-rgc-b{grid-template-columns:auto minmax(0,1fr) auto auto}
.v2-ptc .v2-pt-av{width:42px;height:42px;border-radius:13px;font-size:var(--f3);
  align-self:flex-start}
.v2-ptc.abierta{grid-column:1/-1}
.v2-ptc .v2-rgc-m i.x{font-style:normal;color:var(--i3);font-weight:500}
.v2-pt-mail{font-style:normal;max-width:22ch;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;display:inline-block;vertical-align:bottom}
.v2-ptc .v2-rgc-pie b{font-weight:700}
.v2-ptc .v2-pt-sit{align-self:center}

/* el aviso de «este problema no es de este tramo»: neutro, no alarma. Lo que
   pasa no está mal — estás mirando un recorte y el caso quedó afuera. */
.v2-fuera.tramo{background:var(--v2-navy-bg);border-color:#dbe2ef;color:var(--v2-navy)}
.v2-fuera.tramo svg{color:var(--v2-navy)}

/* el aviso ámbar del riel, cuando hay casos sin partner detrás */
.v2-rg-lado-p.av{background:var(--op-bg);color:var(--op-t)}
.v2-rg-lado-p.av svg{color:var(--op-t)}
.v2-rg-lado-p b{font-weight:700}
.v2-rp-tirah{font-size:var(--f1);font-weight:500;color:var(--i3);margin:12px 0 7px}

/* ══════════════════════════════════════════════════════════════════════════
   EL ENCABEZADO DEL CASO, como abre la referencia
   ══════════════════════════════════════════════════════════════════════════
   Píldoras arriba, titular a la izquierda, evidencia a la derecha, chips
   citables abajo, y una banda teñida con la magnitud. La foto deja de ser un
   banner de 140px que se comía la parte de arriba antes de decir qué pasó. */
/* ══ LOS CHIPS DE LA FICHA ══
   UNA SOLA CAJA CON FILETES ADENTRO, no cuatro píldoras sueltas. Sueltas, cada
   dato traía su propio borde y su propio fondo: cuatro objetos compitiendo
   donde hay una sola ficha. Con filetes se leen como las cuatro celdas de una
   misma cosa, que es lo que son — y es como los dibuja la referencia.
   Tres renglones por celda: rótulo chico y gris, el dato en tinta plena, y el
   contexto abajo. «CABA y GBA» solo no dice si es dónde pasa o quién lo atiende. */
/* LOS FILETES SON EL `gap` DE UNA GRILLA SOBRE FONDO GRIS, y no un
   `border-left` por celda: con borde, al partirse en dos renglones la
   primera celda de la segunda fila se quedaba con su filete colgando en el
   aire y no habia forma de saber cual empieza fila. Asi los filetes salen
   solos, verticales y horizontales, con cualquier cantidad de columnas. */
.v2-hero-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:1px;margin-top:18px;background:var(--n100);
  border:1px solid var(--n100);border-radius:var(--r14);overflow:hidden}
.v2-hero-ch{display:flex;align-items:flex-start;gap:10px;min-width:0;
  background:var(--n0);padding:11px 15px}
.v2-hero-ch-i{width:30px;height:30px;flex:0 0 auto;border-radius:9px;display:flex;
  align-items:center;justify-content:center;background:var(--n50);color:var(--i3);
  margin-top:1px}
.v2-hero-ch-x{display:flex;flex-direction:column;gap:2px;min-width:0}
.v2-hero-ch-x em{font-style:normal;font-size:var(--f0);font-weight:600;color:var(--i3);
  line-height:1.2;white-space:nowrap;letter-spacing:.03em}
.v2-hero-ch-x b{font-size:var(--f2);font-weight:650;color:var(--i1);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-hero-ch-x b .n{font-size:var(--f4);font-weight:750;letter-spacing:-.4px;
  font-variant-numeric:tabular-nums;margin-right:3px}
/* LA TERCERA LINEA SI PUEDE PARTIRSE. «CIUDAD DE BUENOS AIRES» y «Desvio de
   nivel de gondola» no entran en 170px y recortados no dicen nada; en dos
   renglones entran enteros y la ficha no cambia de alto, porque la celda mas
   alta ya manda sobre las cuatro. */
.v2-hero-ch-x i{font-style:normal;font-size:var(--f1);font-weight:450;color:var(--i3);
  line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical}
@media (max-width:640px){ .v2-hero-chips{grid-template-columns:1fr} }

/* ══ EL CARRUSEL DE LA EVIDENCIA ══
   El contador con las flechas abajo a la derecha, el nombre del comercio abajo
   a la izquierda, y las dos flechas grandes que aparecen al pasar el mouse. Una
   sola foto prueba un comercio y el caso son cuarenta y ocho. */
.v2-hero-ev-c{position:absolute;right:9px;bottom:9px;display:flex;align-items:center;gap:7px;
  font-size:var(--f1);font-weight:650;color:#fff;background:rgba(10,22,24,.62);
  backdrop-filter:blur(3px);border-radius:999px;padding:4px 5px 4px 11px;
  font-variant-numeric:tabular-nums}
:where(#v2-app) .v2-hero-ev-c button{width:22px;height:22px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.16);border:0;
  cursor:pointer;color:#fff;transition:background var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-hero-ev-c button:hover{background:rgba(255,255,255,.32)} }
:where(#v2-app) .v2-hero-nav{position:absolute;top:50%;margin-top:-17px;width:34px;height:34px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(10,22,24,.5);backdrop-filter:blur(3px);border:0;cursor:pointer;color:#fff;
  opacity:0;transition:opacity var(--tr-16) ease,background var(--tr-14) ease}
.v2-hero-ev:hover .v2-hero-nav,.v2-hero-nav:focus-visible{opacity:1}
:where(#v2-app) .v2-hero-nav.iz{left:9px}
:where(#v2-app) .v2-hero-nav.de{right:9px}
@media (hover:hover){ :where(#v2-app) .v2-hero-nav:hover{background:rgba(10,22,24,.78)} }
.v2-hero-ev figcaption{position:absolute;left:9px;bottom:9px;max-width:58%;
  font-size:var(--f1);font-weight:600;color:#fff;background:rgba(10,22,24,.62);
  backdrop-filter:blur(3px);border-radius:999px;padding:4px 11px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-hero-ev figcaption:empty{display:none}

/* ══ LA BANDA DE MAGNITUD ══
   El aro con el porcentaje a la izquierda y, del otro lado del filete, qué
   significa: el impacto en una línea, la razón en otra, y el enlace a la cuenta. */
.v2-hero-band{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;
  margin-top:16px;padding:16px 20px;border-radius:var(--r14);
  background:var(--n25);border:1px solid var(--n100)}
@media (max-width:760px){ .v2-hero-band{grid-template-columns:1fr} }
.v2-hero-band.sv-crit{background:var(--mal-bg);border-color:var(--mal-bd)}
.v2-hero-band.sv-alto{background:var(--op-bg);border-color:var(--op-bd)}
.v2-hero-band.sv-medio{background:#fdf8e8;border-color:#f0e4bc}
.v2-hero-band.sv-bajo{background:var(--t50);border-color:var(--t100)}
.v2-hero-band-a{display:flex;align-items:center;gap:14px;min-width:0}
.v2-hero-band-a b{display:block;font-size:var(--f5);font-weight:750;letter-spacing:-.9px;
  line-height:1;color:var(--i1);font-variant-numeric:tabular-nums}
.v2-hero-band-a span{display:block;font-size:var(--f2);font-weight:450;color:var(--i2);
  margin-top:5px;line-height:1.35}
.v2-hero-band-i{min-width:0;padding-left:20px;border-left:1px solid rgba(14,28,30,.1)}
@media (max-width:760px){ .v2-hero-band-i{padding-left:0;border-left:0;
  border-top:1px solid rgba(14,28,30,.1);padding-top:12px} }
.v2-hero-imp{display:inline-flex;align-items:center;gap:7px;font-size:var(--f2);
  font-weight:750;letter-spacing:-.1px}
.v2-hero-imp svg{flex:0 0 auto}
.v2-hero-band-i p{margin:7px 0 0;font-size:var(--f2);font-weight:450;line-height:1.5;
  color:var(--i2);max-width:56ch}
:where(#v2-app) .v2-hero-calc{display:inline-flex;align-items:center;gap:5px;margin-top:9px;
  padding:0;background:none;border:0;cursor:pointer;
  font-size:var(--f2);font-weight:650;color:var(--t700)}
@media (hover:hover){ :where(#v2-app) .v2-hero-calc:hover{color:var(--t900)}
  :where(#v2-app) .v2-hero-calc:hover svg{transform:translateX(2px)} }
.v2-hero-calc svg{transition:transform var(--tr-14) ease}


/* EN LA FOTO CHICA DEL PANEL, EL PIE SE VA. A 150px de ancho el nombre del
   comercio y el contador «1/12» se pisan: dos cintas oscuras encimadas. Queda
   el contador, que es el que dice que hay más fotos; el nombre vuelve al
   ampliar, donde hay lugar. */
#v2-app.con-caso:not(.pan-ancho) .v2-pan .v2-hero-ev figcaption{display:none}
#v2-app.con-caso:not(.pan-ancho) .v2-pan .v2-hero-nav{width:26px;height:26px;margin-top:-13px}
#v2-app.con-caso:not(.pan-ancho) .v2-pan .v2-hero-ev-c{right:6px;bottom:6px;padding:3px 4px 3px 8px}

/* Partners: cinco contadores en vez de seis, y la cabecera con sus dos
   números de contexto a la derecha, igual que Problemas. */
.v2-rg-h2{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.v2-rg-h2>div{min-width:0}
/* el titulo cede: sin una base flexible se queda con el renglon entero y
   empuja el banner abajo, que es exactamente lo que se queria evitar. */
.v2-rg-h2>div:first-child{flex:1 1 340px}
/* el banner es la segunda mitad del renglon del titulo */
.v2-rg-h2 .v2-pt-ban{flex:0 1 44%;min-width:340px;margin:0;align-self:stretch}
@media (max-width:1100px){ .v2-rg-h2 .v2-pt-ban{flex:1 1 100%;min-width:0} }

/* la cabecera de cada variable a configurar: su ícono y su nombre, sin número */

/* ══════════════════════════════════════════════════════════════════════════
   PARTNERS · contra `docs/inspiracion/partners-1.png`
   ══════════════════════════════════════════════════════════════════════════
   Filas, no tarjetas: acá se barre una red de arriba abajo, no se lee una
   ficha. Arriba, cuatro acciones y el banner; a la derecha, el resumen con el
   donut. */
.v2-pt-ban{display:flex;align-items:center;gap:16px;padding:14px 20px;
  background:linear-gradient(100deg,var(--t50) 0%,var(--n0) 88%);
  border:1px solid var(--t100);border-radius:var(--r20)}
.v2-pt-ban svg{width:172px;height:auto;flex:0 0 auto}
.v2-pt-ban p{margin:0;font-size:var(--f3);font-weight:650;color:var(--t800);
  line-height:1.45;letter-spacing:-.2px}
@media (max-width:900px){ .v2-pt-ban svg{display:none} }

/* DE A DOS, NO DE A CUATRO. La referencia las pone a lo ancho de 1250px; acá
   la columna del contenido mide 780 porque el riel se lleva 330, y cuatro
   tarjetas de 180 parten «Crear partner» en dos renglones y la bajada en
   cuatro. Dos filas de dos entran enteras y se leen. */
.v2-pta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* LAS CUATRO ACCIONES EN UNA FILA, que es como estan en la referencia a 1512.
   El corte estaba en 1700px, o sea que en la pantalla real nunca se veian de a
   cuatro: quedaban dos arriba y dos abajo, y las dos de abajo caian fuera del
   pliegue. Con el rail puesto la columna principal mide ~900px a 1512, y
   cuatro tarjetas de 225px entran. */
@media (min-width:1180px){ .v2-pta{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1180px) and (max-width:1699px){
  /* de a cuatro la tarjeta mide ~215px: con el circulo de 40 y el chevron
     quedaban 130px de texto y el titulo se partia en dos lineas. Se achica el
     circulo, se saca el chevron y la bajada queda en una linea. */
  :where(#v2-app) .v2-pta-i{gap:9px;padding:12px 12px;align-items:flex-start}
  .v2-pta-ic{width:30px;height:30px}
  .v2-pta-ic svg{width:15px;height:15px}
  .v2-pta-x b{font-size:var(--f2);line-height:1.25}
  .v2-pta-x span{font-size:var(--f0);line-height:1.35}
  .v2-pta-ch{display:none}
}
@media (max-width:620px){ .v2-pta{grid-template-columns:minmax(0,1fr)} }
:where(#v2-app) .v2-pta-i{display:flex;align-items:center;gap:12px;text-align:left;
  padding:14px 15px;background:var(--n0);border:1px solid var(--n200);
  border-radius:var(--r14);cursor:pointer;
  transition:border-color var(--tr-16) var(--v2-ez),box-shadow var(--tr-16) var(--v2-ez),
    transform var(--tr-16) var(--v2-ez)}
@media (hover:hover){ :where(#v2-app) .v2-pta-i:hover{border-color:var(--n300);
  box-shadow:var(--sh-up);transform:translateY(-1px)} }
@media (prefers-reduced-motion:reduce){ :where(#v2-app) .v2-pta-i{transition:none}
  :where(#v2-app) .v2-pta-i:hover{transform:none} }
.v2-pta-ic{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center}
.v2-pta-i.c-t .v2-pta-ic{background:var(--t50);color:var(--t700)}
.v2-pta-i.c-v .v2-pta-ic{background:#f3f0fb;color:#5b4b9e}
.v2-pta-i.c-a .v2-pta-ic{background:var(--v2-navy-bg);color:var(--v2-navy)}
.v2-pta-i.c-r .v2-pta-ic{background:var(--op-bg);color:var(--op-t)}
.v2-pta-x{flex:1;min-width:0}
.v2-pta-x b{display:block;font-size:var(--f2);font-weight:700;color:var(--i1)}
.v2-pta-x span{display:block;font-size:var(--f1);font-weight:450;color:var(--i3);
  margin-top:2px;line-height:1.4}
.v2-pta-ch{color:var(--n400);flex:0 0 auto}

/* ── las filas ── */
.v2-ptf-l{background:var(--n0);border:1px solid var(--n100);border-radius:var(--r20);
  overflow:hidden}
.v2-ptf{border-top:1px solid var(--n100)}
.v2-ptf:first-child{border-top:0}
:where(#v2-app) .v2-ptf-h{display:grid;width:100%;text-align:left;cursor:pointer;
  grid-template-columns:40px minmax(0,1.6fr) minmax(0,1.1fr) 96px 84px 18px;
  align-items:center;gap:12px;padding:13px 16px;background:none;border:0;
  transition:background var(--tr-14) ease}
/* la columna de comercios sólo entra cuando hay lugar de verdad */
.v2-ptf-h>.v2-ptf-c+.v2-ptf-c{display:none}
/* LA COLUMNA DE COMERCIOS ENTRA A 1200, NO A 1700. En `partners-1.png` la fila
   dice las tiendas asignadas de cada partner a 1512, que es la pantalla real;
   con el corte en 1700 no se veia nunca —el mismo error que tenian las cuatro
   tarjetas de accion—, y sin ella la fila dice a que cortes llega pero no de
   que tamaño es lo que atiende. */
@media (min-width:1200px){ :where(#v2-app) .v2-ptf-h{
    grid-template-columns:42px minmax(0,1.5fr) minmax(0,1.15fr) 92px 96px 88px 18px;gap:12px}
  .v2-ptf-h>.v2-ptf-c+.v2-ptf-c{display:grid} }
@media (min-width:1700px){ :where(#v2-app) .v2-ptf-h{
    grid-template-columns:44px minmax(0,1.5fr) minmax(0,1.2fr) 118px 106px 96px 20px;gap:14px} }
@media (hover:hover){ :where(#v2-app) .v2-ptf-h:hover{background:var(--n25)} }
:where(#v2-app) .v2-ptf.on .v2-ptf-h{background:var(--t50)}
@media (max-width:900px){ :where(#v2-app) .v2-ptf-h{
  grid-template-columns:40px minmax(0,1fr) 84px 18px}
  .v2-ptf-h>.v2-ptf-c{display:none} }
.v2-ptf-id{min-width:0;display:flex;flex-direction:column;gap:1px}
.v2-ptf-id b{font-size:var(--f2);font-weight:700;color:var(--i1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-ptf-id em{font-style:normal;font-size:var(--f1);font-weight:450;color:var(--i3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-ptf-tag{align-self:flex-start;margin-top:4px;font-size:var(--f0);font-weight:700;
  color:var(--i2);background:var(--n50);border:1px solid var(--n200);
  border-radius:999px;padding:2px 9px}
.v2-ptf-c{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 7px;
  align-items:center;min-width:0}
.v2-ptf-c svg{grid-row:span 2;color:var(--i3);align-self:start;margin-top:2px}
.v2-ptf-c b{font-size:var(--f1);font-weight:650;color:var(--i1);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-ptf-c b.x{color:var(--i3);font-weight:500}
.v2-ptf-c em{font-style:normal;font-size:var(--f1);font-weight:450;color:var(--i3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-ptf-est{justify-self:start;display:inline-flex;align-items:center;gap:6px;
  font-size:var(--f1);font-weight:700;border-radius:999px;padding:4px 11px;
  white-space:nowrap;border:1px solid transparent}
.v2-ptf-est::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.v2-ptf-est.ok{color:var(--t800);background:var(--t50);border-color:var(--t200)}
.v2-ptf-est.op{color:var(--op-t);background:var(--op-bg);border-color:var(--op-bd)}
.v2-ptf-est.mal{color:var(--mal);background:var(--mal-bg);border-color:var(--mal-bd)}
.v2-ptf-est.nd{color:var(--i3);background:var(--n50);border-color:var(--n200)}
/* la celda no puede envolver: el botón «asignar» se salía de su columna y
   caía debajo del avatar, con el chevron arrastrado a un segundo renglón. */
.v2-ptf-r{display:flex;align-items:center;gap:7px;min-width:0;color:var(--i3);
  white-space:nowrap;overflow:hidden}
:where(#v2-app) .v2-ptf-r .v2-b.sup{display:inline;font-size:var(--f1);white-space:nowrap}
.v2-ptf-r em{font-style:normal;font-size:var(--f1);font-weight:600;color:var(--i2)}
.v2-ptf-x{color:var(--n400);display:flex;justify-content:flex-end}
:where(#v2-app) .v2-ptf.on .v2-ptf-x{transform:rotate(180deg)}

/* ── el donut ── */
.v2-pt-donut{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr);
  gap:14px;align-items:center}
.v2-pt-donut svg{width:88px;height:88px}
.v2-pt-donut-c{position:absolute;left:0;top:50%;width:88px;transform:translateY(-50%);
  text-align:center;pointer-events:none}
.v2-pt-donut-c b{display:block;font-size:var(--f4);font-weight:700;letter-spacing:-.6px;
  line-height:1;color:var(--i1);font-variant-numeric:tabular-nums}
.v2-pt-donut-c span{display:block;font-size:var(--f0);font-weight:500;color:var(--i3);margin-top:2px}
.v2-pt-leg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.v2-pt-leg li{display:flex;align-items:center;gap:8px;font-size:var(--f1);font-weight:500;
  color:var(--i2);min-width:0}
.v2-pt-leg li b{margin-left:auto;font-weight:700;color:var(--i1);
  font-variant-numeric:tabular-nums}
.v2-pt-leg i{width:9px;height:9px;border-radius:3px;flex:0 0 auto;background:var(--n300)}
/* los colores por tipo, los mismos del avatar y del donut */
.v2-pt-leg i.tp-cadena,.v2-pt-donut circle.tp-cadena{background:var(--v2-navy);stroke:var(--v2-navy)}
.v2-pt-leg i.tp-distribuidor,.v2-pt-donut circle.tp-distribuidor{background:var(--t600);stroke:var(--t600)}
.v2-pt-leg i.tp-agencia,.v2-pt-donut circle.tp-agencia{background:#5b4b9e;stroke:#5b4b9e}
.v2-pt-leg i.tp-trade,.v2-pt-donut circle.tp-trade{background:var(--op-t);stroke:var(--op-t)}
.v2-pt-leg i.tp-comercial,.v2-pt-donut circle.tp-comercial{background:#c9971f;stroke:#c9971f}
.v2-pt-leg i.tp-responsable,.v2-pt-donut circle.tp-responsable{background:var(--t400);stroke:var(--t400)}
.v2-pt-leg i.tp-interno,.v2-pt-donut circle.tp-interno{background:var(--c-no);stroke:var(--c-no)}
.v2-pt-leg i.tp-otro,.v2-pt-donut circle.tp-otro{background:var(--n300);stroke:var(--n300)}

/* ══ INFORMACIÓN ADICIONAL ══
   El bloque de ficha de `docs/inspiracion/Problemas.png`: tres datos en línea,
   cada uno con su rótulo arriba y su valor abajo, separados por un filete. A
   menos de 560px se apilan, porque tres columnas en el panel angosto dejaban
   «Última revisión» en dos renglones partiendo la fecha. */
.v2-infa{border:1px solid var(--n200);border-radius:var(--r14);background:var(--n0);
  padding:14px 16px 15px}
.v2-infa-h{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.v2-infa-i{width:28px;height:28px;border-radius:8px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;background:var(--n50);color:var(--i2)}
.v2-infa-h b{font-size:var(--f2);font-weight:650;color:var(--i1)}
.v2-infa-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.v2-infa-c{display:flex;flex-direction:column;gap:3px;min-width:0;padding:0 14px;
  border-left:1px solid var(--n100)}
.v2-infa-c:first-child{padding-left:0;border-left:0}
.v2-infa-c span{font-size:var(--f0);font-weight:500;color:var(--i3)}
.v2-infa-c b{font-size:var(--f1);font-weight:600;color:var(--i1);
  overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){
  .v2-infa-g{grid-template-columns:minmax(0,1fr);gap:10px}
  .v2-infa-c{padding:0 0 0 12px;border-left:2px solid var(--n100)}
  .v2-infa-c:first-child{padding-left:12px;border-left:2px solid var(--n100)}
}

/* ══ EL ARO Y EL IMPACTO SIGUEN A LA GRAVEDAD ══
   En la referencia el caso es crítico y las dos piezas están en rojo. El aro
   estaba clavado en teal y el impacto en tinta neutra, así que la banda decía
   «tranquilo» arriba de un titular que dice «crítico». */
.v2-hx-aro.sv-crit circle:first-child{stroke:var(--mal-bd)}
.v2-hx-aro.sv-crit circle+circle{stroke:var(--mal)}
.v2-hx-aro.sv-alto circle:first-child{stroke:var(--op-bd)}
.v2-hx-aro.sv-alto circle+circle{stroke:var(--op-t)}
.v2-hx-aro.sv-medio circle:first-child{stroke:#f0e4bc}
.v2-hx-aro.sv-medio circle+circle{stroke:#c99a1b}
:where(#v2-app) .v2-hero-imp{font-size:var(--f4);font-weight:700;letter-spacing:-.4px;line-height:1.1}
:where(#v2-app) .v2-hero-imp.s-crit{color:var(--mal)}
:where(#v2-app) .v2-hero-imp.s-alto{color:var(--op-t)}
:where(#v2-app) .v2-hero-imp.s-medio{color:#a8791a}
:where(#v2-app) .v2-hero-imp.s-bajo{color:var(--t700)}

/* ══ INTELIGENCIA SE ALINEA CON EL RESTO DE LA PLATAFORMA ══
   Cada `.plat-wrap` —Comercios, Reportes, Campañas— tiene 72px de margen
   horizontal, y las tres secciones de Alertas montan el v2 pelado contra
   el borde: el título arrancaba en x=72 mientras el de Comercios arranca en
   124, así que pasar de una sección a otra corría la página. El v2 ya trae 20
   adentro, así que con estos 28 el título arranca en 48 contra los 72 de
   Comercios: NO son los mismos 72, y es a propósito. Con 52 —los que hacían
   falta para igualar— la lista perdía 104px, se cortaba «CIUDAD DE BUEN…»
   en cada fila y los controles saltaban de renglón. Esto es una herramienta
   con ocho columnas, no un documento.
   El panel del caso queda flotando con margen a la derecha, que además es
   como está en `docs/inspiracion/Problemas.png`. */
/* EL MISMO PADDING QUE EL RESTO DE LA PLATAFORMA, sin excepción.
   `.plat-wrap` —Campañas, Comercios, Reportes, Inicio— usa `42px 72px 66px`, y
   estas tres son las únicas que no lo respetaban: pasar de una sección a otra
   corría la página. El v2 ya trae 20 adentro, así que acá van los 52 que
   faltan a los lados y el alto va entero. */
/* PARTNERS Y REGLAS son documentos: el padding va en la sección, como en
   `.plat-wrap`. ALERTAS no: su panel es un cajón que tiene que tocar el borde
   derecho, y una sección con padding se lo impide. Ahí el mismo padding vive
   en la columna de la lista —que es la única que lo necesita— y el cajón
   pone el suyo adentro. Probé con márgenes negativos y fue peor: el de arriba
   se comía la propia barra del panel («Volver a alertas») y el de la derecha
   lo empujaba fuera de la ventana. */
#plat-partners.on, #plat-reglas.on{padding:42px 52px 66px}
#plat-problemas.on{padding:0}
/* LA LISTA USA EL ANCHO, COMO TODAS LAS DEMÁS SECCIONES. `.v2-band-in` traía
   `max-width:--int-wrap` y `margin:0 auto`, que es de cuando el v2 era un
   documento suelto: al cerrar un caso a 1920 quedaban 256px muertos a cada
   lado y la sección se leía como si hubiera perdido el padding —se centraba
   sola en el medio—. `.plat-wrap`, que es la regla del resto del dashboard,
   es `max-width:none;width:100%`: acá igual. */
#v2-app .v2-band-in{max-width:none;margin:0;padding:42px 52px 66px}
#v2-app.con-caso .v2-band-in{padding:42px 22px 66px 52px}
@media (max-width:1024px){
  #plat-partners.on, #plat-reglas.on{padding:28px 24px 40px}
  #v2-app .v2-band-in{padding:28px 24px 40px}
  #v2-app.con-caso .v2-band-in{padding:28px 14px 40px 24px}
}

/* ══════════════════════════════════════════════════════════════════════
   LAS TARJETAS DEL PANEL — `docs/inspiracion/Problemas.png`
   Seis bloques chicos, cada uno con su ícono en un cuadrito, su título y su
   cuerpo. Reemplazan a las cinco preguntas numeradas con medidor de pasos,
   que eran un documento para estudiar y no un tablero para actuar.
   ══════════════════════════════════════════════════════════════════════ */
.v2-doc2{display:flex;flex-direction:column;gap:16px;padding:20px 26px 26px}
:where(#v2-app) .v2-pc{background:var(--n0);border:1px solid var(--n200);
  border-radius:var(--r14);padding:15px 16px 16px}
.v2-pc-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.v2-pc-i{width:30px;height:30px;flex:0 0 auto;border-radius:9px;display:flex;
  align-items:center;justify-content:center;background:var(--t50);color:var(--t700)}
:where(#v2-app) .v2-pc-h h3{margin:0;font-size:var(--f3);font-weight:650;
  letter-spacing:-.2px;color:var(--i1);flex:1 1 auto;min-width:0}
.v2-pc-r{flex:0 0 auto}
:where(#v2-app) .v2-pc-lk{background:none;border:0;padding:0;cursor:pointer;
  font-size:var(--f1);font-weight:600;color:var(--t700);text-decoration:underline;
  text-underline-offset:2px}

/* ── ¿qué está pasando? ── */
.v2-pc-tx p{margin:0;font-size:var(--f3);line-height:1.6;color:var(--i2)}
.v2-pc-tx p.sec{margin-top:10px;color:var(--i3);font-size:var(--f2)}
/* «Ver evidencias» dejó de ser el pie de una miniatura: ahora es una acción de
   la tarjeta, alineada a la izquierda y del ancho de su texto. */
:where(#v2-app) .v2-pc-evb{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  padding:8px 14px;border:1px solid var(--t200);border-radius:999px;
  background:var(--t50);color:var(--t800);font-size:var(--f1);font-weight:650;cursor:pointer}
@media (hover:hover){ :where(#v2-app) .v2-pc-evb:hover{background:var(--t100);border-color:var(--t400)} }

/* ── responsables / vinculados ── */
.v2-pc-act{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.v2-pc-ac{display:flex;align-items:center;gap:9px;min-width:0;padding:8px 10px;
  border:1px solid var(--n100);border-radius:var(--r10);background:var(--n25)}
.v2-pc-ac.falta{border-style:dashed;border-color:var(--op-bd);background:var(--op-bg)}
.v2-pc-av{width:28px;height:28px;flex:0 0 auto;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:var(--t100);color:var(--t800);
  font-size:var(--f0);font-weight:700}
.v2-pc-acx{display:flex;flex-direction:column;gap:1px;min-width:0}
.v2-pc-acx b{font-size:var(--f1);font-weight:650;color:var(--i1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-pc-acx em{font-style:normal;font-size:var(--f0);font-weight:500;color:var(--i3)}
.v2-pc-vacio{font-size:var(--f2);color:var(--i3);line-height:1.55}

/* ── qué hacer ── */
.v2-pc-pasos{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.v2-pc-pasos li{display:flex;align-items:flex-start;gap:10px;min-width:0}
.v2-pc-pasos li>span{width:22px;height:22px;flex:0 0 auto;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:var(--t600);color:#fff;
  font-size:var(--f0);font-weight:700;margin-top:1px}
.v2-pc-pasos li>div{font-size:var(--f2);line-height:1.5;color:var(--i2);min-width:0}

/* ── el análisis completo, plegado al pie ── */
.v2-pc-hondo{padding:12px 14px}
.v2-doc-hondo{display:flex;flex-direction:column;gap:0;padding:0}

/* los recursos que Znapp pone en la mano: no son pasos, así que no se numeran */
.v2-pc-rec{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:14px;
  padding-top:13px;border-top:1px solid var(--n100)}
.v2-pc-rec-k{font-size:var(--f0);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--i3);margin-right:2px}
.v2-pc-rec-i{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  background:var(--n50);border:1px solid var(--n100);color:var(--i2);
  font-size:var(--f0);font-weight:600}
.v2-pc-rec-i svg{color:var(--i3);flex:0 0 auto}

/* y el resto de los bloques heredados dejan de traer el padding de banda */
.v2-doc2>.v2-sec{padding:0;background:none}
.v2-doc2>.v2-sec>.v2-in{max-width:none;padding:0}

/* ══ EN INTELIGENCIA NO HAY SEGUNDA BARRA ══
   `.v2-cab` es la cabecera del informe: logo del cliente, «Todas tus campañas»
   y el chip de reglas. Adentro de Alertas queda como un SEGUNDO topbar
   debajo del de la plataforma, diciendo dos veces de qué cuenta se trata —el
   topbar de arriba ya dice «Playadito · Cuenta de cliente»— y el chip duplica
   a «Reglas», que ahora es un ítem del sidebar. Son ~62px de alto por pantalla
   a cambio de nada. Sigue viva en el informe suelto, que no tiene topbar. */
#plat-problemas .v2-cab, #plat-partners .v2-cab, #plat-reglas .v2-cab{display:none}

/* el selector de estado, ahora en el encabezado del panel */
.v2-pan-est{display:inline-flex;align-items:center;gap:7px}
.v2-pan-est .v2-accion-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
:where(#v2-app) .v2-pan-est .v2-sel{height:30px;font-size:var(--f1);padding:0 9px}

/* ══ MÁS INFORMACIÓN EN EL PRIMER PANTALLAZO ══
   Dos recortes, los dos contra `docs/inspiracion/Problemas.png`.
   1. El rótulo «GRAVEDAD» no existe en la referencia y se llevaba ~85px del
      renglón de chips: con el caso abierto el último chip quedaba cortado por
      la mitad. Los chips ya dicen qué son —traen su punto de color y la
      palabra— así que el rótulo describía lo obvio y costaba un chip.
   2. Los contadores bajan de 76 a 64px de alto, que es lo que miden en la
      imagen. Son seis números de dos dígitos: no necesitan más. */
/* el alto de los contadores se declara UNA vez, arriba, con el resto de lo
   que cambia cuando hay un caso abierto: escribirlo dos veces es como
   llegaron los 241 selectores repisados que arrastra este archivo. */
#v2-app.con-caso .v2-band .v2-chips-k{display:none}

/* la puerta a Reglas adentro de Alertas: es configuración, así que se lee como
   un control de la barra y no como una acción principal. */
/* enfrentada al titulo, pegada al borde derecho y alineada con el h1 */
.v2-band-reglas{flex:0 0 auto;display:inline-flex;margin-left:auto;align-self:center}
.v2-band-reglas .v2-ctxb{height:38px}
@media (max-width:1100px){ .v2-band-reglas .v2-ctxb .de{display:none} }

/* LA FILA DE FILTROS NO SE PARTE. Con la puerta a Reglas puesta, «Más
   comercios» caía a un segundo renglón y empujaba la lista 44px: una fila
   menos. El buscador es lo único elástico de la fila, así que es lo que cede. */
#v2-app.con-caso .v2-band .v2-band-fil{flex-wrap:nowrap;gap:8px;margin-bottom:14px}
#v2-app.con-caso .v2-band .v2-band-fil .v2-band-q{flex:1 1 auto;min-width:0}
#v2-app.con-caso .v2-band .v2-band-fil .v2-band-ord select{max-width:128px}

/* ══ EL AIRE ENTRE LAS PIEZAS DE LA CABECERA ══
   Los contadores, el buscador, los chips y la lista venían con 10-14px entre
   sí: cuatro bloques distintos pegados se leen como uno solo y largo. Con el
   padding de sección puesto sobra alto para separarlos de verdad, que es lo
   que hace que se entienda dónde termina cada cosa. */
/* el aire de abajo de los chips se declara una sola vez, arriba, con el resto
   de la fila de herramientas: aca lo pisaba entero. */

/* ══ DOS TARJETAS HOMBRO CON HOMBRO ══
   «Producto / Campaña» y «Responsables» son dos fichas cortas: apiladas dejaban
   media pantalla de aire a la derecha de cada una. En el cajón angosto vuelven
   a apilarse solas. */
.v2-pc-par{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.v2-pc-par>.v2-pc{margin:0}
@media (max-width:900px){ .v2-pc-par{grid-template-columns:1fr} }

/* ── qué está pasando: la prosa a la izquierda, el mapa a la derecha ── */
.v2-pc-pasa-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:16px;
  align-items:start}
@media (max-width:820px){ .v2-pc-pasa-g{grid-template-columns:1fr} }
.v2-pc-pasa-x{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.v2-pc-zona{display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:var(--f2);font-weight:450;color:var(--i3)}
.v2-pc-zona b{font-weight:650;color:var(--i2)}
.v2-pc-zona svg{flex:0 0 auto;color:var(--n400)}
/* EL MAPA DENTRO DE LA TARJETA MIDE MENOS QUE EL DEL ANÁLISIS. Acá es la
   respuesta a «dónde», de un vistazo; allá abajo es la pieza que se recorre. */
.v2-pc-pasa-g .v2-mapw.mini .v2-map{height:200px;min-height:200px}
.v2-pc-pasa-g .v2-mapw{border-color:var(--n100)}
/* A pantalla completa la tarjeta mide el doble de ancho y el mapa seguia en
   200px: media tarjeta quedaba en blanco debajo del parrafo. */
#v2-app.pan-ancho .v2-pc-pasa-g .v2-mapw.mini .v2-map{height:250px;min-height:250px}
@media (max-width:820px){ .v2-pc-pasa-g .v2-mapw.mini .v2-map{height:170px;min-height:170px} }

/* ── producto / campaña ── */
.v2-pc-prod{display:flex;align-items:flex-start;gap:13px;min-width:0}
.v2-pc-prod-i{width:58px;height:72px;flex:0 0 auto;border-radius:var(--r10);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--n50);border:1px solid var(--n100);color:var(--i3)}
.v2-pc-prod-i img{width:100%;height:100%;object-fit:cover;display:block}
.v2-pc-prod-x{display:flex;flex-direction:column;gap:2px;min-width:0}
.v2-pc-prod-x b{font-size:var(--f3);font-weight:650;letter-spacing:-.2px;color:var(--i1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-pc-prod-x span{font-size:var(--f2);font-weight:450;color:var(--i3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-pc-prod-x em{font-style:normal;margin-top:7px;font-size:var(--f2);font-weight:600;
  color:var(--i2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-pc-prod-x .fec{display:inline-flex;align-items:center;gap:6px;font-size:var(--f1)}
.v2-pc-prod-x .fec svg{flex:0 0 auto;color:var(--n400)}

/* ── responsables: la puerta para asignar y la escalera ── */
:where(#v2-app) .v2-pc-asig{display:inline-flex;align-items:center;height:30px;padding:0 15px;
  font-size:var(--f2);font-weight:650;color:var(--t700);cursor:pointer;
  background:var(--n0);border:1px solid var(--t300);border-radius:var(--r8);
  transition:background var(--tr-14) ease,border-color var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-pc-asig:hover{background:var(--t50);
  border-color:var(--t600)} }
:where(#v2-app) .v2-pc-asig:active{transform:scale(.97)}
.v2-pc-vinc{margin-top:14px;padding-top:13px;border-top:1px solid var(--n100)}
.v2-pc-vinc-k{display:block;margin-bottom:9px;font-size:var(--f2);font-weight:700;
  letter-spacing:-.1px;color:var(--i1)}
.v2-pc-vinc-l{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.v2-pc-vinc-i{display:inline-flex;align-items:center;gap:7px;font-size:var(--f2);
  font-weight:450;color:var(--i2)}
.v2-pc-vinc-i svg{flex:0 0 auto;color:var(--n400)}

/* ══ PRÓXIMO PASO ══
   La única tarjeta teal del cajón, y es la que termina en el botón. Era «Qué
   hacer»: tres pasos numerados, una tira de recursos, una caja de acción
   recomendada y un desplegable — cuatro bloques para un botón. */
:where(#v2-app) .v2-pc.pc-prox{background:linear-gradient(160deg,var(--t50) 0%,#f4fcfa 58%,var(--n0) 100%);
  border-color:var(--t200)}
.pc-prox .v2-pc-i{background:var(--t100);color:var(--t700)}
.v2-pc-prox-b{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center}
@media (max-width:820px){ .v2-pc-prox-b{grid-template-columns:1fr;gap:14px} }
.v2-pc-prox-x{min-width:0}
.v2-pc-prox-x>b{display:block;font-size:var(--f3);font-weight:650;letter-spacing:-.2px;
  color:var(--t900);line-height:1.35}
.v2-pc-prox-x>b em{font-style:normal;font-weight:750}
.v2-pc-prox-x>p{margin:6px 0 0;font-size:var(--f2);font-weight:450;line-height:1.5;
  color:var(--i2);max-width:60ch}
:where(#v2-app) .v2-pc-prox-cta{display:inline-flex;align-items:center;justify-content:center;
  gap:9px;margin-top:14px;width:100%;max-width:340px;height:44px;padding:0 22px;cursor:pointer;
  font-size:var(--f3);font-weight:700;letter-spacing:-.2px;color:#fff;
  background:var(--t700);border:1px solid var(--t700);border-radius:var(--r10);
  box-shadow:var(--sh-rest);
  transition:background var(--tr-14) ease,transform var(--tr-14) var(--v2-ez)}
@media (hover:hover){ :where(#v2-app) .v2-pc-prox-cta:not(:disabled):hover{background:var(--t800);
  border-color:var(--t800)} }
:where(#v2-app) .v2-pc-prox-cta:not(:disabled):active{transform:scale(.985)}
:where(#v2-app) .v2-pc-prox-cta:disabled{background:var(--n200);border-color:var(--n200);
  color:var(--i3);cursor:default;box-shadow:none}
.v2-pc-prox-r{display:flex;flex-direction:column;gap:11px;flex:0 0 auto;
  padding-left:20px;border-left:1px solid var(--t200)}
@media (max-width:820px){ .v2-pc-prox-r{flex-direction:row;gap:20px;padding-left:0;
  border-left:0;border-top:1px solid var(--t200);padding-top:12px} }
.v2-pc-prox-d{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:var(--f2);font-weight:450;color:var(--i2)}
.v2-pc-prox-d b{font-weight:750;color:var(--i1);font-variant-numeric:tabular-nums}
.v2-pc-prox-d svg{flex:0 0 auto;color:var(--t600)}
.v2-pc-prox-mas{margin-top:15px;padding-top:13px;border-top:1px solid var(--t200)}

/* ══ EVIDENCIA ══
   Era un renglón plegado con miniaturas de 28px. Es la prueba del caso: va a
   la vista, y en el tamaño en que una góndola se reconoce. */
.v2-pc-ev{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
:where(#v2-app) .v2-pc-evi{position:relative;aspect-ratio:4/3;padding:0;overflow:hidden;
  border-radius:var(--r10);border:1px solid var(--n100);background:var(--n50);cursor:pointer;
  transition:border-color var(--tr-14) ease,transform var(--tr-16) var(--v2-ez)}
.v2-pc-evi img{width:100%;height:100%;object-fit:cover;display:block}
@media (hover:hover){ :where(#v2-app) .v2-pc-evi:hover{border-color:var(--t400);
  transform:translateY(-2px)} }
@media (prefers-reduced-motion:reduce){ :where(#v2-app) .v2-pc-evi{transition:none}
  :where(#v2-app) .v2-pc-evi:hover{transform:none} }
:where(#v2-app) .v2-pc-evi.mas{display:flex;align-items:center;justify-content:center;
  background:var(--i1);border-color:var(--i1);color:#fff;
  font-size:var(--f3);font-weight:700;font-variant-numeric:tabular-nums}
@media (hover:hover){ :where(#v2-app) .v2-pc-evi.mas:hover{background:#16292c} }

/* ══ CADA TARJETA CON SU COLOR ══
   Las cuatro traían el mismo cuadrito teal, así que el ícono no distinguía
   nada: era decoración repetida. Ahora el color dice de qué habla el bloque —
   el hallazgo en teal, la gente en violeta, la acción en ámbar, la ficha en
   gris— y se encuentran de un vistazo al scrollear. */
.v2-pc.pc-pasa .v2-pc-i{background:var(--t50);color:var(--t700)}
.v2-pc.pc-resp .v2-pc-i{background:#f3f0fb;color:#5b4b9e}
.v2-pc.pc-info .v2-pc-i{background:var(--n50);color:var(--i2)}
.v2-pc.pc-prod .v2-pc-i{background:var(--v2-navy-bg);color:var(--v2-navy)}
.v2-pc.pc-ev .v2-pc-i{background:var(--op-bg);color:var(--op-t)}

/* el aire del cajón —26px a los lados— se declara arriba, con el resto de
   `.v2-doc2`: el panel llega al borde, así que el respiro va adentro. */

/* ══ EL ESTADO DE ERROR DE INTELIGENCIA ══
   Centrado en la sección y con su propio aire: el padding de Alertas vive en
   la lista, y cuando la lista no llega el cartel quedaba pegado al borde. */
.int-err{display:flex;align-items:center;justify-content:center;flex:1;
  min-height:340px;padding:42px 52px 66px}
.int-err-c{max-width:420px;text-align:center;display:flex;flex-direction:column;
  align-items:center}
.int-err-i{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--op-bg);color:var(--op-t);margin-bottom:18px}
.int-err-c b{font-size:var(--f4);font-weight:700;letter-spacing:-.3px;color:var(--i1)}
.int-err-c p{margin:9px 0 20px;font-size:var(--f2);line-height:1.55;color:var(--i2)}
:where(#v2-app) .int-err-c>.v2-ib,.int-err-c>.v2-ib{height:42px;padding:0 20px;
  font-size:var(--f2);font-weight:700;background:var(--t700);border-color:var(--t700);color:#fff}
.int-err-d{margin-top:16px;font-size:var(--f0);color:var(--i3);word-break:break-word}

/* ══ REGLAS Y PARTNERS USAN EL ANCHO, IGUAL QUE ALERTAS ══
   Los tres wrappers venían de cuando el v2 era un documento suelto:
   `max-width:--int-wrap` (1180px) y `margin:0 auto`. A 1920 eso dejaba 204px
   muertos a cada lado y la sección se leía centrada en el medio, que es lo
   mismo que ya se corrigió en Alertas. Y encima sumaban 26px de padding propio
   sobre los 52 de la sección: 78 contra los 72 del resto.
   El ancho lo da la sección; el wrapper sólo ordena. */
#plat-reglas .v2-rg, #plat-partners .v2-rg,
#plat-reglas .v2-pt-w, #plat-partners .v2-pt-w{
  max-width:none;margin:0;padding-left:0;padding-right:0;width:100%}

/* ══ LA PUERTA A REGLAS ══
   EL UNICO CONTROL LLENO DE ESTA PANTALLA, y es a proposito: es la unica
   manera de llegar a Reglas, y con borde de contorno a la misma altura que
   «Filtros» se leia como un tercer recorte de la lista. Tinta solida, dos
   renglones -destino arriba, estado abajo- y mas alto que sus vecinos: las
   tres cosas juntas son lo que hace que se toque.
   EL ESTADO VOLVIO A LA VISTA. La version compacta lo habia escondido en un
   `title`, y lo que ahi dice —cuantas reglas estan en borrador— es la razon
   por la que hay alertas que no llegan a la lista. */
/* mas cuerpo: 56px contra los 40 de los controles de abajo. La diferencia de
   altura es la que hace que no se lea como uno mas de la fila. */
:where(#v2-app) .v2-puerta{display:inline-flex;align-items:center;gap:13px;height:56px;
  padding:0 18px 0 15px;flex:0 0 auto;cursor:pointer;text-align:left;
  color:#fff;background:var(--t700);border:1px solid var(--t700);border-radius:var(--r10);
  box-shadow:0 1px 2px rgba(4,51,44,.16),0 8px 20px rgba(13,156,139,.24);
  transition:background var(--tr-14) ease,border-color var(--tr-14) ease,
    box-shadow var(--tr-16) var(--v2-ez),transform var(--tr-14) var(--v2-ez)}
@media (hover:hover){ :where(#v2-app) .v2-puerta:hover{background:var(--t800);
  border-color:var(--t800);box-shadow:0 1px 2px rgba(4,51,44,.18),0 12px 26px rgba(13,156,139,.3)} }
:where(#v2-app) .v2-puerta:active{transform:scale(.975)}
@media (prefers-reduced-motion:reduce){ /* EL GESTO ESTABA APAGADO. `transition:none` y `transform:none` mataban el
   empujoncito de la flecha y el hundido al apretar, que son justamente las dos
   cosas que le dicen al ojo «esto te lleva a otro lado» en vez de «esto filtra
   lo que ya estas viendo». Vuelven. */
:where(#v2-app) .v2-puerta{transition:background var(--tr-14) ease,
  box-shadow var(--tr-14) ease,transform var(--tr-14) ease}
  :where(#v2-app) .v2-puerta:active{transform:translateY(1px)} }
.v2-puerta-i{flex:0 0 auto;width:36px;height:36px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.16);color:#fff}
.v2-puerta-x{display:flex;flex-direction:column;gap:1px;min-width:0}
.v2-puerta-x b{font-size:var(--f3);font-weight:700;letter-spacing:-.2px;line-height:1.15}
.v2-puerta-x em{font-style:normal;font-size:var(--f1);font-weight:550;
  color:rgba(255,255,255,.76);line-height:1.2;white-space:nowrap}
.v2-puerta-ch{flex:0 0 auto;display:flex;color:rgba(255,255,255,.72);
  transition:transform var(--tr-14) ease}
@media (hover:hover){ :where(#v2-app) .v2-puerta:hover .v2-puerta-ch{transform:translateX(2px)} }
/* CON UN BORRADOR NO SE REPINTA EL BOTON ENTERO, se le pone un punto ambar.
   Tenirlo de ambar era correcto como senal y equivocado como jerarquia: el
   teal solido es el lenguaje de «esta es LA accion» en toda la app, y como
   casi siempre hay algun borrador el unico control lleno de la pantalla iba a
   pasarse la vida de otro color. El punto dice lo mismo sin sacarle la
   identidad, y quien cuenta el problema completo es la tira de retencion. */
:where(#v2-app) .v2-puerta.con-b .v2-puerta-x b::after{content:"";display:inline-block;
  width:7px;height:7px;border-radius:50%;background:#ffc24d;margin-left:7px;
  vertical-align:middle;box-shadow:0 0 0 3px rgba(255,194,77,.25)}
:where(#v2-app) .v2-puerta.con-b .v2-puerta-x em{color:#ffdca6}
/* sin NINGUNA regla configurada la pantalla no tiene de donde sacar alertas:
   ahi si el boton entero cambia de color, porque no es un pendiente, es la
   unica cosa que hay para hacer. */
:where(#v2-app) .v2-puerta.vacio{background:var(--op-t);border-color:var(--op-t);
  box-shadow:0 1px 2px rgba(70,44,3,.18),0 8px 20px rgba(143,90,0,.24)}
@media (hover:hover){ :where(#v2-app) .v2-puerta.vacio:hover{background:#7a4b06;
  border-color:#7a4b06} }

/* ══ EL RIEL SE ALINEA CON LA COLUMNA QUE ACOMPAÑA ══
   `align-items:start` dejaba el riel con su alto natural y anclado arriba; con
   la cabecera fuera del split, lo que hace falta es que empiece y termine donde
   la columna de al lado. `stretch` le da el alto de la fila y el `sticky` de
   adentro sigue funcionando porque la caja ahora es más alta que él. */
.v2-rg-top{display:flex;flex-direction:column;gap:16px;margin-bottom:16px}
#plat-reglas .v2-rg-split2, #plat-partners .v2-rg-split2{align-items:stretch}

/* «Abrir el setup» se va al pie de su columna. El riel de la derecha mide 637px
   de contenido contra los 570 de las tarjetas, así que con sólo estirar la fila
   el riel sobresalía 68px por debajo del último bloque. Con `margin-top:auto`
   el pie baja hasta el borde y las dos columnas terminan en la misma línea. */
#plat-reglas .v2-rg-main .v2-rg-tip{margin-top:auto}
#plat-reglas .v2-rg-lado-c, #plat-partners .v2-rg-lado-c{height:100%}