/* ============================================================
   BARBER TOOLS · página pública de cada barbería (/b/<slug>) y su reserva (/r/<token>)
   Tema oscuro, columna de 560 px, móvil primero (DISENO §5c). La marca es la de la BARBERÍA:
   su logo sobre su placa, su nombre y su acento (lista cerrada) en números de paso, elegidos,
   botón final y foco. Barber Tools queda discreto abajo. Táctil ≥ 44 px, inputs a 16 px.
   ============================================================ */
:root { --rv-acento-tenue: rgba(0,168,132,.16); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root { --rv-acento-tenue: color-mix(in srgb, var(--bt-acento) 16%, transparent); }
}
.rv { min-height: 100dvh; display: flex; flex-direction: column; }
.rv-col { width: min(560px, 100% - 32px); margin-inline: auto; }
.rv :focus-visible { outline-color: var(--bt-acento); box-shadow: 0 0 0 6px var(--rv-acento-tenue); }
.rv ::selection { background: var(--rv-acento-tenue); }
.rv a:not(.bt-btn) { color: var(--bt-texto); text-decoration-color: var(--bt-acento); text-decoration-thickness: 1.5px; }

/* ---------- cabecera con la marca de la barbería ---------- */
.rv-cab { position: relative; isolation: isolate; overflow: hidden; padding: calc(28px + var(--bt-seg-arriba)) 0 28px; background: var(--bt-sup-1); border-bottom: 1px solid var(--bt-linea); }
.rv-cab::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--bt-acero-cepillado); opacity: .05; pointer-events: none; }
.rv-cab::after { content: ''; position: absolute; z-index: -1; width: 420px; height: 420px; right: -160px; top: -220px; border-radius: 50%; background: radial-gradient(closest-side, var(--rv-acento-tenue), transparent 72%); pointer-events: none; }
.rv-cab__in { display: flex; align-items: center; gap: 16px; }
.rv-cab--ancha .rv-cab__in { flex-direction: column; align-items: flex-start; gap: 14px; }
.rv-cab__txt { min-width: 0; }
.rv-cab .bt-micro { margin: 0; }
.rv-cab h1 { margin: 4px 0 0; font-size: var(--bt-t-xl); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rv-cab__lugar { margin: 6px 0 0; color: var(--bt-texto-2); font-size: var(--bt-t-chico); }
.rv-cab__lugar:empty { display: none; }
.rv .rv-cab__ig { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 2px 0 -10px; color: var(--bt-texto-2); font-size: var(--bt-t-chico); font-weight: 500; text-decoration: none; }
.rv .rv-cab__ig:hover { color: var(--bt-texto); }
.rv-cab__ig .bt-ico { width: 18px; height: 18px; color: var(--bt-acento); }

.rv-placa { width: 72px; border-radius: 18px; }
.rv-placa .bt-monograma { font-size: 28px; }
/* D1: placa ancha de 64 px de alto (46 px de logo + 16 de aire + borde); el logo nunca pasa de la placa. */
.rv-placa.bt-logo-placa--ancha { --placa-logo-alto: 46px; width: auto; height: auto; max-width: min(240px, 100%); border-radius: 14px; }
.rv-placa.bt-logo-placa--ancha[data-placa="sin_placa"] { padding: 0; }
@media (min-width: 768px) {
  .rv-placa { width: 88px; }
  .rv-placa .bt-monograma { font-size: 34px; }
  .rv-cab { padding-top: calc(40px + var(--bt-seg-arriba)); padding-bottom: 36px; }
}

/* ---------- pasos ---------- */
.rv-main { flex: 1; padding: 12px 0 48px; }
.con-barra .rv-main { padding-bottom: calc(132px + var(--bt-seg-abajo)); }
.rv-error { margin: 16px 0 0; }
.rv-paso { padding: 28px 0; border-bottom: 1px solid var(--bt-linea); }
.rv-paso:last-of-type { border-bottom: 0; }
.rv-paso h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: var(--bt-t-m); font-weight: 600; letter-spacing: -.015em; }
.rv-num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bt-acento); color: var(--bt-grafito); font-size: var(--bt-t-chico); font-weight: 700; font-variant-numeric: tabular-nums; }
.rv-nota { margin: 0; color: var(--bt-texto-2); font-size: var(--bt-t-chico); grid-column: 1 / -1; }

