@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  /* Neutros cálidos */
  --kinari: #f3efe7;
  --washi: #fbf9f4;
  --card-bg: #fbf9f4;
  --line: #e4ddd0;
  --border: #e4ddd0;
  --sumi: #2a2621;
  --text: #2a2621;
  --text-muted: #6f685c;

  /* Índigo (ai-zome) — acento único */
  --ai: #2c4a6e;
  --ai-dark: #1f3550;
  --ai-tint: #e2e7ee;

  /* Mizu — subtono afín, solo confirmaciones */
  --mizu: #3f6e78;
  --mizu-dark: #305a63;
  --mizu-tint: #e0eaea;

  /* Alerta — avisos, caducidades, acciones destructivas */
  --alerta: #cf4038;
  --alerta-dark: #a8332c;
  --alerta-tint: #fbe3e1;

  --error-bg: var(--alerta-tint);
  --error-text: var(--alerta-dark);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--kinari);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* --- Brand lockup --- */
.auth-logo {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 auto 20px;
}

/* --- Onboarding --- */
.onboarding-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--kinari);
}

.onboarding-top {
  display: flex;
  justify-content: flex-end;
  padding: 20px 24px 0;
}

.onboarding-slides {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
}

.onboarding-slide {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 380px;
  animation: fade-in 0.25s ease;
}

.onboarding-slide.active { display: flex; }

.onboarding-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--ai-tint);
  color: var(--ai);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.onboarding-icon svg { width: 38px; height: 38px; }

.onboarding-logo {
  width: 220px;
  max-width: 70vw;
  height: auto;
  margin-bottom: 28px;
}

.onboarding-slide h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.7rem;
  margin: 0 0 14px;
}

.onboarding-slide p {
  color: var(--text-muted);
  font-size: 0.98rem;
  margin: 0;
  max-width: 32ch;
}

.onboarding-bottom {
  padding: 0 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.onboarding-dots { display: flex; gap: 8px; }

.dot-indicador {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.15s ease, width 0.15s ease;
}

.dot-indicador.active { background: var(--ai); width: 20px; border-radius: 4px; }

.onboarding-bottom button {
  width: 100%;
  max-width: 320px;
  background: var(--sumi);
  color: #fff;
}

/* --- Auth pages --- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--kinari);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--washi);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 40px 28px;
  box-shadow: 0 16px 40px rgba(42, 38, 33, 0.07);
}

.auth-subtitle {
  margin: 0 0 24px;
  color: var(--text-muted);
  font-size: 0.95rem;
  text-align: center;
}

.auth-switch {
  margin-top: 20px;
  font-size: 0.9rem;
  text-align: center;
  color: var(--text-muted);
}

.auth-legal {
  margin-top: 10px;
  font-size: 0.75rem;
  text-align: center;
  color: var(--text-muted);
}

.auth-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
  margin: 14px 0;
}
.auth-checkbox input[type="checkbox"] { width: auto; margin-top: 2px; }

.checkbox-inline {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 4px;
}
.checkbox-inline input[type="checkbox"] { width: auto; margin-top: 3px; }

.auth-switch a { color: var(--ai); font-weight: 700; text-decoration: none; }

/* --- Forms --- */
form label {
  display: block;
  margin-bottom: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

input, select, textarea {
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--text);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ai);
  box-shadow: 0 0 0 3px var(--ai-tint);
}

.campo-password {
  position: relative;
  margin-top: 6px;
}

.campo-password input {
  margin-top: 0;
  padding-right: 44px;
}

