/* ============================================================
   Páginas públicas (reserva /r/{slug} y cuenta de cliente /cliente)
   ============================================================
   Página a ancho completo, sin "tarjeta flotando en el medio": en el celu
   se ve como una app; en compu, contenido a la izquierda y el resumen de
   la reserva fijo a la derecha. El tema (claro/oscuro) lo elige el negocio
   en Config › Reservas online; reserva.js pone data-theme en <html>.
   cliente.css suma lo propio de /cliente encima de esta base. */

:root{
  --bg: #0e0f12;
  --bg-panel: #16181c;
  --bg-panel-2: #1e2126;
  --line: #2a2d34;
  --line-suave: #212329;
  --text: #f1f1f3;
  --text-dim: #9a9fa8;
  --accent: #d6a057;
  --accent-vivido: #d6a057;
  --accent-tinta: #1a1206;
  --accent-soft: rgba(214,160,87,0.12);
  --producto: #6f98c9;
  --producto-soft: rgba(111,152,201,0.14);
  --danger: #e0645b;
  --ok: #62b27a;
  --ok-soft: rgba(98,178,122,0.14);
  --radius: 12px;
  --sombra-barra: 0 -8px 24px rgba(0,0,0,0.35);
  --font: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-family: var(--font);
}
html[data-theme="light"]{
  --bg: #f6f5f3;
  --bg-panel: #ffffff;
  --bg-panel-2: #f0eeeb;
  --line: #e2dfda;
  --line-suave: #ece9e5;
  --text: #1c1b1f;
  --text-dim: #6c6a70;
  --accent: #9a6219;
  --accent-vivido: #c98a3e;
  --accent-tinta: #1d1407;
  --accent-soft: rgba(201,138,62,0.13);
  --producto: #2f5f96;
  --producto-soft: rgba(47,95,150,0.10);
  --danger: #b5382f;
  --ok: #2f7d4a;
  --ok-soft: rgba(47,125,74,0.10);
  --sombra-barra: 0 -6px 20px rgba(30,25,15,0.08);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background: var(--bg); color: var(--text); min-height:100vh;
  font-family: var(--font); font-size:15px; line-height:1.45;
  padding: env(safe-area-inset-top,0) env(safe-area-inset-right,0) 0 env(safe-area-inset-left,0);
}
button, input, select, textarea{ font-family: inherit; }
:focus-visible{ outline:2px solid var(--accent-vivido); outline-offset:2px; }
.oculto{ display:none !important; }
h1, h2, h3{ letter-spacing:-0.01em; }

/* ---------- Esqueleto ---------- */
.r-wrap{ max-width: 1040px; margin:0 auto; padding: 0 0 120px; }
.r-card{ padding: 0; }
.r-contenido{ padding: 0 18px; }

