/* Mockup de Pafollar: «pa' ver follaje». Colores de otoño (ocre, teja, musgo), papel de cuaderno de campo,
   una hoja como marca. Día / Noche; nada de neones ni degradados. */
:root {
  --papel: #f6f0e4; --tarjeta: #fffdf8; --tinta: #2b2620; --suave: #7a6f61; --linea: #e3d8c4;
  --teja: #c4561f; --teja-tinta: #ffffff; --ocre: #d99a1e; --musgo: #4f7a3a; --musgo-claro: #e3ecd6; --flor: #c9578a; --agua: #2f7fb5;
  --verde: #5b9a45; --empieza: #b9b232; --punto: #e08a1e; --cae: #9a5a2c; --pelado: #a49b8e;
  --titulo: "Fraunces", Georgia, serif; --texto: "Nunito Sans", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="dia"]) {
    --papel: #16130f; --tarjeta: #201c17; --tinta: #f1e9dc; --suave: #c9bdab; --linea: #362f27;
    --teja: #e2743d; --teja-tinta: #1d0f07; --musgo: #86b46c; --musgo-claro: #24301d; --pelado: #7e766b; color-scheme: dark;
  }
}
:root[data-tema="noche"] {
  --papel: #16130f; --tarjeta: #201c17; --tinta: #f1e9dc; --suave: #c9bdab; --linea: #362f27;
  --teja: #e2743d; --teja-tinta: #1d0f07; --musgo: #86b46c; --musgo-claro: #24301d; --pelado: #7e766b; color-scheme: dark;
}
:root[data-tema="dia"] { color-scheme: light; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 15px/1.45 var(--texto); }
h1, h2, h3 { font-family: var(--titulo); font-weight: 800; margin: 0; letter-spacing: -.2px; }
button { font: inherit; color: inherit; cursor: pointer; }

/* página del mockup */
.cabeza-mockup { max-width: 1240px; margin: 0 auto; padding: 24px 16px 8px; display: flex; gap: 16px; align-items: end; justify-content: space-between; flex-wrap: wrap; }
.cabeza-mockup h1 { font-size: 34px; }
.cabeza-mockup p { margin: 4px 0 0; color: var(--suave); max-width: 660px; }
.temas { display: flex; border: 1.5px solid var(--linea); border-radius: 999px; padding: 3px; background: var(--tarjeta); }
.temas button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; font-weight: 800; }
.temas button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.pantallas { max-width: 1240px; margin: 0 auto; padding: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 28px; align-items: start; }
figure { margin: 0; }
.pantalla figcaption { font-family: var(--titulo); font-size: 19px; font-weight: 800; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.pantalla figcaption span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--teja); color: var(--teja-tinta); font-size: 14px; font-family: var(--texto); }
.nota { color: var(--suave); font-size: 13.5px; margin: 10px 2px 0; }
.movil { border: 2px solid var(--linea); border-radius: 30px; background: var(--papel); overflow: hidden; max-width: 400px; width: 100%; margin: 0 auto; }
.dentro { padding: 14px 14px 18px; display: grid; gap: 12px; }

