/* WondarCore — código propio, no generado. Se puede modificar libremente. */

/* Variante "Comparar" de .card-action-btn (definida en home.css) y el agrupador
   de corazón/pin: en Gonzalo viven en index.css, pero home.css no las trae porque
   las cards de la home no muestran botón "Comparar". */
.dest-card-home .card-actions:has(.card-action-btn--comparar) {
  left: 10px;
  justify-content: space-between;
}

.card-actions-group {
  display: flex;
  gap: 6px;
}

.card-action-btn--comparar {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0;
  background: rgba(124,58,237,0.72);
  color: #fff;
  border-radius: 50px;
  padding: 0 12px;
  gap: 5px;
  height: 30px;
  width: auto;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.card-action-btn--comparar:hover {
  background: #7c3aed;
  box-shadow: 0 3px 12px rgba(124,58,237,0.5);
  transform: translateY(-1px);
}

.card-action-btn--comparar.vs-btn--active {
  background: #7c3aed;
  box-shadow: 0 0 0 2px #fff, 0 3px 12px rgba(124,58,237,0.5);
}

.destino-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  /* 1.5rem lateral, no 3.5rem — mismo criterio que .home-wrapper (home.css, 2026-07-27): tiene que
     coincidir con el ancho real de .quick-menu en el header (layout.css), que también usa 1.5rem a
     propósito. Compartida por ~9 vistas (Destino, Busqueda, Favoritos, Perfil, Red, etc.). */
  padding: 1.5rem 1.5rem 3rem;
}

/* ── BREADCRUMB ── */
.destino-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.bc-link {
  font-size: 0.82rem;
  color: #666;
  text-decoration: none;
  transition: color 0.15s;
}

.bc-link:hover { color: #2563eb; }

.bc-sep {
  font-size: 0.82rem;
  color: #bbb;
}

.bc-current {
  font-size: 0.82rem;
  color: #1a1a2e;
  font-weight: 600;
}

/* ── HERO — dividido en 2 bloques: izquierda fija (info) + derecha (mini carrusel de fotos) ── */
.destino-hero-row {
  position: relative;
  display: flex;
  gap: 12px;
}

.destino-hero--main {
  flex: 0 0 66%;
}

.destino-hero--gallery {
  flex: 1;
  min-width: 0;
}

/* Fondo de la galería a pantalla completa — cubre las dos columnas (izquierda + derecha) cuando
   se abre el modo galería. Separado del fondo fijo de la izquierda a propósito: así el bloque
   izquierdo nunca cambia de foto, ni siquiera mientras se navega la galería completa. */
.gallery-fullscreen-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.destino-hero-row.gallery-mode .gallery-fullscreen-bg {
  opacity: 1;
}

/* ── HERO CARD (cada uno de los 2 bloques) ──
   El recorte de esquinas redondeadas (overflow:hidden) vive en la foto/degradé, NO en .destino-hero
   — si estuviera acá, cualquier tooltip que se abra cerca del borde (favoritos, itinerario, fotos,
   flechas del mini carrusel) quedaría cortado en vez de asomar por afuera de la tarjeta. */
.destino-hero {
  position: relative;
  width: 100%;
  height: 340px;
  border-radius: 20px;
}

.destino-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.destino-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(to right, rgba(10,10,20,0.70) 0%, rgba(10,10,20,0.68) 40%, rgba(10,10,20,0) 60%);
}

/* ── BOTONES ACCIÓN (top right) ── */
.destino-actions {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

/* Sello oro/plata/bronce — mismo tamaño que los botones de acción, para que quede en la misma fila
   sin desentonar (el estilo base .rank-seal vive en layout.css). Migrado de Gonzalo/destino.css. */
.destino-actions .rank-seal {
  width: 38px;
  height: 38px;
}

.destino-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: none;
  border-radius: 50px;
  padding: 0 14px;
  height: 38px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: box-shadow 0.15s, transform 0.1s;
}

.destino-action-btn:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transform: translateY(-1px);
}

/* Botones de solo ícono (pin y corazón) */
.destino-action-btn:not(.destino-action-btn--photos) {
  width: 38px;
  padding: 0;
  justify-content: center;
}

/* ── PANEL INFO (izquierda) ── */
.destino-panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2.4rem 2.2rem;
  max-width: 520px;
}

.destino-city {
  font-size: 3.84rem;
  font-weight: 900;
  color: white;
  line-height: 1;
  margin-bottom: 0.2rem;
  letter-spacing: -1px;
}

.destino-subtitle {
  font-size: 1.08rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.9rem;
}

