:root {
  --color-bosque: #1f4d36;
  --color-bosque-oscuro: #123524;
  --color-musgo: #3f7a5a;
  --color-arena: #f4ecdd;
  --color-fuego: #ad5f24;
  --color-texto: #232323;
  --color-texto-suave: #5a5a5a;
  --color-blanco: #ffffff;
  --sombra-card: 0 4px 14px rgba(0, 0, 0, 0.08);
  --radio: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--color-texto);
  background: var(--color-arena);
  line-height: 1.5;
}

body > main { flex: 1 0 auto; }

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

a { text-decoration: none; color: inherit; }

h1, h2, h3 {
  color: var(--color-bosque-oscuro); margin-top: 0;
  font-family: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

@media (max-width: 600px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.1rem; }
}

/* padding-top/bottom nada más (no usar el shorthand "padding"): esta clase
   siempre se combina con .container en el mismo elemento, y el shorthand
   pisaría también el padding izquierdo/derecho que pone .container. */
.section { padding-top: 20px; padding-bottom: 20px; }
.section--banners { padding-top: 16px; padding-bottom: 4px; }

/* Header */
.site-header {
  background: var(--color-bosque);
  color: var(--color-blanco);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  position: relative;
}

.logo {
  font-family: 'Outfit', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--color-blanco);
  display: inline-flex; align-items: center; gap: 8px;
}
.logo__icono { width: 44px; height: 44px; }

.nav-toggle {
  display: none;
  background: none; border: none; color: var(--color-blanco);
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 8px;
}

.main-nav { display: flex; gap: 24px; align-items: center; }

.main-nav a { color: var(--color-blanco); opacity: 0.85; font-weight: 500; }
.main-nav a:hover, .main-nav a.active { opacity: 1; border-bottom: 2px solid var(--color-fuego); }

.nav-proximamente {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.85rem;
  cursor: default;
}
.nav-proximamente::after { content: ' (pronto)'; font-size: 0.7rem; }

.nav-cta {
  background: var(--color-fuego); color: var(--color-blanco) !important;
  padding: 8px 18px; border-radius: 999px; font-weight: 600; opacity: 1 !important;
}
.nav-cta:hover { background: #8f4d1d; border-bottom: none !important; }

/* Cuentas: login / registro */
.seccion-cuenta { display: flex; justify-content: center; }
.form-cuenta {
  background: var(--color-blanco); padding: 32px; border-radius: var(--radio);
  box-shadow: var(--sombra-card); max-width: 420px; width: 100%;
}
.form-cuenta__logo { display: block; width: 72px; height: 72px; margin: 0 auto 16px; }
.form-cuenta label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 0.9rem; }
.form-cuenta input {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid #ddd; border-radius: 8px; font-size: 0.95rem; font-weight: 400;
}
.form-cuenta .btn { width: 100%; text-align: center; }
.form-cuenta__alt { text-align: center; margin-top: 16px; font-size: 0.9rem; color: var(--color-texto-suave); }
.form-cuenta__alt a { color: var(--color-musgo); font-weight: 600; }

.selector-rol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.selector-rol__opcion {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 2px solid #e6e0d4; border-radius: 10px; padding: 14px 10px; cursor: pointer;
  font-weight: 600; font-size: 0.9rem; margin-bottom: 0;
}
.selector-rol__opcion input { width: auto; display: inline; margin-right: 6px; }
.selector-rol__opcion:has(input:checked) { border-color: var(--color-fuego); background: #fdf3ea; }

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--color-bosque), var(--color-musgo));
  color: var(--color-blanco);
  text-align: center;
}

.hero__inner { padding: 80px 20px; }

.hero__logo-prelanzamiento { width: 110px; height: 110px; margin-bottom: 20px; }

.hero h1 { color: var(--color-blanco); font-size: 2.4rem; margin-bottom: 12px; }
.hero p { font-size: 1.1rem; opacity: 0.92; max-width: 560px; margin: 0 auto 28px; }

.hero__buscador {
  display: flex; gap: 10px; max-width: 520px; margin: 0 auto;
  background: var(--color-blanco); padding: 6px; border-radius: 999px; box-shadow: var(--sombra-card);
}
.hero__buscador input {
  flex: 1; border: none; background: none; padding: 10px 16px; font-size: 0.95rem; outline: none;
}