/* servicios: tarjetas con precio tabular */
.rv-servicios { display: grid; gap: 10px; }
.rv-esq { height: 68px; border-radius: var(--bt-r-m); }
.rv-servicio { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 12px 14px 12px 16px; border-radius: var(--bt-r-m); border: 1px solid var(--bt-linea); background: var(--bt-sup-2); color: var(--bt-texto); font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--bt-d-hover) var(--bt-ease-suave), background-color var(--bt-d-hover) var(--bt-ease-suave), box-shadow var(--bt-d-hover) var(--bt-ease-suave), transform var(--bt-d-toque) var(--bt-ease-salida); }
.rv-servicio:hover { border-color: var(--bt-borde-control); }
.rv-servicio:active { transform: scale(.985); }
.rv-servicio__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rv-servicio__txt b { font-weight: 600; overflow-wrap: anywhere; }
.rv-servicio__txt small { color: var(--bt-texto-3); font-size: var(--bt-t-chico); overflow-wrap: anywhere; }
.rv-servicio__precio { flex: none; font-weight: 600; letter-spacing: -.01em; }
.rv-servicio__marca { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--bt-borde-control); display: grid; place-items: center; transition: background-color var(--bt-d-hover) var(--bt-ease-suave), border-color var(--bt-d-hover) var(--bt-ease-suave); }
.rv-servicio[aria-pressed="true"] { background: var(--bt-sup-3); border-color: var(--bt-acento); box-shadow: inset 4px 0 0 var(--bt-acento); }
.rv-servicio[aria-pressed="true"] .rv-servicio__marca { background: var(--bt-acento); border-color: var(--bt-acento); }
.rv-servicio[aria-pressed="true"] .rv-servicio__marca::after { content: ''; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1414' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6 9.6 17 19 7'/%3E%3C/svg%3E") center / contain no-repeat; }

/* barberos: chips con inicial */
.rv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 8px; border-radius: var(--bt-r-pill); border: 1px solid var(--bt-linea); background: var(--bt-sup-2); color: var(--bt-texto); font: inherit; font-weight: 500; cursor: pointer;
  transition: background-color var(--bt-d-hover) var(--bt-ease-suave), border-color var(--bt-d-hover) var(--bt-ease-suave), transform var(--bt-d-toque) var(--bt-ease-salida); }
.rv-chip:hover { border-color: var(--bt-borde-control); }
.rv-chip:active { transform: scale(.97); }
.rv-chip:not(:has(.rv-chip__inicial)) { padding-left: 18px; }
.rv-chip__inicial { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bt-sup-3); color: var(--bt-texto-2); font-size: var(--bt-t-chico); font-weight: 700; }
.rv-chip[aria-pressed="true"] { background: var(--bt-acento); border-color: var(--bt-acento); color: var(--bt-grafito); font-weight: 600; }
.rv-chip[aria-pressed="true"] .rv-chip__inicial { background: rgba(15,20,20,.16); color: var(--bt-grafito); }

/* días: tira deslizable */
.rv-dias { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; margin: 0 -16px 16px; padding: 2px 16px 6px; }
.rv-dias::-webkit-scrollbar { display: none; }
.rv-dia { flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 64px; min-height: 76px; border-radius: var(--bt-r-m); border: 1px solid var(--bt-linea); background: var(--bt-sup-2); color: var(--bt-texto); font: inherit; cursor: pointer;
  transition: background-color var(--bt-d-hover) var(--bt-ease-suave), border-color var(--bt-d-hover) var(--bt-ease-suave); }