/* ── RATING (clickeable, lleva a valorar/opinar) ── */
.destino-rating-link {
  display: block;
  width: fit-content;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Pista sutil de que se puede clickear, sin agregar íconos ni cambiar el diseño */
.destino-rating-link:hover .destino-score,
.destino-rating-link:hover .destino-rating-label {
  opacity: 0.8;
}

.destino-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.destino-score {
  font-size: 2.28rem;
  font-weight: 900;
  color: white;
  line-height: 1;
}

.destino-score-max {
  font-size: 1.08rem;
  color: rgba(255,255,255,0.6);
  margin-right: 4px;
}

.destino-rating-bar {
  flex: 1;
  max-width: 240px;
  height: 8px;
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
  overflow: hidden;
}

.destino-rating-bar span {
  display: block;
  height: 100%;
  background: #e53e3e;
  border-radius: 3px;
}

.destino-rating-label {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  margin-bottom: 0.9rem;
}

/* Mismo espacio que hay entre la ubicación y el puntaje de arriba — .card-tags ya trae su propio
   margin-top desde index.css/home.css, así que acá se anula para no sumar los dos y duplicar el
   espacio. */
.destino-panel .card-tags {
  margin-top: 0;
}

/* ── DOTS fotos ── */
.destino-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}

.destino-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.2s;
}

.destino-dot--active {
  background: white;
  width: 18px;
  border-radius: 4px;
}

/* ── BLOQUE DERECHO — mini carrusel de fotos ── */
.destino-hero--gallery .destino-action-btn--photos {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}

.destino-gallery-shade {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(to top, rgba(10,10,20,0.55) 0%, rgba(10,10,20,0) 45%, rgba(10,10,20,0.32) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Flechas siempre visibles (no solo al hover), mismo lenguaje visual que las de la galería a
   pantalla completa (.gallery-nav) pero más chicas, para no competir con el bloque de la izq. */
.gallery-mini-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(0,0,0,0.6);
  border: 1.5px solid rgba(255,255,255,0.5);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.15s, transform 0.15s;
}
.gallery-mini-nav svg { width: 20px; height: 20px; }
.gallery-mini-nav:hover { background: rgba(0,0,0,0.85); }
.gallery-mini-nav--prev { left: 10px; }
.gallery-mini-nav--next { right: 10px; }
.gallery-mini-nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.gallery-mini-nav--next:hover { transform: translateY(-50%) translateX(2px); }

/* Botones acción — estados activos */
.btn-heart-dest.active svg { fill: #e53e3e; stroke: #e53e3e; }
.btn-pin-dest.active svg   { fill: #2563eb; stroke: #2563eb; }

/* Tooltips sobre los botones de acción del hero — cubre los 2 bloques (favoritos/itinerario a la
   izquierda, fotos/flechas del mini carrusel a la derecha) con el mismo estilo para los dos.
   El tooltip genérico de todo el sitio (home.css, [data-tip]:hover::after) abre hacia ARRIBA con
   bottom/left/transform — acá necesitamos que abra hacia ABAJO, así que se anulan esas propiedades
   de forma explícita para que no queden aplicadas las dos reglas a la vez. */
.destino-actions [data-tip] { position: relative; }
.destino-hero-row [data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  bottom: auto;
  right: 0;
  left: auto;
  transform: none;
  background: #1a1a2e;
  color: white;
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

/* Quién subió la foto — "Fotos Wondar" (nuestras) o "@usuario" (sacada de una Nota o de una
   Opinión con foto, ver ObtenerFotosGaleriaDestino/Atraccion). Mismo badge en el mini carrusel y en
   la galería a pantalla completa. Menos llamativo a propósito (2026-07-24, a pedido de Gonzalo): es
   un dato de crédito, no una acción — mismo lenguaje "translúcido oscuro" que ya usan las flechas
   del mini carrusel, en vez de competir en blanco/negrita con el botón de fotos. */
/* Contenedor de posicionamiento — antes era el pill en sí, ahora agrupa hasta 2 pills en columna:
   quién subió la foto, y (si corresponde) el título del contenido que la originó, con link a ese
   contenido (ver autorBadgeHtml en destino-publico.js, 2026-07-28). */
.foto-autor-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  max-width: calc(100% - 28px);
}
.foto-autor-badge:empty { display: none; }
.foto-autor-badge--fullscreen { z-index: 11; }

.foto-autor-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  background: rgba(0,0,0,0.4);
  color: rgba(255,255,255,0.9);
  font-size: 0.66rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 50px;
  backdrop-filter: blur(4px);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.foto-autor-pill svg { flex-shrink: 0; color: rgba(255,255,255,0.85); }
a.foto-autor-pill { cursor: pointer; transition: background 0.15s; }
a.foto-autor-pill:hover { background: rgba(0,0,0,0.6); }

/* Badge de ubicación (abajo a la derecha) — de qué Destino es cada foto, solo en las galerías
   agregadas de Región/País/Continente (ver ubicacionBadgeHtml en estado-publico.js/pais-publico.js/
   continente-publico.js, 2026-07-31). Mismo pill que .foto-autor-pill, posición opuesta. */
.foto-ubicacion-badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
  max-width: calc(100% - 28px);
}
.foto-ubicacion-badge:empty { display: none; }

/* ── MODO GALERÍA ── */
.gallery-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.destino-hero-row.gallery-mode .gallery-overlay {
  opacity: 1;
  pointer-events: all;
}

/* Ocultar los 2 bloques (info fija + mini carrusel) al entrar en la galería a pantalla completa —
   queda mostrando .gallery-fullscreen-bg de arriba, que cubre toda la fila. */
.destino-hero-row.gallery-mode .destino-hero--main,
.destino-hero-row.gallery-mode .destino-hero--gallery {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* ── REPRODUCTOR DE FOTOS (migración diseño Gonzalo, 2026-07-25) — clic en la foto estando en modo
   galería la abre en su tamaño/relación de aspecto real, sin el recorte de `background-size:cover`
   del banner. Capa fija a toda la pantalla, no solo al hero. ── */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.photo-lightbox.is-open {
  opacity: 1;
  pointer-events: all;
}

.photo-lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

.photo-lightbox-close {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.15s;
}
.photo-lightbox-close:hover { background: rgba(0,0,0,0.8); }

.photo-lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.15s, transform 0.15s;
}
.photo-lightbox-nav:hover { background: rgba(0,0,0,0.75); }
.photo-lightbox-nav--prev { left: 20px; }
.photo-lightbox-nav--next { right: 20px; }
.photo-lightbox-nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.photo-lightbox-nav--next:hover { transform: translateY(-50%) translateX(2px); }

.photo-lightbox-counter {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.8);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.destino-hero-row.gallery-mode .gallery-overlay { cursor: zoom-in; }

/* El botón flotante de Guardados (guardados.js, #guardados-toggle) queda fijo abajo a la derecha y
   se superpone con la flecha "siguiente" del reproductor — se oculta mientras el reproductor está
   abierto (mismo criterio que favoritos.css, que ya lo esconde cuando no tiene sentido mostrarlo). */
body:has(.photo-lightbox.is-open) #guardados-toggle {
  display: none;
}

/* Botón cerrar */
.gallery-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.15s;
}
.gallery-close:hover { background: rgba(0,0,0,0.8); }

