/* =================================================
   tuterraceo.es — Page: Mapa
   Mapa Leaflet fullscreen con carrusel horizontal
   flotante inferior. El detalle de cada terraza se
   muestra expandiendo la propia card in-place (#161).
   ================================================= */

html, body {
    height: 100%;
    overflow: hidden;
}

/* Issue #155: body en flex column para que el nav ocupe su altura natural y
   .mapa-layout rellene el espacio restante sin overflow clipping. Reemplaza la
   combinacion previa (body estatico + .mapa-layout height:100vh) que causaba
   que la suma nav + layout superase 100vh y recortara parte del mapa. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Issue #156/#204: los estilos del header con brand + links (layout,
   tipografía, media query <=480px) viven en core/auth.css para que sean
   reutilizables por /perfil y otras páginas autenticadas.
   Aquí solo conservamos el override específico del mapa (#155): el nav no
   debe crecer dentro del body flex column. */
nav.auth-nav {
    flex: 0 0 auto;
}

/* Issue #155: .mapa-layout es hijo flex del body y rellena el espacio restante
   tras el nav. min-height:0 es necesario para que el hijo pueda encogerse en
   el eje principal del flex (quirk conocido de flexbox). */
.mapa-layout {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    position: relative;
}

/* ── Contenedor mapa (fullscreen tras #110) ──
   Issue #155: height:100% para ocupar todo el espacio del .mapa-layout padre
   (que ya esta limitado al viewport - nav por el flex column del body). */
.mapa-container {
    position: relative;
    width: 100%;
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
}

/* ── Barra de búsqueda ── */
.search-bar {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    gap: 0.4rem;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    padding: 0.45rem 0.75rem;
    width: calc(100% - 2rem);
    max-width: 520px;
}

#search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.95rem;
    background: transparent;
    min-width: 0;
}

.btn-buscar {
    padding: 0.4rem 1rem;
    background: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.btn-buscar:hover {
    background: #43a047;
}

.btn-ubicacion {
    padding: 0.4rem 0.8rem;
    background: #f0f4f0;
    border: none;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.btn-ubicacion:hover {
    background: #ddeedd;
}

/* ── Status ── */
#status {
    position: absolute;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    font-size: 0.85rem;
    display: none;
    pointer-events: none;
}

/* ── Pantalla bloqueante de geolocalizacion ── */
.geolocation-blocker {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f7f5;
}

.geolocation-blocker__content {
    text-align: center;
    max-width: 440px;
    padding: 2rem 1.5rem;
}

.geolocation-blocker__icon {
    margin-bottom: 1.5rem;
}

.geolocation-blocker__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1b1b1b;
    margin: 0 0 0.75rem;
}

.geolocation-blocker__text {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.geolocation-blocker__btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: #2d6a4f;
    color: #fff;
    border: none;
    border-radius: 28px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.geolocation-blocker__btn:hover {
    background: #1b4332;
}

.geolocation-blocker__btn:focus-visible {
    outline: 3px solid #40916c;
    outline-offset: 2px;
}

.geolocation-blocker__hint {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: #856404;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    line-height: 1.5;
}

.geolocation-blocker__loading {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #888;
}

/* ================================================================
   Carrusel horizontal flotante (#110)
   ================================================================ */

.carousel {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 10px 12px 12px;
}

.carousel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 8px;
    padding: 0 4px;
    flex-wrap: wrap;
}

.carousel__counter {
    font-size: 0.82rem;
    color: #2d6a4f;
    font-weight: 600;
    line-height: 1.3;
    min-height: 1.1em;
}

.carousel__counter-cta {
    color: #2d6a4f;
    text-decoration: underline;
    font-weight: 700;
}

.carousel__counter-cta:hover {
    color: #1b4332;
}

/* Issue #155: .carousel__add-link eliminado. El CTA "Anadir terraza" vive
   ahora como card dedicada .card.card--add renderizada por JS. */

.carousel__viewport {
    position: relative;
}