.btn-mostrar-password {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-mostrar-password:hover { color: var(--ai); opacity: 1; }
.btn-mostrar-password svg { width: 20px; height: 20px; }

button {
  cursor: pointer;
  border: none;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  padding: 13px 18px;
  font-family: inherit;
  white-space: nowrap;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

button:hover { opacity: 0.9; }
button:active { transform: scale(0.98); }

/* Botón principal de cuenta (tinta sumi) */
button[type="submit"] {
  width: 100%;
  background: var(--sumi);
  color: #fff;
}

/* Botón de confirmar / añadir (mizu) */
button.btn-confirm {
  background: var(--mizu);
  color: #fff;
  width: 100%;
}

button.btn-confirm:hover { background: var(--mizu-dark); }

/* button.btn-secondary por el mismo motivo que btn-eliminar/btn-canjear:
   sin el prefijo, salía siempre negro (el de button[type="submit"]) en vez
   del contorno blanco que define aquí — pasaba con "Buscar" y con
   "Desactivar/Reactivar" en comerciales.php. */
button.btn-secondary {
  background: #fff;
  border: 1px solid var(--sumi);
  color: var(--sumi);
  margin: 12px 0 20px;
  border-radius: 999px;
}
button.btn-secondary:hover { background: var(--kinari); }

.alert {
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.alert-error { background: var(--error-bg); color: var(--error-text); }
.alert-info { background: var(--ai-tint); color: var(--ai); }

/* --- App shell --- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--washi);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar .brand-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--sumi);
  font-size: 1rem;
  text-decoration: none;
}

.topbar-logo {
  height: 30px;
  width: auto;
  display: block;
}

.brand-suffix {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-left: 1px solid var(--line);
  padding-left: 8px;
}

.topbar nav { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; }

/* Menú del área de admin: mobile-first — por defecto (móvil/tablet) el
   hamburguesa es lo único visible y #topbar-nav se pliega como desplegable;
   a partir de 700px el hamburguesa desaparece y el menú vuelve a ser una
   fila normal siempre visible. */
.topbar-hamburguesa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--sumi);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.topbar-hamburguesa svg { width: 24px; height: 24px; }

#topbar-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--washi);
  border-bottom: 1px solid var(--line);
  flex-direction: column;
  align-items: stretch;
  padding: 4px 20px 12px;
  gap: 0;
  box-shadow: 0 10px 18px rgba(42, 38, 33, 0.08);
}

#topbar-nav.abierto { display: flex; }

#topbar-nav a {
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
#topbar-nav a:last-child { border-bottom: none; }

/* !important en las tres propiedades porque .link-muted se declara después
   en este mismo fichero con la misma especificidad (una clase): sin
   !important, .link-muted ganaba el empate y "ganaba" el peso de fuente,
   dejando el enlace activo con el mismo grosor que el resto (solo cambiaba
   de color, apenas perceptible) — bug real detectado en pantalla, no un
   problema de caché. */
.link-activo {
  color: var(--ai) !important;
  font-weight: 700 !important;
  position: relative;
}
.link-activo::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -1px;
  height: 2px;
  background: var(--ai);
}
@media (min-width: 700px) {
  .link-activo::after { left: 0; right: 0; }
}

@media (min-width: 700px) {
  .topbar-hamburguesa { display: none; }

  #topbar-nav {
    display: flex !important;
    position: static;
    flex-direction: row;
    align-items: center;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    gap: 14px;
    width: auto;
  }
  #topbar-nav a { padding: 0; border: none; }
}

.millas-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ai-tint);
  border: 1px solid transparent;
  color: var(--ai);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 5px 12px;
  border-radius: 999px;
}

.millas-icono { display: inline-flex; width: 14px; height: 14px; }
.millas-icono svg { width: 100%; height: 100%; }

.user-greeting { color: var(--text-muted); }

.link-muted { color: var(--text-muted); text-decoration: none; font-weight: 600; }
.link-muted:hover { color: var(--sumi); }

.dashboard {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 100px;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade-in 0.2s ease; }

.lugares-subpanel { display: none; }
.lugares-subpanel.active { display: block; animation: fade-in 0.2s ease; }

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

.panel-header h2 {
  margin: 0 0 4px;
  font-size: 1.4rem;
  color: var(--sumi);
}

.panel-header {
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 12px;
}

.panel-header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: var(--ai);
  border-radius: 2px;
}

.panel-intro {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: -8px 0 18px;
}

.empty-state {
  background: var(--washi);
  border: 1px dashed var(--line);
  border-radius: 18px;
  padding: 32px 22px;
  text-align: center;
  color: var(--text-muted);
}

.empty-state > p:first-child {
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 700;
}

.inline-form {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.inline-form input { flex: 1; min-width: 180px; margin-top: 0; }
.inline-form button { white-space: nowrap; width: auto; }

/* Mismo lenguaje que .alert-info (fondo --ai-tint, texto --ai): es un
   aviso informativo, no una tarjeta de contenido neutra como .empty-state-
   opcion. El CTA reutiliza la forma píldora de .btn-como-llegar en vez de
   .btn-secondary — ese último solo tiene estilo para <button>, así que en
   un <a> se quedaba sin ninguna regla aplicada (por eso salía como un
   enlace azul subrayado suelto, sin forma de botón). */
/* Posición relativa para anclar la cruz de cerrar en la esquina, separada
   del botón de acción — pegarlos uno al lado del otro (como estaba antes)
   invita al toque accidental entre "leer guía" y "descartar aviso", dos
   acciones con consecuencias muy distintas. */
.banner-guia-llegada {
  position: relative;
  background: var(--ai-tint);
  border-radius: 14px;
  padding: 16px 40px 16px 18px;
  margin-bottom: 16px;
}
.banner-guia-llegada-texto {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--ai-dark);
  line-height: 1.4;
  margin-bottom: 12px;
}
.banner-guia-llegada-icono { font-size: 1.2rem; flex: none; line-height: 1.3; }
.banner-guia-llegada-cta {
  display: inline-block;
  background: var(--ai);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.banner-guia-llegada-cta:hover { background: var(--ai-dark); }
.banner-guia-llegada-cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ai);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.banner-guia-llegada-cerrar:hover { background: rgba(44, 74, 110, 0.12); }

