/* Pereira Ayuda — hoja compartida por index.html y donar.html.
Estaba dentro del de index: al aparecer una segunda página había
que copiarla o dejar que las dos se vieran distinto. Un archivo aparte se
descarga una vez y el navegador lo reusa. */
:root{
--fondo:#fff; --tinta:#111418; --gris:#5b6470; --linea:#dfe3e8; --papel:#f5f7f9;
--albergue:#1d6fb8; --acopio:#0f8a5f; --hospital:#c2381b;
--donacion:#6b3fa0; --ayuda:#b8760f; --mascota:#0e7c86;
--colapso:#4a4e57; --maquinaria:#b8760f;
/* Novena categoría. El hueco de tono más grande que quedaba entre las ocho
era el de 267° (donación) a 370° (salud, 10° dando la vuelta): 103° sin
nada. #992873 cae en 320°, a 50° de su vecino más cercano por los dos
lados — la mayor distancia mínima que se podía conseguir sin mover un
color existente, que sí rompería el código. Sobre blanco da 7,23:1, así
que la franja de frescura sólida lleva texto blanco sin la excepción a
negro que necesitan acopio y ámbar. Segundo canal: el pictograma es una
llave, que no se parece a ninguno de los ocho. */
--vivienda:#992873;
--alerta:#8c1d10;
/* Bandera de Pereira, acuerdo 39 del 19 de octubre de 1923. Tres fuentes
dicen lo mismo y ninguna publica un hex: pereira.gov.co ("Símbolos de
Pereira"), concejopereira.gov.co ("Escudo y bandera") y Flags of the World
(crwflags.com/fotw/flags/co-ris-p.html): "amarillo subido" en el triángulo
central, "rojo escarlata" en los laterales. Estos hex son los de FOTW.
Van SOLO en el cromo —bandera, barra, encabezado, pie— y nunca en una
tarjeta ni un marcador: ahí el color codifica categoría y no puede
significar dos cosas.
--pei-rojo-ui es el escarlata oscurecido para cuando toca texto o hace de
regla: #ff0000 sobre blanco da 4,0:1 y no pasa AA; #9e1008 da 8,3:1. El
amarillo solo se usa de fondo y no hay que tocarlo: tinta encima da
12,4:1. */
--pei-rojo:#ff0000; --pei-amarillo:#ffcc00; --pei-rojo-ui:#9e1008;
--tope:49px; /* alto real de la barra del 123; lo recalcula el JS */
/* Una sola medida para TODOS los bloques. La barra de secciones se iba a
1160 px y el resto se quedaba en 820: los márgenes bailaban entre bloques
y eso se lee como descuido aunque nadie sepa nombrarlo. */
--medida:820px;
/* Escala tipográfica: cinco niveles y nada entre medias. La personalidad se
construye con la escala, no con la fuente (cero webfonts). Lo que faltaba
no era un nivel más sino contraste entre los que había: los títulos de
sección se pintaban a 13 px versalitas, igual que un sello de metadato. */
--t-marca:28px; --t-seccion:24px; --t-ficha:19px; --t-menor:15px; --t-sello:13px;
/* Ritmo vertical en múltiplos de 4. El espacio es lo único que no cuesta un
byte y es lo que más se lee como "diseñado". */
/* Escala de espaciado. Subida un escalón completo: el diseño estaba
correcto en jerarquía pero leía apretado, y en una pantalla que se
consulta de pie y con una mano el aire es lo que separa "denso" de
"ilegible". El espacio no pesa bytes. */
--e1:10px; --e2:16px; --e3:26px; --e4:40px; --e5:60px;
}
/* maquinaria comparte el ámbar de ayuda a propósito: son la misma familia
("acá falta algo"). Lo que las separa en el mapa es el logo, no el color.
Los mismos hex viven en CATS.hex, porque un atributo fill de SVG no
resuelve var() de forma confiable en todos los navegadores. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--fondo);color:var(--tinta);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size:17px;line-height:1.5;
}
a{color:inherit}
:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
/* ── Barra fija de emergencia ─────────────────────── */
/* Regla 1: nunca se mueve de arriba de todo y nunca se oculta. Todo lo demás
que sea fijo se cuelga por debajo, midiendo su alto real (--tope) en vez de
asumir uno: el número estaba fijo en 39 px y la barra mide 56, así que la
fila de filtros quedaba 17 px tapada por detrás. */
.emergencia{
position:sticky;top:0;z-index:50;background:var(--alerta);color:#fff;
padding:6px 14px;display:flex;gap:12px;align-items:center;justify-content:space-between;
font-size:14px;font-weight:600;
}
.emergencia a{
background:#fff;color:var(--alerta);text-decoration:none;
padding:5px 12px;border-radius:3px;font-weight:700;white-space:nowrap;
/* 44 px de alto: es el control más importante de la página */
min-height:44px;display:inline-flex;align-items:center;
}
header{padding:var(--e4) 14px var(--e3);max-width:var(--medida);margin:0 auto}
/* Ojo: `.marca` ya está tomada por los SVG de los marcadores
(svgMarca). Esta es la del encabezado y va con otro nombre. */
.titular{display:flex;align-items:center;gap:11px;margin:0 0 var(--e2)}
h1{font-size:var(--t-marca);line-height:1.1;margin:0;font-weight:800;letter-spacing:-.022em}
.bandera{flex:0 0 auto;display:block}
/* Nivel de sello porque eso es: una procedencia, no un titular. Discreta y
legible al tiempo. Es colaboración, no un portal oficial: sin escudo y sin
nada de la identidad visual del municipio. */
.civico{
margin:0 0 var(--e2);font-size:var(--t-sello);font-weight:700;color:var(--gris);
text-transform:uppercase;letter-spacing:.07em;line-height:1.5;
border-left:3px solid var(--pei-rojo-ui);padding-left:10px;
}
/* Sin medida propia: cortada a 58ch terminaba 300 px antes que el aviso de
abajo, y dos bloques seguidos con borde derecho distinto se leen como un
error de maquetación, no como una decisión. */
.sub{color:var(--gris);font-size:16px;margin:0}
/* Mismo nivel de sello: el encabezado queda enmarcado por dos y nada más. */
.sello{
font-size:var(--t-sello);text-transform:uppercase;letter-spacing:.09em;
color:var(--gris);font-weight:700;
margin:var(--e3) 0 0;padding-top:var(--e2);border-top:1px solid var(--linea);
}
/* ── Aviso ────────────────────────────────────────── */
/* Eran dos cajas grises idénticas, y dos cajas idénticas no tienen jerarquía
entre sí. Ahora, reglas finas sobre blanco: tinta el aviso general, alerta
el de personas desaparecidas. El texto no se achica —las advertencias van
arriba y en grande—; lo que se va es el peso del contenedor. */
.aviso{
max-width:var(--medida);margin:var(--e3) auto;padding:var(--e2) 14px 0;
font-size:16px;border-top:2px solid var(--tinta);
}
.aviso strong{
display:block;margin-bottom:5px;color:var(--tinta);
font-size:var(--t-sello);text-transform:uppercase;letter-spacing:.08em;font-weight:800;
}
.aviso.grave{border-top-color:var(--alerta)}
.aviso.grave strong{color:var(--alerta)}
/* ── Barra de secciones ───────────────────────────── */
/* Debajo de la barra del 123 —que no se mueve nunca, regla 1— y encima del
título, que es donde se busca un menú. Lleva LAS OCHO SECCIONES y nada más:
la fila de etiquetas se fue a cada sección, que es donde filtra algo. Un
bloque fijo que crece se come la pantalla del teléfono.
En angosto, un desplegable de un toque (44 px, aria-expanded, Escape cierra
y devuelve el foco). Desde 760 px el mismo panel —el mismo DOM, no una
segunda lista que se desincronice— se abre solo y se vuelve fila.
El escarlata es el único color de la bandera que llega acá: es cromo, no
dato. Los chips siguen usando el color de su categoría. */
.nav{
position:sticky;top:var(--tope);z-index:40;background:var(--fondo);
border-bottom:2px solid var(--pei-rojo-ui);
}
.nav-int{padding:9px 14px;max-width:var(--medida);margin:0 auto}
/* El menú es la navegación principal de la página: tiene que verse como tal.
52 px de alto y 17 px de texto — el mismo cuerpo del contenido, no el de un
pie de página. Antes competía en tamaño con un dato secundario. */
.menu-btn{
width:100%;min-height:52px;display:flex;align-items:center;gap:10px;
border:2px solid var(--tinta);background:#fff;color:var(--tinta);
font-family:inherit;font-size:17px;font-weight:700;text-align:left;
padding:10px 14px;border-radius:3px;cursor:pointer;
}
.menu-btn[data-activo]{background:var(--tinta);color:#fff}
.menu-rot{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-flecha{flex:0 0 auto;font-size:11px;line-height:1}
.menu-panel{
position:absolute;left:0;right:0;top:100%;z-index:46;display:none;
background:var(--fondo);border-bottom:1px solid var(--linea);
padding:var(--e2) 14px var(--e3);max-height:min(72vh,470px);overflow-y:auto;
}
.menu[data-abierto] .menu-panel{display:block}
.menu-tit{
margin:0 0 var(--e1);font-size:12px;text-transform:uppercase;letter-spacing:.09em;
font-weight:800;color:var(--gris);
}
.chips{display:flex;flex-direction:column;gap:8px}
.chip{
width:100%;border:1.5px solid var(--linea);background:#fff;color:var(--tinta);
padding:12px 15px;border-radius:3px;font-size:16px;font-weight:600;
cursor:pointer;min-height:50px;font-family:inherit;text-align:left;
display:flex;align-items:center;gap:11px;
}
.chip[aria-pressed="true"]{background:var(--tinta);color:#fff;border-color:var(--tinta)}
/* Ancho: el panel se abre solo y deja de ser una fila de nueve cajas. La
pestaña activa se marca con regla Y peso, dos canales y no solo el color. */
@media (min-width:760px){
.nav-int{padding:0 14px}
.menu-btn,.menu-tit{display:none}
.menu-panel{
position:static;display:block;max-height:none;overflow:visible;
padding:0;border-bottom:0;background:none;
}
/* El -10px compensa el padding del primer chip: sin él la primera pestaña
empieza 10 px más adentro que el título y ese escalón se ve. */
.chips{flex-direction:row;flex-wrap:wrap;gap:0 3px;margin-left:-10px}
.chip{
width:auto;flex:0 0 auto;white-space:nowrap;padding:10px;
border:0;border-bottom:3px solid transparent;border-radius:0;background:none;
}
.chip[aria-pressed="true"]{
background:none;color:var(--tinta);
border-bottom-color:var(--tinta);font-weight:800;
}
}
body{padding-bottom:76px} /* el botón fijo de pedir/ofrecer no tape la última ficha */
main{max-width:var(--medida);margin:0 auto;padding:0 14px var(--e5)}
/* Cuatro trabajos de diez segundos, antes de la lista larga. El color de
categoría va en una regla de 3 px: es el mismo código que las fichas, no
un segundo sistema. */
.atajos{
display:grid;grid-template-columns:1fr 1fr;gap:10px;
max-width:var(--medida);margin:var(--e2) auto 0;padding:0 14px;
}
.atajo{
min-height:52px;padding:10px 12px;text-align:left;
border:1.5px solid var(--linea);background:#fff;color:var(--tinta);
font-family:inherit;cursor:pointer;border-radius:3px;
border-left-width:4px;
display:flex;flex-direction:column;justify-content:center;gap:1px;
}
.atajo b{font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.atajo span{font-size:12.5px;color:var(--gris);font-weight:600}
.atajo[aria-pressed="true"]{border-color:var(--tinta);background:var(--papel)}
/* ── Vista: buscar + mapa ─────────────────────────── */
.vista{
display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;
margin-top:var(--e3);
}
.busca{flex:1 1 200px;min-width:0}
.busca input{
width:100%;min-height:44px;font-family:inherit;font-size:16px;
padding:10px 12px;border:1.5px solid var(--tinta);background:#fff;
color:var(--tinta);border-radius:0;
}
.busca input:focus{outline:3px solid var(--tinta);outline-offset:2px}
.cuenta-busca{
flex:1 0 100%;margin:0;font-size:13.5px;color:var(--gris);font-weight:600;
}
.btn-vista{
border:1.5px solid var(--tinta);background:#fff;color:var(--tinta);
font-family:inherit;font-size:14.5px;font-weight:700;padding:10px 14px;
min-height:44px;cursor:pointer;border-radius:3px;flex:0 0 auto;
}
#mapa-caja[hidden],#lista[hidden]{display:none}
#mapa-caja{position:relative;z-index:0}
#mapa{
/* Leaflet pone panes y controles en position:absolute;top:0. Sin un
contenedor posicionado, el ancestro más cercano es la ventana y el
mapa se pinta encima del 123 y de las secciones. */
position:relative;z-index:0;overflow:hidden;isolation:isolate;
height:min(62vh,520px);min-height:290px;margin-top:12px;
border:1px solid var(--linea);background:var(--papel);
}
.mapa-nota{
margin-top:12px;padding:13px 15px;background:var(--papel);
border-left:4px solid var(--tinta);font-size:15px;
}
.mapa-nota strong{display:block;margin-bottom:3px}
.leyenda{
display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;
font-size:13px;color:var(--gris);font-weight:600;
}
.leyenda span{display:inline-flex;align-items:center;gap:6px}
/* Leaflet trae esquinas de 12 px y sombras: acá no. */
.leaflet-popup-content-wrapper,.leaflet-popup-tip{border-radius:2px;box-shadow:none}
.leaflet-popup-content-wrapper{border:1px solid var(--tinta);padding:0}
.leaflet-popup-content{margin:0;font:inherit}
.leaflet-popup-content .tarjeta{border:none;margin:0}
.leaflet-container{
position:relative;z-index:0;overflow:hidden;
font:inherit;background:#d8d8d8;
}
.leaflet-container a.leaflet-popup-close-button{
width:34px;height:34px;font-size:22px;padding:6px 6px 0 0;color:var(--gris);
}
.leaflet-div-icon{background:transparent;border:none}
.marca{display:block;flex-shrink:0}
/* ── Tarjetas ─────────────────────────────────────── */
/* Estaban a 13 px versalitas: el nivel de un sello de metadato, así que había
tamaños pero no jerarquía. El separador entre grupos son los 48 px de aire
de arriba, no una caja. */
.grupo{margin-top:var(--e5)}
.grupo > h2,.tit{
font-size:var(--t-seccion);font-weight:700;letter-spacing:-.015em;
color:var(--tinta);margin:0 0 var(--e2);line-height:1.2;
padding-bottom:var(--e1);border-bottom:1px solid var(--tinta);
}
/* ── Filtro por etiqueta, DENTRO de cada sección ──── */
/* Estaba pegado al menú fijo, ocupando alto permanente y mintiendo: las
etiquetas de "Albergues" no son las de "Dónde donar", y un filtro global
sobre dos vocabularios distintos no filtra, confunde. Acá filtra solo su
sección y se ve secundario a propósito —gris, borde de un pelo, sin forma ni
color de categoría—: refina el grupo, no navega. Con menos de dos etiquetas
distintas no se pinta: un solo filtro no filtra nada. */
.filtros{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 var(--e3)}
.filtros .rot{
flex:0 0 auto;margin-right:2px;font-size:12px;font-weight:700;
text-transform:uppercase;letter-spacing:.09em;color:var(--gris);
}
.f-tag{
font-family:inherit;font-size:14px;font-weight:600;color:var(--gris);
background:#fff;border:1px solid var(--linea);border-radius:3px;
padding:0 11px;min-height:44px;cursor:pointer;
}
/* Relleno gris: avisa "hay un filtro puesto y por eso ve menos de lo que hay",
y eso tiene que verse. */
.f-tag[aria-pressed="true"]{
background:var(--gris);color:#fff;border-color:var(--gris);font-weight:700;
}
/* "Todo" es el estado de reposo y va de reposo. Relleno como los demás, el
bloque más oscuro de la sección sería su fila de filtros —el refinamiento
gritando más que el contenido— justo cuando no hay nada que avisar. Queda
marcado por el borde y el peso: se sabe cuál está, sin ruido. */
.f-tag.f-todo[aria-pressed="true"]{
background:#fff;color:var(--tinta);border-color:var(--tinta);font-weight:700;
}
.tarjeta{border:1px solid var(--linea);margin-bottom:var(--e3);background:#fff}
.tarjeta.viejo{opacity:.62}
/* Una ficha de más de 48 h va al 62 % (regla de diseño, se queda), y a ese
nivel el gris sobre blanco cae a 2,58:1: medio texto de la ficha deja de
pasar AA justo donde más dudas hay. Se conserva el desvanecido y sube el
tono, que compuesto al 62 % aterriza entre 4,9 y 5,4:1. */
.tarjeta.viejo .dir,.tarjeta.viejo .tags li,
.tarjeta.viejo .btn.val,.tarjeta.viejo .f-viejo{color:var(--tinta)}
/* La franja de frescura: el elemento de firma */
.franja{
display:flex;justify-content:space-between;align-items:center;gap:10px;
padding:6px 13px;font-size:11.5px;font-weight:700;
text-transform:uppercase;letter-spacing:.08em;
}
/* Sin el opacity:.85 que tenía: costaba casi un punto de contraste sobre el
color de la categoría y dejaba albergue en 4,25:1, salud en 4,32 y mascotas
en 4,04, bajo AA. La jerarquía de la franja la dan la posición y la forma;
no hay por qué pagarla con contraste a 11,5 px bajo el sol. */
.franja .cat{display:inline-flex;align-items:center;gap:6px}
.f-fresco{color:#fff}
/* El fondo de la franja sólida es el color de la categoría, así que la tinta
se decide una por una. En blanco el ámbar da 3,73:1 y el verde de acopio
4,36:1, bajo AA; en negro, 5,64 y 4,82. Las otras cinco pasan en blanco
(4,95 a 8,34). No cambia ningún color de categoría —eso rompería el
código—, cambia la tinta de encima. */
.tarjeta[data-cat="acopio"] .f-fresco,
.tarjeta[data-cat="ayuda"] .f-fresco,
.tarjeta[data-cat="maquinaria"] .f-fresco{color:#000}
.f-medio{color:var(--tinta)}
.f-viejo{
background:var(--papel);color:var(--gris);
border-bottom:1px dashed var(--linea);
}
/* Punto resuelto: no se oculta. Alguien que vio el pedido circulando por
WhatsApp necesita poder confirmar que ya se resolvió.
La opacidad baja va en el cuerpo y no en la franja: atenuar la franja
dejaría el texto blanco sobre gris claro por debajo de AA. */
.f-cerrado{background:var(--gris);color:#fff}
.tarjeta.cerrado .cuerpo{opacity:.62}
/* ── Tags: el segundo eje. Grises a propósito ─────── */
.sellos{
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
margin:8px 0 0;min-height:32px;
}
.sellos .tags,.sellos .ubic,.sellos .estado{margin:0}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.tags li{
border:1px solid var(--linea);border-radius:3px;padding:2px 8px;
font-size:12.5px;font-weight:600;color:var(--gris);
}
/* ── Vacío: una invitación a actuar ───────────────── */
.vacio{
border:1px dashed var(--linea);padding:var(--e3) 15px;margin-bottom:var(--e2);
font-size:var(--t-menor);color:var(--gris);
}
.vacio p{margin:0 0 var(--e2)}
.vacio .btn{color:var(--tinta)}
.esq{
border:1px solid var(--linea);border-radius:var(--r);margin:0 0 var(--e3);
overflow:hidden;background:var(--papel);
}
.esq-franja{height:28px;background:#e4e8ed}
.esq-cuerpo{height:72px}
.cuerpo{
padding:var(--e2) 16px var(--e3);
display:grid;
grid-template-columns:minmax(0,1fr) 6.8rem;
grid-template-areas:
"tope tope"
"sellos sellos"
"aviso aviso"
"datos datos"
"pie pie";
gap:10px 12px;
}
.ficha-tope{
grid-area:tope;
display:grid;
grid-template-columns:minmax(0,1fr) 6.8rem;
gap:8px 12px;
align-items:start;
}
.ficha-titular{min-width:0}
.ficha-titular h3,.cuerpo h3{margin:0;font-size:var(--t-ficha);font-weight:700;letter-spacing:-.012em;line-height:1.25}
.ficha-titular .dir{margin:4px 0 0}
.ficha-sellos{
grid-area:sellos;
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
min-height:32px;
}
.ficha-sellos .tags,.ficha-sellos .ubic,.ficha-sellos .estado{margin:0}
.ficha-aviso{grid-area:aviso}
.ficha-aviso:empty,.ficha-datos:empty,.ficha-sellos:empty{display:none}
.ficha-datos{grid-area:datos}
.ficha-pie{grid-area:pie}
.lado{
box-sizing:border-box;min-width:6.6rem;width:6.8rem;text-align:center;
font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--gris);border:1px solid var(--linea);padding:3px 7px;border-radius:3px;
white-space:nowrap;justify-self:end;
}
.lado-vacio{visibility:hidden;border:0;padding:6px 0;min-height:28px}
/* ── Estado del anuncio ───────────────────────────────
Segundo eje de lectura, distinto de la categoría. El color de categoría
vive en la franja y en el marcador; acá el color dice en qué punto del
ciclo está el anuncio. Para que no dependa solo del color —sol directo,
daltonismo— cada estado lleva además su palabra y un punto de forma
distinta. Es el mismo criterio que ya usan los marcadores del mapa. */
.estado{
flex:0 0 auto;margin-top:3px;
display:inline-flex;align-items:center;gap:5px;
font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
padding:3px 8px;border-radius:3px;border:1.5px solid currentColor;
}
.estado::before{content:"";width:7px;height:7px;background:currentColor}
.e-nuevo{color:#0a5fa8} /* cuadrado azul */
.e-pendiente{color:#8a5a00} /* rombo ámbar */
.e-pendiente::before{transform:rotate(45deg)}
.e-verificado{color:#0b6b4a} /* círculo verde */
.e-verificado::before{border-radius:50%}
.e-atendiendo{color:#6b3fa0} /* triángulo morado */
.e-atendiendo::before{
width:0;height:0;background:none;
border-left:5px solid transparent;border-right:5px solid transparent;
border-bottom:9px solid currentColor;
}
.e-resuelto{color:#5b6470;background:var(--papel)} /* barra gris */
.e-resuelto::before{height:3px;width:9px}
/* Quién está atendiendo. Va arriba de los datos y no al final: el que llega
a esta ficha con un camión cargado tiene que verlo antes de arrancar. */
.atiende{
margin:var(--e2) 0 0;padding:10px 12px;border-left:3px solid #6b3fa0;
background:var(--papel);font-size:var(--t-menor);
}
.atiende b{color:var(--tinta)}
.cerrada-nota{
margin:var(--e2) 0 0;padding:10px 12px;border-left:3px solid var(--gris);
background:var(--papel);font-size:var(--t-menor);color:var(--gris);
}
.dir{margin:0 0 var(--e2);color:var(--gris);font-size:var(--t-menor)}
.credito{margin-top:var(--e3);font-size:13px;color:var(--gris)}
/* El desarrollo de un aviso: el resumen se ve como un control, no como más
texto, para que se note que hay algo debajo y no quede escondido. */
.aviso details{margin-top:var(--e1)}
.aviso summary{
cursor:pointer;font-weight:700;font-size:14px;padding:6px 0;
min-height:32px;display:flex;align-items:center;gap:6px;
}
.aviso summary::marker{color:var(--gris)}
.aviso details p{margin:var(--e1) 0 0}
.dato details{margin:5px 0}
.dato details p{margin:8px 0 0;font-weight:400}
.mas{
display:block;width:100%;margin-top:4px;
border:1.5px dashed var(--linea);background:#fff;color:var(--tinta);
font-family:inherit;font-size:14.5px;font-weight:700;
padding:12px;min-height:44px;cursor:pointer;
}
.dato{margin:5px 0;font-size:var(--t-menor)}
.dato b{font-weight:700}
.ojo{
margin:10px 0 0;padding:9px 11px;background:var(--papel);
font-size:14.5px;border-left:3px solid var(--ayuda);
}
.ojo.grave{border-left-color:var(--alerta)}
.acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.btn{
display:inline-block;text-decoration:none;font-size:14.5px;font-weight:700;
padding:10px 14px;border:1.5px solid var(--tinta);color:var(--tinta);
background:#fff;min-height:44px;line-height:1.4;
font-family:inherit;cursor:pointer;
}
.btn.solido{background:var(--tinta);color:#fff}
.btn.val{border-color:var(--linea);color:var(--gris);font-weight:600}
/* ── Viviendas ────────────────────────────────────── */
/* El sello de la ficha: lo primero que se lee después del nombre. Quien
perdió la casa y el ingreso el mismo día necesita distinguir de un vistazo
lo que no cuesta de lo que sí, y no puede hacerlo con un segundo color —el
color ya codifica categoría (regla 9)—. La diferencia va en relleno contra
contorno, que es el mismo truco de forma+color de los marcadores: el sólido
pesa más y se lee primero, y funciona en escala de grises y para cualquier
daltonismo. 7,23:1 en los dos sentidos sobre #992873. */
.sello-vv{
display:inline-block;margin:0 0 var(--e2);padding:5px 10px;
font-size:var(--t-sello);font-weight:800;text-transform:uppercase;
letter-spacing:.06em;line-height:1.2;
border:1.5px solid var(--vivienda);color:var(--vivienda);background:#fff;
}
.sello-vv.gratis{background:var(--vivienda);color:#fff}
/* La advertencia antiestafa va en la CABECERA de la sección, una vez, y no
repetida al final de cada tarjeta: al pie de la ficha nadie la lee, y
repetida diez veces se vuelve papel tapiz. Caja con borde de alerta, más
liviana que la del fraude general de abajo para que no compita con ella:
son la misma advertencia a dos escalas, no dos advertencias. */
.aviso-vv{
border:2px solid var(--alerta);padding:var(--e2) 13px;margin:0 0 var(--e3);
font-size:var(--t-menor);line-height:1.45;
}
.aviso-vv b{color:var(--alerta)}
.aviso-vv p{margin:0 0 7px}
.aviso-vv p:last-child{margin-bottom:0}
/* ── Bloque de fraude ─────────────────────────────── */
/* La única caja pesada que queda, y a propósito: es la sección más importante
y el fraude alrededor de este terremoto está confirmado. El título sube de
15 px versalitas al nivel de sección: las advertencias van en grande. */
.fraude{border:2px solid var(--alerta);margin-top:var(--e5)}
.fraude h2{
background:var(--alerta);color:#fff;margin:0;padding:var(--e2) 14px;
font-size:var(--t-seccion);font-weight:800;letter-spacing:-.01em;line-height:1.2;
border:0;
}
.fraude .cuerpo{padding:var(--e3) 14px}
.fraude ul{margin:0;padding-left:20px}
.fraude li{margin-bottom:var(--e2);font-size:16px}
/* ── Tabla de contactos ───────────────────────────── */
/* 15 px y no 16: un celular no se parte, y con un punto más la tabla se sale
cuatro píxeles a 320 px y aparece scroll horizontal en TODA la página. */
table{width:100%;border-collapse:collapse;font-size:var(--t-menor);margin-top:6px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--linea);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--gris)}
/* Un número de teléfono medía 24×17: imposible de acertar con el pulgar y en
movimiento. El margen negativo agranda el área tocable a 44 px sin mover
una sola fila de la tabla. */
td a{
font-weight:700;white-space:nowrap;display:inline-block;
min-height:44px;line-height:24px;padding:10px 6px;margin:-10px -6px;
}
footer{
border-top:3px solid var(--pei-rojo-ui);margin:var(--e5) auto 0;
padding:var(--e4) 14px var(--e5);max-width:var(--medida);
color:var(--gris);font-size:var(--t-menor);
}
/* Una línea de 100 caracteres no se lee, se recorre. */
footer p{margin:0 0 var(--e2);max-width:72ch}
footer b{color:var(--tinta)}
footer h2{
font-size:var(--t-sello);text-transform:uppercase;letter-spacing:.09em;
font-weight:800;color:var(--gris);margin:var(--e4) 0 var(--e2);
padding-bottom:var(--e1);border-bottom:1px solid var(--linea);
}
/* Único bloque relleno del pie, sobre el amarillo de la bandera: 12,4:1. */
.civica{
background:var(--pei-amarillo);color:var(--tinta);max-width:none;
padding:var(--e2) 14px;margin:0 0 var(--e3);font-size:var(--t-menor);
}
/* ── Formulario ───────────────────────────────────── */
.velo{
position:fixed;inset:0;z-index:100;background:rgba(17,20,24,.55);
display:none;align-items:flex-end;justify-content:center;
}
.velo[open]{display:flex}
.hoja{
background:#fff;width:100%;max-width:560px;max-height:92vh;overflow-y:auto;
border-top:4px solid var(--tinta);
}
@media (min-width:600px){
.velo{align-items:center}
.hoja{border:1px solid var(--tinta);border-top-width:4px}
}
.hoja-tope{
display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
padding:16px 16px 10px;border-bottom:1px solid var(--linea);
position:sticky;top:0;background:#fff;
}
.hoja-tope h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em}
.hoja-tope p{margin:3px 0 0;font-size:14px;color:var(--gris)}
.cerrar{
border:none;background:none;font-size:28px;line-height:1;color:var(--gris);
cursor:pointer;padding:0 4px;min-width:44px;min-height:44px;font-family:inherit;
}
.hoja-cuerpo{padding:16px}
fieldset{border:none;padding:0;margin:0 0 18px}
legend,.etiq{
font-size:12px;text-transform:uppercase;letter-spacing:.08em;
font-weight:800;color:var(--gris);margin-bottom:8px;display:block;padding:0;
}
.opcion{
display:flex;gap:11px;align-items:flex-start;
border:1.5px solid var(--linea);padding:12px 13px;margin-bottom:8px;cursor:pointer;
}
.opcion:has(input:checked){border-color:var(--tinta);background:var(--papel)}
.opcion input{margin:3px 0 0;width:19px;height:19px;flex:0 0 auto;accent-color:var(--tinta)}
.opcion b{display:block;font-size:16px;font-weight:700}
.opcion span{display:block;font-size:14px;color:var(--gris);margin-top:2px}
label.campo{display:block;margin-bottom:15px}
input[type=text],textarea,select{
width:100%;font-family:inherit;font-size:16px;padding:11px 12px;
border:1.5px solid var(--linea);background:#fff;color:var(--tinta);border-radius:0;
}
input[type=text]:focus,textarea:focus,select:focus{border-color:var(--tinta)}
textarea{min-height:96px;resize:vertical}
.pista{display:block;font-size:13.5px;color:var(--gris);margin:5px 0 0}
.enviar{
width:100%;background:var(--tinta);color:#fff;border:none;
padding:15px;font-size:17px;font-weight:700;font-family:inherit;
cursor:pointer;min-height:52px;
}
.enviar:disabled{opacity:.5;cursor:default}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{padding:12px 13px;font-size:15px;margin-bottom:15px;display:none}
.msg[data-t=ok]{display:block;background:#e8f4ee;border-left:4px solid var(--acopio)}
.msg[data-t=error]{display:block;background:#fbeae7;border-left:4px solid var(--alerta)}
/* Ni éxito ni error: publicó, pero le va a servir de poco. */
.msg[data-t=aviso]{display:block;background:#fff8e6;border-left:4px solid var(--pei-amarillo)}
.ojo-consentimiento{color:var(--alerta)}
/* El aviso de alguien que pasó por ahí. Va con el amarillo de la ciudad: no
es una advertencia grave ni un dato verificado, es lo último que se supo. */
.nota-com{
margin:var(--e2) 0 0;padding:11px 13px;background:#fff8e6;
border-left:4px solid var(--pei-amarillo);font-size:var(--t-menor);
}
.nota-com span{display:block;margin-top:4px;font-size:12.5px;color:var(--gris)}
.solo-nuevo{display:none}
.hoja[data-modo=nuevo] .solo-nuevo{display:block}
.hoja[data-modo=nuevo] .solo-existente{display:none}
/* Sitio: los cinco verbos. Pedido suelto: no "estuve ahí". Directorio
(cuentas, "no vaya", teléfono): solo "el dato cambió". */
.hoja[data-clase=aviso] .op-sitio{display:none}
.hoja[data-clase=dato] .op-sitio,
.hoja[data-clase=dato] .op-aviso{display:none}
@media (prefers-reduced-motion:no-preference){
.tarjeta{transition:opacity .2s}
}
/* Desde 900 px las tarjetas van de a dos: se leen de arriba abajo por columna,
así que el orden por frescura se mantiene, y la página deja de ser una tira
de cuatro metros en un monitor. La medida NO crece: 820 px es la línea que
se lee, y estirarla hasta el borde sería llenar la pantalla, no diseñarla. */
@media (min-width:900px){
.rejilla{columns:2;column-gap:var(--e3)}
.rejilla > .tarjeta{break-inside:avoid;margin:0 0 var(--e3)}
}
/* Recuperar alto en el teléfono apretando el aire y la escala, nunca el texto
de las advertencias. */
@media (max-width:560px){
:root{--t-marca:25px;--t-seccion:21px;--e5:44px;--e4:32px;--e3:22px}
header{padding:var(--e3) 14px var(--e2)}
.aviso{margin:var(--e2) auto}
}
@media (max-width:380px){
:root{--t-marca:23px;--t-seccion:20px}
body{font-size:16px}
/* A 320 px la tabla de teléfonos se salía tres píxeles y aparecía scroll
horizontal en toda la página. Los números siguen sin partirse. */
th,td{padding:10px 4px}
td a{padding:10px 4px;margin:-10px -4px}
}
/* ═══════════════════════════════════════════════════════
CAPA VISUAL — modernización
═══════════════════════════════════════════════════════
Las reglas originales prohibían sombras, gradientes y radios mayores a
4 px. Nacieron de una preocupación correcta —que la página abra con 15 %
de batería y la red saturada— pero apuntaban al blanco equivocado: lo que
pesa son las webfonts, las imágenes y los frameworks, no un `border-radius`.
Un radio, una sombra difusa y una transición de 120 ms cuestan cero bytes
de red y se pintan en la GPU.
Lo que NO se relaja, porque ahí sí estaba el argumento: cero webfonts, cero
imágenes externas, cero librerías de estilo, blanco puro de fondo, contraste
AA, y el color sigue codificando categoría y no decorando. La franja de
frescura sigue siendo el elemento de firma.
═══════════════════════════════════════════════════════ */
:root{
--r:12px; /* radio de superficie: tarjetas, avisos, paneles */
--r-s:9px; /* radio de control: botones, campos */
--r-pill:999px; /* chips y etiquetas */
/* Sombras de dos capas: un contacto corto y cerrado que asienta el elemento,
y una difusa y muy tenue que le da profundidad. Ambas en el gris del
texto y no en negro puro: el negro sobre blanco se ve sucio. */
--som:0 1px 2px rgba(17,20,24,.06), 0 2px 8px rgba(17,20,24,.05);
--som-alta:0 2px 4px rgba(17,20,24,.07), 0 8px 24px rgba(17,20,24,.08);
}
/* ── Superficies ─────────────────────────────────────── */
.tarjeta{
border:1px solid rgba(17,20,24,.07);
border-radius:var(--r);overflow:hidden;box-shadow:var(--som);
transition:box-shadow .14s ease, transform .14s ease;
}
@media (hover:hover){
.tarjeta:hover{box-shadow:var(--som-alta);transform:translateY(-1px)}
}
.franja{border-radius:0}
.aviso{border-radius:var(--r);border-left-width:5px;box-shadow:var(--som)}
.fraude{border-radius:var(--r);overflow:hidden;box-shadow:var(--som)}
.fraude h2{border-radius:0}
.atajo{
border-radius:var(--r);box-shadow:var(--som);border-width:1px;
border-left-width:5px;
transition:box-shadow .14s ease, transform .14s ease;
}
@media (hover:hover){
.atajo:hover{box-shadow:var(--som-alta);transform:translateY(-1px)}
}
.menu-panel{border-radius:0 0 var(--r) var(--r);box-shadow:var(--som-alta)}
.hoja{border-radius:var(--r) var(--r) 0 0}
/* ── Controles ───────────────────────────────────────── */
.btn{border-radius:var(--r-s);transition:background-color .12s ease, color .12s ease}
.btn.solido{box-shadow:var(--som)}
.menu-btn{border-radius:var(--r-s);box-shadow:var(--som)}
.chip{border-radius:var(--r-pill);padding-left:17px;padding-right:17px}
.busca input,.busca{border-radius:var(--r-pill)}
input[type="text"],input[type="search"],input[type="tel"],textarea,select{
border-radius:var(--r-s);
}
#btn-nuevo{border-radius:var(--r-pill);box-shadow:var(--som-alta)}
/* ── Etiquetas y estados ─────────────────────────────── */
.tags li,.estado,.lado{border-radius:var(--r-pill)}
.tags li{padding-left:11px;padding-right:11px}
.atiende,.cerrada-nota{border-radius:0 var(--r-s) var(--r-s) 0}
.ojo{border-radius:0 var(--r-s) var(--r-s) 0}
/* ── Menú de secciones: una sola línea ───────────────────
Antes era un desplegable que ocupaba tres renglones y escondía las
secciones detrás de un toque. Ahora es una fila de píldoras que se
desliza con el pulgar, como las pestañas de cualquier app: se ve todo
de una, ocupa 56 px y no hay nada que abrir. El botón desaparece: sin
panel que colapsar, no hace falta. */
.menu-btn,.menu-tit{display:none}
.menu-panel{
position:static;display:block;max-height:none;overflow:visible;
padding:0;border:0;box-shadow:none;background:none;
}
.nav-int{padding:0}
.chips{
flex-direction:row;flex-wrap:nowrap;gap:8px;
overflow-x:auto;overscroll-behavior-x:contain;
/* `min(...)`, no `var(--medida)` a secas: la medida vale 820 px y en una
pantalla de 390 se convertía en un ancho mínimo que empujaba la página
entera hacia la derecha. El desbordamiento tiene que quedar dentro del
contenedor que scrollea, nunca en el documento. */
padding:9px 14px;margin:0 auto;max-width:min(var(--medida),100%);
scrollbar-width:none;-webkit-overflow-scrolling:touch;
scroll-snap-type:x proximity;
}
.chips::-webkit-scrollbar{display:none}
/* Señal de que la fila sigue. Sin esto, quien no arrastre por casualidad
nunca se entera de que hay más secciones a la derecha: el contenido
cortado a ras del borde se lee como contenido terminado. */
.nav{position:sticky;overflow:hidden}
.nav::after{
content:"";position:absolute;top:0;right:0;bottom:0;width:34px;
background:linear-gradient(to right, rgba(255,255,255,0), #fff 78%);
pointer-events:none;
}
@media (min-width:760px){
/* Con ancho de sobra no hace falta insinuar nada, pero tampoco centrar:
centrado, el chip que no cabe cae solo a una segunda línea y queda
flotando en el medio. Alineadas a la izquierda leen como una barra de
pestañas. */
.chips{justify-content:flex-start;flex-wrap:wrap;overflow-x:visible;row-gap:8px}
.nav::after{display:none}
/* Las diez secciones tienen que caber en un renglón: con el espaciado
anterior la última —Viviendas— se caía sola a una segunda línea dejando
un hueco de cien píxeles a su derecha, que se lee como un error de
maquetación. Se aprieta lo justo para que entren, sin bajar de 44 px
de alto ni de 14 px de texto. */
/* Un solo mecanismo de separación, no dos: `gap` y `margin-right` se
estaban sumando (8 + 4 por chip) y esos 108 px de más eran justo lo que
tiraba "Viviendas" al segundo renglón. */
/* Con `.nav` delante: la capa de estilo posterior vuelve a poner
`margin-right:8px` en `.chip`, y esos 80 px eran justo lo que tiraba
"Viviendas" al segundo renglón. */
.nav .chips{gap:5px;row-gap:5px}
.nav .chip{padding:9px 10px;margin-right:0;font-size:13.5px;gap:7px}
.nav .chip svg{margin-right:-3px}
/* El menú no se ata a la columna de lectura: es cromo y puede usar el
ancho entero de la ventana. Encerrado en los 1180 px del contenido, las
diez secciones sumaban 1445 y la última caía sola a un segundo renglón
con cien píxeles vacíos al lado. */
.chips,.nav-int{max-width:none;padding-left:20px;padding-right:20px}
/* `width:max-content` con márgenes automáticos: la fila mide exactamente
lo que ocupan las diez secciones y se centra en la ventana. Con
`justify-content:center` a secas, el día que no quepan el último chip
cae solo al medio del segundo renglón; así, si algún día no caben,
simplemente se ajusta al ancho disponible y sigue centrada. */
.chips{
padding-left:0;padding-right:0;
width:max-content;max-width:100%;margin-left:auto;margin-right:auto;
}
}
.chip{
width:auto;flex:0 0 auto;min-height:42px;padding:9px 16px;
font-size:14.5px;scroll-snap-align:start;
}
/* La sección activa se marca con relleno Y peso, no solo con color. */
.chip[aria-pressed="true"]{font-weight:800}
/* ── Donar ───────────────────────────────────────────────
Va en la barra de arriba, al lado del 123 y no en su lugar: los dos son
acciones de un toque desde cualquier punto de la página. El 123 se queda
porque alguien puede entrar acá con un herido al lado. */
/* ═══ Marca: la bandera como estructura ═══════════════════
Rojo y amarillo de Pereira ya estaban ocupados por el código de color
(rojo = salud, ámbar = piden ayuda). Conviven separándolos por material,
no por matiz: la marca ocupa SUPERFICIES grandes y planas —la barra, el
bloque de donar—, y las categorías son MARCAS pequeñas con forma propia,
de 11 a 13 px. Un rojo de ancho completo y un rombo rojo de 11 px no se
confunden nunca. Así el escudo cromático de la ciudad entra sin pisar el
significado de un solo dato.
El encabezado es la bandera literal: campo escarlata y el filo amarillo
debajo. Ese filo es el único adorno de la página, y es información: marca
dónde termina lo que nunca cambia (el 123) y empieza lo que sí. */
.emergencia{
gap:10px;background:var(--pei-rojo-ui);
border-bottom:4px solid var(--pei-amarillo);
/* El fondo rojo cruza la pantalla entera, pero el contenido se alinea con
la columna del resto de la página: en un monitor ancho, el 123 pegado al
borde derecho queda a medio metro del texto con el que se relaciona. */
padding-left:max(14px, calc((100% - var(--medida)) / 2));
padding-right:max(14px, calc((100% - var(--medida)) / 2));
}
.emergencia a{border-radius:var(--r-pill);font-weight:800}
/* Donar: uno solo, en el amarillo de la bandera. El amarillo sobre tinta da
14:1 —el contraste más alto de la página, más que el negro sobre blanco—,
así que el bloque más visible del sitio es también el más legible bajo el
sol. Y no compite con ninguna categoría: ninguna es amarilla. */
.donar-hero{
display:flex;align-items:center;justify-content:space-between;gap:14px;
flex-wrap:wrap;
max-width:var(--medida);margin:var(--e3) auto 0;padding:18px;
background:var(--pei-amarillo);color:var(--tinta);
border-radius:var(--r);box-shadow:var(--som);
border-left:6px solid var(--pei-rojo-ui);
}
.donar-hero b{display:block;font-size:20px;letter-spacing:-.02em;line-height:1.2}
.donar-hero span{font-size:14.5px;line-height:1.5}
.donar-hero > div{flex:1 1 260px}
.donar-hero a{
background:var(--tinta);color:#fff;text-decoration:none;
padding:14px 22px;border-radius:var(--r-pill);font-weight:800;font-size:16px;
min-height:48px;display:inline-flex;align-items:center;justify-content:center;
box-shadow:var(--som);
}
@media (max-width:560px){
/* Espacio abajo para que el botón flotante no se coma la llave: es el dato
que la persona vino a copiar. */
.donar-hero{margin-left:14px;margin-right:14px;padding-bottom:72px}
/* No a todo el ancho: el botón flotante vive en la esquina inferior
derecha y le caía justo encima al de copiar la llave. Alineado a la
izquierda, los dos conviven sin estorbarse. */
.donar-hero a{align-self:flex-start}
}
/* El flotante toma el rojo de la ciudad: en una paleta de dos colores, un
negro suelto se lee como un elemento de otra página. Los estilos estaban
en el atributo `style`, donde ninguna hoja podía alcanzarlos; ahora viven
acá y se pueden ajustar por ancho como cualquier otra cosa. */
#btn-nuevo{
position:fixed;right:16px;bottom:16px;z-index:45;
background:var(--pei-rojo-ui);color:#fff;border:2px solid var(--pei-amarillo);
padding:14px 20px;font-size:15px;font-weight:800;font-family:inherit;
cursor:pointer;min-height:52px;border-radius:var(--r-pill);
box-shadow:var(--som-alta);
}
/* ═══ Escritorio: dos columnas ════════════════════════════
Una sola columna estirada en un monitor de 1900 px no es un diseño de
escritorio, es un diseño de teléfono con los márgenes crecidos. La página
tiene dos clases de contenido y ahora cada una tiene su lugar:
· Izquierda, lo que se viene a buscar: el directorio.
· Derecha, lo que hay que tener a mano sin ir a buscarlo: donar, cómo
buscar a una persona, las estafas activas y los teléfonos. Queda fijo
al desplazar, porque son las cuatro cosas que se necesitan en cualquier
momento de la visita, no al final.
En el teléfono el grid se apaga y todo vuelve a una columna, en el mismo
orden en que está escrito. */
.marco{max-width:min(var(--medida),100%);margin:0 auto;padding:0 14px}
/* En el teléfono no hay dos columnas, pero el orden del escritorio dejaría
donar al final, después de ochenta fichas. `display:contents` disuelve las
dos columnas y deja ordenar los bloques uno por uno: primero a dónde ir,
después cómo ayudar, y al final lo que se lee una sola vez. */
@media (max-width:1099px){
.marco{display:flex;flex-direction:column;padding:0}
.principal,.lateral{display:contents}
/* Un elemento flex trae `min-width:auto` y se niega a encogerse por debajo
de su contenido: `main`, con su medida de 820 px, empujaba la página a
820 en una pantalla de 390 y aparecía barra horizontal. */
.principal > *,.lateral > *{min-width:0;max-width:100%}
/* En el teléfono, primero lo que se vino a buscar.
El inventario no tenía `order`, así que caía en 0 y se pintaba antes que
el propio encabezado: 1.423 px de tarjetas informativas, más los atajos y
tres avisos, dejaban la primera publicación a 4.344 px — cinco pantallas
de scroll. Quien llega con la casa en el suelo no baja cinco pantallas;
concluye que la página no tiene la información y se va.
Ahora: encabezado, la lista y el mapa, y de ahí para abajo lo que se lee
una sola vez, avisos incluidos.
Y va acotado a la página que tiene dos columnas —la única con `.lateral`—
porque este orden es la respuesta a un problema del directorio y de nadie
más. Sin acotar, el `display:contents` de arriba aplanaba también donar,
ayudas y la guía, y ahí cualquier bloque sin `order` caía en 0 y se
pintaba ANTES del encabezado: en donar, las cuentas, las evidencias y el
pie salían primero, y el título con el bloque de aportar quedaban al
final, después del pie. Una página de donaciones que empieza por el pie
no la lee nadie. */
.marco:has(.lateral) .principal > header{order:1}
.marco:has(.lateral) .principal > main{order:2}
.marco:has(.lateral) .inventario{order:3}
.marco:has(.lateral) .aviso:not(.grave){order:4}
.marco:has(.lateral) .aviso.grave{order:5}
.marco:has(.lateral) .donar-hero{order:6}
.marco:has(.lateral) .fraude{order:7}
.marco:has(.lateral) .lateral > section:not(.fraude){order:8}
/* En vista mapa, el mapa primero. Quien tocó "Mapa" ya dijo lo que quiere, y
el encabezado son 671 px de logo, título y cifras que lo empujaban a 1,4
pantallas de distancia. Los mismos 671 px siguen ahí, debajo. */
.marco:has(.lateral) .principal[data-vista="mapa"] > header{order:9}
}
@media (min-width:1100px){
/* Las dos columnas solo donde hay algo que poner en la segunda. Sin el
:has, la reserva de 370 px se aplicaba también a donar, a la guía y a los
artículos, que no tienen lateral: el contenido se quedaba en 722 px de un
marco de 1180 y sobraban quinientos píxeles de nada a la derecha. */
.marco:has(.lateral){
display:grid;
grid-template-columns:minmax(0,1fr) 370px;
column-gap:var(--e5);
align-items:start;
}
.lateral{position:sticky;top:calc(var(--tope) + 74px);display:grid;gap:var(--e3)}
/* Adentro de la columna nada necesita sus propios márgenes: los tenía
porque antes cada bloque se centraba solo en la página. */
.lateral > *,.principal > *{margin-left:0;margin-right:0;max-width:none}
.lateral .fraude,.lateral section{margin-top:0}
.principal > header{padding-left:0;padding-right:0}
.principal .atajos,.principal main{padding-left:0;padding-right:0;max-width:none}
.donar-hero{margin:0}
.donar-hero a{width:100%;justify-content:center}
/* La barra lateral es angosta: las fichas van a una columna adentro del
directorio, que ahora tiene ~740 px, no 1180. */
.rejilla{columns:1}
}
@media (min-width:1500px){
.marco{grid-template-columns:minmax(0,1fr) 400px}
/* Una sola columna de fichas, no dos. Con la barra lateral al costado, dos
columnas de fichas dan TRES columnas de texto compitiendo a la vez: la
página se lee saturada y ninguna gana. Ancha y una sola: cada ficha
respira y la vista baja en una sola línea de lectura. */
.principal .rejilla{columns:1}
.principal .tarjeta{max-width:74ch}
}
/* ── Ancho: usar el monitor, sin romper la lectura ───────
La columna de 820 px es la medida correcta para leer un párrafo —más allá
de unos 75 caracteres el ojo pierde el renglón al volver—, pero una
tarjeta no es un párrafo: es una ficha de datos cortos. Así que a partir
de 1000 px la página se ensancha y las tarjetas se reparten en columnas,
mientras el texto corrido conserva su medida. Dos anchos, cada uno para
lo que sirve. */
@media (min-width:1000px){
:root{--medida:1180px}
/* Una columna de fichas. La barra lateral ya aporta la segunda: sumar una
tercera satura y ninguna de las tres se lee bien. */
.rejilla{columns:1}
/* El texto largo no se estira aunque el contenedor sí: el bloque conserva
el ancho de la columna y es el PÁRRAFO el que se limita a la medida de
lectura. Limitar el bloque lo despegaba del resto y rompía la columna. */
footer p,.fraude .cuerpo p,.sub,.aviso > *{max-width:74ch}
header{padding-top:var(--e5)}
h1{font-size:38px}
}
@media (min-width:1500px){
:root{--medida:1440px}
.rejilla{columns:3}
}
/* ═══ Formulario ═════════════════════════════════════════
Es la única pantalla donde alguien escribe, y muchas veces la llena una
persona alterada, de pie, con una mano. Tres decisiones:
1. Las opciones son tarjetas que se tocan, no radios de 19 px.
2. Los campos son altos y de borde grueso: a media luz, un borde de 1 px
gris no se ve, y un campo que no se ve parece un campo que no existe.
3. Enviar queda pegado abajo: la hoja es larga, y el botón que confirma
no puede depender de que la persona llegue al final desplazándose. */
.hoja-tope{border-bottom:2px solid var(--linea)}
.hoja-cuerpo{padding:18px 16px 96px}
legend,.etiq{font-size:12.5px;letter-spacing:.1em;color:var(--tinta);font-weight:800}
.opcion{
border:2px solid var(--linea);border-radius:var(--r);padding:14px;
margin-bottom:10px;cursor:pointer;
transition:border-color .12s ease, background-color .12s ease;
}
.opcion:has(input:checked){
border-color:var(--pei-rojo-ui);background:#fff8f7;
}
.opcion input{width:22px;height:22px;accent-color:var(--pei-rojo-ui)}
.opcion:focus-within{outline:3px solid var(--pei-amarillo);outline-offset:2px}
input[type=text],input[type=search],input[type=tel],textarea,select{
border:2px solid var(--linea);border-radius:var(--r-s);
padding:13px 14px;min-height:52px;font-size:16px; /* 16 px: menos que eso
hace que el navegador móvil acerque la página sola al enfocar. */
background:#fff;width:100%;
}
input[type=text]:focus,textarea:focus,select:focus{
border-color:var(--pei-rojo-ui);outline:3px solid var(--pei-amarillo);outline-offset:1px;
}
textarea{min-height:120px}
.enviar{
position:sticky;bottom:0;z-index:2;width:100%;
background:var(--pei-rojo-ui);color:#fff;border:0;border-radius:var(--r-pill);
padding:16px;font-size:17px;font-weight:800;min-height:56px;
box-shadow:var(--som-alta);
}
.enviar:disabled{opacity:.55}
.msg{border-radius:var(--r-s)}
/* "Ver los 82": con el recorte, este botón es el que descubre el resto del
directorio. Con borde punteado y gris parecía deshabilitado. */
.mas{
border:2px solid var(--pei-rojo-ui);border-radius:var(--r-pill);
color:var(--pei-rojo-ui);font-weight:800;font-size:15px;
margin-top:var(--e2);min-height:48px;
}
/* Los filtros de etiqueta de cada sección, en una línea deslizable. Con 15
etiquetas y salto de línea ocupaban cinco renglones y empujaban las fichas
fuera de la pantalla: el filtro tapaba lo que se estaba filtrando. */
.filtros{
flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
-webkit-overflow-scrolling:touch;padding-bottom:2px;
}
.filtros::-webkit-scrollbar{display:none}
.filtros .rot,.f-tag{flex:0 0 auto}
.f-tag{border-radius:var(--r-pill);min-height:38px;padding:8px 14px}
/* Archivo de resueltas: lo que ya no se necesita sale de la lista viva pero
no desaparece. Quien vio el pedido circulando por WhatsApp entra a
confirmar que ya se resolvió, y si no lo encuentra, vuelve a pedirlo. */
.archivo{margin-top:var(--e2)}
.archivo > summary{
cursor:pointer;list-style:none;
border:1.5px dashed var(--linea);border-radius:var(--r-pill);
padding:11px 16px;min-height:44px;display:flex;align-items:center;gap:8px;
font-size:14.5px;font-weight:700;color:var(--gris);background:var(--papel);
}
.archivo > summary::-webkit-details-marker{display:none}
.archivo[open] > summary{margin-bottom:var(--e2)}
/* ═══════════════════════════════════════════════════════
REDISEÑO — carácter
═══════════════════════════════════════════════════════
Lo anterior era correcto y anodino: cincuenta fichas idénticas, borde
gris, todo del mismo peso. Sin webfonts la personalidad tiene que salir
de tres sitios, y de ninguno más: la ESCALA (saltos grandes, no rampas),
el PESO (800 contra 400, sin medias tintas) y el ESPACIO.
La franja de frescura deja de ser una cinta de color y pasa a ser el
elemento de marca: el número de horas grande a la izquierda, la palabra
en versalitas al lado. Es el dato que este directorio resuelve y que
ningún otro muestra, así que es el que se ve desde lejos.
═══════════════════════════════════════════════════════ */
/* ── Hero: la bandera a escala ─────────────────────────── */
.titular{align-items:center;gap:14px}
.bandera{width:54px;height:27px;flex:0 0 auto}
h1{
font-size:clamp(34px,7vw,52px);line-height:.95;letter-spacing:-.045em;
font-weight:800;
}
header{padding-bottom:var(--e2)}
.civico{
border-left:0;padding-left:0;
font-size:11.5px;letter-spacing:.14em;color:var(--gris);
}
.sub{font-size:18px;line-height:1.45;color:#2c333c;max-width:52ch}
.sello{
font-size:11px;letter-spacing:.16em;color:var(--gris);
border-top:2px solid var(--tinta);padding-top:10px;display:inline-block;
}
/* ── Títulos de sección: la cifra manda ────────────────── */
.grupo > h2{
font-size:13px;letter-spacing:.18em;color:var(--tinta);font-weight:800;
border-bottom:3px solid var(--tinta);padding-bottom:9px;
display:flex;align-items:baseline;gap:10px;
}
/* ── Ficha: la frescura como marca ─────────────────────── */
.tarjeta{border:0;box-shadow:none;background:var(--fondo)}
.tarjeta:hover{transform:none;box-shadow:none}
.rejilla > .tarjeta{
border-top:2px solid var(--linea);border-radius:0;
padding-top:0;margin-bottom:var(--e4);
}
.franja{
padding:12px 0 10px;font-size:11px;letter-spacing:.15em;
background:none !important;color:var(--gris) !important;
border:0;justify-content:flex-start;gap:12px;
}
.franja::before{
content:"";width:11px;height:11px;flex:0 0 auto;border-radius:50%;
background:currentColor;
}
.f-fresco{color:var(--tinta) !important;font-weight:800}
.franja .cat{margin-left:auto;opacity:.75;white-space:nowrap;font-size:10px}
/* Contradicción viva: alguien fue y no estaba. Va en rojo y con el punto
lleno, porque es el dato que evita un viaje en vano. */
.f-contra{color:var(--alerta) !important;font-weight:800}
.franja > span:first-of-type{white-space:nowrap}
.cuerpo{padding:0 0 var(--e2)}
.tarjeta h3{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.dir{font-size:15px;color:var(--gris);margin-top:4px}
/* El color de categoría ya no pinta una cinta: es una barra corta y gruesa
sobre el borde superior de la ficha. Se ve de lejos, ocupa poco y no
compite con el amarillo de donar. */
.rejilla > .tarjeta{position:relative}
.rejilla > .tarjeta::before{
content:"";position:absolute;top:-2px;left:0;width:52px;height:4px;
background:var(--cat, var(--tinta));
}
.tarjeta[data-cat=acopio]{--cat:#0f8a5f}
.tarjeta[data-cat=albergue]{--cat:#1d6fb8}
.tarjeta[data-cat=hospital]{--cat:#c2381b}
.tarjeta[data-cat=ayuda]{--cat:#b8760f}
.tarjeta[data-cat=maquinaria]{--cat:#b8760f}
.tarjeta[data-cat=colapso]{--cat:#4a4e57}
.tarjeta[data-cat=donacion]{--cat:#6b3fa0}
.tarjeta[data-cat=mascota]{--cat:#0e7c86}
.tarjeta[data-cat=vivienda]{--cat:#992873}
.tarjeta[data-cat=psicologica]{--cat:#4c5fd7}
/* ── Botones: uno manda, el resto acompaña ─────────────── */
.btn{border:1.5px solid var(--linea);font-weight:700;padding:11px 16px}
.btn.solido{background:var(--tinta);border-color:var(--tinta)}
.btn.val{border-style:dashed}
.estado{border-width:1.5px;font-size:11px}
/* ── Encargarse de un pedido, ahí mismo en la tarjeta ──── */
.encargo{
border:2px solid var(--tinta);padding:14px;margin-top:var(--e1);
display:grid;gap:8px;max-width:420px;
}
.encargo input{width:100%}
.encargo-btns{display:flex;gap:8px;flex-wrap:wrap}
.encargo .pista{margin:0}
/* Aviso de resultado: abajo, sin robar el foco ni tapar la acción. */
#aviso-fugaz{
position:fixed;left:14px;right:14px;bottom:14px;z-index:60;
background:var(--tinta);color:#fff;padding:14px 16px;
font-size:15px;font-weight:700;line-height:1.35;
max-width:520px;margin:0 auto;display:none;
border-left:6px solid var(--pei-amarillo);
}
#aviso-fugaz[data-visible]{display:block}
#aviso-fugaz[data-malo="1"]{border-left-color:var(--alerta)}
/* ── Teléfonos: el número es el botón ──────────────────── */
.tels{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tels a{
display:grid;gap:2px;text-decoration:none;color:var(--tinta);
border:1.5px solid var(--linea);border-radius:var(--r-s);
padding:11px 14px;min-height:56px;align-content:center;
transition:border-color .12s ease,background-color .12s ease;
}
.tels a:hover{border-color:var(--tinta);background:var(--papel)}
.tels span{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--gris);font-weight:700}
.tels b{font-size:19px;font-weight:800;letter-spacing:-.02em}
.tels em{font-style:normal;font-size:11px;color:var(--gris);letter-spacing:.06em}
/* Los tres primeros son los que se marcan a gritos: van en negativo. */
.tels li:nth-child(-n+2) a{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.tels li:nth-child(-n+2) span{color:#fff;opacity:.75}
.tels li:first-child b{font-size:26px}
@media (min-width:560px) and (max-width:1099px){
.tels{grid-template-columns:1fr 1fr}
}
/* ── Pie: información, no un muro ──────────────────────── */
footer{border-top:3px solid var(--tinta);background:var(--fondo);padding-top:var(--e4)}
footer .interior,footer > *{max-width:none}
footer p{font-size:14.5px;line-height:1.55;color:#39424c;margin:0 0 var(--e3)}
footer p b:first-child{
display:block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
color:var(--tinta);margin-bottom:5px;
}
/* El bloque de colaboración institucional deja de ser una barra amarilla al
pie —donde gritaba más que el propio directorio— y pasa a ser una nota
con la regla de la ciudad al costado. Dice lo mismo, en su lugar. */
footer .civica{
background:none;border-left:4px solid var(--pei-amarillo);
padding:2px 0 2px 14px;font-size:13.5px;color:var(--gris);
}
footer .civica b:first-child{color:var(--tinta)}
.credito{
border-top:1px solid var(--linea);padding-top:var(--e2);
font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);
}
/* En pantalla ancha el texto del pie va en columnas: a una sola columna de
50 caracteres deja media pantalla vacía y se lee como un contrato. */
@media (min-width:900px){
footer{columns:2;column-gap:var(--e5)}
footer p{break-inside:avoid}
footer .civica,.credito{column-span:all}
}
/* ═══════════════════════════════════════════════════════
REDISEÑO INTEGRAL — "boletín de servicio público"
═══════════════════════════════════════════════════════
La dirección sale del contenido, no del gusto: esto es información
fechada, verificable y de utilidad pública. El lenguaje que le
corresponde es el del boletín impreso —reglas gruesas, versalitas,
cifras grandes, jerarquía sin medias tintas— y no el del panel de
administración con tarjetas flotando en gris, que es donde había caído.
Tres decisiones cargan el peso:
1. LA REGLA, no la caja. Los bloques se separan con líneas de 2 y 3 px en
vez de bordes que encierran: el ojo baja por la página en vez de
saltar entre recuadros.
2. LA CIFRA. Cada sección lleva su conteo en grande. "14" se lee de un
vistazo y es lo primero que quiere saber quien busca dónde llevar algo.
3. VERSALITAS con tracking ancho en todo lo que es etiqueta. Es lo que le
da voz propia a la página sin una sola webfont.
Se conserva lo que no se negocia: blanco puro, el color como código de
categoría, y la franja de frescura como elemento de firma.
═══════════════════════════════════════════════════════ */
:root{--regla:2px solid var(--tinta); --regla-fina:1px solid var(--linea)}
.emergencia{font-size:13px;letter-spacing:.05em;text-transform:uppercase;font-weight:800}
.nav{border-bottom:var(--regla)}
h1{font-size:clamp(36px,7.5vw,58px);letter-spacing:-.05em;line-height:.92}
.titular{gap:16px}
.bandera{width:58px;height:29px}
.civico{
margin-top:10px;font-size:11px;letter-spacing:.16em;font-weight:800;
color:var(--gris);text-transform:uppercase;
}
.sub{font-size:19px;line-height:1.4;color:#2c333c;max-width:46ch;margin-top:var(--e2)}
.sello{
border-top:var(--regla);margin-top:var(--e3);padding:8px 0 0;
font-size:11px;letter-spacing:.18em;font-weight:800;
}
/* Atajos: cuatro puertas, no cuatro tarjetas flotando */
.atajos{gap:0;border-top:var(--regla);border-bottom:var(--regla);margin-top:var(--e3)}
.atajo{
border:0;border-radius:0;box-shadow:none;background:none;
border-left:5px solid;padding:16px 14px;min-height:74px;
border-bottom:var(--regla-fina);
}
.atajo:hover{background:var(--papel);transform:none;box-shadow:none}
.atajo b{font-size:17px;letter-spacing:-.015em}
.atajo span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);font-weight:700}
.atajos > .atajo:nth-child(odd){border-right:var(--regla-fina)}
/* Sección: el rótulo en versalitas y la cifra en grande. Cuántos hay es lo
primero que quiere saber quien busca dónde llevar algo, y "14" se lee de
un vistazo donde "catorce centros de acopio" hay que leerlo entero. */
.grupo{margin-top:var(--e5)}
.grupo > h2{
border-bottom:3px solid var(--tinta);padding-bottom:6px;
font-size:12px;letter-spacing:.2em;font-weight:800;
display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.grupo > h2 .cifra{
font-size:32px;letter-spacing:-.05em;line-height:1;font-weight:800;
}
/* Ficha */
.rejilla > .tarjeta{border-top:var(--regla);margin-bottom:var(--e4)}
.rejilla > .tarjeta::before{height:5px;width:64px;top:-2px}
.tarjeta h3{font-size:22px;letter-spacing:-.025em;line-height:1.15}
.franja{font-size:10.5px;letter-spacing:.16em;padding:11px 0 9px}
.tags{gap:0}
.tags li{
border-radius:0;border:0;border-bottom:2px solid var(--linea);
padding:3px 0;margin-right:14px;font-size:12px;letter-spacing:.06em;
text-transform:uppercase;font-weight:700;color:var(--gris);
}
.estado{border-radius:0;border-width:0 0 2px 0;padding:2px 0;letter-spacing:.12em}
.estado::before{width:8px;height:8px}
/* Pide y ofrece, en sólido y en colores opuestos: es la distinción que decide
si alguien llama para llevar algo o para recibirlo, y se tiene que ver
antes de leer el título. No compite con el código de categoría porque
estas dos etiquetas solo existen dentro de la sección de ayuda. */
.lado{
border:0;border-radius:0;padding:4px 9px;color:#fff;
font-size:11px;letter-spacing:.1em;font-weight:800;white-space:nowrap;
}
.lado[data-l="pide"]{background:var(--alerta)}
.lado[data-l="ofrece"]{background:#0f6b45}
/* La ficha también lo dice de lado a lado, para el que baja rápido. */
.tarjeta:has(.lado[data-l="pide"])::before{background:var(--alerta)}
.tarjeta:has(.lado[data-l="ofrece"])::before{background:#0f6b45}
.dato{font-size:15px;line-height:1.5}
.ojo{border-radius:0;border-left-width:4px;background:var(--papel)}
/* Controles */
.btn{border-radius:0;border:2px solid var(--tinta);font-weight:800;font-size:14px;padding:12px 18px}
.btn.val{border-color:var(--linea);color:var(--gris)}
.btn.solido{background:var(--tinta)}
.chips{gap:0}
.chip{border-radius:0;border-width:0 0 3px 0;border-color:transparent;padding:10px 4px;margin-right:18px}
.chip[aria-pressed="true"]{background:none;color:var(--tinta);border-bottom-color:var(--tinta);font-weight:800}
.filtros{gap:0}
.f-tag{border-radius:0;border-width:0 0 2px 0;border-color:transparent;padding:7px 2px;margin-right:16px}
.f-tag[aria-pressed="true"]{background:none;color:var(--tinta);border-bottom-color:var(--tinta);font-weight:800}
.mas{border-radius:0;border-width:2px}
#btn-nuevo{border-radius:0;border-width:2px}
.donar-hero{border-radius:0;border-left-width:8px}
.donar-hero a{border-radius:0}
.aviso{border-radius:0;box-shadow:none;border-left-width:5px}
.fraude{border-radius:0;box-shadow:none;border:0;border-top:3px solid var(--alerta)}
.fraude h2{background:none;color:var(--alerta);padding:14px 0 6px;font-size:13px;letter-spacing:.16em}
.fraude .cuerpo{padding:0 0 var(--e3)}
.tels a{border-radius:0;border-width:0 0 1px 0;border-color:var(--linea);padding:12px 0}
.tels li:nth-child(-n+2) a{padding-left:14px;padding-right:14px}
.hoja,.enviar,.opcion,.mas{border-radius:0}
/* El formulario habla el mismo idioma que las fichas: quien necesita en rojo,
quien ofrece en verde. El color entra solo al elegir, para que la pantalla
no grite antes de que haya una decisión tomada. */
.op-pide{border-left:6px solid var(--alerta)}
.op-ofrece{border-left:6px solid #0f6b45}
.op-pide:has(input:checked){border-color:var(--alerta);background:#fdf3f2}
.op-ofrece:has(input:checked){border-color:#0f6b45;background:#f1f8f4}
.op-pide input{accent-color:var(--alerta)}
.op-ofrece input{accent-color:#0f6b45}
input[type=text],input[type=search],input[type=tel],textarea,select{border-radius:0}
.archivo > summary{border-radius:0;border-style:solid;border-width:0 0 2px 0;background:none}
/* Nada de esto se mueve si el sistema pide menos movimiento. */
@media (prefers-reduced-motion:reduce){
.tarjeta,.atajo,.btn{transition:none}
.tarjeta:hover,.atajo:hover{transform:none}
}
/* ═══════════════════════════════════════════════════════
CAPA FINAL — 2026, no 1996
═══════════════════════════════════════════════════════
La capa anterior perseguía el boletín impreso: bordes negros de 2 px,
radio cero, versalitas en cada etiqueta. Eso no lee "editorial", lee
"página vieja". El error de fondo fue confundir sobriedad con dureza.
Lo contemporáneo, sin gastar un byte más de red:
· SUPERFICIES, no marcos. La jerarquía la da la elevación —una tarjeta
blanca sobre un fondo apenas teñido— en vez de una línea negra alrededor.
· RADIOS GENEROSOS. 14 px en las superficies, 10 en los controles, pill
en las etiquetas. Nada de esquinas vivas.
· COLOR EN EL RELLENO, no en el borde. Un estado se dice con un fondo
tenue y texto oscuro del mismo tono, que es legible y no grita.
· MENOS MAYÚSCULAS. Se quedan solo donde ordenan (los rótulos de sección);
en las fichas mandan el tamaño y el peso.
Se conserva lo que protege: contraste AA, cero webfonts, el color como
código de categoría y la franja de frescura como firma.
═══════════════════════════════════════════════════════ */
:root{
--fondo:#f7f8fa; /* el lienzo, apenas teñido */
--superficie:#ffffff; /* las fichas, que ahora flotan sobre él */
--r:14px; --r-s:10px;
--som:0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.06);
--som-alta:0 2px 6px rgba(16,24,40,.07), 0 14px 34px rgba(16,24,40,.10);
--linea:#e6e9ee;
}
body{background:var(--fondo)}
/* ── Superficies ─────────────────────────────────────── */
.rejilla > .tarjeta{
background:var(--superficie);border:1px solid var(--linea);border-top:1px solid var(--linea);
border-radius:var(--r);box-shadow:var(--som);
padding:18px 18px 6px;margin-bottom:var(--e3);
transition:box-shadow .16s ease, transform .16s ease;
}
@media (hover:hover){ .rejilla > .tarjeta:hover{box-shadow:var(--som-alta);transform:translateY(-2px)} }
/* La marca de categoría pasa de barra sobre el borde a un filo redondeado
dentro de la ficha: pertenece a la tarjeta, no la corta. */
.rejilla > .tarjeta::before{
top:18px;left:0;width:4px;height:26px;border-radius:0 4px 4px 0;
}
.rejilla > .tarjeta{position:relative;padding-left:26px}
.cuerpo{padding:0}
.franja{
padding:0 0 10px;font-size:11.5px;letter-spacing:.04em;text-transform:none;
font-weight:600;color:var(--gris) !important;
}
.franja::before{width:8px;height:8px}
.tarjeta h3{font-size:20px;letter-spacing:-.02em;font-weight:750}
.aviso,.fraude,.donar-hero,.encargo,.archivo > summary,.vacio{
border-radius:var(--r);
}
.aviso{background:var(--superficie);border:1px solid var(--linea);border-left:4px solid var(--tinta);box-shadow:var(--som)}
.aviso.grave{border-left-color:var(--alerta)}
.fraude{background:var(--superficie);border:1px solid var(--linea);border-top:3px solid var(--alerta);box-shadow:var(--som);padding:0 18px 6px}
.atajo{background:var(--superficie);border:1px solid var(--linea);border-left:5px solid;border-radius:var(--r);box-shadow:var(--som)}
.atajos{gap:10px;border:0}
.atajo span{text-transform:none;letter-spacing:0;font-size:13px}
.nav{background:var(--superficie);border-bottom:1px solid var(--linea)}
.tels a{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-s);padding:12px 14px;margin-bottom:8px}
/* ── Etiquetas: relleno tenue, sin borde ─────────────── */
.estado{
border:0;border-radius:var(--r-pill);padding:5px 11px;
font-size:11.5px;letter-spacing:.02em;text-transform:none;font-weight:700;
}
.e-nuevo{background:#e8f0fe;color:#0a4a8f}
.e-pendiente{background:#fdf1dc;color:#7a4c00}
.e-verificado{background:#e3f4ec;color:#0a5c3e}
.e-atendiendo{background:#f0e9fb;color:#523183}
.e-resuelto{background:#eef0f3;color:#4b5563}
.lado{border-radius:var(--r-pill);padding:5px 11px;letter-spacing:.02em}
.lado[data-l="pide"]{background:#fdeceb;color:#8c1d10}
.lado[data-l="ofrece"]{background:#e3f4ec;color:#0a5c3e}
.tags li{
border:0;border-radius:var(--r-pill);background:#eef0f3;color:#4b5563;
padding:5px 11px;margin:0 7px 7px 0;text-transform:none;letter-spacing:0;
font-size:12.5px;font-weight:600;
}
.tags{gap:0;flex-wrap:wrap}
/* ── Controles ───────────────────────────────────────── */
.btn{
border-radius:var(--r-s);border:1px solid var(--linea);background:var(--superficie);
font-weight:650;font-size:14.5px;letter-spacing:0;padding:11px 16px;
box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.btn:hover{border-color:#c9ced7}
.btn.solido{background:var(--tinta);border-color:var(--tinta);color:#fff;font-weight:700}
.btn.val{border-style:solid;color:var(--tinta);opacity:.9}
.chip{
border-radius:var(--r-pill);border:1px solid var(--linea);background:var(--superficie);
padding:9px 15px;margin-right:8px;font-weight:600;
}
.chip[aria-pressed="true"]{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.chips{gap:0}
.f-tag{
border-radius:var(--r-pill);border:1px solid var(--linea);background:var(--superficie);
padding:7px 13px;margin-right:8px;
}
.f-tag[aria-pressed="true"]{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.mas,#btn-nuevo,.enviar,.donar-hero a,.hoja{border-radius:var(--r-pill)}
.hoja{border-radius:var(--r) var(--r) 0 0}
input[type=text],input[type=search],input[type=tel],textarea,select,.opcion{
border-radius:var(--r-s);border:1px solid var(--linea);background:var(--superficie);
}
input:focus,textarea:focus,select:focus{
border-color:var(--tinta);outline:3px solid rgba(255,204,0,.55);outline-offset:1px;
}
.busca input{border-radius:var(--r-pill)}
/* ── Sección: rótulo tranquilo, cifra grande ─────────── */
.grupo > h2{
border-bottom:1px solid var(--linea);padding-bottom:10px;
font-size:13px;letter-spacing:.08em;color:var(--gris);
}
.grupo > h2 .cifra{font-size:26px;color:var(--tinta);letter-spacing:-.03em}
/* ── Encabezado ──────────────────────────────────────── */
.civico{text-transform:none;letter-spacing:.01em;font-size:13px;font-weight:600}
.sello{
border:0;background:var(--superficie);border:1px solid var(--linea);
border-radius:var(--r-pill);padding:7px 14px;text-transform:none;
letter-spacing:.01em;font-size:12.5px;
}
.nota-com,.atiende,.ojo,.cerrada-nota{border-radius:var(--r-s)}
/* La ubicación aproximada, dicha en dos palabras y sin robar la atención. */
.ubic{
display:inline-block;margin:0 0 var(--e1);padding:4px 10px;
background:#eef0f3;color:#4b5563;border-radius:var(--r-pill);
font-size:12px;font-weight:600;
}
.ubic::before{content:"◎ ";opacity:.7}
.ubic[data-p="puerta"]{background:#e3f4ec;color:#0a5c3e}
.ubic[data-p="municipio"]{background:#fdf1dc;color:#7a4c00}
/* Sin coordenada publicada: el pin del mapa lo pusimos nosotros. Va en gris
y con el círculo tachado —no con el ◎ de las otras— para que se distinga
de un vistazo de las dos que sí traen coordenada, y sin color propio: no
es una alarma, es una ausencia. El motivo completo está en la procedencia. */
.ubic[data-p="ninguna"]{background:#eef0f3;color:#4b5563}
.ubic[data-p="ninguna"]::before{content:"⊘ ";opacity:.75}
/* El contacto de quien mantiene esto. En un directorio comunitario es un
dato de servicio: sin una vía para avisar que algo está mal, los errores
se quedan publicados. Va en tono normal, no en versalitas, para que se
pueda leer y marcar. */
/* ── Aportar: montos con su equivalencia ─────────────── */
.donar-hero{display:block}
/* Solo el titular es bloque: los dentro de los párrafos —"guarde el
comprobante"— se salían de línea y partían la frase en dos. */
.donar-txt > b{display:block;font-size:21px;letter-spacing:-.02em;line-height:1.2}
.donar-txt p b,.donar-txt span b{display:inline}
.montos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:14px 0 6px}
.monto{
border:2px solid rgba(17,20,24,.18);background:rgba(255,255,255,.55);
border-radius:var(--r-s);padding:10px 12px;cursor:pointer;text-align:left;
font-family:inherit;color:var(--tinta);min-height:60px;
transition:border-color .12s ease, background-color .12s ease;
}
.monto:hover{background:#fff;border-color:var(--tinta)}
.monto[data-elegido]{background:var(--tinta);border-color:var(--tinta)}
.monto[data-elegido] b,.monto[data-elegido] span{color:#fff}
.monto b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em}
.monto span{display:block;font-size:12.5px;line-height:1.3;opacity:.8}
.montos-nota{margin:0;font-size:12.5px;opacity:.75}
.aliados{
margin:12px 0 0;padding-top:10px;font-size:13.5px;line-height:1.7;
border-top:1px solid rgba(17,20,24,.18);
}
.aliados b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.aliados span{font-weight:800}
.donar-llave{margin:14px 0 0;font-size:15px}
.donar-llave b{display:inline;font-size:23px;letter-spacing:-.02em;margin-left:6px}
.donar-fino{margin:6px 0 0;font-size:13px;line-height:1.45;opacity:.85}
.donar-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.donar-acciones a,.donar-acciones button{
flex:1 1 180px;text-align:center;border:0;cursor:pointer;font-family:inherit;
background:var(--tinta);color:#fff;text-decoration:none;
padding:14px 18px;border-radius:var(--r-pill);font-weight:800;font-size:16px;
min-height:50px;display:inline-flex;align-items:center;justify-content:center;
}
#btn-aporte{background:rgba(17,20,24,.10);color:var(--tinta)}
#btn-aporte:hover{background:rgba(17,20,24,.18)}
.constancia{background:#fff;margin-top:12px}
/* Rendición de cuentas: pegada al bloque de donar, no escondida en el pie.
Quien está por transferir es exactamente quien necesita leer esto. */
.rendicion{
max-width:var(--medida);margin:10px auto 0;background:var(--superficie);
border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--som);
}
.rendicion > summary{
cursor:pointer;padding:14px 18px;font-weight:700;font-size:15px;
list-style:none;display:flex;align-items:center;gap:8px;min-height:48px;
}
.rendicion > summary::after{content:"▾";margin-left:auto;color:var(--gris)}
.rendicion[open] > summary::after{content:"▴"}
.rendicion > div{padding:0 18px 16px;font-size:14.5px;line-height:1.55;color:#39424c}
.rendicion p{margin:0 0 10px}
@media (max-width:1099px){ .rendicion{margin-left:14px;margin-right:14px} }
.credito-contacto{
display:block;margin-top:6px;text-transform:none;letter-spacing:0;
font-size:14px;color:var(--gris);
}
.credito-contacto a{color:var(--tinta);font-weight:700}
.ubic[data-p="dist"]{background:#e8f0fe;color:#0a4a8f;font-weight:700}
.ubic[data-p="dist"]::before{content:"↦ "}
/* La ficha que llegó por un enlace compartido: se destaca un momento para
que quien viene de WhatsApp sepa cuál de todas le mandaron. */
.tarjeta[data-destacada]{outline:3px solid var(--pei-amarillo);outline-offset:3px}
#btn-cerca[data-activo]{background:var(--tinta);color:#fff;border-color:var(--tinta)}
/* Cuántos puntos hay debajo de un mismo pin. */
.cuenta-pin{
position:absolute;top:-7px;right:-9px;min-width:19px;height:19px;
padding:0 5px;border-radius:999px;background:var(--tinta);color:#fff;
font-size:11.5px;font-weight:800;line-height:19px;text-align:center;
border:2px solid #fff;
}
.leaflet-marker-icon{position:relative;overflow:visible}
/* Pin de municipio: sabemos la ciudad, no la esquina. Se ve a medio tono
para que no se confunda con una ubicación verificada. */
.pin-vago{opacity:.55}
.pin-vago .cuenta-pin{background:var(--gris)}
/* Texto largo recortado a cuatro renglones, con un control que sí parece un
control. Antes se escondía tras un triángulo que nadie tocaba. */
.recorte{
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;
}
.dato[data-abierto] .recorte{-webkit-line-clamp:unset;overflow:visible}
.vermas{
display:inline-block;margin-top:4px;border:0;background:none;padding:0;
font-family:inherit;font-size:14px;font-weight:700;color:var(--albergue);
cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.dato[data-abierto] .vermas::after{content:" ▴"}
.vermas::after{content:" ▾"}
/* ═══ Pie de página ══════════════════════════════════════
Estaba en versalitas y con el nombre en bloque, así que "Desarrollado por /
BYTETAILORS" salía en dos renglones y el punto final quedaba solo en una
línea. Un crédito se lee de corrido, no se deletrea. */
.credito{
border-top:1px solid var(--linea);margin-top:var(--e3);padding-top:var(--e3);
text-transform:none;letter-spacing:0;font-size:15px;color:#39424c;
}
.credito b{display:inline;font-weight:800;color:var(--tinta)}
.credito-contacto{
display:block;margin-top:10px;font-size:14.5px;color:var(--gris);
text-transform:none;letter-spacing:0;line-height:1.55;
}
.credito-contacto a{
display:inline-block;margin-top:6px;background:var(--tinta);color:#fff;
text-decoration:none;padding:9px 16px;border-radius:var(--r-pill);
font-weight:700;font-size:14.5px;
}
.credito-contacto a + a{margin-left:6px;background:none;color:var(--tinta);
border:1.5px solid var(--linea)}
/* ═══ Botón flotante ═════════════════════════════════════
Es la única forma de publicar algo y estaba compitiendo de igual a igual
con el texto de una ficha. Más grande, con el amarillo de la ciudad como
filo para que se despegue del fondo blanco. */
#btn-nuevo{
padding:17px 26px;font-size:17px;min-height:60px;
border:3px solid var(--pei-amarillo);
box-shadow:0 4px 10px rgba(16,24,40,.16), 0 12px 30px rgba(158,16,8,.28);
letter-spacing:.01em;
}
@media (max-width:560px){
/* En el teléfono ocupa el ancho útil: es la acción principal de la página
y con el pulgar en la esquina no se llega a un botón chico. */
#btn-nuevo{left:14px;right:14px;justify-content:center;display:flex;
align-items:center;padding:18px;font-size:17.5px}
}
/* Botón secundario del bloque de donar. */
.donar-acciones .secundario{background:rgba(17,20,24,.10);color:var(--tinta)}
.donar-acciones .secundario:hover{background:rgba(17,20,24,.18)}
/* ═══ Vista de mapa: lista y mapa a la vez ═══════════════
Hasta ahora el mapa REEMPLAZABA la lista, así que había que elegir entre
ver dónde queda algo y ver qué es. Son la misma búsqueda hecha de dos
maneras y en una pantalla ancha caben las dos: la lista a la izquierda
para leer, el mapa a la derecha para ubicar, y el botón "Ver en el mapa"
de cada ficha vuela hasta su pin sin perder de vista el resto.
En el teléfono no hay ancho para dos columnas, así que ahí se mantiene el
comportamiento de siempre: una u otra. */
@media (min-width:1000px){
/* El grid va en , que es quien contiene la lista y el mapa. */
.principal[data-vista="mapa"] main{
display:grid;
grid-template-columns:minmax(320px,400px) minmax(0,1fr);
gap:var(--e3);
align-items:start;
}
/* La barra de búsqueda cruza las dos columnas. */
.principal[data-vista="mapa"] main > .vista{grid-column:1 / -1}
.principal[data-vista="mapa"] #mapa-caja{
position:sticky;top:calc(var(--tope) + 70px);grid-column:2;
}
.principal[data-vista="mapa"] #lista{
grid-column:1;
max-height:calc(100vh - var(--tope) - 150px);overflow-y:auto;
padding-right:8px;
}
/* En modo mapa el encabezado y los atajos sobran: lo que importa es la
lista y dónde queda cada cosa. */
.principal[data-vista="mapa"] > header,
.principal[data-vista="mapa"] > .atajos,
.principal[data-vista="mapa"] > .aviso{display:none}
/* Con la lista angosta, las fichas se compactan. */
.principal[data-vista="mapa"] #lista .tarjeta{padding:14px 14px 14px 20px}
.principal[data-vista="mapa"] #lista .tarjeta h3{font-size:17px}
.principal[data-vista="mapa"] #lista .grupo{margin-top:var(--e3)}
.principal[data-vista="mapa"] #mapa{height:calc(100vh - var(--tope) - 210px);min-height:440px}
}
/* La barra de acciones del mapa, siempre visible sobre él. */
.mapa-barra{
display:flex;gap:8px;flex-wrap:wrap;align-items:center;
margin-bottom:8px;
}
.mapa-barra .cuenta{
margin-left:auto;font-size:13px;color:var(--gris);font-weight:700;
}
/* El chip de mapa: misma barra que las secciones, porque es otra forma de
recorrer lo mismo. Se distingue con el pictograma y con el filo de la
ciudad cuando está abierto. */
.chip-mapa{font-weight:700}
.chip-mapa[data-abierto]{background:var(--tinta);color:#fff;border-color:var(--tinta)}
/* ═══ Navegación entre páginas ═══════════════════════════
Tres páginas y ninguna forma de pasar de una a otra salvo el "volver" de
las internas. Quien llega por un enlace compartido a Donar no sabía que
detrás había un directorio con 293 puntos. Va debajo de la barra del 123
y arriba de todo lo demás, porque es la navegación del sitio. */
.paginas{
display:flex;gap:0;background:var(--superficie);
border-bottom:1px solid var(--linea);
padding:0 14px;overflow-x:auto;scrollbar-width:none;
position:sticky;top:var(--tope);z-index:41;
}
.paginas::-webkit-scrollbar{display:none}
.paginas a{
flex:0 0 auto;padding:13px 16px;text-decoration:none;color:var(--gris);
font-weight:700;font-size:15px;border-bottom:3px solid transparent;
min-height:48px;display:flex;align-items:center;white-space:nowrap;
}
.paginas a:hover{color:var(--tinta)}
.paginas a[aria-current="page"]{color:var(--tinta);border-bottom-color:var(--pei-rojo-ui)}
@media (min-width:1000px){
.paginas{justify-content:center;padding:0}
}
/* El menú de secciones se cuelga de la barra de páginas, no del 123. */
.nav{top:calc(var(--tope) + 49px)}
/* ═══ Barra fija: la marca primero, el 123 siempre ══════
La barra decía "Emergencia: 123" y nada más, así que quien caía en una
página interna desde un enlace compartido no sabía en qué sitio estaba.
Ahora la marca abre la barra —y lleva al directorio— y el 123 queda a la
derecha, donde el pulgar lo alcanza. Sigue visible en todas las rutas y en
todos los anchos: eso no se negocia (regla 1). */
.emergencia{justify-content:space-between;padding-top:7px;padding-bottom:7px}
.emergencia .marca{
display:inline-flex;align-items:center;gap:9px;text-decoration:none;
color:#fff;background:none;padding:0;border-radius:0;
font-weight:800;letter-spacing:-.01em;text-transform:none;font-size:16px;
}
.emergencia .marca svg{flex:0 0 auto;border-radius:2px}
.emergencia a.tel123{
background:#fff;color:var(--pei-rojo-ui);font-weight:800;
padding:7px 15px;border-radius:var(--r-pill);white-space:nowrap;
text-transform:none;letter-spacing:0;font-size:14px;
}
@media (max-width:420px){
/* En pantalla angosta el número manda: la marca se queda solo con la
bandera y el 123 conserva su tamaño de dedo. */
.emergencia .marca span{display:none}
.emergencia a.tel123{font-size:13.5px;padding:7px 12px}
}
/* ═══ Modo mapa: solo el mapa y la lista ════════════════
Al abrir el mapa se quedaban en pantalla el bloque de donar, el aviso de
personas desaparecidas y las estafas —toda la barra lateral—, así que el
mapa entraba angosto y la lista aparecía tan abajo que no se veía. Quien
abre el mapa quiere ubicar algo: lo demás sobra hasta que lo cierre. */
@media (min-width:1000px){
.marco:has(.principal[data-vista="mapa"]){grid-template-columns:1fr}
.marco:has(.principal[data-vista="mapa"]) .lateral{display:none}
/* Y el mapa aprovecha todo el ancho que queda libre. */
.principal[data-vista="mapa"] main{
grid-template-columns:minmax(340px,420px) minmax(0,1fr);
}
.principal[data-vista="mapa"] #mapa{height:calc(100vh - var(--tope) - 170px)}
}
/* La lista arranca arriba, junto al mapa, no debajo del pliegue: el buscador
y los filtros se quedan en su fila y las dos columnas empiezan a la par. */
.principal[data-vista="mapa"] main > .vista{margin-bottom:var(--e2)}
.principal[data-vista="mapa"] #lista .grupo:first-child{margin-top:0}
.principal[data-vista="mapa"] #lista .grupo > h2{
position:sticky;top:0;background:var(--fondo);z-index:2;padding-top:6px;
}
@media (max-width:999px){
/* En el teléfono, el mapa primero y la lista debajo, sin nada en medio. */
.principal[data-vista="mapa"] > .aviso,
.principal[data-vista="mapa"] ~ .lateral .donar-hero,
.principal[data-vista="mapa"] ~ .lateral .fraude{display:none}
}
/* Las filas, explícitas. Sin esto el navegador coloca cada bloque en su
propia fila y la lista termina 1.100 px más abajo que el mapa: se veían
uno encima del otro, que es justo lo que veníamos a arreglar. */
@media (min-width:1000px){
.principal[data-vista="mapa"] main{grid-template-rows:auto 1fr}
.principal[data-vista="mapa"] main > .vista{grid-row:1;grid-column:1 / -1}
.principal[data-vista="mapa"] #lista{grid-row:2;grid-column:1}
.principal[data-vista="mapa"] #mapa-caja{grid-row:2;grid-column:2}
}
/* ═══ Logo ══════════════════════════════════════════════
Reemplaza la bandera que estaba dibujada en SVG. Es un PNG con fondo
transparente —va sobre la barra roja— y solo el emblema: el nombre se
escribe al lado en tipografía de verdad, que se lee mejor a cualquier
tamaño y no cuesta un byte. */
.logo-barra{
width:40px;height:40px;flex:0 0 auto;display:block;object-fit:contain;
}
/* El emblema del encabezado va grande: es la primera cosa que se ve al
entrar y a 64 px el detalle del viaducto y la torre se perdía. */
img.bandera{width:96px;height:96px;object-fit:contain}
.titular{gap:14px}
@media (max-width:560px){ img.bandera{width:68px;height:68px} }
/* ═══════════════════════════════════════════════════════
CAPA 2026 — el salto
═══════════════════════════════════════════════════════
Las capas anteriores corrigieron cosas sueltas; esto cambia lo que hace
que una página se lea vieja, que no es el color sino cuatro hábitos:
1. BORDES EN TODO. Un recuadro gris de 1 px alrededor de cada cosa es la
marca de la web de 2010. Se van: la separación la hace el fondo, y la
jerarquía, la sombra.
2. TODO PESA IGUAL. Cincuenta fichas idénticas no tienen jerarquía. Ahora
el título manda con claridad y los metadatos se apagan.
3. CONTROLES TÍMIDOS. Botones de 14 px con borde fino. Pasan a píldoras
con superficie propia y altura de dedo.
4. POCO AIRE. Se sube el interlineado y el espacio interno; el espacio es
lo único gratis que se lee como calidad.
═══════════════════════════════════════════════════════ */
:root{
/* Neutros con tinte, no grises muertos: un gris puro sobre blanco se ve
sucio, y con una gota de azul se ve intencional. */
--fondo:#f4f6f9;
--superficie:#ffffff;
--tinta:#0d1520;
--gris:#5a6779;
--linea:#e8ecf2;
--r:18px; --r-s:12px;
--som:0 1px 2px rgba(13,21,32,.04), 0 6px 18px -6px rgba(13,21,32,.10);
--som-alta:0 2px 4px rgba(13,21,32,.05), 0 18px 40px -12px rgba(13,21,32,.20);
}
body{font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* ── Fichas: superficie, no recuadro ─────────────────── */
.rejilla > .tarjeta{
border:0;border-radius:var(--r);box-shadow:var(--som);
padding:22px 24px 18px 26px;margin-bottom:16px;
transition:box-shadow .18s cubic-bezier(.2,.7,.3,1), transform .18s cubic-bezier(.2,.7,.3,1);
}
@media (hover:hover){
.rejilla > .tarjeta:hover{box-shadow:var(--som-alta);transform:translateY(-3px)}
}
/* La marca de categoría, un filo redondeado y corto. */
.rejilla > .tarjeta::before{top:24px;left:0;width:5px;height:30px;border-radius:0 6px 6px 0}
.tarjeta h3{font-size:20.5px;font-weight:800;letter-spacing:-.024em;line-height:1.25}
.dir{font-size:14.5px;color:var(--gris);margin-top:5px}
.dato{font-size:15.5px;line-height:1.6;color:#2a3646}
.franja{
padding:0 0 12px;font-size:11.5px;letter-spacing:.02em;font-weight:600;
/* #8792a5 se veía elegante y daba 3,14:1 en 11,5 px: por debajo de AA.
Bajo el sol de Pereira, un metadato que no se lee no es sobrio, es
inútil. Este da 4,58:1 y sigue siendo un gris apagado. */
text-transform:none;color:#667287 !important;
}
.franja .cat{font-size:11px;opacity:.9}
/* El punto contradicho se pinta en rojo. La regla va acá, después del gris de
arriba, porque ese `!important` se comía el rojo de `.f-contra` y "alguien
fue y no estaba" salía del mismo gris que "publicado hace 3 h": el aviso
que ahorra el viaje quedaba indistinguible del que no dice nada. Va con el
color Y con el peso, que es lo que se ve cuando el sol borra el color. */
.f-contra{color:var(--alerta) !important;font-weight:800}
.cuerpo{padding:0}
.acciones{gap:9px;margin-top:18px}
/* ── Controles: píldoras con superficie ──────────────── */
.btn{
border:0;border-radius:999px;background:#eef1f6;color:var(--tinta);
font-weight:650;font-size:14.5px;padding:12px 20px;min-height:46px;
box-shadow:none;transition:background-color .15s ease, transform .15s ease;
}
.btn:hover{background:#e3e8f0}
.btn:active{transform:scale(.97)}
.btn.solido{background:var(--tinta);color:#fff;font-weight:700}
.btn.solido:hover{background:#1c2836}
.btn.val{background:transparent;color:var(--gris);box-shadow:inset 0 0 0 1.5px var(--linea)}
.btn.val:hover{background:#f7f9fc;color:var(--tinta)}
/* ── Etiquetas: sin borde, relleno suave ─────────────── */
.estado,.lado{border:0;border-radius:999px;padding:6px 13px;font-size:11.5px;font-weight:700;letter-spacing:.01em}
.tarjeta .ficha-tope .lado{
position:static;top:auto;right:auto;margin:0;
min-width:6.6rem;width:6.8rem;text-align:center;
}
.tarjeta .cuerpo{padding-right:0}
.tags li{background:#f1f4f9;color:#5a6779;border:0;border-radius:999px;padding:6px 13px;font-size:12.5px}
.ubic{background:#f1f4f9;border-radius:999px;padding:5px 12px;font-size:12.5px}
.ojo,.atiende,.nota-com,.cerrada-nota{border-radius:var(--r-s);border-left-width:4px}
/* ── Secciones: aire y jerarquía ─────────────────────── */
.grupo{margin-top:56px}
.grupo > h2{
border:0;padding:0 0 16px;font-size:12.5px;letter-spacing:.1em;
color:#667287;font-weight:700;
}
.grupo > h2 .cifra{font-size:34px;letter-spacing:-.045em;color:var(--tinta);font-weight:800}
/* ── Menú y filtros ──────────────────────────────────── */
.nav{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
.paginas{background:rgba(255,255,255,.82);backdrop-filter:blur(14px)}
.chip{
border:0;background:#eef1f6;color:#3d4a5c;border-radius:999px;
padding:10px 15px;font-weight:650;box-shadow:none;
}
.chip:hover{background:#e3e8f0}
.chip[aria-pressed="true"]{background:var(--tinta);color:#fff;font-weight:700}
.f-tag{border:0;background:#f1f4f9;color:#5a6779;border-radius:999px;padding:8px 14px}
.f-tag[aria-pressed="true"]{background:var(--tinta);color:#fff}
/* ── Bloques grandes ─────────────────────────────────── */
.aviso{border:0;border-radius:var(--r);box-shadow:var(--som);padding:20px 22px;border-left:5px solid var(--tinta)}
.aviso.grave{border-left-color:var(--alerta)}
.atajo{border:0;border-radius:var(--r);box-shadow:var(--som);border-left:5px solid;padding:18px 20px}
.atajo b{font-size:17.5px;letter-spacing:-.02em}
.fraude{border:0;border-radius:var(--r);box-shadow:var(--som);border-top:4px solid var(--alerta)}
.tels a{border:0;border-radius:var(--r-s);background:var(--superficie);box-shadow:var(--som);padding:14px 16px}
.donar-hero{
border-radius:var(--r);border-left:0;
background:linear-gradient(155deg, #ffdf4d 0%, #ffcc00 55%, #f5b800 100%);
box-shadow:0 2px 6px rgba(158,16,8,.10), 0 20px 44px -18px rgba(158,16,8,.42);
padding:24px;
}
.monto{border:0;background:rgba(255,255,255,.62);border-radius:var(--r-s)}
.monto:hover{background:#fff}
.donar-acciones a,.donar-acciones button{border-radius:999px;padding:16px 22px;min-height:54px}
#btn-nuevo{border:0;box-shadow:0 6px 14px rgba(158,16,8,.24), 0 18px 40px -10px rgba(158,16,8,.44)}
.hoja{border-radius:22px 22px 0 0}
.opcion{border:0;box-shadow:inset 0 0 0 1.5px var(--linea);border-radius:var(--r-s)}
.opcion:has(input:checked){box-shadow:inset 0 0 0 2.5px var(--tinta)}
input[type=text],input[type=search],input[type=tel],textarea,select{
border:0;box-shadow:inset 0 0 0 1.5px var(--linea);border-radius:var(--r-s);
}
input:focus,textarea:focus,select:focus{box-shadow:inset 0 0 0 2px var(--tinta);outline:3px solid rgba(255,204,0,.5)}
.enviar{border-radius:999px}
/* ═══ Portada ═══════════════════════════════════════════
Un encabezado de texto plano no dice nada del sitio en el primer segundo.
Ahora abre con el emblema grande sobre un lienzo con los colores de la
ciudad, y con las cifras vivas del directorio debajo: 293 puntos, 8
albergues, 34 acopios. Es lo que convierte una promesa en algo
comprobable de un vistazo, y sale de la base, no de un texto escrito. */
.portada{
position:relative;overflow:hidden;
border-radius:0 0 32px 32px;
padding:44px 24px 40px;margin-bottom:8px;
background:
radial-gradient(1100px 460px at 12% -12%, rgba(255,204,0,.28), transparent 62%),
radial-gradient(880px 400px at 92% 8%, rgba(158,16,8,.16), transparent 58%),
linear-gradient(180deg, #fffdf6 0%, var(--fondo) 100%);
}
.portada::after{
/* El filo de la ciudad cerrando el bloque: la bandera hecha estructura. */
content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
background:linear-gradient(90deg, var(--pei-rojo-ui) 0 42%, var(--pei-amarillo) 42% 100%);
}
.portada-txt{max-width:var(--medida);margin:0 auto}
.portada-logo{
width:auto;height:128px;object-fit:contain;display:block;margin-bottom:6px;
filter:drop-shadow(0 10px 26px rgba(158,16,8,.22));
}
.portada h1{
font-size:clamp(40px,8vw,68px);letter-spacing:-.055em;line-height:.94;
margin:0 0 10px;font-weight:800;
}
.portada .civico{
display:inline-block;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);
border-radius:999px;padding:7px 16px;margin:0 0 14px;
font-size:13px;font-weight:650;color:#3d4a5c;letter-spacing:0;text-transform:none;
}
.portada .sub{font-size:19.5px;line-height:1.45;max-width:52ch;color:#2a3646;margin:0}
/* Las cifras. Números grandes, rótulo chico: se leen antes de decidir leer. */
.cifras{
display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;
}
.cifras > div{
background:rgba(255,255,255,.78);backdrop-filter:blur(8px);
border-radius:16px;padding:12px 20px;min-width:104px;
box-shadow:0 1px 2px rgba(13,21,32,.04), 0 8px 22px -10px rgba(13,21,32,.16);
}
.cifras dt{font-size:11.5px;letter-spacing:.06em;color:var(--gris);font-weight:700;text-transform:uppercase}
.cifras dd{margin:2px 0 0;font-size:30px;font-weight:800;letter-spacing:-.045em;line-height:1}
.portada .sello{
margin-top:22px;background:none;border:0;padding:0;
font-size:13px;color:var(--gris);
}
@media (max-width:560px){
.portada{padding:30px 16px 30px;border-radius:0 0 24px 24px}
.portada-logo{width:auto;height:88px}
.cifras > div{padding:10px 16px;min-width:88px}
.cifras dd{font-size:25px}
}
/* El lema: lo segundo que se lee, después del nombre. Dos líneas para que la
pausa caiga donde cambia el sujeto —quien ayuda / quien necesita— y la
segunda en el rojo de la ciudad, que es la que carga el peso. */
.lema{
font-size:clamp(21px,3.4vw,30px);line-height:1.15;font-weight:700;
letter-spacing:-.03em;color:var(--tinta);margin:0 0 16px;max-width:22ch;
}
.lema span{color:var(--pei-rojo-ui)}
@media (max-width:560px){ .lema{font-size:21px;margin-bottom:12px} }
/* ═══ Movimiento ════════════════════════════════════════
Todo esto se apaga entero si el sistema pide menos movimiento (al final
del bloque). Y nada bloquea ni retrasa: son transformaciones y opacidad,
que el navegador resuelve en la GPU sin recalcular la página. Ninguna
animación se interpone entre alguien y un teléfono de emergencia: la
barra del 123, los botones y los enlaces están operativos desde el
primer fotograma. */
/* La portada entra en cascada: el logo, el lema, el texto, las cifras. Es
medio segundo en total y le da al ojo un orden de lectura. */
@keyframes sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes escala{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
.portada-logo{animation:escala .5s cubic-bezier(.2,.8,.3,1) both}
.portada h1{animation:sube .5s cubic-bezier(.2,.8,.3,1) .06s both}
.portada .lema{animation:sube .5s cubic-bezier(.2,.8,.3,1) .13s both}
.portada .civico{animation:sube .5s cubic-bezier(.2,.8,.3,1) .19s both}
.portada .sub{animation:sube .5s cubic-bezier(.2,.8,.3,1) .24s both}
.cifras > div{animation:sube .5s cubic-bezier(.2,.8,.3,1) both}
.cifras > div:nth-child(1){animation-delay:.30s}
.cifras > div:nth-child(2){animation-delay:.36s}
.cifras > div:nth-child(3){animation-delay:.42s}
.cifras > div:nth-child(4){animation-delay:.48s}
/* Las fichas aparecen a medida que entran en pantalla, no todas de golpe. */
.rejilla > .tarjeta{
animation:sube .42s cubic-bezier(.2,.8,.3,1) both;
animation-timeline:view();
animation-range:entry 0% entry 32%;
}
@supports not (animation-timeline: view()){
/* Donde no hay animación por scroll, las fichas simplemente están. Nunca
se quedan invisibles esperando un efecto que el navegador no soporta. */
.rejilla > .tarjeta{animation:none}
}
/* Los controles responden al toque: se hunden un poco y vuelven. */
.btn,.chip,.f-tag,.monto,.atajo,.tels a{transition:
transform .16s cubic-bezier(.2,.8,.3,1),
background-color .16s ease, box-shadow .16s ease, color .16s ease}
.btn:active,.chip:active,.f-tag:active,.monto:active{transform:scale(.96)}
.atajo:active,.tels a:active{transform:scale(.985)}
#btn-nuevo{transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease}
#btn-nuevo:hover{transform:translateY(-2px) scale(1.02)}
#btn-nuevo:active{transform:scale(.97)}
/* El aviso al pie entra deslizándose en vez de aparecer de golpe. */
#aviso-fugaz{
transform:translateY(16px);opacity:0;display:block;pointer-events:none;
transition:transform .28s cubic-bezier(.2,.8,.3,1), opacity .28s ease;
}
#aviso-fugaz:not([data-visible]){visibility:hidden}
#aviso-fugaz[data-visible]{transform:none;opacity:1;pointer-events:auto;visibility:visible}
/* El punto de la franja de frescura late cuando el dato es de hace menos de
dos horas. Es el único elemento que se mueve solo, y significa algo: que
ese punto está vivo. */
@keyframes late{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.f-fresco::before{animation:late 2.4s ease-in-out infinite}
/* La hoja del formulario sube desde abajo. */
@keyframes sube-hoja{from{transform:translateY(100%)}to{transform:none}}
.velo[open] .hoja{animation:sube-hoja .3s cubic-bezier(.2,.8,.3,1) both}
.velo{transition:opacity .22s ease}
/* El campo que se abre dentro de una ficha ("Yo me encargo"). */
@keyframes despliega{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.encargo{animation:despliega .22s cubic-bezier(.2,.8,.3,1) both}
/* El esqueleto de carga respira mientras llegan los datos. */
@keyframes respira{0%,100%{opacity:.55}50%{opacity:.9}}
.esqueleto,.esqueleto *{animation:respira 1.5s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
/* Sin excepciones: quien pidió menos movimiento no ve ninguno. */
*,*::before,*::after{
animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important;scroll-behavior:auto !important;
}
}
/* El emblema es apaisado (1,19:1), no cuadrado: fijar alto y ancho iguales lo
deformaba. Se fija el ALTO —que es lo que tiene que encajar en la barra— y
el ancho sale solo.
Y va grande. A 32 px el emblema es una mancha: tiene un puente, una torre y
dos manos adentro, y a ese tamaño no se distingue ninguna. Es la marca del
sitio en la única barra que está en las doce páginas; que se vea. */
.logo-barra{width:auto;height:46px;max-width:58px}
img.bandera,.portada-logo{
width:auto;height:104px;max-width:200px;
display:block;margin:0 0 14px;position:relative;
}
@media (max-width:560px){ .portada-logo{height:74px;margin-bottom:10px} }
/* El titular, debajo de la llave. Es el dato que el donante compara en la
pantalla de su app antes de apretar enviar: sin él, un número suelto no se
puede verificar y se lee igual que una estafa. */
.donar-llave .titular{
display:block;margin-top:4px;font-size:14.5px;font-weight:600;opacity:.9;
}
.donar-llave .titular b{font-size:15.5px}
/* La procedencia del dato, al pie de la ficha. Chica y en gris: no compite
con el contenido, pero está ahí para quien quiera saber quién lo publicó.
No manda a nadie a verificar a otro sitio —el contacto ya viene con el
punto—: solo dice de dónde salió, por qué el sello dice lo que dice y qué
NO sabemos. Las tres líneas van siempre que apliquen, también cuando la
respuesta es "nadie lo publicó": un campo vacío explicado es un dato; un
campo vacío escondido es una trampa.
Sin color propio a propósito: la categoría ya se pintó en la franja y el
ciclo del anuncio en el sello. Acá la jerarquía la dan el tamaño y el
signo de cada línea, no un tercer sistema de color. */
.procedencia{
margin:16px 0 0;padding-top:12px;border-top:1px solid var(--linea);
font-size:12.5px;line-height:1.45;color:var(--gris);
}
.procedencia p{margin:0 0 5px;padding-left:15px;text-indent:-15px}
.procedencia p:last-child{margin-bottom:0}
.procedencia b{font-weight:700;color:#3d4a5c}
.pr-fuente::before{content:"↗ ";opacity:.75}
.pr-sello::before{content:"◆ ";opacity:.75}
.pr-falta::before{content:"○ ";opacity:.75}
/* ═══ Etiquetas con pictograma ══════════════════════════
El icono va antes del texto y con su propio espacio: en una lista larga
se reconoce "agua" por la gota antes de leer la palabra, que es de lo que
se trata cuando alguien busca con prisa. */
.tags li{display:inline-flex;align-items:center;gap:7px;line-height:1.2}
.tags li span,.f-tag span{font-size:14px;line-height:1}
.f-tag{display:inline-flex;align-items:center;gap:7px}
/* Las fichas, centradas en su columna y con un ancho de lectura propio.
Estiradas a todo el ancho disponible una ficha de tres líneas quedaba con
el botón a medio metro del título. */
/* `align-items:start` para que cada ficha mida lo que ocupa. Por defecto las
celdas de una fila se estiran a la altura de la más alta, así que una ficha
con una descripción larga inflaba a su vecina y recortar no servía de nada. */
.rejilla{max-width:760px;margin-left:auto;margin-right:auto;align-items:start}
.principal[data-vista="mapa"] .rejilla{max-width:none}
.grupo > h2,.filtros{max-width:760px;margin-left:auto;margin-right:auto}
.grupo > h2{width:100%}
@media (min-width:1000px){
/* Con la barra lateral al costado, el conjunto se centra en el espacio
que le queda, no contra el borde izquierdo. */
.principal:not([data-vista="mapa"]) main{display:flex;flex-direction:column;align-items:center}
.principal:not([data-vista="mapa"]) main > *{width:100%;max-width:820px}
}
/* ═══ Inventario ════════════════════════════════════════
Qué se necesita en la ciudad, por etiqueta. La cifra grande es lo PEDIDO,
porque es la pregunta de quien va a ayudar; debajo, en chico, lo ofrecido.
Las que llevan tres o más de diferencia se marcan: son a las que hay que
llevar algo hoy. */
.inventario{max-width:var(--medida);margin:var(--e5) auto 0;padding:0 14px}
.inventario-nota{margin:0 0 18px;font-size:15px;color:#3d4a5c;max-width:62ch}
.inv-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.inv-tarjeta{
display:flex;flex-direction:column;align-items:flex-start;gap:2px;
background:var(--superficie);border:0;border-radius:var(--r);
box-shadow:var(--som);padding:16px 18px;cursor:pointer;text-align:left;
font-family:inherit;color:var(--tinta);
transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s ease;
}
.inv-tarjeta:hover{transform:translateY(-3px);box-shadow:var(--som-alta)}
.inv-tarjeta:active{transform:scale(.97)}
.inv-nombre{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700}
.inv-cifra{font-size:32px;font-weight:800;letter-spacing:-.045em;line-height:1.05;margin-top:6px}
.inv-pie{font-size:12.5px;color:var(--gris);font-weight:600}
.inv-ofrece{margin-top:8px;font-size:12.5px;color:#0a5c3e;font-weight:700}
.inv-lugar{font-size:12px;color:var(--gris)}
/* Faltante grande: más de tres puntos pidiendo sin quien ofrezca. */
.inv-tarjeta[data-critico]{box-shadow:inset 0 0 0 2px #f7c9c4, var(--som)}
.inv-tarjeta[data-critico] .inv-cifra{color:var(--alerta)}
.inv-tarjeta[data-critico] .inv-ofrece{color:var(--alerta)}
/* El pictograma de cada opción del formulario: se elige antes de leer, que
es lo que pasa cuando alguien llena esto con prisa o con una mano. */
.op-icono{
display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;
background:#f1f4f9;border-radius:9px;margin-right:10px;font-size:16px;
vertical-align:middle;
}
.opcion:has(input:checked) .op-icono{background:#fff}
.op-pide:has(input:checked) .op-icono{background:#fdeceb}
.op-ofrece:has(input:checked) .op-icono{background:#e3f4ec}
.opcion b{display:flex;align-items:center}
/* ═══ Índice de la guía ═════════════════════════════════
Una tarjeta por artículo, cada uno con su página. Antes eran nueve
apilados en un solo documento: se leía como un PDF, no se podía compartir
uno solo y Google indexaba una URL para nueve temas distintos. */
.guia-cuenta{margin:14px 0 0;font-size:14px;color:var(--gris);font-weight:600}
/* Tres por fila en pantalla ancha. Con auto-fill la cuenta la decidía el ancho
disponible y salían dos columnas anchísimas o cuatro apretadas según el
monitor; acá el número es el que es. Abajo baja a dos y luego a una. */
.rejilla-art{
display:grid;grid-template-columns:1fr;
gap:22px;margin-top:var(--e4);
}
@media (min-width:700px){
.rejilla-art{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1040px){
.rejilla-art{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.tarjeta-art{
display:flex;flex-direction:column;text-decoration:none;color:inherit;
background:var(--superficie);border-radius:var(--r);box-shadow:var(--som);
overflow:hidden;
transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease;
}
.tarjeta-art:hover{transform:translateY(-4px);box-shadow:var(--som-alta)}
.tarjeta-art .arte{height:124px}
.tarjeta-txt{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.tarjeta-art .meta-articulo{margin:0 0 6px}
.tarjeta-art h2{
font-size:20px;letter-spacing:-.026em;line-height:1.2;margin:0 0 8px;
border:0;padding:0;text-transform:none;color:var(--tinta);
}
.tarjeta-art .bajada{font-size:15px;line-height:1.5;color:#3d4a5c;margin:0 0 14px;flex:1}
.leer{font-size:14.5px;font-weight:700;color:var(--pei-rojo-ui)}
/* Artículo suelto en su página */
.articulo.suelto{max-width:820px;margin:0 auto var(--e4)}
.miga{
display:flex;gap:8px;align-items:center;flex-wrap:wrap;
margin:0 0 var(--e2);font-size:13.5px;color:var(--gris);
}
.miga a{color:var(--gris);text-decoration:none;font-weight:600}
.miga a:hover{color:var(--tinta)}
.miga b{color:var(--tinta)}
.siguiente-anterior{
display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:820px;margin:0 auto;
}
.nav-art{
display:flex;flex-direction:column;gap:4px;text-decoration:none;
background:var(--superficie);border-radius:var(--r);box-shadow:var(--som);
padding:16px 18px;color:var(--tinta);
transition:transform .16s ease, box-shadow .16s ease;
}
.nav-art:hover{transform:translateY(-2px);box-shadow:var(--som-alta)}
.nav-art span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);font-weight:700}
.nav-art b{font-size:15.5px;letter-spacing:-.015em;line-height:1.3}
.nav-art.siguiente{text-align:right}
.volver-guia{max-width:820px;margin:var(--e3) auto 0;font-size:15px}
.volver-guia a{color:var(--tinta);font-weight:700}
@media (max-width:560px){ .siguiente-anterior{grid-template-columns:1fr} }
/* ═══ El cruce ══════════════════════════════════════════
La fila que une a quien pide con quien ofrece. Va dentro de la ficha,
antes de los datos, porque es la respuesta a la pregunta que trajo a la
persona: "necesito transporte" → "tres lo ofrecen, acá están". */
.cruce{
display:flex;align-items:center;justify-content:space-between;gap:12px;
width:100%;margin:14px 0 0;padding:13px 16px;border:0;cursor:pointer;
background:linear-gradient(135deg,#eef4ff 0%,#e8f4ec 100%);
border-radius:var(--r-s);font-family:inherit;text-align:left;
box-shadow:inset 0 0 0 1.5px #d7e3f5;
transition:transform .16s ease, box-shadow .16s ease;
}
.cruce:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 2px #b9cfee, var(--som)}
.cruce:active{transform:scale(.98)}
.cruce b{font-size:15px;font-weight:750;color:var(--tinta);line-height:1.3}
.cruce span{font-size:14px;font-weight:700;color:#0a4a8f;white-space:nowrap}
/* ═══ Maqueta de la guía ═════════════════════════════════
Estaba copiado dentro de cada artículo: 4 KB de