.rv-dia:hover { border-color: var(--bt-borde-control); }
.rv-dia small { font-size: var(--bt-t-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--bt-texto-3); font-weight: 600; }
.rv-dia b { font-size: 1.375rem; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
.rv-dia[aria-pressed="true"] { background: var(--bt-acento); border-color: var(--bt-acento); color: var(--bt-grafito); }
.rv-dia[aria-pressed="true"] small { color: var(--bt-grafito); }

/* horas: grilla de 3 columnas, 48 px */
.rv-horas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 480px) { .rv-horas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rv-esq-hora { height: 48px; border-radius: var(--bt-r-s); }
.rv-hora { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 48px; padding: 6px 4px; border-radius: var(--bt-r-s); border: 1px solid var(--bt-borde-control); background: var(--bt-sup-1); color: var(--bt-texto); font: inherit; cursor: pointer;
  transition: background-color var(--bt-d-hover) var(--bt-ease-suave), border-color var(--bt-d-hover) var(--bt-ease-suave), transform var(--bt-d-toque) var(--bt-ease-salida); }
.rv-hora:hover { border-color: var(--bt-texto-3); }
.rv-hora:active { transform: scale(.96); }
.rv-hora b { font-weight: 600; font-size: 1rem; }
.rv-hora small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--bt-t-micro); color: var(--bt-texto-3); }
.rv-hora[aria-pressed="true"] { background: var(--bt-acento); border-color: var(--bt-acento); color: var(--bt-grafito); }
.rv-hora[aria-pressed="true"] small { color: var(--bt-grafito); }

/* datos */
.rv-resumen { margin: 0 0 20px; padding: 14px 16px; border-radius: var(--bt-r-m); background: var(--bt-sup-2); border: 1px solid var(--bt-linea); box-shadow: inset 3px 0 0 var(--bt-acento); }
.rv-resumen p { margin: 0; }
.rv-resumen__cuando { margin-top: 4px !important; color: var(--bt-texto-2); font-size: var(--bt-t-chico); }
.rv-resumen b { color: var(--bt-texto); font-weight: 600; }
.rv-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rv-casilla { font-size: var(--bt-t-chico); line-height: 1.5; color: var(--bt-texto-2); }
.rv-casilla input:checked { background: var(--bt-acento); }
.rv-casilla input:focus-visible { outline: 2px solid var(--bt-acento); outline-offset: 2px; }
.rv .bt-campo input:focus { border-color: var(--bt-acento); box-shadow: 0 0 0 4px var(--rv-acento-tenue); }

/* listo */
.rv-listo { padding: 40px 0 8px; text-align: center; display: flex; flex-direction: column; align-items: center; animation: bt-sube var(--bt-d-hoja) var(--bt-ease-salida) both; }
.rv-listo[hidden] { display: none; }
.rv-listo__check { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 16px; border-radius: 50%; background: var(--bt-acento); color: var(--bt-grafito); box-shadow: 0 0 0 10px var(--rv-acento-tenue); }
.rv-listo__check .bt-ico { width: 36px; height: 36px; stroke-width: 2.4; }
.rv-listo h2 { margin: 0 0 8px; font-size: var(--bt-t-xl); font-weight: 700; letter-spacing: -.035em; }
.rv-listo__texto { margin: 0 0 20px; font-size: var(--bt-t-m); color: var(--bt-texto-2); max-width: 36ch; }
.rv-listo__texto b { color: var(--bt-texto); font-weight: 600; }
.rv-listo .rv-nota { margin-bottom: 12px; }

/* botón con el acento de la barbería (texto grafito: ≥ 4,6:1 sobre cualquier acento de la lista) */
.rv-btn-acento { background: var(--bt-acento); color: var(--bt-grafito); box-shadow: 0 8px 24px var(--rv-acento-tenue), inset 0 1px 0 rgba(255,255,255,.25); }
.rv-btn-acento:hover { filter: brightness(1.06); }