/* ---------- Cabecera del negocio ---------- */
.r-negocio-header{
  display:flex; align-items:center; gap:14px;
  padding: 26px 0 20px;
}
.r-logo{
  flex:0 0 60px; width:60px; height:60px; border-radius:16px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg-panel-2); color: var(--accent); border:1px solid var(--line);
}
.r-logo img{ width:100%; height:100%; object-fit:cover; }
.r-logo svg{ width:28px; height:28px; fill:none; stroke: currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.r-negocio-texto{ flex:1; min-width:0; }
.r-negocio-texto h1{ margin:0; font-size:1.45rem; font-weight:700; line-height:1.2; overflow-wrap:anywhere; }
.r-negocio-sub{ margin:3px 0 0; color: var(--text-dim); font-size:0.9rem; }
.r-negocio-contacto{ display:flex; gap:8px; }
.r-contacto-btn{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background: var(--bg-panel); color: var(--text); text-decoration:none;
}
.r-contacto-btn svg{ width:19px; height:19px; fill:none; stroke: currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* El logo de WhatsApp es un glifo relleno (como el de la app del dueño); dibujado a trazo se veía deforme. */
.r-contacto-btn svg.r-ico-relleno{ fill: currentColor; stroke: none; }
.r-contacto-btn:hover{ border-color: var(--text-dim); }

/* ---------- Turnos | Productos ---------- */
.r-nav{
  display:flex; gap:4px; padding:4px; margin: 0 0 22px;
  background: var(--bg-panel-2); border-radius:12px;
}
.r-nav-btn{
  flex:1; min-height:42px; border:none; border-radius:9px; background:none; cursor:pointer;
  font-size:0.95rem; font-weight:600; color: var(--text-dim);
}
.r-nav-btn.activo{ background: var(--bg-panel); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 0 0 1px var(--line); }

/* ---------- Pasos ---------- */
.r-seccion{ margin: 0 0 30px; }
.r-paso-titulo{ display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:1.08rem; font-weight:700; }
.r-paso-num{
  flex:0 0 24px; width:24px; height:24px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0.78rem; font-weight:700; background: var(--text); color: var(--bg);
}
.r-paso-extra{ margin-left:auto; font-size:0.85rem; font-weight:600; color: var(--text-dim); }
.r-paso-extra::first-letter{ text-transform:uppercase; }
.r-paso-ayuda{ margin:-8px 0 12px 34px; color: var(--text-dim); font-size:0.86rem; }
.r-titulo-seccion{ font-size:1.1rem; margin:0 0 8px; }

/* Servicios: filas, no cajas grises. */
.r-servicios-lista{ border:1px solid var(--line); border-radius: var(--radius); background: var(--bg-panel); overflow:hidden; }
.r-servicio-item{
  position:relative; display:flex; align-items:center; gap:14px; padding:15px 16px; cursor:pointer;
  border-bottom:1px solid var(--line-suave); transition: background .12s ease;
}
.r-servicio-item:last-child{ border-bottom:none; }
/* 6.4: el primero y el último copian la curva de la lista, así el borde del elegido no queda cortado en las esquinas. */
.r-servicio-item:first-child{ border-top-left-radius: calc(var(--radius) - 1px); border-top-right-radius: calc(var(--radius) - 1px); }
.r-servicio-item:last-child{ border-bottom-left-radius: calc(var(--radius) - 1px); border-bottom-right-radius: calc(var(--radius) - 1px); }
.r-servicio-item:hover{ background: color-mix(in srgb, var(--bg-panel-2) 55%, transparent); }
.r-servicio-item input{ position:absolute; opacity:0; pointer-events:none; }
.r-servicio-info{ flex:1; min-width:0; }
.r-servicio-nombre{ font-weight:600; font-size:0.98rem; }
.r-servicio-meta{ color: var(--text-dim); font-size:0.85rem; margin-top:2px; }
.r-servicio-precio{ font-weight:600; font-variant-numeric: tabular-nums; white-space:nowrap; }
.r-servicio-check{
  flex:0 0 24px; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:transparent; transition: all .12s ease;
}
.r-servicio-check svg{ width:14px; height:14px; fill:none; stroke: currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.r-servicio-item.activo{ background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-vivido); }
.r-servicio-item.activo .r-servicio-check{ background: var(--accent-vivido); border-color: var(--accent-vivido); color: var(--accent-tinta); }
/* 6.4: el anillo de foco solo con teclado (antes quedaba al tocar, como un contorno cortado arriba). */
.r-servicio-item:has(input:focus-visible){ box-shadow: inset 0 0 0 2px var(--accent-vivido); }

/* Días: tira horizontal. */
.r-chips-wrap{ display:flex; flex-wrap:wrap; gap:8px; }
.r-dias{
  flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; padding:2px 18px 6px; margin:0 -18px;
  scrollbar-width:none;
}
.r-dias::-webkit-scrollbar{ display:none; }
.r-chip{
  border:1px solid var(--line); background: var(--bg-panel); color: var(--text); cursor:pointer;
  border-radius:10px; min-height:44px; padding:0 14px; font-size:0.95rem; font-weight:600;
  font-variant-numeric: tabular-nums; transition: border-color .12s ease, background .12s ease;
}
.r-chip:hover{ border-color: var(--text-dim); }
.r-chip.activo{ background: var(--text); color: var(--bg); border-color: var(--text); }
.r-chip.deshabilitado, .r-chip:disabled{ opacity:.38; cursor:default; text-decoration: line-through; }
.r-dias .r-chip{
  flex:0 0 58px; height:72px; padding:0; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:1.2rem;
}
.r-chip-top{ font-size:0.72rem; font-weight:600; text-transform:capitalize; color: var(--text-dim); }
.r-chip-mes{ font-size:0.66rem; font-weight:600; text-transform:uppercase; color: var(--accent); letter-spacing:.04em; }
.r-chip.activo .r-chip-top, .r-chip.activo .r-chip-mes{ color: inherit; opacity:.75; }

/* Horarios: agrupados por franja. */
.r-horarios{ display:block; }
.r-horario-grupo + .r-horario-grupo{ margin-top:16px; }
.r-horario-grupo-titulo{ font-size:0.8rem; font-weight:600; color: var(--text-dim); margin:0 0 8px; }
.r-horario-grilla{ display:grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap:8px; }
.r-horario-grilla .r-chip{ padding:0; }

/* Oferta de sumar productos al turno. */
.r-oferta-catalogo-row{
  width:100%; display:flex; align-items:center; gap:14px; text-align:left; cursor:pointer;
  padding:14px 16px; border-radius: var(--radius); border:1px dashed var(--line); background: none; color: var(--text);
}
.r-oferta-catalogo-texto{ flex:1; display:flex; flex-direction:column; gap:2px; }
.r-oferta-catalogo-titulo{ font-weight:600; }
.r-oferta-catalogo-sub{ font-size:0.85rem; color: var(--text-dim); }
.r-oferta-catalogo-row[aria-pressed="true"]{ border-style:solid; border-color: var(--producto); }
#rBloqueProductosExtra{ margin-top:14px; }
.r-switch{ position:relative; flex:0 0 42px; height:24px; border-radius:999px; background: var(--line); transition: background .15s ease; }
.r-switch-knob{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition: transform .15s ease; box-shadow:0 1px 2px rgba(0,0,0,.25); }
[aria-pressed="true"] .r-switch{ background: var(--producto); }
[aria-pressed="true"] .r-switch-knob{ transform: translateX(18px); }

/* ---------- Formularios ---------- */
.r-label{ display:block; font-size:0.86rem; font-weight:600; margin: 14px 0 6px; }
.r-paso-titulo + .r-label{ margin-top:0; }
.r-label-opc{ font-weight:400; color: var(--text-dim); margin-left:4px; }
.r-input{
  width:100%; min-height:48px; padding: 0 14px; border-radius:10px; font-size:1rem;
  background: var(--bg-panel); border:1px solid var(--line); color: var(--text);
  transition: border-color .12s ease;
}
.r-input::placeholder{ color: color-mix(in srgb, var(--text-dim) 70%, transparent); }
.r-input:focus{ outline:none; border-color: var(--accent-vivido); }
.r-textarea{ padding:12px 14px; min-height:72px; resize:vertical; line-height:1.4; }
.r-input-wrap{ position:relative; display:flex; align-items:center; }
.r-input-prefijo{ position:absolute; left:14px; color: var(--text-dim); font-size:1rem; pointer-events:none; }
.r-input.con-prefijo{ padding-left:32px; }
.r-input-icono{ position:absolute; left:14px; width:18px; height:18px; fill:none; stroke: var(--text-dim); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.r-input.con-icono{ padding-left:42px; }

/* Teléfono con bandera (mismo componente en las dos páginas, ver utils-compartidos.js). */
.r-tel-wrap, .tel-wrap{ position:relative; }
.r-tel-grupo, .tel-grupo{
  display:flex; align-items:stretch; min-height:48px; border-radius:10px; overflow:hidden;
  background: var(--bg-panel); border:1px solid var(--line);
}
.r-tel-grupo:focus-within, .tel-grupo:focus-within{ border-color: var(--accent-vivido); }
.r-tel-prefijo, .tel-prefijo{
  display:flex; align-items:center; gap:6px; padding:0 10px 0 12px; border:none; border-right:1px solid var(--line);
  background: var(--bg-panel-2); color: var(--text); cursor:pointer; font-size:0.95rem; font-weight:600;
}
.r-pais-bandera, .pais-bandera{ width:22px; height:16px; object-fit:cover; border-radius:2px; }
.r-pais-flecha, .pais-flecha{ width:14px; height:14px; fill:none; stroke: var(--text-dim); stroke-width:2; }
.r-tel-num, .tel-num{ flex:1; min-width:0; border:none; background:none; color: var(--text); padding:0 14px; font-size:1rem; }
.r-tel-num:focus, .tel-num:focus{ outline:none; }
.r-pais-panel, .pais-panel{
  position:absolute; z-index:30; left:0; right:0; top: calc(100% + 6px); max-height:280px; overflow:auto;
  padding:6px; border-radius:12px; background: var(--bg-panel); border:1px solid var(--line);
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
}
.r-pais-opcion, .pais-opcion{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:8px; cursor:pointer; font-size:0.94rem; }
.r-pais-opcion:hover, .r-pais-opcion.activa, .pais-opcion:hover, .pais-opcion.activa{ background: var(--bg-panel-2); }
.r-pais-opcion img, .pais-opcion img{ width:22px; height:16px; object-fit:cover; border-radius:2px; flex-shrink:0; }
.r-pais-opcion-nombre, .pais-opcion-nombre{ flex:1; min-width:0; }
.r-pais-opcion-codigo, .pais-opcion-codigo{ color: var(--text-dim); font-size:0.85rem; }

.r-hint{ color: var(--text-dim); font-size:0.84rem; margin: 10px 0 0; }
.r-error{ color: var(--danger); font-size:0.88rem; font-weight:600; margin: 10px 0 0; }
.r-vacio{ color: var(--text-dim); font-size:0.92rem; padding: 14px 2px; }
.r-dim{ color: var(--text-dim); }

/* ---------- Botones ---------- */
.r-btn-primario{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:50px; padding:0 20px;
  border:none; border-radius:12px; cursor:pointer; text-decoration:none;
  background: var(--accent-vivido); color: var(--accent-tinta); font-size:1rem; font-weight:700;
}
.r-btn-primario:hover{ filter:brightness(1.05); }
.r-btn-primario:disabled{ opacity:.6; cursor:default; }
.r-btn-ghost{
  display:flex; align-items:center; justify-content:center; width:100%; min-height:46px; padding:0 16px; margin-top:10px;
  border-radius:12px; border:1px solid var(--line); background: var(--bg-panel); color: var(--text);
  font-size:0.94rem; font-weight:600; cursor:pointer; text-decoration:none;
}
.r-btn-ghost:hover{ border-color: var(--text-dim); }
.r-btn-vaciar{ justify-self:start; width:auto; display:inline-flex; border:none; background:none; color: var(--text-dim); padding:0; min-height:36px; text-decoration:underline; text-underline-offset:3px; }
.r-link-secundario{
  background:none; border:none; padding:6px 0; cursor:pointer; text-decoration:underline; text-underline-offset:3px;
  color: var(--text-dim); font-size:0.88rem; font-weight:500;
}
.r-link-secundario:hover{ color: var(--text); }
.r-accesos-secundarios{ display:flex; flex-direction:column; align-items:center; gap:2px; padding: 8px 0 0; border-top:1px solid var(--line); margin-top:8px; }

/* ---------- Barra de resumen (fija abajo en el celu) ---------- */
.r-resumen{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; align-items:center; gap:14px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-panel); border-top:1px solid var(--line); box-shadow: var(--sombra-barra);
}
.r-resumen .r-btn-primario{ width:auto; flex:0 0 auto; min-width:140px; }
.r-resumen-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.r-resumen-detalle{ font-size:0.84rem; color: var(--text-dim); line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.r-resumen-total{ order:-1; font-size:1.15rem; font-weight:700; font-variant-numeric: tabular-nums; }
#rResumenExtra{ margin-top:10px; font-size:0.88rem; color: var(--text-dim); }

/* ---------- Productos ---------- */
.r-cat-tabs-raiz, .r-cat-tabs-sub{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.r-cat-tabs-raiz::-webkit-scrollbar, .r-cat-tabs-sub::-webkit-scrollbar{ display:none; }
#rCatTabsRaiz, #rCatTabsRaizExtra{ margin-bottom:10px; }
#rCatTabsSub, #rCatTabsSubExtra{ margin-bottom:14px; }
.r-cat-tab, .r-cat-subtab{
  flex:0 0 auto; min-height:36px; padding:0 14px; border-radius:999px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--line); background: var(--bg-panel); color: var(--text-dim); font-size:0.88rem; font-weight:600;
}
.r-cat-subtab{ min-height:32px; font-size:0.83rem; }
.r-cat-tab.activo, .r-cat-subtab.activo{ background: var(--text); color: var(--bg); border-color: var(--text); }

.r-productos-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.r-producto-item{
  position:relative; border-radius: var(--radius); background: var(--bg-panel); border:1px solid var(--line);
  overflow:hidden; cursor:pointer; transition: border-color .12s ease;
}
.r-producto-item:hover{ border-color: var(--text-dim); }
.r-producto-item.activo{ border-color: var(--producto); box-shadow: 0 0 0 1px var(--producto); }
.r-producto-item-contenido{ display:flex; flex-direction:column; height:100%; }
.r-producto-foto, .r-producto-foto-vacia{ width:100%; aspect-ratio: 4 / 3; object-fit:cover; display:block; background: var(--bg-panel-2); }
.r-producto-foto-vacia{ display:flex; align-items:center; justify-content:center; color: var(--text-dim); }
.r-producto-foto-vacia svg{ width:34px; height:34px; fill:none; stroke: currentColor; stroke-width:1.4; opacity:.6; }
.r-producto-info{ padding:10px 12px 4px; flex:1; }
.r-producto-nombre{ font-weight:600; font-size:0.92rem; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.r-producto-precio{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 6px; margin-top:4px; }
.r-producto-precio-final{ font-weight:700; font-variant-numeric: tabular-nums; }
.r-producto-precio-antes{ font-size:0.8rem; color: var(--text-dim); text-decoration:line-through; }
.r-producto-precio-con-descuento{ color: var(--ok); }
.r-producto-descuento-badge{ font-size:0.7rem; font-weight:700; padding:2px 6px; border-radius:6px; background: var(--ok-soft); color: var(--ok); }
.r-producto-item-agregar{
  margin:8px 12px 12px; min-height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); font-size:0.86rem; font-weight:600; color: var(--text);
}
.r-producto-item:hover .r-producto-item-agregar{ border-color: var(--producto); color: var(--producto); }
.r-producto-item-stepper{
  margin:8px 12px 12px; min-height:36px; display:flex; align-items:center; justify-content:space-between;
  border-radius:9px; background: var(--producto-soft);
}
.r-cantidad-btn{
  width:36px; height:36px; border:none; background:none; color: var(--producto); font-size:1.25rem; font-weight:700; cursor:pointer;
}
.r-producto-item-cant{ font-weight:700; font-variant-numeric: tabular-nums; }
.r-producto-item.agotado{ cursor:default; }
.r-producto-item.agotado .r-producto-item-contenido{ opacity:.45; filter: grayscale(1); }
.r-producto-sello-agotado{
  position:absolute; top:10px; left:10px; padding:4px 8px; border-radius:6px; font-size:0.72rem; font-weight:700;
  background: var(--bg); color: var(--text); border:1px solid var(--line);
}
#rSeccionPedidoProducto{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }

/* ---------- Estados (cargando, confirmación, consulta) ---------- */
.r-estado{ text-align:center; padding: 64px 8px 24px; max-width:460px; margin:0 auto; }
.r-estado h2{ margin: 14px 0 6px; font-size:1.35rem; }
.r-estado p{ margin: 6px 0; }
.r-estado .r-btn-primario{ margin-top:22px; }
.r-estado-icono{ width:56px; height:56px; fill:none; stroke: var(--text-dim); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.r-estado-icono.r-icono-ok{ stroke: var(--ok); }
.r-estado-icono.r-icono-pendiente{ stroke: var(--accent-vivido); }
.r-estado-icono.r-icono-rechazado{ stroke: var(--danger); }
.r-resumen-final{ font-size:1rem; font-weight:600; }
.r-spinner{
  width:32px; height:32px; margin:0 auto 12px; border-radius:50%;
  border:3px solid var(--line); border-top-color: var(--accent-vivido); animation: r-girar .8s linear infinite;
}
.r-spinner-chico{ width:20px; height:20px; border-width:2px; margin:0 auto; }
@keyframes r-girar{ to{ transform: rotate(360deg); } }
.r-link-box{ display:flex; gap:8px; margin-top:14px; }
.r-link-box .r-input{ font-size:0.84rem; color: var(--text-dim); }
.r-link-box .r-btn-ghost{ width:auto; margin:0; flex:0 0 auto; }
.r-login-panel{ max-width:520px; }
.r-login-panel .r-btn-primario{ margin:16px 0 8px; }
.r-login-intro{ margin:0 0 12px; }

.r-pie{ text-align:center; font-size:0.8rem; color: var(--text-dim); padding: 28px 18px 8px; }
.r-pie a{ color: inherit; font-weight:600; }

/* ---------- Anuncios ---------- */
/* Anuncio discreto: solo al terminar (turno confirmado o estado de la reserva), nunca en medio del
   formulario, sin ventanas que tapen nada. Vacío y oculto hasta que AdSense esté configurado. */
.r-ad-inline{
  margin-top:28px; padding:10px 12px 12px; border-radius:12px;
  border:1px solid var(--line); background: transparent; text-align:left;
}
.r-ad-inline.oculto{ display:none; }
.r-ad-etiqueta{ display:block; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color: var(--text-dim); opacity:.7; margin-bottom:6px; }

/* ---------- Ticket / sellos (historial en /cliente y consultas) ---------- */
.r-ticket{
  background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius);
  padding:14px 16px; margin-bottom:10px; position:relative;
}
.r-ticket p{ margin:0; }
.r-ticket .r-ticket-negocio{ margin-top:2px; }
.r-ticket .r-ticket-titulo{ margin:2px 0 8px; }
#cListaTurnos .r-ticket, #cListaProductos .r-ticket, #cListaPendientes .r-ticket{ margin-bottom:0;
}
.r-ticket::before{ content:''; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background: var(--accent-vivido); }
.r-ticket-producto::before{ background: var(--producto); }
.r-ticket-tipo{ font-size:0.74rem; font-weight:600; color: var(--text-dim); text-transform:uppercase; letter-spacing:.04em; }
.r-ticket-negocio{ font-size:0.84rem; color: var(--text-dim); }
.r-ticket-titulo{ font-weight:700; font-size:1rem; margin:2px 0 8px; }
.r-ticket-linea{ display:flex; justify-content:space-between; gap:12px; font-size:0.88rem; padding:3px 0; }
.r-ticket-linea-label{ color: var(--text-dim); }
.r-ticket-linea-valor{ text-align:right; font-weight:500; }
.r-ticket-total{ display:flex; justify-content:space-between; margin-top:8px; padding-top:8px; border-top:1px solid var(--line-suave); font-weight:700; }
.r-ticket-total-label{ color: var(--text-dim); font-weight:600; }
.r-ticket-pie{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
.r-sello{ display:inline-flex; align-items:center; border-radius:6px; padding:3px 8px; font-size:0.74rem; font-weight:700; }
.r-sello-pendiente{ background: var(--accent-soft); color: var(--accent); }
.r-sello-aprobado, .r-sello-pagado{ background: var(--ok-soft); color: var(--ok); }
.r-sello-rechazado, .r-sello-cancelado{ background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.r-sello-entregado{ background: var(--bg-panel-2); color: var(--text-dim); }

/* Viejas pestañas genéricas (las usa /cliente para login/registro). */
.r-tabs{ display:flex; gap:22px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.r-tab{ background:none; border:none; padding:0 0 10px; margin-bottom:-1px; cursor:pointer; font-size:0.94rem; font-weight:600; color: var(--text-dim); border-bottom:2px solid transparent; display:flex; align-items:center; gap:6px; }
.r-tab.activo{ color: var(--text); border-bottom-color: var(--accent-vivido); }

/* ---------- Compu: contenido + resumen al costado ---------- */
@media (min-width: 900px){
  .r-contenido{ padding: 0 32px; }
  .r-negocio-header{ padding: 40px 0 28px; }
  .r-logo{ flex-basis:72px; width:72px; height:72px; border-radius:18px; }
  .r-negocio-texto h1{ font-size:1.8rem; }
  .r-nav{ max-width:360px; }
  #rForm{ display:grid; grid-template-columns: minmax(0,1fr) 320px; column-gap:40px; align-items:start; }
  #rForm > .r-seccion{ grid-column:1; }
  #rForm > .r-resumen, #rResumenBarraProducto{
    position:sticky; top:24px; left:auto; right:auto; bottom:auto; box-shadow:none;
    flex-direction:column; align-items:stretch; padding:18px; border:1px solid var(--line); border-radius: var(--radius);
  }
  #rForm > .r-resumen{ grid-column:2; grid-row: 1 / span 6; }
  .r-resumen .r-btn-primario{ width:100%; margin-top:14px; }
  .r-resumen-total{ font-size:1.5rem; }
  .r-resumen-detalle{ -webkit-line-clamp: 4; }
  .r-dias{ flex-wrap:wrap; overflow:visible; margin:0; padding:0; }
  .r-productos-grid{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  #rSeccionPedidoProducto{ display:grid; grid-template-columns: minmax(0,1fr) 320px; column-gap:40px; align-items:start; }
  #rSeccionPedidoProducto > *{ grid-column:1; }
  #rResumenBarraProducto{ grid-column:2; grid-row: 1 / span 20; }
  .r-wrap{ padding-bottom: 40px; }
}
/* Embebida en /cliente (iframe a pantalla completa): sin anuncios ni pie. */
.r-embebida .r-ad-inline, .r-embebida .r-pie{ display:none !important; }
.r-embebida .r-negocio-header{ padding-top:16px; }

/* ---------- Confirmar cancelación (estado de una reserva) ----------
   Se había perdido al juntar ramas: la cajita que reemplaza al confirm() nativo quedaba sin estilos. */
.r-confirmar{
  margin-top:12px; padding:14px; text-align:left;
  background: var(--bg-panel-2); border: 1px solid var(--line); border-left: 3px solid var(--danger);
  border-radius: var(--radius);
}
.r-confirmar p{ margin:0 0 12px; font-size:14px; color: var(--text); line-height:1.4; }
.r-confirmar-botones{ display:flex; gap:8px; }
.r-confirmar-botones .r-btn-ghost{ margin-top:0; }
.r-btn-peligro{
  width:100%; background: var(--danger); color:#fff; border:none; border-radius:12px;
  min-height:46px; padding:0 16px; font-size:0.94rem; font-weight:700; cursor:pointer;
}
.r-btn-peligro:disabled, .r-confirmar-botones .r-btn-ghost:disabled{ opacity:.5; cursor:default; }

/* ---------- Barra de sesión de cliente (arriba de todo) ---------- */
.r-sesion-barra{
  display:flex; align-items:center; gap:12px; margin: 14px 0 0; padding: 10px 12px 10px 10px;
  background: var(--bg-panel); border:1px solid var(--line); border-radius:14px;
  color: var(--text); text-decoration:none; transition: border-color .15s ease, background .15s ease;
}
.r-sesion-barra:hover{ border-color: color-mix(in srgb, var(--accent-vivido) 45%, var(--line)); }
.r-sesion-avatar{
  flex:0 0 36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--accent-soft); color: var(--accent); font-weight:700; font-size:0.95rem;
}
.r-sesion-texto{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.r-sesion-hola{ font-weight:600; font-size:0.94rem; }
.r-sesion-sub{ font-size:0.8rem; color: var(--text-dim); }
.r-sesion-ir{
  display:inline-flex; align-items:center; gap:2px; flex-shrink:0; padding: 7px 8px 7px 12px; border-radius:999px;
  background: var(--accent-vivido); color: var(--accent-tinta); font-size:0.84rem; font-weight:700;
}
.r-sesion-ir svg{ width:16px; height:16px; fill:none; stroke: currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.r-embebida .r-sesion-barra{ display:none !important; }

/* ---------- Pantalla de "reservaste" (comprobante) ---------- */
.r-confirmacion{ max-width:480px; margin:0 auto; padding: 36px 0 24px; animation: rConfEntrar .35s ease both; }
@keyframes rConfEntrar{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
.r-conf-hero{ text-align:center; }
.r-conf-badge{
  position:relative; width:76px; height:76px; margin:0 auto 16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--ok-soft); color: var(--ok);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok) 7%, transparent);
}
.r-conf-badge .r-estado-icono{ width:40px; height:40px; stroke: currentColor; stroke-width:2.2; }
.r-confirmacion[data-estado="pendiente"] .r-conf-badge .r-estado-icono path{
  stroke-dasharray: 24; stroke-dashoffset: 24; animation: rConfTilde .45s .15s ease-out forwards;
}
@keyframes rConfTilde{ to{ stroke-dashoffset:0; } }
.r-confirmacion[data-estado="rechazado"] .r-conf-badge,
.r-confirmacion[data-estado="cancelado"] .r-conf-badge{ background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); box-shadow:none; }
.r-conf-spinner{ display:none; width:34px; height:34px; border-radius:50%; border:3px solid color-mix(in srgb, var(--accent-vivido) 25%, transparent); border-top-color: var(--accent-vivido); animation: rConfGirar .8s linear infinite; }
@keyframes rConfGirar{ to{ transform: rotate(360deg); } }
.r-confirmacion[data-estado="enviando"] .r-conf-badge{ background: var(--accent-soft); box-shadow:none; }
.r-confirmacion[data-estado="enviando"] .r-conf-spinner{ display:block; }
.r-confirmacion[data-estado="enviando"] .r-conf-badge .r-estado-icono{ display:none; }
.r-conf-kicker{ margin:0 0 4px; font-size:0.86rem; font-weight:600; color: var(--accent); }
.r-conf-kicker:empty{ display:none; }
.r-confirmacion h2{ margin:0; font-size:1.5rem; line-height:1.2; letter-spacing:-0.02em; }
.r-conf-hint{ margin: 8px auto 0; max-width:360px; font-size:0.92rem; color: var(--text-dim); line-height:1.45; }

.r-conf-ticket{
  position:relative; margin-top:24px; background: var(--bg-panel); border:1px solid var(--line); border-radius:16px; overflow:hidden;
}
.r-conf-ticket-head{
  display:flex; align-items:center; gap:12px; padding: 14px 16px;
  border-bottom: 1px dashed var(--line);
}
.r-conf-logo{
  flex:0 0 38px; width:38px; height:38px; border-radius:11px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background: var(--bg-panel-2); color: var(--accent); border:1px solid var(--line);
}
.r-conf-logo img{ width:100%; height:100%; object-fit:cover; }
.r-conf-logo svg{ width:20px; height:20px; fill:none; stroke: currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.r-conf-ticket-negocio{ flex:1; min-width:0; font-weight:700; font-size:0.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.r-conf-chip{ flex-shrink:0; font-size:0.74rem; font-weight:700; padding: 4px 10px; border-radius:999px; background: var(--accent-soft); color: var(--accent); }
.r-conf-chip:empty{ display:none; }
.r-conf-chip-aprobado{ background: var(--ok-soft); color: var(--ok); }
.r-conf-chip-rechazado, .r-conf-chip-cancelado{ background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.r-conf-detalle{ margin:0; padding: 6px 16px; }
.r-conf-detalle > div{ display:flex; justify-content:space-between; gap:16px; padding: 10px 0; border-top:1px solid var(--line-suave); }
.r-conf-detalle > div:first-child{ border-top:0; }
.r-conf-detalle dt{ color: var(--text-dim); font-size:0.88rem; flex-shrink:0; }
.r-conf-detalle dd{ margin:0; text-align:right; font-weight:600; font-size:0.94rem; }
.r-conf-ticket .r-resumen-final{ margin:0; padding: 0 16px 14px; font-size:0.88rem; font-weight:500; color: var(--text-dim); }
.r-conf-ticket .r-conf-detalle.oculto + .r-resumen-final{ padding-top:14px; font-size:0.96rem; font-weight:600; color: var(--text); }

.r-conf-pasos{ list-style:none; margin: 22px 0 0; padding: 0 4px; }
.r-conf-pasos li{ position:relative; display:flex; gap:12px; padding: 0 0 16px; color: var(--text-dim); font-size:0.84rem; line-height:1.35; }
.r-conf-pasos li:last-child{ padding-bottom:0; }
.r-conf-pasos li::before{ content:""; position:absolute; left:8px; top:20px; bottom:2px; width:2px; background: var(--line); border-radius:2px; }
.r-conf-pasos li:last-child::before{ display:none; }
.r-conf-pasos li.hecho::before{ background: var(--ok); }
.r-conf-pasos li b{ display:block; color: var(--text); font-size:0.92rem; font-weight:600; }
.r-conf-paso-punto{
  position:relative; z-index:1; flex:0 0 18px; height:18px; margin-top:1px; border-radius:50%;
  border:2px solid var(--line); background: var(--bg);
}
.r-conf-pasos li.hecho .r-conf-paso-punto{ border-color: var(--ok); background: var(--ok); }
.r-conf-pasos li.hecho .r-conf-paso-punto::after{
  content:""; position:absolute; left:4px; top:1px; width:4px; height:8px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.r-conf-pasos li.actual .r-conf-paso-punto{ border-color: var(--accent-vivido); box-shadow: 0 0 0 4px var(--accent-soft); }

.r-conf-acciones{ display:flex; flex-direction:column; gap:10px; margin-top:24px; }
.r-conf-acciones .r-btn-ghost{ margin-top:0; }
.r-conf-acciones .r-link-secundario{ align-self:center; }
.r-conf-compartir{ border:1px solid var(--line); border-radius:12px; padding: 0 14px; background: var(--bg-panel); }
.r-conf-compartir summary{
  list-style:none; cursor:pointer; padding: 13px 0; font-size:0.9rem; font-weight:600; color: var(--text);
  display:flex; align-items:center; justify-content:space-between;
}
.r-conf-compartir summary::-webkit-details-marker{ display:none; }
.r-conf-compartir summary::after{
  content:""; width:7px; height:7px; border-right:2px solid var(--text-dim); border-bottom:2px solid var(--text-dim);
  transform: rotate(45deg) translateY(-2px); transition: transform .15s ease;
}
.r-conf-compartir[open] summary::after{ transform: rotate(-135deg) translateY(-2px); }
.r-conf-compartir .r-link-box{ margin-top:0; }
.r-conf-compartir > .r-btn-ghost{ margin: 10px 0 14px; }
.r-confirmacion .r-ad-inline{ margin-top:22px; }
@media (prefers-reduced-motion: reduce){
  .r-confirmacion, .r-conf-badge .r-estado-icono path{ animation:none !important; stroke-dashoffset:0 !important; }
}

/* 5.0: aviso flotante cuando falta un dato al reservar (antes solo un texto rojo al pie que no se veía). */
.r-aviso-flotante{
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 300;
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 10px; max-width: min(92vw, 440px);
  padding: 13px 16px; border-radius: 14px;
  background: var(--danger); color: #fff; font-weight: 600; font-size: 0.92rem; line-height: 1.3;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  transition: transform 0.28s cubic-bezier(.2,.9,.3,1.2), opacity 0.2s ease;
}
.r-aviso-flotante.visible{ transform: translate(-50%, 0); opacity: 1; }
.r-aviso-flotante svg{ width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.r-campo-error{ animation: rCampoError 0.5s ease; border-color: var(--danger) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent) !important; }
@keyframes rCampoError{ 0%,100%{ transform: translateX(0); } 20%{ transform: translateX(-6px); } 40%{ transform: translateX(6px); } 60%{ transform: translateX(-4px); } 80%{ transform: translateX(3px); } }
.r-error:not(.oculto){ padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--danger) 12%, transparent); }

/* ---------- 6.2: personalización Pro (reserva.js › aplicarAparienciaReserva) ---------- */
html[data-fondo="degrade"] body{
  background: radial-gradient(130% 520px at 50% 0, color-mix(in srgb, var(--accent-vivido) 22%, var(--bg)), var(--bg) 75%) no-repeat, var(--bg);
}
html[data-fondo="color"] body{
  background: linear-gradient(color-mix(in srgb, var(--accent-vivido) 20%, var(--bg)) 0 140px, var(--bg) 300px) no-repeat, var(--bg);
}
html[data-esquinas="redondas"]{ --radius: 22px; }
html[data-esquinas="redondas"] .r-btn-primario, html[data-esquinas="redondas"] .r-btn-ghost{ border-radius:999px; }
html[data-esquinas="redondas"] .r-logo{ border-radius:50%; }
html[data-esquinas="rectas"]{ --radius: 4px; }
html[data-esquinas="rectas"] .r-btn-primario, html[data-esquinas="rectas"] .r-btn-ghost{ border-radius:4px; }
html[data-esquinas="rectas"] .r-logo{ border-radius:6px; }
html[data-letra="elegante"] h1, html[data-letra="elegante"] h2, html[data-letra="elegante"] h3{ font-family: 'Playfair Display', Georgia, serif; letter-spacing:0; }
html[data-letra="redonda"]{ --font: 'Nunito', ui-rounded, system-ui, sans-serif; }
html[data-letra="redonda"] body{ font-family: var(--font); }

/* ---------- 6.4: fondo con dibujo (reserva.js › aplicarAparienciaReserva). El dibujo es una máscara
   pintada con el color principal, así sigue al color elegido y al tema claro/oscuro. Mismos dibujos
   que la vista previa de Config (v5.css). ---------- */
html[data-patron] body{ isolation:isolate; }
html[data-patron] body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: var(--accent-vivido); opacity: var(--pat-op, .15);
  -webkit-mask: var(--pat); mask: var(--pat);
}
html[data-theme="light"][data-patron] body::before{ opacity: calc(var(--pat-op, .15) * 1.25); }
html[data-patron="puntos"]{ --pat-op:.38; --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='1.7'/%3E%3C/svg%3E") 0 0/calc(22px * var(--pat-s, 1)) repeat; }
html[data-patron="grilla"]{ --pat-op:.16; --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 .5H32M.5 0V32' fill='none' stroke='black'/%3E%3C/svg%3E") 0 0/calc(32px * var(--pat-s, 1)) repeat; }
html[data-patron="lineas"]{ --pat-op:.14; --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 16L16 0M-2 2L2 -2M14 18L18 14' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") 0 0/calc(16px * var(--pat-s, 1)) repeat; }
html[data-patron="ondas"]{ --pat-op:.22; --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='28'%3E%3Cpath d='M0 14Q20 4 40 14T80 14' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/calc(80px * var(--pat-s, 1)) calc(28px * var(--pat-s, 1)) repeat; }
html[data-patron="cruces"]{ --pat-op:.3; --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M17 12v10M12 17h10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/calc(34px * var(--pat-s, 1)) repeat; }
html[data-patron="burbujas"]{ --pat-op:.09; --pat:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M139 22c28 15 49 45 47 77s-26 66-58 79-71 4-95-20S0 95 13 62 52 9 83 6s28 1 56 16Z'/%3E%3C/svg%3E") right calc(-90px * var(--pat-s, 1)) top calc(-80px * var(--pat-s, 1))/calc(340px * var(--pat-s, 1)) no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M64 18c33-14 77-8 102 18s29 70 8 101-63 52-100 47S7 152 5 112s26-80 59-94Z'/%3E%3C/svg%3E") left calc(-130px * var(--pat-s, 1)) bottom calc(-110px * var(--pat-s, 1))/calc(420px * var(--pat-s, 1)) no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='96'/%3E%3C/svg%3E") left 12% top 38%/calc(70px * var(--pat-s, 1)) no-repeat; }
html[data-patron="anillos"]{ --pat-op:.22; --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' fill='none' stroke='black' stroke-width='1.3'%3E%3Ccircle cx='600' cy='0' r='90'/%3E%3Ccircle cx='600' cy='0' r='150'/%3E%3Ccircle cx='600' cy='0' r='210'/%3E%3Ccircle cx='600' cy='0' r='270'/%3E%3Ccircle cx='600' cy='0' r='330'/%3E%3Ccircle cx='600' cy='0' r='390'/%3E%3Ccircle cx='600' cy='0' r='450'/%3E%3Ccircle cx='600' cy='0' r='510'/%3E%3Ccircle cx='600' cy='0' r='570'/%3E%3C/svg%3E") right top/calc(600px * var(--pat-s, 1)) no-repeat; }

/* ---------- 6.5 — Descubrir negocios (directorio.js) ---------- */
.c-directorio{ margin-top:28px; }
.c-dir-cab{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.c-dir-cab .c-seccion-titulo{ margin:0; }
.c-dir-vista{ display:flex; gap:2px; padding:3px; border-radius:12px; background: color-mix(in srgb, var(--text) 6%, transparent); border:1px solid var(--line); }
.c-dir-vista.oculto{ display:none; }
.c-dir-vista button{ all:unset; cursor:pointer; padding:6px 12px; border-radius:9px; font-size:0.8rem; font-weight:600; color: var(--text-dim); }
.c-dir-vista button.activo{ background: var(--bg-panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.c-dir-rubros{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin: 14px -18px 0; padding: 2px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 24px), transparent);
}
.c-dir-rubros::-webkit-scrollbar{ display:none; }
.c-dir-chip, .c-dir-cerca, .c-dir-km{
  all:unset; box-sizing:border-box; cursor:pointer; flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  height:38px; padding: 0 14px; border-radius:999px; white-space:nowrap;
  background: var(--bg-panel); border:1px solid var(--line); color: var(--text-dim); font-size:0.86rem; font-weight:600;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.c-dir-chip:active, .c-dir-cerca:active, .c-dir-km:active{ transform: scale(.97); }
.c-dir-chip .c-dir-chip-ico{ width:16px; height:16px; fill:none; stroke: currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.c-dir-chip.activo, .c-dir-km.activo{ background: var(--text); color: var(--bg); border-color: var(--text); }
.c-dir-filtros{ display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.c-dir-cerca svg{ width:16px; height:16px; fill:none; stroke: currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.c-dir-cerca.activo{ background: color-mix(in srgb, #3b82f6 16%, var(--bg-panel)); border-color: #3b82f6; color: var(--text); }
.c-dir-cerca.cargando{ opacity:.6; pointer-events:none; }
.c-dir-radio{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.c-dir-radio.oculto{ display:none; }
.c-dir-km{ height:32px; padding: 0 11px; font-size:0.8rem; }
.c-dir-titulo-lista{ margin:18px 2px 8px; font-size:0.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color: var(--text-dim); }
.c-dir-titulo-lista.oculto, .c-dir-estado.oculto, .c-dir-lista.oculto, .c-dir-mapa.oculto{ display:none; }
.c-dir-estado{ margin-top:16px; padding:18px; border-radius:16px; border:1px dashed var(--line); text-align:center; font-size:0.86rem; color: var(--text-dim); display:flex; justify-content:center; }
.c-dir-lista{ display:flex; flex-direction:column; gap:8px; }
.c-dir-card{
  all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns: 46px minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:12px; border-radius:18px; background: var(--bg-panel); border:1px solid var(--line);
  transition: border-color .15s ease, transform .1s ease;
}
.c-dir-card:hover{ border-color: color-mix(in srgb, var(--text-dim) 50%, var(--line)); }
.c-dir-card:active{ transform: scale(.99); }
.c-dir-card.destacado{
  border-color: color-mix(in srgb, var(--accent-vivido) 55%, var(--line));
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent-vivido) 12%, transparent), transparent 60%), var(--bg-panel);
}
.c-dir-logo{ width:46px; height:46px; border-radius:14px; overflow:hidden; display:grid; place-items:center; background: var(--accent-soft); color: var(--accent); font-weight:700; }
.c-dir-logo img{ width:100%; height:100%; object-fit:cover; }
.c-dir-logo svg{ width:22px; height:22px; fill:none; stroke: currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.c-dir-info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.c-dir-nombre{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:0.95rem; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c-dir-reco{
  flex-shrink:0; font-style:normal; font-size:0.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 7px; border-radius:999px; background: var(--accent-vivido); color: var(--accent-tinta, #1d1300);
}
.c-dir-sub{ font-size:0.78rem; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c-dir-der{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.c-dir-dist{ font-size:0.76rem; font-weight:700; color: var(--text); font-variant-numeric: tabular-nums; }
.c-dir-reservar{ font-size:0.76rem; font-weight:700; color: var(--accent); padding:5px 10px; border-radius:999px; background: var(--accent-soft); }
.c-dir-mapa{ height:min(62vh, 440px); border-radius:18px; overflow:hidden; border:1px solid var(--line); margin-top:4px; }
.c-dir-pin{ background:none; border:0; }
/* 6.5.2: pin con el logo del negocio (pinHtml en directorio.js). */
/* 6.8.1: sombra común (box-shadow) en vez de filter: drop-shadow, que se volvía a pintar en cada cuadro del zoom. */
.c-dir-pin-cuerpo{ box-shadow: 0 6px 14px rgba(0,0,0,.32); }
.c-dir-pin-cuerpo{
  position:absolute; left:2px; top:0; width:44px; height:44px; border-radius:50%; padding:3px; box-sizing:border-box;
  background:#fff; transition: transform .15s ease;
}
.c-dir-pin:hover .c-dir-pin-cuerpo{ transform: translateY(-2px) scale(1.06); }
.c-dir-pin-logo{
  position:relative; display:grid; place-items:center; width:100%; height:100%; border-radius:50%; overflow:hidden;
  background: linear-gradient(145deg, #2a2f36, #15181c); color:#f3e2c4;
}
.c-dir-logo-img{ position:relative; display:grid; place-items:center; width:100%; height:100%; }
.c-dir-logo-img svg{ display:none; width:20px; height:20px; fill:none; stroke: currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.c-dir-logo-img.sin-img svg{ display:block; }
/* !important: Leaflet le pone width:auto y max-width:none a toda imagen de un marcador. */
.c-dir-logo-img img{ position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; background:#fff; border-radius:50%; }
.c-dir-pin-punta{
  position:absolute; left:50%; top:39px; width:14px; height:14px; margin-left:-7px; background:#fff;
  transform: rotate(45deg); border-radius:0 0 4px 0; z-index:-1;
}
.c-dir-pin.destacado .c-dir-pin-cuerpo, .c-dir-pin.destacado .c-dir-pin-punta{ background: var(--accent-vivido); }
.c-dir-pin.destacado .c-dir-pin-logo{ background: linear-gradient(145deg, #3a2a12, #1d1300); }
.c-dir-pop{ display:flex; flex-direction:column; gap:4px; min-width:160px; font-family: inherit; }
.c-dir-pop b{ font-size:.92rem; }
.c-dir-pop > span:not([class]){ font-size:.78rem; color:#555; }
.c-dir-pop button{ all:unset; cursor:pointer; margin-top:6px; text-align:center; padding:7px 10px; border-radius:10px; background:#1f2328; color:#fff; font-weight:700; font-size:.8rem; }

/* Promo propia cuando no hay AdSense configurado (montarAnuncio en utils-compartidos.js). */
.tyc-promo{ display:flex; align-items:center; gap:12px; text-decoration:none; color: var(--text); }
.tyc-promo img{ border-radius:10px; flex-shrink:0; }
.tyc-promo span{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.tyc-promo b{ font-size:.88rem; }
.tyc-promo small{ font-size:.78rem; color: var(--text-dim); }
.tyc-promo em{ font-style:normal; font-size:.78rem; font-weight:700; color: var(--accent); padding:6px 12px; border-radius:999px; background: var(--accent-soft); flex-shrink:0; }
/* 6.5.2: rubro del directorio como desplegable con buscador (crearSelectorCategoria en categorias.js). */
.c-dir-rubro-sel{ margin-top:14px; }
.c-dir-rubro-sel .tc-sel-boton{ min-height:50px; border-radius:16px; }

/* 6.6.0: el mapa no puede quedar por encima del desplegable de rubros (las capas de Leaflet usan z-index de 400 para
   arriba y competían con el resto de la página): el mapa arma su propio contexto y el desplegable va arriba. */
.c-dir-mapa{ position:relative; isolation:isolate; z-index:0; }
.c-dir-rubro-sel{ position:relative; z-index:20; }
/* Estrellas en la lista y en el popup del mapa (estrellasHtml en utils-compartidos.js). */
.c-dir-val{ display:block; margin-top:1px; }
.c-dir-pop{ min-width:200px; gap:6px; }
.c-dir-pop-cab{ display:flex; align-items:center; gap:10px; }
.c-dir-pop-logo{ width:40px; height:40px; flex-shrink:0; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background: linear-gradient(145deg, #2a2f36, #15181c); color:#f3e2c4; }
.c-dir-pop-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.c-dir-pop-txt b{ font-size:.95rem; line-height:1.2; color:#111; }
.c-dir-pop-txt em{ font-style:normal; font-size:.76rem; font-weight:650; color:#8a5a14; }
.c-dir-pop-val .tyc-est-base{ color:#d6d6d6; }
.c-dir-pop-val .tyc-est-num{ color:#111; }
.c-dir-pop-val .tyc-est-cant{ color:#666; }
.c-dir-pop-nuevo{ font-size:.76rem; color:#777; }
.c-dir-pop-dir{ font-size:.78rem; color:#555; }
/* Página de estado: bloque para valorar. */
.r-valorar{ margin-top:20px; width:100%; }

/* 6.7.0: portada de "Descubrir negocios" por secciones (directorio.js). */
.c-dir-lista.con-secciones{ gap:22px; margin-top:16px; }
.c-dir-sec{ display:flex; flex-direction:column; gap:8px; }
.c-dir-sec-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:0 2px; }
.c-dir-sec-cab h3{ margin:0; font-size:1rem; font-weight:750; color: var(--text); }
.c-dir-sec-cab span{ font-size:.76rem; color: var(--text-dim); }
.c-dir-sec-lista{ display:flex; flex-direction:column; gap:8px; }
.c-dir-sec:not(.abierta) .c-dir-extra{ display:none; }
.c-dir-sec-mas{ all:unset; cursor:pointer; align-self:flex-start; padding:6px 2px; font-size:.82rem; font-weight:700; color: var(--accent); }
.c-dir-todos{ all:unset; cursor:pointer; box-sizing:border-box; width:100%; text-align:center; padding:13px; border-radius:14px;
  font-weight:700; font-size:.88rem; color: var(--text); background: var(--bg-panel); border:1px solid var(--line); }
.c-dir-todos:hover{ border-color: color-mix(in srgb, var(--text-dim) 50%, var(--line)); }

/* 6.7.1: grupos de negocios en el mapa (iconoGrupo en directorio.js) y pines más chicos con el mapa muy alejado. */
.c-dir-grupo{ background:none; border:0; }
.c-dir-grupo-cuerpo{ position:relative; display:block; border-radius:50%; padding:3px; box-sizing:border-box; background:#fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 0 6px rgba(255,255,255,.35); transition: transform .15s ease; cursor:pointer; }
.c-dir-grupo:hover .c-dir-grupo-cuerpo{ transform: scale(1.07); }
.c-dir-grupo-cuerpo img{ display:block; width:100% !important; height:100% !important; max-width:none !important; border-radius:50%; object-fit:cover; }
.c-dir-grupo-cuerpo b{ position:absolute; right:-6px; top:-6px; min-width:22px; height:22px; padding:0 6px; box-sizing:border-box; border-radius:99px;
  display:grid; place-items:center; font: 800 .74rem/1 inherit; color:#fff; background:#1f2328; border:2px solid #fff; }
.c-dir-grupo.destacado .c-dir-grupo-cuerpo{ background: var(--accent-vivido); box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 0 6px color-mix(in srgb, var(--accent-vivido) 35%, transparent); }
.c-dir-grupo.destacado .c-dir-grupo-cuerpo b{ background: var(--accent-vivido); color:#1d1300; }
.c-dir-pin-in{ position:absolute; inset:0; transform-origin: 24px 57px; transition: transform .2s ease; }
/* 6.7.2: el pin entero (cuerpo y punta juntos) se achica desde la punta, que es el lugar exacto del negocio. Antes se
   achicaban por separado (la punta perdía su giro) y una regla les sacaba la animación a los pines: el mapa se acercaba
   o alejaba suave y el pin saltaba de golpe a su lugar final. */
.c-dir-mapa.zoom-lejos .c-dir-pin-in{ transform: scale(.72); }

/* 6.7.3: mapa del directorio a pantalla completa (ponerMapaGrande en directorio.js). */
.c-dir-mapa-grande{ all:unset; box-sizing:border-box; cursor:pointer; width:38px; height:38px; display:grid; place-items:center;
  border-radius:10px; background:#fff; color:#1f2328; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.c-dir-mapa-grande:hover{ background:#f2f2f2; }
.c-dir-mapa-grande svg{ width:18px; height:18px; fill:none; stroke: currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.c-dir-mapa.pantalla-completa{
  position:fixed !important; inset:0; z-index:10000; width:auto; height:auto !important; margin:0; border-radius:0; border:0;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
}
.c-dir-mapa.pantalla-completa .c-dir-mapa-grande{ width:44px; height:44px; border-radius:12px; }
html.c-dir-mapa-abierto, html.c-dir-mapa-abierto body{ overflow:hidden; }

/* 6.7.4: controles del mapa (zoom y pantalla completa). Tocar seguido el "+" o el "−" ya no los selecciona como texto
   (lo azul y el menú de copiar/traducir del celular), y quedan con el mismo estilo redondeado que el resto. */
.leaflet-container{ -webkit-tap-highlight-color: transparent; }
.leaflet-container .leaflet-control-zoom, .leaflet-container .leaflet-control-zoom a, .leaflet-container .leaflet-bar,
.leaflet-container .leaflet-marker-icon, .leaflet-container .leaflet-control{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.leaflet-container .leaflet-control-zoom{ border:0 !important; border-radius:12px !important; overflow:hidden; box-shadow: 0 2px 8px rgba(0,0,0,.25) !important; }
.leaflet-container .leaflet-control-zoom a{
  width:38px !important; height:38px !important; line-height:38px !important; font-size:20px !important; font-weight:500;
  color:#1f2328 !important; background:#fff !important; border-bottom:1px solid #e6e6e6 !important; text-decoration:none;
}
.leaflet-container .leaflet-control-zoom a:last-child{ border-bottom:0 !important; }
.leaflet-container .leaflet-control-zoom a:hover{ background:#f2f2f2 !important; }
.leaflet-container .leaflet-control-zoom a:focus{ outline:none; }
.leaflet-container .leaflet-control-zoom a:focus-visible{ box-shadow: inset 0 0 0 2px var(--accent-vivido, #d6ad5c); }
.leaflet-container .leaflet-control-zoom a.leaflet-disabled{ color:#bbb !important; background:#fff !important; }

/* 6.7.6: lo que todavía no cargó del mapa tiene el color de fondo de OpenStreetMap (antes era gris y se notaban los
   cuadros vacíos al arrastrar). */
.leaflet-container{ background:#f2efe9 !important; }

/* 6.8.5: el zoom con la rueda (y el pellizco) escala las capas del mapa en cada cuadro. Leaflet solo las sube a la placa
   de video durante su propia animación de zoom; fuera de ella el navegador volvía a pintar todas las imágenes del
   mapa a la nueva escala en cada cuadro, y eso trababa. Con will-change quedan siempre en la placa de video: escalarlas
   o moverlas es estirar una imagen ya pintada. */
.leaflet-container .leaflet-map-pane,
.leaflet-container .leaflet-tile-container,
.leaflet-container .leaflet-marker-icon{ will-change: transform; }