/* Flechas prev/next */
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.15s, transform 0.15s;
}
.gallery-nav:hover { background: rgba(0,0,0,0.75); }
.gallery-nav--prev { left: 16px; }
.gallery-nav--next { right: 16px; }
.gallery-nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.gallery-nav--next:hover { transform: translateY(-50%) translateX(2px); }

/* Contador */
.gallery-counter {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.8);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Dots galería */
.gallery-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.gallery-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  padding: 0;
}
.gallery-dot--active {
  background: white;
  width: 18px;
  border-radius: 4px;
}

/* ── BLOQUE UNIFICADO VALORACIÓN + OPINIONES ── */
.destino-valop {
  margin-top: 1.25rem;
}

.valop-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  margin-bottom: 1.25rem;
}

.valop-divider {
  width: 1px;
  background: #f0f0f0;
  align-self: stretch;
}

.valop-barras,
.valop-opinion {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* "Valoración" no tenía ningún espacio antes de las barras (el reset global pone margin:0 en
   todo) — "Últimas opiniones" sí tiene espacio antes de la tarjeta (.valop-op-header). Se iguala
   acá para que ambas columnas respiren lo mismo entre el título y su contenido. */
.valop-barras {
  gap: 0.75rem;
}

.valop-op-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.valop-op-header .destino-card-title { margin-bottom: 0; }

.valop-op-nav {
  display: flex;
  gap: 6px;
}

.valop-op-track-wrap {
  overflow: hidden;
  flex: 1;
}

.valop-op-track {
  display: flex;
  transition: transform 0.35s ease;
}

.valop-op-track .op-review {
  min-width: 100%;
  box-sizing: border-box;
}

.valop-ver-todas {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.82rem;
}

.valop-footer {
  border-top: 1px solid #f0f0f0;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.valop-footer-btns {
  display: flex;
  gap: 10px;
}

.val-btn--green { background: #16a34a; color: white; }

.destino-card {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  /* El padding izquierdo va aparte, más grande que el resto (2.2rem en vez de 1.5rem), para que
     TODOS los bloques (Sobre el destino, Valoración, Comparación, etc.) arranquen alineados con el
     título del banner de arriba, que tiene ese mismo 2.2rem. */
  padding-left: 2.2rem;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.destino-card-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1a1a2e;
}

/* ── SOBRE EL DESTINO (resumen narrativo + ficha rápida + cómo llegar) ── */
.destino-resumen {
  margin-top: 1.25rem;
}

.destino-resumen-texto {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #444;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* Espacio extra además del gap normal entre bloques — separado a propósito de "Cómo llegar" de
     arriba, para que no dé la impresión de que el texto es la explicación de eso. */
  margin-top: 0.85rem;
}

.destino-resumen-texto p + p {
  margin-top: 0.75rem;
}

.destino-resumen-texto--expandido {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.destino-resumen-toggle {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #2563eb;
  cursor: pointer;
}

.destino-resumen-toggle:hover { text-decoration: underline; }

/* ── FICHA RÁPIDA ── */
/* 4 columnas iguales (pedido de Agustin, 2026-07-31): las 3 de siempre (Mejor época/Días
   mínimos/Tamaño/Idioma/Moneda/Enchufe, auto-flow en 2 filas) ocupan 3/4 = 75% del ancho, la 4ta
   es el widget de tips de Wondar IA (.destino-quick-tips) — ver más abajo. */
.destino-quickgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}

/* Reservada en la columna 4, alto de las 2 filas de la grilla de al lado — el resto de las cards
   (sin posición explícita) fluyen solas por las columnas 1-3 alrededor de este hueco. */
.destino-quick-tips {
  grid-column: 4;
  grid-row: 1 / span 2;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
}

.dqt-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dqt-slider {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
}

.dqt-texto {
  flex: 1;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1a1a2e;
  line-height: 1.35;
  /* Hasta 5 líneas — corta con "…" en vez de desbordar la card si un tip puntual es más largo. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dqt-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(124,58,237,0.1);
  color: #7c3aed;
  cursor: pointer;
  padding: 0;
}
.dqt-nav:hover { background: rgba(124,58,237,0.18); }

.dqt-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.dqt-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(124,58,237,0.25);
}
.dqt-dot--active { background: #7c3aed; }

/* "Cómo llegar" — una sola línea de texto con ícono, sin cajas ni fondo. */
.destino-como-llegar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.destino-como-llegar-row {
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
  column-gap: 1.75rem;
}

.destino-como-llegar-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a1a2e;
}

.destino-como-llegar-icon {
  display: inline-flex;
  cursor: help;
}

.destino-como-llegar-item svg {
  flex-shrink: 0;
  color: #7c3aed;
}

/* Ícono "abrir en Google Maps" — solo aparece si el aeropuerto/estación tiene sus propias
   coordenadas cargadas (ver setComoLlegarMapsLink en destino-publico.js). */
.destino-como-llegar-maps {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #7c3aed;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
}
.destino-como-llegar-maps:hover { opacity: 1; background: rgba(124,58,237,0.12); }

/* Pastilla ícono + texto, sin animación de hover (no son botones, no llevan a ningún lado). */
.destino-quick-stat {
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(124,58,237,0.35);
  border-radius: 20px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  /* Fija la misma altura en todas las tarjetas — las que tienen gráfico son las que definen cuánto
     ocupan de verdad; sin esto, las que no tienen gráfico quedaban más bajas. */
  min-height: 92px;
}

.destino-quick-stat-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c3aed;
}

.destino-quick-stat-icon svg { width: 24px; height: 24px; }

.destino-quick-stat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.destino-quick-stat-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9a96a8;
}