.empty-state-opcion {
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 18px;
}
.empty-state-opcion h4 { margin: 0 0 4px; color: var(--sumi); font-size: 0.95rem; }
.empty-state-opcion .empty-hint { margin: 0; }
.empty-state-opcion .btn-secondary { margin-top: 12px; margin-bottom: 0; }

.select-viaje-label {
  display: inline-block;
  margin-bottom: 0;
  margin-right: 10px;
}

.viaje-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
/* .btn-secondary trae un margen vertical asimétrico (12px arriba, 20px
   abajo) pensado para cuando va suelto en una columna. Aquí el espaciado
   ya lo da el gap del contenedor, así que ese margen solo desalineaba
   "Eliminar viaje" (que no lo tiene) respecto a sus vecinos. */
.viaje-acciones button { margin: 0; }

.btn-eliminar-viaje {
  background: #fff;
  color: var(--alerta);
  border: 1px solid var(--alerta);
  border-radius: 999px;
  width: auto;
}
.btn-eliminar-viaje:hover { background: var(--error-bg); }

.card-form {
  background: var(--washi);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  margin-top: 20px;
}

.card-form h3 { margin: 0 0 16px; font-size: 1.05rem; color: var(--sumi); }

.form-row { display: flex; gap: 12px; }
.form-row label { flex: 1; }

/* --- Selector de categoría: chips compactos --- */
.chip-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 18px;
}

.chip-opcion { position: relative; }

.chip-opcion input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px 9px 12px;
  border-radius: 999px;
  background: var(--kinari);
  color: var(--text);
  font-weight: 600;
  font-size: 0.86rem;
  border: 1.5px solid var(--line);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.08s ease;
  white-space: nowrap;
}

.chip:active { transform: scale(0.97); }

.chip-icono {
  display: inline-flex;
  width: 17px;
  height: 17px;
  color: var(--text-muted);
  flex-shrink: 0;
  opacity: 0.7;
}

.chip-icono svg { width: 100%; height: 100%; }

.chip-check {
  display: inline-flex;
  width: 14px;
  height: 14px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.12s ease, transform 0.12s ease;
  flex-shrink: 0;
}

.chip-check svg { width: 100%; height: 100%; }

.chip-opcion input:checked + .chip {
  background: var(--ai-tint);
  border-color: var(--ai);
  color: var(--ai);
}

.chip-opcion input:checked + .chip .chip-icono { color: var(--ai); opacity: 0.9; }
.chip-opcion input:checked + .chip .chip-check { opacity: 1; transform: scale(1); }

.chip-opcion input:focus-visible + .chip {
  outline: 2px solid var(--ai);
  outline-offset: 2px;
}

.mapa-caja {
  height: 220px;
  border-radius: 16px;
  border: 1px solid var(--line);
  margin-top: 16px;
  overflow: hidden;
  background: var(--washi);
  z-index: 1;
}

.mapa-caja-grande { height: 320px; scroll-margin-top: 16px; }

.mapa-leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mapa-leyenda-punto {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-right: 3px;
  vertical-align: middle;
}

.mapa-punto-premium { background: #e0a72e; border: 2px solid #8a6a1f; }
.mapa-punto-destacado { background: var(--ai); border: 2px solid var(--ai-dark); }
.mapa-punto-basico { background: #b8b2a3; border: 2px solid #8c8577; }

/* --- Galería de fotos: 1 principal a ancho completo + miniaturas debajo,
   todas ampliables con el lightbox compartido (assets/lightbox.js). --- */
.galeria-fotos { margin-top: 10px; }

.galeria-principal {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--kinari);
  cursor: zoom-in;
  border: 1px solid var(--line);
}

.galeria-principal img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Foto de respaldo por categoría cuando el lugar no tiene fotos propias
   todavía — cursor normal (no hay galería que ampliar) y posición relativa
   para anclar el crédito de la foto en la esquina. */
.galeria-generica { position: relative; cursor: default; }

.galeria-miniaturas {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  overflow-x: auto;
}

.galeria-miniatura {
  position: relative;
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: zoom-in;
  background: var(--kinari);
}

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

.galeria-miniatura-mas {
  position: absolute;
  inset: 0;
  background: rgba(42, 38, 33, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.galeria-vacia {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  background: var(--kinari);
}

/* Gestión de fotos (panel de negocio / admin): miniaturas editables con
   botón de borrar y de "hacer principal". */
.gestion-fotos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.gestion-foto {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--line);
}

.gestion-foto.es-principal { border-color: var(--ai); }

.gestion-foto img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }

.gestion-foto-etiqueta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ai);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  text-align: center;
  padding: 2px 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.gestion-foto-acciones {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  gap: 2px;
}

