/* Estilos de la parte «lugares» (lug-…) y de las reseñas con estrellas (res-…, también en los perfiles y el directorio).
   Usa las variables de app.css (--cielo, --tinta, --tarjeta…) para que funcionen el tema oscuro y el alto contraste.
   Leaflet carga su CSS después que este: por eso los ajustes del mapa van con más especificidad (.lug-mapa.leaflet-container …). */

/* ------------------------------------------------------------ página de lugares */
.lug-zona { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 0.9rem; }
.lug-zona .crece { flex: 1 1 12rem; min-width: 0; line-height: 1.3; }
.lug-zona > .fila-btn { flex: 1 1 100%; }
.lug-otro { flex: 1 1 100%; }
@media (min-width: 640px) { .lug-zona > .fila-btn { flex: 0 1 auto; } }

.lug-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.lug-radio { flex-direction: row; align-items: center; gap: 0.55rem; }
.lug-radio select { width: auto; min-width: 7.5rem; }
.lug-barra .btn[aria-pressed='true'] { border-color: var(--cielo); }

.lug-mapa-caja { position: relative; isolation: isolate; border-radius: var(--r); overflow: hidden; border: 1px solid var(--linea); background: var(--gris-suave); }
.lug-mapa-caja > [data-mapa] { min-height: 20rem; }
.lug-mapa { height: 20rem; width: 100%; }
@media (min-width: 960px) { .lug-mapa-caja > [data-mapa], .lug-mapa { min-height: 26rem; height: 26rem; } }
.lug-mapa-ficha > [data-mapa], .lug-mapa-ficha .lug-mapa { min-height: 15rem; height: 15rem; }
.lug-mapa-editar > [data-mapa], .lug-mapa-editar .lug-mapa { min-height: 22rem; height: 22rem; }
.lug-mapa-caja .vacio { min-height: inherit; justify-content: center; }
.lug-aqui { position: absolute; z-index: 1000; top: 0.7rem; left: 50%; transform: translateX(-50%); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); white-space: nowrap; }

