/* ==============================
   SALIRDELIMA.COM — Component Styles
   ==============================
   Design tokens en tokens.css
   ============================== */

/* --- Base --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-secondary); }

/* --- "X" del buscador (input[type=search]) ---
   La nativa es diminuta y queda pegada a la lupa; la agrandamos y la pintamos
   con el gris del sitio (solo Chromium/Safari; Firefox no dibuja la X nativa y
   se apoya en la tecla Escape, ver js/modules/buscador.js). */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-right: 3px;
  cursor: pointer;
  opacity: 0.7;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>") center / contain no-repeat;
}
input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; }
html.dark input[type="search"]::-webkit-search-cancel-button {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.5' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>");
}

/* --- Animations --- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
/* GPS icon status: gray when inactive, red pulsing when active */
.gps-icon {
  color: #9ca3af !important; /* gray-400: inactive/default */
  transition: color 0.3s ease, transform 0.3s ease;
}
.gps-icon--active {
  color: #ef4444 !important; /* red-500: active */
  animation: gps-pulse 2s ease-in-out infinite;
}
@keyframes gps-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.15); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%) scale(0.9); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(100%) scale(0.9); }
}

.animate-fade-in { animation: fadeIn var(--transition-slow) ease forwards; }
.animate-slide-up { animation: slideUp var(--transition-normal) ease forwards; }

/* Stagger animation for home cards */
.card-home { animation: fadeInUp var(--transition-slow) ease forwards; opacity: 0; }
.stagger-1 { animation-delay: 0ms; }
.stagger-2 { animation-delay: 80ms; }
.stagger-3 { animation-delay: 160ms; }
.stagger-4 { animation-delay: 240ms; }
.stagger-5 { animation-delay: 320ms; }

/* --- Skeleton --- */
.skeleton-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.skeleton-img {
  height: 176px;
  background: linear-gradient(90deg, var(--color-border) 25%, #cbd5e1 50%, var(--color-border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.skeleton-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.skeleton-line {
  height: 12px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-border) 25%, #cbd5e1 50%, var(--color-border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* --- Toast Container --- */
#toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: var(--shadow-toast);
  transform: translateX(100%) scale(0.9);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 360px;
}
.toast.show {
  transform: translateX(0) scale(1);
  opacity: 1;
}
.toast i { font-size: 1rem; }

/* --- Dark Mode Toggle --- */
.dark-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 600;
}
.dark-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.dark-toggle .track {
  width: 40px;
  height: 22px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  transition: background var(--transition-normal);
  position: relative;
}
.dark-toggle .track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--color-surface);
  border-radius: 50%;
  transition: transform var(--transition-normal);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.dark-toggle input:checked + .track { background: var(--color-primary); }
.dark-toggle input:checked + .track::after { transform: translateX(18px); }

/* --- Language Toggle --- */
#lang-toggle { display: inline-flex; }
.lang-btn {
  padding: 0.25rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.lang-btn.active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 1px 3px rgba(5,150,105,0.3);
}

/* --- Sidebar --- */
#sidebar {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (max-width: 767px) {
  #sidebar {
    transform: translateX(-100%);
    position: fixed;
    z-index: 40;
    height: 100vh;
    top: 0;
    left: 0;
    width: 85vw;
    max-width: 320px;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
  }
  #sidebar.open { transform: translateX(0); }
  #sidebar-overlay {
    transition: opacity 0.3s ease;
  }
}
/* Fondo bloqueado (sidebar + modales): sin scroll mientras algo esté abierto */
html.scroll-lock,
body.scroll-lock {
  overflow: hidden;
  overscroll-behavior: none;
}
/* Evitar que el gesto de scroll sobre el overlay mueva la pantalla posterior */
#sidebar-overlay {
  touch-action: none;
}