.carousel__track {
    display: flex;
    /* Issue #155: direction:rtl invierte el eje horizontal del track, de forma
       que la primera card del DOM (card "Anadir terraza") queda a la derecha
       del viewport y las siguientes se extienden hacia la izquierda. El orden
       logico del DOM se mantiene intacto para lectores de pantalla. */
    direction: rtl;
    /* Issue #214: align-items:flex-start evita que el resto de cards del
       carrusel se estiren verticalmente al alto de la card expandida (antes
       el stretch por defecto hacia que al expandir una card se alargaran
       todas, dejandolas muy estrechas visualmente). */
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    /* Issue #161: scroll-snap-type bloquea scrollLeft programatico del
       AutoScroll (rAF ticker). Eliminado completamente; las flechas de
       navegacion manual usan scrollBy con paso fijo y no necesitan snap. */
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 6px;
    /* scrollbar fina en navegadores compatibles */
    scrollbar-width: thin;
    scrollbar-color: #cfe3d4 transparent;
}

/* Issue #155: las cards hijas del track se renderizan en LTR para que su
   contenido interno (texto, iconos, estrellas) siga fluyendo de izquierda a
   derecha. Solo invertimos el eje de layout del contenedor. */
.carousel__track > * {
    direction: ltr;
}

.carousel__track::-webkit-scrollbar {
    height: 6px;
}

.carousel__track::-webkit-scrollbar-thumb {
    background: #cfe3d4;
    border-radius: 3px;
}

.carousel__track:focus-visible {
    outline: 2px solid #40916c;
    outline-offset: 2px;
    border-radius: 10px;
}

.carousel__empty {
    flex: 1 1 auto;
    text-align: center;
    padding: 1.5rem;
    font-size: 0.9rem;
    color: #999;
}

/* ── Botones de navegación del carrusel ── */
.carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #2d6a4f;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
    transition: background 0.15s, opacity 0.15s, transform 0.15s;
}

.carousel__nav:hover:not(:disabled) {
    background: #1b4332;
    transform: translateY(-50%) scale(1.05);
}

.carousel__nav:focus-visible {
    outline: 3px solid #ffd166;
    outline-offset: 2px;
}

.carousel__nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.carousel__nav--prev {
    left: -14px;
}

.carousel__nav--next {
    right: -14px;
}

