/* ============================================================================ molde.css - EL VOCABULARIO `py*`: el molde de pagina del sitio. Salio de nicho.css el 2026-08-15 (U16 · D2). No es CSS «del nicho»: es la piel de la pagina de proyecto (Vicuña) que el resto del sitio adopta, y vivia en la hoja equivocada — por eso la portada, las 5 provincias inversor y las institucionales NO PODIAN convertirse: no cargan nicho.css, y todo el vocabulario estaba adentro. Se carga en TODA pagina de piel OSCURA, entre tokens.css y la hoja que especializa. Orden de cascada: fonts -> tokens -> MOLDE -> [nicho|oficio] -> skin -> cierre. Re-derivar el corte: python analisis/frontend/piel/u16_split.py ============================================================================ */ .pyq-v .af-p+.af-p{margin-top:8px} /* (el `.nicho-vec{grid-template-columns:1fr}` de este bloque se fue con U16·A3: los vecinos ya no son una grilla de tarjetas, y su apilado en movil vive con `.pyi-vec` en el @media de 640) */ @media(max-width:680px){.pyq{grid-template-columns:1fr;gap:10px;padding:20px 0}} /* ===== BARRA DE CONTEO y ESCALA — pagina de proyecto (UNIDAD 4, paso 3A: el dato como grafico) ==== Medido el 09-ago sobre el sitio entero: 178 paginas, 1,02 M de palabras, 2.725 parrafos de 60+ palabras y ~160 graficos (17 a 1). La causa no es de diseno sino de DATO: casi todo esta guardado como prosa, asi que no hay numero que dibujar. Estas dos piezas se apoyan en los pocos campos TIPADOS que si hay —los enum `riesgos.tipo` y `promesas_verificables.estado` (74% y 92% de los 27) y el numerico `inversion_usd.valor` (88%)—, y reusan la barra .gc-bar del grafico de composicion. */ .py-cta{margin:0 0 16px} /* `.py-esc` (la barra de escala sobre .gc-bar) se retiro el 2026-08-11: la escala pasa a la pieza `pyr-*` del Resumen, con su propia barra. `.py-cta` sigue usando .gc-bar y se queda. */ /* U16·B6 (2026-08-16): `min-height`, no `height`. La barra tiene que poder CRECER — desde que el rotulo envuelve en vez de truncarse, un rotulo largo («Ministerio de Minería», 3 segmentos) toma 2 lineas y con alto fijo la cifra de abajo se cortaba por el `overflow:hidden` de la barra. ⚠️ Este selector (0,2,0) le gana por especificidad a `.gc-bar` de `nicho.css` y de `cierre.css`, asi que arreglarlo alla no alcanzaba: el corte vertical sobrevivia justo aca. */ .py-cta .gc-bar{min-height:42px} .py-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px} .py-tot{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase; color:var(--dim);margin-left:2px} /* ===== LISTA-TITULAR (idea del usuario, 2026-08-09) ============================================== Con la tarjeta abierta, para saber que dicen los 11 riesgos hay que leer 11 parrafos y NUNCA se los ve juntos. Cerrados entran los 11 en una pantalla: se barre la columna de etiquetas con la vista y se abre el que importa. La fila cerrada ya informa (etiqueta + titular + sello), asi que plegar no esconde. Grid de 4 columnas (agrega el chevron, 13a vuelta) para que las etiquetas y los sellos ALINEEN entre filas: el ojo baja por una columna recta, que es lo que hace escaneable una lista. 13a vuelta (2026-08-13): (1) CHEVRON — antes esta fila solo cambiaba de color al abrir, sin icono, mientras otras filas de la pagina (pyi-d/pyd) SI rotaban +/x; el usuario cazo la inconsistencia mirando las dos side by side. (2) LINEA SECUNDARIA opcional (`.py-li-sub`) bajo el titular — el "lo activa" de riesgos volvio, esta vez SIN truncar: antes era columna de ancho fijo (150px) con elipsis y quedaba ilegible ("La [algo]..."); ahora corre a lo ancho de la fila y envuelve como texto normal. */ .py-lista{border-top:1px solid var(--bd)} .py-li{border-bottom:1px solid var(--bd)} .py-li-h{list-style:none;display:grid;grid-template-columns:104px minmax(0,1fr) auto 16px;gap:14px; align-items:baseline;padding:13px 4px;cursor:pointer;transition:.13s} .py-li-h::-webkit-details-marker{display:none} .py-li-h:hover{background:rgba(var(--ac-rgb),.05)} .py-li-e{font-family:var(--mono);font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--ac);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .py-li-tw{display:flex;flex-direction:column;gap:4px;min-width:0} .py-li-t{font-size:15px;line-height:1.45;color:var(--tx);font-weight:600} .py-li[open] .py-li-t{color:var(--ac)} .py-li-sub{font-family:var(--mono);font-size:var(--fs-micro);line-height:1.55;letter-spacing:.02em; color:var(--mut);text-wrap:pretty} .py-li-s{white-space:nowrap} .py-li-chev{display:inline-block;width:11px;text-align:center;font-size:14px;line-height:1; color:var(--ac);transition:transform .2s ease;justify-self:end} .py-li[open] .py-li-chev{transform:rotate(45deg)} .py-li-b{padding:2px 4px 18px 122px} @media(max-width:640px){ .py-li-h{grid-template-columns:minmax(0,1fr) 16px;gap:5px 12px} .py-li-e{grid-column:1/-1} .py-li-b{padding-left:4px} } /* V2 VISUAL (2026-08-09) — la decision, que sigue rigiendo aunque sus reglas ya no vivan aca: el numero es el protagonista, menos caja y mas aire. Se midieron tres defectos: (1) cada tarjeta tenia un numero -167 km, 3%, 2030- y todos vivian en mono de 12px, asi que el unico con presencia en la pagina era el del hero; (2) `panel > ck-ind > lineas` eran TRES bordes anidados con el mismo radio y el mismo azul; (3) el ritmo era plano de arriba a abajo. Las reglas que este bloque encabezaba (`.py-mag*`) se fueron en U8 (2026-08-16) por no emitirse en ninguna de las 208 paginas; la cura de (2) vive en `.ck-ind`, en nicho.css. */ /* ============================================================================ PORTADA DEL PROYECTO RIGI (`pyh-*`) — port de la 1b «sala de datos» (D18/D19, 2026-08-11; proyecto de Claude Design «Portadas para Vicuña»). POR QUE CLASES PROPIAS Y NO `.nicho-hero`: hasta hoy el hero de proyecto y el de nicho eran LA MISMA pieza, y esa es la razon MEDIDA de que Vicuna (USD 9.700 M) se viera igual que un nicho de USD 18-35 M/ano — titulo 35px, cifra 30px, y el hero de proyecto mas BAJO que el de nicho (464 contra 586 px). `.nicho-hero`/`.nh-tam-v` tocan 104 paginas: separar es la cura, no el derrame. QUE CAMBIA RESPECTO DE LA MAQUETA (que se hizo contra una captura de Vicuna): · 1280x768 fijo + position:absolute + cero media queries -> flujo normal y `clamp()`. Portar era REHACER el layout, no copiar CSS. · tipografia Archivo (Google Fonts) -> IBM Plex local, que ya esta en el bundle y es la misma mono con la que 1b construye su cifra. · estilos inline -> reglas de clase aca (`pipeline/assets/` ES LA FUENTE: `assets/` lo pisa el build). · el TICKER animado de la maqueta queda FUERA: marquee infinito que repite lo que la propia pagina dice dos lineas mas abajo. ========================================================================== */ .pyh{position:relative;overflow:hidden;margin:0 0 30px;padding:0 0 26px; border-bottom:1px solid var(--bd)} /* la grilla de fondo es lo que da el aire «sala de datos». Estatica y barata. */ .pyh::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:linear-gradient(var(--grid-hero) 1px,transparent 1px), linear-gradient(90deg,var(--grid-hero) 1px,transparent 1px); background-size:76px 76px; /* la mascara ATENUA hacia abajo, no borra: a .038 y muriendo en 0 la cuadricula se perdia y el hero volvia a ser fondo plano en su mitad inferior. Se ve en toda la pieza, mas tenue detras de la prosa que arriba de la cifra. */ -webkit-mask-image:linear-gradient(180deg,var(--bg) 0%,rgba(0,0,0,.55) 66%,rgba(0,0,0,.3) 100%); mask-image:linear-gradient(180deg,var(--bg) 0%,rgba(0,0,0,.55) 66%,rgba(0,0,0,.3) 100%)} /* el GLOW de la maqueta: el halo del acento que baña la esquina superior izquierda. Es lo que separa la «sala de datos» de una tabla sobre fondo plano, y va con el celeste del sitio (--ac-rgb) en vez del azul de la maqueta. Respira muy lento; se apaga con reduced-motion. */ .pyh::after{content:"";position:absolute;left:-8%;top:-34%;width:70%;height:92%; pointer-events:none;z-index:0;border-radius:50%;filter:blur(10px); background:radial-gradient(circle,rgba(var(--ac-rgb),.26) 0%,rgba(var(--ac-rgb),0) 68%); animation:pyh-breathe 11s ease-in-out infinite} @keyframes pyh-breathe{0%,100%{opacity:.34;transform:scale(1)}50%{opacity:.62;transform:scale(1.08)}} @media(prefers-reduced-motion:reduce){.pyh::after{animation:none;opacity:.48}} .pyh>*{position:relative;z-index:1} /* barra superior: rubro / provincia · y el estado a la derecha */ .pyh-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:10px 18px;padding:0 0 13px;margin-bottom:26px;border-bottom:1px solid var(--bd)} .pyh-via{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.15em; text-transform:uppercase;color:var(--ac)} .pyh-via .pyh-sep{color:var(--dim);margin:0 7px} /* el estado no se encoge: es lo primero que se chequea al abrir la pagina */ .pyh-est{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px} .pyh-via a{color:var(--ac);text-decoration:none;border-bottom:1px solid rgba(var(--ac-rgb),.32)} .pyh-via a:hover{border-bottom-color:var(--ac)} /* rotulo de la cifra. D19: dice «inversion anunciada», NUNCA «cifra oficial» */ .pyh-rot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between; gap:6px 18px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.22em; text-transform:uppercase;color:var(--dim);margin-bottom:10px} /* LA CIFRA — el corazon de 1b: manda la cifra. 184px fijo -> clamp fluido. */ .pyh-cifra{font-family:var(--mono);font-weight:600;color:var(--ac); font-size:clamp(52px,12.5vw,132px);line-height:1;letter-spacing:-.045em; overflow-wrap:anywhere} .pyh-cifra .pyh-un{font-size:clamp(21px,4.2vw,50px);letter-spacing:0;color:var(--tx); margin-left:clamp(8px,1.4vw,18px);font-weight:500} /* ── U16·A1 (2026-08-15): LA CIFRA DEL NICHO SE MIDE SOLA ────────────────────────────────────── La regla de arriba esta calibrada para un NUMERO PELADO: Vicuña emite «9.700» (+ la unidad en su propio span). El TAM de un nicho es una FRASE — «~USD 650 M - 1.100 M/año» —, con un arco de largo de 13 a 151 caracteres (mediana 20) sobre los 51 nichos, y encima en un contenedor mas angosto (`.page.nicho` topea en 1000 px contra los 1200 de `.page.nicho.proy`). Con 132 px fijos entran ~12,8 caracteres: el TAM MAS CORTO ya no entra. La regla que Vicuña cumple, mirada de cerca, no es «132 px»: es **la cifra llena el ancho** (1.164 px de 1.164 en desktop, 366 de 366 en movil). Eso es lo que se porta — no el numero. Como el largo lo sabe el renderer y la tipografia es MONO (avance constante), la cuenta cierra sola: `ancho_del_contenedor / (caracteres x avance)`. ⚠️ EL AVANCE ESTA MEDIDO, no estimado, y la primera medicion estuvo MAL: el rect del elemento es el del BLOQUE (ocupa el ancho entero) y daba 0,86 em. El valor real sale de un `Range` sobre el contenido — **0,571 em** con `letter-spacing:-.03em` (medido en 4 paginas: 0,571 · 0,571 · 0,570 · 0,580) —, que es coherente con un mono de 0,60 em de base menos el tracking. Se usa **0,58** para dejar margen de redondeo. El medidor es `analisis/frontend/piel/u16_hero.py`. `100cqi` = el ancho del propio hero, asi que la cuenta se re-hace sola en cada ancho de pantalla y no hay escalones (un escalon a los 26 caracteres tiraba la cifra de 43 a 26 px de golpe). ⭐ EL TECHO **NO** ES EL DE VICUÑA (132 px), Y ESA ES LA DIFERENCIA QUE IMPORTA (correccion del usuario, 2026-08-15). En la pagina de PROYECTO la cifra manda sobre el titulo a proposito («1b invierte la jerarquia: manda la CIFRA»): el titular de un proyecto de USD 9.700 M ES el numero. En un NICHO no: **el titular es el nombre, porque el `

` es lo que posiciona** — la pagina se busca por «tubos OCTG Vaca Muerta», no por su TAM. Con el techo de 132 px la jerarquia quedaba decidida por el AZAR: medido, la cifra le ganaba al `

` x2,1 con un TAM de 13 caracteres, x1,1 con 24, y perdia con 36 o mas. O sea que **quien mandaba en la pagina dependia de cuantos caracteres tuviera el string del TAM** — eso no es una jerarquia, es un accidente. El techo baja a **52 px**, debajo del tope del `

` (60 px), y el `min(4,6vw, …)` mantiene la subordinacion tambien en movil, donde el `

` cae a su piso de 28. ⇒ **la cifra es protagonista, el nombre sigue siendo el titular.** ⚠️ EL COEFICIENTE `vw` TAMBIEN TIENE QUE SER MENOR, no alcanza con el techo. El `

` es `clamp(28px, 5.2vw, 60px)`; si la cifra usara 6,1vw le ganaria en el TRAMO FLUIDO (a 768 px: 46,8 contra 39,9) aunque los dos extremos se vean bien. Por eso **4,8vw < 5,2vw**: asi la cifra queda por debajo del titulo en TODO el rango, no en dos puntos medidos. El piso queda en 22 px — a 390 el `

` cae a su propio piso de 28 y la cifra a 22, que es subordinada pero sigue leyendose como cifra. Por debajo la frase larga ya no se lee, y a partir de ahi envuelve, que para una frase es lo correcto. ⚠️ La REFERENCIA no se toca: `container-type` va SOLO en el hero del nicho, y Vicuña conserva su `clamp()` en `vw` con sus 132 px. Si esta clase apareciera en la pagina de proyecto, le bajaria la cifra y le romperia la jerarquia que 1b eligio. */ .pyh-nh{container-type:inline-size} .pyh-nh .pyh-cifra{letter-spacing:-.03em; font-size:clamp(22px,min(4.8vw,calc(100cqi / (var(--nc,20) * .58))),52px)} /* el veredicto conserva su color (refuerza/presiona): es informacion, no decoracion. Lo que se deja atras es la PILDORA de `.nh-ver` (fondo tintado + radio 24), que U15 ya habia declarado propia de los controles y no del contenido. */ .pyh-est.ref{color:var(--ver)} .pyh-est.pre{color:var(--warn)} /* el SELLO va DEBAJO de la cifra (D19: «obviamente debe tener el sello») */ .pyh-sello{margin-top:14px;font-family:var(--mono);font-size:var(--fs-micro); color:var(--dim);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .pyh-hr{height:1px;background:var(--bd2);margin:30px 0 26px} .pyh-t{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.06;color:var(--tx); font-size:clamp(28px,5.2vw,60px);text-wrap:balance} .pyh-lead{margin:20px 0 0;font-size:17px;line-height:1.65;color:var(--mut);max-width:74ch; text-wrap:pretty} /* fila de datos. `auto-fit` en vez de las 4 columnas fijas de la maqueta: el molde se replica x28 y NO todos llenan las mismas celdas — la fila de produccion (cobre/oro/plata) que traia 1b la puede llenar 1 de 28. */ .pyh-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); margin-top:32px;border-top:1px solid var(--bd2)} .pyh-kpi{padding:20px 22px 0 0;border-right:1px solid var(--bd);min-width:0} .pyh-kpi:last-child{border-right:0;padding-right:0} .pyh-kpi+.pyh-kpi{padding-left:22px} .pyh-kpi-k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.18em; text-transform:uppercase;color:var(--dim);margin-bottom:9px} .pyh-kpi-v{font-family:var(--mono);font-size:20px;line-height:1.28;color:var(--tx); overflow-wrap:anywhere} .pyh-kpi-v .pyh-kpi-u{font-size:var(--fs-micro);color:var(--dim);margin-left:7px} .pyh-kpi.ac .pyh-kpi-v{color:var(--ac)} /* EL SELLO DE CADA CELDA (2026-08-11) — subio aca al eliminarse «En que fase esta», que era su casa y era eco de esta misma fila. Misma regla que D19 para la cifra: el sello va pegado a lo que firma. Va debajo del numero y no al lado: al lado empuja la unidad a otra linea. */ /* la NOTA metodologica de la fila: «media de los primeros 25 anos, base 100%». Estaba en un `title=` (invisible en movil, muda para un lector de pantalla) porque se daba por hecho que el texto integro vivia dos bloques abajo. Ese bloque ya no existe: la nota se ve. */ .pyh-nota{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:14px 0 0; font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.04em;color:var(--dim); line-height:1.5} /* el sello COLAPSADO de la fila: cuando las 4 celdas comparten nivel, fecha y fuente, se dice una vez acá en vez de cuatro veces seguidas. Si difieren, vuelve a `.pyh-kpi-s` por celda. */ .pyh-nota-s{flex:0 0 auto} /* ...y ESE camino se emitia sin ninguna regla, o sea sin estilo: lo cazo `lint_clases_css` al publicarse VMOS, el primer proyecto cuyas celdas NO comparten sello (el acto de 2025 firma la capacidad base; el 6-K de YPF, la rampa). Sin regla el sello quedaba pegado al numero y —peor— los cuatro caian a distinta altura, uno detras de cada valor, porque los valores no miden lo mismo. `margin-top:auto` los baja al pie y los alinea entre si, que es como se leen de un vistazo. No es un caso de borde: cualquier proyecto con dos fuentes distintas en la fila entra aca, asi que el molde lo hereda ×N. */ .pyh-kpi{display:flex;flex-direction:column} .pyh-kpi-s{margin-top:auto;padding-top:12px} /* EL COLOR DE LA SUSTANCIA (pedido del usuario, 2026-08-11): la fila de produccion sale con el color del metal, para que se lea de un vistazo QUE produce el proyecto y la pagina tenga personalidad propia. Solo las sustancias con color reconocible; el resto hereda --tx, porque inventarle un color al "gas natural" no comunica nada. El rotulo tambien se tine, mas apagado. */ .pyh-kpi.m-cu .pyh-kpi-v{color:#d98f57} .pyh-kpi.m-au .pyh-kpi-v{color:var(--pro)} .pyh-kpi.m-ag .pyh-kpi-v{color:var(--tx2)} .pyh-kpi.m-cu .pyh-kpi-k{color:#a8703f} .pyh-kpi.m-au .pyh-kpi-k{color:#a8892f} .pyh-kpi.m-ag .pyh-kpi-k{color:var(--tes)} @media(max-width:640px){ .pyh-kpis{grid-template-columns:1fr} /* en una sola columna el borde derecho no separa nada: separa el de arriba */ .pyh-kpi{border-right:0;border-top:1px solid var(--bd);padding:15px 0 0} .pyh-kpi:first-child{border-top:0} .pyh-kpi+.pyh-kpi{padding-left:0} .pyh-lead{font-size:16px} } /* ========================================================================== RESUMEN DEL PROYECTO RIGI (`pyr-*`) — port de la 2a «resumen reglado» (2026-08-11; mismo proyecto de Claude Design, archivo `Portada Vicuña.dc.html`). QUE ES: el segundo elemento de la pagina. NO trae contenido nuevo — los seis elementos del 2a ya los emitia `render_proyecto` (barra de escala, fila de etapa, los 4 saltos, compartir, leyenda de sellos). Lo que cambia es que dejan de ser cinco bloques sueltos con el peso visual de una seccion mas y pasan a UNA pieza reglada, en el lenguaje que la portada 1b ya instalo: grilla de fondo, mono, cifra grande y separadores en vez de tarjetas. POR QUE CLASES PROPIAS Y NO `gc-bar`/`nn-row`: las dos viven en 65 y en 104 paginas. Es la misma leccion del hero (`pyh-*`): la pieza compartida es la razon por la que el resumen de un proyecto se veia igual que una lista de nicho. Separar es la cura, no el derrame — cero paginas de nicho afectadas. QUE CAMBIA RESPECTO DE LA MAQUETA: · 1280 fijo + inline styles -> flujo normal, `clamp()` y una media query. · la maqueta rotula el 2º segmento «resto» y le pone el TOTAL (heredo el defecto que la pagina ya publicaba) y de ahi deduce un total de 101.276 M que no existe en el repo. Aca los tres numeros CIERRAN: 9.700 + 81.876 = 91.576 (decision del usuario, 11-ago). · sus textos son de maqueta («ACHILLES», «7 conceptos», «verif 30-06-2026»): no se copia ninguno. Cada rotulo, conteo y fecha sale de `data/`. ========================================================================== */ .pyr{position:relative;overflow:hidden;margin:0 0 30px;padding:34px 30px 30px; background:var(--panel2);border:1px solid var(--bd)} /* la misma cuadricula del hero, un punto mas tenue: aca hay texto de lectura encima (los titulos del indice), no una cifra de 132px. */ .pyr::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:linear-gradient(var(--grid-res) 1px,transparent 1px), linear-gradient(90deg,var(--grid-res) 1px,transparent 1px); background-size:76px 76px; -webkit-mask-image:linear-gradient(180deg,var(--bg) 0%,rgba(0,0,0,.4) 62%,rgba(0,0,0,.16) 100%); mask-image:linear-gradient(180deg,var(--bg) 0%,rgba(0,0,0,.4) 62%,rgba(0,0,0,.16) 100%)} .pyr>*{position:relative;z-index:1} /* rotulo: el guion verde + la palabra. Es el unico rotulo de la pagina que no abre una seccion sino que la anuncia entera. */ .pyr-rot{display:flex;align-items:center;gap:13px;margin:0 0 30px} .pyr-rot i{flex:0 0 auto;width:32px;height:1px;background:var(--ok)} .pyr-rot span{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.24em; text-transform:uppercase;color:var(--tx);font-weight:500} /* ---- peso en la cartera: cabecera + barra de dos segmentos ---- */ .pyr-peso{display:flex;flex-direction:column;gap:14px;margin-bottom:32px} .pyr-peso-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between; gap:6px 16px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.18em; text-transform:uppercase;color:var(--dim)} /* EL TOTAL DEL GRUPO manda en la cabecera (pedido del usuario, 2026-08-11: «debería verse más y tener un color verde que destaque, es importante»). Es la cifra que da la escala de todo el bloque, y salía en el mismo gris de 11,5px que su propio rótulo. Verde `--ok` y ~2× el rótulo. ⚠️ El verde acá NO es el del sello: el sello lleva su punto y su forma de badge, este es texto mono suelto en la cabecera de una barra. Son dos lecturas distintas y no se confunden. */ .pyr-peso-t{font-size:clamp(17px,2.3vw,23px);letter-spacing:-.01em;color:var(--ok);font-weight:600; text-transform:none} .pyr-bar{display:flex;align-items:stretch;min-height:92px;border:1px solid var(--bd2)} .pyr-seg{display:flex;flex-direction:column;justify-content:center;gap:4px; padding:14px 20px;min-width:0} .pyr-seg+.pyr-seg{border-left:1px solid var(--bd2)} /* el segmento del proyecto: fondo de acento y tinta oscura, como la maqueta. ⚠️ EL `min-width` ES EL COMPROMISO DELICADO DE ESTA PIEZA. El ancho lo fija el %, asi que sin piso un proyecto del 2% queda en 18px y parte el rotulo letra por letra; con el piso demasiado alto la barra DEJA DE SER FIEL a su propia cifra — medido: a 132px el segmento de Vicuna ocupaba el 14,6% de la barra diciendo «10,6%». Se calibro a 90px, que es lo que mide «10,6%» a 22px de mono: el caso de Vicuna (95,6px reales) ya NO se estira y el grafico cuadra. Por eso la cifra del segmento es mas chica que la del resto: es lo que deja respetar el ancho verdadero. Debajo de ~9,9% el piso vuelve a morder y el segmento se ve mas grande que su numero: es inevitable (el texto tiene un ancho minimo) y por eso el numero SIEMPRE esta escrito, no solo dibujado. */ .pyr-seg.dir{background:var(--ac);color:var(--ink);min-width:90px;border-left:0; padding-left:16px;padding-right:16px} .pyr-seg.dir .pyr-seg-v{font-size:clamp(17px,2.4vw,22px)} .pyr-seg-n{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em; text-transform:uppercase;color:var(--dim);overflow-wrap:anywhere} .pyr-seg.dir .pyr-seg-n{color:var(--ink);font-weight:600;opacity:.82} .pyr-seg-v{font-family:var(--mono);font-size:clamp(21px,3.4vw,30px);font-weight:600; letter-spacing:-.02em;line-height:1.1;color:var(--tx)} .pyr-seg.dir .pyr-seg-v{color:var(--ink)} .pyr-seg-v .pyr-seg-u{font-size:var(--fs-micro);color:var(--dim);margin-left:6px;font-weight:400} /* ---- la fila de etapa: una sola linea, entre dos reglas ---- */ .pyr-et{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;padding:19px 0; border-top:1px solid var(--bd2);border-bottom:1px solid var(--bd2)} .pyr-et-k{flex:0 0 auto;min-width:186px;font-family:var(--mono);font-size:var(--fs-label); letter-spacing:.18em;text-transform:uppercase;color:var(--dim)} .pyr-et-v{font-family:var(--mono);font-size:clamp(16px,2vw,19px);color:var(--warn); letter-spacing:-.01em} .pyr-et-x{font-family:var(--mono);font-size:clamp(16px,2vw,19px);color:var(--tx); letter-spacing:-.01em} /* el sello se va al extremo derecho y se cae abajo en angosto (no se encoge) */ .pyr-et-s{margin-left:auto;flex:0 0 auto} /* ---- el indice: una fila por bloque que la pagina realmente trae ---- */ .pyr-idx{display:flex;flex-direction:column} /* U16·A7 (2026-08-15): la primera celda pasa de `44px` fijo a `minmax(44px,auto)` para que la pieza acepte a sus DOS consumidores sin bifurcarse. En Vicuña la celda es un ordinal («01», ~22 px de max-content) y el track se resuelve en el mismo 44 px de antes — medido, la referencia no se mueve. En el nicho es el BADGE del efecto («HABILITA», ~88 px) y el track lo acompaña. Fijarlo en 88 para todos habria empujado el titulo de Vicuña 44 px a la derecha sin motivo. */ .pyr-i{display:grid;grid-template-columns:minmax(44px,auto) 1fr auto;align-items:center;gap:20px; padding:22px 6px;border-bottom:1px solid var(--bd);text-decoration:none;color:inherit; transition:background .18s ease} .pyr-i:hover{background:rgba(var(--ac-rgb),.06)} /* el filete de la ultima fila separaba del `share`, que hasta el 12-ago vivia adentro. Con `share` mudado al pie, quedaba colgando contra el borde de la tarjeta: un separador que no separa nada. */ .pyr-i:last-child{border-bottom:0;padding-bottom:8px} .pyr-i-n{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;color:var(--dim)} .pyr-i-tx{display:flex;flex-direction:column;gap:6px;min-width:0} .pyr-i-t{font-size:clamp(17px,2.2vw,21px);font-weight:700;letter-spacing:-.02em; line-height:1.22;color:var(--tx);text-wrap:pretty} .pyr-i-g{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.05em;color:var(--dim)} .pyr-i-go{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono); font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ac)} /* ---- compartir + leyenda: componentes COMPARTIDOS, sólo reubicados aca dentro. El scope los alinea con la pieza; su markup no se toca (viven en todas las pieles del sitio). ---- */ .pyr .share{margin:26px 0 0;justify-content:flex-end} .pyr .leyenda.sellos{margin:22px 0 0;padding-top:22px;border-top:1px solid var(--bd2)} @media(max-width:640px){ .pyr{padding:26px 18px 24px} /* apilada: con 320px de ancho un segmento del 10% es una columna de 25px y no entra ni «10,6%». ⚠️ APILADA LA BARRA YA NO COMUNICA PROPORCION — las dos filas miden lo mismo —, asi que el numero, que SIEMPRE esta escrito, pasa a ser la unica fuente. Y por eso el segmento del proyecto pierde aca el fondo lleno de acento: relleno y saturado pesaba MAS que el tramo del resto, que es 8,4 veces mayor — el color decia lo contrario del numero. Queda el acento como franja e ink, que identifica sin dominar. */ .pyr-bar{flex-direction:column;min-height:0} .pyr-seg{flex:1 1 auto !important;min-width:0 !important} .pyr-seg+.pyr-seg{border-left:0;border-top:1px solid var(--bd2)} .pyr-seg.dir{background:rgba(var(--ac-rgb),.10);color:inherit; border-left:3px solid var(--ac);padding-left:15px} .pyr-seg.dir .pyr-seg-n{color:var(--ac);opacity:1} .pyr-seg.dir .pyr-seg-v{color:var(--ac)} .pyr-et-k{min-width:100%} .pyr-et-s{margin-left:0} /* el "ver" sale: la fila entera ya es el link y la flecha se comia el titulo */ .pyr-i{grid-template-columns:30px 1fr;gap:14px;padding:18px 2px} .pyr-i-go{display:none} .pyr .share{justify-content:flex-start} } /* ⚠️ SIN tope de medida en estos dos bloques (12-ago, 2a vuelta): la maqueta corre el texto a TODO el ancho de la fila (~940 px) y ese es medio motivo de que se vea espaciosa. El tope de 780 —heredado de `.page.nicho p`— dejaba ~220 px muertos y era una de las cosas que «me comí» del diseño. El contenedor de 1200 ya es el que fija el largo de línea; no hace falta un segundo tope. */ .page.nicho.proy .pyt-t,.page.nicho.proy .pyc-d,.page.nicho.proy .pyq-v, .page.nicho.proy .pyv-t,.page.nicho.proy .pyo-p,.page.nicho.proy .pyi-desc, .page.nicho.proy .pyg-t,.page.nicho.proy .pyd-lec,.page.nicho.proy .pyd-fu{max-width:none} /* --- LA CRONOLOGIA (`pyt-*`) ---------------------------------------------- ⚠️ 2a vuelta (12-ago): la 1a se aparto del diseno en cuatro cosas y el usuario las cazó comparando contra la maqueta renderizada. Ahora va fiel: · SIN tarjeta — lista plana sobre el fondo, filete arriba y hairline por fila · texto a 16,5 px (iba a 15) y a TODO el ancho (iba topeado en 780) · el sello DEBAJO del parrafo, que es donde lo pone el diseno (yo lo habia subido a la columna de fecha por mi cuenta) · las medidas de la maqueta: columna 132, gap 32, padding 26 Lo unico que NO se copia del diseno es la fecha repetida dentro del sello: la columna ya la da, y la maqueta la repite porque se dibujo sobre nuestra pagina, que la repetia ([[L759]]). */ .pyt-rows{display:flex;flex-direction:column;margin:24px 0 0; border-top:1px solid var(--bd2)} .pyt{display:grid;grid-template-columns:132px minmax(0,1fr);gap:32px;padding:26px 0; border-bottom:1px solid var(--bd)} .pyt-k{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding-top:3px} .pyt-c{min-width:0} .pyt-f{font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;letter-spacing:.04em; color:var(--ac);white-space:nowrap} /* la ETIQUETA del hito: el diseno la pone a #4a5162, casi ilegible, y el usuario pidio explicitamente que «lo de abajo tambien deberia notarse de forma clara» ⇒ va a `--mut` (#9aa3b2), que es tres escalones mas arriba. ⚠️ HOY NO TIENE DATO QUE LA LLENE: el campo no existe en el schema (ver `tareas-proyectos-rigi.md`), asi que el slot esta listo y no dibuja nada hasta que se decida. Sin etiqueta la fila queda igual que ahora, no rota. */ .pyt-tag{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.16em; text-transform:uppercase;color:var(--mut);line-height:1.35} .pyt-t{margin:0;font-size:16.5px;line-height:1.7;color:var(--tx2);text-wrap:pretty} /* el sello trae un margen-izquierdo de cortesia porque suele ir pegado a un texto: aca abre linea */ .pyt-s{margin:12px 0 0 -4px} /* --- LOS CONTRATOS (`pyc-*`) ---------------------------------------------- Misma correccion de la 2a vuelta: sin tarjeta, medidas de la maqueta (columna 216, gap 32, padding 28), rol a 18 px y detalle a 16. Nombre y origen APILADOS —antes «RAFA S.A. SANTA / FE» partia la columna en dos lineas desparejas— y el rol como titular propio, que antes iba corrido con el detalle. */ .pyc-rows{display:flex;flex-direction:column;margin:24px 0 0; border-top:1px solid var(--bd2)} .pyc{display:grid;grid-template-columns:216px minmax(0,1fr);gap:32px;padding:28px 0; border-bottom:1px solid var(--bd)} .pyc-k{display:flex;flex-direction:column;gap:6px;min-width:0;padding-top:3px} /* `min-width:0` y no decorativo: sin el, una celda de grilla con texto largo se niega a encoger por debajo de su contenido minimo y desborda la fila (el defecto clasico de CSS grid) */ .pyc-c{min-width:0} .pyc-n{font-family:var(--mono);font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--ac);line-height:1.3;overflow-wrap:anywhere} .pyc-o{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase; color:var(--mut);line-height:1.3} .pyc-r{font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.4; color:var(--tx);margin-bottom:8px;text-wrap:pretty} .pyc-d{margin:0;font-size:16px;line-height:1.7;color:var(--tx2);text-wrap:pretty} .pyc-s{margin:12px 0 0 -4px} /* --- COMO PROVEERLE (`pyq-*`/`pyv-*`/`pyo-*`) — 4a vuelta, 2026-08-12 ------ La seccion entera (quien factura/decide, vias de registro, requisitos, orden de entrada) seguía en `hm-row`/`ck-ind`/`af-paso` — 105/105/104 paginas, por eso no se tocan (P3). Mismo criterio que `pyt-*`/`pyc-*`: sin tarjeta, hairline por fila, texto a todo el ancho. El estado de cada VIA (operativa/en construccion) NO se colorea en semaforo: la maqueta usa el mismo azul de acento para las dos y diferencia solo por el TEXTO del chip. No es perder el dato — el estado sigue completo en la palabra; es que el diseno elige no repetirlo tambien en color, y eso es forma, no dato. */ .pyq-rows{display:flex;flex-direction:column;margin:24px 0 0;border-top:1px solid var(--bd2)} .pyq{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;padding:26px 0; border-bottom:1px solid var(--bd)} .pyq-k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.2em; text-transform:uppercase;color:var(--ac);line-height:1.7;padding-top:2px} .pyq-v{margin:0;font-size:16.5px;line-height:1.7;color:var(--tx2);text-wrap:pretty} .pyq-sel{margin-left:8px;white-space:nowrap} /* La CITA a la norma debajo de un requisito (`mapa_entrada_proveedor.requisitos[].dato.valor`, conectado el 2026-08-18): «Ley provincial 2827-M, art. 12 inc. 4». ⚠️ Es un con display:block, y no un
, POR VALIDEZ: `.pyq-v` es un

, y un

adentro de un

el navegador lo cierra antes — el bloque se volvia un TERCER item de la grilla de 2 columnas y caia en la columna de la etiqueta de la fila siguiente. Lo cazo la captura con los 18 portones en verde, que es [[L915]]/`B19` otra vez: ningun lint mide composicion. Familia del comentario de `_py_fila_datos` («la celda es un

, nunca un »). */ .pyq-cita{display:block;margin-top:8px;font-size:var(--fs-body);line-height:1.62;color:var(--mut)} .pyv-note{margin:34px 0 0;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.05em; color:var(--dim);padding-left:18px;border-left:1px solid var(--bd2)} .pyv-list{display:flex;flex-direction:column;margin-top:34px} .pyv{border-left:2px solid var(--ac);padding:28px 0 30px 26px} .pyv+.pyv{margin-top:18px} .pyv-h{display:flex;align-items:baseline;justify-content:space-between;gap:24px; flex-wrap:wrap;margin-bottom:14px} .pyv-n{font-size:21px;font-weight:700;letter-spacing:-.015em;color:var(--tx)} .pyv-b{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono); font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ac)} .pyv-dot{width:6px;height:6px;border-radius:50%;background:var(--ac)} .pyv-t{margin:0;font-size:16.5px;line-height:1.7;color:var(--tx2);text-wrap:pretty} .pyv-s{margin:12px 0 0 -4px} .pyv-cta{display:flex;align-items:center;justify-content:space-between;gap:24px; margin-top:22px;padding-top:18px;border-top:1px solid var(--bd);text-decoration:none;color:inherit} .pyv-cta-t{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--tx)} .pyv-cta-g{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.22em; text-transform:uppercase;color:var(--ac)} .pyo-list{display:flex;flex-direction:column;gap:22px} .pyo{display:grid;grid-template-columns:26px minmax(0,1fr);gap:18px;align-items:start} .pyo-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px; border:1px solid var(--ac);border-radius:50%;font-family:var(--mono);font-size:var(--fs-label); color:var(--ac);margin-top:3px;flex:0 0 auto} .pyo-p{margin:0;font-size:16.5px;line-height:1.72;color:var(--tx2);text-wrap:pretty} .pyo-mut{color:var(--dim)} /* --- QUE VA A COMPRAR, Y CUANDO (`pyi-*`) — 5a vuelta, 2026-08-12 ----------- Port de «Cajas B - Indice.dc.html», elegida sobre «Cajas A - Fichas» (grid de tarjetas: 1062px y fila huerfana para el mismo caso real) y «Cajas C - Bandas» (1110px, la mas alta de las tres) — medido contra el dato real de Vicuna, que va de 0 a 10 items por fase en 9 fases. Reemplaza la tarjeta `ck-ind` por fase (105 usos: es el mismo componente de los otros 5 campos del anillo 3) por un bloque propio por fase, sin tarjeta, con la barra de conteo + la lista plana. */ .pyi-list{display:flex;flex-direction:column;gap:52px;margin-top:24px} .pyi{border-left:2px solid var(--dim);padding:4px 0 4px 26px} .pyi-h{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap} .pyi-n{font-size:21px;font-weight:700;letter-spacing:-.015em;color:var(--tx)} .pyi-est{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono); font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase} .pyi-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto} .pyi-ven{margin-top:12px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.04em; color:var(--mut)} .pyi-desc{margin:8px 0 0;font-size:16.5px;line-height:1.7;color:var(--tx2);text-wrap:pretty} .pyi-bar{display:flex;align-items:stretch;height:44px;border:1px solid var(--bd2);margin-top:26px} .pyi-seg-op{background:var(--ac);color:var(--ink);display:flex;align-items:center;padding:0 16px; font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase; font-weight:600;white-space:nowrap} .pyi-seg-ofi{flex:1;display:flex;align-items:center;padding:0 16px;font-family:var(--mono); font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--warn)} .pyi-seg-op:only-child{flex:1} .pyi-rows{display:flex;flex-direction:column;margin-top:22px;border-top:1px solid var(--bd2)} .pyi-row{display:grid;grid-template-columns:44px minmax(0,1fr) 140px 56px;align-items:center; gap:16px;padding:15px 4px;border-bottom:1px solid var(--bd);text-decoration:none;color:inherit; transition:background .18s ease} .pyi-row:hover{background:rgba(var(--ac-rgb),.06)} .pyi-id{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;color:var(--dim)} .pyi-nm{font-size:16.5px;font-weight:700;letter-spacing:-.012em;line-height:1.32;color:var(--tx); text-wrap:pretty} .pyi-k{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono); font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase} .pyi-go{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase; color:var(--ac);text-align:right} /* §pyi-vec — U16·A3 (2026-08-15): los NICHOS VECINOS usan la fila de arriba, pero traen dos datos (nombre y TAM) donde Vicuña tiene cuatro (ordinal · nombre · tipo · «ver →»). Se scopea a 2 pistas en vez de inventar las otras dos, que seria texto nuevo. Misma figura que U16·A7 y que `.hm-row` en U1: la pieza acepta a su segundo consumidor, no se bifurca. ⚠️ Nota de 2026-08-16 (U16·B2): el precedente de `.hm-row` ya no se puede ir a mirar — la clase se extinguio y sus dos consumidores viven hoy en `.pyq`. El criterio (scopear, no bifurcar) sigue en pie; el ejemplo vivo es este mismo bloque. */ /* ⛔ EL PISO DEL NOMBRE — 2026-08-16, defecto MEDIDO en 19 paginas publicadas. La version anterior era `minmax(0,1fr) auto` + `white-space:nowrap` en el TAM. Esos dos juntos destruyen la fila: la pista `auto` se dimensiona a MAX-CONTENT, y el TAM va de 13 a **152 caracteres** (mediana 21, p90 37, medido sobre las 300 filas del sitio). Cuando el TAM es largo se queda con toda la fila y `minmax(0,1fr)` —que puede bajar a CERO— deja el nombre en una caja de **0 px partido en 5 lineas**, en 11 paginas y **ya a 1440 px**, no en un ancho raro. ⚠️ Quitar solo el `nowrap` NO alcanza y esta medido: `max-content` ignora las oportunidades de corte, asi que la pista sigue pidiendo la linea entera. Hay que darle un PISO al nombre. LA REGLA, enunciable: **el nombre es el link, y nunca baja de la MITAD de la fila.** Medido contra 45% y 52%: con 50% la fila del peor caso pasa de 140 a **97 px** de alto y el nombre de **11 lineas a 2** en toda la banda 700-900. Con TAM corto (2 de cada 3 filas) la pista `auto` sigue pidiendo lo suyo y **no cambia un pixel**. ⚠️ El arnes no lo cazaba: su veredicto de «muro» es el pico NO-MONOTONO, y estas 11 paginas dan una serie PLANA de 5 lineas de 700 a 1440 (`falsos-positivos.md §B`: lo que un 0 no prueba). */ .pyi-vec .pyi-row{grid-template-columns:minmax(50%,1fr) auto} .pyi-vec .nv-t{text-align:right;white-space:normal} .pyi-nocat{margin:22px 0 0;font-family:var(--mono);font-size:var(--fs-micro);line-height:1.8; letter-spacing:.03em;color:var(--dim)} .pyi-nocat span{color:var(--mut)} .pyi-barnota{margin:10px 0 0;font-family:var(--mono);font-size:var(--fs-micro);color:var(--dim)} /* --- el corte ACTIVAS / PENDIENTES — correccion pedida por el usuario, 6a vuelta 2026-08-12 --- Con 9 fases y hasta 10 items c/u la seccion quedaba SIEMPRE desplegada entera (51 filas), sin importar si esa fase esta pasando ahora o recien va a pasar en anios. Port de la 2a vuelta de "Vicuna Pagina.dc.html" hecha en Claude Design a pedido nuestro: las `en curso` quedan igual (`pyi-list` de arriba, sin tocar); las `pendiente` se colapsan con `
` nativo — sin JS. */ .pyi-lbl{display:flex;align-items:baseline;gap:12px;margin:0 0 30px;font-family:var(--mono); font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase} .pyi-lbl-ln{flex:1;height:1px;background:var(--bd2)} .pyi-lbl-n{font-family:var(--mono);font-size:var(--fs-label);color:var(--dim)} .pyi-pend{margin-top:64px} .pyi-pend-note{margin:0 0 22px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.04em; color:var(--dim)} .pyi-plist{display:flex;flex-direction:column;border-top:1px solid var(--bd2)} .pyi-d{border-bottom:1px solid var(--bd)} .pyi-d>summary{list-style:none;cursor:pointer;display:grid; grid-template-columns:minmax(0,1fr) 130px 120px;align-items:center;gap:18px;padding:20px 6px; transition:background .18s ease} .pyi-d>summary::-webkit-details-marker{display:none} .pyi-d>summary:hover{background:rgba(var(--ac-rgb),.05)} .pyi-dnm{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .pyi-dnm-t{font-size:17.5px;font-weight:700;letter-spacing:-.014em;color:var(--tx);text-wrap:pretty} .pyi-dnm-w{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.04em;color:var(--dim)} .pyi-dest{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono); font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--mut)} .pyi-dct{display:inline-flex;align-items:center;justify-content:flex-end;gap:10px; font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase; color:var(--ac)} .pyi-chev{display:inline-block;width:11px;text-align:center;font-size:14px;line-height:1; transition:transform .2s ease} .pyi-d[open]>.pyi-chev,.pyi-d[open] .pyi-chev{transform:rotate(45deg)} .pyi-dbody{margin:0 6px 34px;padding:2px 0 0 22px;border-left:2px solid var(--bd2)} .pyi-dbody .pyi-desc{margin-top:0} /* U16·A6 — el plegable de UNA sola celda (el detalle de pago del nicho). El `` de arriba es un grid de 3 (nombre · estado · conteo) y aca hay una; se scopea en vez de inventar celdas, igual que en A3 y A7. La prosa del nicho son `

` sueltos, no `.pyi-desc`, asi que necesita su propio interlineado. El cuerpo se acorta abajo porque no hay una lista debajo que separar. */ .pyi-d-solo>summary{grid-template-columns:minmax(0,1fr)} .pyi-d-solo .pyi-dct{justify-content:flex-start} /* el chevron de Vicuña, pero dibujado con `content:` en vez de con un `+`: ahi el `+` es un nodo de TEXTO y le sumaba una palabra a las 102 paginas (`invariancia_texto` lo cazo). Un adorno no puede costar un re-congelado del porton. El plegable viejo ya lo hacia asi con su `▸`. */ .pyi-d-solo .pyi-dct::after{content:"+";display:inline-block;margin-left:10px;width:11px; text-align:center;font-size:14px;line-height:1;transition:transform .2s ease} .pyi-d-solo[open] .pyi-dct::after{transform:rotate(45deg)} .pyi-d-solo .pyi-dbody{margin-bottom:16px} .pyi-d-solo .pyi-dbody p{margin:0 0 10px;font-size:15.5px;line-height:1.7;color:var(--tx2)} .pyi-d-solo .pyi-dbody p:last-child{margin-bottom:0} .pyi-vacia{display:grid;grid-template-columns:minmax(0,1fr) 130px 120px;align-items:center; gap:18px;padding:20px 6px;border-bottom:1px solid var(--bd)} .pyi-vacia .pyi-dnm-t{color:var(--dim)} .pyi-vacia .pyi-dnm-w{color:var(--dim4)} .pyi-vacia .pyi-dest{color:var(--dim2)} .pyi-vacia .pyi-dct{color:var(--dim)} .pyi-vacia .pyi-dot{background:var(--dim4)} /* --- QUE VA A NECESITAR Y TODAVIA NO TIENE PROVEEDOR (`pyg-*`) — 7a vuelta, 2026-08-12 ----- Es `servicios_satelite`: ya curado (24 de 27, 62 servicios) y ya renderizado por `_sat_bloque()` (`sat-*`) — pero esa funcion es COMPARTIDA con la ficha de provincia (12 paginas, 56 usos de `sat-wrap`, P3): se clona a clase propia para la pagina en vez de tocarla, mismo criterio que el resto del port. `_sat_bloque()` sigue intacta para la provincia. */ .pyg-nota{display:flex;align-items:baseline;gap:10px;margin:0 0 30px;font-family:var(--mono); font-size:var(--fs-micro);letter-spacing:.04em;color:var(--dim)} .pyg-nota-d{width:6px;height:6px;border-radius:50%;background:var(--mut);flex:0 0 auto; align-self:center} .pyg-nota-tag{text-transform:uppercase;letter-spacing:.14em;color:var(--mut)} .pyg-nota-tx{font-style:italic} .pyg-list{display:flex;flex-direction:column;border-top:1px solid var(--bd2)} .pyg{padding:28px 0;border-bottom:1px solid var(--bd)} .pyg-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .pyg-n{font-size:18.5px;font-weight:700;letter-spacing:-.015em;line-height:1.32;color:var(--tx); text-wrap:pretty} .pyg-prio{display:inline-flex;align-items:center;padding:4px 9px;border:1px solid; font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase; white-space:nowrap} .pyg-t{margin:12px 0 0;max-width:860px;font-size:16.5px;line-height:1.7;color:var(--tx2); text-wrap:pretty} .pyg-q{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:14px; font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em} .pyg-q-k{text-transform:uppercase;color:var(--dim2);white-space:nowrap} .pyg-q-v{color:var(--ok)} @media(max-width:640px){ .pyg-n{font-size:17px} .pyg-t{font-size:15.5px} } /* --- LA OBRA QUE QUEDA (`pyd-*`) — 8a vuelta, 2026-08-12 ------------------- Sale de `ck-ind`/`py-mag` (P3) a bloque propio, mismo criterio que el resto del port: sin tarjeta, borde-izquierdo, hairline. La fuente pasa de caption de 12px a parrafo de 16px — es la unica prosa de este bloque que antes vivia enterrada en mono chico. */ .pyd-list{display:flex;flex-direction:column;gap:44px;margin-top:24px} .pyd{border-left:2px solid var(--ac);padding:2px 0 4px 26px} .pyd-h{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap} .pyd-n{font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.3;color:var(--tx); text-wrap:pretty} .pyd-k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase; color:var(--ac);white-space:nowrap} .pyd-mag{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:start;gap:24px; margin-top:22px;padding:20px 0;border-top:1px solid var(--bd2);border-bottom:1px solid var(--bd2)} .pyd-mag-n{font-family:var(--mono);font-size:52px;font-weight:600;letter-spacing:-.04em; line-height:.95;color:var(--ac)} .pyd-mag-d{margin:0;font-family:var(--mono);font-size:var(--fs-micro);line-height:1.75; letter-spacing:.04em;color:var(--mut)} .pyd-sincifra{display:flex;align-items:baseline;gap:12px;margin-top:20px;padding:16px 18px; border:1px solid rgba(var(--pro-rgb),.32);flex-wrap:wrap} .pyd-sincifra-tag{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.18em; text-transform:uppercase;color:var(--warn);white-space:nowrap} .pyd-sincifra-tx{font-family:var(--mono);font-size:var(--fs-micro);line-height:1.7; letter-spacing:.04em;color:var(--tx2)} .pyd-lec{margin:22px 0 0;font-size:16.5px;line-height:1.72;color:var(--tx2);text-wrap:pretty} .pyd-fu{margin:14px 0 0;font-size:16px;line-height:1.72;color:var(--mut);text-wrap:pretty} .pyd-s{margin:14px 0 0} @media(max-width:640px){ .pyd-mag{grid-template-columns:minmax(0,1fr);gap:10px} .pyd-mag-n{font-size:38px} .pyd-n{font-size:18px} .pyd-lec,.pyd-fu{font-size:15.5px} } @media(max-width:640px){ .pyi-list{gap:38px} .pyi-n{font-size:19px} .pyi-desc{font-size:15.5px} .pyi-bar{flex-direction:column;height:auto} .pyi-seg-op,.pyi-seg-ofi{padding:9px 14px} .pyi-row{grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 2px} .pyi-id{display:none} .pyi-go{display:none} /* U16·A3: la fila de vecinos apila igual que su hermana, y hay que repetirlo aca porque `.pyi-vec .pyi-row` le gana por ESPECIFICIDAD a la regla de arriba (0,2,0 contra 0,1,0), no por orden. Sin esto el TAM `nowrap` desbordaba a 390 y estrangulaba al nombre — se vio en la captura, no en el codigo ([[L829]]). ⚠️ 2026-08-16: este bloque curaba SOLO el movil. El mismo estrangulamiento vivia arriba de 640 —hasta 1440— y quedo sin ver un dia entero. Ahora la regla de escritorio le da al nombre su piso del 50%; ver el comentario de `.pyi-vec .pyi-row` mas arriba. */ .pyi-vec .pyi-row{grid-template-columns:minmax(0,1fr)} .pyi-vec .nv-t{text-align:left;white-space:normal} .pyi-d>summary,.pyi-vacia{grid-template-columns:minmax(0,1fr);gap:8px;padding:16px 4px} .pyi-dct{justify-content:flex-start} .pyi-dbody{margin:0 0 24px;padding-left:16px} } @media(max-width:640px){ /* a 320 la columna de 132/216px deja ~100px de texto: las filas se apilan. La fecha y la etiqueta pasan a ir en LINEA (row) porque apiladas comian dos renglones antes del hecho. */ .pyt,.pyc{grid-template-columns:minmax(0,1fr);gap:10px;padding:22px 0} .pyt-k,.pyc-k{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:12px} .pyt-t{font-size:15.5px} .pyc-r{font-size:17px} .pyc-d{font-size:15.5px} .pyq{grid-template-columns:minmax(0,1fr);gap:8px;padding:20px 0} .pyq-v{font-size:15.5px} .pyv{padding-left:18px} .pyv-n{font-size:19px} .pyv-t{font-size:15.5px} .pyo-p{font-size:15.5px}} /* «lo que ya paga» (recaudacion_local, 9a vuelta 2026-08-13) NO trae CSS propio: port de "Paga B - Tabla fiscal.dc.html" reusando `_py_lista`/`py-li` (ver LISTA-TITULAR arriba en este archivo), el mismo disclosure de promesas_verificables/riesgos — P4, cero CSS nuevo. */ /* «qué puede frenarlo» (riesgos, 10a vuelta 2026-08-13, corregida el mismo día): tampoco trae CSS propio. Port de "Riesgos C - Tablero.dc.html" sin "horizonte" (activo/meses/de fondo, no tipado — la clasificación de las 3 maquetas fallaba con La Rioja: la 2a oración de nuestro propio dato dice "no es la medida de abril, duró 30 días y se esquivó", no "activo") y SIN la columna "lo activa" que esta vuelta tuvo brevemente (`pyk-act`, `vector` cortado a 150px por elipsis CSS — ilegible: casi todos los vectores miden 60-200+ caracteres y a 150px quedaban en "La [algo]…"/"Los [algo]…", el usuario lo cazó). Sin esa columna, la fila es etiqueta(tipo)+titular+badge(confianza)+cuerpo — la forma de `_py_lista`/`py-li`, sin clase propia. `pyk-*` se borró entero. */ /* --- RECUADRO DE NOTA CON ACENTO VERDE (`py-nota`) — COMPARTIDO ------------------------------ Nace en la 11a vuelta (2026-08-13) como `pya-regla`, para la "regla de lectura" de «Cómo saber si avanza»: solo 1 de los 8 indicadores la trae literal en su propio `que_significa` ("Regla de lectura: ..."), asi que se separa por ese marcador (mecanico, no se inventa donde cortar) en vez de forzar el split a los otros 7. GENERALIZADO en la 12a (2026-08-13): «Huecos B» pide el MISMO recuadro para su "lo cerraría", y duplicar 10 lineas de CSS para pintar la misma caja es la deuda que el molde ×27 paga N veces. Se renombro `pya-regla*` -> `py-nota*` y los dos bloques lo comparten. Quien lo use: pasa el rotulo en `py-nota-k` y el texto en `py-nota-tx`. Hoy: 2 usos (avanza `que_significa` · huecos `que_haria_falta`). */ .py-nota{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline; margin-top:12px;padding:12px 14px;border:1px solid rgba(var(--ver-rgb),.28)} .py-nota-k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em; text-transform:uppercase;color:var(--ok);white-space:nowrap} .py-nota-tx{font-size:15px;line-height:1.6;color:var(--tx)} @media(max-width:640px){ .py-nota{grid-template-columns:minmax(0,1fr);gap:6px} } /* --- LO QUE NO PUDIMOS CONFIRMAR (`pyn`) — 12a vuelta, 2026-08-13 ---------------------------- Port de «Huecos B - Indice abrible». Contenedor de UNA clase: el borde de acento corre por fuera de `py-lista`/`py-li`, que son compartidas por los bloques 7-10 y NO se tocan (medir el radio antes de tocar una clase compartida — RUNBOOK paso 2). Por que este bloque lleva acento propio y los otros cuatro no: es la 5a lista abrible seguida de la pagina, y es la unica que lista lo que NO sabemos. El acento (rojo en el tick de seccion + este filo) lo separa sin cambiarle la mecanica de lectura, que ya funciona. Lo descartado de la maqueta: su columna `tipo` (fuente unica / acto sin publicar / expediente) NO existe en el schema — 3a maqueta seguida que trae una columna no tipada, despues de la "cuando" de Paga y la "horizonte" de Riesgos. */ .pyn{border-left:2px solid rgba(var(--bad-rgb),.34);padding-left:16px} @media(max-width:640px){ .pyn{padding-left:10px} } /* --- PREGUNTAS FRECUENTES (`pyf`) — 12a vuelta, 2026-08-13 ----------------------------------- Port de «FAQ C - Respuesta corta». Lo que cambia respecto de lo que habia (`hm-det` pelado): antes el summary era SOLO la pregunta y la respuesta entera vivia escondida tras el click — el mismo defecto que tenia el bloque 12. Ahora la RESPUESTA CORTA (1a oracion, `_frase1`) se lee sin abrir, y el resto (`_resto_frases`) queda adentro. El split es mecanico y el dato ya esta escrito asi: las 7 respuestas de Vicuna abren con la respuesta directa y siguen con el matiz («No en sentido estricto.» · «Depende de que numero se mire, y son tres distintos.»). Reusa `_py_lista`/`py-li` con su 5a tupla `sub` (la linea secundaria bajo el titular, que nacio en la vuelta de riesgos): CERO clases de fila propias. `pyf` existe SOLO para sacar la columna de etiqueta: aca no hay enum que poner —el `veredicto` de la maqueta (No / 2030 / $ 0 / Uno / CABA) es sintesis humana, no un campo, y es la 4a columna no tipada de la serie tras «cuando» (Paga), «horizonte» (Riesgos) y «tipo» (Huecos)— y dejar la columna vacia son 104 px de aire muerto a la izquierda de cada pregunta. ⚠️ `py-li-e` se OCULTA, no se estrecha: `_py_lista` emite sus 4 spans siempre, asi que dejar la columna en 0 no alcanza —el span vacio sigue tomando celda y corre TODA la fila una posicion, que en pantalla se ve como filas escalonadas y el sello cortado contra el borde. Cazado con getComputedStyle (`etq_display: block`), despues de que la captura mostrara el escalonado. */ .pyf .py-li-e{display:none} .pyf .py-li-h{grid-template-columns:minmax(0,1fr) auto 16px} .pyf .py-li-b{padding-left:4px} /* La respuesta corta NO va en monoespaciada: `py-li-sub` nacio para "lo activa" de riesgos, que es un dato de 2-3 palabras, y aca lleva una oracion de hasta 194 caracteres — en mono se lee peor y ocupa mas ancho. Misma familia y tamano que el cuerpo, un tono por debajo del titular. */ .pyf .py-li-sub{font-family:inherit;font-size:15px;line-height:1.6;letter-spacing:0;color:var(--dim)} @media(max-width:640px){ .pyf .py-li-h{grid-template-columns:minmax(0,1fr) 16px} } /* El recuadro «ojo»: misma caja que `py-nota` en ambar. Se emite SOLO si el resto de la respuesta trae una oracion que arranca con "Cuidado" —marcador literal del propio dato, igual que "Regla de lectura:" en avanza—, hoy 1 de las 7 preguntas. Sin marcador no se dibuja. */ .py-nota--ojo{border-color:rgba(var(--pro-rgb),.3)} .py-nota--ojo .py-nota-k{color:var(--warn)} /* ===== GRAFICO DE COMPOSICION (barra segmentada + leyenda) — pieza COMPARTIDA ===== Vivia en `nicho.css` y se mudo aca el 2026-08-18 porque dejo de ser de una sola piel: la pagina de PROVINCIA la usa para el reparto del PBG y `nicho.css` no se carga ahi. Es la misma pieza, no una copia — la regla del proyecto es que un elemento compartido tiene UNA sola forma. ⚠️ El movimiento NO cambia la cascada, y se puede probar sin abrir el navegador: los unicos selectores `.gc-*` fuera de este bloque son `.py-cta .gc-bar` (aca abajo, especificidad 0,2,0) y comentarios. 0,2,0 le gana a 0,1,0 por ESPECIFICIDAD, no por orden de archivo, asi que da igual que este bloque ahora se lea antes. Los tokens --gc-seg / --gc-dir viven en `despegue.css`, que cargan las dos pieles. */ /* grafico de composicion del TAM (de que se compone el mercado) — pagina de nicho. Barra segmentada honesta: acento = direccionable para nuestro entrante, apagado = cautivo. */ .gcomp{display:flex;flex-direction:column;gap:14px} /* barra con la etiqueta ADENTRO de cada segmento (Claude Design) */ /* ⚠️ `min-height`, NO `height` (U16·B6, 2026-08-16): desde que el rotulo envuelve en vez de truncarse, la barra tiene que poder crecer. Se corrige ACA, en la regla original, y no con una regla nueva que la pise: dos `.gc-bar` con la misma especificidad discutiendo por `height` es exactamente la clase de cascada que nadie puede leer despues. */ .gc-bar{display:flex;width:100%;min-height:58px;border-radius:9px;overflow:hidden;border:1px solid var(--bd2)} .gc-seg{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 16px;min-width:0; background:var(--gc-seg);border-right:2px solid var(--panel)} .gc-seg:last-child{border-right:0} .gc-seg.dir{background:var(--gc-dir)} .gc-seg-n{font-family:var(--mono);font-size:var(--fs-micro);font-weight:600;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gc-seg.dir .gc-seg-n{color:#f0f6fd} .gc-seg-v{font-family:var(--mono);font-size:10.5px;color:#8e98a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gc-seg.dir .gc-seg-v{color:#cfe2f7} /* ═══ U16·B6 (2026-08-16) — LA BARRA DEJA DE COMERSE EL TEXTO ═══════════════════════════════════ Lo cazo el usuario leyendo el sitio: «en muchos lugares los ultimos puntos no entra el texto y no se lee… no se que tanto aporta parte de que sea ilegible». Medido en las 179 paginas que tienen la barra: a 1280 se cortaban 141 rotulos en 83 paginas; a 390, **398 rotulos y 264 cifras en 155 de 179**, con segmentos al 0% de texto visible. `text-overflow:ellipsis` ESCONDE sin romper nada, asi que ningun lint de layout lo veia. ⚠️ Son DOS barras y la cura no puede ser la misma: · el EMBUDO del TAM (`.gcomp`) tiene su leyenda debajo ⇒ el texto del segmento es un ECO y lo que se corta no se pierde. Cura: que el segmento angosto no lo dibuje. · el CONTEO (`.py-cta`: catalogo de fuentes, leyes, riesgos) NO tiene leyenda ⇒ el segmento es el UNICO lugar donde vive el dato. Ahi no se puede ocultar nada. Ninguna de las dos cambia una palabra del HTML: es la misma DOM con otra caja. ⭐ LA REGLA, y es UNA para las dos barras: **el texto del segmento NUNCA se trunca — envuelve, y la barra crece si hace falta.** Cuando el segmento es tan angosto que ni envolviendo entra, cada barra hace lo suyo: el embudo NO LO DIBUJA (su leyenda lo tiene), el conteo SE APILA. */ /* ── 1 · nunca truncar: `ellipsis` -> envolver. (El `height` fijo -> `min-height` se corrigio arriba, en la regla original de `.gc-bar`.) Es lo que ya hace la pieza del destino: `.pyr-seg-n` usa `overflow-wrap:anywhere` y `.pyr-bar` usa `min-height`. Se adopta esa parte del molde sin la tipografica, que es justamente la que no entraba. */ .gc-seg-n,.gc-seg-v{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere; line-height:1.3} /* ── 2 · EL EMBUDO · el segmento que no puede con su texto no lo dibuja (el dato esta en la leyenda, asi que lo que se va es un ECO, no el dato). `@container` mide el ancho REAL del segmento, asi que decide bien sea por porcentaje, por idioma o por pantalla — un `@media` no puede: el mismo viewport da segmentos de 72% y de 4%. */ .gcomp .gc-seg{container-type:inline-size} /* ⚠️ Y el ROTULO del embudo se topa en 2 lineas. Medido: sin tope, un nombre largo en ingles («Project cargo (line pipe, modules)») toma 3 lineas y el `overflow:hidden` de la barra le come **la cifra**, que es el dato. Con el tope se elide el ROTULO —que la leyenda de abajo repite entero— y la cifra queda siempre completa. La prioridad, cuando algo tiene que ceder, es esa: **primero se elide el eco, nunca el dato.** ⛔ Va SOLO en `.gcomp`: en la barra de conteo no hay leyenda, asi que ahi nada puede elidirse. */ .gcomp .gc-seg-n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* ⚠️ EL EMBUDO VA ULTIMO, y esto no es cosmetica de orden: la regla de arriba y la del `@container` tienen la MISMA especificidad (0,2,0) y las dos declaran `display`, asi que gana la que se lee despues. Con el embudo arriba, el clamp lo pisaba y el `display:none` no se aplicaba NUNCA. Medido el 2026-08-18 en `neuquen/arena-fractura-proppant.html` a 390 px: un segmento de 57 px seguia dibujando su rotulo («Arena en cantera (…»), o sea el defecto estaba VIVO en las paginas de nicho publicadas — se vio recien cuando el reparto del PBG trajo 11 segmentos angostos a la misma pieza. */ @container (max-width:118px){ .gcomp .gc-seg-n,.gcomp .gc-seg-v{display:none} } /* ── 3 · EL CONTEO · EL PADDING, que era casi todo el problema a pantalla ancha. Los segmentos que cortaban a 1280 median 67-99 px (mediana 75) y gastaban **32 px en padding**: quedaban 43 px de texto para rotulos de ~62 px («estudios», «operador», «prensa» — esos tres son el 80% de los cortes). A 9 px se devuelven 14 px por segmento. */ .py-cta .gc-seg{padding:0 9px} /* ── 4 · EL CONTEO · a pantalla angosta la barra SE APILA. Debajo de ~820 px ningun ajuste alcanza: un segmento del 8% mide 25 px y ahi no entra ningun texto en ninguna tipografia. Cada segmento pasa a ser una FILA de ancho completo, con su color de fondo intacto. Lo unico que se pierde es la proporcion visual — que en ESTA barra ya era falsa (`_py_conteo` emite `pct = max(8, …)` justo para que el segmento chico no desaparezca) y que a 25 px no se leia igual. */ @media(max-width:1000px){ .py-cta .gc-bar{flex-direction:column;height:auto} .py-cta .gc-seg{flex:0 0 auto!important;width:100%;flex-direction:row;align-items:baseline; gap:10px;padding:9px 14px;border-right:0} .py-cta .gc-seg+.gc-seg{border-top:2px solid var(--panel)} .py-cta .gc-seg-n{flex:1 1 auto;min-width:0} .py-cta .gc-seg-v{flex:0 0 auto} } .gc-leg{display:flex;flex-direction:column;gap:11px} .gc-row{display:flex;align-items:flex-start;gap:11px} .gc-dot{flex:0 0 auto;width:13px;height:13px;border-radius:3px;margin-top:4px;background:var(--gc-seg)} .gc-dot.dir{background:var(--gc-dir)} .gc-tx{flex:1;min-width:0} .gc-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 11px} .gc-n{font-size:var(--fs-body-lg);font-weight:700;color:var(--tx)} .gc-v{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--mut)} .gc-pct{font-family:var(--mono);font-size:var(--fs-sub);color:var(--dim)} .gc-tag{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--dim);border:1px solid var(--bd2);border-radius:5px;padding:2px 8px} .gc-tag.dir{color:var(--ac);border-color:rgba(var(--ac-rgb),.45);background:rgba(var(--ac-rgb),.08)} .gc-sub{font-size:var(--fs-sub);line-height:1.5;color:var(--dim);margin-top:3px} .gc-nota{font-size:12px;color:var(--dim);display:flex;align-items:center;gap:8px; padding-top:13px;border-top:1px solid var(--bd)}