/* --- Header / Portada --- */
#portada-bg {
  transition: background-image 0.5s ease-in-out, min-height 0.4s ease-in-out;
  position: relative;
}
.banner-condition {
  margin-top: 0.75rem;
  padding: 0.625rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(15,23,42,0.6);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.75rem;
  color: #e2e8f0;
  max-width: 32rem;
  z-index: 10;
  position: relative;
}
.banner-badge {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.5625rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f59e0b;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

/* --- Buttons --- */
.btn-primary {
  flex: 1;
  text-align: center;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), transform var(--transition-fast);
  border: none;
  cursor: pointer;
}
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
  border: none;
  cursor: pointer;
  text-align: center;
}
.btn-secondary:hover { background: #cbd5e1; }

.btn-icon {
  background: var(--color-bg);
  color: var(--color-text-secondary);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
}
.btn-icon:hover { background: var(--color-border); color: var(--color-text); }

/* --- Home Cards --- */
.card-home {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-normal);
}
.card-home:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: var(--color-primary-light);
  transform: translateY(-2px);
}
.dark .card-home:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.card-home-img {
  height: 176px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.card-home-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.25), transparent);
  transition: opacity var(--transition-normal);
}
.card-home:hover .card-home-img-overlay { opacity: 0.7; }
.card-home-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: rgba(15,23,42,0.8);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
}
.card-home-rating {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(255,255,255,0.9);
  color: #d97706;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.card-home-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.card-home-title {
  font-weight: 700;
  color: var(--color-text);
  transition: color var(--transition-fast);
  font-size: 0.9375rem;
}
.card-home:hover .card-home-title { color: var(--color-primary); }
.card-home-desc { font-size: 0.75rem; color: var(--color-text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-home-footer {
  padding-top: 0.5rem;
  font-size: 0.6875rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* --- Atractivo Cards --- */
.atractivo-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.atractivo-card:hover {
  border-color: var(--color-primary-light);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.atractivo-card-img {
  height: 160px;
  background-size: cover;
  background-position: center;
  position: relative;
  cursor: pointer;
}
.atractivo-card-alt {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: rgba(15,23,42,0.8);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.atractivo-card-diff {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
}
.atractivo-card-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.atractivo-card-header { display: flex; align-items: center; justify-content: space-between; }
.atractivo-card-cat { font-size: 0.5625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); }
.atractivo-card-stars { font-size: 0.6875rem; }
.atractivo-card-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  transition: color var(--transition-fast);
  line-height: 1.3;
}
.atractivo-card-title:hover { color: var(--color-primary); }
.atractivo-card-desc { font-size: 0.75rem; color: var(--color-text-secondary); line-height: 1.5; }
.atractivo-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.625rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.atractivo-card-meta i { width: 14px; }
.atractivo-card-actions { display: flex; gap: 0.5rem; padding-top: 0.5rem; }

/* --- Stats Bar --- */
.stat-badge {
  display: inline-flex;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
}
.dificultad-facil { background: #d1fae5; color: #065f46; }
.dificultad-moderado { background: #fef3c7; color: #92400e; }
.dificultad-dificil { background: #fee2e2; color: #991b1b; }
.dark .dificultad-facil { background: #064e3b; color: #a7f3d0; }
.dark .dificultad-moderado { background: #78350f; color: #fde68a; }
.dark .dificultad-dificil { background: #7f1d1d; color: #fecaca; }

/* --- Comercios --- */
.comercio-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  transition: box-shadow var(--transition-normal);
}
.comercio-card:hover { box-shadow: var(--shadow-card); }
.comercio-card.premium {
  background: rgba(251,191,36,0.05);
  border-color: #fcd34d;
}
.comercio-badge {
  position: absolute;
  top: 0;
  right: 1rem;
  transform: translateY(-50%);
  background: #f59e0b;
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 900;
  text-transform: uppercase;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
}
.comercio-info {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.comercio-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  font-size: 1.125rem;
  flex-shrink: 0;
}
.comercio-loc { font-size: 0.75rem; color: var(--color-text-secondary); margin-bottom: 0.25rem; }
.comercio-esp {
  font-size: 0.6875rem;
  background: rgba(251,191,36,0.2);
  color: #92400e;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.dark .comercio-esp { color: #fde68a; }
.comercio-esp-sm { font-size: 0.75rem; color: var(--color-text-secondary); margin-top: 0.25rem; font-weight: 500; }
.comercio-local-badge {
  font-size: 0.625rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  background: var(--color-bg);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  align-self: flex-start;
}
.btn-comercio-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}
.btn-comercio-wa:hover { background: var(--color-primary-dark); }

/* --- Logística Timeline --- */
#contenedor-logistica { position: relative; padding-left: 1.25rem; }
#contenedor-logistica::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: var(--color-border);
}
.log-item {
  position: relative;
  padding-bottom: 1.25rem;
}
.log-item:last-child { padding-bottom: 0; }
.log-icon {
  position: absolute;
  left: -1.8125rem;
  top: 0.125rem;
  color: #fff;
  font-size: 0.5625rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.log-title { font-size: 0.75rem; font-weight: 700; color: var(--color-text); }
.log-desc { font-size: 0.6875rem; color: var(--color-text-secondary); margin-top: 0.125rem; }

/* --- Modal --- */
#modal-detalle {
  animation: fadeIn 0.2s ease;
}
#modal-detalle > .fixed:first-child {
  animation: fadeIn 0.2s ease;
}
#modal-detalle > .relative {
  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Tabs --- */
.tab-btn {
  padding: 0.75rem 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tab-btn:hover { color: var(--color-primary); }
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn var(--transition-normal) ease; }

/* --- Review Cards --- */
.review-card {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 1rem;
  border: 1px solid var(--color-border);
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}
.review-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; }
.review-header span:first-child { font-size: 0.75rem; font-weight: 700; color: var(--color-text); }

/* --- Clima Cards --- */
.clima-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  text-align: center;
}
.clima-mes { font-size: 0.625rem; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; }
.clima-temp { font-size: 0.9375rem; font-weight: 900; color: var(--color-text); margin-top: 0.25rem; }
.clima-info { font-size: 0.625rem; color: var(--color-text-secondary); margin-top: 0.125rem; }

/* --- Flora & Fauna Cards --- */
.ff-card {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  border: 1px solid var(--color-border);
}
.ff-card-title { font-size: 0.75rem; font-weight: 700; color: var(--color-text); }
.ff-card-desc { font-size: 0.6875rem; color: var(--color-text-secondary); }

/* --- Gallery Thumbs --- */
.gallery-thumb {
  position: relative;
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.gallery-thumb img {
  width: 100%;
  height: 112px;
  object-fit: cover;
  transition: transform var(--transition-normal);
}
.gallery-thumb:hover img { transform: scale(1.05); }

/* --- Perfil de Ruta --- */
.perfil-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding: 1rem;
}
.perfil-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.perfil-track {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.5rem 0.25rem 0.25rem;
}
.perfil-line {
  position: absolute;
  top: 26px;
  left: 8%;
  right: 8%;
  height: 5px;
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--color-text-secondary), var(--color-primary));
}
.perfil-point {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 24%;
}
.perfil-alt {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--color-bg);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.625rem;
  font-weight: 700;
  color: #2b7a8c;
}
.perfil-alt:last-child { color: var(--color-primary); }
.perfil-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #2b7a8c;
  margin: 0.375rem 0;
}
.perfil-dot.active { border-color: var(--color-primary); }
.perfil-name { font-size: 0.625rem; font-weight: 700; color: var(--color-text); line-height: 1.2; }
.perfil-km { font-size: 0.5625rem; color: var(--color-text-secondary); }
.perfil-note {
  background: rgba(5,150,101,0.06);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.625rem;
  font-size: 0.6875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-top: 0.75rem;
}