.gestion-foto-boton {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--sumi);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gestion-foto-boton:hover { background: #fff; }

.gestion-foto-subir {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  border: 1.5px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-align: center;
  cursor: pointer;
}
.gestion-foto-subir:hover { border-color: var(--ai); color: var(--ai); }

.negocio-patrocinio-caja {
  margin-top: 8px;
  padding: 12px;
  border-radius: 12px;
  background: var(--kinari);
  border: 1px solid var(--line);
}

.negocio-patrocinio-caja .btn-confirm { margin-top: 8px; }

.negocio-patrocinio-activo {
  background: var(--ai-tint);
  border-color: var(--ai);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.negocio-patrocinio-pendiente {
  background: #fff8e6;
  border-color: #d4a017;
  font-size: 0.85rem;
  color: var(--sumi);
}

.negocio-form-solicitud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.negocio-form-solicitud select { width: auto; margin-top: 4px; }
.negocio-form-solicitud input[type="text"] { flex: 1; min-width: 160px; margin-top: 0; }

.admin-solicitudes-caja {
  background: #fff8e6;
  border: 1px solid #d4a017;
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 16px;
}

.admin-solicitudes-titulo {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--sumi);
  font-size: 0.92rem;
}

.admin-solicitud-fila {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px dashed #e0c264;
  font-size: 0.85rem;
}
.admin-solicitud-fila:first-of-type { border-top: none; }
.admin-solicitud-fila form { flex-shrink: 0; }

.resena-resumen-btn {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold, #b8902f);
  cursor: pointer;
  text-align: left;
}
.resena-resumen-btn:hover { text-decoration: underline; }

.resena-panel {
  margin-top: 8px;
  padding: 10px;
  border-radius: 10px;
  background: var(--kinari);
  border: 1px solid var(--line);
}

.resena-item { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 0.85rem; }
.resena-item:last-child { border-bottom: none; }
.resena-estrellas { color: var(--gold, #b8902f); letter-spacing: 1px; }

.resena-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.resena-form select { width: auto; margin-top: 4px; }
.resena-form input[type="text"] { flex: 1; min-width: 140px; margin-top: 0; }

.admin-resena-fila {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px dashed var(--line);
  font-size: 0.85rem;
}
.admin-resena-fila:first-of-type { border-top: none; }
.admin-resena-fila form { flex-shrink: 0; }

/* Lightbox */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.92);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.lightbox-overlay.abierto { display: flex; }

/* Modal genérico de "pedir un valor" — sustituye a prompt() nativo del
   navegador (usado antes para "Nombre del nuevo viaje" y "¿Qué día?"), que
   rompía por completo el diseño de la app con un diálogo gris sin ningún
   estilo propio, distinto en cada navegador/dispositivo. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay[hidden] { display: none; }
.modal-caja {
  background: var(--washi);
  border-radius: 16px;
  padding: 22px 24px;
  width: 100%;
  max-width: 360px;
}
.modal-caja h3 { margin: 0 0 14px; color: var(--sumi); }
.modal-caja label { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 6px; display: block; }
.modal-acciones { display: flex; gap: 10px; margin-top: 16px; }
.modal-acciones button { width: auto; flex: 1; margin: 0; }

.lightbox-imagen {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
}

.lightbox-cerrar {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  width: 44px;
  height: 44px;
}

.lightbox-anterior,
.lightbox-siguiente {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
}
.lightbox-anterior:hover,
.lightbox-siguiente:hover { background: rgba(255, 255, 255, 0.3); }
.lightbox-anterior { left: 12px; }
.lightbox-siguiente { right: 12px; }

.lightbox-contador {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 12px;
  border-radius: 999px;
}

html { scroll-behavior: smooth; }

.mapa-caja:empty::before {
  content: 'Aún no hay lugares con ubicación para mostrar en el mapa.';
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 20px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.mapa-caja .leaflet-popup-content { font-family: 'Manrope', sans-serif; font-size: 0.85rem; }
.mapa-caja .leaflet-popup-content strong { display: block; margin-bottom: 2px; }

.marcador-numerado { background: none; border: none; }
.marcador-numerado span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

.dia-block {
  margin-top: 22px;
}

.dia-block h4 {
  margin: 0 0 10px;
  color: var(--sumi);
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dia-block h4::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ai);
}

.item-card, .lugar-card {
  background: var(--washi);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ai);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.item-info strong { display: block; font-size: 0.98rem; }
.item-info .meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.item-info .notas { font-size: 0.85rem; margin-top: 6px; color: var(--text); }

.categoria-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-top: 8px;
  background: var(--ai-tint);
  color: var(--ai);
}

.lugar-acciones { margin-top: 10px; }

.btn-estoy-aqui {
  display: inline-block;
  background: var(--ai);
  color: #fff;
  font-size: 0.78rem;
  padding: 8px 14px;
  border-radius: 999px;
  width: auto;
  text-decoration: none;
}

.btn-estoy-aqui:disabled {
  background: var(--mizu);
  opacity: 1;
  cursor: default;
}

.tarjeta-acciones {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  flex-shrink: 0;
}

.btn-editar {
  background: none;
  color: var(--ai);
  font-size: 0.8rem;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  width: auto;
}
.btn-editar:hover { background: var(--ai-tint); }

/* button.btn-eliminar (no solo .btn-eliminar): sin el prefijo "button",
   button[type="submit"] le gana la especificidad y el botón se queda negro
   y a ancho completo (ignora width/color/padding propios) — pasaba en las
   tarjetas de admin, donde "Quitar destacado" salía como una barra negra
   idéntica a "Eliminar lugar" pese a ser una acción reversible y mucho
   menos grave. */
button.btn-eliminar {
  background: none;
  color: var(--alerta);
  font-size: 0.8rem;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  width: auto;
}
button.btn-eliminar:hover { background: var(--error-bg); color: var(--alerta-dark); }

/* Reservado para la acción realmente irreversible (borrar un lugar por
   completo) — deliberadamente más "pesado" que btn-eliminar, para que la
   diferencia de gravedad entre ambas acciones se note a simple vista. */
button.btn-peligro {
  background: var(--alerta);
  color: #fff;
  width: 100%;
  font-size: 0.85rem;
  font-weight: 700;
}
button.btn-peligro:hover { background: var(--alerta-dark); }

.admin-zona-peligro {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--alerta-tint);
}

.admin-zona-peligro-titulo {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--alerta-dark);
  margin-bottom: 6px;
}