.hero__botones-prelanzamiento { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero__botones-prelanzamiento .btn--secondary {
  background: rgba(255, 255, 255, 0.12); border: 2px solid rgba(255, 255, 255, 0.6);
}
.hero__botones-prelanzamiento .btn--secondary:hover { background: rgba(255, 255, 255, 0.22); }

/* Botones */
.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  border: none;
  cursor: pointer;
}

.btn--primary { background: var(--color-fuego); color: var(--color-blanco); }
.btn--primary:hover { background: #8f4d1d; }

.btn--secondary { background: var(--color-bosque); color: var(--color-blanco); }
.btn--secondary:hover { background: var(--color-bosque-oscuro); }

/* Grid de lugares */
.grid-lugares {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.card-lugar {
  position: relative;
  background: var(--color-blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
  overflow: hidden;
  transition: transform 0.15s ease;
}

.card-lugar:hover { transform: translateY(-4px); }

.card-lugar a { display: block; }

.card-lugar__favorito-form { position: absolute; top: 10px; right: 10px; z-index: 2; }
.card-lugar__favorito {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.85); color: var(--color-texto-suave);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.card-lugar__favorito:hover { background: var(--color-blanco); }
.card-lugar__favorito--activo { color: #e0245e; background: var(--color-blanco); }

.card-lugar__imagen {
  height: 170px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-musgo), var(--color-bosque));
  overflow: hidden;
}
.card-lugar__imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-lugar__imagen-icono { font-size: 3rem; }

.card-lugar__cuerpo { padding: 20px; }

.card-lugar__categorias { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.card-lugar__categoria {
  display: inline-block;
  font-size: 0.8rem;
  background: var(--color-arena);
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--color-bosque-oscuro);
}

.card-lugar h3 { margin: 0 0 6px; font-size: 1.15rem; }

.card-lugar__ubicacion { color: var(--color-texto-suave); font-size: 0.9rem; margin: 0; }

/* Grid de noticias */
.grid-noticias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.card-noticia {
  background: var(--color-blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
  overflow: hidden;
  transition: transform 0.15s ease;
}
.card-noticia:hover { transform: translateY(-4px); }
.card-noticia a { display: block; }

.card-noticia__imagen {
  height: 170px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-fuego), var(--color-bosque));
  overflow: hidden;
}
.card-noticia__imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-noticia__imagen-icono { font-size: 3rem; }

.card-noticia__cuerpo { padding: 20px; }

.card-noticia__categoria {
  display: inline-block; font-size: 0.8rem; background: var(--color-arena);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; color: var(--color-bosque-oscuro);
}

.card-noticia h3 { margin: 0 0 6px; font-size: 1.15rem; }
.card-noticia__resumen { color: var(--color-texto-suave); font-size: 0.92rem; margin: 0 0 8px; }
.card-noticia__fecha { color: var(--color-texto-suave); font-size: 0.82rem; margin: 0; }

.detalle-noticia__imagen { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radio); margin: 16px 0; display: block; }
.detalle-noticia__contenido { line-height: 1.7; }

/* Grid de cupones */
.grid-cupones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.card-cupon {
  position: relative;
  background: var(--color-blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-cupon__comercio { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--color-texto-suave); }
.card-cupon__logo { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; }

.card-cupon__badge {
  position: absolute; top: 16px; right: 16px;
  background: var(--color-fuego); color: var(--color-blanco);
  font-size: 0.8rem; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}

.card-cupon h3 { margin: 4px 0 0; font-size: 1.1rem; padding-right: 70px; }
.card-cupon__descripcion { color: var(--color-texto-suave); font-size: 0.92rem; margin: 0; }
.card-cupon__codigo { font-size: 0.88rem; margin: 0; }
.card-cupon .btn { margin-top: 8px; align-self: flex-start; }

.form-admin__ayuda { font-size: 0.85rem; margin: -6px 0 16px; }

.paso-indicador {
  display: inline-block; background: var(--color-arena); color: var(--color-bosque-oscuro);
  font-size: 0.85rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; margin: 0 0 16px;
}
.paso-acciones { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

.campo-video { margin-top: 12px; max-width: 480px; }
.campo-video label { display: block; margin-bottom: 10px; font-weight: 600; font-size: 0.9rem; }
.campo-video input {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid #ddd; border-radius: 8px; font-size: 0.95rem; font-weight: 400;
}

/* Filtros */
.filtros-lugares {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  background: var(--color-blanco);
  padding: 18px;
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
  margin-top: 20px;
}

.filtros-lugares input[type="text"],
.filtros-lugares select {
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.95rem;
}

.filtros-lugares input[type="text"] { flex: 1; min-width: 220px; }

.filtros-lugares--tabs { margin-top: 12px; }

/* En desktop, la fila principal y el panel avanzado son "invisibles" para el layout
   (display:contents): sus hijos siguen participando del mismo flex-wrap de
   .filtros-lugares de siempre, como si no hubiera ningún div envolviéndolos. */
.filtros-lugares__fila-principal,
.filtros-lugares__avanzados { display: contents; }
.filtros-lugares__toggle { display: none; }

.encabezado-lista {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}

.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radio); }
.tabla-scroll .admin-tabla { border-radius: 0; }