/* Tarjeta de la lista */
.lug-tarjeta { display: flex; flex-direction: column; gap: 0.85rem; }
.lug-tarjeta-enlace { display: flex; gap: 0.9rem; align-items: flex-start; text-decoration: none; color: var(--tinta); border-radius: 0.9rem; }
.lug-tarjeta-enlace:hover { color: var(--tinta); }
.lug-tarjeta-enlace:hover .lug-nombre { color: var(--cielo); }
.lug-mini { width: 5.5rem; height: 5.5rem; border-radius: 0.9rem; object-fit: cover; flex-shrink: 0; background: var(--gris-suave); }
.icono-caja.lug-mini svg { width: 2.4rem; height: 2.4rem; }
.lug-tarjeta-datos { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.lug-nombre { font-family: var(--titulos); font-weight: 600; font-size: 1.15rem; line-height: 1.2; }
.lug-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.lug-tarjeta .fila-btn > .btn { flex: 1 1 7rem; }

/* ------------------------------------------------------------ ficha */
.lug-hero { position: relative; margin: -1rem -0.85rem 0; aspect-ratio: 16 / 9; max-height: 24rem; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--cielo-suave); color: var(--cielo); }
.lug-hero.hoja { background: var(--hoja-suave); color: var(--hoja); }
.lug-hero.canela { background: var(--canela-suave); color: var(--canela-osc); }
.lug-hero.sin-foto { aspect-ratio: auto; height: 10rem; }
.lug-hero img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.lug-hero-icono svg { width: 5rem; height: 5rem; opacity: 0.75; }
.lug-volver { position: absolute; top: 0.8rem; left: 0.8rem; background: var(--tarjeta); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
@media (min-width: 720px) { .lug-hero { margin: 0; border-radius: var(--r); } }
.lug-ficha header .insignia svg { width: 1rem; height: 1rem; }
.lug-ficha h1 { font-size: 1.75rem; }
.lug-ficha header p svg { width: 1.1rem; height: 1.1rem; vertical-align: -0.2em; }
.lug-estrellas { text-decoration: none; color: var(--tinta); align-self: flex-start; border-radius: 0.6rem; }
.lug-estrellas:hover { color: var(--tinta); }
.lug-texto { white-space: pre-wrap; }
.lug-pie { border-top: 1px solid var(--linea); padding-top: 1rem; display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.lug-pie .boton-texto { color: var(--tinta-2); display: inline-flex; align-items: center; gap: 0.35rem; }

/* ------------------------------------------------------------ añadir o cambiar */
.lug-fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
.lug-fieldset legend { font-weight: 800; padding: 0; margin-bottom: 0.45rem; }
.lug-punto { font-weight: 700; padding: 0.65rem 0.85rem; border-radius: var(--r-btn); background: var(--gris-suave); color: var(--tinta); }
.lug-punto-ok { background: var(--hoja-suave); color: var(--hoja-osc); border: 2px solid var(--hoja); }
.lug-foto .foto-elegida, .lug-foto .elegir-foto { aspect-ratio: 16 / 9; width: 100%; max-width: 26rem; }
.lug-foto .elegir-foto { font-size: 1rem; }

/* ------------------------------------------------------------ el mapa (Leaflet) */
.lug-mapa.leaflet-container { font-family: var(--texto); font-size: 0.9rem; background: var(--gris-suave); }
.lug-mapa.leaflet-container .leaflet-bar { border: 2px solid var(--linea-fuerte); border-radius: var(--r-btn); box-shadow: var(--sombra); overflow: hidden; }
.lug-mapa.leaflet-container .leaflet-bar a { width: 2.75rem; height: 2.75rem; line-height: 2.7rem; font-size: 1.5rem; background: var(--tarjeta); color: var(--tinta); border-bottom-color: var(--linea); border-radius: 0; }
.lug-mapa.leaflet-container .leaflet-bar a:hover { background: var(--cielo-suave); }
.lug-mapa.leaflet-container .leaflet-bar a.leaflet-disabled { color: var(--linea-fuerte); background: var(--tarjeta-2); }
.lug-mapa.leaflet-container .leaflet-control-attribution { font-size: 0.82rem; background: var(--tarjeta); color: var(--tinta-2); padding: 0.1rem 0.45rem; border-top-left-radius: 0.5rem; }
.lug-mapa.leaflet-container .leaflet-control-attribution a { color: var(--cielo); }
.lug-mapa.leaflet-container .leaflet-popup-content-wrapper, .lug-mapa.leaflet-container .leaflet-popup-tip { background: var(--tarjeta); color: var(--tinta); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
.lug-mapa.leaflet-container .leaflet-popup-content-wrapper { border-radius: var(--r); }
.lug-mapa.leaflet-container .leaflet-popup-content { margin: 0.85rem 2.4rem 0.9rem 1rem; font-size: 0.95rem; line-height: 1.35; }
.lug-mapa.leaflet-container a.leaflet-popup-close-button { width: 2.4rem; height: 2.4rem; font-size: 1.6rem; line-height: 2.3rem; color: var(--tinta-2); }
.lug-mapa.leaflet-container :focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.lug-burbuja { display: flex; flex-direction: column; gap: 0.35rem; min-width: 12rem; }
.lug-burbuja b { font-size: 1.02rem; }
.lug-burbuja .fila-btn { margin-top: 0.3rem; }
.lug-mapa.leaflet-container .lug-burbuja a.btn { color: var(--sobre-cielo); text-decoration: none; }
.lug-mapa.leaflet-container .lug-burbuja a.btn.sec { color: var(--tinta); }
:root[data-contraste='alto'] .lug-mapa.leaflet-container .lug-burbuja a.btn:not(.sec) { color: #000; }

/* Marcas de los lugares: gota de color con el icono del tipo. */
.lug-marca { display: flex; justify-content: center; align-items: flex-start; background: none; border: none; }
.lug-pin {
  width: 2.3rem; height: 2.3rem; border-radius: 50% 50% 50% 0.35rem; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center;
  background: var(--cielo); color: var(--sobre-cielo); border: 3px solid var(--tarjeta); box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
}
.lug-pin svg { transform: rotate(45deg); width: 1.25rem; height: 1.25rem; }
.lug-marca.hoja .lug-pin { background: var(--hoja); color: var(--suelo); }
.lug-marca.canela .lug-pin { background: var(--canela); color: #3B2420; }
.lug-marca:focus-visible { outline: none; }
.lug-marca:focus-visible .lug-pin { outline: 3px solid var(--foco); outline-offset: 3px; }
:root[data-contraste='alto'] .lug-pin { color: #000; border-color: #fff; }

/* En tema oscuro las teselas se atenúan un poco para no deslumbrar. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']):not([data-contraste='alto']) .lug-mapa .leaflet-tile-pane { filter: brightness(0.8) contrast(1.08); }
}
:root[data-tema='oscuro']:not([data-contraste='alto']) .lug-mapa .leaflet-tile-pane { filter: brightness(0.8) contrast(1.08); }

/* ------------------------------------------------------------ estrellas y reseñas */
.res-valor { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; vertical-align: middle; }
.res-estrellas { position: relative; display: inline-flex; line-height: 0; white-space: nowrap; }
.res-est-fondo, .res-est-lleno { display: inline-flex; }
.res-est-lleno { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; }
.res-estrellas svg { width: 1.15em; height: 1.15em; flex-shrink: 0; margin: 0; }
.res-est-fondo svg { fill: none; stroke: var(--linea-fuerte); }
.res-est-lleno svg { fill: var(--canela); stroke: var(--canela-osc); }
.res-num { font-size: 0.92rem; }
.res-sin { color: var(--tinta-2); font-size: 0.86rem; }

.res-resumen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.5rem; align-items: center; }
@media (max-width: 420px) { .res-resumen { grid-template-columns: minmax(0, 1fr); } }
.res-media { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; }
.res-grande { font-family: var(--titulos); font-size: 2.7rem; line-height: 1; font-weight: 600; }
.res-media .res-estrellas svg { width: 1.4em; height: 1.4em; }
.res-reparto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.res-reparto li { display: grid; grid-template-columns: 2.7rem minmax(0, 1fr) 2.2rem; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 700; }
.res-rep-etq { display: inline-flex; align-items: center; gap: 0.15rem; }
.res-rep-etq svg { width: 1rem; height: 1rem; fill: var(--canela); stroke: var(--canela-osc); }
.res-barra { height: 0.65rem; border-radius: 999px; background: var(--gris-suave); overflow: hidden; }
.res-barra i { display: block; height: 100%; background: var(--canela); border-radius: 999px; }
.res-rep-n { text-align: right; color: var(--tinta-2); }
:root[data-contraste='alto'] .res-barra { border: 1px solid #fff; }

.res-form h3 { font-size: 1.12rem; }
.res-elegir { border: none; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.res-elegir legend { font-weight: 800; padding: 0; margin-bottom: 0.45rem; }
.res-elegir-fila { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.res-opcion { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 3.1rem; height: 3.1rem; border-radius: var(--r-btn); border: 2px solid var(--linea); background: var(--tarjeta); cursor: pointer; }
.res-opcion input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.res-opcion svg { width: 2rem; height: 2rem; fill: none; stroke: var(--linea-fuerte); pointer-events: none; }
.res-opcion.on { border-color: var(--canela); background: var(--canela-suave); }
.res-opcion.on svg { fill: var(--canela); stroke: var(--canela-osc); }
.res-opcion:hover { border-color: var(--linea-fuerte); }
.res-opcion:focus-within { outline: 3px solid var(--foco); outline-offset: 2px; }
.res-elegida { font-weight: 800; color: var(--tinta-2); }

.res-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.res-item { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r); padding: 1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.res-mia { border: 2px solid var(--canela); background: var(--canela-suave); }
.res-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.res-texto { white-space: pre-wrap; }
.res-respuesta { margin-left: 0.5rem; padding: 0.65rem 0.85rem; border-left: 4px solid var(--cielo); background: var(--cielo-suave); border-radius: 0 0.8rem 0.8rem 0; display: flex; flex-direction: column; gap: 0.25rem; }
.res-respuesta b { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; color: var(--cielo-osc); }
.res-respuesta b svg { width: 1.1rem; height: 1.1rem; }
.res-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 1rem; }
.res-acciones .boton-texto { display: inline-flex; align-items: center; gap: 0.35rem; }
.res-denunciar { color: var(--tinta-2); font-weight: 700; }
.res-nadie { display: flex; align-items: center; gap: 0.6rem; color: var(--tinta-2); padding: 0.85rem 1rem; border: 2px dashed var(--linea); border-radius: var(--r); }
.res-nadie svg { color: var(--canela-osc); flex-shrink: 0; }
:root[data-contraste='alto'] .res-mia, :root[data-contraste='alto'] .res-respuesta { border-color: #fff; }