/* Audioguías — tema oscuro cálido, pensado para leerse al sol y con una mano. */ :root { --fondo: #14100c; --superficie: #1f1a15; --superficie-2: #2a231c; --borde: #3a3129; --texto: #f2ece4; --texto-suave: #b3a595; --acento: #e0a33e; --acento-oscuro:#a9761f; --verde: #5fbf7a; --azul: #6aa8d8; --radio: 14px; } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fondo); color: var(--texto); line-height: 1.6; /* Hueco para la barra inferior. Dentro de una audioguía la barra se esconde y su sitio lo ocupa el reproductor, que es más alto: de ahí la clase de body. */ padding-bottom: calc(78px + env(safe-area-inset-bottom)); } body.con-reproductor { padding-bottom: calc(150px + env(safe-area-inset-bottom)); } .oculto { display: none !important; } /* ── Cabecera ─────────────────────────────────────────────────────────── */ /* Dos estados: abierta (icono + nombre + lema) y encogida (icono + nombre), que es la que queda al hacer scroll. Lo controla la clase 'compacta' del , que pone app.js. Las medidas van en variables para que los dos estados no se descuadren entre sí. */ .cabecera { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top)); background: rgba(20, 16, 12, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); transition: padding .18s ease; } .cab-icono { flex: none; width: 44px; height: 44px; border-radius: 11px; transition: width .18s ease, height .18s ease; } .cab-textos { flex: 1; min-width: 0; } .cab-nombre { font-size: 1.35rem; font-weight: 700; line-height: 1.15; letter-spacing: .01em; transition: font-size .18s ease; } .cab-lema { font-size: .78rem; color: var(--texto-suave); line-height: 1.35; margin-top: 2px; /* Se colapsa con la altura, no con display:none, para que la transición se vea. */ max-height: 3em; overflow: hidden; transition: max-height .18s ease, opacity .18s ease, margin-top .18s ease; } /* Encogida: fuera el lema y todo un punto más pequeño. */ body.compacta .cabecera { padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: 8px; } body.compacta .cab-icono { width: 30px; height: 30px; } body.compacta .cab-nombre { font-size: 1.1rem; } body.compacta .cab-lema { max-height: 0; opacity: 0; margin-top: 0; } .btn-volver { background: none; border: none; color: var(--acento); font-size: 1.9rem; line-height: 1; cursor: pointer; padding: 0 6px; } .estado-conexion { font-size: 1.4rem; color: var(--texto-suave); transition: color .3s; } .estado-conexion.ok { color: var(--verde); } .estado-conexion.error { color: #d9534f; } .btn-cabecera { background: var(--superficie-2); color: var(--texto-suave); border: 1px solid var(--borde); border-radius: 99px; padding: 7px 13px; font-size: .78rem; cursor: pointer; white-space: nowrap; } .btn-cabecera:active { background: var(--borde); } /* ── Barra inferior ───────────────────────────────────────────────────── */ .barra-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: flex-end; background: rgba(31, 26, 21, .97); backdrop-filter: blur(10px); border-top: 1px solid var(--borde); padding-bottom: env(safe-area-inset-bottom, 0px); overflow: visible; /* el círculo central sobresale por arriba */ } .barra-inferior button, .bn-hueco { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; cursor: pointer; color: var(--texto-suave); font-size: .7rem; font-weight: 600; padding: 9px 4px 10px; font-family: inherit; } .barra-inferior button.activo { color: var(--acento); } .bn-ico { font-size: 1.35rem; line-height: 1; } /* Botón central: el que se acierta con el pulgar sin mirar. */ .bn-centro { overflow: visible; } .bn-circulo { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; line-height: 1; margin-top: -30px; margin-bottom: 1px; background: var(--acento); border: 4px solid var(--fondo); box-shadow: 0 5px 14px rgba(0,0,0,.45); transition: transform .16s ease; } .bn-centro:active .bn-circulo { transform: scale(.93); } main { padding: 16px; max-width: 780px; margin: 0 auto; } /* ── Descubrir ────────────────────────────────────────────────────────── */ .bloque-geo { text-align: center; margin-bottom: 22px; } .btn-principal { width: 100%; padding: 18px; background: linear-gradient(135deg, var(--acento) 0%, var(--acento-oscuro) 100%); color: #201703; border: none; border-radius: var(--radio); font-size: 1.05rem; font-weight: 700; cursor: pointer; } .btn-principal:active { transform: scale(.985); } .btn-principal:disabled { opacity: .55; } .pista { font-size: .82rem; color: var(--texto-suave); margin-top: 8px; } .buscador input { width: 100%; padding: 13px 15px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio); font-size: 1rem; } .buscador { margin-bottom: 18px; } /* ── Mapa ─────────────────────────────────────────────────────────────── */ /* El z-index: 0 no es decorativo y no se puede quitar. Leaflet reparte z-index altos entre sus capas: 400 los paneles, 600 los marcadores, 700 los popups y 800 los controles (el zoom y la atribución). Sin un contexto de apilamiento propio, esos números compiten con los del resto de la app —cabecera 20, barra inferior 40— y el mapa se pinta ENCIMA de todo: se veían los tiles sobre la cabecera y sobre el botón redondo del menú. Un elemento posicionado con z-index distinto de 'auto' crea un contexto: a partir de ahí, todo lo de dentro se ordena entre sí y el conjunto vale 0 frente a la página. */ .mapa-caja { position: relative; z-index: 0; margin-bottom: 8px; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; } /* Alto fijo en el móvil: el mapa sitúa, pero quien manda es la lista de abajo, que es la que se puede leer al sol y con una mano. */ #mapa { height: 46vh; min-height: 240px; max-height: 420px; background: var(--superficie-2); } .btn-mapa-centrar { position: absolute; right: 10px; bottom: 10px; z-index: 500; width: 44px; height: 44px; border-radius: 50%; background: var(--acento); color: #201703; border: none; font-size: 1.3rem; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.4); } .btn-mapa-centrar:active { transform: scale(.94); } .leyenda-mapa { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: .76rem; color: var(--texto-suave); margin-bottom: 18px; } .leyenda-mapa span { display: flex; align-items: center; gap: 5px; } .punto { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .punto.con-guia { background: var(--acento); } .punto.sin-guia { background: var(--texto-suave); } /* Marcas del mapa. El color dice si hay audioguía; el glifo, de qué tipo es el sitio. */ .marca { width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: grid; place-items: center; border: 2px solid rgba(0,0,0,.35); box-shadow: 0 2px 6px rgba(0,0,0,.45); } .marca span { transform: rotate(45deg); font-size: .95rem; line-height: 1; } .marca.con-guia { background: var(--acento); } .marca.sin-guia { background: #8d8073; } /* Chapa de favorito. Va aparte y no cambiando el color de la marca porque el color ya dice si hay audioguía, y no puede significar dos cosas a la vez. El contra-giro es obligado: la marca entera está rotada -45°, así que sin él el corazón saldría tumbado igual que el glifo. */ .marca { position: relative; } .corazon-marca { position: absolute; top: -7px; right: -7px; transform: rotate(45deg); width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: #d64b45; color: #fff; font-style: normal; font-size: .62rem; line-height: 1; border: 1.5px solid rgba(0,0,0,.35); } /* Dónde estoy: un punto azul con halo, distinto de cualquier monumento. */ .marca-yo { width: 18px; height: 18px; border-radius: 50%; background: var(--azul); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(106,168,216,.28); } /* Los popups de Leaflet vienen en blanco: hay que traerlos al tema oscuro. */ .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde); } .leaflet-popup-content { margin: 12px 14px; font-size: .9rem; } .leaflet-popup-content .popup-lugar { color: var(--texto-suave); font-size: .8rem; } .leaflet-container a.leaflet-popup-close-button { color: var(--texto-suave); } .popup-btn { margin-top: 9px; width: 100%; padding: 9px; background: var(--acento); color: #201703; border: none; border-radius: 8px; font-size: .86rem; font-weight: 700; cursor: pointer; } .leaflet-container { font-family: inherit; background: var(--superficie-2); } .leaflet-control-attribution { background: rgba(20,16,12,.82) !important; color: var(--texto-suave) !important; font-size: .68rem !important; } .leaflet-control-attribution a { color: var(--azul) !important; } .leaflet-bar a { background: var(--superficie-2); color: var(--texto); border-color: var(--borde); } .leaflet-bar a:hover { background: var(--borde); color: var(--texto); } /* ── Tarjetas de monumento ────────────────────────────────────────────── */ .lista { display: flex; flex-direction: column; gap: 12px; } .tarjeta { display: flex; gap: 13px; align-items: stretch; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 13px; cursor: pointer; } .tarjeta:active { background: var(--superficie-2); } .tarjeta-cuerpo { flex: 1; min-width: 0; } .tarjeta h2 { font-size: 1.05rem; margin-bottom: 3px; } .tarjeta .lugar { font-size: .85rem; color: var(--texto-suave); } .tarjeta .fila-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; } .tarjeta.sin-audioguia { border-left: 3px solid var(--texto-suave); opacity: .82; } /* Imagen de la tarjeta. Tamaño fijo: con alturas distintas, una lista de veinte monumentos se ve rota. */ .tarjeta-img { flex: none; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--superficie-2); } .tarjeta-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .tarjeta-img span { font-size: 1.9rem; line-height: 1; filter: saturate(.75); } /* Genéricas por categoría: un degradado distinto para cada tipo, para que la lista siga siendo legible de un vistazo cuando ningún monumento tiene foto todavía. */ .g-religioso { background: linear-gradient(140deg, #4a3a5c, #2b2233); } .g-civil { background: linear-gradient(140deg, #3d4a5c, #222a33); } .g-militar { background: linear-gradient(140deg, #5c4a3a, #332a22); } .g-museo { background: linear-gradient(140deg, #3a5c52, #22332e); } .g-arqueologico { background: linear-gradient(140deg, #5c5236, #332e20); } .g-natural { background: linear-gradient(140deg, #3f5c3a, #243322); } .g-urbano { background: linear-gradient(140deg, #4a4a5c, #2a2a33); } .g-otro { background: linear-gradient(140deg, #46403a, #2a2622); } /* La misma imagen, en grande, en la ficha del monumento. Aquí NO se recorta: la foto ocupa todo el ancho y la altura la marca su proporción. En las tarjetas el recorte cuadrado es a propósito —una lista con alturas distintas se ve rota—, pero en la ficha hay una sola foto y recortarla se lleva por delante justo lo que se quiere enseñar: una fachada apaisada quedaba en una franja. */ .ficha-img { margin-bottom: 14px; } .ficha-img .tarjeta-img { width: 100%; height: auto; border-radius: var(--radio); } .ficha-img .tarjeta-img img { height: auto; object-fit: contain; } /* La genérica es un glifo sobre un degradado: no tiene proporción propia, así que sin un alto fijo se encogería hasta el tamaño del emoji. */ .ficha-img .tarjeta-img.generica { height: 190px; } .ficha-img .tarjeta-img span { font-size: 4rem; } .ficha-desc { color: var(--texto-suave); font-size: .93rem; margin-bottom: 18px; } .distancia { display: inline-block; padding: 3px 9px; border-radius: 99px; background: rgba(224, 163, 62, .16); color: var(--acento); font-size: .78rem; font-weight: 700; white-space: nowrap; } .etiqueta { display: inline-block; padding: 3px 9px; border-radius: 99px; background: var(--superficie-2); color: var(--texto-suave); font-size: .75rem; border: 1px solid var(--borde); white-space: nowrap; } .etiqueta.audio { color: var(--verde); border-color: rgba(95,191,122,.4); } .etiqueta.tts { color: var(--azul); border-color: rgba(106,168,216,.4); } .etiqueta.mixto { color: var(--acento); border-color: rgba(224,163,62,.4); } .etiqueta.enlace { color: #c79ad8; border-color: rgba(199,154,216,.4); } .etiqueta.sin-guia { color: var(--texto-suave); } /* ── Ficha del monumento ──────────────────────────────────────────────── */ .ficha-titulo { font-size: 1.5rem; margin-bottom: 4px; } .ficha-lugar { color: var(--texto-suave); margin-bottom: 6px; } .ficha-datos { font-size: .87rem; color: var(--texto-suave); margin-bottom: 20px; } .guia-card { background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: var(--radio); padding: 16px; margin-bottom: 13px; } .guia-card h3 { font-size: 1.08rem; margin-bottom: 5px; } .guia-card .resumen { font-size: .92rem; color: var(--texto-suave); margin: 9px 0 12px; } .guia-card .fila-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; } .btn-secundario { width: 100%; padding: 13px; background: var(--superficie-2); color: var(--texto); border: 1px solid var(--acento); border-radius: 10px; font-size: .98rem; font-weight: 600; cursor: pointer; } .btn-secundario:active { background: var(--borde); } /* "Cómo llegar" es un y no un