@import url("../fonts/fonts.css");
/* WallaPark — mockup. Cuaderno (día) y Pizarra (noche). */

:root {
  --bg: #fdfbf4; --rejilla: #dfe8f3; --margen: #f3b7b0;
  --tinta: #2a2b3d; --suave: #5d6075; --papel: #ffffff; --sombra: #2a2b3d;
  --rojo: #e0503a; --azul: #2f6fd0; --verde: #2f9a5c; --amarillo: #f4b928; --naranja: #ee8a2a; --rosa: #e86aa3;
  --chip: #f4f1e6; --mapa-filtro: saturate(.75) brightness(1.03);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="cuaderno"]) {
    --bg: #22382e; --rejilla: rgba(255,255,255,.035); --margen: transparent;
    --tinta: #f1eee4; --suave: #b9c7bd; --papel: #2a4338; --sombra: rgba(0,0,0,.35);
    --rojo: #ff9c8c; --azul: #92c6ff; --verde: #a2e3ac; --amarillo: #ffe08a; --naranja: #ffbf86; --rosa: #ffb4d5;
    --chip: rgba(255,255,255,.07); --mapa-filtro: invert(.92) hue-rotate(180deg) saturate(.35) brightness(.85) sepia(.25) hue-rotate(80deg);
    color-scheme: dark;
  }
}
:root[data-theme="pizarra"] {
  --bg: #22382e; --rejilla: rgba(255,255,255,.035); --margen: transparent;
  --tinta: #f1eee4; --suave: #b9c7bd; --papel: #2a4338; --sombra: rgba(0,0,0,.35);
  --rojo: #ff9c8c; --azul: #92c6ff; --verde: #a2e3ac; --amarillo: #ffe08a; --naranja: #ffbf86; --rosa: #ffb4d5;
  --chip: rgba(255,255,255,.07); --mapa-filtro: invert(.92) hue-rotate(180deg) saturate(.35) brightness(.85) sepia(.25) hue-rotate(80deg);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--tinta); font: 16px/1.45 "Nunito", system-ui, sans-serif;
  background-color: var(--bg);
  background-image:
    linear-gradient(90deg, transparent 27px, var(--margen) 27px, var(--margen) 29px, transparent 29px),
    linear-gradient(var(--rejilla) 1px, transparent 1px),
    linear-gradient(90deg, var(--rejilla) 1px, transparent 1px);
  background-size: 100% 100%, 22px 22px, 22px 22px;
  background-attachment: fixed;
}
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, .fredoka { font-family: "Fredoka", "Nunito", sans-serif; font-weight: 600; letter-spacing: .2px; }
.app { max-width: 560px; margin: 0 auto; padding: 0 16px 48px 40px; }

/* ---------- cabecera ---------- */
.top { display: flex; align-items: center; gap: 8px; padding: 14px 0 6px; }
.logo { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 30px; line-height: 1; margin: 0; flex: 1; text-decoration: none; }
.logo span { display: inline-block; }
.logo span:nth-child(6n+1) { color: var(--rojo); transform: rotate(-6deg); }
.logo span:nth-child(6n+2) { color: var(--azul); transform: translateY(2px) rotate(4deg); }
.logo span:nth-child(6n+3) { color: var(--verde); transform: rotate(-3deg); }
.logo span:nth-child(6n+4) { color: var(--amarillo); transform: translateY(-2px) rotate(5deg); }
.logo span:nth-child(6n+5) { color: var(--naranja); transform: rotate(-4deg); }
.logo span:nth-child(6n)   { color: var(--rosa); transform: translateY(1px) rotate(3deg); }
.lema { margin: 0 0 12px; color: var(--suave); font-size: 14px; }
.boton-redondo {
  width: 42px; height: 42px; border-radius: 50%; border: 2.5px solid var(--tinta); background: var(--papel);
  box-shadow: 2px 2px 0 var(--sombra); font-size: 19px; display: grid; place-items: center; padding: 0;
}
.boton-redondo:active { transform: translate(2px, 2px); box-shadow: none; }

/* ---------- pegatina (tarjeta base) ---------- */
.pegatina {
  background: var(--papel); border: 2.5px solid var(--tinta); border-radius: 18px;
  box-shadow: 4px 4px 0 var(--sombra);
}

/* ---------- tiempo ---------- */
.tiempo { padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; }
.tiempo .icono { font-size: 44px; grid-row: span 2; line-height: 1; }
.tiempo .linea1 { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 20px; }
.tiempo .linea1 b { color: var(--rojo); }
.tiempo .consejo { font-size: 14px; }
.tiempo .extra { grid-column: 1 / -1; font-size: 12.5px; color: var(--suave); border-top: 2px dashed var(--rejilla); margin-top: 6px; padding-top: 6px; }
.fuente-tiempo { font-size: 11px; color: var(--suave); }

.simulador { margin: 10px 0 0; }
.simulador .titulo { font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .6px; margin: 8px 0 4px; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; border: 2px solid var(--tinta); background: var(--chip); border-radius: 999px;
  padding: 5px 12px; font-size: 14px; font-weight: 700; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--amarillo); color: #2a2b3d; box-shadow: 2px 2px 0 var(--sombra); }

/* ---------- mapa ---------- */
.mapa-caja { margin: 14px 0; overflow: hidden; position: relative; }
#mapa { height: 230px; transition: height .3s; background: var(--chip); }
.mapa-caja.grande #mapa { height: 68vh; }
.mapa-caja .leaflet-tile-pane { filter: var(--mapa-filtro); }
.mapa-boton {
  position: absolute; right: 10px; bottom: 10px; z-index: 500;
  border: 2.5px solid #2a2b3d; background: #fff; color: #2a2b3d; border-radius: 999px; padding: 6px 14px;
  font-weight: 800; box-shadow: 2px 2px 0 #2a2b3d;
}
.marca-num {
  width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid #2a2b3d; color: #2a2b3d;
  display: grid; place-items: center; font: 700 15px/1 "Fredoka", sans-serif; box-shadow: 2px 2px 0 rgba(0,0,0,.35);
}
.marca-tu { width: 18px; height: 18px; border-radius: 50%; background: #2f6fd0; border: 3px solid #fff; box-shadow: 0 0 0 2px #2f6fd0; }
.marca-bar { font-size: 20px; line-height: 1; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.4)); }
.leaflet-container { font: inherit; }
.leaflet-control-attribution { font-size: 10px; }