.destino-quick-stat-value {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.3;
}

/* ── Mini gráficos para Mejor época / Días mínimos / Tamaño — cada uno con su propia metáfora
   visual para no confundirse entre sí. ── */
.mini-graph {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 16px;
  gap: 3px;
  margin-top: 6px;
  cursor: help;
}

/* Mejor época: franja de 12 meses, violeta = ventana recomendada */
.mini-epoca-seg {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: #ece7fb;
}
.mini-epoca-seg--activo {
  background: #7c3aed;
}

/* Días mínimos: mismo lenguaje de barras que los otros 2 — llenas = días recomendados */
.mini-dias-pip {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: #ece7fb;
}
.mini-dias-pip--activo {
  background: #7c3aed;
}

/* Medio día: mitad violeta / mitad del color base, en diagonal para que se note que es "medio" */
.mini-dias-pip--medio {
  background: linear-gradient(135deg, #7c3aed 50%, #ece7fb 50%);
}

/* Tamaño: barras crecientes (Aldea → Metrópoli), violeta hasta el escalón actual */
.mini-tamano-step {
  flex: 1;
  background: #ece7fb;
  border-radius: 2px 2px 0 0;
}
.mini-tamano-step:nth-child(1) { height: 30%; }
.mini-tamano-step:nth-child(2) { height: 48%; }
.mini-tamano-step:nth-child(3) { height: 66%; }
.mini-tamano-step:nth-child(4) { height: 83%; }
.mini-tamano-step:nth-child(5) { height: 100%; }
.mini-tamano-step--activo {
  background: #7c3aed;
}

/* ── VALORACIÓN ── */
.val-bars { display: flex; flex-direction: column; gap: 10px; }

.val-row {
  display: grid;
  grid-template-columns: 110px 1fr 48px;
  align-items: center;
  gap: 10px;
}

.val-total-tuval {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  padding-left: 1.25rem;
  border-left: 1px solid #e5e7eb;
}

.val-total-tuval-score {
  font-size: 1.6rem;
  font-weight: 900;
  color: #2563eb;
  line-height: 1;
}

.val-total-tuval-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2563eb;
  opacity: 0.7;
  margin-top: 2px;
}

