/* ==========================================================================
   TOKENS
   ========================================================================== */
:root{
  --bg: #FBF3EF;
  --card: #FFFDFB;
  --ink: #2A211D;
  --ink-soft: #7A6A61;
  --line: #ECDDD4;
  --accent: #A63A52;
  --accent-soft: #F1D8DC;
  --gold: #B9872F;
  --radius-lg: 20px;
  --radius-md: 12px;
  --user-accent: var(--accent);
  --user-accent-soft: var(--accent-soft);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
/* CORREGIDO (overflow-x en móvil): red de seguridad global. La causa raíz
   real está resuelta en .dash-search (ver más abajo, min-width:0), pero
   dejamos esto como respaldo — si algún componente futuro trae de nuevo
   un ancho fijo en px, esto evita que la PÁGINA ENTERA se desplace de
   lado en vez de solo recortar ese elemento. No se aplica a <svg> a
   propósito: los íconos ya usan un tamaño fijo intencional (ver
   .dash-nav-icon, etc.) y forzarles max-width:100% los deformaría dentro
   de contenedores angostos como los chips o los botones circulares. */
html{ overflow-x: hidden; max-width: 100%; }
body{ overflow-x: hidden; max-width: 100%; }
img{ max-width: 100%; height: auto; }
body{
  font-family: 'Work Sans', sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{ font-family: 'Fraunces', serif; font-weight: 500; margin: 0; }
button{ font-family: inherit; cursor: pointer; }
input{ font-family: inherit; }
a{ color: inherit; }

/* ==========================================================================
   ONBOARDING
   ========================================================================== */
.onboarding-body{
  min-height: 100vh;
  min-height: 100dvh; /* CORREGIDO: fallback moderno para Safari/iOS, ver nota en .dash-body */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}
.onb-shell{ width: 100%; max-width: 440px; }

.onb-progress{
  display:flex; gap:8px; justify-content:center; margin-bottom:28px;
}
.onb-progress .dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--line);
  transition: background .25s ease, transform .25s ease;
}
.onb-progress .dot.active{ background: var(--accent); transform: scale(1.25); }
.onb-progress .dot.done{ background: var(--gold); }

.onb-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  box-shadow: 0 1px 2px rgba(42,33,29,0.04);
}

.onb-step{ animation: fadeUp .35s ease; }
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