/* ---------- barra fija abajo: resumen + «Reservar 16:15» ---------- */
.rv-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 0 calc(12px + var(--bt-seg-abajo)); background: rgba(15,20,20,.97); border-top: 1px solid rgba(244,247,248,.1); box-shadow: var(--bt-sombra-hoja); animation: rv-barra-entra var(--bt-d-hoja) var(--bt-ease-salida) both; }
.rv-barra__in { display: flex; align-items: center; gap: 12px; }
.rv-barra__resumen { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; font-size: var(--bt-t-chico); line-height: 1.35; }
.rv-barra__resumen b, .rv-barra__resumen span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-barra__resumen b { font-weight: 600; }
.rv-barra__resumen span { color: var(--bt-texto-2); }
.rv-barra .bt-btn { flex: none; padding: 0 22px; font-variant-numeric: tabular-nums; }
@keyframes rv-barra-entra { from { transform: translateY(100%); } }

/* ---------- chat ---------- */
.rv-burbuja { position: fixed; right: 16px; bottom: calc(16px + var(--bt-seg-abajo)); z-index: 20; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px; border-radius: var(--bt-r-pill);
  border: 1px solid transparent; background: linear-gradient(var(--bt-sup-3), var(--bt-sup-3)) padding-box, var(--bt-borde-metal) border-box; color: var(--bt-texto); font: inherit; font-weight: 600; box-shadow: var(--bt-sombra-2); cursor: pointer;
  transition: transform var(--bt-d-toque) var(--bt-ease-salida), bottom var(--bt-d-pestana) var(--bt-ease-salida); }
.rv-burbuja .bt-ico { width: 20px; height: 20px; color: var(--bt-acento); }
.rv-burbuja:active { transform: scale(.97); }
.con-barra .rv-burbuja { bottom: calc(92px + var(--bt-seg-abajo)); }
/* D7 (séptima ronda): en el celular la burbuja es un círculo de 48 px pegado al borde (el texto «¿Dudas? Escríbenos» queda para
   lectores de pantalla). La píldora de 190 px tapaba el chip de un barbero al cargar /b/<slug>. El pie deja debajo el alto de la
   burbuja más aire (.rv--chat .rv-pie y .con-barra .rv-pie), así al final de la página no tapa «Aviso de privacidad». */
@media (max-width: 420px) { .rv-burbuja span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .rv-burbuja { width: 48px; padding: 0; justify-content: center; } }
.rv-chat { position: fixed; z-index: 50; left: 8px; right: 8px; bottom: calc(8px + var(--bt-seg-abajo)); height: min(560px, calc(100dvh - 16px - var(--bt-seg-abajo) - var(--bt-seg-arriba)));
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--bt-r-xl); border: 1px solid transparent;
  background: linear-gradient(var(--bt-sup-1), var(--bt-sup-1)) padding-box, var(--bt-borde-metal) border-box; box-shadow: 0 24px 60px rgba(0,0,0,.6); animation: bt-sube var(--bt-d-pestana) var(--bt-ease-salida) both; }