/* --- Search Results --- */
.card-search {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-normal);
}
.card-search:hover {
  box-shadow: var(--shadow-card);
  border-color: var(--color-primary-light);
}
.card-search-img {
  height: 144px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.card-search-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: rgba(5,150,101,0.9);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
}
.card-search-title {
  font-weight: 700;
  color: var(--color-text);
  font-size: 0.875rem;
  transition: color var(--transition-fast);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-search:hover .card-search-title { color: var(--color-primary); }
.card-search-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.625rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  padding-top: 0.25rem;
  overflow: hidden;
}

.card-search-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-search .line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Lugar Cards --- */
.lugar-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  border: 1px solid var(--color-border);
}
.btn-wa-sm {
  flex-shrink: 0;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.btn-wa-sm:hover { background: var(--color-primary-dark); }

/* --- Interest Cards --- */
.card-interes {
  flex-shrink: 0;
  width: 160px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-normal);
}
.card-interes:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-card);
}
.card-interes img { height: 80px; width: 100%; object-fit: cover; }

/* --- Viajes Modal --- */
.viajes-modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 24rem;
  margin: 0 1rem;
  padding: 1.25rem;
  max-height: 70vh;
  overflow-y: auto;
}
.viajes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.75rem;
  position: sticky;
  top: 0;
  background: var(--color-surface);
}
.viaje-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: border-color var(--transition-fast);
  margin-bottom: 0.5rem;
}
.viaje-item:hover { border-color: var(--color-primary); }
.viaje-item img { width: 3rem; height: 3rem; border-radius: var(--radius-md); object-fit: cover; }