.onb-eyebrow{
  margin:0 0 6px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.onb-title{
  font-size: 26px;
  line-height: 1.25;
  margin-bottom: 22px;
}

.onb-input{
  width:100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 16px;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color .2s ease;
}
.onb-input:focus{ border-color: var(--accent); }
.onb-input::placeholder{ color: #B8A99F; }

.onb-actions{ margin-top: 22px; display:flex; justify-content:flex-end; }
.onb-actions-split{ justify-content: space-between; align-items:center; }

.btn-continue{
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  transition: background .2s ease, transform .15s ease;
}
.btn-continue:hover{ background: var(--accent); }
.btn-continue:active{ transform: scale(0.98); }

.btn-ghost{
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-ghost:hover{ color: var(--ink); }

/* Choice cards (estilo, forma de uña) */
.onb-choices{ display:flex; flex-direction:column; gap:10px; }
.onb-choices-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.choice-card{
  display:flex; align-items:center; gap:14px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  text-align:left;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.choice-card:hover{ border-color: var(--accent); }
.choice-card.selected{ border-color: var(--accent); background: var(--accent-soft); }
.choice-card:active{ transform: scale(0.99); }

.choice-compact{ flex-direction: column; align-items: center; text-align:center; gap:8px; padding: 18px 10px; }

.choice-label{ font-weight: 500; font-size: 15px; }
.choice-sub{ font-size: 13px; color: var(--ink-soft); }

.choice-swatch{ width:34px; height:34px; border-radius:50%; flex-shrink:0; }
.swatch-minimalista{ background: linear-gradient(135deg,#EADFD6,#C9B8A8); }
.swatch-clasico{ background: linear-gradient(135deg,#F3E3E6,#D98CA0); }
.swatch-llamativo{ background: conic-gradient(from 90deg,#A63A52,#B9872F,#4F7A5B,#7B5AA6,#A63A52); }

.shape-icon{ width:26px; height:34px; border-radius: 13px 13px 6px 6px; background: var(--ink-soft); }
.shape-almendra{ border-radius: 50% 50% 8px 8px; }
.shape-cuadrada{ border-radius: 4px; }
.shape-ovalada{ border-radius: 50%; height:32px; }
.shape-stiletto{ border-radius: 50% 50% 0 0 / 70% 70% 0 0; clip-path: polygon(50% 0%, 100% 60%, 80% 100%, 20% 100%, 0% 60%); }

/* Color palette matcher */
.color-palette{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.color-swatch-btn{
  width:36px; height:36px; border-radius:50%;
  border: 2px solid transparent;
  transition: transform .15s ease, border-color .15s ease;
}
.color-swatch-btn.match{ transform: scale(1.18); border-color: var(--ink); }
.color-match-text{ margin-top:12px; font-size:13px; color: var(--ink-soft); min-height: 18px; }

.onb-footnote{ text-align:center; font-size:13px; color: var(--ink-soft); margin-top:18px; }

/* Login / registro: cuentas */
.auth-label{ display:block; font-size:13px; color: var(--ink-soft); margin: 14px 0 6px; }
.auth-label:first-of-type{ margin-top: 0; }
.auth-banner{
  font-size: 13px; padding: 10px 14px; border-radius: var(--radius-md);
  margin-bottom: 16px;
}
.auth-banner-error{ background: #F7DEDE; color: #8C2E2E; }
.auth-banner-ok{ background: #E4EEE6; color: #3F6349; }
.auth-switch{ text-align:center; font-size: 14px; margin-top: 20px; }
.auth-switch a{ color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.back-link{
  background:none; border:none; color: var(--ink-soft); font-size: 13px;
  padding: 0; margin-bottom: 18px; text-decoration: underline; text-underline-offset: 3px;
}
.back-link:hover{ color: var(--ink); }
.field-error{ color:#8C2E2E; font-size:12px; min-height:16px; margin: 8px 0 0; }
.auth-flow{ position: relative; }

/* ==========================================================================
   DASHBOARD
   ========================================================================== */
/* CORREGIDO (Safari/iOS): min-height:100vh solo no considera la barra de
   direcciones que aparece/desaparece al hacer scroll — el contenido podía
   quedar cortado unos px hasta que el usuario tocaba la pantalla. 100dvh
   sí se recalcula con el viewport visible real; se deja 100vh primero
   como fallback para navegadores que aún no soportan unidades dvh. */
.dash-body{ background: var(--bg); min-height:100vh; min-height:100dvh; }

.dash-shell{ display:flex; min-height:100vh; min-height:100dvh; }

.dash-sidebar{
  width: 220px;
  flex-shrink:0;
  background: var(--card);
  border-right: 1px solid var(--line);
  padding: 24px 16px;
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.dash-brand{
  font-family:'Fraunces', serif; font-size:20px; margin-bottom:24px; padding:0 10px;
}
.dash-brand span{ color: var(--user-accent); }

.dash-nav-item{
  display:flex; align-items:center; gap:12px;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration:none;
  transition: background .2s ease, color .2s ease;
}
.dash-nav-item:hover{ background: var(--user-accent-soft); color: var(--ink); }
.dash-nav-item.active{ background: var(--user-accent-soft); color: var(--ink); font-weight:500; }
.dash-nav-icon{ width:18px; height:18px; flex-shrink:0; opacity:.8; }

.dash-main{ flex:1; padding: 24px 32px 60px; max-width: 1200px; }

.dash-topbar{ display:flex; align-items:center; gap:20px; margin-bottom: 8px; min-width: 0; }
.dash-search{
  flex:1; min-width: 0; max-width: 480px;
  padding: 12px 18px;
  border-radius: 999px;
  border:1px solid var(--line);
  background:#fff;
  font-size:16px;
}
.dash-avatar{
  width:38px; height:38px; border-radius:50%;
  background: var(--user-accent);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:500; margin-left:auto;
}
/* CORREGIDO: faltaba esto por completo. Sin background-size, cuando JS
   pone background-image (dashboard_14.js -> setAvatarUrl) el navegador
   muestra la foto a su tamaño NATURAL (background-size:auto por defecto)
   en vez de encajarla en el círculo de 38px — por eso se veía solo una
   esquina ampliada y en blanco de la foto en vez de la foto completa. */
.dash-avatar.has-photo{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.dash-preview-banner{
  background: #FBEAD2; color:#8A5A0B; font-size:13px; padding:10px 16px;
  border-radius: var(--radius-md); margin: 14px 0 0; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.dash-preview-banner a{ color:#8A5A0B; text-decoration:underline; font-weight:500; margin-left:auto; }

.dash-greeting{ margin: 28px 0 20px; }
.dash-greeting h1{ font-size: 22px; }
.dash-greeting p{ margin:6px 0 0; color: var(--ink-soft); font-size:14px; }

.dash-filters{ display:flex; gap:10px; margin-bottom: 22px; flex-wrap:wrap; }
.dash-chip{
  min-height: 44px; padding: 8px 18px; border-radius:999px; font-size:13px;
  border:1px solid var(--line); background:#fff; color: var(--ink-soft);
  display:inline-flex; align-items:center;
}
.dash-chip.active{ background: var(--user-accent); border-color: var(--user-accent); color:#fff; }

.dash-grid{ columns: 4 240px; column-gap: 16px; }
.dash-card{
  break-inside: avoid; margin-bottom:16px;
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; position:relative;
}
.dash-card-media{ display:flex; align-items:center; justify-content:center; padding: 28px 0 14px; }
.dash-card-caption{ padding: 0 14px 14px; }
.dash-card-caption p{ margin:0; font-size:13px; font-weight:500; }
.dash-card-caption span{ font-size:12px; color: var(--ink-soft); }
.dash-card-salon{ display:block; margin-top:2px; color: var(--accent); font-weight:500; }
.dash-fav{
  position:absolute; top:10px; right:10px;
  width:30px; height:30px; border-radius:50%;
  background: rgba(255,255,255,0.85); border:none;
  opacity:0; transition: opacity .2s ease;
  display:flex; align-items:center; justify-content:center;
}
/* Área táctil real de 44px (mínimo recomendado) SIN agrandar el círculo
   visible de 30px — agrandarlo se veía invasivo sobre la foto de la
   tarjeta. El ::before es invisible pero extiende la zona donde el toque
   sigue contando como "tocaste el corazón". */
.dash-fav::before{
  content:''; position:absolute; inset: -7px;
}
.dash-card:hover .dash-fav{ opacity:1; }
/* Un diseño ya marcado como favorito debe quedar visible siempre, no solo
   en hover (antes se perdía esta regla y el corazón parecía "no guardarse"). */
.dash-fav.is-fav{ opacity: 1; }

/* Corazón que "vuela" desde la tarjeta/ficha hasta el ítem "Favoritos" del
   menú lateral (ver dashboard.js -> flyHeartToFavorites()). Se crea con
   position/left/top en JS; sin position:fixed y sin transition aquí, el
   corazón no se anima, solo aparece y desaparece de golpe. */
.fly-heart{
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  transition: transform 1.2s ease, opacity 1.2s ease;
}

/* Pulso sobre el ícono de "Favoritos" en el menú cuando se guarda un nuevo
   favorito (ver dashboard.js, clase añadida temporalmente a .dash-nav-item). */
@keyframes dashNavPulse{
  0%   { transform: scale(1); }
  30%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}
.dash-nav-pulse .dash-nav-icon{
  animation: dashNavPulse .45s ease;
}

/* Botón de menú móvil (oculto en escritorio). CORREGIDO: 38px quedaba
   por debajo del mínimo de 44px recomendado para controles táctiles. */
.dash-menu-btn{
  display:none; background:#fff; border:1px solid var(--line); border-radius: 10px;
  width:44px; height:44px; align-items:center; justify-content:center; flex-shrink:0;
}

/* Fondo oscuro detrás del menú al abrirse en móvil */
.dash-backdrop{
  display:none; position: fixed; inset:0; background: rgba(42,33,29,0.45); z-index: 90;
}
.dash-backdrop.open{ display:block; }

/* Vistas del menú (Salones / Reservas / Favoritos / Perfil) */
.dash-simple-list{ display:flex; flex-direction:column; gap:10px; }
.dash-list-item{
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 14px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.dash-list-item .info{ flex:1; min-width:0; }
.dash-list-item .info p{ margin:0; font-size:14px; font-weight:500; }
.dash-list-item .info span{ font-size:12px; color:var(--ink-soft); }
.dash-list-item .actions{ display:flex; gap:8px; flex-shrink:0; }

/* Tarjeta de salón clicable (abre la ficha del negocio) */
.dash-list-item-clickable{ cursor:pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.dash-list-item-clickable:hover{ border-color: var(--accent); box-shadow: 0 1px 4px rgba(42,33,29,0.06); }
.dash-salon-thumb{
  width:46px; height:46px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.dash-salon-thumb-placeholder{
  display:flex; align-items:center; justify-content:center;
  background: var(--user-accent-soft); color: var(--user-accent);
  font-family:'Fraunces', serif; font-weight:500; font-size:16px;
}

/* Calificación por estrellas (en "Mis reservas", citas completadas) */
.dash-rate-stars{ display:flex; gap:3px; margin-top:6px; }
.dash-star{ background:none; border:none; padding:2px; line-height:0; }
.dash-star svg{ transition: transform .1s ease; }
.dash-star:hover svg{ transform: scale(1.12); }

.dash-badge{ font-size:12px; padding:4px 10px; border-radius:999px; font-weight:500; }
.badge-pending{ background:#FBEAD2; color:#8A5A0B; }
.badge-confirmed{ background:#DDEAF3; color:#245073; }
.badge-completed{ background:#E4EEE6; color:#3F6349; }
.badge-cancelled{ background:#F7DEDE; color:#8C2E2E; }

/* NUEVO — foto/diseño solicitado y cotización dentro de "Mis reservas" */
.dash-ref-thumb{
  width:46px; height:46px; border-radius: var(--radius-md); object-fit:cover; flex-shrink:0;
}
.dash-quote-box{
  margin-top:10px; padding:10px 12px; border-radius: var(--radius-md);
  background: var(--user-accent-soft, #FBEAD2); font-size:13px;
}
.dash-quote-head{ display:flex; justify-content:space-between; align-items:center; font-weight:500; }
.dash-quote-items{ margin:8px 0 0; padding-left:16px; font-size:12px; color: var(--ink-soft); }
.dash-quote-notes{ margin:8px 0 0; font-size:12px; color: var(--ink-soft); font-style:italic; }
.dash-quote-actions{ display:flex; gap:8px; margin-top:10px; }
.dash-quote-actions .dash-quote-aceptar{ border-color: var(--accent); color: var(--accent); }

.dash-btn-sm{
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 14px;
  font-size:12px; color: var(--ink-soft);
}
.dash-btn-sm:hover{ border-color: var(--accent); color: var(--accent); }

.dash-perfil-form{
  display:flex; flex-direction:column; gap:14px; max-width: 420px;
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 24px;
}
.dash-perfil-form label{ font-size:13px; color: var(--ink-soft); display:flex; flex-direction:column; gap:6px; }
.dash-perfil-form input, .dash-perfil-form select{
  padding:11px 14px; border:1px solid var(--line); border-radius: var(--radius-md); font-size:16px; color: var(--ink);
}
.dash-perfil-status{ font-size:13px; color: var(--ink-soft); margin:0; min-height:16px; }

/* NUEVO: resultados de salones dentro del buscador ("Busca estilos,
   salones, técnicas..."). Aparece arriba de la grilla de diseños cuando
   el término escrito coincide con el nombre o dirección de algún salón. */
.dash-search-salones{
  display:flex; flex-direction:column; gap:8px; margin: 4px 0 20px;
}
.dash-search-salones-label{
  font-size:11px; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;
}
.dash-search-salon-item{
  display:flex; align-items:center; gap:12px; text-align:left;
  padding:10px 14px; border:1px solid var(--line); border-radius: var(--radius-md);
  background:#fff; cursor:pointer; transition: border-color .15s ease;
}
.dash-search-salon-item:hover{ border-color: var(--accent); }
.dash-search-salon-avatar{
  width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0;
  background: var(--line);
}
.dash-search-salon-avatar-placeholder{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background: var(--user-accent); color:#fff; display:flex;
  align-items:center; justify-content:center; font-size:14px; font-weight:500;
}
.dash-search-salon-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dash-search-salon-text strong{ font-size:14px; font-weight:500; }
.dash-search-salon-text span{ font-size:12px; color: var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* NUEVO: bloque de foto de perfil de la clienta. El HTML/JS/PHP ya
   existían (input file, preview, placeholder con la inicial) pero nunca
   se les agregó estilo — por eso se veían como texto plano ("Z" /
   "Cambiar foto" apilados) en vez de un avatar circular con botón. Como
   #perfil-foto-preview y #perfil-foto-placeholder se alternan por
   display:none/block desde JS (nunca los dos visibles a la vez), no hace
   falta superponerlos con position:absolute — basta con darles el mismo
   tamaño y centrarlos en columna junto con el botón. */
.dash-perfil-foto{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  margin-bottom: 6px; padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
#perfil-foto-preview{
  width:88px; height:88px; border-radius:50%; object-fit:cover;
  border:2px solid var(--line); background: var(--line);
}
.dash-perfil-foto-placeholder{
  width:88px; height:88px; border-radius:50%;
  background: var(--user-accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-size:32px; font-weight:500;
}
.dash-foto-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500; color: var(--accent);
  border:1px solid var(--accent); border-radius:999px;
  padding:8px 18px; background:#fff; cursor:pointer;
  transition: background .15s ease, color .15s ease;
}
.dash-foto-btn:hover{ background: var(--accent); color:#fff; }
.dash-foto-btn:active{ transform: scale(0.98); }

/* NUEVO: botón "Intentar de nuevo" dentro del aviso de ubicación en
   "Salones cerca de ti" (ver dashboard.js -> loadSalones()). */
.dash-link-btn{
  background:none; border:none; padding:0; color: var(--accent);
  text-decoration:underline; font-size:13px; cursor:pointer;
}

@media (max-width: 860px){
  .dash-menu-btn{ display:flex; }

  .dash-sidebar{
    display:flex; position: fixed; top:0; left:0; height:100vh; height:100dvh; width: 250px; z-index: 95;
    transform: translateX(-100%); transition: transform .25s ease; box-shadow: 2px 0 12px rgba(0,0,0,0.15);
    overflow-y: auto; padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
  .dash-sidebar.open{ transform: translateX(0); }

  .dash-grid{ columns: 2 160px; }
  .dash-main{ padding: 20px; }
  /* CORREGIDO: 20px de gap entre menú-buscador-avatar era holgado de
     escritorio; en pantallas angostas (320–375px) le quitaba al buscador
     el espacio que ahora ya puede ceder gracias a min-width:0. */
  .dash-topbar{ gap: 12px; }
}

/* Teléfonos muy angostos: un poco más de margen de maniobra en el
   buscador reduciendo su padding horizontal, sin tocar la altura (se
   mantiene por encima de 44px de área táctil). */
@media (max-width: 380px){
  .dash-search{ padding: 12px 14px; }
}

/* =====================================================================
   Salones cerca de ti — tarjetas cuadradas (imagen de portada + barra
   inferior con avatar de la administradora, nombre, dirección y distancia)
   ===================================================================== */
.salon-card-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.salon-card{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; cursor: pointer; transition: box-shadow .2s ease, border-color .2s ease;
}
.salon-card:hover{ border-color: var(--user-accent); box-shadow: 0 4px 14px rgba(42,33,29,0.08); }
.salon-card-media{ position: relative; aspect-ratio: 1 / 1; background: var(--user-accent-soft); }
.salon-card-cover{ width: 100%; height: 100%; object-fit: cover; display: block; }
.salon-card-cover-placeholder{
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-size: 44px; color: var(--user-accent);
}
.salon-card-bottom{
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-top: 1px solid var(--line);
}
.salon-card-avatar{
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line);
}
.salon-card-avatar-placeholder{
  display: flex; align-items: center; justify-content: center;
  background: var(--user-accent-soft); color: var(--user-accent);
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 14px;
}
.salon-card-text{ flex: 1; min-width: 0; }
.salon-card-name{
  margin: 0; font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.salon-card-address{
  display: block; font-size: 11px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* CORREGIDO: la distancia ahora flota SOBRE la foto (esquina superior
   derecha), no comparte fila con el nombre — antes, en 2 columnas, el
   nombre quedaba apretado en apenas ~40px de ancho real. */
.salon-card-distance{
  position: absolute; top: 8px; right: 8px;
  display: flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: #fff;
  background: rgba(42,33,29,0.55);
  -webkit-backdrop-filter: blur(2px); /* CORREGIDO: Safari/iOS ignora backdrop-filter sin este prefijo */
  backdrop-filter: blur(2px);
  padding: 4px 9px; border-radius: 999px;
}

@media (max-width: 480px){
  .salon-card-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .salon-card-name{ font-size: 12px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
  .salon-card-address{ display: none; } /* con 2 columnas, la dirección larga rompe el diseño; el nombre + distancia bastan */
  .salon-card-bottom{ padding: 8px 10px; align-items: flex-start; }
  .salon-card-distance{ font-size: 10px; padding: 3px 7px; }
}