.btn-cancelar-edicion {
  background: none;
  color: var(--text-muted);
  width: 100%;
  margin-top: 8px;
  font-size: 0.85rem;
}
.btn-cancelar-edicion:hover { color: var(--sumi); }

#lugares-container { margin-top: 20px; }

.empty-hint { color: var(--text-muted); font-size: 0.9rem; }

/* --- Panel de negocio --- */
.negocio-lugar-card {
  background: var(--washi);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ai);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.negocio-fotos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.negocio-foto-miniatura {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}

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

.btn-borrar-foto {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.negocio-foto-subir {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 1.5px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
}
.negocio-foto-subir:hover { border-color: var(--ai); color: var(--ai); }

/* --- Catálogo público de lugares --- */
.lugares-subtabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.lugares-subtab-btn {
  flex: 1;
  background: var(--washi);
  border: 1px solid var(--line);
  color: var(--text-muted);
  border-radius: 999px;
  font-size: 0.85rem;
  padding: 9px;
}

.lugares-subtab-btn.active {
  background: var(--ai);
  color: #fff;
  border-color: var(--ai);
}

.catalogo-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.catalogo-filtros input {
  margin-top: 0;
  flex: 1;
  min-width: 140px;
}

.catalogo-card {
  background: var(--washi);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
}

.catalogo-card-foto {
  width: 100%;
  height: 150px;
  background: var(--kinari);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.catalogo-card-foto img { width: 100%; height: 100%; object-fit: cover; }

/* La galería (principal + miniaturas) dentro de una tarjeta de catálogo va
   a sangre (sin su propio borde/radio ni margen): usa el overflow:hidden y
   el border-radius de .catalogo-card, igual que hacía .catalogo-card-foto. */
.catalogo-card .galeria-fotos { margin-top: 0; }
.catalogo-card .galeria-principal {
  height: 150px;
  aspect-ratio: unset;
  border-radius: 0;
  border: none;
}
.catalogo-card .galeria-miniaturas { margin: 8px 16px 0; }

.catalogo-card-body { padding: 14px 16px; }

.catalogo-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.catalogo-patrocinado-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold, #b8902f);
  background: #f5ecd8;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 6px;
}

.catalogo-patrocinado-badge.badge-premium {
  color: #fff;
  background: linear-gradient(135deg, var(--sumi), #3a3a3a);
}

/* --- Panel de administración --- */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.admin-stat {
  background: var(--washi);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
}

.admin-stat strong { display: block; font-size: 1.3rem; color: var(--ai); }
.admin-stat span { font-size: 0.72rem; color: var(--text-muted); }

.admin-stat-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.admin-stat-link:hover .admin-stat {
  box-shadow: 0 0 0 2px var(--ai-tint);
}

.admin-stat-link-hint {
  display: block;
  font-size: 0.65rem;
  color: var(--ai);
  margin-top: 2px;
  font-weight: 600;
}

.analiticas-caja {
  background: var(--washi);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
}

.analiticas-detalle {
  background: var(--washi);
  border: 1px dashed var(--line);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 24px;
  overflow-x: auto;
}

.analiticas-detalle h4 {
  margin: 0 0 10px;
  font-size: 0.92rem;
  color: var(--sumi);
}

.analiticas-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.analiticas-tabla th {
  text-align: left;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}

.analiticas-tabla td {
  padding: 8px;
  border-bottom: 1px solid var(--line);
}

.analiticas-tabla tr:last-child td { border-bottom: none; }

.admin-subtitulo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 1rem;
  margin: 24px 0 10px;
  color: var(--sumi);
}

.admin-subtitulo-hint {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* La etiqueta de negocio es solo texto en el flujo, no una caja que envuelva
   las tarjetas: así queda claro que la lista sigue siendo una única lista
   arrastrable de arriba a abajo, sin "silos" por negocio. */
.admin-cabecera-negocio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 4px 4px 8px;
  font-size: 0.82rem;
  color: var(--sumi);
}

.admin-cabecera-email {
  font-size: 0.78rem;
  color: var(--ai-dark);
}

.admin-cabecera-comercial {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.admin-anadir-lugar-negocio {
  flex-basis: 100%;
  margin-top: 8px;
}

.admin-anadir-lugar-negocio summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ai);
}