/* ---------- hoy toca ---------- */
.hoy-toca { padding: 14px 16px 16px; position: relative; margin-bottom: 18px; transform: rotate(-.6deg); }
.hoy-toca .antetitulo { font-size: 13px; text-transform: uppercase; letter-spacing: .7px; color: var(--suave); font-weight: 800; }
.hoy-toca h2 { margin: 2px 0 6px; font-size: 26px; line-height: 1.1; padding-right: 96px; }
.hoy-toca .ir {
  display: inline-block; margin-top: 10px; background: var(--verde); color: #10251a; border: 2.5px solid var(--tinta);
  border-radius: 999px; padding: 8px 18px; font-weight: 800; text-decoration: none; box-shadow: 3px 3px 0 var(--sombra);
}

/* ---------- sello de nota ---------- */
.sello {
  position: absolute; top: 12px; right: 12px; width: 84px; height: 84px; border-radius: 50%;
  border: 3px solid currentColor; outline: 1.5px solid currentColor; outline-offset: -8px;
  display: grid; place-content: center; text-align: center; transform: rotate(-12deg);
  font-family: "Fredoka", sans-serif; font-weight: 700; line-height: 1;
}
.sello .n { font-size: 26px; }
.sello .t { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0; margin-top: 2px; max-width: 64px; }
.sello.peq { width: 60px; height: 60px; top: 50%; right: 10px; margin-top: -30px; outline-offset: -6px; }
.sello.peq .n { font-size: 19px; }
.sello.peq .t { font-size: 6.5px; max-width: 46px; }
.sob { color: var(--verde); } .not { color: var(--azul); } .bien { color: var(--naranja); }
.suf { color: var(--amarillo); } .nm { color: var(--rojo); }

/* ---------- ranking ---------- */
.seccion-titulo { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 0 10px; }
.seccion-titulo h2 { margin: 0; font-size: 21px; }
.seccion-titulo small { color: var(--suave); }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ranking li .cara:not(.detras) { display: block; position: relative; padding: 12px 80px 12px 58px; min-height: 92px; cursor: pointer; }
.ranking .num {
  position: absolute; left: 10px; top: 12px; width: 38px; height: 38px; border-radius: 50%;
  border: 2.5px solid var(--tinta); display: grid; place-items: center; color: #2a2b3d;
  font: 700 19px/1 "Fredoka", sans-serif;
}
.ranking h3 { margin: 0; font-size: 18px; line-height: 1.2; }
.motivos { margin: 4px 0 0; font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.motivos span { background: var(--chip); border-radius: 8px; padding: 1px 7px; }
.meta { margin-top: 6px; font-size: 13px; color: var(--suave); }
.aviso {
  margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--rojo);
  border: 2px dashed var(--rojo); border-radius: 10px; padding: 3px 8px; display: inline-block;
}
.vivo { font-size: 13px; font-weight: 700; }
.vivo.petado { color: var(--rojo); } .vivo.normal { color: var(--naranja); } .vivo.vacio { color: var(--verde); }
.vacio-lista { padding: 18px; text-align: center; }