/* --- Sidebar User Button --- */
.sidebar-user-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  cursor: pointer;
  text-align: left;
}
.sidebar-user-btn:hover { border-color: var(--color-primary-light); }
.sidebar-user-btn.active {
  border-color: var(--color-primary);
  background: rgba(5,150,101,0.08);
}
.avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #a7f3d0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}
.avatar-placeholder {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* --- Menu Buttons --- */
.btn-menu-inicio {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  text-align: left;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  cursor: pointer;
}
.btn-menu-inicio.active {
  border-color: var(--color-primary);
  background: rgba(5,150,101,0.08);
}
.btn-menu-ruta {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  text-align: left;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  cursor: pointer;
}
.btn-menu-ruta:hover { border-color: var(--color-primary-light); }
.btn-menu-ruta.active {
  border-color: var(--color-primary);
  background: rgba(5,150,101,0.08);
}

/* --- Filter Buttons --- */
.btn-filtro {
  padding: 0.625rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  text-align: left;
  transition: all var(--transition-fast);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.btn-filtro.active {
  border-color: var(--color-primary);
  background: rgba(5,150,101,0.08);
}
.btn-filtro:hover { border-color: var(--color-primary-light); }

/* --- Distance Radio Buttons --- */
.radio-distancia {
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.radio-distancia:hover {
  border-color: var(--color-primary-light);
  color: var(--color-primary);
}
.radio-distancia.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.radio-distancia.active:hover {
  background: var(--color-primary-dark, #059669);
  color: #fff;
}

/* --- Tile Switcher Button --- */
.tile-switcher-btn {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 1000;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(4px);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.tile-switcher-btn:hover {
  background: #fff;
  border-color: var(--color-primary-light);
  color: var(--color-primary);
}
/* Anclar el botón de alternar tiles al mapa del destino (home) */
#destino-mapa-section { position: relative; }
/* Anclar el botón de alternar tiles a los mapas del detalle (lugar/proveedor) */
#lugar-mapa-section, #prov-mapa-section { position: relative; }
/* Anclar el botón de alternar tiles al mapa de la página de categoría */
#categoria-mapa-section { position: relative; }

/* --- Custom Marker --- */
.custom-marker { background: none !important; border: none !important; }
.custom-marker-inner {
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transform: rotate(-45deg);
}
.custom-marker-inner i { transform: rotate(45deg); }

/* --- Marker con nombre (mapa del destino con filtro de grupo activo) --- */
.map-marker-label {
  background: rgba(15, 23, 42, 0.88);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.map-marker-label::before { border-top-color: rgba(15, 23, 42, 0.88); }
@media (prefers-color-scheme: dark) {
  .map-marker-label { background: rgba(30, 41, 59, 0.92); }
  .map-marker-label::before { border-top-color: rgba(30, 41, 59, 0.92); }
}
/* El modo oscuro del sitio se activa con la clase .dark */
.dark .map-marker-label { background: rgba(30, 41, 59, 0.92); }
.dark .map-marker-label::before { border-top-color: rgba(30, 41, 59, 0.92); }

/* --- Map Popup --- */
.map-popup { display: flex; gap: 0.5rem; max-width: 240px; }
.map-popup-img { width: 80px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); }
.map-popup-body { display: flex; flex-direction: column; gap: 0.25rem; }
.map-popup-body strong { font-size: 0.75rem; }
.map-popup-meta { font-size: 0.625rem; color: var(--color-text-secondary); }
.map-popup-btn {
  font-size: 0.625rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.map-popup-btn:hover { background: var(--color-primary-dark); }

/* --- Mapa del destino: chips de filtro + leyenda --- */
.mapa-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.mapa-chip:hover { border-color: var(--color-primary-light); color: var(--color-primary); }
.mapa-chip--activo {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.mapa-chip--activo:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}
.mapa-chip-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.mapa-chip-count { opacity: 0.75; font-weight: 700; }
.mapa-chip--activo .mapa-chip-count { opacity: 0.9; }
.mapa-leyenda-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.mapa-leyenda-item .mapa-leyenda-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}

/* --- Responsive: Bottom Sheet on Mobile --- */
@media (max-width: 767px) {
  /* Móvil: el mapa del destino no debe atrapar el scroll de la página.
     Leaflet pone touch-action:none para su drag; con pan-x pan-y pinch-zoom
     el gesto de un dedo scrollea la página y el zoom (2 dedos / botones) sigue. */
  #destino-mapa.leaflet-container {
    touch-action: pan-x pan-y pinch-zoom;
  }

  /* Cualquier otro mapa del sitio (Explore, categorías, detalle, modal).
     Leaflet aplica touch-action:none a todos sus contenedores para poder
     arrastrar, y eso se traga el scroll vertical de la página además de
     mostrar su aviso de "usa dos dedos". Con pan-x pan-y pinch-zoom el
     gesto de 1 dedo scrollea la página y el zoom sigue con 2 dedos o con
     los botones +/-. Regla global: cubre los mapas que se creen sin pasar
     por MapManager.create(). */
  .leaflet-container {
    touch-action: pan-x pan-y pinch-zoom !important;
  }
  #modal-detalle > .relative {
    margin: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 92vh;
    overflow-y: auto;
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    animation: slideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  #modal-detalle > .fixed:first-child {
    animation: fadeIn 0.2s ease;
  }
  .card-home-title { font-size: 0.875rem; }
  .atractivo-card-title { font-size: 0.875rem; }
  .perfil-header { flex-direction: column; gap: 0.25rem; align-items: flex-start; }
  .perfil-track { flex-wrap: wrap; gap: 0.5rem; }
  .perfil-point { width: 45%; }
  .perfil-line { display: none; }

  /* Make sidebar items bigger touch targets */
  .btn-filtro { padding: 0.75rem; }
  .btn-menu-inicio, .btn-menu-ruta { padding: 0.875rem; }

  /* Sticky bottom bar for mobile */
  .mobile-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 0.5rem;
    z-index: 20;
    gap: 0.25rem;
    justify-content: space-around;
  }
  .mobile-bottom-bar button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.5625rem;
    color: var(--color-text-secondary);
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.375rem;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
  }
  .mobile-bottom-bar button i { font-size: 1rem; }
  .mobile-bottom-bar button:hover { color: var(--color-primary); }
}

/* --- Leaflet overrides --- */
.leaflet-container { font-family: var(--font-sans) !important; }
.leaflet-popup-content-wrapper { border-radius: var(--radius-md) !important; padding: 0 !important; }
.leaflet-popup-content { margin: 0 !important; width: auto !important; }
.leaflet-popup-close-button { top: 4px !important; right: 4px !important; }

/* --- Section Subtitle --- */
.section-subtitle {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.section-subtitle i { font-size: 0.875rem; }

/* --- Map placeholder --- */
.map-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* --- Login Modal --- */
#modal-login, #lightbox {
  animation: fadeIn 0.2s ease;
}
#modal-login > div:last-child {
  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Focus visible --- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Print styles --- */
@media print {
  #sidebar, #wrapper-btn-maps, .atractivo-card-actions, .btn-comercio-wa {
    display: none !important;
  }
  body { background: white; color: black; }
  #portada-bg { min-height: auto !important; }
}