.admin-anadir-lugar-negocio .admin-form-editar { margin-top: 8px; }

.admin-form-eliminar-lugar { margin-top: 6px; }

.admin-lugar-card {
  background: var(--washi);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ai);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  gap: 10px;
  scroll-margin-top: 76px;
}

.admin-lugar-card .item-info { flex: 1; min-width: 0; }

.admin-lugar-card[draggable="true"] { cursor: grab; }
.admin-lugar-card[draggable="true"].arrastrando { opacity: 0.4; }

.admin-drag-handle {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-drag-handle svg { width: 20px; height: 20px; }

.admin-form-titulo {
  margin: 14px 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sumi);
}

.admin-form-pago {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.admin-form-pago-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-form-pago-fila .admin-form-pago-fecha { flex: 1; min-width: 110px; }
.admin-form-pago-fila input,
.admin-form-pago-fila select { width: 100%; margin-top: 4px; }

.admin-form-pago input[type="text"] { margin-top: 0; }

.admin-form-pago-fecha {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.admin-form-pago-submit { margin-top: 2px; }

.badge-alerta {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-top: 6px;
  margin-left: 6px;
  background: var(--alerta-tint);
  color: var(--alerta-dark);
}

.badge-alerta-fuerte {
  background: var(--alerta);
  color: #fff;
}

.badge-confirmada {
  background: var(--mizu);
  color: #fff;
}

.categoria-tag-dieta {
  background: var(--kinari);
  color: var(--sumi);
  border: 1px solid var(--line);
}

.traductor-caja {
  background: var(--washi);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  max-width: 520px;
}

.traductor-foto-btn { margin-bottom: 6px; }
.traductor-foto-ayuda { margin-top: 0; margin-bottom: 14px; }
#traductor-foto-estado { margin-bottom: 14px; }
#traductor-foto-estado.traductor-foto-aviso {
  background: var(--ai-tint);
  color: var(--ai-dark);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
}
/* Este sí es un fallo real ("no se ha podido leer nada") — se queda en rojo
   porque ahí no hay traducción que mostrar, a diferencia del aviso general
   de precisión que acompaña a una traducción que sí se ha generado. */
#traductor-foto-estado.traductor-foto-error {
  background: var(--alerta-tint);
  color: var(--alerta-dark);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.traductor-separador {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.82rem;
  margin: 4px 0 16px;
}
.traductor-separador::before,
.traductor-separador::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.traductor-idiomas {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.traductor-idiomas select { flex: 1; }
.traductor-idiomas select,
.traductor-idiomas button {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 0.9rem;
}
#traductor-invertir {
  flex: none;
  width: 40px;
  cursor: pointer;
  font-weight: 700;
  color: var(--ai);
}

#traductor-texto {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  margin-bottom: 12px;
}

.traductor-resultado {
  margin-top: 16px;
  padding: 14px;
  border-radius: 10px;
  background: var(--ai-tint);
  color: var(--sumi);
  font-size: 1rem;
  line-height: 1.5;
}

.admin-editar {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.admin-editar summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ai);
}

.admin-form-editar { margin-top: 10px; }
.admin-form-editar button { margin-top: 4px; }