/* colores de los números (también en el mapa) */
.c1 { background: #f4b928; } .c2 { background: #9ec3f0; } .c3 { background: #f2a98f; }
.c4, .c5, .c6, .c7, .c8 { background: #e9e4d4; }

/* ---------- hoja de ajustes ---------- */
.hoja-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 900; display: none; }
.hoja-fondo.abierta { display: block; }
.hoja {
  position: fixed; left: 50%; bottom: 0; width: min(560px, 100%); transform: translate(-50%, 105%);
  z-index: 901; border-radius: 22px 22px 0 0; border-bottom: none; padding: 18px 20px 28px; transition: transform .25s;
  max-height: 85vh; overflow-y: auto; visibility: hidden;
}
.hoja.abierta { transform: translate(-50%, 0); visibility: visible; }
.hoja h2 { margin: 0 0 4px; }
.hoja label { display: block; font-weight: 800; margin: 16px 0 6px; }
.hoja input[type=range] { width: 100%; accent-color: var(--rojo); }
.hoja .valor { font-family: "Fredoka", sans-serif; font-size: 22px; color: var(--rojo); }
.hoja .chips { flex-wrap: wrap; }
.hoja .cerrar { margin-top: 20px; width: 100%; border: 2.5px solid var(--tinta); background: var(--amarillo); color: #2a2b3d; border-radius: 999px; padding: 10px; font-weight: 800; box-shadow: 3px 3px 0 var(--sombra); }

.pie { margin-top: 28px; font-size: 12px; color: var(--suave); text-align: center; }
.pie b { color: var(--rojo); }

/* ---------- ficha del parque ---------- */
.volver { display: inline-block; margin: 14px 0 6px; font-weight: 800; text-decoration: none; }
.ficha-cabeza { padding: 14px 106px 14px 16px; position: relative; min-height: 112px; }
.ficha-cabeza h1 { margin: 0; font-size: 26px; line-height: 1.1; }
.ficha-cabeza .meta { font-size: 14px; }
.ficha-mapa #mapa { height: 250px; }
.bloque { padding: 14px 16px; margin-top: 16px; }
.bloque h2 { margin: 0 0 8px; font-size: 19px; }
.bloque p { margin: 6px 0; }
.lista-cosas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 14.5px; }
.lista-cosas li.no { color: var(--suave); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.bar { border-top: 2px dashed var(--rejilla); padding: 10px 0; }
.bar:first-of-type { border-top: none; padding-top: 2px; }
.bar h3 { margin: 0; font-size: 16.5px; }
.bar .precios { font-size: 13px; color: var(--suave); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.etiquetas span { font-size: 12.5px; border: 1.5px solid var(--tinta); border-radius: 8px; padding: 0 6px; }
.etiquetas span.bueno { background: var(--verde); color: #10251a; border-color: var(--verde); font-weight: 700; }
.botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.botones button {
  flex: 1; min-width: 88px; border: 2.5px solid var(--tinta); background: var(--chip); border-radius: 14px;
  padding: 9px 6px; font-weight: 800; box-shadow: 2px 2px 0 var(--sombra);
}
.botones button[aria-pressed="true"] { background: var(--amarillo); color: #2a2b3d; }
.estoy {
  width: 100%; margin-top: 10px; border: 2.5px solid var(--tinta); background: var(--azul); color: #fff;
  border-radius: 16px; padding: 13px; font: 600 18px "Fredoka", sans-serif; box-shadow: 3px 3px 0 var(--sombra);
}
:root[data-theme="pizarra"] .estoy { color: #0d2236; }
.estoy.marcado { background: var(--verde); color: #10251a; }
.vamos {
  display: block; text-align: center; margin: 20px 0 0; background: var(--rojo); color: #fff; text-decoration: none;
  border: 2.5px solid var(--tinta); border-radius: 999px; padding: 13px; font: 600 20px "Fredoka", sans-serif; box-shadow: 4px 4px 0 var(--sombra);
}
:root[data-theme="pizarra"] .vamos { color: #3a120b; }
.gracias { color: var(--verde); font-weight: 800; font-size: 14px; min-height: 1.4em; }

@media (max-width: 380px) {
  .app { padding-left: 34px; padding-right: 14px; }
  .lista-cosas { grid-template-columns: 1fr; }
}

/* ---------- app real ---------- */
.ubicacion { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; }
.ubicacion .donde { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boton-texto {
  border: 2px solid var(--tinta); background: var(--chip); border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: 13.5px; flex: none;
}
.aviso-ubicacion { margin: 12px 0 0; padding: 12px 14px; }
.aviso-ubicacion p { margin: 0 0 8px; }
.buscador { display: flex; gap: 6px; }
.buscador input {
  flex: 1; min-width: 0; font: inherit; color: var(--tinta); background: var(--papel); border: 2.5px solid var(--tinta);
  border-radius: 12px; padding: 8px 10px;
}
.resultados { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.resultados button { width: 100%; text-align: left; border: 2px solid var(--rejilla); background: var(--chip); border-radius: 10px; padding: 6px 10px; font-size: 14px; }
.eligiendo #mapa { outline: 3px dashed var(--rojo); outline-offset: -3px; cursor: crosshair; }
.cargando { padding: 18px; text-align: center; color: var(--suave); }
.error { padding: 14px; color: var(--rojo); font-weight: 700; }
.noche { margin-top: 6px; font-size: 13px; font-weight: 800; color: var(--azul); }
.cosas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cosa {
  border: 1.5px solid var(--tinta); border-radius: 9px; padding: 2px 8px; font-size: 13.5px; background: transparent; text-align: left;
}
.cosa.si { background: var(--verde); border-color: var(--verde); color: #10251a; font-weight: 700; }
.cosa.no { color: var(--suave); text-decoration: line-through; text-decoration-thickness: 1.5px; border-style: dashed; }
.cosa.nose { border-style: dashed; color: var(--suave); }
.cosa .origen { font-size: 10.5px; opacity: .8; margin-left: 3px; }
.pregunta { margin-top: 8px; padding: 8px 10px; border: 2px dashed var(--tinta); border-radius: 12px; font-size: 14.5px; }
.pregunta .botones button { min-width: 70px; padding: 6px; }
.coles-lista { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.coles-lista input[type=time] { font: inherit; color: var(--tinta); background: var(--papel); border: 2px solid var(--tinta); border-radius: 8px; padding: 2px 6px; }
.leyenda { font-size: 12px; color: var(--suave); margin-top: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.mejor-rato {
  grid-column: 1 / -1; margin-top: 8px; text-align: left; border: 2px dashed var(--verde); background: transparent;
  border-radius: 12px; padding: 6px 10px; font-size: 14px; color: var(--tinta);
}
.mejor-rato b { color: var(--verde); }
.avisar {
  display: block; width: 100%; margin: 12px 0 0; background: var(--papel); color: var(--tinta);
  border: 2.5px solid var(--tinta); border-radius: 999px; padding: 11px; font: 600 17px "Fredoka", sans-serif; box-shadow: 3px 3px 0 var(--sombra);
}

.credito-mapa {
  border: 0; background: rgba(255,255,255,.85); color: #2a2b3d; border-radius: 999px; font-size: 12px;
  min-width: 22px; height: 22px; padding: 0 6px; margin: 0 0 6px 6px !important; line-height: 22px;
}
.credito-mapa a { color: #2a2b3d; }
.mas-cosas { border: 1.5px dashed var(--suave); background: transparent; color: var(--suave); border-radius: 9px; padding: 2px 8px; font-size: 13px; }
.plegadas { display: contents; }
.plegadas[hidden] { display: none; }
.abierto { font-family: "Nunito", sans-serif; font-size: 12.5px; font-weight: 800; margin-left: 4px; }
.abierto.si { color: var(--verde); } .abierto.no { color: var(--rojo); }
h3.sub { font-size: 15px; margin: 12px 0 0; color: var(--suave); }
#pregunta .pregunta { border-color: var(--azul); font-size: 16px; }

/* ---------- tarjeta que gira: delante el resumen, detrás el parque de cerca ---------- */
.tarjeta { perspective: 1200px; position: relative; transition: height .4s; }
.giro { position: relative; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); transform-style: preserve-3d; height: 100%; }
.tarjeta.girada .giro { transform: rotateY(180deg); }
.cara { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cara.detras { position: absolute; inset: 0; transform: rotateY(180deg); overflow: hidden; padding: 0; }
.hoy-toca.cara { cursor: pointer; }
.pista { text-transform: none; letter-spacing: 0; font-weight: 700; }
.plano {
  flex: 1; min-height: 240px;
  background-color: var(--bg);
  background-image: linear-gradient(var(--rejilla) 1px, transparent 1px), linear-gradient(90deg, var(--rejilla) 1px, transparent 1px);
  background-size: 18px 18px;
}
.plano.leaflet-container { background-color: var(--bg); }
/* las calles, casi borradas: un boceto a lápiz debajo del dibujo */
.plano .teselas-boceto { filter: grayscale(1) contrast(1.6) brightness(1.25) blur(.4px); opacity: .13 !important; mix-blend-mode: multiply; }
:root[data-theme="pizarra"] .plano .teselas-boceto { filter: grayscale(1) invert(1) contrast(1.4) blur(.4px); opacity: .16 !important; mix-blend-mode: screen; }
.titulo-plano {
  position: absolute; top: 8px; left: 10px; z-index: 600; pointer-events: none; transform: rotate(-2deg);
  font: 700 17px "Fredoka", sans-serif; color: var(--tinta); background: var(--papel); padding: 1px 10px;
  border: 2px solid var(--tinta); border-radius: 10px; box-shadow: 2px 2px 0 var(--sombra);
}
.casita {
  display: inline-flex; align-items: center; gap: 3px; transform: translate(-50%, -50%); white-space: nowrap;
  background: var(--papel); border: 2px solid var(--tinta); border-radius: 6px 6px 3px 3px; padding: 1px 6px 1px 3px;
  font: 700 11.5px/1.3 "Fredoka", sans-serif; color: var(--tinta); box-shadow: 2px 2px 0 var(--sombra);
}
.casita span { font-size: 13px; }
.marca-cosa.t-banco { font-size: 15px; }
.marca-cosa.t-elemento, .marca-cosa.t-juegos { font-size: 20px; }
.plano-pie { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 2px dashed var(--rejilla); background: var(--papel); }
.leyenda-plano { flex: 1; font-size: 13.5px; font-weight: 700; }
.plano-botones { display: flex; gap: 6px; }
.plano-botones a { text-decoration: none; }
.marca-cosa { font-size: 17px; line-height: 20px; text-align: center; filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
.marca-cosa.t-arbol { font-size: 15px; }
.etiqueta-bar { font: 700 11px "Nunito", sans-serif; padding: 1px 5px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .giro, .tarjeta { transition: none; } }

/* ---------- lámina "plano de conjunto" (detrás de la tarjeta) ---------- */
:root {
  --pl-papel: #fbf8ef; --pl-parque: #dcebc6; --pl-cesped: #c2dd9f; --pl-brizna: #8fb86a; --pl-bosque: #a3c784; --pl-arbustos: #b3cf8f;
  --pl-pavimento: #efe6d1; --pl-junta: #ddd0b3; --pl-pista: #a9cf8f; --pl-perros: #e8dfc4; --pl-juegos: #f6cdb0; --pl-punto: #e5a27a;
  --pl-arena: #f4e4a8; --pl-grano: #cdb36a; --pl-agua: #aad4f0; --pl-edificio: #e6e1d5; --pl-rayado: #c9c1ad; --pl-borde: #a99f88;
  --pl-camino: #f3ead6; --pl-camino-borde: #cdbf9f; --pl-valla: #6d5b46; --pl-seto: #5f9148; --pl-copa: #4f8f43; --pl-copa-luz: #86c072;
  --pl-copa-borde: #2f5f2a; --pl-sombra: rgba(40, 40, 30, .16); --pl-tinta: #2a2b3d;
}
:root[data-theme="pizarra"] {
  --pl-papel: #22382e; --pl-parque: rgba(162,227,172,.10); --pl-cesped: rgba(162,227,172,.20); --pl-brizna: rgba(162,227,172,.6);
  --pl-bosque: rgba(162,227,172,.28); --pl-arbustos: rgba(162,227,172,.25); --pl-pavimento: rgba(241,238,228,.10); --pl-junta: rgba(241,238,228,.22);
  --pl-pista: rgba(162,227,172,.3); --pl-perros: rgba(241,238,228,.12); --pl-juegos: rgba(255,191,134,.28); --pl-punto: rgba(255,191,134,.7);
  --pl-arena: rgba(255,224,138,.3); --pl-grano: rgba(255,224,138,.8); --pl-agua: rgba(146,198,255,.35); --pl-edificio: rgba(241,238,228,.08);
  --pl-rayado: rgba(241,238,228,.25); --pl-borde: rgba(241,238,228,.5); --pl-camino: rgba(241,238,228,.22); --pl-camino-borde: rgba(241,238,228,.45);
  --pl-valla: #ffe08a; --pl-seto: #a2e3ac; --pl-copa: rgba(162,227,172,.55); --pl-copa-luz: rgba(162,227,172,.8); --pl-copa-borde: #a2e3ac;
  --pl-sombra: rgba(0,0,0,.25); --pl-tinta: #f1eee4;
}
.detras-contenido { display: flex; flex-direction: column; }
.cabecera-lamina { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px 6px; border-bottom: 2px solid var(--tinta); }
.titulo-lamina { font: 700 12px "Fredoka", sans-serif; letter-spacing: 1.5px; color: var(--suave); }
.nombre-lamina { font: 600 15px "Fredoka", sans-serif; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plano { position: relative; flex: none; min-height: 200px; background: var(--pl-papel); overflow: hidden; }
.plano .cargando { padding-top: 90px; }
.lamina { display: block; width: 100%; height: 100%; }
.pl-papel { fill: var(--pl-papel); }
.pl-f { stroke: var(--pl-borde); stroke-width: .25; }
.pl-parque { fill: var(--pl-parque); stroke: var(--pl-seto); stroke-width: .5; }
.pl-cesped { fill: var(--pl-cesped); }
.pl-brizna { stroke: var(--pl-brizna); stroke-width: .18; fill: none; }
.pl-bosque { fill: var(--pl-bosque); }
.pl-arbustos { fill: var(--pl-arbustos); }
.pl-pavimento { fill: var(--pl-pavimento); }
.pl-junta { stroke: var(--pl-junta); stroke-width: .1; fill: none; }
.pl-pista { fill: var(--pl-pista); stroke: #fff; stroke-width: .35; }
.pl-perros { fill: var(--pl-perros); }
.pl-juegos { fill: var(--pl-juegos); }
.pl-punto { fill: var(--pl-punto); }
path.pl-juegos { stroke: var(--pl-punto); stroke-width: .5; }
.pl-arena { fill: var(--pl-arena); }
.pl-grano { fill: var(--pl-grano); }
.pl-agua { fill: var(--pl-agua); stroke: #6aaad6; stroke-width: .3; }
.pl-edificio { fill: var(--pl-edificio); }
path.pl-edificio { stroke: var(--pl-borde); stroke-width: .35; }
.pl-rayado { stroke: var(--pl-rayado); stroke-width: .25; }
.pl-l { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pl-camino-borde { stroke: var(--pl-camino-borde); stroke-width: 2.9; }
.pl-camino { stroke: var(--pl-camino); stroke-width: 2.3; }
.pl-escaleras { stroke: var(--pl-camino-borde); stroke-width: 2.6; stroke-dasharray: .25 .45; }
.pl-valla { stroke: var(--pl-valla); stroke-width: .3; stroke-dasharray: 1 .5; }
.pl-seto { stroke: var(--pl-seto); stroke-width: 1.1; }
.pl-sombra { fill: var(--pl-sombra); }
.pl-arbol { stroke: var(--pl-copa-borde); stroke-width: .3; }
.pl-copa { stop-color: var(--pl-copa); }
.pl-copa-luz { stop-color: var(--pl-copa-luz); }
.pl-arbol-sin-hoja { fill: none; stroke: #9a7a55; stroke-width: .25; stroke-dasharray: .6 .4; }
.pl-arbol-sin-hoja path { stroke-dasharray: none; }
.pl-banco { fill: #8b6a4a; stroke: #5a4430; stroke-width: .1; }
.pl-fuente circle { fill: #e8f4fd; stroke: #2f6fd0; stroke-width: 2; }
.pl-fuente text { font-size: 12px; text-anchor: middle; dominant-baseline: central; }
.pl-emoji { font-size: calc(var(--fs) * 1.3); text-anchor: middle; dominant-baseline: central; }
.pl-yo circle { fill: none; stroke: var(--rojo); stroke-width: calc(var(--fs) * .2); stroke-dasharray: calc(var(--fs) * .5) calc(var(--fs) * .3); }
.pl-bar rect, .pl-bar .pico { fill: #f4b928; stroke: #2a2b3d; stroke-width: 2; }
.pl-bar text { text-anchor: middle; dominant-baseline: central; }
.pl-bar .cana { font-size: 13px; }
.pl-bar .letra-bar { font: 700 14px "Fredoka", sans-serif; fill: #2a2b3d; }
.pl-escala text { font-family: "Fredoka", sans-serif; fill: var(--pl-tinta); text-anchor: middle; }
.pl-escala .negro { fill: var(--pl-tinta); }
.pl-escala .blanco { fill: var(--pl-papel); stroke: var(--pl-tinta); stroke-width: .2; }
.pl-norte circle { fill: var(--pl-papel); stroke: var(--pl-tinta); stroke-width: 1.2; }
.pl-norte path { fill: var(--pl-tinta); }
.pl-norte text { font: 700 9px "Fredoka", sans-serif; fill: var(--pl-tinta); text-anchor: middle; }
.leyenda-lamina { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 8px 12px; font-size: 12.5px; border-top: 2px solid var(--tinta); }
.leyenda-lamina span { display: inline-flex; align-items: center; gap: 4px; }
.muestra { width: 14px; height: 10px; border: 1px solid var(--pl-borde); border-radius: 2px; display: inline-block; }
.m-cesped { background: var(--pl-cesped); }
.m-pavimento { background: var(--pl-pavimento); }
.m-juegos { background: var(--pl-juegos); }
.m-arena { background: var(--pl-arena); }
.m-pista { background: var(--pl-pista); }
.m-agua { background: var(--pl-agua); }
.m-edificio { background: var(--pl-edificio); }
.m-bosque { background: var(--pl-bosque); }
.m-arbustos { background: var(--pl-arbustos); }
.m-perros { background: var(--pl-perros); }
.m-camino { background: var(--pl-camino); border-color: var(--pl-camino-borde); height: 6px; }
.m-escaleras { background: repeating-linear-gradient(90deg, var(--pl-camino-borde) 0 2px, transparent 2px 4px); height: 6px; }
.m-valla { border: 0; border-top: 2px dashed var(--pl-valla); height: 0; }
.m-seto { background: var(--pl-seto); height: 5px; border: 0; }
.letra { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--amarillo); color: #2a2b3d; font: 700 10px "Fredoka", sans-serif; border: 1px solid var(--tinta); }
.plano-pie small { flex: 1; color: var(--suave); font-size: 11px; }

/* foto aérea muy clarita debajo del dibujo; el dibujo se vuelve algo transparente para que se intuya */
.pl-satelite { opacity: .42; filter: saturate(.55) brightness(1.15) contrast(.85); }
:root[data-theme="pizarra"] .pl-satelite { opacity: .3; filter: grayscale(.5) brightness(.9); }
.pl-f { fill-opacity: .62; }
path.pl-edificio { fill-opacity: .5; }
.pl-parque { fill-opacity: .35; }
.pl-camino { stroke-opacity: .8; }
.pl-camino-borde { stroke-opacity: .55; }

/* calzadas en la lámina (debajo de los caminos) y bares al otro lado de una avenida */
.pl-calzada_avenida { stroke: #55586a; stroke-width: 11; stroke-opacity: .62; stroke-linecap: butt; }
.pl-calzada_calle { stroke: #6e7183; stroke-width: 6.5; stroke-opacity: .5; stroke-linecap: butt; }
.pl-eje { stroke: #ffffff; stroke-width: .35; stroke-dasharray: 3 3; stroke-opacity: .9; }
:root[data-theme="pizarra"] .pl-calzada_avenida, :root[data-theme="pizarra"] .pl-calzada_calle { stroke: #0f1d17; stroke-opacity: .7; }
.m-calzada_avenida { background: linear-gradient(transparent 3px, #fff 3px, #fff 4px, transparent 4px), #7c7f90; height: 8px; border: 0; }
.m-calzada_calle { background: #9a9cab; height: 5px; border: 0; }
.pl-bar.cruzando rect, .pl-bar.cruzando .pico { stroke: #e0503a; stroke-width: 3; }
.peligro { color: var(--rojo); }

/* favoritos */
.lista-favoritos { display: grid; gap: 8px; margin-bottom: 8px; }
.favorito { display: block; padding: 10px 14px; text-decoration: none; }
.favorito small { color: var(--suave); }
.es-favorito { font-size: .9em; }
.ficha-cabeza .estrella { margin-top: 10px; }
.top a.boton-redondo { text-decoration: none; }

/* ---------- "Cómo funciona": instrucciones de montaje ---------- */
.ikea-portada { padding: 16px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.ikea-portada h1 { margin: 0; font-size: 28px; line-height: 1.05; }
.ikea-portada .modelo { font: 700 13px "Fredoka", sans-serif; letter-spacing: 2px; color: var(--suave); }
.ikea-datos { display: flex; gap: 10px; flex-wrap: wrap; font-weight: 800; font-size: 14px; margin-top: 6px; }
.ikea-datos span { border: 2px solid var(--tinta); border-radius: 8px; padding: 2px 8px; }
.ikea-piezas { padding: 14px 16px; margin-top: 16px; }
.ikea-piezas ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 14.5px; }
.ikea-piezas b { font-family: "Fredoka", sans-serif; }
.paso { padding: 14px 16px; margin-top: 16px; display: grid; grid-template-columns: 54px 1fr; gap: 4px 14px; align-items: start; }
.paso .n { grid-row: span 2; width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--tinta); display: grid; place-items: center;
  font: 700 26px "Fredoka", sans-serif; background: var(--amarillo); color: #2a2b3d; }
.paso h2 { margin: 6px 0 2px; font-size: 20px; }
.paso p { margin: 4px 0; font-size: 15px; }
.paso svg { grid-column: 1 / -1; width: 100%; max-height: 150px; margin: 8px 0 2px; }
.paso svg .l { fill: none; stroke: var(--tinta); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.paso svg .r { fill: var(--rojo); } .paso svg .v { fill: var(--verde); } .paso svg .a { fill: var(--amarillo); } .paso svg .z { fill: var(--azul); }
.paso svg text { font: 700 16px "Fredoka", sans-serif; fill: var(--tinta); }
.paso svg .no { stroke: var(--rojo); stroke-width: 4; stroke-linecap: round; }
.paso svg .si { stroke: var(--verde); stroke-width: 4; stroke-linecap: round; fill: none; }
.ojo { padding: 12px 16px; margin-top: 16px; border-color: var(--rojo); }
.ojo h2 { margin: 0 0 6px; color: var(--rojo); font-size: 18px; }
.pesos { margin-top: 10px; display: grid; gap: 5px; }
.peso { display: grid; grid-template-columns: 9.5em 1fr 2.2em; gap: 8px; align-items: center; font-size: 13.5px; }
.peso .barra { height: 12px; border-radius: 6px; background: var(--chip); border: 1.5px solid var(--tinta); overflow: hidden; }
.peso .barra i { display: block; height: 100%; background: var(--verde); }
.peso .barra i.tiempo { background: var(--azul); }
.peso b { text-align: right; font-family: "Fredoka", sans-serif; }
.restas { margin: 8px 0 0; padding-left: 1.1em; font-size: 14.5px; }
.listo { text-align: center; padding: 18px; margin-top: 16px; }
.listo .gordo { font: 700 44px "Fredoka", sans-serif; color: var(--verde); }
.paso > .chips, .paso > .pesos, .paso > .restas { grid-column: 1 / -1; }
.ikea-portada svg .l { fill: none; stroke: var(--tinta); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ikea-portada svg circle:not(.l):not(.r) { fill: var(--tinta); }
.ikea-portada svg .r { fill: var(--rojo); }

/* 💬 Opinar */
#opinar-hoja textarea, #opinar-hoja input:not(.sr) {
  width: 100%; font: inherit; color: var(--tinta); background: var(--papel); border: 2.5px solid var(--tinta); border-radius: 12px; padding: 8px 10px;
}
#opinar-hoja .chips { flex-wrap: wrap; margin-top: 8px; }

.extra-aire { grid-column: 1 / -1; font-size: 12.5px; color: var(--suave); }
.aire b { color: var(--tinta); }

/* ---------- 🗳️ encuestas ---------- */
.cuantos { margin: -4px 0 8px; color: var(--suave); }
.aviso-seleccion { padding: 8px 12px; margin-bottom: 10px; font-weight: 800; border-color: var(--azul); }
.eligiendo-parques .tarjeta .cara:not(.detras) { outline: 3px dashed var(--suave); outline-offset: 3px; }
.eligiendo-parques .tarjeta.elegida .cara:not(.detras) { outline: 4px solid var(--azul); background: color-mix(in srgb, var(--azul) 12%, var(--papel)); }
.eligiendo-parques .tarjeta.elegida .cara:not(.detras)::after {
  content: "✓"; position: absolute; top: -10px; right: -8px; width: 30px; height: 30px; border-radius: 50%; background: var(--azul);
  color: #fff; display: grid; place-items: center; font: 700 18px "Fredoka", sans-serif; border: 2px solid var(--tinta);
}
.hoy-toca.cara { position: relative; }
.barra-encuesta {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(520px, calc(100% - 24px)); z-index: 850;
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
}
.barra-encuesta span { flex: 1; font-weight: 800; }
.barra-encuesta .principal { background: var(--amarillo); color: #2a2b3d; }
.barra-encuesta .principal:disabled { opacity: .45; }
#encuesta-hoja input { width: 100%; font: inherit; color: var(--tinta); background: var(--papel); border: 2.5px solid var(--tinta); border-radius: 12px; padding: 8px 10px; }
.encuesta-cabeza { padding: 16px; margin-top: 10px; }
.encuesta-cabeza .antetitulo { font-size: 13px; letter-spacing: .7px; color: var(--suave); font-weight: 800; }
.encuesta-cabeza h1 { margin: 4px 0 6px; font-size: 26px; line-height: 1.1; }
.aviso.exito { color: var(--verde); border-color: var(--verde); }
#quien input { width: 100%; font: inherit; color: var(--tinta); background: var(--papel); border: 2.5px solid var(--tinta); border-radius: 12px; padding: 8px 10px; margin-top: 6px; }
.opciones { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.opcion { padding: 12px 14px; }
.opcion.mia { outline: 3px solid var(--azul); outline-offset: -1px; }
.opcion-cabeza { display: flex; align-items: baseline; gap: 8px; }
.opcion-cabeza h3 { margin: 0; flex: 1; font-size: 17px; }
.opcion .cuenta { font: 700 22px "Fredoka", sans-serif; }
.barra-voto { height: 14px; border: 2px solid var(--tinta); border-radius: 8px; overflow: hidden; margin: 8px 0 6px; background: var(--chip); }
.barra-voto i { display: block; height: 100%; background: var(--amarillo); transition: width .4s; }
.quien { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12.5px; }
.quien span { background: var(--chip); border-radius: 8px; padding: 1px 7px; }
.opcion-botones { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.opcion-botones .votar { flex: 1; border: 2.5px solid var(--tinta); background: var(--chip); border-radius: 14px; padding: 8px; font-weight: 800; box-shadow: 2px 2px 0 var(--sombra); }
.opcion-botones .votar[aria-pressed="true"] { background: var(--azul); color: #fff; }
.opcion-botones a { text-decoration: none; }
.compartir .qr { display: grid; place-items: center; margin: 6px auto 8px; width: 210px; background: #fff; padding: 8px; border-radius: 12px; border: 2px solid var(--tinta); }
.compartir .qr svg { width: 190px; height: 190px; }
.compartir .enlace { font-size: 12.5px; word-break: break-all; text-align: center; color: var(--suave); margin-bottom: 6px; }

/* lo que lleva display propio necesita respetar [hidden] */
.barra-encuesta[hidden], .aviso-seleccion[hidden], .hoja-fondo[hidden] { display: none; }

/* 🍺 Invítame a una caña */
.donar { text-align: center; margin-top: 18px; padding-top: 12px; border-top: 2px dashed var(--rejilla); }
.donar[hidden] { display: none; }
.donar p { margin: 0 0 8px; color: var(--suave); font-size: 14px; }
.boton-donar {
  display: inline-block; background: var(--amarillo); color: #2a2b3d; border: 2.5px solid var(--tinta); border-radius: 999px;
  padding: 9px 18px; font: 600 16px "Fredoka", sans-serif; text-decoration: none; box-shadow: 3px 3px 0 var(--sombra);
}

/* 🎈 salas de bolas / plan bajo techo */
.salas { margin: 18px 0 6px; }
.salas[hidden] { display: none; }
.lista-salas { display: grid; gap: 10px; }
.sala { padding: 12px 14px; position: relative; }
.sala h3 { margin: 0; font-size: 17px; }
.sala .meta { margin-top: 4px; }
.lema-sala { margin: 4px 0 0; font-weight: 700; }
.nota-sala { margin: 4px 0 0; font-size: 14px; color: var(--suave); }
.botones-sala { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.botones-sala a { text-decoration: none; }
.sala.patrocinada { border-color: var(--amarillo); box-shadow: 4px 4px 0 var(--amarillo); margin-bottom: 12px; }
.sello-patrocinio {
  display: inline-block; font: 700 11px "Nunito", sans-serif; letter-spacing: .6px; text-transform: uppercase;
  background: var(--amarillo); color: #2a2b3d; border-radius: 6px; padding: 2px 8px; margin-bottom: 6px;
}

/* ---------- ficha de sala (estilo WallaPark; el color de la sala solo en la portada) ---------- */
:root { --sala-fondo: var(--azul); --sala-acento: var(--amarillo); --sala-texto: #ffffff; }
.sala-cabeza {
  position: relative; padding: 18px 16px 16px; margin-top: 4px; text-align: center; transform: rotate(-.6deg);
  background: var(--sala-fondo); color: var(--sala-texto); border-color: var(--tinta);
}
.sala-logo { width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--sala-acento); box-shadow: 3px 3px 0 var(--sombra); background: var(--sala-fondo); }
.sala-cabeza h1 { margin: 8px 0 2px; font-size: 30px; color: var(--sala-acento); }
.sala-titular { margin: 0; font: 600 18px "Fredoka", sans-serif; }
.sala-desc { margin: 8px auto 0; max-width: 34em; font-size: 15px; opacity: .92; }
.sala-cabeza .meta { color: var(--sala-texto); opacity: .85; margin-top: 8px; }
.sello-patro { top: -16px; right: -6px; width: 92px; height: 92px; background: var(--amarillo); color: #2a2b3d; transform: rotate(10deg); }
.sello-patro .t { font-size: 8.5px; }
.sala-datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.dato { padding: 10px 12px; display: grid; gap: 2px; }
.dato:nth-child(odd) { transform: rotate(-.8deg); } .dato:nth-child(even) { transform: rotate(.7deg); }
.dato b { font: 700 24px "Fredoka", sans-serif; color: var(--rojo); }
.dato span { font-size: 13px; color: var(--suave); }
.estrella { position: relative; text-align: center; padding-top: 22px; border-color: var(--rojo); transform: rotate(.5deg); }
.estrella-ico { font-size: 54px; line-height: 1; }
.estrella h2 { font-size: 22px; margin-top: 6px; }
.pegatina-nueva {
  position: absolute; top: -12px; left: 14px; transform: rotate(-6deg); background: var(--rojo); color: #fff;
  font: 700 13px "Fredoka", sans-serif; padding: 3px 10px; border-radius: 8px; border: 2px solid var(--tinta);
}
.destacados { display: grid; gap: 10px; }
.destacado { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; }
.destacado .ico { font-size: 28px; line-height: 1; text-align: center; }
.destacado p { margin: 2px 0 0; font-size: 14px; color: var(--suave); }
.planes { gap: 6px 8px; }
.precios-sala { display: grid; gap: 6px; }
.precios-sala div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 2px dashed var(--rejilla); padding-bottom: 6px; }
.precios-sala b { font: 700 18px "Fredoka", sans-serif; color: var(--verde); white-space: nowrap; }
.lista-sala { margin: 10px 0 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: 14.5px; }
.lista-sala.si { list-style: "✓  "; } .lista-sala.no { list-style: "✗  "; color: var(--suave); }
.pasos-sala { margin: 6px 0 0; padding-left: 1.3em; display: grid; gap: 6px; }
.pasos-sala li::marker { font: 700 16px "Fredoka", sans-serif; color: var(--rojo); }
.caja-sala { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.caja-sala h3 { margin: 0; font-size: 15px; }
@media (max-width: 420px) { .caja-sala { grid-template-columns: 1fr; } }
.enlace-boton { display: block; text-align: center; text-decoration: none; }
.principal-sala { background: var(--amarillo); color: #2a2b3d; }

/* encuesta: opciones elegidas, añadir a mano, proponer */
.opciones-elegidas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.opciones-elegidas li { display: flex; align-items: center; gap: 8px; background: var(--chip); border: 2px solid var(--tinta); border-radius: 12px; padding: 6px 10px; font-weight: 700; }
.opciones-elegidas li span { flex: 1; min-width: 0; }
.opciones-elegidas .quitar { border: 0; background: transparent; font-size: 16px; padding: 0 4px; }
.anadir-opcion { display: flex; gap: 6px; margin-top: 8px; }
#encuesta-hoja .anadir-opcion input { flex: 1; min-width: 0; }
form.anadir-opcion.bloque { display: grid; }
.fila-proponer { display: flex; gap: 6px; }
.fila-proponer input { flex: 1; min-width: 0; font: inherit; color: var(--tinta); background: var(--papel); border: 2.5px solid var(--tinta); border-radius: 12px; padding: 8px 10px; }
.elegir-sala { display: none; }
.eligiendo-parques .elegir-sala { display: inline-block; border-color: var(--azul); color: var(--azul); }
.eligiendo-parques .elegir-sala[aria-pressed="true"] { background: var(--azul); color: #fff; }
#encuesta-crear:disabled { opacity: .45; }
form[hidden], .anadir-opcion[hidden] { display: none; }

/* lo oculto se queda oculto aunque su clase tenga display propio (barra, botones, formularios…) */
[hidden] { display: none !important; }

/* centros comerciales (plan bajo techo) y planes del ayuntamiento */
.subtitulo-centros { margin: 16px 0 8px; font: 600 16px "Fredoka", sans-serif; }
.sala.centro { border-style: dashed; }
.agenda { margin-top: 18px; }
.sala.plan-ayto h3 { font-size: 16px; }

.acciones-ranking { display: inline-flex; gap: 8px; align-items: center; }
.ayuda-votar { width: 34px; height: 34px; font: 700 18px "Fredoka", sans-serif; text-decoration: none; display: inline-grid; place-items: center; }

/* atajos de arriba: llevan a cada sección */
html { scroll-behavior: smooth; }
#ranking-cabeza, #favoritos, #salas, #agenda { scroll-margin-top: 12px; }
.atajos { margin: 4px 0 10px; }
.atajos .chip { text-decoration: none; white-space: nowrap; }

/* 🎒 la mochila: menú con todo lo que no es el ranking */
.mochila { font-size: 24px; }
.menu-lista { display: grid; gap: 8px; margin-top: 12px; }
.menu-lista > a, .menu-lista > button, .menu-lista .boton-donar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; width: 100%; text-align: left; text-decoration: none;
  padding: 11px 14px; border: 2px solid var(--tinta); border-radius: 14px; background: var(--papel, transparent); color: var(--tinta);
  font: 600 16px "Fredoka", sans-serif; box-shadow: 2px 2px 0 var(--sombra); cursor: pointer;
}
.menu-lista small { font: 400 13px "Nunito", sans-serif; opacity: .7; }
.menu-lista .boton-donar { background: var(--amarillo); color: #2a2b3d; }

/* ➕ falta un parque o un bar */
.falta-algo { display: block; width: 100%; margin: 14px 0 4px; }
.alta-mapa { height: 220px; border-radius: 14px; overflow: hidden; border: 2.5px solid var(--tinta); }
.alta-mapa .leaflet-tile-pane { filter: var(--mapa-filtro); }
.de-la-gente { margin-top: 10px; padding: 10px 12px; border: 2px dashed var(--tinta); border-radius: 14px; font-size: 14px; }
.marca-alta { font-size: 32px; line-height: 1; filter: drop-shadow(1px 2px 0 rgba(0,0,0,.35)); cursor: grab; }
#alta-nombre { width: 100%; font: inherit; color: var(--tinta); background: var(--papel); border: 2.5px solid var(--tinta); border-radius: 12px; padding: 10px 12px; }