/* --- Favorite Button --- */
.btn-fav {
  transition: all var(--transition-fast);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.125rem;
}

/* --- Tag filter chips in results --- */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  background: rgba(5,150,101,0.1);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: 0.625rem;
  font-weight: 600;
}

/* --- Carousel --- */
#carousel-destacados .carousel-slide {
  transition: opacity 0.3s ease;
}
#carousel-destacados .carousel-slide:hover .carousel-cta {
  background: rgba(255,255,255,0.3);
}
#carousel-destacados .carousel-dot {
  transition: all 0.2s ease;
}
#carousel-destacados .carousel-dot:hover {
  transform: scale(1.3);
}

@media (max-width: 640px) {
  #carousel-prev,
  #carousel-next {
    display: none;
  }
}

/* --- Map Toggle (OSM / Google) --- */
.map-toggle-track {
  width: 1.75rem;
  height: 0.875rem;
  background: #cbd5e1;
  border-radius: 999px;
  position: relative;
  transition: background 0.2s;
}
.map-toggle-dot {
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  background: white;
  border-radius: 999px;
  top: 0.0625rem;
  left: 0.0625rem;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
#map-toggle-input:checked ~ .map-toggle-track {
  background: #059669;
}
#map-toggle-input:checked ~ .map-toggle-track .map-toggle-dot {
  transform: translateX(0.875rem);
}
#google-map-embed {
  width: 100%;
  border: none;
}
/* Iframe del mapa ampliado del modal clásico (toggle OSM/Google) */
.map-modal-embed {
  width: 100%;
  height: 12rem;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.dark .map-modal-embed {
  border-color: #334155;
}

/* ====== Footer ====== */
.site-footer {
  background: #0f172a;
  color: #94a3b8;
  padding: 0.75rem 1rem;
  margin-top: 2rem;
}
.footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  text-align: center;
}
.social-links {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}
.social-links .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: #1e293b;
  color: #94a3b8;
  font-size: 1rem;
  text-decoration: none;
  transition: all var(--transition-normal);
}
.social-links .social-link:hover {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
}
.footer-copy {
  font-size: 0.7rem;
  color: #64748b;
}