.admin-anadir-negocio {
  background: var(--washi);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.admin-anadir-negocio summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ai);
}

.admin-anadir-negocio .card-form {
  margin-top: 12px;
  padding: 0;
  border: none;
  background: none;
}

.admin-ayuda-negocio {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.admin-form-separador {
  border: none;
  border-top: 1px dashed var(--line);
  margin: 16px 0;
}

.admin-paquete-lugares-lista {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 10px;
  margin: 8px 0 12px;
  background: var(--washi);
}

.admin-paquete-lugar-opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.85rem;
  cursor: pointer;
}
.admin-paquete-lugar-opcion:last-child { border-bottom: none; }
.admin-paquete-lugar-opcion input[type="checkbox"] { flex-shrink: 0; }

.paquete-card {
  background: var(--washi);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
}
.paquete-card-imagen-caja { position: relative; }
.paquete-card-imagen { width: 100%; height: 200px; object-fit: cover; display: block; background: var(--kinari); }
/* Título y ciudad sobre la propia foto, con degradado — así la portada de
   un paquete se lee como la de un viaje real (una experiencia), no como el
   encabezado de una ficha de catálogo con el título aparte en texto plano. */
.paquete-card-imagen-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 28px 16px 12px;
  background: linear-gradient(to top, rgba(20,18,15,0.82), rgba(20,18,15,0));
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.paquete-card-imagen-overlay strong { font-size: 1.1rem; font-family: 'Fraunces', serif; }
.paquete-card-imagen-overlay span { font-size: 0.8rem; opacity: 0.9; }
.paquete-card-body { padding: 14px 16px; }
.paquete-card-lugares { margin: 12px 0; }
.paquete-lugar-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 0.88rem;
}
.paquete-lugar-numero {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ai-tint);
  color: var(--ai);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.paquete-lugar-fila .item-info { flex: 1; }
.paquete-lugar-fila .btn-como-llegar { width: auto; flex: none; padding: 4px 8px; font-size: 0.9rem; }
.btn-paquete-completo { margin-top: 4px; }

.admin-log {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.admin-log-titulo {
  display: block;
  font-size: 0.78rem;
  color: var(--sumi);
  margin-bottom: 4px;
}

.admin-log-lista {
  margin: 0;
  padding-left: 18px;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.admin-log-lista li { margin-bottom: 3px; }

.admin-log-fecha {
  font-weight: 600;
  color: var(--sumi);
}

.admin-deshacer-orden {
  font-weight: 700;
  color: var(--ai);
  text-decoration: underline;
}

.admin-codigo {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ai-tint);
  color: var(--ai-dark);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.admin-gestionar {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.admin-gestionar summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sumi);
  list-style: revert;
}

.admin-gestionar > summary::marker {
  color: var(--ai);
}

.admin-gestionar .admin-editar {
  border-top-style: dashed;
}

.comercial-negocios-lista {
  margin: 4px 0 0;
  padding-left: 18px;
}

.comercial-negocios-lista li {
  margin-bottom: 2px;
}

@media (max-width: 480px) {
  .admin-stats { grid-template-columns: 1fr 1fr; }
}

/* --- Descubrir: opciones de itinerario generado --- */
.opciones-heading {
  margin: 24px 0 4px;
  font-size: 1.1rem;
  color: var(--sumi);
}
.opciones-heading + .empty-hint { margin-bottom: 14px; }

.opcion-ver-creado {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-weight: 700;
  color: var(--ai);
  text-decoration: none;
}

.opcion-card {
  background: var(--washi);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 14px;
}

.opcion-imagen { position: relative; width: 100%; height: 130px; line-height: 0; background: var(--kinari); }
.opcion-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }

.btn-como-llegar {
  display: inline-block;
  background: #fff;
  color: var(--ai);
  border: 1px solid var(--ai);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  width: auto;
}
.btn-como-llegar:hover { background: var(--ai-tint); }

.checkin-como-llegar { margin-top: 14px; }