/* ── Cards de terraza ── */
.card {
    flex: 0 0 200px;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid #e8efe8;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    text-align: left;
    font-family: inherit;
    padding: 0;
    transition: transform 0.15s, box-shadow 0.15s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

.card:focus-visible {
    outline: 3px solid #40916c;
    outline-offset: 2px;
}

/* ── Card expandida in-place (#161) ──
   Reemplaza al antiguo modal. Al clicar una card se anade la clase
   .card--expanded y se inyecta un .card__detail con el panel de detalle
   (nombre, descripcion, distancia, valoracion, comentarios, etc.).
   Issue #214: ampliada a 520px para que la expansion sea predominantemente
   horizontal (antes 360px) y reducido el max-height del detalle para
   evitar expansion vertical excesiva que afectaba visualmente al resto
   del carrusel. */
.card.card--expanded {
    flex: 0 0 520px;
    cursor: default;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    transform: translateY(-2px);
    z-index: 3;
    position: relative;
}

.card.card--expanded:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

/* Issue #217: absorcion de ancho en desktop.
   Cuando el track contiene una card expandida:
   - El track deja de hacer scroll horizontal para anclar el efecto
     dentro del viewport visible.
   - La card expandida recibe flex-grow para ocupar el espacio libre.
   - Las cards no expandidas se comprimen a thumbnails contextuales. */
@media (min-width: 768px) {
    .carousel__track:has(.card--expanded) {
        overflow-x: hidden;
    }

    .carousel__track:has(.card--expanded) .card.card--expanded {
        flex: 1 1 520px;
    }

    .carousel__track:has(.card--expanded) .card:not(.card--expanded) {
        flex: 0 0 120px;
        opacity: 0.55;
        pointer-events: none;
        transition: flex-basis 0.22s ease, opacity 0.22s ease;
    }
}

.card__detail {
    padding: 10px 12px 12px;
    border-top: 1px solid #e8efe8;
    background: #fff;
    /* Issue #214: 260px (antes 320px) para que la expansion crezca mas en
       ancho que en alto. El scroll interno sigue cubriendo comentarios
       largos. En mobile con la clase is-card-expanded se recalcula via
       .mapa-layout.is-card-expanded .card__detail. */
    max-height: 260px;
    overflow-y: auto;
    animation: cardDetailFadeIn 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.card__detail .detail-nombre {
    font-size: 1.05rem;
    margin: 0 0 0.35rem;
}

.card__detail .comments-list {
    max-height: 140px;
}

@keyframes cardDetailFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .card__detail {
        animation: none;
    }
}

/* Issue #214: boton de cierre .card__close eliminado. El cierre de la card
   expandida se realiza ahora mediante:
   - Tecla Escape (listener existente desde #183).
   - Click fuera de la card expandida (handler de click documental).
   - Click en la propia card expandida (toggle() cierra la misma card). */

.card__photo {
    width: 100%;
    height: 110px;
    background: linear-gradient(135deg, #2d6a4f 0%, #40916c 50%, #74c69d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card__photo--placeholder {
    background: linear-gradient(135deg, #2d6a4f 0%, #40916c 50%, #74c69d 100%);
}

.card__photo-icon {
    font-size: 2.4rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.card__body {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.card__name {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1b4332;
    line-height: 1.25;
    /* Truncar a 2 lineas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__stars {
    display: flex;
    align-items: center;
}

.card__stars .stars-display {
    margin: 0;
}

.card__stars .stars-display .star {
    font-size: 0.9rem;
}

.card__stars .stars-info {
    font-size: 0.7rem;
}

.card__distance {
    font-size: 0.78rem;
    color: #2d6a4f;
    font-weight: 600;
}

/* ── Card de upsell ── */
.card.card--upsell {
    flex: 0 0 200px;
    background: linear-gradient(135deg, #f0f7f0 0%, #e8f5e9 100%);
    border: 1px dashed #2d6a4f;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: default;
    gap: 8px;
}

.card.card--upsell:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card--upsell__icon {
    font-size: 1.6rem;
}

.card--upsell__text {
    margin: 0;
    font-size: 0.82rem;
    color: #1b4332;
    font-weight: 600;
    line-height: 1.35;
}

.card--upsell__cta {
    display: inline-block;
    padding: 6px 14px;
    background: #2d6a4f;
    color: #fff;
    border-radius: 18px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
}

.card--upsell__cta:hover {
    background: #1b4332;
    color: #fff;
    transform: scale(1.03);
}

/* ── Card "Anadir terraza" (#155) ──
   Reemplaza al enlace que vivia en .carousel__header. Comparte el flex-basis
   de .card (200px desktop / 160px movil por el media query existente) y usa un
   gradiente verde oscuro para diferenciarse visualmente de las cards de terraza
   manteniendo la paleta del producto. Con direction:rtl en el track, esta card
   queda a la derecha del viewport del carrusel y es lo primero que ve el usuario. */
.card.card--add {
    flex: 0 0 200px;
    scroll-snap-align: start;
    background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 60%, #40916c 100%);
    border: 1px solid #1b4332;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    display: flex;
    flex-direction: column;
    text-align: left;
    text-decoration: none;
    padding: 0;
    transition: transform 0.15s, box-shadow 0.15s;
}

.card.card--add:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    text-decoration: none;
}

.card.card--add:focus-visible {
    outline: 3px solid #ffd166;
    outline-offset: 2px;
}

.card--add__photo {
    width: 100%;
    height: 110px;
    background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 50%, #52b788 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card--add__icon {
    font-size: 3.2rem;
    color: #fff;
    font-weight: 300;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.card.card--add .card__name {
    color: #fff;
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
}

.card--add__hint {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
    line-height: 1.3;
    margin-top: 2px;
}

/* ── Card de error (defensivo #143) ──
   Se muestra cuando /terrazas?lat&lng falla (500, network error, timeout).
   Ofrece un botón de reintento que vuelve a invocar actualizarCarrusel. */
.card.card--error {
    flex: 0 0 240px;
    background: linear-gradient(135deg, #fdf2f2 0%, #fce8e8 100%);
    border: 1px dashed #b91c1c;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: default;
    gap: 8px;
}

.card.card--error:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card--error__icon {
    font-size: 1.6rem;
}

.card--error__text {
    margin: 0;
    font-size: 0.82rem;
    color: #7f1d1d;
    font-weight: 600;
    line-height: 1.35;
}

.card--error__retry {
    display: inline-block;
    padding: 6px 14px;
    background: #b91c1c;
    color: #fff;
    border: none;
    border-radius: 18px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, transform 0.15s;
}

.card--error__retry:hover {
    background: #7f1d1d;
    color: #fff;
    transform: scale(1.03);
}

.card--error__retry:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Issue #161: el modal de detalle (#110) ha sido eliminado.
   Los datos de detalle se muestran ahora dentro de la card expandida
   (.card--expanded > .card__detail). Los selectores .detail-* siguen vivos
   como estilos genericos para que el panel de detalle los reutilice. */

/* Issue #161: selectores de detalle desacoplados del modal.
   Se usaban en .modal__body .detail-*; ahora son genericos para que la card
   expandida pueda reutilizar los mismos estilos sin depender del modal. */
.detail-nombre {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2d6a4f;
    margin: 0 0 0.5rem;
}

.detail-descripcion {
    font-size: 0.95rem;
    color: #333;
    margin: 0 0 0.5rem;
    line-height: 1.5;
}

.detail-coords {
    font-size: 0.8rem;
    color: #888;
    margin: 0 0 0.3rem;
    font-family: monospace;
}

.detail-distancia {
    font-size: 0.85rem;
    color: #2d6a4f;
    font-weight: 600;
    margin: 0 0 0.4rem;
}

.detail-premium {
    display: inline-block;
    margin-top: 0.2rem;
    padding: 2px 10px;
    background: #f0c040;
    color: #333;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
}

.detail-error {
    font-size: 0.9rem;
    color: #c0392b;
}

.detail-loading {
    font-size: 0.9rem;
    color: #888;
    text-align: center;
    padding: 1rem 0;
}

.detail-section {
    border-top: 1px solid #e8e8e8;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

.detail-section-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #2d6a4f;
    margin: 0 0 0.5rem;
}

/* ── Marker extra (#184) ──
   Markers "rojos" secundarios que representan las 50 terrazas aprobadas mas
   cercanas y no estan en el carrusel. No son clickables (pointer-events:none
   via Leaflet interactive:false + refuerzo por CSS). Discretos para no
   competir visualmente con los markers principales del carrusel. */
.marker-extra {
    width: 14px;
    height: 14px;
    background: #e53935;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    opacity: 0.85;
}

/* ── Marker resaltado (#110) ── */
.marker--highlighted {
    filter: drop-shadow(0 0 6px #2d6a4f) drop-shadow(0 0 3px #ffd166);
    transform: scale(1.25);
    z-index: 1000 !important;
    transition: transform 0.15s ease-out, filter 0.15s ease-out;
}

/* ================================================================
   Estrellas y votos (compartido entre cards y modal)
   ================================================================ */

.stars-display {
    margin: 0.2rem 0;
}

.stars-display .star {
    font-size: 1rem;
    color: #ccc;
    cursor: default;
}

.stars-display .star--filled {
    color: #f0c040;
}

.stars-display .star--half {
    color: #f0c040;
    opacity: 0.7;
}

.stars-info {
    font-size: 0.72rem;
    color: #888;
    margin-left: 0.3rem;
}

.voting-widget {
    margin: 0.4rem 0 0.6rem;
    display: flex;
    align-items: center;
    gap: 2px;
}

.voting-label {
    font-size: 0.8rem;
    color: #666;
    margin-right: 0.4rem;
}

.voting-widget .star {
    font-size: 1.4rem;
    cursor: pointer;
    transition: color 0.15s, transform 0.1s;
}

.voting-widget .star--selectable {
    color: #ccc;
}

.voting-widget .star--selected {
    color: #f0c040;
}

.voting-widget .star--hover {
    color: #e6b800;
    transform: scale(1.15);
}

.vote-cta, .comment-cta {
    margin: 0.5rem 0;
    padding: 0.6rem 0.75rem;
    background: #f0f7f0;
    border: 1px solid #d8ead8;
    border-radius: 8px;
    font-size: 0.85rem;
}

.vote-cta .cta-text,
.comment-cta .cta-text {
    margin: 0 0 0.3rem;
    color: #1b4332;
    font-weight: 600;
}

.vote-cta .cta-links,
.comment-cta .cta-links {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.vote-cta .cta-links a,
.comment-cta .cta-links a {
    color: #2d6a4f;
    text-decoration: underline;
    font-weight: 600;
}

.vote-cta .cta-links a:hover,
.comment-cta .cta-links a:hover {
    color: #1b4332;
}

.vote-cta .cta-sep,
.comment-cta .cta-sep {
    color: #888;
    font-weight: 400;
}

/* ── Comentarios ── */
.comments-list {
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
}

.comment-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comment-author {
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
}

.comment-date {
    font-size: 0.7rem;
    color: #999;
}

.comment-text {
    font-size: 0.85rem;
    color: #555;
    margin: 0.2rem 0 0.2rem;
    line-height: 1.4;
    word-break: break-word;
}

.no-comments {
    font-size: 0.85rem;
    color: #999;
    margin: 0.5rem 0;
    font-style: italic;
}

.btn-reportar {
    background: none;
    border: none;
    font-size: 0.7rem;
    color: #c0392b;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    opacity: 0.6;
}

.btn-reportar:hover {
    opacity: 1;
}

.btn-reportar--done {
    color: #999;
    cursor: default;
    text-decoration: none;
}

.comment-form {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.4rem;
    align-items: flex-end;
}

.comment-textarea {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.4rem 0.55rem;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    min-height: 2.2rem;
    max-height: 6rem;
}

.comment-textarea:focus {
    outline: none;
    border-color: #2d6a4f;
}

.btn-comentar {
    padding: 0.45rem 0.9rem;
    background: #2d6a4f;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.btn-comentar:hover {
    background: #1b4332;
}

/* ── Admin nav (heredado) ── */
.admin-nav {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.admin-nav a {
    color: #b7e4c7;
    text-decoration: none;
    font-size: 0.85rem;
}

.admin-nav a.active {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

.admin-nav a:hover {
    color: #fff;
}

.comment-author-admin {
    font-size: 0.8rem;
    color: #666;
    margin: 0.2rem 0;
}

.comment-text-admin {
    font-size: 0.85rem;
    color: #333;
    background: #f9f9f9;
    padding: 0.5rem;
    border-radius: 4px;
    border-left: 3px solid #c0392b;
    margin: 0.3rem 0;
}

/* ================================================================
   Responsive (#110)
   ================================================================ */

/* Movil: sin flechas de navegacion, cards mas compactas, carrusel pegado
   a los bordes, padding reducido. */
@media (max-width: 767px) {
    .carousel {
        left: 8px;
        right: 8px;
        bottom: 8px;
        padding: 8px 8px 10px;
    }

    .carousel__nav {
        display: none;
    }

    .carousel__header {
        margin-bottom: 6px;
        gap: 0.5rem;
    }

    .carousel__counter {
        font-size: 0.78rem;
    }

    .card,
    .card.card--upsell,
    .card.card--add {
        flex: 0 0 160px;
    }

    .card__photo,
    .card--add__photo {
        height: 88px;
    }

    .card--add__icon {
        font-size: 2.6rem;
    }

    .card__photo-icon {
        font-size: 2rem;
    }

    .card__name {
        font-size: 0.85rem;
    }

    /* Issue #161: en movil la card expandida ocupa casi el ancho completo
       del viewport para que el panel de detalle quepa sin compresion.
       Issue #214: ademas, cuando el layout tiene la clase is-card-expanded
       el carrusel se reubica a la mitad inferior del viewport (50vh) y la
       card expandida rellena su contenedor para aprovechar ese espacio. */
    .card.card--expanded {
        flex: 0 0 calc(100vw - 32px);
        max-width: 420px;
    }

    .card.card--expanded .detail-nombre {
        font-size: 1.1rem;
    }

    /* Issue #214: carrusel fijo a mitad inferior del viewport mientras hay
       una card expandida. El #map queda automaticamente reducido a la mitad
       superior porque el .carousel es position:fixed y cubre la inferior;
       ademas el JS llama a map.invalidateSize() + flyTo() para centrar la
       terraza en la mitad visible tras el resize. */
    .mapa-layout.is-card-expanded .carousel {
        left: 0;
        right: 0;
        bottom: 0;
        height: 50vh;
        border-radius: 14px 14px 0 0;
        padding: 10px 8px 10px;
        display: flex;
        flex-direction: column;
    }

    .mapa-layout.is-card-expanded .carousel__viewport {
        flex: 1 1 auto;
        min-height: 0;
    }

    .mapa-layout.is-card-expanded .carousel__track {
        height: 100%;
        align-items: stretch;
    }

    /* La card expandida ocupa toda la altura disponible del carrusel en
       modo is-card-expanded, permitiendo scroll interno del panel detalle
       sin sobrepasar la mitad inferior del viewport. */
    .mapa-layout.is-card-expanded .card.card--expanded {
        flex: 0 0 calc(100vw - 16px);
        max-width: 560px;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .mapa-layout.is-card-expanded .card.card--expanded .card__detail {
        flex: 1 1 auto;
        /* Permitir que el detalle use todo el alto restante tras la foto
           y el body; el scroll interno se encarga de comentarios largos. */
        max-height: none;
        min-height: 0;
    }

    .search-bar {
        max-width: calc(100% - 1rem);
    }
}

/* ================================================================
   Map loading overlay (#115) — sin cambios
   ================================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.map-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 50%, #40916c 100%);
    opacity: 1;
    transition: opacity 400ms ease-out;
    overflow: hidden;
}

.map-loading-overlay--hiding {
    opacity: 0;
    pointer-events: none;
}

.map-loading-overlay__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 2rem 1.5rem;
    max-width: 520px;
    text-align: center;
}

.map-loading-overlay__spinner {
    width: 80px;
    height: 80px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: mlo-spin 1s linear infinite;
    position: relative;
}

.map-loading-overlay__title {
    margin: 0;
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.map-loading-overlay__message {
    margin: 0;
    color: #f1faee;
    font-size: 1rem;
    line-height: 1.5;
    min-height: 3em;
    max-width: 32ch;
    opacity: 1;
    transition: opacity 300ms ease-in-out;
}

.map-loading-overlay__message.is-fading-out {
    opacity: 0;
}

.map-loading-overlay__message.is-fading-in {
    opacity: 1;
}

.map-loading-overlay__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.map-loading-overlay__dots span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.4;
    animation: mlo-pulse 1.4s ease-in-out infinite;
}

.map-loading-overlay__dots span:nth-child(1) {
    animation-delay: 0s;
}

.map-loading-overlay__dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.map-loading-overlay__dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes mlo-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes mlo-pulse {
    0%, 80%, 100% {
        opacity: 0.4;
        transform: scale(0.85);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 600px) {
    .map-loading-overlay__content {
        gap: 1rem;
        padding: 1.5rem 1rem;
    }

    .map-loading-overlay__spinner {
        width: 60px;
        height: 60px;
        border-width: 3px;
    }

    .map-loading-overlay__title {
        font-size: 1.35rem;
    }

    .map-loading-overlay__message {
        font-size: 0.95rem;
        min-height: 3.2em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-loading-overlay,
    .map-loading-overlay--hiding {
        transition: none;
    }

    .map-loading-overlay__spinner {
        animation: none;
    }

    .map-loading-overlay__dots span {
        animation: none;
        opacity: 0.8;
    }

    .map-loading-overlay__message,
    .map-loading-overlay__message.is-fading-out,
    .map-loading-overlay__message.is-fading-in {
        transition: none;
        opacity: 1;
    }

    .card {
        transition: none;
    }

    .card:hover {
        transform: none;
    }

    .marker--highlighted {
        transition: none;
    }
}