/* piezas */
.barra { display: flex; align-items: center; gap: 10px; }
.logo { font-family: var(--titulo); font-weight: 800; font-size: 30px; flex: 1; display: flex; align-items: center; gap: 6px; }
.logo svg { width: 26px; height: 26px; }
.logo b { color: var(--teja); font-weight: 800; }
.redondo { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--linea); background: var(--tarjeta); display: grid; place-items: center; font-size: 17px; flex: none; }
.lema { margin: -6px 0 0; color: var(--suave); font-size: 14px; font-weight: 400; }
.tarjeta { background: var(--tarjeta); border: 1.5px solid var(--linea); border-radius: 18px; padding: 12px 14px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1.5px solid var(--linea); background: var(--tarjeta); border-radius: 999px; padding: 5px 11px; font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.finde { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dia { background: var(--tarjeta); border: 1.5px solid var(--linea); border-radius: 14px; padding: 8px 10px; }
.dia b { display: block; font-family: var(--titulo); font-size: 18px; }
.dia small { color: var(--suave); }
.seccion { display: flex; justify-content: space-between; align-items: baseline; }
.seccion h2 { font-size: 22px; }
.seccion a { color: var(--teja); font-weight: 800; font-size: 13.5px; text-decoration: none; }

/* el estado de un sitio: de verde a pelado */
.estado { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 13px; padding: 2px 9px; border-radius: 999px; border: 1.5px solid currentColor; white-space: nowrap; }
.e-verde { color: var(--verde); } .e-empieza { color: var(--empieza); } .e-punto { color: var(--punto); } .e-cae { color: var(--cae); } .e-pelado { color: var(--pelado); } .e-flor { color: var(--flor); } .e-agua { color: var(--agua); }
.sitio { display: grid; grid-template-columns: 62px 1fr; gap: 12px; align-items: center; }
.sitio + .sitio { border-top: 1px dashed var(--linea); padding-top: 12px; margin-top: 12px; }
.foto { width: 62px; height: 62px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; }
.f-haya { background: #f3d9b8; } .f-agua { background: #d6e8f3; } .f-pino { background: #dbe8cf; } .f-flor { background: #f3d6e3; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="dia"]) .foto { filter: brightness(.55) saturate(1.2); } }
:root[data-tema="noche"] .foto { filter: brightness(.55) saturate(1.2); }
.sitio b { display: block; font-size: 16px; }
.sitio small { color: var(--suave); display: block; }
.sitio .linea { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.cosas-utiles { margin: 18px 0 10px; padding: 12px; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--hoja, transparent); }
.cosas-utiles h3 { margin: 0 0 8px; }
.cosas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.cosas-lista a { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--linea); text-decoration: none; color: inherit; font-weight: 700; font-size: 14px; }
.cosas-lista a span { font-size: 18px; }
.cosas-lista a.con-foto { flex-direction: column; align-items: stretch; text-align: center; padding: 6px; }
.cosas-lista a.con-foto img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: #fff; }
.cosas-utiles small { display: block; margin-top: 8px; font-size: 11px; color: var(--suave); }
.publi { border: 2px dashed var(--linea); border-radius: 14px; padding: 8px 10px; color: var(--suave); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; min-height: 74px; }
.pie { color: var(--suave); font-size: 12.5px; text-align: center; margin: 0; }
.pie i { font-style: normal; }

/* ficha */
.volver { display: flex; align-items: center; gap: 10px; }
.volver h2 { font-size: 24px; flex: 1; line-height: 1.1; }
.portada-ficha { border-radius: 18px; height: 170px; background: #e7c9a2; position: relative; overflow: hidden; border: 1.5px solid var(--linea); }
.portada-ficha svg { width: 100%; height: 100%; display: block; }
.portada-ficha .estado { position: absolute; left: 10px; bottom: 10px; background: var(--tarjeta); }
.portada-ficha .fotos { position: absolute; right: 10px; bottom: 10px; background: var(--tarjeta); border-radius: 999px; padding: 2px 10px; font-weight: 800; font-size: 13px; }
.termometro h3 { font-size: 17px; margin-bottom: 8px; }
.escala { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.escala i { height: 12px; border-radius: 3px; }
.escala-txt { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; font-size: 11.5px; color: var(--suave); margin-top: 4px; }
.aguja { position: relative; height: 16px; }
.aguja span { position: absolute; top: 0; transform: translateX(-50%); font-size: 13px; }
.semanas { display: flex; gap: 4px; align-items: end; height: 46px; margin-top: 10px; }
.semanas i { flex: 1; border-radius: 4px 4px 2px 2px; }
.semanas-txt { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--suave); }
.votar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.votar button { border: 1.5px solid var(--linea); background: var(--papel); border-radius: 12px; padding: 6px 2px; font-size: 11.5px; font-weight: 800; display: grid; gap: 2px; justify-items: center; }
.votar button span { font-size: 20px; }
.votar button[aria-pressed="true"] { border-color: var(--teja); background: var(--tarjeta); }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dato { background: var(--tarjeta); border: 1.5px solid var(--linea); border-radius: 14px; padding: 8px 10px; }
.dato b { display: block; }
.dato small { color: var(--suave); }
.boton { border: 2px solid var(--tinta); background: var(--tarjeta); border-radius: 12px; padding: 10px; font-weight: 800; text-align: center; }
.boton.lleno { background: var(--teja); border-color: var(--teja); color: var(--teja-tinta); }
.botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* calendario */
.meses { display: grid; grid-template-columns: 92px repeat(12, 1fr); gap: 2px; font-size: 11px; align-items: center; }
.meses .cab { color: var(--suave); text-align: center; font-weight: 800; }
.meses .cab.hoy { color: var(--teja); }
.meses .que { font-weight: 800; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meses i { height: 14px; border-radius: 3px; }
.meses i.on { background: var(--c); }
.meses i.hoy { outline: 2px solid var(--teja); outline-offset: -1px; }
.ahora { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; }
.ahora + .ahora { border-top: 1px dashed var(--linea); padding-top: 10px; margin-top: 10px; }
.ahora .icono { font-size: 26px; text-align: center; }
.ahora b { display: block; }
.ahora small { color: var(--suave); }
.avisame { border: 1.5px solid var(--teja); color: var(--teja); background: none; border-radius: 999px; padding: 4px 10px; font-weight: 800; font-size: 12.5px; white-space: nowrap; }

.detras { max-width: 1240px; margin: 8px auto 40px; padding: 0 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.detras h2 { font-size: 21px; margin-bottom: 4px; }
.detras ul { margin: 0; padding-left: 18px; }
.detras li { margin: 3px 0; }
@media (max-width: 420px) { .movil { border: 0; border-radius: 0; } .pantallas { padding: 8px 0; } .pantalla figcaption, .nota { padding: 0 16px; } }

/* folloescapada */
.folloboton { font-size: 16px; }
.crear { display: grid; gap: 8px; }
.crear label { font-weight: 800; font-size: 14px; }
.crear label small { color: var(--suave); font-weight: 600; }
.elegido { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.campo-texto { border: 1.5px solid var(--linea); border-radius: 12px; padding: 8px 10px; font-size: 14px; color: var(--suave); background: var(--papel); }
.chat { background: #e9e2d5; border-radius: 18px; padding: 12px; display: flex; justify-content: flex-end; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="dia"]) .chat { background: #0f1412; } }
:root[data-tema="noche"] .chat { background: #0f1412; }
.burbuja { background: #d8f5c6; color: #1d2a17; border-radius: 14px 4px 14px 14px; padding: 5px; max-width: 290px; font-size: 14px; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="dia"]) .burbuja { background: #1f4a2c; color: #e7f3df; } }
:root[data-tema="noche"] .burbuja { background: #1f4a2c; color: #e7f3df; }
.burbuja p { margin: 6px 6px 0; }
.burbuja u { color: #1d6fa5; }
.burbuja .hora { display: block; text-align: right; font-size: 11px; opacity: .7; margin: 0 6px 2px; }
.enlace-previa { background: rgba(0,0,0,.06); border-radius: 10px; overflow: hidden; }
.previa-img { height: 96px; background: #e9a24a; display: flex; align-items: center; justify-content: center; gap: 10px; color: #3b1d05; }
.previa-img span { font-size: 44px; }
.previa-img b { font-family: var(--titulo); font-size: 20px; }
.previa-txt { padding: 6px 8px; display: grid; gap: 1px; }
.previa-txt small { opacity: .8; }
.previa-txt .dominio { opacity: .6; font-size: 11.5px; }
.recibe { display: grid; gap: 8px; }
.recibe .quien { margin: 0; font-size: 14px; }
.recibe h3 { font-size: 24px; }
.recibe .plan { margin: 0; font-style: italic; color: var(--suave); }
.votos-dia { display: grid; gap: 10px; }
.votos-dia > div { display: grid; grid-template-columns: 62px 1fr auto; column-gap: 8px; row-gap: 3px; align-items: center; }
.votos-dia b { grid-row: span 2; font-family: var(--titulo); }
.votos-dia small { color: var(--suave); font-size: 12.5px; }
.votos-dia > div > small:first-of-type { grid-column: 2 / 4; }
.barra-voto { height: 8px; border-radius: 4px; background: var(--linea); overflow: hidden; }
.barra-voto i { display: block; height: 100%; background: var(--musgo); }
.botones3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.botones3 .boton { padding: 9px 4px; font-size: 13.5px; }
.otra { border: 2px dashed var(--teja); background: none; color: var(--teja); border-radius: 12px; padding: 9px; font-weight: 800; }

/* ---------- la app (una columna, pantallas y pestañas abajo) ---------- */
.app { max-width: 480px; margin: 0 auto; padding: 14px 16px calc(84px + env(safe-area-inset-bottom)); }
.vista { display: grid; gap: 12px; }
a.sitio { color: inherit; text-decoration: none; }
a.redondo, a.boton, a.otra { color: inherit; text-decoration: none; display: grid; place-items: center; }
a.boton.lleno { color: var(--teja-tinta); }
a.otra { color: var(--teja); }
.app .temas { justify-self: center; }
.pestanas-app { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--tarjeta); border-top: 1.5px solid var(--linea); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); z-index: 5; }
.pestanas-app a { display: grid; justify-items: center; gap: 1px; text-decoration: none; color: var(--suave); font-weight: 800; font-size: 12px; padding: 4px; border-radius: 12px; }
.pestanas-app a span { font-size: 20px; }
.pestanas-app a[aria-current] { color: var(--teja); background: var(--papel); }
@media (min-width: 700px) { .pestanas-app { max-width: 480px; margin: 0 auto; border: 1.5px solid var(--linea); border-bottom: 0; border-radius: 18px 18px 0 0; } }

/* ---------- datos reales: lista, ficha y temporada ---------- */
.cargando { color: var(--suave); margin: 4px 0; }
.f-follaje { background: #f3d9b8; } .f-cascadas { background: #d6e8f3; } .f-flor { background: #f3d6e3; } .f-nieve { background: #e3ebf2; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="dia"]) .f-follaje, :root:not([data-tema="dia"]) .f-cascadas,
  :root:not([data-tema="dia"]) .f-flor, :root:not([data-tema="dia"]) .f-nieve { filter: brightness(.55) saturate(1.2); } }
:root[data-tema="noche"] .f-follaje, :root[data-tema="noche"] .f-cascadas, :root[data-tema="noche"] .f-flor, :root[data-tema="noche"] .f-nieve { filter: brightness(.55) saturate(1.2); }
#ficha { display: grid; gap: 12px; }
#ficha .portada-ficha { height: 130px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; }
.icono-grande { font-size: 64px; }
.portada-ficha .zona { font-weight: 800; color: #3b2a1a; background: rgba(255,255,255,.7); border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.termometro h3 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 18px; margin: 0; }
.termometro .cuenta { margin: 2px 0 6px; color: var(--suave); font-size: 13px; }
.escala i { height: 12px; border-radius: 3px; background: currentColor; }
.escala-txt { display: grid; }
.termometro h3.cuentalo { font-size: 15px; margin: 12px 0 6px; }
.votar button { font-size: 12px; padding: 8px 2px; }
.votar button[aria-pressed="true"] { border-color: var(--teja); background: var(--tarjeta); color: var(--teja); }
a.ahora { color: inherit; text-decoration: none; }
#temporada .ahora .estado { font-size: 12px; }

/* ---------- folloescapada de verdad ---------- */
.crear select, .crear textarea { width: 100%; border: 1.5px solid var(--linea); border-radius: 12px; padding: 9px 10px; font: inherit; background: var(--papel); color: var(--tinta); }
.crear textarea { resize: vertical; }
.aviso-form { margin: 0; font-weight: 800; color: var(--teja); min-height: 1.2em; }
.sitio-plan { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; color: inherit; text-decoration: none;
  background: var(--papel); border-radius: 14px; padding: 8px 10px; }
.sitio-plan b { display: block; font-family: var(--titulo); font-size: 19px; }
.sitio-plan small { color: var(--suave); }
.icono-plan { font-size: 34px; text-align: center; }
.pregunta-plan { margin: 4px 0 0; font-weight: 800; }
.dia-voto { display: grid; grid-template-columns: 24px auto 1fr auto; gap: 8px; align-items: center; cursor: pointer; }
.dia-voto input { width: 20px; height: 20px; accent-color: var(--teja); }
.dia-voto b { font-family: var(--titulo); white-space: nowrap; }
.dia-voto small { color: var(--suave); }
.gente { display: flex; flex-wrap: wrap; gap: 6px; }
.gente .chip { font-size: 12.5px; }
.botones3 .boton.lleno { background: var(--teja); border-color: var(--teja); color: var(--teja-tinta); }

/* ---------- mapa y pueblos ---------- */
.pestanas-app { grid-template-columns: repeat(4, 1fr); }
.mapa-grande { height: 62vh; min-height: 340px; border-radius: 18px; border: 1.5px solid var(--linea); overflow: hidden; z-index: 0; }
.leaflet-popup-content { font: 14px/1.4 var(--texto); }
.leaflet-popup-content a { color: var(--teja); font-weight: 800; }
.buscador { width: 100%; border: 1.5px solid var(--linea); border-radius: 999px; padding: 10px 14px; font: inherit; background: var(--tarjeta); color: var(--tinta); }
.del-mes { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; border-color: #e0b13a; }
.del-mes .copa { font-size: 40px; }
.del-mes b { display: block; font-family: var(--titulo); font-size: 24px; }
.del-mes small { display: block; color: var(--suave); }
.del-mes.vacio { border-style: dashed; }
.fila-ranking { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; color: inherit; text-decoration: none; }
.fila-ranking + .fila-ranking { border-top: 1px dashed var(--linea); }
.puesto { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--papel); }
.fila-ranking:first-child .puesto { background: #e0b13a; color: #fff; }
.fila-ranking small { color: var(--suave); }
.pueblo-cabeza .wiki { margin: 6px 0 2px; }
.pueblo-datos { margin: 0; font-weight: 800; color: var(--suave); font-size: 14px; }
.fuente { color: var(--suave); font-size: 12px; display: block; margin-top: 6px; }
.fuente a { color: inherit; }
.casa { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; }
.casa + .casa { border-top: 1px dashed var(--linea); }
.casa b { display: block; font-size: 15px; }
.casa small { color: var(--suave); }
.casas .chip, .enlaces-familia .chip { text-decoration: none; color: inherit; }
.enlaces-familia { display: flex; gap: 8px; flex-wrap: wrap; }
.votar-pueblo { display: grid; gap: 8px; }
.votar-pueblo h3 { font-size: 20px; margin: 0; }
.votar-pueblo .cuenta { margin: 0; color: var(--suave); }
.votar-pueblo .boton.lleno, .botones .boton.lleno { background: var(--teja); border-color: var(--teja); color: var(--teja-tinta); }

/* ---------- mapas como en Patardear: filtro de noche, crédito ⓘ, marcas ---------- */
:root { --mapa-filtro: saturate(.85); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="dia"]) { --mapa-filtro: invert(.92) hue-rotate(180deg) saturate(.4) brightness(.85); } }
:root[data-tema="noche"] { --mapa-filtro: invert(.92) hue-rotate(180deg) saturate(.4) brightness(.85); }
.leaflet-tile-pane { filter: var(--mapa-filtro); }
.credito-mapa { border: 0; background: rgba(255,255,255,.85); color: #2b2620; border-radius: 999px; padding: 2px 8px; font-size: 11px; }
.credito-mapa a { color: #2b2620; }
.marca-tu { width: 18px; height: 18px; border-radius: 50%; background: #2f6fd0; border: 3px solid #fff; box-shadow: 0 0 0 2px #2f6fd0; }
.marca-sitio { font-size: 26px; line-height: 1; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.45)); }
.como-llegar h3 { font-size: 17px; margin: 0 0 8px; }
.mapa-ficha { height: 220px; border-radius: 14px; overflow: hidden; border: 1.5px solid var(--linea); z-index: 0; }
.meta-ruta { margin: 8px 0 0; font-size: 14px; }
.meta-ruta a { color: var(--teja); font-weight: 800; }

/* ---------- rediseño de la portada: tarjetas ilustradas, «Chivarse», más contraste ---------- */
@media (prefers-color-scheme: dark) { :root:not([data-tema="dia"]) { --suave: #c2b6a4; --tarjeta: #241f19; --linea: #3d342a; } }
:root[data-tema="noche"] { --suave: #c2b6a4; --tarjeta: #241f19; --linea: #3d342a; }
.lista-sitios { display: grid; gap: 14px; }
.carta-sitio { background: var(--tarjeta); border: 1.5px solid var(--linea); border-radius: 22px; overflow: hidden; }
.carta-enlace { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 14px; color: inherit; text-decoration: none; }
.ilustracion { width: 96px; height: 128px; border-radius: 14px; object-fit: cover; display: block; }
.carta-texto { display: grid; align-content: start; gap: 6px; min-width: 0; }
.carta-texto h3 { font-family: var(--texto); font-weight: 800; font-size: 19px; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
.carta-texto .estado { justify-self: start; font-size: 14px; padding: 3px 11px; border-width: 2px; }
.chivatos, .donde { margin: 0; color: var(--suave); font-size: 14.5px; }
.carta-pie { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--linea); }
.carta-pie span { color: var(--suave); font-size: 14px; font-weight: 600; }
.chivarse { border: 2px solid var(--teja); color: var(--teja); background: transparent; border-radius: 999px; padding: 6px 14px; font-weight: 800; text-decoration: none; }
.chivarse:hover { background: var(--teja); color: var(--teja-tinta); }
#ficha .portada-ficha { height: 170px; padding: 0; position: relative; display: block; }
#ficha .portada-ficha img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
#ficha .portada-ficha .zona { position: absolute; left: 12px; bottom: 12px; background: rgba(255,253,248,.92); color: #2b2620; }

/* ---------- pueblos: filtros, «para escaparse», buscador ---------- */
.buscador-grande { font-size: 17px; padding: 12px 16px; }
.filtros { display: grid; gap: 8px; }
.filtros select { border: 1.5px solid var(--linea); border-radius: 999px; padding: 9px 12px; font: inherit; font-weight: 800; background: var(--tarjeta); color: var(--tinta); }
.tamanos { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.tamanos .chip small { font-weight: 600; opacity: .75; }
.orden { display: flex; gap: 6px; }
.orden .chip { font-size: 12.5px; padding: 4px 10px; }
.pueblo-carta { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; color: inherit; text-decoration: none; }
.pueblo-carta + .pueblo-carta { border-top: 1px dashed var(--linea); }
.pueblo-carta .ic { font-size: 26px; text-align: center; }
.pueblo-carta b { display: block; font-size: 16px; }
.pueblo-carta small { color: var(--suave); display: block; }
.pueblo-carta .km { font-weight: 800; color: var(--suave); font-size: 13px; text-align: right; white-space: nowrap; }
.insignia { display: inline-block; font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 1px 7px; background: var(--papel); margin-right: 4px; }
#resultados-busqueda { display: grid; gap: 10px; }
.grupo h3 { font-size: 16px; margin: 0 0 4px; font-family: var(--texto); font-weight: 800; }
.vacio-busqueda { color: var(--suave); font-size: 13.5px; margin: 4px 0; }
.mini-ilustracion { width: 52px; height: 64px; border-radius: 10px; }

/* ---------- fotos de Wikimedia Commons ---------- */
.foto-pueblo { border-radius: 18px; overflow: hidden; height: 190px; border: 1.5px solid var(--linea); }
.foto-pueblo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.credito-foto { color: var(--suave); font-size: 11.5px; margin-top: -6px; overflow-wrap: anywhere; }
.credito-foto a { color: inherit; }
.oficial { color: var(--musgo); font-weight: 800; }

/* ---------- mapa: pines grandes con texto y tarjeta de abajo ---------- */
.mapa-caja { position: relative; }
.pin { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fffdf8; border: 4px solid currentColor;
  box-shadow: 0 2px 6px rgba(0,0,0,.35); font-size: 22px; }
.pin.e-sin-votos { color: #b9b232; border-style: dashed; }
.pin.e-fuera { color: #a49b8e; opacity: .85; }
.pin-casa { width: 34px; height: 34px; font-size: 17px; border-width: 3px; color: #7a4a8c; }
.pin-pueblo { width: 14px; height: 14px; margin: 8px; border-radius: 50%; background: #fffdf8; border: 2.5px solid #2b2620; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.pin-texto { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center; pointer-events: none;
  background: rgba(255,253,248,.94); color: #2b2620; border-radius: 8px; padding: 2px 7px; box-shadow: 0 1px 3px rgba(0,0,0,.3); font: 12px/1.25 var(--texto); }
.pin-texto b { display: block; font-size: 12.5px; }
.pin-texto small { color: #6b5f50; }
.pin-texto.pueblo { top: 24px; padding: 1px 5px; }
.pin-texto.pueblo b { font-weight: 700; font-size: 11.5px; }
.mapa-tarjeta { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1000; background: var(--tarjeta); color: var(--tinta);
  border: 1.5px solid var(--linea); border-radius: 18px; padding: 12px; display: grid; grid-template-columns: auto 1fr; gap: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.mapa-tarjeta .cerrar-tarjeta { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--suave); font-size: 20px; padding: 6px; }
.tarjeta-foto { width: 72px; height: 96px; object-fit: cover; border-radius: 12px; }
.tarjeta-texto { display: grid; gap: 4px; align-content: start; grid-column: span 1; min-width: 0; padding-right: 24px; }
.mapa-tarjeta > .tarjeta-texto:first-of-type:nth-child(2) { grid-column: 1 / -1; }
.tarjeta-texto b { font-size: 17px; }
.tarjeta-texto small { color: var(--suave); }
.tarjeta-texto .estado { justify-self: start; }
.tarjeta-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.tarjeta-botones .boton { padding: 8px 12px; font-size: 14px; text-decoration: none; }
.tarjeta-botones .boton.lleno { background: var(--teja); border-color: var(--teja); color: var(--teja-tinta); }
.sin-rotulos .pin-texto { display: none; }
.explica-avisa { color: var(--suave); font-size: 12.5px; line-height: 1.3; text-align: right; }
p.explica-avisa { text-align: left; margin: -2px 0 6px; }
.carta-pie .explica-avisa { max-width: 60%; }

/* ---------- cómo llegar en el mapa ---------- */
.modos-ruta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.modos-ruta .chip { padding: 6px 11px; }
.modos-ruta .chip[aria-pressed="true"] { background: var(--teja); border-color: var(--teja); color: var(--teja-tinta); }
.info-ruta { margin: 4px 0 0; font-size: 14px; }
.info-ruta a { color: var(--teja); font-weight: 800; }
.mapa-tarjeta { max-height: 70%; overflow-y: auto; }

/* tarjeta del mapa, compacta */
.mapa-tarjeta { padding: 10px 12px; gap: 10px; max-height: 58%; }
.tarjeta-foto { width: 56px; height: 72px; }
.tarjeta-texto { gap: 3px; }
.tarjeta-texto b { font-size: 16px; }
.tarjeta-texto small { font-size: 12.5px; }
.tarjeta-texto .estado { font-size: 12.5px; padding: 1px 8px; }
.tarjeta-botones { flex-wrap: nowrap; }
.tarjeta-botones .boton { padding: 6px 10px; font-size: 13.5px; white-space: nowrap; }
.modos-ruta { align-items: center; flex-wrap: nowrap; }
.modos-ruta .como-ir { font-weight: 800; font-size: 13.5px; margin-right: 2px; }
.modos-ruta .chip { padding: 4px 12px; font-size: 18px; }
.info-ruta:empty { display: none; }
.modos-ruta .como-ir { white-space: nowrap; }

/* ---------- 📚 Aprende ---------- */
.aprende-enlace { color: var(--teja); font-weight: 800; font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.seccion { flex-wrap: wrap; gap: 4px 10px; }
.aprende-ficha { display: grid; gap: 4px; font-size: 16px; line-height: 1.55; }
.aprende-ficha p { margin: 6px 0; }
.aprende-ficha ul { margin: 4px 0; padding-left: 20px; display: grid; gap: 4px; }
.aprende-emoji { font-size: 40px; }
.aprende-fila { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center; padding: 10px 0; color: inherit; text-decoration: none; }
.aprende-fila + .aprende-fila { border-top: 1px dashed var(--linea); }
.aprende-fila > span:first-child { font-size: 22px; text-align: center; }
.aprende-fila .km { color: var(--suave); font-weight: 800; }

/* ---------- ☀️ tiempo del finde ---------- */
.finde-corto { margin: 0; font-size: 14px; font-weight: 700; }
.finde-tiempo h3 { font-size: 17px; margin: 0 0 8px; }
.finde-tiempo h3 small { font-family: var(--texto); font-weight: 600; color: var(--suave); font-size: 13px; }
.dias-finde { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.dia-finde { background: var(--papel); border-radius: 14px; padding: 8px 10px; display: grid; gap: 2px; text-align: center; }
.dia-finde b { text-transform: capitalize; }
.dia-finde .icono-tiempo { font-size: 30px; }
.dia-finde small { color: var(--suave); font-size: 12px; }
.dia-finde span:not(.icono-tiempo) { font-weight: 800; font-size: 18px; }
/* ---------- 👕 camiseta ---------- */
.camiseta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.camiseta > *, .camiseta-foto form > * { min-width: 0; }
.camiseta h3 { font-size: 18px; margin: 0; }
.camiseta-vista { width: 100%; max-width: 340px; margin: 0 auto; min-height: 200px; display: grid; place-items: center; }
.camiseta-vista img.diseno { display: block; width: 100%; height: auto; border-radius: 14px; }
.boceto { position: relative; width: 230px; max-width: 70%; }
.boceto svg { display: block; width: 100%; height: auto; }
.generando { display: grid; justify-items: center; gap: 4px; padding: 40px 12px; text-align: center; color: var(--suave); }
.generando b { color: var(--tinta); font-size: 17px; }
.generando .hoja { font-size: 34px; animation: cae 1.6s ease-in-out infinite; }
@keyframes cae { 0% { transform: translateY(-6px) rotate(-18deg); } 50% { transform: translateY(6px) rotate(18deg); } 100% { transform: translateY(-6px) rotate(-18deg); } }
@media (prefers-reduced-motion: reduce) { .generando .hoja { animation: none; } }
.camiseta-credito { margin: 0; text-align: center; color: var(--suave); }
.camiseta-credito a { color: inherit; }
.camiseta-foto summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.camiseta-foto form { display: flex; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.camiseta-foto input { flex: 1 1 200px; min-width: 0; font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linea); background: var(--tarjeta); color: inherit; }
.camiseta-foto small { color: var(--suave); }
.camiseta-texto { position: absolute; left: 30%; right: 30%; top: 34%; display: grid; justify-items: center; gap: 2px; text-align: center; color: #f6efe2; }
.camiseta-texto img { width: 34px; height: 44px; border-radius: 6px; }
.camiseta-texto b { font-family: var(--titulo); font-size: 15px; line-height: 1.05; overflow-wrap: anywhere; }
.camiseta-texto span { font-size: 9.5px; font-weight: 800; color: #e2743d; }
.camiseta-texto small { font-size: 8px; opacity: .8; }
.camiseta .boton.lleno { background: var(--teja); border-color: var(--teja); color: var(--teja-tinta); }
.camiseta .cuenta { color: var(--suave); }
.camiseta-texto { color: #2b2620; top: 32%; left: 29%; right: 29%; }
.camiseta-texto span { color: #c4561f; }
.camiseta-texto small { color: #6b5f50; }
.camiseta-texto.largo b { font-size: 12px; }
.camiseta-texto.largo span { font-size: 8.5px; }

/* ---------- 👕 sección de camisetas y su acceso ---------- */
.acceso-camiseta { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.acceso-camiseta > span:first-child { font-size: 30px; }
.acceso-camiseta b { display: block; }
.acceso-camiseta small { color: var(--suave); }
.acceso-camiseta > span:last-child { color: var(--teja); font-weight: 800; font-size: 20px; }
#camiseta-resultados { display: grid; padding-top: 4px; padding-bottom: 4px; }
.fila-busqueda { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; color: inherit; text-decoration: none; }
.fila-busqueda + .fila-busqueda { border-top: 1px dashed var(--linea); }
.fila-busqueda small { color: var(--suave); }
#camisetas-queridas a { text-decoration: none; }
#taller { scroll-margin-top: 12px; }
.camiseta h3 small { font-family: var(--texto); font-size: 13px; color: var(--suave); font-weight: 600; }
.camiseta a.chip { color: inherit; text-decoration: none; justify-self: start; }

/* ---------- legibilidad (al sol, en el móvil): más aire, y pastilla con fondo (el «¡Avisa!», como estaba) ---------- */
.estado { background: color-mix(in srgb, currentColor 16%, transparent); }
.portada-ficha .estado { background: var(--tarjeta); }
.carta-texto { gap: 8px; }
.carta-texto .chivatos, .carta-texto .donde, .carta-texto .finde-corto { line-height: 1.45; margin: 0; }
.carta-texto .donde { color: var(--suave); font-weight: 600; }
.productos-marca { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.producto { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 10px; }
.producto img { width: 100%; height: auto; border-radius: 12px; }
.producto .boton { width: 100%; padding-left: 6px; padding-right: 6px; }
.producto small { color: var(--suave); }

/* ---------- 🗳️ folloescapada con varios sitios ---------- */
.mis-enlace { justify-self: start; text-decoration: none; color: inherit; }
.resultados-follo { display: grid; gap: 6px; }
.grupo-destino { display: grid; }
.grupo-destino > b { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); padding: 6px 0 2px; }
.fila-destino { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px dashed var(--linea); }
.fila-destino b { display: block; font-size: 14.5px; line-height: 1.2; }
.fila-destino small, .candidato small { color: var(--suave); font-size: 12.5px; display: block; }
.icono-destino { font-size: 22px; text-align: center; }
.mas { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--teja); color: var(--teja); background: transparent; font: 800 18px/1 var(--texto); cursor: pointer; }
.mas[aria-pressed="true"] { background: var(--teja); color: var(--teja-tinta); }
.candidatos { display: grid; gap: 6px; }
.candidato { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; border-radius: 14px; padding: 8px 10px;
  background: color-mix(in srgb, var(--teja) 12%, var(--tarjeta)); }
.candidato button { border: 0; background: none; color: var(--suave); font-size: 16px; cursor: pointer; padding: 4px 6px; }
.nota-candidatos { margin: 0; color: var(--suave); font-size: 13px; }
.barra-candidatos { position: fixed; left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 6; display: grid;
  grid-template-columns: 1fr auto; align-items: center; border-radius: 16px; background: var(--teja); color: var(--teja-tinta);
  box-shadow: 0 6px 20px rgb(0 0 0 / .25); }
.barra-candidatos a { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px 6px 12px 16px;
  color: inherit; font-weight: 800; text-decoration: none; }
.barra-candidatos button { border: 0; background: none; color: inherit; font: 800 18px/1 var(--texto); padding: 12px 16px; cursor: pointer; opacity: .85; }
.barra-candidatos .cuantos { background: var(--teja-tinta); color: var(--teja); border-radius: 999px; padding: 2px 10px; }
@media (min-width: 700px) { .barra-candidatos { max-width: 456px; margin: 0 auto; } }
.acciones-follo { grid-template-columns: 1fr; }
.pregunta-sitio { font-size: 22px; margin: 0; }
.destinos-plan { display: grid; gap: 8px; }
.destino-voto { display: grid; gap: 6px; border: 1.5px solid var(--linea); border-radius: 16px; padding: 10px; }
.destino-voto.elegido { border-color: var(--teja); box-shadow: 0 0 0 2px var(--teja) inset; }
.destino-boton { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left;
  border: 0; background: none; color: inherit; font: inherit; padding: 0; cursor: pointer; width: 100%; }
div.destino-boton { cursor: default; }
.destino-boton b { display: block; font-family: var(--titulo); font-size: 18px; line-height: 1.15; }
.destino-boton small { color: var(--suave); display: block; }
.destino-boton .estado { margin-top: 4px; }
.votos-destino { font: 800 18px/1 var(--texto); color: var(--teja); font-variant-numeric: tabular-nums; }
.destino-voto .barra-voto i { background: var(--teja); }
.ver-destino { justify-self: start; color: var(--teja); font-weight: 800; font-size: 13.5px; text-decoration: none; }
.decidida { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--musgo-claro); }
.decidida b { font-family: var(--titulo); font-size: 19px; }
.cerrar-plan { border: 1.5px dashed var(--linea); border-radius: 14px; padding: 10px 12px; display: grid; gap: 8px; }
.cerrar-plan[open] { display: grid; }
.cerrar-plan summary { cursor: pointer; font-weight: 800; }
.cerrar-plan small { color: var(--suave); }
.cerrar-campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 8px 0; }
.cerrar-campos select { width: 100%; min-width: 0; border: 1.5px solid var(--linea); border-radius: 12px; padding: 9px 10px; font: inherit; background: var(--papel); color: var(--tinta); }
.mia { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; }
.mia > a { color: inherit; text-decoration: none; min-width: 0; }
.mia > a b { display: block; font-size: 15.5px; }
.mia > a small { color: var(--suave); font-size: 13px; }
.mia > .chip { grid-column: 1 / -1; justify-self: start; text-decoration: none; color: inherit; }
.estado-mia { font: 800 12px/1 var(--texto); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.estado-mia.abierta { background: color-mix(in srgb, var(--teja) 16%, transparent); color: var(--teja); }
.estado-mia.decidida { background: var(--musgo-claro); color: var(--musgo); }
.estado-mia.pasada { background: var(--linea); color: var(--suave); }
#mis { display: grid; gap: 10px; }
.casa-acciones { display: flex; gap: 6px; align-items: center; }
.fuente-sitio { margin: 0; color: var(--suave); font-size: 12.5px; }
.dormir { display: grid; gap: 8px; border-top: 1px dashed var(--linea); padding-top: 10px; }
.dormir label { font-weight: 800; font-size: 14px; }
.dormir label small { color: var(--suave); font-weight: 600; }
.decidida span { font-weight: 700; }
.decidida a { color: inherit; }
.cerrar-campos { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* 🥾 rutas a pie */
.rutas-pie { display: grid; gap: 6px; }
.rutas-pie h3 { font-size: 18px; margin: 0 0 4px; }
.ruta-pie { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; border-top: 1px dashed var(--linea); padding: 9px 0; cursor: pointer; }
.ruta-pie b { display: block; font-size: 14.5px; line-height: 1.2; }
.ruta-pie small { color: var(--suave); font-size: 12.5px; }
.ruta-pie.elegida b { color: var(--teja); }
.dificultad { font: 800 11px/1 var(--texto); color: #fff; background: var(--c); border-radius: 999px; padding: 4px 8px; }
.cifras { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 🔎 buscador en la portada y en el mapa */
#v-portada > .filtros { margin: 12px 0 4px; }
#resultados-portada { display: grid; gap: 10px; margin-top: 10px; }
.buscador-mapa { position: relative; margin-bottom: 8px; }
.resultados-mapa { position: absolute; z-index: 1100; left: 0; right: 0; top: calc(100% + 6px); max-height: 60vh; overflow: auto; display: grid; gap: 8px;
  padding: 8px; border-radius: 18px; background: var(--papel); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
#tipos-mapa { margin-bottom: 6px; }
/* 🗺️ grupos de sitios en el mapa */
.pin { position: relative; }
.cuantos { position: absolute; top: -8px; right: -12px; font: 800 11.5px/1 var(--texto); font-style: normal; color: #fff; background: var(--teja);
  border: 2px solid #fffdf8; border-radius: 999px; padding: 3px 6px; }
.sin-rotulos .pin { transform: scale(.82); }
/* 📅🌧️ pistas: por qué «es su época» y lo que ha llovido */
.pista { margin: 2px 0 0; font-size: 13.5px; color: var(--suave); line-height: 1.4; }
.pista small { font-size: 12px; }
.pista-mucha { color: #2f6fb0; font-weight: 700; }
.pista-nada { color: #9a6a1f; font-weight: 700; }
/* 📜 histórico de avisos */
.historial { margin-top: 12px; border-top: 1px dashed var(--linea); padding-top: 8px; }
.historial summary { cursor: pointer; font-weight: 800; font-size: 14.5px; }
.historial ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.historial li { display: grid; grid-template-columns: 74px auto 1fr; gap: 8px; align-items: center; font-size: 14px; }
.historial li small { color: var(--suave); text-align: right; }
.historial .estado { font-size: 12.5px; padding: 1px 8px; justify-self: start; }

/* 📷 fotos de la gente */
.fotos-gente { display: grid; gap: 8px; }
.fotos-gente h3 { margin: 0; font-size: 18px; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.galeria figure { margin: 0; }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.galeria figcaption { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--suave); }
.enlace { border: 0; background: none; color: var(--teja); font: 800 14px var(--texto); padding: 2px; cursor: pointer; }
/* 📷 la hoja de mandar foto (la de WallaPark) */
.subir-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1950; display: none; }
.subir-fondo.abierta { display: block; }
.subir-foto { position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 110%); width: min(560px, 100%); max-height: 92vh; overflow-y: auto; z-index: 1960;
  background: var(--papel); color: var(--tinta); border-radius: 22px 22px 0 0; padding: 18px 16px 24px; display: grid; gap: 12px; visibility: hidden;
  transition: transform .25s ease, visibility .25s; box-shadow: 0 -8px 30px rgba(0,0,0,.3); }
.subir-foto.abierta { transform: translate(-50%, 0); visibility: visible; }
.subir-foto h2 { margin: 0; padding-right: 44px; font-size: 22px; }
.subir-foto p { margin: 0; }
.subir-foto .cerrar-x { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--linea);
  background: var(--tarjeta); color: var(--tinta); font-size: 16px; cursor: pointer; }
.subir-elegir { display: block; text-align: center; cursor: pointer; }
.subir-nota { color: var(--suave); font-size: 14px; }
.subir-vista { border: 1.5px solid var(--linea); border-radius: 14px; overflow: hidden; }
.subir-lienzo { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: manipulation; }
.subir-aviso { background: #f3d36b; color: #2b2620; border-radius: 12px; padding: 8px 10px; font-weight: 700; }
.subir-confirmo { display: flex; gap: 8px; align-items: center; font-weight: 800; }
.subir-confirmo.falta { color: #c4561f; }
.subir-gracias { text-align: center; display: grid; gap: 8px; padding-top: 8px; }
.subir-gracias .grande { font-size: 48px; }

/* ---------- 🔎 páginas para Google (app/paginas.py) ---------- */
body.seo { margin: 0; }
.pagina-seo { max-width: 760px; margin: 0 auto; padding: 14px 16px 40px; display: grid; gap: 12px; }
.seo-barra { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.seo-logo { font: 800 22px/1 var(--titulo, inherit); text-decoration: none; color: var(--teja); }
.seo-barra nav { display: flex; flex-wrap: wrap; gap: 12px; font-weight: 700; font-size: 14px; }
.seo-barra nav a, .seo-migas a { color: inherit; }
.seo-migas { font-size: 13px; color: var(--suave); }
.pagina-seo h1 { margin: 4px 0; line-height: 1.15; }
.seo-intro { font-size: 17px; line-height: 1.5; }
.seo-boton { display: inline-block; padding: 10px 16px; border-radius: 999px; background: var(--teja); color: var(--papel); font-weight: 800; text-decoration: none; }
.seo-caja { background: var(--hoja, transparent); border: 1.5px solid var(--linea); border-radius: 16px; padding: 12px 14px; }
.seo-caja h2 { margin: 0 0 6px; font-size: 19px; }
.seo-caja h2 small { color: var(--suave); font-weight: 600; }
.seo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.seo-lista a, .seo-lista li > b { display: grid; text-decoration: none; color: inherit; padding: 6px 2px; border-top: 1px dashed var(--linea); }
.seo-lista small { color: var(--suave); font-weight: 600; }
.seo-foto { margin: 0; }
.seo-foto img { width: 100%; height: auto; border-radius: 16px; object-fit: cover; aspect-ratio: 16 / 10; }
.seo-foto figcaption, .seo-fuente { font-size: 12.5px; color: var(--suave); }
.seo-estado b { color: var(--teja); }
.seo-historial { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--suave); }
.seo-pie { font-size: 13px; color: var(--suave); text-align: center; margin-top: 18px; }
.enlaces-seo a { color: inherit; font-weight: 700; }
.medallas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px 10px; }
.medalla { margin: 0; display: grid; justify-items: center; text-align: center; gap: 4px; }
.medalla a { text-decoration: none; }
.medalla figcaption { display: grid; gap: 2px; font-size: 13px; line-height: 1.3; }
.medalla figcaption small { color: var(--suave); font-size: 12px; }