.rv-chat[hidden] { display: none; }
@media (min-width: 560px) { .rv-chat { left: auto; right: 16px; bottom: calc(16px + var(--bt-seg-abajo)); width: 380px; } }
.rv-chat__cab { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--bt-linea); }
.rv-chat__cab b { flex: 1; font-weight: 600; }
.rv-chat__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--bt-acento); box-shadow: 0 0 0 4px var(--rv-acento-tenue); }
.rv-chat__cerrar { background: transparent; }
/* Línea fija antes del primer mensaje: quién responde (IA) y dónde está el aviso de privacidad. */
.rv-chat__aviso { margin: 0; padding: 10px 18px; border-bottom: 1px solid var(--bt-linea); background: var(--bt-sup-2); color: var(--bt-texto-3); font-size: .8125rem; line-height: 1.45; }
.rv-chat__aviso a { color: var(--bt-texto-2); white-space: nowrap; }
.rv-chat__aviso a:hover { color: var(--bt-texto); }
.rv-chat__msgs { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.rv-msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9375rem; line-height: 1.45; }
.rv-msg--ella { align-self: flex-start; background: var(--bt-sup-2); border: 1px solid var(--bt-linea); border-bottom-left-radius: 6px; }
.rv-msg--yo { align-self: flex-end; background: var(--rv-acento-tenue); border: 1px solid var(--rv-acento-tenue); border-bottom-right-radius: 6px; }
.rv-msg a { color: var(--bt-texto); }
.rv-chat__form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--bt-linea); }
.rv-chat__form input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; font-size: 16px; color: var(--bt-texto); background: var(--bt-sup-2); border: 1px solid var(--bt-borde-control); border-radius: var(--bt-r-pill); }
.rv-chat__form input:focus { outline: none; border-color: var(--bt-acento); box-shadow: 0 0 0 4px var(--rv-acento-tenue); }
.rv-chat__form input:disabled, .rv-chat__form .bt-btn:disabled { opacity: .55; cursor: not-allowed; }
/* L-a: la casilla del chat (la misma del formulario), sobre el campo de texto hasta el primer mensaje. */
.rv-chat__permiso { flex: none; max-height: 42%; overflow-y: auto; padding: 4px 16px 6px; border-top: 1px solid var(--bt-linea); background: var(--bt-sup-2); }
.rv-chat__permiso[hidden] { display: none; }
.rv-chat__permiso .bt-casilla { font-size: .8125rem; padding: 8px 0; }

/* ---------- L-d: franja fija de la barbería demo ---------- */
.rv-demo { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0;
  padding: calc(8px + var(--bt-seg-arriba)) 16px 8px; background: var(--bt-alerta); color: #0F1414; font-size: var(--bt-t-chico); font-weight: 600; line-height: 1.35; text-align: center; }
.rv-demo[hidden] { display: none; }
.rv-demo .bt-ico { flex: none; width: 18px; height: 18px; }

/* ---------- pie discreto ---------- */
.rv-pie { padding: 20px 0 calc(24px + var(--bt-seg-abajo)); border-top: 1px solid var(--bt-linea); }
.rv--chat .rv-pie { padding-bottom: calc(84px + var(--bt-seg-abajo)); }
.con-barra .rv-pie { padding-bottom: calc(156px + var(--bt-seg-abajo)); }
.rv-pie__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
/* D7: en el celular el pie deja libre la columna de la burbuja (48 px + aire): con la barra de reservar a la vista, «Aviso de privacidad»
   quedaba justo debajo de ella. Así no la tapa en ninguna posición del scroll. Si los dos enlaces no caben en una línea, el aviso va
   primero (es el que importa) y «Reservas con Barber Tools» baja. */
@media (max-width: 420px) { .rv--chat .rv-pie__in { padding-right: 56px; } .rv--chat .rv-pie__enlace { order: -1; } }
.rv .rv-pie a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--bt-t-micro); color: var(--bt-texto-3); text-decoration: none; }
.rv .rv-pie a:hover { color: var(--bt-texto-2); }
.rv-pie__marca img { width: 19px; height: 16px; }

/* ---------- /r/<token>: ver o cancelar ---------- */
.rv-reserva { padding: 28px 0 8px; }
.rv-reserva h2 { margin: 14px 0 4px; font-size: var(--bt-t-xl); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; overflow-wrap: anywhere; }
.rv-reserva__cuando { margin: 0; font-size: var(--bt-t-m); font-weight: 600; }
.rv-reserva__detalle { margin: 4px 0 0; color: var(--bt-texto-2); }
.rv-reserva__acciones { display: grid; gap: 10px; margin-top: 28px; }
.rv-reserva__contacto { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.rv-confirmar { margin-top: 4px; padding: 16px; border-radius: var(--bt-r-m); background: var(--bt-error-tenue); border: 1px solid rgba(255,122,110,.35); }
.rv-confirmar p { margin: 0 0 12px; font-weight: 600; }
.rv-confirmar .bt-grupo .bt-btn { flex: 1 1 auto; }