.tramo-viaje {
  margin: -6px 0 10px 14px;
  padding-left: 14px;
  border-left: 2px dashed var(--line);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.dia-aviso-ciudades { color: var(--alerta); font-weight: 700; }

#viaje-presupuesto { margin-top: 6px; }

.guia-seccion {
  background: var(--washi);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 14px;
}
.guia-seccion h3 { margin: 0 0 8px; font-size: 1rem; color: var(--sumi); }
.guia-seccion p { margin: 0 0 6px; font-size: 0.9rem; line-height: 1.55; color: var(--text); }
.guia-seccion ul { margin: 0 0 6px; padding-left: 20px; }
.guia-seccion li { font-size: 0.9rem; line-height: 1.55; color: var(--text); margin-bottom: 6px; }
.guia-enlace {
  display: inline-block;
  color: var(--ai);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  margin-top: 4px;
}
.guia-enlace:hover { text-decoration: underline; }
.guia-seccion li .guia-enlace { font-weight: 600; margin-top: 2px; }

.item-sugerencias {
  margin-top: -8px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  max-height: 220px;
  overflow-y: auto;
}

.item-sugerencia {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 0;
  border-bottom: 1px dashed var(--line);
  padding: 10px 14px;
  font-weight: 400;
  color: var(--text);
}
.item-sugerencia:last-child { border-bottom: none; }
.item-sugerencia:hover { background: var(--kinari); opacity: 1; }
.item-sugerencia strong { display: block; font-size: 0.9rem; color: var(--sumi); }
.item-sugerencia .notas { margin-top: 2px; }

.item-sugerencia-vacia {
  padding: 10px 14px;
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.viaje-imagen {
  position: relative;
  width: 100%;
  height: 150px;
  line-height: 0;
  background: var(--kinari);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 14px;
}
.viaje-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opcion-imagen-credito {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 2px 8px;
  font-size: 0.62rem;
  line-height: 1.4;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border-top-left-radius: 8px;
}

.opcion-body { padding: 20px; }

.opcion-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.opcion-numero {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ai);
  background: var(--ai-tint);
  padding: 3px 10px;
  border-radius: 999px;
}

.opcion-header h4 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--sumi);
}

.opcion-resumen {
  margin: 0 0 6px;
  font-size: 0.92rem;
  color: var(--text);
}

.opcion-meta {
  margin: 0 0 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* --- Recompensas --- */
.recompensa-card {
  background: var(--washi);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.recompensa-card form { margin: 0; }

/* button.btn-canjear (no solo .btn-canjear) para ganarle en especificidad a
   la regla genérica button[type="submit"] — si no, este botón se queda con
   el negro por defecto en vez de su azul, sea cual sea el orden en el
   archivo. Mismo motivo para btn-eliminar, btn-peligro y btn-secondary. */
button.btn-canjear {
  background: var(--ai);
  color: #fff;
  font-size: 0.82rem;
  padding: 9px 16px;
  width: auto;
}

button.btn-canjear:hover { background: var(--ai-dark); }

button.btn-canjear:disabled {
  background: var(--line);
  color: var(--text-muted);
  cursor: not-allowed;
}

.recompensa-estado {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mizu);
}

.btn-seleccionar-opcion { margin-top: 4px; }

/* --- Navegación inferior --- */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: var(--washi);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(42, 38, 33, 0.05);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  z-index: 20;
}

.bottom-nav-btn {
  flex: 1;
  background: none;
  border: none;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.bottom-nav-btn .bn-icono {
  display: inline-flex;
  width: 22px;
  height: 22px;
}

.bottom-nav-btn .bn-icono svg { width: 100%; height: 100%; }

.bottom-nav-btn.active {
  color: var(--ai);
  background: var(--ai-tint);
}

@media (max-width: 480px) {
  .form-row { flex-direction: column; gap: 0; }
  .topbar { padding: 12px 14px; }
}

/* Pantalla de check-in "Estoy Aquí" (calcada del mockup v0/idea-boton-estoy-aqui.jpg):
   foto a ancho completo, dirección, bienvenida y botón grande de reclamar millas. */
.checkin-caja {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 20px 100px;
  text-align: center;
}

.checkin-estas-aqui {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--alerta);
  margin: 8px 0 16px;
}
.checkin-estas-aqui svg { width: 20px; height: 20px; }

.checkin-foto {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

.checkin-foto-vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kinari);
  color: var(--text-muted);
}
.checkin-foto-vacia svg { width: 48px; height: 48px; }

.checkin-direccion {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 10px;
}

.checkin-bienvenida {
  font-size: 1.15rem;
  margin-top: 24px;
  line-height: 1.4;
}

.checkin-subtexto {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 6px;
  margin-bottom: 20px;
}

button.btn-checkin {
  background: var(--alerta);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 16px 32px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}
button.btn-checkin:hover { background: var(--alerta-dark); }
button.btn-checkin:disabled { background: var(--text-muted); cursor: default; }

.checkin-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--washi);
  border-top: 1px solid var(--line);
}
.checkin-nav a { color: var(--sumi); text-decoration: none; font-weight: 600; font-size: 0.9rem; }

.checkin-confeti {
  position: relative;
  height: 0;
  overflow: visible;
  pointer-events: none;
}
.checkin-confeti-pieza {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation-name: checkin-caida-confeti;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes checkin-caida-confeti {
  from { transform: translateY(0) rotate(0deg); opacity: 1; }
  to { transform: translateY(280px) rotate(360deg); opacity: 0; }
}