/* ===========================================================
Circular · sitio público
Depende de circular.css, que aporta los tokens, la tipografía,
la cinta de acciones y las reglas de base. Acá viven solo las
piezas del sitio público: barra, hero, figura, cifras, puertas.
Reglas heredadas del manual de identidad que no se rompen acá:
· el verde es tinta, no superficie
· la separación la hace el borde, no un salto de tono
· forma = actor · color = acción
=========================================================== */
/* El ancho de la página. Subió de 1200: en un monitor de 1920 —que es donde
se abre esto— quedaban 360 px de aire muerto a cada lado y el mapa del hero,
que es la pieza que tiene que dar ganas de entrar, no pasaba de 420 px de
alto. La medida de lectura no cambia por esto: los párrafos siguen con su
tope en `ch`, que es lo que cuida que una línea no se haga interminable. */
:root{ --w:1360px }
p{margin:0}
/* El atributo hidden tiene que ganarle a cualquier display de clase:
.campo-doble{display:grid} lo pisaba y el bloque «mi municipio no está
en la lista» quedaba siempre visible. */
[hidden]{display:none!important}
/* ---------- barra ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
/* min-height fija la barra en 84 px, y el padding vertical sostiene el aire
cuando envuelve en pantallas angostas y la barra crece. */
.top-in{max-width:var(--w);margin:0 auto;min-height:84px;padding:12px 24px;
display:flex;align-items:center;gap:22px;flex-wrap:wrap}
/* El logo de la Red va a 220 px: es el mínimo de escritorio del manual §7 para
el lockup completo, no un tamaño elegido a ojo. El filete no separa, articula:
a un lado firma la Red, al otro se nombra el proyecto. */
.lk{display:flex;align-items:center;gap:22px;margin-right:auto;flex:none;text-decoration:none}
.lk-logo{width:220px;height:auto;display:block}
.lk-filete{width:1px;height:44px;background:var(--line);flex:none}
/* nowrap para que el único corte sea el : son dos renglones siempre,
cargue o no la tipografía. El cuerpo va en literal y no en un peldaño de la
escala: es marca, no texto — está calibrado contra el logo de 220 px, y si
mañana se mueve --t-base la firma no tiene por qué moverse con él. */
.lk-nom{font-size:15.5px;font-weight:800;color:var(--ink);letter-spacing:-.022em;
line-height:1.18;white-space:nowrap}
/* El resalte del nombre. `font-weight:inherit` para que la pieza solo cambie
el COLOR: el peso lo pone quien la usa, y así se ve igual en la cabecera
—que es 800— y en el hero, que no lo es. */
.nom b{color:var(--ramcc);font-weight:inherit}
.nav{display:flex;gap:16px;font-size:var(--t-meta);min-width:0;white-space:nowrap}
.nav a{color:var(--body);text-decoration:none;font-weight:600;padding-bottom:2px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--ramcc-fill)}
.acc{display:flex;gap:8px;flex:none}
/* ---------- botones ----------
Contorno del color de la puerta; el relleno aparece recién al pasar
por encima, porque un rectángulo de color lleno es superficie. */
.btn{display:inline-block;font-size:var(--t-meta);font-weight:700;padding:8px 14px;border-radius:8px;
text-decoration:none;border:1.5px solid;white-space:nowrap;
transition:background-color .12s ease,color .12s ease}
.btn.emp{color:var(--vende);border-color:var(--vende)}
.btn.emp:hover,.btn.emp:focus-visible{background:var(--vende);color:#fff}
/* Entrar no es una de las cinco acciones, así que no toma ninguno de los cinco
colores: es neutro, y al pasar por encima se marca con el borde, no con un
relleno. */
.btn.entrar{color:var(--ink);border-color:var(--line)}
.btn.entrar:hover,.btn.entrar:focus-visible{border-color:var(--ink)}
/* Menú hamburguesa. Solo aparece cuando el menú horizontal ya no entra, y las
tres líneas son del mismo grosor que los bordes del sistema: es un control
neutro, no una acción. */
/* Sin alto propio: toma el mismo padding y borde que .btn, y las tres líneas
suman el alto de una línea de texto del botón —3 × 1,5 + 2 × 8,55 = 21,6—.
Así los dos controles miden igual sin que nadie tenga que mantener un número
a mano si cambia el cuerpo del texto. */
.hamb{display:none;flex-direction:column;justify-content:center;gap:8.55px;
width:40px;padding:8px 9px;flex:none;cursor:pointer;
background:var(--paper);border:1.5px solid var(--line);border-radius:8px}
.hamb span{display:block;height:1.5px;background:var(--ink);border-radius:2px}
.hamb:hover,.hamb:focus-visible{border-color:var(--ink)}
.btn.g{font-size:var(--t-base);padding:11px 20px}
.btn.ch{font-size:var(--t-badge);padding:6px 11px}
/* EL PRIMARIO ES LA EXCEPCIÓN DECLARADA a «el verde es tinta, no superficie»:
acá el relleno ES la afordancia, y sin él ninguna pantalla tiene un lugar
obvio donde hacer clic. La regla la declara circular.css §El verde no es
superficie, y el manual §8 la pide con todas las letras: «Verde accion para
acciones principales».
UNO POR GRUPO DE BOTONES. Dos primarios juntos es ninguno: si todo pesa
igual, la jerarquía desaparece y se vuelve al problema que esto resuelve.
El primario es el que CREA O MANDA algo: publicar, preguntar, responder,
aportar, registrar el contacto. Buscar y filtrar NO lo llevan aunque sean
`submit`: son la herramienta para encontrar la tarea, no la tarea, y
dárselo dejaba dos rellenos a la vista en Consultas, que ya tiene su
«Preguntar algo» arriba. Lo que queda al lado va en secundario o fantasma.
Una página larga SÍ puede tener varios, uno por sección, porque nunca se
ven dos a la vez: en «Mi municipio» cada bloque vacío termina en su propia
acción y dejarlas todas en gris devolvía la pantalla apagada de la que
venimos. Lo que no puede pasar es dos rellenos en la misma fila. */
.btn.primario{background:var(--tengo);border-color:var(--tengo);color:#fff}
.btn.primario:hover,.btn.primario:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff}
/* El primario del área de la empresa. Relleno igual —lo que cambia es de
quién es la pantalla, no cuánto pesa el botón—: verde en el municipio,
magenta en la empresa, que es el color con el que la empresa ya está
marcada en todo el Banco. Blanco sobre --vende da 6,26:1. */
.btn.primario.emp{background:var(--vende);border-color:var(--vende)}
.btn.primario.emp:hover,.btn.primario.emp:focus-visible{background:var(--ink);border-color:var(--ink)}
/* El secundario es el contorno neutro: acompaña, no compite. Es lo que antes
se llamaba `.btn.entrar`, que sigue funcionando porque está en las vistas
públicas, pero el nombre no decía su papel. */
.btn.secundario{color:var(--ink);border-color:var(--line);background:transparent}
.btn.secundario:hover,.btn.secundario:focus-visible{border-color:var(--ink);background:var(--sunk)}
/* El fantasma no tiene caja: es para lo que se ofrece pero no se empuja
—«ver todas», «cancelar»—. Sin borde no compite ni con el primario ni con
el secundario, y así deja de haber tres contornos grises seguidos. */
.btn.fantasma{border-color:transparent;color:var(--muted);padding-inline:8px}
.btn.fantasma:hover,.btn.fantasma:focus-visible{color:var(--ink);background:var(--sunk)}
/* Hundido al presionar. Faltaba: el botón se iluminaba al pasar por encima y
no pasaba nada al apretarlo, que en una conexión lenta se lee como que el
clic no entró y lleva a apretar dos veces —y en un formulario que publica,
apretar dos veces no es gratis—. */
.btn:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){
.btn{transition:none}
.btn:active{transform:none}
}
/* ---------- estructura ---------- */
.wrap{max-width:var(--w);margin:0 auto;padding-inline:24px}
.sec{padding-block:52px;border-top:1px solid var(--hair)}
/* Encabezado de página. La clase estaba puesta en tres vistas y NO EXISTÍA en
esta hoja: alguien la escribió como modificador y nunca llegó la regla, así
que las tres pantallas abrían con el relleno de una sección cualquiera.
Dos arreglos:
· sin filete arriba, porque es lo primero de la página y la barra de
navegación ya cerró con una línea —eran dos líneas seguidas—;
· cuando el encabezado es lo ÚNICO que hay dentro, la sección no reserva
lugar abajo. Antes sumaba 52 px de relleno más 26 de `.sec-cab` y dejaba
casi cien píxeles en blanco bajo el título, que se lee como contenido que
no cargó. `:only-child` es exactamente esa condición —no hay nada después
del encabezado— y así no hay que acordarse de poner otra clase. */
.muni-cab{border-top:0;padding-top:40px}
.muni-cab .sec-cab:only-child{margin-bottom:0}
.muni-cab:has(.sec-cab:only-child){padding-bottom:0}
.sh{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.sh h2{font-size:var(--t-h2)}
.sh .d{font-size:var(--t-meta);color:var(--muted)}
/* ---------- hero ---------- */
/* El H1 de la portada es la única excepción a la escala: 44 px contra el tope
de 38 del manual §9. Ese tope dice «H1 producto» y gobierna las pantallas
operativas de la aplicación —donde el manual además prohíbe el texto
gigante—; la portada no es una pantalla operativa, es la puerta. */
/* El aire entre filas es menor que el de columnas a propósito: la banda tiene
que leerse como el piso del hero, no como el bloque siguiente. */
/* El mapa se lleva la columna más grande. Antes era al revés —1,08 contra
0,92 a favor del texto— y el mapa terminaba en 528 px de ancho: Argentina
entera dibujada ahí no se aprecia. El texto no pierde nada, porque su límite
real es la medida de lectura y no el ancho de la columna. */
.hero{display:grid;grid-template-columns:1fr 1.18fr;gap:30px 52px;align-items:start;
padding-block:54px 0}
/* Solo la columna de texto se centra, y contra la tarjeta del mapa, que es más
alta. Centrar toda la grilla movería también las dos bandas de abajo, que
ocupan su fila entera y no tienen contra qué centrarse. */
.hero-txt{align-self:center}
/* Sin tamaño suelto: es el peldaño --t-h1. Estaba escrito a mano en 44 px,
que es justo lo que el manual §9 prohíbe y la razón por la que la escala se
despegaba sin que nadie lo notara. */
.hero h1{font-size:var(--t-h1);line-height:1.06;letter-spacing:-.035em}
.bajada{font-size:var(--t-bajada);font-weight:700;color:var(--ink);line-height:1.32;letter-spacing:-.018em;
margin-top:16px;max-width:22ch;border-left:2.5px solid var(--ramcc-fill);padding-left:14px}
.lede{font-size:var(--t-lede);margin-top:22px;max-width:54ch}
/* Encabezado de sección en dos columnas: el título a la izquierda y la bajada
a la derecha, apoyadas sobre la misma línea de base, con el control de la
sección al final. Uno debajo del otro, la bajada queda atada a su medida de
lectura y se parte en cuatro renglones cortos con media pantalla vacía al
lado — que es el reflejo de dejar el ancho sin usar.
La bajada suelta su tope de 54ch porque el tope ya lo pone la columna. */
/* Alineados por LÍNEA DE BASE, no por arriba ni por abajo. Son dos tamaños
distintos —26 px y 17 px—: alinearlos por el borde de la caja deja uno de los
dos flotando, y por abajo el título terminaba hundido al pie de su columna
con un hueco arriba. Compartiendo la primera línea de base se leen como un
solo renglón, que es lo que son. */
.sec-cab{display:grid;gap:16px 44px;margin-bottom:26px;align-items:baseline;
grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto;
grid-template-areas:"titulo bajada control"}
.sec-cab .sh{grid-area:titulo;margin-bottom:0}
.sec-cab .sec-lede{grid-area:bajada}
/* El botón no tiene línea de base propia —es una caja con un icono—, así que se
cuelga del alto del título en vez de seguir la del texto. */
.sec-cab .pausa{grid-area:control;margin-left:0;align-self:start}
.sec-lede{margin:0;max-width:none;color:var(--muted)}
/* Angosto: el control sube al renglón del título —ahí es donde se lo busca— y
la bajada pasa a ocupar el ancho entero abajo. */
@media (max-width:900px){
.sec-cab{grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:"titulo control" "bajada bajada";
align-items:center;gap:12px 20px}
}
.sub{font-size:var(--t-base);color:var(--muted);margin-top:12px;max-width:54ch}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.fine{font-size:var(--t-meta);color:var(--muted);margin-top:11px}
/* ---------- el mapa del hero ----------
Tres situaciones que rotan. El rótulo «Datos de ejemplo» es permanente y no
decorativo: los municipios y sus coordenadas son reales, las publicaciones
están inventadas, y la página ya no avisa en ningún otro lado que algo sea
una demostración. Mientras siga así, el rótulo se queda. */
.demo{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0;
background:var(--paper)}
.demo-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:11px 16px;border-bottom:1px solid var(--hair);background:var(--sunk)}
.demo-h .t{font-size:var(--t-meta);font-weight:800;color:var(--ink)}
.ejemplo{font-size:var(--t-badge);font-weight:800;letter-spacing:.08em;
text-transform:uppercase;color:var(--necesito);
border:1.5px solid var(--necesito);border-radius:999px;padding:2px 9px;
white-space:nowrap}
.pausa{margin-left:auto;width:28px;height:28px;flex:none;cursor:pointer;
display:flex;align-items:center;justify-content:center;
background:var(--paper);color:var(--muted);
border:1px solid var(--line);border-radius:7px}
.pausa:hover,.pausa:focus-visible{border-color:var(--ink);color:var(--ink)}
/* La caja fija la proporción y el SVG la llena: así el encuadre que calcula el
script coincide con lo que se ve y no quedan franjas vacías. */
/* El fondo es papel y la tierra es --land: si los dos fueran el mismo tono no
se distinguiría el país del agua, que es lo que pasaba. La base blanca es
además la regla del sistema. */
.demo-mapa{background:var(--paper);aspect-ratio:5 / 4}
.demo-mapa svg{display:block;width:100%;height:100%}
/* Alto fijo: la descripción cambia de largo con cada escena y sin esto la
tarjeta salta —y con ella todo el hero— cada siete segundos. */
.esc{padding:14px 16px;border-top:1px solid var(--hair);min-height:104px}
.esc-t{font-size:var(--t-base);font-weight:800;color:var(--ink);line-height:1.3}
.esc-d{font-size:var(--t-meta);color:var(--muted);line-height:1.5;margin-top:5px}
.esc-d b{color:var(--ink);font-weight:700}
/* El globo del mapa. Flota por encima del contenido, que es la excepción de
«sin sombras». No intercepta el puntero: si lo hiciera, se pelearía consigo
mismo al moverse debajo del cursor. */
.demo-mapa{position:relative}
.globo{position:absolute;z-index:30;pointer-events:none;max-width:210px;
background:var(--paper);border:1px solid var(--line);border-radius:9px;
box-shadow:var(--sh-panel);padding:9px 11px;line-height:1.35}
.globo b{display:block;font-size:var(--t-meta);font-weight:800;color:var(--ink)}
.globo span{display:block;font-size:var(--t-badge);color:var(--muted);margin-top:1px}
.globo em{display:block;font-size:var(--t-badge);font-style:normal;font-weight:700;
color:var(--ramcc);margin-top:6px;padding-top:6px;
border-top:1px solid var(--hair)}
.globo em.mudo{color:var(--muted);font-weight:400}
.puntos{display:flex;gap:6px;padding:0 16px 14px}
.punto{flex:1;height:3px;border-radius:999px;background:var(--line);
border:0;padding:0;cursor:pointer}
.punto[aria-current="true"]{background:var(--ramcc-fill)}
.punto:hover{background:var(--muted)}
/* ---------- las tres situaciones, en banda ----------
Misma lógica que la banda de cifras: cruza el hero y lo cierra. */
.tres{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);
border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tr{padding:18px 20px;border-left:1px solid var(--line)}
.tr:first-child{border-left:0}
.tr svg{display:block;width:110px;height:47px;margin-bottom:10px}
.tr .n{font-size:var(--t-base);font-weight:800;color:var(--ink)}
.tr p{font-size:var(--t-meta);color:var(--muted);margin-top:4px;line-height:1.5}
/* ---------- cifras ---------- */
/* La banda cierra el hero: cruza las dos columnas y lo apoya sobre algo. El
fondo --sunk es el único tono de apoyo del sistema y está previsto para esto
—«bandas de portada»—; lo prohibido es teñir una sección entera. */
/* La banda de cifras. Tres, y cada una en UN RENGLÓN: ícono, número y texto en
línea. Apilando el número sobre el rótulo, la celda quedaba con el contenido
amontonado a la izquierda y el ancho sin usar — y eran cuatro, con una que
contaba los campos del alta: eso describe al formulario, no a la Red.
El color no puede aportar acá y está comprobado: sobre esta banda
--ramcc-fill da 2,42:1 y --lime 1,17:1, que no pasan ni el mínimo de objeto
gráfico. El único verde que llega es --ramcc, 5,07:1. La jerarquía la hacen
el cuerpo de la cifra, el ícono y el conteo al entrar. */
.cifras{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);
background:var(--sunk);border-radius:12px;overflow:hidden;margin-bottom:46px}
/* Por línea de base, que es lo que alinea 40 px con 16 px sin que ninguno
flote. El ícono no tiene línea de base propia: se centra contra la cifra. */
.cf{padding:24px 22px;border-left:1px solid var(--line);
display:flex;align-items:baseline;gap:13px}
.cf:first-child{border-left:0}
.cf-ico{flex:none;align-self:center;width:32px;height:32px;color:var(--ramcc)}
.cf .v{font-family:var(--mono);font-size:var(--t-cifra);font-weight:600;color:var(--ramcc);
letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
/* El rótulo sube de metadato a texto corriente: ahora comparte renglón con la
cifra y a 13,5 px quedaba como una nota al pie de un número grande. */
.cf .l{font-size:var(--t-base);color:var(--body);line-height:1.3}
/* Angosto: una abajo de la otra. Cada una ya es un renglón, así que apilarlas
usa el ancho entero sin partir nada. */
@media (max-width:860px){
.cifras{grid-template-columns:1fr}
.cf{border-left:0;border-top:1px solid var(--line)}
.cf:first-child{border-top:0}
}
/* ---------- las cinco acciones ---------- */
/* Las cinco puertas, en DOS FILAS de tres y dos.
En una sola fila de cinco, cada tarjeta daba 230 px de ancho de texto —unos
33 caracteres por renglón, cuando la lectura cómoda arranca en 45—, y con el
caso concreto debajo de cada definición quedaban tiras angostas. En tres
columnas son 388 px, que son unos 55.
Deja de ser una caja única con filetes adentro y pasa a ser una grilla de
tarjetas separadas, como «Qué hay adentro»: con cinco en una grilla de tres,
la última fila tiene un hueco, y un hueco adentro de una caja cerrada se lee
como una tarjeta que falta. Separadas, es sencillamente el final de la
lista. */
.p5{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.a5{padding:18px;border:1px solid var(--line);border-radius:12px;
background:var(--paper)}
.a5 .p{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.a5 .dot{width:11px;height:11px;border-radius:999px;flex:none}
.a5 .n{font-size:var(--t-base);font-weight:800;color:var(--ink)}
.a5 p{font-size:var(--t-meta);color:var(--muted);line-height:1.48}
/* El caso concreto, separado de la definición por un filete: sin esa línea los
dos párrafos se leen como uno solo y el ejemplo parece más definición.
Va en cursiva, que es lo que marca «esto es una cita de ejemplo, no la regla»
sin gastar un color —los cinco están tomados por las acciones—. */
.a5 .ej{margin-top:10px;padding-top:10px;border-top:1px solid var(--hair);
font-style:italic;color:var(--body)}
/* ---------- qué hay adentro ---------- */
.adentro{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.bl{border-top:2.5px solid var(--edge);padding-top:15px;display:flex;flex-direction:column}
.bl h3{font-size:var(--t-h3);margin-bottom:8px}
.bl p{font-size:var(--t-base);color:var(--body)}
.bl .det{font-size:var(--t-meta);color:var(--muted);margin-top:auto;padding-top:10px;
border-top:1px solid var(--hair)}
.bl p+.det{margin-top:14px}
.bl .det b{font-family:var(--mono);font-weight:600;color:var(--ink)}
/* ---------- las dos puertas ---------- */
.puertas{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pta{border:1px solid var(--line);border-top:3px solid var(--edge);border-radius:12px;
padding:24px 22px;display:flex;flex-direction:column}
.pta h3{font-size:var(--t-h3);margin:6px 0 4px}
.pta .precio{font-size:var(--t-meta);font-weight:800;color:var(--edge);margin-bottom:12px}
.pta>p{font-size:var(--t-base)}
.pta ul{margin:14px 0 0;padding-left:0;list-style:none}
.pta li{font-size:var(--t-base);padding:6px 0 6px 19px;position:relative;border-top:1px solid var(--hair)}
.pta li:first-child{border-top:0}
.pta li::before{content:"";position:absolute;left:2px;top:14px;width:7px;height:7px;
border-radius:999px;background:var(--edge)}
.pta .no{font-size:var(--t-meta);color:var(--muted);margin-top:14px;padding-top:12px;
border-top:1px solid var(--hair)}
.pta .cta{margin-top:auto;padding-top:20px}
/* ---------- cierre y pie ---------- */
.cierre{border:1px solid var(--line);border-radius:12px;padding:32px 28px;margin-bottom:52px;
text-align:center}
.cierre h2{font-size:var(--t-h2)}
.cierre p{font-size:var(--t-base);max-width:60ch;margin:11px auto 0}
.cierre .cta{justify-content:center}
/* ---------- el área del municipio ----------
Reusa todo lo público —tokens, .wrap, .sec, .btn— y agrega solo lo que
adentro hace falta y afuera no: de qué municipio es esta sesión, y los
bloques que todavía no tienen datos. */
.muni-nav{margin-left:28px}
.muni-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ramcc)}
.muni-sesion{margin-left:auto;display:flex;align-items:center;gap:14px}
/* Quién es. Va en cuerpo chico y a la derecha: es una referencia para mirar de
reojo, no un título. */
.muni-quien{display:flex;align-items:center;gap:8px;font-size:var(--t-meta);
font-weight:700;color:var(--ink);line-height:1.2;white-space:nowrap}
.muni-quien small{font-weight:400;color:var(--muted)}
/* El círculo es el municipio: forma = actor, la misma regla que el mapa. */
.muni-punto{width:10px;height:10px;border-radius:999px;flex:none;
background:var(--tengo-fill)}
/* La empresa es una FICHA, no un círculo: forma = actor, la misma regla que
distingue al municipio en el mapa. */
.emp-marca{width:12px;height:9px;border-radius:2px;flex:none;
background:var(--vende-fill)}
.muni-estado{font-size:var(--t-badge);font-weight:800;letter-spacing:.06em;
text-transform:uppercase;border-radius:999px;padding:3px 10px;
border:1.5px solid var(--line);color:var(--muted)}
.muni-estado--adherido,.muni-estado--con_ficha,.muni-estado--activo{
color:var(--tengo);border-color:var(--tengo)}
/* Los datos del perfil. Dos columnas de pares, que es lo que entra sin que el
valor quede lejos de su etiqueta. */
.ficha-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:1px;background:var(--line);border:1px solid var(--line);
border-radius:12px;overflow:hidden}
.ficha-datos > div{background:var(--paper);padding:15px 18px}
/* La grilla dibuja sus líneas con el truco de `gap:1px` sobre un fondo de
color: cada celda tapa el fondo y lo que queda a la vista son las juntas.
Con un número IMPAR de datos la última fila tiene una celda sola, y donde
falta la otra el fondo queda a la vista: un rectángulo gris macizo de media
fila, que se lee como un bloque roto. Se ve en la ficha de una empresa sin
sitio web.
La celda suelta cruza las dos columnas y no queda hueco que tapar. */
.ficha-datos > div:last-child:nth-child(odd){grid-column:1 / -1}
.ficha-datos dt{font-size:var(--t-badge);font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted)}
.ficha-datos dd{margin:5px 0 0;font-size:var(--t-base);color:var(--ink)}
.ficha-datos dd small{color:var(--muted);font-size:var(--t-meta)}
.ficha-datos .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.aportes{list-style:none;margin:0;padding:0;border:1px solid var(--line);
border-radius:12px;overflow:hidden}
.aportes li{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
padding:13px 18px;border-top:1px solid var(--hair)}
/* Mover una publicación por el recorrido, desde su propia fila. Empujado a la
derecha para que no se meta entre el título y el estado, que son lo que se
lee. */
.ap-mover{display:flex;align-items:center;gap:8px;margin-left:auto}
.ap-mover select{font-family:var(--sans);font-size:var(--t-badge);color:var(--ink);
background:var(--paper);border:1px solid var(--line);border-radius:7px;
padding:5px 28px 5px 9px;appearance:none;max-width:190px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235C6863' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 9px center}
.ap-mover select:hover{border-color:var(--muted)}
/* Para lectores de pantalla y nada más. Cada desplegable necesita su etiqueta
—«Mover "300 m³ de poda" a»—, pero escrita en la fila sería repetir el
título al lado del título. */
.visualmente-oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip-path:inset(50%);border:0;white-space:nowrap}
/* El aviso de «contá cómo lo resolvieron». Lleva el filete de Comparto, que es
la puerta del conocimiento. */
.aviso--contar{border-left-color:var(--comparto)}
.aviso--contar p{margin:0}
.aviso--contar .sub{margin-top:6px;font-size:var(--t-meta)}
.aportes li:first-child{border-top:0}
/* La miniatura de la imagen de una oferta, en tu propio panel: mismo
tratamiento que `.prop-imagen`, en el tamaño que entra en la fila. */
.ap-imagen{width:44px;height:44px;object-fit:contain;background:var(--sunk);
border:1px solid var(--line);border-radius:8px;flex:none}
.ap-n{font-size:var(--t-meta);color:var(--muted);white-space:nowrap}
.ap-t{flex:1;min-width:14ch;font-size:var(--t-base);color:var(--ink);font-weight:600}
.ap-e{font-size:var(--t-badge);font-weight:800;letter-spacing:.05em;
text-transform:uppercase;white-space:nowrap}
.ap-e.ok{color:var(--tengo)}
.ap-e.espera{color:var(--necesito)}
.ap-e.no{color:var(--stop)}
/* Lo que hay que corregir, debajo del título: es lo único accionable. */
.pub-nota{display:block;font-weight:400;font-size:var(--t-meta);color:var(--muted);
margin-top:3px;line-height:1.45}
/* El color de la acción, en el listado de publicaciones del municipio. */
.pub-dot{width:10px;height:10px;border-radius:999px;flex:none;align-self:center}
/* Los bloques sin datos. Se muestran igual que los demás y explican por qué
están vacíos: escondidos, el municipio no sabe si falta la función o si le
falta cargar algo a él. */
.vacio{border:1px dashed var(--line);border-radius:12px;padding:22px;
background:var(--sunk)}
.vacio p{margin:0;font-size:var(--t-base);color:var(--body);max-width:62ch}
.vacio .btn{margin-top:16px}
/* El que no depende del municipio sino de nosotros se marca aparte: no es una
tarea suya. */
.vacio--pronto{border-style:solid;border-left:3px solid var(--comparto);
background:var(--paper)}
/* Los dos cupos de la empresa, un renglón por clase. Es el mismo eje que las
cinco puertas del municipio —«Necesito» y «Tengo»—, leído desde el otro
lado del intercambio, y por eso toma sus mismos tokens en vez de una
paleta propia (manual §8, «colores por tipo de publicación»). Las marcas
son decorativas: la cuenta que va al lado es lo que dice el dato. */
.cupos{list-style:none;margin:14px 0 0;padding:0;display:flex;
flex-direction:column;gap:10px}
.cupo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
border:1px solid var(--line);border-radius:10px;padding:12px 16px}
.cupo-n{font-size:var(--t-meta);font-weight:800;min-width:11ch}
.cupo-marcas{display:flex;gap:5px}
.cupo-marca{width:16px;height:8px;border-radius:3px;background:var(--line)}
.cupo-cuenta{margin-left:auto;font-size:var(--t-meta);color:var(--muted);
font-family:var(--mono);font-variant-numeric:tabular-nums;
white-space:nowrap}
.cupo--necesidad .cupo-n{color:var(--necesito)}
.cupo--necesidad .cupo-marca--usada{background:var(--necesito)}
.cupo--producto .cupo-n{color:var(--tengo)}
.cupo--producto .cupo-marca--usada{background:var(--tengo)}
/* Lleno: el borde también lo dice, no solo el texto «· sin cupo» (manual
§14, «no depender solo del color para estados»). */
.cupo--lleno{border-color:var(--stop)}
.cupo--lleno .cupo-cuenta{color:var(--stop);font-weight:700}
.muni-pie{margin-top:40px}
@media (max-width:860px){
.ficha-datos{grid-template-columns:1fr}
.muni-quien small{display:none}
}
/* ---------- el Banco de empresas ----------
Las propuestas arriba y aparte de las fichas: una ficha dice quién es
alguien, una propuesta dice qué ofrece hoy (regla 13 del nomenclador). */
.banco-t{font-size:var(--t-h3);color:var(--ink);margin:30px 0 4px}
/* El encabezado de cada clase en la ficha (regla 15): mismo eje y mismos
tokens que `.cupo--necesidad`/`.cupo--producto` en el área de la empresa,
leído del lado del municipio. */
.banco-t--necesidad{color:var(--necesito)}
.banco-t--producto{color:var(--tengo)}
.prop-lista,.emp-lista{list-style:none;margin:14px 0 0;padding:0;
display:flex;flex-direction:column;gap:14px}
.prop{border:1px solid var(--line);border-left:4px solid var(--vende);
border-radius:12px;padding:18px 20px;background:var(--paper)}
.prop-cab{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
font-size:var(--t-meta)}
.prop-tipo{font-weight:800;color:var(--vende)}
.prop-quien{color:var(--ink);font-weight:700}
.prop-vence{margin-left:auto;color:var(--muted);font-family:var(--mono)}
/* Qué incluye y qué pide, lado a lado: son las dos preguntas que separan una
propuesta de un aviso, y leerlas juntas es lo que deja decidir. */
.prop-dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:14px 26px;margin-top:10px}
.prop-dos b{font-size:var(--t-badge);font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted)}
.prop-dos p{margin:4px 0 0;font-size:var(--t-meta);color:var(--body);line-height:1.5}
.emp-f{border:1px solid var(--line);border-radius:12px;padding:18px 20px;
background:var(--paper)}
.emp-f-cab{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.emp-f-n{font-size:var(--t-h3);font-weight:800;color:var(--ink);margin:0}
.emp-f-v{font-size:var(--t-badge);font-weight:800;letter-spacing:.05em;
text-transform:uppercase;color:var(--ayudar);
border:1.5px solid var(--ayudar);border-radius:999px;padding:2px 9px}
.emp-f-a{margin:6px 0 0;font-size:var(--t-base);color:var(--body)}
.emp-f-prop{margin:10px 0 0;font-size:var(--t-meta);font-weight:700;color:var(--vende)}
/* El nombre lleva a la ficha: es lo que se toca para entrar. */
.emp-f-n a{color:inherit;text-decoration:none}
.emp-f-n a:hover,.emp-f-n a:focus-visible{color:var(--vende);text-decoration:underline}
.emp-f-ver{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--hair);
font-size:var(--t-meta)}
.emp-f-ver a{color:var(--vende);text-decoration:none;font-weight:700}
.emp-f-ver a:hover{text-decoration:underline}
.prop-quien a{color:inherit;text-decoration:none}
.prop-quien a:hover{text-decoration:underline}
/* Volver, arriba de la ficha: sin esto se sale con el botón del navegador y se
pierde el filtro con el que se venía buscando. */
.volver{margin:22px 0 0;font-size:var(--t-meta)}
.volver a{color:var(--muted);text-decoration:none}
.volver a:hover{color:var(--ink)}
/* ---------- corrientes de la empresa ----------
Una grilla de casillas por grupo. Sin JavaScript: son casillas de verdad y el
servidor recibe el arreglo igual. */
/* LAS CORRIENTES CON LAS QUE TRABAJA LA EMPRESA.
Cuatro grupos de tamaños muy distintos —5, 3, 11 y 4— en una grilla que los
estiraba a todos al alto del más largo: las columnas cortas terminaban
arriba y dejaban un vacío grande antes de la fila siguiente. Se leía como
algo a medio cargar.
Cada grupo pasa a ser una tarjeta con su encabezado: al tener borde, que
terminen a distinta altura se lee como lo que es —grupos de distinto
tamaño— y no como un hueco.
Y NO ES UNA GRILLA, son COLUMNAS. Una grilla arma filas: los dos grupos
cortos quedaban esperando a que terminara «Corrientes especiales», que tiene
once, y entre medio quedaban trescientos píxeles en blanco. Con `columns`
las tarjetas se van apilando y llenan la columna antes de pasar a la
siguiente, que es justo lo que hace falta con grupos de tamaños dispares.
`break-inside:avoid` es lo que impide que una tarjeta se parta al medio. */
.emp-corrientes{columns:230px 3;column-gap:14px;margin-top:14px}
.emp-grupo{border:1px solid var(--line);border-radius:12px;overflow:hidden;
background:var(--paper);break-inside:avoid;margin-bottom:14px}
.emp-grupo-t{font-size:var(--t-badge);font-weight:800;letter-spacing:.07em;
text-transform:uppercase;color:var(--muted);margin:0;
padding:11px 14px 9px;border-bottom:1px solid var(--hair);
background:var(--sunk)}
/* Cada opción es una ficha entera y no una casilla con texto al lado: el
blanco de alrededor también acepta el clic, que a esta escala es la
diferencia entre acertar y no. */
.emp-chk{display:flex;align-items:flex-start;gap:10px;font-size:var(--t-meta);
color:var(--body);padding:8px 14px;cursor:pointer;line-height:1.35;
border-top:1px solid var(--hair);transition:background-color .12s ease}
.emp-grupo .emp-chk:first-of-type{border-top:0}
.emp-chk:hover{background:var(--sunk);color:var(--ink)}
/* La casilla, dibujada. La nativa es del sistema operativo: distinta en cada
máquina y ajena a todo lo demás del formulario, que ya usa `appearance:none`
para los campos y los desplegables. */
.emp-chk input{appearance:none;flex:none;width:17px;height:17px;margin:1px 0 0;
border:1.5px solid var(--line);border-radius:5px;
background:var(--paper);cursor:pointer;position:relative;
transition:background-color .12s ease,border-color .12s ease}
.emp-chk:hover input{border-color:var(--muted)}
/* Marcada: relleno de la marca y el tilde dibujado. Es la misma excepción del
botón primario —el relleno ES la afordancia— y no un bloque verde suelto. */
.emp-chk input:checked{background:var(--ramcc);border-color:var(--ramcc)}
.emp-chk input:checked::after{content:"";position:absolute;left:5px;top:1.5px;
width:4px;height:9px;border:solid #fff;
border-width:0 2px 2px 0;transform:rotate(45deg)}
.emp-chk:has(input:checked){background:var(--ramcc-bg);color:var(--ink);font-weight:600}
.emp-chk input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* ---------- actores de la Red ----------
El directorio muestra a TODOS los adheridos, publiquen o no: el punto apagado
dice que todavía no publicó, no que no esté. */
.act-lista{list-style:none;margin:18px 0 0;padding:0;
display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.act{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--paper)}
.act--mio{border-color:var(--ink)}
.act-cab{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.act-n{margin:0;font-size:var(--t-base);font-weight:800;color:var(--ink)}
.act-p{font-size:var(--t-meta);color:var(--muted)}
.act-km{margin-left:auto;font-size:var(--t-meta);color:var(--muted);font-family:var(--mono)}
.act-cor{margin:8px 0 0;font-size:var(--t-meta);color:var(--body);line-height:1.45}
.act-cor--sin{color:var(--muted)}
/* Habilitado es un hecho verificable, y se marca como tal. */
.act-hab{margin:9px 0 0;font-size:var(--t-meta);color:var(--tengo);line-height:1.45}
/* Sin habilitación: está en la Red, pero el sistema no lo sugiere. Se dice, no
se esconde —regla 23—. */
.act-sin{margin:8px 0 0;font-size:var(--t-meta);color:var(--muted);line-height:1.45;
border-left:3px solid var(--necesito);padding-left:10px}
/* ---------- las dos tiras del mapa ----------
NO se mueven solas. Esto es una herramienta de trabajo, no una portada: una
tira que avanza sola mueve justo lo que alguien está leyendo. Se arrastra con
el dedo, la rueda o la barra, y el anclaje engancha al soltar. */
.tira{list-style:none;display:grid;grid-auto-flow:column;
grid-auto-columns:minmax(238px,1fr);gap:14px;margin:14px 0 0;padding:0 0 12px;
overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;
scrollbar-width:thin}
.tira > *{scroll-snap-align:start}
.tira li{border:1px solid var(--line);border-radius:12px;padding:14px 16px;
background:var(--paper);min-width:0}
/* El municipio lleva el color de su acción en el filete: color = acción. */
.tira-muni{border-left:4px solid var(--edge)}
/* La empresa, no: es una ficha, no una publicación con acción. */
.tira-emp{border-top:3px solid var(--vende)}
.tira-emp a{display:block;color:inherit;text-decoration:none}
.tira-emp a:hover .tira-t,.tira-emp a:focus-visible .tira-t{color:var(--vende)}
.tira-q{display:flex;align-items:center;gap:7px;font-size:var(--t-badge);
font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tira-t{margin:8px 0 0;font-size:var(--t-base);font-weight:700;color:var(--ink);
line-height:1.3}
.tira-d{margin:6px 0 0;font-size:var(--t-meta);color:var(--muted)}
.tira-v{margin:8px 0 0;font-size:var(--t-meta);color:var(--body)}
.tira-v.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* ---------- consultas a la Red ----------
La pieza de esta pantalla es el botón de un clic. Lo que sigue lo trata como
lo que es: la acción principal, no una más de una fila de opciones. */
.con-lista{list-style:none;margin:18px 0 0;padding:0;display:flex;
flex-direction:column;gap:16px}
.con{border:1px solid var(--line);border-radius:12px;padding:18px 20px;
background:var(--paper)}
/* La que ya es señal se marca: tres municipios con el mismo problema dejó de
ser una consulta y pasó a ser un tema de la Red. */
/* Al llegar por el enlace, la consulta queda debajo de la barra pegajosa si
no se le reserva lugar; y se marca un momento para que se vea cuál es. */
.con{scroll-margin-top:96px}
.con:target{border-color:var(--ramcc);box-shadow:inset 3px 0 0 var(--ramcc-fill)}
.con--senal{border-left:4px solid var(--ayudar)}
.con-cab{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
font-size:var(--t-meta);color:var(--muted)}
.con-cab b{color:var(--ink)}
.con-cor{color:var(--body)}
.con-dias{margin-left:auto;font-family:var(--mono)}
.con-derivada{font-size:var(--t-badge);font-weight:800;letter-spacing:.05em;
text-transform:uppercase;color:var(--comparto);
border:1.5px solid var(--comparto);border-radius:999px;padding:2px 9px}
.con-cuantos{margin:12px 0 0;font-size:var(--t-base);color:var(--ayudar)}
.con-resp{list-style:none;margin:14px 0 0;padding:14px 0 0;
border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:12px}
.con-resp li{font-size:var(--t-meta);color:var(--muted)}
.con-resp li b{color:var(--ink)}
.con-resp li p{margin:4px 0 0;font-size:var(--t-base);color:var(--body);max-width:72ch}
.con-acciones{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;
margin-top:16px;padding-top:14px;border-top:1px solid var(--hair)}
/* Lo de escribir va plegado: el clic tiene que ser lo primero que se ve, y un
campo de texto abierto al lado lo convierte en la opción difícil. */
.con-saber{font-size:var(--t-meta);flex:1;min-width:260px}
.con-saber summary{cursor:pointer;color:var(--muted);padding:9px 0}
.con-saber summary:hover{color:var(--ink)}
.con-saber form{display:flex;flex-direction:column;gap:12px;margin-top:10px;
max-width:520px}
/* ---------- el mapa de la Red ----------
La caja fija la proporción y el SVG la llena, igual que en el hero: así el
encuadre que calcula el script coincide con lo que se ve.
El fondo es papel y la tierra --land: si fueran el mismo tono no se
distinguiría el país del agua. Ya pasó una vez. */
/* ---------- EL MAPA · tres columnas ----------
Filtro, mapa y detalle, como el prototipo. Antes era filtro-desplegable
arriba y mapa abajo a todo el ancho, y el resultado era el peor de los dos
mundos: Argentina es angosta y muy alta, así que a todo el ancho el país se
dibujaba chico en el medio con más de la mitad de la caja en blanco.
Con las columnas al costado ese ancho tiene dueño y el mapa se queda con el
suyo. Los 270 y 330 px salen del prototipo. */
/* EL REPARTO. Ninguna columna es `1fr` suelta, y ésa fue la primera versión:
el detalle se quedaba con TODO el sobrante —medido, 610 px de los 1.328
disponibles— mientras el filtro se apretaba en 270 y el mapa quedaba
chico en el medio. Una columna de pares «Distancia · 148 km» a 610 px es
texto estirado de más; la guía de layout pide 65-75 caracteres y ahí se
pasaba largo.
Cada una tiene mínimo y máximo, y la grilla se centra con el sobrante:
· filtro 300 · a 270 el renglón «Sin publicaciones … 8» llegaba al borde.
· mapa hasta 460 · el alto queda atado al ancho por la proporción 1 a 2,1,
así que más ancho es un mapa que no entra en la pantalla.
· detalle hasta 440 · la medida de lectura de sus renglones.
El resto queda como margen parejo a los costados, que se lee como margen
de página y no como una columna que sobra. */
.mapa-tres{display:grid;
grid-template-columns:300px minmax(340px,460px) minmax(340px,440px);
justify-content:center;
gap:16px;align-items:start;margin-top:22px}
.mapa-filtros{display:flex;flex-direction:column;gap:14px;min-width:0}
.filtro-caja{background:var(--paper);border:1px solid var(--line);border-radius:12px;
overflow:hidden}
.filtro-cab{display:flex;align-items:baseline;gap:10px;padding:12px 14px 9px;
border-bottom:1px solid var(--hair)}
/* El antetítulo corta en dos renglones antes que el botón: si compiten, el
que se parte es «Toda la Red», que es una acción y se lee mal cortada. */
.filtro-cab .eyebrow{min-width:0}
.filtro-reset{white-space:nowrap}
.filtro-reset{margin-left:auto;font-size:var(--t-badge);font-weight:700;
color:var(--ayudar);text-decoration:none;border-radius:6px;padding:2px 7px}
.filtro-reset:hover{background:var(--sunk)}
/* Puesto = es el filtro que está actuando. Se marca con el fondo tonal de la
Red, no con verde relleno: el verde es tinta. */
.filtro-reset.puesto{color:var(--ramcc);background:var(--ramcc-bg)}
/* La lista de corrientes. Es scrollable porque son 24 y si creciera hacia
abajo empujaría el mapa fuera de la pantalla, que es justo lo que esta
pantalla no puede permitirse. */
.filtro-lista{list-style:none;margin:0;padding:6px;max-height:340px;overflow-y:auto;
overscroll-behavior:contain}
.filtro-lista a{display:flex;align-items:center;gap:12px;padding:7px 10px;
border-radius:7px;text-decoration:none;color:var(--body);
font-size:var(--t-meta);border:1.5px solid transparent}
.filtro-lista a:hover{background:var(--sunk);color:var(--ink)}
.filtro-n{flex:1;min-width:0}
.filtro-lista b{font-variant-numeric:tabular-nums;color:var(--muted)}
/* La corriente elegida: contorno, nunca relleno. */
.filtro-lista a[aria-current]{border-color:var(--ramcc);color:var(--ramcc);font-weight:700;
box-shadow:inset 3px 0 0 var(--ramcc-fill)}
.filtro-lista a[aria-current] b{color:var(--ramcc)}
.filtro-pie{margin:0;padding:10px 14px 13px;font-size:var(--t-badge);
color:var(--muted);line-height:1.5;border-top:1px solid var(--hair)}
.mapa-caja{position:relative;border:1px solid var(--line);
border-radius:12px;overflow:hidden;background:var(--paper)}
.mapa-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
padding:12px 14px 8px}
.mapa-tit{font-size:var(--t-h3);font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.mapa-sub{font-size:var(--t-meta);color:var(--muted)}
/* `height:auto` y no una proporción fija: el dibujo calcula su propio alto
desde la geometría, y encajarlo en una caja de proporción distinta era lo
que dejaba los márgenes blancos a los costados. */
/* Sin relleno: el dibujo ya trae su propio margen —PAD— y el de la caja se
sumaba, dejando un marco blanco alrededor del país. */
.mapa-lienzo{padding:0}
.mapa-lienzo svg{display:block;width:100%;height:auto}
/* ---------- el panel de detalle ----------
Se llena al elegir un nodo. Antes no existía: el mapa solo tenía globo al
pasar por encima, así que un municipio se podía mirar pero no ABRIR, y lo
que publicó había que ir a buscarlo a otra pantalla. */
.mapa-detalle{background:var(--paper);border:1px solid var(--line);
border-radius:12px;overflow:hidden;min-width:0}
.det-vacio{padding:26px 16px;text-align:center;color:var(--muted);
font-size:var(--t-meta);line-height:1.5}
.det-vacio svg{color:var(--line-2);margin-bottom:8px}
.det-vacio p{margin:0}
.det-cab{padding:14px}
.det-tipo{font-size:var(--t-badge);font-weight:800;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted)}
.det-n{font-size:var(--t-bajada);font-weight:800;letter-spacing:-.015em;
line-height:1.2;color:var(--ink);margin-top:3px}
.det-p{font-size:var(--t-meta);color:var(--muted);margin-top:2px}
.det-cuerpo{padding:0 14px 14px}
.det-t{font-size:var(--t-badge);font-weight:800;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted);margin:15px 0 3px}
.det-t:first-child{margin-top:0}
/* Cada publicación con el filete de su acción, igual que la tarjeta de
Oportunidades: es la misma cosa y se lee igual en las dos pantallas. */
.det-pub{display:flex;gap:9px;padding:9px 0;border-top:1px solid var(--hair)}
.det-bar{width:3px;border-radius:2px;flex:none}
.det-pub-t{font-size:var(--t-meta);font-weight:700;line-height:1.35;color:var(--ink)}
.det-pub-m{font-size:var(--t-badge);color:var(--muted);margin-top:2px;
font-family:var(--mono)}
.det-nada{font-size:var(--t-meta);color:var(--muted);padding:6px 0;margin:0}
.det-kv{display:flex;flex-direction:column}
.det-kv>div{display:flex;gap:10px;padding:6px 0;border-top:1px solid var(--hair);
font-size:var(--t-meta);align-items:baseline}
.det-kv span{color:var(--muted);flex:none;width:92px}
.det-kv b{color:var(--ink);font-weight:700}
.det-acciones{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
/* El nodo elegido se marca en el dibujo. */
.nodo{cursor:pointer}
.nodo-elegido{filter:drop-shadow(0 0 0 2px var(--ink))}
@media (max-width:1180px){
/* Primero cae el detalle abajo, a todo el ancho: el filtro tiene que quedar
al lado del mapa, que es el par que se usa junto. */
.mapa-tres{grid-template-columns:240px minmax(0,1fr)}
.mapa-detalle{grid-column:1 / -1}
}
@media (max-width:860px){
.mapa-tres{grid-template-columns:1fr}
.filtro-lista{max-height:240px}
.mapa-lienzo svg{max-height:60vh}
}
.mapa-globo{position:absolute;z-index:2;pointer-events:none;
background:var(--paper);border:1px solid var(--line);
border-radius:9px;padding:9px 11px;box-shadow:var(--sh-panel);
font-size:var(--t-meta);color:var(--ink);max-width:250px;line-height:1.4}
.mapa-globo .g-p{color:var(--muted)}
.mapa-globo .g-t{color:var(--muted);font-size:var(--t-badge)}
/* La referencia vive adentro de la caja del filtro, así que lleva su propio
relleno: sin él los números quedaban pegados al borde de la tarjeta. */
.mapa-ref{list-style:none;display:flex;flex-direction:column;gap:2px;
margin:0;padding:6px;font-size:var(--t-meta);color:var(--body)}
.mapa-ref li{display:flex;align-items:center;gap:12px;padding:6px 10px;
border-radius:7px}
/* El nombre empuja la cifra contra el borde: así las cifras quedan
alineadas entre sí y se comparan de un vistazo. */
.mapa-ref-n{flex:1}
.mapa-ref b{font-variant-numeric:tabular-nums;color:var(--ink)}
/* Una puerta sin nadie no se esconde —que no haya es información— pero se
apaga para que no compita con las que sí tienen. */
.mapa-ref-cero{color:var(--muted)}
.mapa-ref-cero b{color:var(--muted);font-weight:400}
.mapa-ref-cero .pub-dot{opacity:.35}
.mapa-ref-apagado{color:var(--muted)}
.mapa-ref-apagado .pub-dot{background:#C6CECA}
/* La oportunidad conjunta. Va marcada aparte porque no es un dato más: es lo
que el municipio solo no puede ver. */
.consolida{margin-top:20px;border:1px solid var(--ayudar);border-left-width:4px;
border-radius:12px;padding:18px 20px;background:var(--paper)}
.consolida-t{margin:0 0 10px;font-size:var(--t-h3);font-weight:800;color:var(--ayudar)}
.consolida-l{display:flex;align-items:baseline;gap:9px;margin:0 0 6px;
font-size:var(--t-base);color:var(--body)}
/* La misma información sin depender de que el mapa se dibuje. */
.mapa-lista{margin-top:20px;font-size:var(--t-meta)}
/* La lista alternativa al mapa se lee como una TABLA, no como un párrafo:
cuatro columnas fijas —quién, a qué distancia, cuánto publicó y con qué
acciones—. Con todo en un renglón flexible, cada fila ponía sus datos en
una posición distinta y había que leer las 275 enteras para encontrar una.
Alineado, se recorre con la vista. */
.mapa-lista ul{list-style:none;margin:16px 0 0;padding:0;color:var(--body);
border:1px solid var(--line);border-radius:12px;overflow:hidden;
/* LAS COLUMNAS SE DEFINEN ACÁ, en la lista, no en cada fila.
Con la grilla en el `
`, cada fila resolvía sus columnas
por su cuenta y la distancia caía en un lugar distinto en
cada una: se comprobó midiendo —1091, 1105, 1129—. Una
columna que no está en la misma x no es una columna. */
display:grid;
grid-template-columns:minmax(0,1fr) 5.5em minmax(0,11em) auto}
/* `subgrid` es lo que hace que la fila USE las columnas de la lista en vez de
inventar las suyas. Sin esto no hay forma de alinear celdas de `
`
distintos sin renunciar a la lista, que acá es la semántica correcta: son
municipios, no una tabla de datos. */
.mapa-fila{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;
align-items:center;gap:4px 14px;padding:10px 16px;
border-bottom:1px solid var(--hair)}
.mapa-fila:last-child{border-bottom:0}
.mapa-fila:hover{background:var(--sunk)}
/* El propio va marcado con el filete de su color, igual que en el mapa lleva
el trazo más grueso: es la referencia desde la que se lee todo lo demás. */
.mapa-fila--mio{background:var(--sunk);box-shadow:inset 3px 0 0 var(--ramcc)}
/* SIN `gap`. Con flex y `gap:7px`, el hueco caía ENTRE el nombre y la coma y
se leía «Santa Fe , Santa Fe». El espacio que hace falta es solo antes de
la marca del municipio propio, así que se lo pone ella. */
.mapa-fila-q{min-width:0;display:flex;align-items:baseline;flex-wrap:wrap}
.mapa-fila-q .mapa-mio{margin-left:8px}
.mapa-fila-q a{color:var(--ink);text-decoration:none}
.mapa-fila-q a:hover,.mapa-fila-q a:focus-visible{color:var(--ramcc);text-decoration:underline}
.mapa-fila-p{color:var(--muted)}
/* La distancia a la derecha de su columna: son números y se comparan de
arriba abajo, no se leen de izquierda a derecha. */
.mapa-fila-km{text-align:right;color:var(--body);white-space:nowrap;
font-variant-numeric:tabular-nums}
.mapa-fila-n{color:var(--body)}
.mapa-fila-dots{display:flex;gap:4px;justify-content:flex-end}
/* En teléfono las cuatro columnas no entran: quién ocupa el renglón y los
otros tres datos van abajo, en una sola línea. */
/* En teléfono las cuatro columnas no entran: quién ocupa su renglón y los
otros tres datos van abajo. La lista vuelve a ser un `flex` porque con
`subgrid` no se puede reacomodar así. */
@media (max-width:640px){
.mapa-lista ul{display:flex;flex-direction:column}
.mapa-fila{grid-template-columns:minmax(0,1fr) auto auto}
.mapa-fila-q{grid-column:1 / -1}
.mapa-fila-km{text-align:left}
}
.mapa-mio{font-size:var(--t-badge);font-weight:800;text-transform:uppercase;
letter-spacing:.05em;color:var(--tengo)}
.mapa-sin{color:var(--muted)}
/* ---------- oportunidades ----------
Los filtros van por GET y sin JavaScript: esta pantalla es «la alternativa al
mapa que exige la pauta de accesibilidad», así que si necesitara JS para
filtrar no sería alternativa de nada. */
.op-filtros{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;
margin:22px 0 8px;padding:16px;border:1px solid var(--line);
border-radius:12px;background:var(--sunk)}
.op-filtros .pub-campo{min-width:190px;flex:0 1 auto}
.op-filtros .btn{white-space:nowrap}
.op-lista{list-style:none;margin:18px 0 0;padding:0;display:flex;
flex-direction:column;gap:14px}
/* El filete de la izquierda lleva el color de la acción: es lo que deja
reconocer la puerta sin leer. Color = acción, la regla del sistema. */
.op{border:1px solid var(--line);border-left:4px solid var(--edge);
border-radius:12px;padding:18px 20px;background:var(--paper)}
.op-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
font-size:var(--t-meta)}
/* LA ACCIÓN ES LO PRIMERO QUE HAY QUE VER. Las cinco puertas son la identidad
del proyecto —la cinta de arriba está hecha de ellas— y en la tarjeta salían
como texto suelto con un punto al lado, más callado que cualquier otra cosa.
Ahora va en pastilla sobre su superficie tonal.
Los fondos salen de los tokens --*-bg, que estaban definidos desde el
principio y no los usaba NADIE: ahí estaba la mitad del color que a estas
pantallas le faltaba. Los cinco pares texto/fondo se midieron y el más
ajustado —Puedo ayudar— da 4,67:1, arriba del 4,5 que pide el manual §14. */
.op-puerta{display:inline-flex;align-items:center;gap:7px;font-weight:800;
padding:3px 10px 3px 8px;border-radius:999px;
background:var(--tono,var(--sunk))}
.op-donde{color:var(--muted)}
.op-donde b{color:var(--ink)}
/* Esto gritaba más fuerte que la acción: pastilla con contorno aqua en
mayúsculas, al lado de un «Tengo» en texto plano. Es un dato de apoyo
—a qué distancia está—, no el titular, así que baja a texto tranquilo.
Sigue distinguiéndose por el color y por el punto, no solo por el color. */
.op-cerca{font-size:var(--t-badge);font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--muted)}
.op-cerca::before{content:"";display:inline-block;width:5px;height:5px;
border-radius:999px;background:var(--ayudar);
vertical-align:middle;margin-right:6px}
.op-t{font-size:var(--t-h3);font-weight:800;color:var(--ink);margin:10px 0 4px}
.op-d{font-size:var(--t-base);color:var(--body);margin:0;max-width:72ch}
.op-datos{display:flex;gap:8px 18px;flex-wrap:wrap;margin:12px 0 0;
font-size:var(--t-meta);color:var(--muted)}
.op-datos .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.op-venta{margin:10px 0 0;font-size:var(--t-meta);color:var(--vende)}
/* El aviso del estado del trámite. «Nunca se sugiere una operación sobre un
bien que todavía no tiene la baja aprobada.» */
.op-aviso{margin:8px 0 0;font-size:var(--t-meta);color:var(--body);
border-left:3px solid var(--necesito);padding-left:11px;max-width:70ch}
.op-aviso--bien{border-left-color:var(--tengo)}
.op-contacto{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--hair);
font-size:var(--t-meta);color:var(--muted)}
.op-contacto a{color:var(--ayudar)}
/* Formulario y contexto, lado a lado. Mismo reparto que el alta: los campos
conservan su medida —un input de 1.360 px no se lee— y el ancho que sobraba
lo ocupa lo que la pantalla no contestaba. */
.pub-dos{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
gap:34px;align-items:start}
.pub-dos .pub-f{max-width:none;margin-top:0}
.pub-lado{display:flex;flex-direction:column;gap:18px;margin-top:26px;min-width:0}
.lado-caja{border:1px solid var(--line);border-radius:12px;padding:16px 18px;
background:var(--paper)}
.lado-caja .eyebrow{display:block;margin-bottom:9px}
.lado-pasos{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:9px;
font-size:var(--t-meta);color:var(--body);line-height:1.5}
.lado-pasos b{color:var(--ink)}
.lado-pie{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--hair);
font-size:var(--t-badge);color:var(--muted);line-height:1.5}
.lado-t{margin:0;font-size:var(--t-meta);color:var(--body);line-height:1.5}
@media (max-width:980px){
.pub-dos{grid-template-columns:1fr;gap:22px}
/* Abajo del formulario y no arriba: primero se hace la tarea, después se
lee qué va a pasar con ella. */
.pub-lado{margin-top:0}
}
/* ---------- publicar ----------
Los bloques `.pub-solo` nacen VISIBLES y los esconde el script: al revés,
quien no tenga JavaScript no puede completar un campo que el servidor le va
a pedir. */
.pub-f{max-width:820px;margin-top:26px;display:flex;flex-direction:column;gap:22px}
.pub-f fieldset{border:1px solid var(--line);border-radius:12px;padding:18px;margin:0}
.pub-f legend{font-size:var(--t-meta);font-weight:800;color:var(--ink);padding-inline:8px}
.pub-campo{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
/* Mismo peso que la etiqueta del alta: eran 700 acá y 800 allá. */
.pub-campo label{font-size:var(--t-meta);font-weight:800;color:var(--ink)}
.pub-campo .opc{font-weight:600;color:var(--muted)}
.pub-f .ayuda{font-size:var(--t-meta);color:var(--muted);margin:0;line-height:1.45}
.pub-fila{display:flex;gap:16px;flex-wrap:wrap}
.pub-fila .pub-campo{min-width:150px}
/* La ayuda que va DENTRO del fieldset, arriba de las opciones: explica la
pregunta, así que tiene que leerse antes de elegir y no debajo.
Cuando el fieldset lleva ayuda, las opciones van adentro de `.puertas-ops`
y el fieldset deja de ser el contenedor flex: así el párrafo ocupa su
renglón sin que nada se le acomode al lado. */
.ayuda-legend{margin:0 0 12px;max-width:62ch}
.pub-puertas:has(.puertas-ops){display:block}
.puertas-ops{display:flex;gap:10px;flex-wrap:wrap}
/* Las cinco puertas a la vista: son cinco y la elección cambia todo lo de
abajo, así que esconderlas en un desplegable sería esconder la decisión. */
.pub-puertas{display:flex;gap:10px;flex-wrap:wrap}
.puerta{display:flex;align-items:center;gap:8px;cursor:pointer;
border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;
font-size:var(--t-meta);font-weight:700;color:var(--ink)}
.puerta:hover{border-color:var(--ink)}
/* El ejemplo de cada tipo, el del dossier de empresas. Va debajo del nombre y
en un renglón propio: «Programa conjunto» leído solo no dice qué se espera
que alguien cargue ahí. Por eso la puerta que lo lleva apila en vez de
alinear. */
.puerta:has(.puerta-ej){flex-direction:column;align-items:flex-start;gap:3px}
.puerta-ej{font-size:var(--t-meta);color:var(--muted);line-height:1.35}
/* La puerta elegida toma SU color, no un gris. Se marcaba con `--sunk` y el
borde de tinta: elegir «Puedo ayudar» se veía igual que elegir «Vendo», y en
la pantalla siguiente esa misma publicación aparece en una pastilla con su
color. Era el mismo concepto dicho de dos maneras.
Mismo par tinta/tono que la pastilla de la tarjeta, y del mismo lugar
—config/circular.php—, así no hay dos paletas que mantener. */
/* CON VALORES DE RESERVA. `--tinta` y `--tono` los pone la vista, una por
acción, y eso vale en Publicar. Pero `.puerta` también la usa el selector de
vínculo del alta de empresa, que no es una de las cinco acciones y no los
define: ahí las tres declaraciones quedaban inválidas y la opción ELEGIDA
terminaba sin fondo y con el texto más claro que las no elegidas —al revés
de lo que tiene que pasar—. Sin acción propia, se marca con el verde de la
marca. */
.puerta:has(input:checked){border-color:var(--tinta,var(--ramcc));
background:var(--tono,var(--ramcc-bg));
color:var(--tinta,var(--ramcc));font-weight:700}
.puerta:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.puerta input{position:absolute;opacity:0;width:0;height:0}
.puerta .dot{width:11px;height:11px;border-radius:999px;flex:none}
/* El grupo de tipos de la empresa, por clase. Mismo filete de tres puntos que
`.pta`/`.bl`, con los mismos dos tokens de los cupos: es el eje
necesidad/producto, no una acción nueva. */
.pub-puertas--necesidad{border-top:3px solid var(--necesito)}
.pub-puertas--producto{border-top:3px solid var(--tengo)}
/* El grupo sin cupo se deshabilita entero y lo dice el `
`
de adentro, no solo el aspecto: acá el gris es un refuerzo, no la única
señal (manual §14). */
.pub-puertas:disabled{background:var(--sunk)}
.pub-puertas:disabled legend{color:var(--muted)}
.pub-puertas:disabled .puerta{cursor:not-allowed;color:var(--muted);
border-color:var(--line);background:transparent}
/* ---------- entrar ----------
Un solo campo, y por eso no usa la grilla del alta: una columna angosta con
el campo a ancho completo. Más ancho que esto y el campo parece pedir algo
más largo que un correo. */
.entrar-f{display:flex;flex-direction:column;gap:9px;max-width:420px;
margin-top:26px}
.entrar-f label{font-size:var(--t-meta);font-weight:700;color:var(--ink)}
.entrar-f input{font:inherit;font-size:var(--t-base);padding:11px 13px;
border:1.5px solid var(--line);border-radius:8px;
background:var(--paper);color:var(--ink)}
.entrar-f input:focus-visible{outline:2px solid var(--focus);outline-offset:1px;
border-color:var(--focus)}
.entrar-f button{margin-top:7px;align-self:flex-start;cursor:pointer}
/* ---------- el pie ----------
Es una BANDA que cruza toda la ventana, no un renglón al final de la columna
de texto: apoya la página sobre algo, igual que la banda de cifras apoya el
hero. El fondo es --sunk, el único tono de apoyo del sistema y previsto para
esto (circular.css §Base). No hay ni un relleno verde: el verde es tinta.
Por eso el pie va fuera de `.wrap` en el layout, y `.pie-dentro` vuelve a
alinear su contenido con el del resto de la página. */
.pie{background:var(--sunk);border-top:1px solid var(--line)}
.pie-dentro{max-width:var(--w);margin:0 auto;padding-inline:24px;
padding-block:52px 30px}
.pie-grilla{display:grid;gap:38px 44px;
grid-template-columns:2.2fr 1fr 1fr 1fr;align-items:start}
.pie-logo{display:block;width:200px;height:auto}
/* El nombre del proyecto sube a tamaño de título de panel: es lo que se lee
después del logo y antes tenía el cuerpo de un metadato. */
.pie-nombre{margin-top:14px;font-size:var(--t-h3);font-weight:800;color:var(--ink);
line-height:1.25}
.pie-frase{margin-top:6px;font-size:var(--t-base);color:var(--body);line-height:1.5}
.pie-btn{margin-top:20px}
/* `h2` y no un `div` con pinta de título: son los encabezados de las listas de
enlaces, y un lector de pantalla navega por encabezados. El tamaño lo baja el
CSS, la jerarquía la mantiene el HTML.
El filete de abajo es el mismo recurso que separa el logo del nombre en la
cabecera: una línea corta, no una caja. */
.pie-t{font-size:var(--t-badge);font-weight:800;letter-spacing:.09em;
text-transform:uppercase;color:var(--muted);
padding-bottom:9px;margin-bottom:13px;border-bottom:1px solid var(--line)}
.pie-col{display:flex;flex-direction:column;align-items:stretch;gap:9px}
.pie-col a{font-size:var(--t-meta);color:var(--ink);text-decoration:none;
font-weight:600;line-height:1.35;
transition:color .12s ease}
.pie-col a:hover,.pie-col a:focus-visible{color:var(--ayudar);text-decoration:underline}
.pie-fuera{vertical-align:-1px;margin-left:2px;opacity:.6}
.pie-fondo{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);
display:flex;gap:8px 24px;flex-wrap:wrap;justify-content:space-between;
font-size:var(--t-badge);color:var(--muted)}
/* La firma cierra la página con la misma cinta que la abre. Sale del token, no
de una copia del degradado. */
.pie-cinta{height:var(--cinta-alto);background:var(--cinta)}
@media (max-width:900px){
.pie-grilla{grid-template-columns:1fr 1fr;gap:34px}
.pie-quien{grid-column:1 / -1}
}
@media (max-width:460px){
.pie-grilla{grid-template-columns:1fr}
.pie-dentro{padding-block:40px 26px}
}
/* La tipografía puede no cargar y la de respaldo es más ancha: el menú se
retira antes de que llegue a tocar los botones. Donde se retira, aparece la
hamburguesa: lo que sale de la barra tiene que seguir estando en algún lado. */
/* La marca se achica antes que el resto del sitio y por eso tiene corte propio.
EL LOGO NO SE CAMBIA: es el mismo archivo siempre, solo baja de 220 a 170 px
—el mínimo de móvil del manual §7—. Lo que se retira es el filete y el nombre
del proyecto.
Por qué se retiran: el lockup completo con filete y nombre mide 391,9 px, y
sumados el botón, la hamburguesa y el aire hacen falta 582,5. Por debajo de
eso la barra se parte en dos renglones. Y mantener el nombre obligaría a
bajar el logo a 63 px en una pantalla de 390 — muy por debajo del mínimo, e
ilegible: adentro lleva tres renglones de texto. El nombre no se pierde, lo
dice el H1 inmediatamente debajo. */
@media (max-width:640px){
.lk-logo{width:170px}
.lk-filete,.lk-nom{display:none}
.top-in{min-height:64px;flex-wrap:nowrap}
}
@media (max-width:1140px){
.nav{display:none}
.hamb{display:flex}
/* EL ÁREA DEL MUNICIPIO NO TIENE HAMBURGUESA, así que la regla de arriba la
dejaba SIN NAVEGACIÓN: medido a 985 px, el menú quedaba en `display:none`
y no había ningún botón para abrirlo —cero enlaces alcanzables—. Y 1140
no es un ancho de teléfono: entra ahí casi cualquier ventana de laptop.
Se deja visible y cortando en renglones, en vez de agregar el menú
desplegable: son diez destinos entre los que el municipio salta todo el
tiempo mientras trabaja, y verlos es mejor que esconderlos detrás de un
clic. La barra crece un renglón; el área deja de ser un callejón.
Medido de nuevo con diez enlaces (15/09/2026): a 390 px entran en tres
renglones, sin desplazamiento horizontal. */
.muni-nav{display:flex;flex-wrap:wrap;white-space:normal;
margin-left:0;gap:10px 16px;order:3;width:100%}
.muni-sesion{margin-left:auto}
/* La barra necesita su propio renglón, y más abajo `.top-in` pasa a
`flex-wrap:nowrap` —correcto para la cabecera pública, que ahí ya escondió
el menú—. Acá el menú NO se esconde, así que hay que dejarla cortar; si no,
los enlaces se apilan en una línea y se salen de la pantalla. */
.top-in:has(.muni-nav){flex-wrap:wrap}
/* El panel cuelga de la barra, que es sticky y por eso hace de referencia.
Flota por encima del contenido: es la excepción de «sin sombras». */
.nav.abierto{display:flex;flex-direction:column;gap:0;
position:absolute;top:100%;left:0;right:0;
background:var(--paper);border-bottom:1px solid var(--line);
box-shadow:var(--sh-panel);padding:4px 24px 10px;
font-size:var(--t-base);white-space:normal}
.nav.abierto a{padding:13px 0;border-top:1px solid var(--hair)}
.nav.abierto a:first-child{border-top:0}
}
@media (max-width:900px){
.hero{grid-template-columns:1fr;gap:34px}
.p5{grid-template-columns:1fr 1fr}
.adentro,.puertas{grid-template-columns:1fr}
.tres{grid-template-columns:1fr}
.tr{border-left:0;border-top:1px solid var(--line)}
.tr:first-child{border-top:0}
}
@media (max-width:560px){
.wrap,.top-in{padding-inline:16px}
.lk,.top-in{gap:12px}
.acc{gap:8px}
/* Por debajo de 560 los títulos bajan del peldaño: --t-h1 son 46 px y a 390
de pantalla un H1 así se come tres renglones antes del primer párrafo.
Es la excepción que el manual §9 admite por ancho, no un tamaño suelto. */
.hero h1{font-size:34px}
.bajada{font-size:var(--t-h3)}
.p5{grid-template-columns:1fr}
.fila{grid-template-columns:1fr;gap:10px}
.acc .btn{font-size:var(--t-badge);padding:7px 11px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ===========================================================
El alta del municipio
Formulario a la izquierda, y a la derecha lo que la Red ya sabe.
El panel de la derecha no decora: es el que convierte «cargá tu
municipio» en «confirmá el tuyo», que es lo que hace corta el alta.
=========================================================== */
/* La ficha ocupa las dos primeras filas de la columna derecha para que arranque
a la altura del título y el formulario siga empezando justo debajo del copete,
sin el hueco que deja alinear por fila. En teléfono el orden cambia: la ficha
se mete entre el copete y el formulario, porque si va al final se llega a
«Enviar» sin haber visto qué municipio reconoció la Red. */
.alta{display:grid;grid-template-columns:1.25fr .75fr;
grid-template-areas:"cabeza ficha" "form ficha" "form extra";
grid-template-rows:auto auto 1fr;
column-gap:52px;row-gap:22px;align-items:start;
padding-block:46px 64px}
.alta-cabeza{grid-area:cabeza;min-width:0}
.alta-form{grid-area:form;min-width:0}
.ficha-caja{grid-area:ficha;min-width:0}
.alta-extra{grid-area:extra;display:flex;flex-direction:column;gap:22px;min-width:0}
.alta h1{font-size:var(--t-h1);line-height:1.08;letter-spacing:-.03em;margin-top:6px}
.alta .lede{margin-top:16px;margin-bottom:8px}
/* ---------- campos ----------
El alta son dos movimientos, y el texto de arriba ya los nombra:
«buscalo en la lista» y «escribí a quién le contestamos». El formulario
los separa en dos grupos con filete en vez de apilar cajas iguales, que
es lo que hacía leer cuatro pasos donde hay dos. */
.campos{display:flex;flex-direction:column;gap:34px}
.grupo{border:0;margin:0;padding:0;min-width:0;
display:flex;flex-direction:column;gap:18px}
.grupo legend{display:block;width:100%;float:left;padding:0 0 9px;margin:0 0 4px;
font-size:var(--t-badge);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);border-bottom:1px solid var(--hair)}
.grupo legend + *{clear:both}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo-doble{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo label{font-size:var(--t-meta);font-weight:800;color:var(--ink)}
.campo label .opt{font-weight:600;color:var(--muted);letter-spacing:0}
/* ---------- LOS CONTROLES DE FORMULARIO, UNA SOLA VEZ ----------
Había DOS sistemas: `.campo`, el del alta, con `appearance:none` y la flecha
dibujada; y `.pub-campo`, el de publicar y el de todos los filtros, sin
ninguna de las dos cosas. O sea que 21 de los 27 desplegables del proyecto
salían con el control NATIVO del sistema operativo —gris, con su propia
tipografía y su propio alto— al lado de campos de texto que sí eran del
proyecto. En una misma barra de filtros convivían los dos.
También divergían el borde (1 contra 1,5 px) y el peso de la etiqueta (800
contra 700), así que dos formularios del mismo sitio no se parecían.
Ahora la apariencia se declara una vez para los dos y cada clase se queda
solo con lo suyo, que es cómo se acomodan. Los valores son los del alta,
que es el formulario más trabajado del proyecto. */
.campo input,.campo select,.campo textarea,
.pub-campo input,.pub-campo select,.pub-campo textarea{
font-family:var(--sans);font-size:var(--t-base);color:var(--ink);background:var(--paper);
border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%;
appearance:none}
/* La flecha va como imagen de fondo y no como pseudo-elemento: un `