.val-label { font-size: 0.8rem; color: #555; }

.val-bar-wrap {
  height: 11px;
  background: linear-gradient(to right, #e53e3e 0%, #f59e0b 30%, #eab308 55%, #22c55e 82%);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.val-bar {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background: #eee;
  border-radius: 0 6px 6px 0;
}

.val-score {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a1a2e;
  text-align: right;
}

.val-max { font-weight: 400; color: #aaa; font-size: 0.75rem; }

.val-total {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f8f8fb;
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.val-total-score {
  font-size: 2rem;
  font-weight: 900;
  color: #1a1a2e;
  line-height: 1;
  flex-shrink: 0;
}

.val-total-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.val-total-info strong { font-size: 0.88rem; color: #1a1a2e; }
.val-total-info span  { font-size: 0.75rem; color: #999; }

.val-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: auto; }

.val-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, transform 0.1s;
}
.val-btn:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
.val-btn:disabled { opacity: 0.6; cursor: default; }

.val-btn--primary  { background: #2563eb; color: white; }
.val-btn--secondary { background: #7c3aed; color: white; }

/* ── OPINIONES ── */
.op-review {
  background: white;
  border: 1px solid #ececf2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.op-review-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.op-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.op-user-info { display: flex; flex-direction: column; flex: 1; }
.op-username  { font-size: 0.88rem; font-weight: 700; color: #1a1a2e; }
.op-usermeta  { font-size: 0.72rem; color: #999; }
.op-date      { font-size: 0.72rem; color: #bbb; flex-shrink: 0; }

.op-score-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.op-score-bar {
  position: relative;
  flex: 1;
  height: 11px;
  background: linear-gradient(to right, #e53e3e 0%, #f59e0b 30%, #eab308 55%, #22c55e 82%);
  border-radius: 6px;
  overflow: hidden;
}

.op-score-fill {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background: #eee;
  border-radius: 0 6px 6px 0;
}

.op-score-num { font-size: 0.78rem; font-weight: 700; color: #1a1a2e; flex-shrink: 0; }

.op-review-title { font-size: 0.88rem; font-weight: 700; color: #1a1a2e; }
.op-review-text  { font-size: 0.78rem; color: #666; line-height: 1.55; }

.op-review-footer { display: flex; align-items: center; }

.op-like-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 1.5px solid #e8e8e8;
  border-radius: 50px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.op-like-btn:hover { border-color: #2563eb; color: #2563eb; }
.op-like-btn--active { background: #eff6ff; border-color: #2563eb; color: #2563eb; }
.op-like-btn--active svg { fill: #2563eb; stroke: #2563eb; }

.op-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.5rem;
}

.op-ver-todas {
  font-size: 0.82rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: underline;
  cursor: pointer;
}

.op-btn-opinar {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #16a34a;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.op-btn-opinar:hover { opacity: 0.88; transform: translateY(-1px); }

/* ── COMPARACIÓN DE DESTINOS ── */
.comparacion-section {
  margin-top: 1.25rem;
  gap: 0.75rem;
}

.comparacion-sub {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.5;
}

.comparacion-btn {
  text-decoration: none;
}

/* Lista de filas "Destino VS destino similar" — 4 comparaciones en 2 columnas de 2 filas cada una,
   grid-auto-flow:column llena primero la columna izquierda (filas 1 y 2) y recién después pasa a
   la columna derecha, en vez del orden por fila que da un grid normal. Sin scroll: el alto lo
   define el contenido (2 filas). */
.vs-rows-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  gap: 10px;
}

.vs-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  background: #f5f3ff;
  border: 1px solid #e4dafc;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-radius: 16px;
  padding: 8px 20px;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

/* Como el fondo violeta ya es el estado normal (no solo hover), el aviso de "estás encima" pasa a
   ser un movimiento (se levanta un poco) en vez de un cambio de color. */
.vs-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(124,58,237,0.18);
}

.vs-row-side {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.vs-row-side--right {
  justify-content: flex-end;
}

.vs-row-photo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}

.vs-row-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vs-row-vs {
  font-size: 0.78rem;
  font-weight: 800;
  color: #7c3aed;
  letter-spacing: 0.03em;
}

/* ── DESTINOS CERCANOS ── */
.cercanos-section {
  margin-top: 1.25rem;
  padding: 1.5rem;
  border-radius: 16px;
}

.cercanos-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.cercanos-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 3px;
}

.cercanos-subtitle {
  font-size: 0.8rem;
  color: #999;
}

.cercanos-nav {
  display: flex;
  gap: 8px;
}

.cercanos-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: none;
  border: 1.5px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #555;
  transition: background 0.15s, border-color 0.15s;
}

.cercanos-btn:hover {
  background: #f4f5f7;
  border-color: #bbb;
}

.cercanos-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Destinos cercanos: flechas en violeta (mismo color que el borde de card de destino) */
.cercanos-section:not(.exp-section) .cercanos-btn {
  border-color: #7c3aed;
  color: #7c3aed;
}
.cercanos-section:not(.exp-section) .cercanos-btn:hover {
  background: #f5f0fe;
  border-color: #7c3aed;
}

/* Experiencias: flechas en verde (mismo color que el borde de card de experiencia) */
.exp-section .cercanos-btn {
  border-color: #16a34a;
  color: #16a34a;
}
.exp-section .cercanos-btn:hover {
  background: #eafbf0;
  border-color: #16a34a;
}

.cercanos-track-wrap {
  overflow: hidden;
}

.cercanos-track {
  display: flex;
  gap: 1rem;
  transition: transform 0.35s ease;
  cursor: grab;
  user-select: none;
}

.cercanos-track:active { cursor: grabbing; }

.cercanos-card {
  flex: 0 0 calc(25% - 0.75rem);
  min-width: 0;
}

.cercanos-card .card-img-wrap {
  height: 280px;
}

/* ── EXPERIENCIAS — tags arriba, barra azul ── */
.exp-card {
  border-radius: 14px;
  overflow: hidden;
}


.exp-tags-top {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.exp-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 5px;
  padding: 3px 8px;
  color: rgba(255,255,255,0.95);
  backdrop-filter: blur(4px);
}

.exp-tag--main {
  background: rgba(234,179,8,0.85);
  border-color: rgba(234,179,8,0.5);
  color: white;
}

.exp-bar span {
  background: #3b82f6 !important;
}

/* ── MAPA DE DESTINOS CERCANOS (migración diseño Gonzalo, 2026-07-25) — mismo componente que "ver
   todos los destinos" de pais-publico.css/pais-publico.js (filtros de Calificación/Tamaño, mismos
   círculos rojos + popup minicard), pero siempre expandido (no hay toggle acá) y con datos reales
   ya cargados por destino-publico.js (obtenerDestinosCercanos), no un mock. El sidebar reusa
   .filters-sidebar/.filter-group de home.css, que esta página ya carga. ── */
.pais-map-note {
  font-size: 0.82rem;
  color: #666;
  margin: 1.25rem 0 0.75rem;
}

.pais-map-note strong {
  color: #1a1a2e;
}

.pais-map-layout {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.pais-map-sidebar {
  flex-shrink: 0;
  width: 210px;
}

.pais-map-canvas {
  flex: 1;
  min-width: 0;
}

#cercanos-map {
  height: 380px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

@media (max-width: 768px) {
  .pais-map-layout { flex-direction: column; }
  .pais-map-sidebar { width: 100%; }
}

.map-minicard {
  display: flex;
  flex-direction: column;
  width: 150px;
  font-family: inherit;
  border-radius: 12px;
  overflow: hidden;
}

.map-minicard__img {
  height: 80px;
  background-size: cover;
  background-position: center;
}

.map-minicard__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px 10px;
}

.map-minicard strong {
  font-size: 0.88rem;
  color: #1a1a2e;
  line-height: 1.1;
}

.map-minicard__rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.map-minicard__score {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a1a2e;
}

.map-minicard__bar {
  flex: 1;
  height: 5px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
}

.map-minicard__bar span {
  display: block;
  height: 100%;
  background: #e53e3e;
  border-radius: 3px;
}

.map-minicard__tag {
  align-self: flex-start;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: #f4f5f7;
  border-radius: 5px;
  padding: 3px 8px;
  color: #555;
}

@media (max-width: 768px) {
  #cercanos-map { height: 300px; }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .destino-wrapper { padding: 1rem 0.75rem 3rem; }

  /* Los 2 bloques del hero se apilan en mobile — al lado no entran. Ojo: la regla de escritorio
     ".destino-hero--gallery { flex: 1; ... }" trae flex-basis:0 metido en el shorthand — al pasar
     .destino-hero-row a flex-direction:column, ese flex-basis pasa a controlar la ALTURA (no el
     ancho) y colapsaba el bloque a 0px pese al "height: 220px" de acá abajo (flex-basis le gana a
     height cuando no es "auto"). Encontrado 2026-07-24 revisando Nueva York en vivo — hay que
     resetear el shorthand completo, no solo la altura. */
  .destino-hero-row { flex-direction: column; }
  .destino-hero--main { flex-basis: auto; }
  .destino-hero--gallery { flex: none; height: 220px; }

  .destino-hero { height: auto; min-height: 480px; border-radius: 14px; }
  .destino-hero--gallery.destino-hero { min-height: 0; height: 220px; }

  .destino-overlay {
    background: linear-gradient(to top, rgba(10,10,20,0.72) 0%, rgba(10,10,20,0.68) 58%, rgba(10,10,20,0) 80%);
  }

  .destino-panel {
    max-width: 100%;
    justify-content: flex-end;
    padding: 1.5rem;
  }

  .destino-city { font-size: 2.2rem; }

  .destino-quickgrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* En 2 columnas la reserva "columna 4 / 2 filas" de desktop no aplica — el widget de tips pasa a
     ocupar una fila propia de ancho completo, al final de la grilla. */
  .destino-quick-tips { grid-column: 1 / -1; grid-row: auto; }

  /* "Cómo llegar" en mobile: cada dato en su propia línea, no lado a lado */
  .destino-como-llegar-row { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Valoración + Opiniones: columna única — el nombre de clase acá estaba desactualizado
     (".destino-bottom" no existe en el HTML, el contenedor real es ".valop-top") así que esta
     regla nunca se aplicaba: las 2 columnas seguían apretadas en ~119px cada una en mobile,
     desbordando la tarjeta de opinión fuera de la pantalla (encontrado 2026-07-24, revisando
     Nueva York en vivo). */
  .valop-top {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .valop-divider {
    display: none;
  }

  /* Header de bloques: title + flechas sin que se rompan */
  .cercanos-header {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
  }
  .cercanos-header > div { flex: 1; min-width: 0; }
  .cercanos-nav { flex-shrink: 0; }

  /* Títulos de sección */
  .cercanos-title { font-size: 1.3rem; }
  .destino-card-title { font-size: 1.3rem; }

  /* El banner en mobile usa 1.5rem de padding (no 2.2rem) — mismo criterio de alineación, ahora
     para todos los bloques. */
  .destino-card { padding-left: 1.5rem; }

  /* Destinos cercanos: mismo tamaño que experiencias */
  .cercanos-section:not(.exp-section) .cercanos-card {
    flex: 0 0 75%;
  }
  .cercanos-section:not(.exp-section) .cercanos-card .card-img-wrap {
    height: 200px;
  }

  /* Experiencias: 1 card — más contenido, más espacio */
  .exp-section .cercanos-card {
    flex: 0 0 75%;
  }
  .exp-section .cercanos-card .card-img-wrap {
    height: 200px;
  }

  /* Ocultar tags secundarios en mobile — sin espacio */
  .exp-tags-top { display: none; }

  /* Ver todas */
  .op-footer { flex-direction: column; gap: 10px; align-items: flex-start; }

  /* Comparación de destinos: en mobile no entran 2 columnas — se apilan las 4 en una sola */
  .vs-rows-list { grid-template-columns: 1fr; grid-auto-flow: row; }
  .vs-row { padding: 6px 12px; gap: 8px; }
  .vs-row-photo { width: 32px; height: 32px; }
  .vs-row-name { font-size: 0.8rem; }
}

/* ── MODAL VALORAR ─────────────────────────────────────────────── */

.modal-valorar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.modal-valorar {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100vw);
  background: #f7f8fa;
  z-index: 1001;
  overflow-y: auto;
  box-shadow: -8px 0 40px rgba(0,0,0,0.18);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(.4,0,.2,1);
}

.modal-valorar-overlay.is-open,
.modal-valorar.is-open { display: block; }

.modal-valorar.is-open { transform: translateX(0); }

.modal-valorar-close {
  position: sticky;
  top: 1rem;
  float: right;
  margin: 1rem 1rem 0 0;
  background: white;
  border: 1.5px solid #e5e7eb;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #555;
  transition: border-color 0.15s, color 0.15s;
  z-index: 2;
}
.modal-valorar-close:hover { border-color: #1a1a2e; color: #1a1a2e; }

.modal-valorar-inner {
  padding: 1.5rem 1.75rem 2.5rem;
  clear: both;
}

/* Cabecera del modal */
.modal-val-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.modal-val-thumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.modal-val-pretitle {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
  margin-bottom: 2px;
}

.modal-val-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.1;
}

.modal-val-sub {
  font-size: 0.8rem;
  color: #888;
  margin-top: 3px;
}

/* Secciones */
.modal-val-section {
  background: white;
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.modal-val-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 0.25rem;
}

.modal-val-hint {
  font-size: 0.75rem;
  color: #aaa;
  margin-bottom: 1.1rem;
}

.modal-val-optional {
  font-weight: 400;
  color: #bbb;
  font-size: 0.8rem;
}

/* Filas de barras */
.vrows { display: flex; flex-direction: column; gap: 1rem; }

.vrow {
  display: grid;
  grid-template-columns: 160px 1fr 38px;
  align-items: center;
  gap: 0.75rem;
}

.vrow-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vrow-icon {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  color: #888;
}

.vrow-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.2;
}

.vrow-sub {
  display: block;
  font-size: 0.68rem;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Barra interactiva — mismo diseño que /valorar (track + ticks + dot con aro de color según
   puntaje), en vez del thumb sólido viejo. Ver valorar-publico.css para la versión de referencia. */
.vbar-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(to right, #e53e3e 0%, #f59e0b 30%, #eab308 55%, #22c55e 82%);
  cursor: pointer;
  user-select: none;
  touch-action: none;
  overflow: visible;
}

.vbar-ticks {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(0,0,0,0.28) 0,
    rgba(0,0,0,0.28) 1.5px,
    transparent 1.5px,
    transparent 10%
  );
  pointer-events: none;
  z-index: 1;
}

.vbar-fill {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background: #dde1e9;
  border-radius: 0 5px 5px 0;
  transition: width 0.05s;
}

.vbar-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  border: 3px solid #1a1a2e;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  pointer-events: none;
  z-index: 2;
  transition: transform 0.15s ease;
}

.vbar-track:hover .vbar-dot { transform: translate(-50%, -50%) scale(1.15); }

/* Barra de solo lectura (Valoración general = promedio, no se arrastra) — grisada a propósito para
   que se note de un vistazo que no se puede tocar, a diferencia de las 6 de abajo. */
.vbar-readonly { cursor: default; background: #d8d8d8; }
.vbar-readonly:hover .vbar-dot { transform: translate(-50%, -50%); }
.vbar-readonly .vbar-fill { background: #e7e9ee; }
.vrow--readonly .vrow-label,
.vrow--readonly .vrow-icon,
.vrow--readonly .vrow-score { color: #999; }

.vrow-score {
  font-size: 0.9rem;
  font-weight: 800;
  color: #1a1a2e;
  text-align: right;
}

/* Textarea opinión */
.vopinion-textarea {
  width: 100%;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  font-family: inherit;
  color: #1a1a2e;
  resize: vertical;
  min-height: 100px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
  margin-top: 0.5rem;
}
.vopinion-textarea:focus { border-color: #2563eb; }

.vopinion-titulo {
  width: 100%;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 0.65rem 1rem;
  font-size: 0.85rem;
  font-family: inherit;
  color: #1a1a2e;
  margin-top: 0.6rem;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.vopinion-titulo:focus { border-color: #2563eb; }

/* Zona de fotos */
.vfoto-drop {
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-top: 0.5rem;
}
.vfoto-drop:hover,
.vfoto-drop.drag-over {
  border-color: #2563eb;
  background: #eff6ff;
}

.vfoto-drop p {
  font-size: 0.82rem;
  color: #888;
  margin: 0.4rem 0 0;
}

.vfoto-link { color: #2563eb; text-decoration: underline; }

.vfoto-hint { font-size: 0.72rem !important; color: #bbb !important; }

.vfoto-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.75rem;
}

.vfoto-thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.vfoto-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1a1a2e;
  color: white;
  border: none;
  font-size: 0.85rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Zona de videos (no se persisten en el backend, ver comentario en Detalle.cshtml) */
.vvideo-add-row {
  display: flex;
  gap: 8px;
  margin-top: 0.5rem;
}

.vvideo-input {
  flex: 1;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 0.65rem 1rem;
  font-size: 0.85rem;
  font-family: inherit;
  color: #1a1a2e;
  outline: none;
  transition: border-color 0.15s;
  min-width: 0;
  box-sizing: border-box;
}
.vvideo-input:focus { border-color: #2563eb; }
.vvideo-input--error { border-color: #e53e3e; }

.vvideo-btn {
  background: white;
  color: #2563eb;
  border: 1.5px solid #d6e3fb;
  border-radius: 10px;
  padding: 0 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.vvideo-btn:hover { background: #eff6ff; border-color: #2563eb; }

.vvideo-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.75rem;
}

.vvideo-thumb {
  position: relative;
  width: 110px;
  border-radius: 8px;
  overflow: visible;
  flex-shrink: 0;
}

.vvideo-link {
  display: block;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.vvideo-link img {
  width: 100%;
  height: 64px;
  object-fit: cover;
  display: block;
}

.vvideo-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  transition: background 0.15s;
}
.vvideo-link:hover .vvideo-play { background: rgba(0,0,0,0.55); }

.vvideo-del {
  top: -6px;
  right: -6px;
}

/* Botón enviar */
.modal-val-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.btn-enviar-val {
  background: #16a34a;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 12px 28px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.btn-enviar-val:hover { opacity: 0.88; transform: translateY(-1px); }

@media (max-width: 768px) {
  .modal-valorar {
    width: 100vw;
    top: auto;
    height: 92vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(.4,0,.2,1);
  }
  .modal-valorar.is-open { transform: translateY(0); }

  .vrow {
    grid-template-columns: 130px 1fr 34px;
    gap: 0.5rem;
  }

  .modal-val-inner { padding: 1rem 1.25rem 2rem; }
}