/* "Mis lugares" del dueño: tabla en desktop, cards apiladas en mobile (ver
   media query) — en vez de una tabla angosta con scroll horizontal que
   esconde las acciones fuera de la pantalla. */
.lugares-dueno--cards { display: none; }

.lugar-card-dueno {
  background: var(--color-blanco); border-radius: var(--radio); box-shadow: var(--sombra-card);
  padding: 16px; margin-bottom: 14px;
}
.lugar-card-dueno__cabecera {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px;
}
.lugar-card-dueno__cabecera h3 { margin: 0; font-size: 1.05rem; }
.lugar-card-dueno__info { margin: 0 0 12px; font-size: 0.85rem; color: var(--color-texto-suave); }
.lugar-card-dueno__acciones { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.lugar-card-dueno__acciones a { font-weight: 600; }
.lugar-card-dueno__acciones form { display: inline; }

.accion-aprobar, .accion-rechazar {
  background: none; border: none; cursor: pointer; padding: 0;
  font-weight: 600; font-size: 0.95rem; font-family: inherit;
}
.accion-aprobar { color: #1f6d3b; }
.accion-rechazar { color: #a31515; }

.filtros-lugares .checkbox { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; }

.resultado-contador { color: var(--color-texto-suave); margin: 16px 0 0; }

/* Detalle de lugar */
.volver { color: var(--color-musgo); font-weight: 600; display: inline-block; margin-bottom: 16px; }

/* Galería + video arriba: un solo slider, una diapositiva a la vez (fotos y video del mismo tamaño,
   así el video no se ve más grande/invasivo que las fotos) */
.galeria-slider {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 20px;
  background: #111;
}
.galeria-slider__viewport { position: relative; aspect-ratio: 16 / 9; }

.galeria-slider--banner { margin-bottom: 0; }
.galeria-slider--banner .galeria-slider__viewport { aspect-ratio: 3 / 1; }
@media (max-width: 600px) {
  .galeria-slider--banner .galeria-slider__viewport { aspect-ratio: 4 / 3; }
}
.galeria-slider__slide {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.galeria-slider__slide--activo { opacity: 1; pointer-events: auto; }
.galeria-slider__slide img, .galeria-slider__slide iframe {
  width: 100%; height: 100%; object-fit: cover; display: block; border: 0;
}
.galeria-slider__slide a { display: block; width: 100%; height: 100%; }

.galeria-slider__flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(0, 0, 0, 0.5); color: var(--color-blanco);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.galeria-slider__flecha:hover { background: rgba(0, 0, 0, 0.7); }
.galeria-slider__flecha--prev { left: 12px; }
.galeria-slider__flecha--next { right: 12px; }

.galeria-slider__puntos {
  position: absolute; bottom: 12px; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: center; gap: 6px;
}
.galeria-slider__punto {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.5); cursor: pointer;
}
.galeria-slider__punto--activo { background: var(--color-blanco); }

.galeria-hero--vacia {
  display: flex; align-items: center; justify-content: center;
  height: 280px;
  background: linear-gradient(135deg, var(--color-musgo), var(--color-bosque));
  font-size: 4rem;
}

.detalle-lugar__cabecera { margin-bottom: 20px; }

.detalle-lugar__categorias { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

.detalle-lugar__categoria {
  display: inline-block;
  background: var(--color-arena);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
}

.detalle-lugar__calificacion-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.detalle-lugar__calificacion { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin: 0; }
.detalle-lugar__calificacion .estrellas { color: var(--color-fuego); letter-spacing: 1px; }
.detalle-lugar__calificacion a { color: var(--color-texto-suave); font-weight: 400; text-decoration: underline; }

.detalle-lugar__ubicacion { color: var(--color-texto-suave); margin: 0; }

/* Acciones rápidas (WhatsApp/Mensaje/Favorito), junto a las reseñas: solo se
   ven en mobile, ver el media query — en desktop esto vive en el sidebar de
   acción de siempre. */
.detalle-lugar__acciones-rapidas { display: none; gap: 8px; flex-shrink: 0; }
.detalle-lugar__favorito-form-rapida { display: contents; }
.detalle-lugar__accion-rapida {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  background: var(--color-blanco); box-shadow: var(--sombra-card);
  color: var(--color-texto-suave); cursor: pointer;
}
.detalle-lugar__accion-rapida--whatsapp { background: #25d366; }
.detalle-lugar__accion-rapida--favorito-activo { color: #e0245e; }

/* Layout de dos columnas: contenido principal + sidebar de acción */
.detalle-lugar__layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }

.ficha-seccion {
  background: var(--color-blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
  padding: 24px 28px;
  margin-bottom: 20px;
}
.ficha-seccion h2 { margin-top: 0; }
.ficha-seccion:last-child { margin-bottom: 0; }

.detalle-lugar__descripcion { line-height: 1.7; }
.detalle-lugar__descripcion ul, .detalle-lugar__descripcion ol { margin: 0 0 12px 22px; }
.detalle-lugar__descripcion p { margin: 0 0 12px; }
.detalle-lugar__descripcion p:last-child { margin-bottom: 0; }

.detalle-lugar__info { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }

.precios-temporada-recomendada { margin: 0 0 16px; font-size: 0.95rem; color: var(--color-texto-suave); }

.precios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 16px; }
.precios-grid__item { border-radius: var(--radio); padding: 18px 20px; text-align: center; background: var(--color-arena); }
.precios-grid__item--alta { background: linear-gradient(135deg, var(--color-fuego), #c2611f); color: var(--color-blanco); }
.precios-grid__etiqueta { display: block; font-size: 0.85rem; font-weight: 600; opacity: 0.85; margin-bottom: 6px; }
.precios-grid__valor { display: block; font-size: 1.3rem; font-weight: 700; }
.detalle-lugar__info li { background: var(--color-arena); padding: 12px 16px; border-radius: 8px; }

/* Sidebar de acción (sticky) */
.detalle-lugar__sidebar {
  background: var(--color-blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
  padding: 24px;
  position: sticky;
  top: 90px; /* deja espacio para el .site-header, que es sticky y queda encima (z-index: 10) */
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.detalle-lugar__sidebar .btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
}
.detalle-lugar__sidebar .alerta { margin-bottom: 0; font-size: 0.9rem; }

.detalle-lugar__acciones-secundarias { display: flex; flex-direction: column; gap: 14px; }
.detalle-lugar__acciones-secundarias > a,
.detalle-lugar__acciones-secundarias > form { flex: 1; }

/* Texto largo por defecto (desktop); el texto corto solo se usa en mobile (ver media query) */
.texto-corto { display: none; }
.sidebar-divisor { border: none; border-top: 1px solid #eee; margin: 0; }
.sidebar-contactos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sidebar-contactos a { color: var(--color-texto); font-weight: 500; }
.sidebar-contactos a:hover { color: var(--color-musgo); }

/* En desktop, los datos de contacto (teléfono/redes) se ven en el sidebar de acciones
   (debajo del botón de favoritos); la copia dentro de "Contactar este lugar" queda
   oculta. En mobile es al revés (ver el media query de detalle de lugar). */
.sidebar-contactos--ficha, .sidebar-divisor--ficha, .alerta--ficha { display: none; }
.sidebar-contactos--ficha { margin-bottom: 16px; }
.sidebar-divisor--ficha { margin-bottom: 20px; }
.alerta--ficha { margin-bottom: 16px; }

/* Ficha técnica (detalle público) */
.ficha-badges {
  list-style: none; padding: 0; margin: 12px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.ficha-badges li {
  background: var(--color-arena); padding: 8px 14px; border-radius: 999px;
  font-size: 0.9rem;
}

.mapa-embed { border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-card); }
.mapa-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

@media (max-width: 480px) {
  .mapa-embed iframe { aspect-ratio: 4 / 3; }
}

.campo-mapa-link__fila { display: flex; gap: 10px; }
.campo-mapa-link__fila input { flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.95rem; }
.campo-mapa-link__ayuda { font-size: 0.8rem; color: var(--color-texto-suave); margin: 6px 0 0; }
.campo-mapa-link__o { font-size: 0.82rem; color: var(--color-texto-suave); text-align: center; margin: 14px 0 8px; }

@media (max-width: 600px) {
  .campo-mapa-link__fila { flex-direction: column; }
}

/* Footer */
.site-footer {
  background: var(--color-bosque-oscuro);
  color: rgba(255, 255, 255, 0.75);
  padding: 20px 0;
  margin-top: 40px;
}

.site-footer__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.site-footer__copy { margin: 0; font-size: 0.85rem; }

.site-footer__links {
  margin: 6px 0 0;
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 10px;
}
.site-footer__links a { color: rgba(255, 255, 255, 0.65); }
.site-footer__links a:hover { color: var(--color-blanco); }
.site-footer__separador { color: rgba(255, 255, 255, 0.3); }

/* Admin */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar { width: 220px; flex-shrink: 0; background: var(--color-bosque-oscuro); color: var(--color-blanco); padding: 24px 0; }
.admin-sidebar a { display: block; padding: 12px 24px; color: rgba(255,255,255,0.8); }
.admin-sidebar a:hover, .admin-sidebar a.active { background: var(--color-bosque); color: var(--color-blanco); }
.admin-sidebar__titulo {
  padding: 0 24px 20px; font-weight: 700; font-size: 1.2rem;
  display: flex; align-items: center; gap: 8px;
}
.admin-sidebar__icono { width: 22px; height: 22px; }
.admin-sidebar__usuario { padding: 0 24px 16px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); }
.admin-content { flex: 1; padding: 32px; }

.admin-tabla { width: 100%; border-collapse: collapse; background: var(--color-blanco); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-card); }
.admin-tabla th, .admin-tabla td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #eee; }
.admin-tabla th { background: var(--color-arena); }

.form-admin { background: var(--color-blanco); padding: 28px; border-radius: var(--radio); box-shadow: var(--sombra-card); width: 100%; }
.form-admin label { display: block; margin-bottom: 0; font-weight: 600; font-size: 0.85rem; color: var(--color-texto-suave); }
.form-admin input, .form-admin select, .form-admin textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid #ddd; border-radius: 8px; font-size: 0.95rem; font-weight: 400; color: var(--color-texto);
}
.form-admin textarea { resize: vertical; min-height: 100px; }

.editor-texto { margin-top: 6px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.editor-texto__toolbar { display: flex; gap: 4px; padding: 6px; background: var(--color-arena); border-bottom: 1px solid #ddd; }
.editor-texto__toolbar button {
  width: 30px; height: 30px; border: 1px solid transparent; border-radius: 6px;
  background: var(--color-blanco); cursor: pointer; font-weight: 700; font-size: 0.9rem; color: var(--color-texto);
}
.editor-texto__toolbar button:hover { border-color: #ccc; }
.editor-texto__area { min-height: 140px; padding: 12px; font-size: 0.95rem; font-weight: 400; line-height: 1.5; outline: none; }
.editor-texto__area ul, .editor-texto__area ol { margin: 0 0 0 22px; }

.lista-dinamica { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.lista-dinamica__fila {
  display: flex; align-items: center; gap: 8px; background: var(--color-blanco);
  border-radius: 8px; transition: box-shadow 0.15s ease;
}
.lista-dinamica__fila input { flex: 1; margin-top: 0; }
.lista-dinamica__fila--arrastrando { box-shadow: var(--sombra-card); opacity: 0.85; }
.lista-dinamica__handle {
  flex-shrink: 0; width: 24px; text-align: center; cursor: grab;
  color: var(--color-texto-suave); font-size: 1.1rem; touch-action: none; user-select: none;
}
.lista-dinamica__quitar {
  width: 38px; flex-shrink: 0; border: 1px solid #ddd; border-radius: 8px;
  background: var(--color-blanco); cursor: pointer; color: #a31515; font-weight: 700;
}
.lista-dinamica__quitar:hover { background: #fdecea; }

/* Tabla de banners arrastrable */
.banners-tabla__asa {
  width: 28px; text-align: center; cursor: grab;
  color: var(--color-texto-suave); font-size: 1.1rem; touch-action: none; user-select: none;
}
.banners-tabla__fila--arrastrando { background: var(--color-arena) !important; opacity: 0.85; }
.lista-dinamica__agregar { align-self: flex-start; margin-top: 4px; }

.form-admin fieldset {
  border: 1px solid #e6e0d4; border-radius: var(--radio); padding: 20px 24px; margin: 0 0 20px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px 20px; align-items: start;
}
.form-admin legend {
  font-weight: 700; color: var(--color-bosque-oscuro); padding: 0 8px; font-size: 1.05rem;
  grid-column: 1 / -1;
}
.form-admin .campo-ancho { grid-column: 1 / -1; }
.form-admin__etiqueta { display: block; font-weight: 600; font-size: 0.85rem; color: var(--color-texto-suave); margin-bottom: 8px; }
.campo-ancho .campo-check { display: inline-flex; margin-right: 16px; }

.grid-checkboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 16px; }
.grid-checkboxes .campo-check { margin-right: 0; }

.form-admin label.campo-check {
  display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--color-texto);
  align-self: center;
}
.form-admin label.campo-check input[type="checkbox"] {
  display: inline-block; width: auto; margin: 0;
}

.galeria-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 16px; }
.galeria-admin__item { background: var(--color-arena); border-radius: 8px; padding: 8px; text-align: center; }
.galeria-admin__item img { width: 100%; height: 110px; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 8px; }

.imagen-preview-admin { max-width: 240px; border-radius: 8px; display: block; margin-bottom: 10px; }
.imagen-preview-admin--chica { max-width: 100px; }
.logo-comercio-tabla { width: 40px; height: 40px; object-fit: contain; display: block; }

.agregar-foto { display: flex; gap: 10px; }
.agregar-foto input { flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; }

.login-box { max-width: 380px; margin: 80px auto; background: var(--color-blanco); padding: 32px; border-radius: var(--radio); box-shadow: var(--sombra-card); }

/* Formulario de contacto y de reseña: viven dentro de un .ficha-seccion,
   así que no necesitan su propio fondo/sombra/ancho máximo. */
.form-contacto { width: 100%; margin-bottom: 0; }
.form-contacto label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 0.9rem; }
.form-contacto input, .form-contacto textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid #ddd; border-radius: 8px; font-size: 0.95rem; font-weight: 400;
}
.form-contacto textarea { resize: vertical; min-height: 90px; }

.campo-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.caja-login-requerido {
  background: var(--color-arena); border: 1px solid #e6e0d4; border-radius: var(--radio);
  padding: 20px 24px; width: 100%; margin-bottom: 0;
}
.caja-login-requerido p { margin: 0 0 14px; font-weight: 600; }
.caja-login-requerido__botones { display: flex; gap: 10px; flex-wrap: wrap; }

/* Reseñas y calificaciones */
.estrellas-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.estrellas-input input { position: absolute; opacity: 0; pointer-events: none; }
.estrellas-input label { font-size: 1.8rem; color: #ddd; cursor: pointer; line-height: 1; }
.estrellas-input input:checked ~ label,
.estrellas-input label:hover,
.estrellas-input label:hover ~ label { color: var(--color-fuego); }

.calificacion-resumen { font-size: 1.05rem; margin: 8px 0 16px; color: var(--color-texto-suave); }
.calificacion-resumen__estrellas { color: var(--color-fuego); letter-spacing: 1px; }

.card-lugar__calificacion { font-size: 0.85rem; color: var(--color-texto-suave); margin: 0 0 8px; }
.card-lugar__calificacion .estrellas { color: var(--color-fuego); letter-spacing: 1px; }

.resenas-lista { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.resena { background: var(--color-blanco); border-radius: var(--radio); box-shadow: var(--sombra-card); padding: 16px 20px; }
.resena__cabecera { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.resena__usuario { font-weight: 700; }
.resena__estrellas { color: var(--color-fuego); letter-spacing: 1px; }
.resena__fecha { color: var(--color-texto-suave); font-size: 0.82rem; }
.resena__comentario { margin: 0; line-height: 1.5; }
.resena__visita { color: var(--color-texto-suave); font-size: 0.82rem; margin-top: 6px; }

.btn--whatsapp {
  display: inline-flex; align-items: center; gap: 8px;
  background: #25d366; color: var(--color-blanco);
}
.btn--whatsapp:hover { background: #1ebe5d; }

.alerta { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.alerta--error { background: #fdecea; color: #a31515; }
.alerta--exito { background: #e6f4ea; color: #1f6d3b; }
.alerta--info { background: #eaf1fb; color: #1d4e89; }

.acciones-tabla a { margin-right: 10px; font-weight: 600; }
.acciones-tabla form { display: inline; }
.eliminar {
  background: none; border: none; cursor: pointer; padding: 0;
  font-weight: 600; font-size: 0.95rem; color: #a31515; font-family: inherit;
}

.badge-estado { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.badge-estado--pendiente { background: #fff3cd; color: #8a6500; }
.badge-estado--activo { background: #e6f4ea; color: #1f6d3b; }
.badge-estado--cerrado { background: #eee; color: #666; }
.badge-estado--rechazado { background: #fdecea; color: #a31515; }
.badge-estado--inactivo { background: #eee; color: #999; }

.aviso-pendientes {
  background: #fff3cd; color: #8a6500; padding: 12px 18px; border-radius: var(--radio);
  margin-bottom: 20px; font-weight: 600; display: block;
}

/* =========================================================
   Responsive
   ========================================================= */

/* Navegación pública: menú hamburguesa por debajo de 900px */
@media (max-width: 900px) {
  .nav-toggle { display: block; }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--color-bosque);
    padding: 8px 20px 16px;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
  }

  .main-nav.main-nav--abierto { display: flex; }

  .main-nav a,
  .main-nav .nav-proximamente,
  .main-nav .nav-cta {
    padding: 12px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .main-nav a.active { border-bottom: 1px solid var(--color-fuego); }
  .main-nav .nav-cta { text-align: center; margin-top: 6px; }

  /* Detalle de lugar en mobile: una sola columna. El sidebar completo (WhatsApp,
     Mensaje, Favorito apilados) se oculta — cada acción tiene su propia versión
     compacta para mobile: el favorito es un ícono sobre la galería, WhatsApp/
     Mensaje son íconos chicos junto a la ubicación, y el teléfono/redes se
     muestran dentro de "Contactar este lugar" (después de Ubicación). */
  .detalle-lugar__layout { grid-template-columns: 1fr; }
  .detalle-lugar__sidebar { display: none; }
  .sidebar-contactos--ficha { display: flex; }
  .sidebar-divisor--ficha { display: block; }
  .alerta--ficha { display: block; }
  .galeria-slider__flecha { width: 32px; height: 32px; font-size: 1.1rem; }

  .detalle-lugar__acciones-rapidas { display: flex; }
}

/* Ajustes generales de espaciado e hero en pantallas medianas/chicas */
@media (max-width: 768px) {
  /* En /noticias/ el buscador y los tabs de categoría se ocultan en mobile
     (a diferencia de /lugares/, que los colapsa: aquí se pidió quitarlos). */
  .noticias-filtros { display: none; }

  /* "Mis lugares" del dueño: cards en vez de tabla con scroll horizontal. */
  .lugares-dueno--tabla { display: none; }
  .lugares-dueno--cards { display: block; }

  .hero__inner { padding: 48px 20px; }
  .hero h1 { font-size: 1.8rem; }
  .hero p { font-size: 1rem; }
  .hero__buscador { flex-direction: column; background: none; box-shadow: none; padding: 0; gap: 10px; }
  .hero__buscador input {
    background: var(--color-blanco); border-radius: 999px; box-shadow: var(--sombra-card); padding: 12px 18px;
  }
  .hero__buscador .btn { width: 100%; text-align: center; }

  .filtros-lugares { flex-direction: column; align-items: stretch; }
  .filtros-lugares input[type="text"] { min-width: 0; }
  .filtros-lugares.filtros-lugares--tabs { flex-direction: row; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .filtros-lugares.filtros-lugares--tabs .btn { padding: 8px 14px; font-size: 0.85rem; }

  /* Panel de filtros de /lugares/ colapsable: solo el buscador + el botón
     "Filtros" se ven de entrada, el resto se despliega al tocarlo (ver
     assets/js/filtros-colapsables.js). En desktop todo sigue visible siempre. */
  .filtros-lugares__fila-principal { display: flex; gap: 10px; width: 100%; }
  .filtros-lugares__fila-principal input[type="text"] { flex: 1; min-width: 0; }

  .filtros-lugares__toggle {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
    padding: 0 14px; border: 1px solid #ddd; border-radius: 8px;
    background: var(--color-blanco); font-weight: 600; font-size: 0.9rem;
    font-family: inherit; color: var(--color-texto); cursor: pointer;
  }
  .filtros-lugares__toggle--activo { border-color: var(--color-fuego); color: var(--color-fuego); }
  .filtros-lugares__toggle-icono { display: inline-block; transition: transform 0.2s ease; }
  .filtros-lugares__toggle--activo .filtros-lugares__toggle-icono { transform: rotate(180deg); }

  .filtros-lugares__avanzados {
    display: none; flex-direction: column; gap: 12px; width: 100%; margin-top: 12px;
  }
  .filtros-lugares__avanzados--abierto { display: flex; }

  .filtros-lugares > .btn { width: 100%; margin-top: 12px; }

  .agregar-foto { flex-direction: column; align-items: stretch; }

  /* Panel admin: la barra lateral pasa a ser una franja superior */
  .admin-layout { flex-direction: column; min-height: 0; }
  .admin-sidebar {
    width: 100%; display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px 6px; padding: 14px 16px;
  }
  .admin-sidebar__titulo, .admin-sidebar__usuario { padding: 0; margin-right: 10px; }
  .admin-sidebar__usuario { width: 100%; margin: -6px 0 4px; }
  .admin-sidebar a { display: inline-block; padding: 8px 12px; border-radius: 8px; }
  .admin-content { padding: 18px; }

  .form-admin { padding: 20px; }
  .form-admin fieldset { grid-template-columns: 1fr; padding: 16px 18px; }

  .login-box { margin: 40px auto; width: calc(100% - 32px); }
}

/* Pantallas chicas (teléfonos) */
@media (max-width: 480px) {
  .selector-rol { grid-template-columns: 1fr; }
  .form-cuenta { padding: 24px 20px; }

  .card-lugar__imagen { height: 140px; }

  .encabezado-lista { align-items: flex-start; }
  .encabezado-lista .btn { width: 100%; text-align: center; }
}

/* Tarjeta de QR imprimible (dueno/qr.php) */
.tarjeta-qr {
  max-width: 480px;
  margin: 24px auto;
  background: var(--color-blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
  padding: 40px 32px;
  text-align: center;
  border: 3px solid var(--color-bosque);
}
.tarjeta-qr__marca { font-size: 1.3rem; font-weight: 700; color: var(--color-bosque-oscuro); margin-bottom: 8px; }
.tarjeta-qr__lugar { margin: 0 0 16px; font-size: 1.5rem; }
.tarjeta-qr__instruccion { color: var(--color-texto-suave); margin-bottom: 24px; font-size: 1.05rem; line-height: 1.5; }
.tarjeta-qr__imagen { width: 280px; height: 280px; margin: 0 auto; display: block; }
.tarjeta-qr__pie { margin-top: 24px; font-size: 0.9rem; color: var(--color-texto-suave); }

.seccion-qr { text-align: center; }
.seccion-qr .btn { margin-top: 20px; }
.tarjeta-qr__nota { margin: 14px 0 0; font-size: 0.85rem; color: var(--color-texto-suave); }

@media print {
  .no-imprimir, .site-header, .site-footer, .nav-toggle { display: none !important; }
  .tarjeta-qr { box-shadow: none; border: 2px solid #000; margin: 0 auto; }
  body { background: #fff; }
}

/* Estadísticas de dueño */
.grid-estadisticas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin: 20px 0 32px;
}
.card-estadistica {
  background: var(--color-blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card-estadistica--destacada { background: var(--color-arena); border: 2px solid var(--color-fuego); }
.card-estadistica__numero { font-size: 1.8rem; font-weight: 700; color: var(--color-bosque-oscuro); font-family: 'Outfit', sans-serif; }
.card-estadistica__etiqueta { font-size: 0.85rem; color: var(--color-texto-suave); }

.grafico-barras {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 140px;
  background: var(--color-blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
  padding: 16px;
}
.grafico-barras__columna { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.grafico-barras__barra { width: 100%; background: var(--color-musgo); border-radius: 3px 3px 0 0; min-height: 2px; }
.grafico-barras__rango { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--color-texto-suave); margin-top: 6px; }