/* En móvil, el footer compensa la barra inferior fija: se aplica padding al footer
   (no al body) para que al hacer scroll hasta el final no quede un hueco después
   del footer. Definido al final para ganar por orden de cascada. */
@media (max-width: 767px) {
  .site-footer {
    padding-bottom: calc(0.75rem + 3.5rem);
  }
}

/* ==============================
   Bottom Sheet Modal (Afinar búsqueda)
   ============================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 90;
  transition: opacity 0.25s ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal-overlay.hidden { opacity: 0; pointer-events: none; }

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-card, #fff);
  border-radius: 1.25rem 1.25rem 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  max-width: 100vw;
}
.bottom-sheet.visible {
  transform: translateY(0);
}
.bottom-sheet.hidden {
  transform: translateY(100%);
  pointer-events: none;
}

.bottom-sheet-handle {
  display: flex;
  justify-content: center;
  padding: 0.75rem 0 0.25rem;
  cursor: pointer;
}
.bottom-sheet-handle-bar {
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--color-border, #e2e8f0);
}

.bottom-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.bottom-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bottom-sheet-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0));
}

/* En desktop, limitar ancho y centrar */
@media (min-width: 640px) {
  .bottom-sheet {
    left: 50%;
    transform: translate(-50%, 100%);
    max-width: 28rem;
    border-radius: 1.25rem 1.25rem 0 0;
  }
  .bottom-sheet.visible {
    transform: translate(-50%, 0);
  }
  .bottom-sheet.hidden {
    transform: translate(-50%, 100%);
  }
}

/* Brújula del logo: origen del giro.
   El wrapper .aguja-spin NO lleva atributo transform, así que este origen
   NO se suma al rotate(45 32 32.5) del <g> interior. Si se sumara, al
   detenerse la aguja quedaba corrida (+25.88px X / -10.49px Y) y el centro
   de las agujas aparecía a la altura de la "S" de SALIR (bug 2026-10-01). */
.logo-sd .aguja-spin {
  transform-box: view-box;
  transform-origin: 32px 32.5px;
  will-change: transform;
}


/* Fix: Leaflet attribution below navbar (navbar uses z-40) */
.leaflet-control-attribution,
.leaflet-bottom.leaflet-left .leaflet-control-attribution,
.leaflet-bottom.leaflet-right .leaflet-control-attribution {
  z-index: 30 !important;
  position: relative;
}


/* Fix attribution vs navbar */

/* Fix: evitar solape del attribution de Leaflet con navbar fijo */
.leaflet-bottom {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 56px) !important;
}
@media (min-width: 768px) {
  .leaflet-bottom {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
  }
}
.leaflet-control-attribution {
  z-index: 30 !important;
  position: relative;
  max-width: calc(100vw - 120px);
}

/* ===== PWA — aviso de instalación =====
   Archivos: frontend/js/pwa.js (lógica) + este bloque (estilos).
   Inyectados por JS en <body>, asi que viven aqui y no en las plantillas.

   OJO — por que NO se usa la utilidad .hidden de Tailwind para mostrar/ocultar:
   styles.css se carga DESPUES de tailwind-compiled.css, asi que una regla
   .pwa-banner { display: flex } (0,1,0) le gana a .hidden { display: none }
   (0,1,0) solo por orden de carga. Es el mismo bug que se repite con
   .scroll-loader / .mobile-bottom-bar. Por eso el estado va en una clase
   propia (.pwa-banner--visible) y nunca se mezcla con .hidden. */

/* Botón "Instalar App" del sidebar (lo dibuja ui.js). Se oculta con una clase
   propia y NO con la utilidad .hidden de Tailwind: el botón lleva
   .nav-grupo-btn, que en template.css define display:flex y se carga DESPUÉS
   de tailwind-compiled.css, de modo que .hidden{display:none} perdía por orden
   de carga y el botón quedaba siempre visible. */
.sd-pwa-install--oculto { display: none !important; }

.pwa-banner-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 56px); /* sobre la barra inferior movil */
  z-index: 60; /* bajo los modales (#modal-detalle = 80) */
  display: flex;
  justify-content: center;
  padding: 0 0.75rem 0.5rem;
  pointer-events: none;
}
@media (min-width: 768px) {
  .pwa-banner-wrap { display: none; } /* el banner es solo movil, por decision */
}

.pwa-banner {
  pointer-events: auto;
  width: 100%;
  max-width: 26rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  background: #fff;
  border: 2px solid #0ee6a0; /* verde neón (versión brillante del teal del sitio) */
  border-radius: 0.875rem;
  box-shadow: 0 0 18px rgba(14, 230, 160, 0.45), 0 10px 25px -5px rgba(15, 23, 42, 0.18), 0 8px 10px -6px rgba(15, 23, 42, 0.10);
  /* fuera de pantalla por defecto */
  opacity: 0;
  transform: translateY(140%);
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.pwa-banner--visible {
  opacity: 1;
  transform: translateY(0);
}

.pwa-banner__icon {
  flex: 0 0 auto;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.625rem;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.pwa-banner__txt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}
.pwa-banner__title {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}
.pwa-banner__msg {
  font-size: 0.6875rem;
  color: #64748b;
  line-height: 1.35;
}
.pwa-banner__acts {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pwa-btn {
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 800;
  border-radius: 0.5rem;
  padding: 0.375rem 0.625rem;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.pwa-btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.pwa-btn--primary:hover { background: var(--color-primary-dark); }
.pwa-btn--ghost {
  background: transparent;
  color: #64748b;
  border-color: #e2e8f0;
}
.pwa-btn--ghost:hover { background: #f1f5f9; color: #0f172a; }
.pwa-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Modal con los pasos manuales de iOS Safari */
.pwa-ios-wrap {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.pwa-ios-wrap--visible { opacity: 1; pointer-events: auto; }
.pwa-ios-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}
.pwa-ios {
  position: relative;
  width: 100%;
  max-width: 20rem;
  background: #fff;
  border: 2px solid #0ee6a0; /* verde neón (versión brillante del teal del sitio) */
  border-radius: 1rem;
  padding: 1.125rem;
  box-shadow: 0 0 18px rgba(14, 230, 160, 0.45), 0 20px 40px -12px rgba(15, 23, 42, 0.35);
  transform: scale(0.94);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.pwa-ios-wrap--visible .pwa-ios { transform: scale(1); }
.pwa-ios__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}
.pwa-ios__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.pwa-ios__title {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0f172a;
}
.pwa-ios__steps {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.pwa-ios__steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #334155;
  line-height: 1.4;
}
.pwa-ios__steps i {
  color: var(--color-primary);
  margin-top: 0.0625rem;
  flex: 0 0 auto;
  width: 1rem;
  text-align: center;
}
.pwa-ios__ok { width: 100%; padding: 0.5625rem; font-size: 0.8125rem; }

/* Modo oscuro */
html.dark .pwa-banner {
  background: #1e293b;
  border-color: #34d399; /* verde neón atenuado para fondo oscuro */
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.35), 0 10px 25px -5px rgba(15, 23, 42, 0.5), 0 8px 10px -6px rgba(15, 23, 42, 0.3);
}
html.dark .pwa-banner__title { color: #f1f5f9; }
html.dark .pwa-banner__msg { color: #94a3b8; }
html.dark .pwa-btn--ghost { color: #94a3b8; border-color: #475569; }
html.dark .pwa-btn--ghost:hover { background: #334155; color: #f1f5f9; }
html.dark .pwa-ios {
  background: #1e293b;
  border-color: #34d399; /* verde neón atenuado para fondo oscuro */
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.35), 0 20px 40px -12px rgba(15, 23, 42, 0.5);
}
html.dark .pwa-ios__title { color: #f1f5f9; }
html.dark .pwa-ios__steps li { color: #cbd5e1; }

@media (prefers-reduced-motion: reduce) {
  .pwa-banner,
  .pwa-ios,
  .pwa-ios-wrap { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   FELICITACIÓN DE CUMPLEAÑOS (pantalla completa, solo visitantes)
   Clases .fc-* — compartidas por temporada y clásica (styles.css)
   ════════════════════════════════════════════════════════════════════ */

.fc-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;            /* por encima del banner de verificación (9999) */
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: radial-gradient(1200px 600px at 50% -10%, #0f766e 0%, #0d9488 45%, #0f172a 100%);
}
.fc-overlay.hidden { display: none; }

/* Confeti decorativo (CSS puro, sin librerías — PWA offline) */
.fc-confeti {
  position: absolute;
  top: -3rem;
  width: 0.55rem;
  height: 0.95rem;
  border-radius: 2px;
  opacity: 0;
  animation: fc-caer 5.5s linear infinite;
  will-change: transform, opacity;
}
.fc-confeti--1  { left: 5%;  background: #f59e0b; animation-delay: 0.0s; }
.fc-confeti--2  { left: 12%; background: #ec4899; animation-delay: 0.6s; }
.fc-confeti--3  { left: 19%; background: #38bdf8; animation-delay: 1.1s; }
.fc-confeti--4  { left: 26%; background: #facc15; animation-delay: 0.3s; }
.fc-confeti--5  { left: 33%; background: #22c55e; animation-delay: 1.6s; }
.fc-confeti--6  { left: 40%; background: #fb7185; animation-delay: 0.9s; }
.fc-confeti--7  { left: 47%; background: #a78bfa; animation-delay: 2.0s; }
.fc-confeti--8  { left: 54%; background: #f59e0b; animation-delay: 1.3s; }
.fc-confeti--9  { left: 61%; background: #34d399; animation-delay: 0.5s; }
.fc-confeti--10 { left: 68%; background: #f472b6; animation-delay: 2.4s; }
.fc-confeti--11 { left: 75%; background: #38bdf8; animation-delay: 1.8s; }
.fc-confeti--12 { left: 82%; background: #facc15; animation-delay: 0.2s; }
.fc-confeti--13 { left: 89%; background: #fb7185; animation-delay: 2.2s; }
.fc-confeti--14 { left: 95%; background: #22c55e; animation-delay: 1.0s; }
.fc-confeti--15 { left: 24%; background: #f59e0b; animation-delay: 2.8s; }
.fc-confeti--16 { left: 49%; background: #ec4899; animation-delay: 3.2s; }
.fc-confeti--17 { left: 71%; background: #a78bfa; animation-delay: 3.6s; }
.fc-confeti--18 { left: 9%;  background: #34d399; animation-delay: 4.0s; }
.fc-confeti--19 { left: 64%; background: #facc15; animation-delay: 4.4s; }
.fc-confeti--20 { left: 36%; background: #38bdf8; animation-delay: 4.8s; }
.fc-confeti--21 { left: 58%; background: #22c55e; animation-delay: 2.6s; }
.fc-confeti--22 { left: 86%; background: #fb7185; animation-delay: 3.0s; }
.fc-confeti--23 { left: 16%; background: #a78bfa; animation-delay: 3.4s; }
.fc-confeti--24 { left: 43%; background: #f59e0b; animation-delay: 3.9s; }

@keyframes fc-caer {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translateY(105vh) rotate(680deg); opacity: 0.9; }
}

/* Botón cerrar (✕) */
.fc-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.fc-close:hover { background: rgba(255, 255, 255, 0.32); }

/* Tarjeta central */
.fc-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 29rem;
  background: #fff;
  border-radius: 1.5rem;
  padding: 2.25rem 1.75rem 2rem;
  text-align: center;
  box-shadow: 0 30px 60px -18px rgba(2, 6, 23, 0.55);
}
.fc-emoji {
  font-size: 4.25rem;
  line-height: 1;
  margin-bottom: 0.75rem;
  animation: fc-latido 1.6s ease-in-out infinite;
}
@keyframes fc-latido {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
.fc-titulo {
  margin: 0 0 0.5rem;
  font-size: 1.65rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #0f172a;
  overflow-wrap: break-word;
}
.fc-subtitulo {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #475569;
}
.fc-btn-gracias {
  border: none;
  border-radius: 9999px;
  padding: 0.8rem 2.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #0d9488, #0f766e);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease;
  box-shadow: 0 10px 22px -8px rgba(13, 148, 136, 0.6);
}
.fc-btn-gracias:hover { opacity: 0.92; }
.fc-btn-gracias:active { transform: scale(0.97); }

/* Modo oscuro */
html.dark .fc-overlay {
  background: radial-gradient(1200px 600px at 50% -10%, #134e4a 0%, #115e59 45%, #020617 100%);
}
html.dark .fc-card { background: #1e293b; }
html.dark .fc-titulo { color: #f1f5f9; }
html.dark .fc-subtitulo { color: #cbd5e1; }

/* Móvil compacto */
@media (max-width: 480px) {
  .fc-card { padding: 1.75rem 1.25rem 1.5rem; }
  .fc-emoji { font-size: 3.5rem; }
  .fc-titulo { font-size: 1.4rem; }
  .fc-close { top: 0.75rem; right: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-confeti,
  .fc-emoji { animation: none; }
  .fc-confeti { opacity: 0; }
}