/* ============================================================
   barberia-franco — sistema visual clonado de Fresha
   Ver docs/FRESHA-UX.md para el origen de cada token.
   Mobile-first: los breakpoints suben, nunca bajan.
   ============================================================ */

:root {
  --violeta: #6950f3;
  --violeta-suave: #f0edff;
  --violeta-borde: #c9bdfb;

  --negro: #1a1a1a;
  --gris-texto: #8a8a8a;
  --gris-borde: #e6e6e6;
  --gris-fondo: #f7f7f7;
  --gris-deshabilitado: #b8b8b8;

  --blanco: #ffffff;
  --rojo: #d1345b;
  --rojo-suave: #fdeef2;
  --verde: #17845a;
  --verde-suave: #e9f7f1;
  --ambar: #b76e00;
  --ambar-suave: #fff4e3;

  --r-card: 14px;
  --r-chico: 10px;
  --sombra-card: 0 1px 2px rgba(0, 0, 0, .04);

  --fuente: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--fuente);
  color: var(--negro);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.45;
}

a { color: var(--violeta); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Tipografía: títulos grandes y bold, la firma de Fresha --- */
h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 20px; }
h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 14px; }
h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.meta { color: var(--gris-texto); font-size: 14px; }
.precio { font-weight: 700; font-size: 16px; }

@media (min-width: 768px) {
  h1 { font-size: 42px; margin-bottom: 28px; }
  h2 { font-size: 24px; }
}

/* --- Contenedores --- */
.contenedor { max-width: 1180px; margin: 0 auto; padding: 20px 16px 90px; }
.contenedor-angosto { max-width: 460px; margin: 0 auto; padding: 24px 16px 60px; }

@media (min-width: 768px) {
  .contenedor { padding: 32px 24px 60px; }
}

/* --- Barra superior del panel interno --- */
.barra {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gris-borde);
  position: sticky; top: 0; background: var(--blanco); z-index: 20;
}
.barra .marca { font-weight: 700; letter-spacing: -.01em; }
.barra .empuje { margin-left: auto; }

/* Avatar con iniciales — sustituye la foto mientras no haya fotos reales */
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--violeta-suave); color: var(--violeta);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex: none;
}
.avatar-lg { width: 52px; height: 52px; font-size: 17px; }

/* --- Cards --- */
.card {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--r-card);
  padding: 16px;
  box-shadow: var(--sombra-card);
}
.card + .card { margin-top: 12px; }

/* Card seleccionable: el gesto central del wizard de reserva */
.card-sel {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--r-card);
  padding: 16px;
  font: inherit; color: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.card-sel:hover { border-color: var(--gris-deshabilitado); }
.card-sel.activa { border: 2px solid var(--violeta); padding: 15px; }

/* Botón circular +  /  ✓ cuando está elegido */
.chip-mas {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  border: 1px solid var(--gris-borde); background: var(--blanco);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--negro);
}
.card-sel.activa .chip-mas {
  background: var(--violeta); border-color: var(--violeta); color: var(--blanco);
}

/* --- Botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  border: 1px solid transparent; cursor: pointer;
  transition: opacity .12s ease;
}
.btn:hover { text-decoration: none; opacity: .88; }
.btn-negro { background: var(--negro); color: var(--blanco); }
.btn-negro:disabled, .btn-negro.off {
  background: var(--gris-deshabilitado); cursor: not-allowed; opacity: 1;
}
.btn-linea { background: var(--blanco); border-color: var(--gris-borde); color: var(--negro); }
.btn-violeta { background: var(--violeta); color: var(--blanco); }
.btn-bloque { width: 100%; }
.btn-chico { padding: 9px 16px; font-size: 14px; }

/* Botón circular de atrás / cerrar del wizard */
.btn-circulo {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--gris-borde); background: var(--blanco);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer; color: var(--negro);
}

/* --- Formularios --- */
.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.campo .ayuda { font-size: 13px; color: var(--gris-texto); margin-top: 6px; }

input[type="text"], input[type="password"], input[type="number"],
input[type="tel"], input[type="email"], input[type="date"],
input[type="time"], select, textarea {
  width: 100%; padding: 13px 14px;
  border: 1px solid var(--gris-borde); border-radius: var(--r-chico);
  font-family: inherit; font-size: 16px; /* 16px evita el zoom de iOS */
  background: var(--blanco); color: var(--negro);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--violeta);
  box-shadow: 0 0 0 3px var(--violeta-suave);
}
textarea { min-height: 84px; resize: vertical; }

/* --- Píldoras de estado --- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.pill-gris { background: var(--gris-fondo); color: var(--gris-texto); }
.pill-verde { background: var(--verde-suave); color: var(--verde); }
.pill-rojo { background: var(--rojo-suave); color: var(--rojo); }
.pill-ambar { background: var(--ambar-suave); color: var(--ambar); }
.pill-violeta { background: var(--violeta-suave); color: var(--violeta); }

/* --- Avisos flash --- */
.aviso {
  padding: 13px 15px; border-radius: var(--r-chico);
  margin-bottom: 14px; font-size: 14px; font-weight: 500;
}
.aviso-error { background: var(--rojo-suave); color: var(--rojo); }
.aviso-ok { background: var(--verde-suave); color: var(--verde); }

/* --- Rejilla de métricas del panel --- */
.rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .rejilla { grid-template-columns: repeat(4, 1fr); } }

.metrica { text-align: left; }
.metrica .numero { font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.metrica .rotulo { color: var(--gris-texto); font-size: 13px; margin-top: 2px; }

/* --- Navegación inferior (mobile-first: el pulgar manda) --- */
.nav-abajo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: var(--blanco);
  border-top: 1px solid var(--gris-borde);
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
}
.nav-abajo a {
  flex: 1; text-align: center; padding: 6px 2px;
  font-size: 11px; font-weight: 600; color: var(--gris-texto);
  text-decoration: none;
}
.nav-abajo a .ico { display: block; font-size: 19px; line-height: 1.3; }
.nav-abajo a.activo { color: var(--violeta); }

@media (min-width: 768px) {
  .nav-abajo {
    position: static; border-top: none;
    border-bottom: 1px solid var(--gris-borde);
    padding: 0 24px; gap: 4px; justify-content: flex-start;
  }
  .nav-abajo a {
    flex: none; padding: 12px 16px; font-size: 14px;
    border-bottom: 2px solid transparent;
  }
  .nav-abajo a .ico { display: none; }
  .nav-abajo a.activo { border-bottom-color: var(--violeta); }
}

/* --- Utilidades --- */

/* `min-width: 0` NO es decorativo. Un elemento flex trae `min-width: auto`,
   que le impide encogerse por debajo de su contenido: una dirección larga con
   `nowrap` dentro estiraba la tarjeta a 480px en una pantalla de 390 y el
   celular se iba de lado. Además `.crece` sólo estaba definida dentro de
   `.card-sel`, así que en el resto de la app no hacía nada. */
.crece { flex: 1; min-width: 0; }

.fila { display: flex; align-items: center; gap: 12px; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.apilado > * + * { margin-top: 12px; }
.vacio { text-align: center; color: var(--gris-texto); padding: 40px 16px; }
.divisor { height: 1px; background: var(--gris-borde); margin: 16px 0; }
.nowrap { white-space: nowrap; }

/* --- Miniaturas y formularios de dos columnas --- */
.miniatura {
  width: 56px; height: 56px; border-radius: var(--r-chico);
  object-fit: cover; flex: none; background: var(--gris-fondo);
}
.miniatura-lg { width: 88px; height: 88px; }

.dos-columnas { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 520px) { .dos-columnas { grid-template-columns: 1fr 1fr; } }

/* Elemento oculto al público: se ve apagado pero sigue ahí */
.apagada { opacity: .55; }

label.fila input[type="checkbox"] { width: auto; }

/* --- Cards que son enlace --- */
.card-enlace { display: block; color: inherit; text-decoration: none; }
.card-enlace:hover { text-decoration: none; border-color: var(--gris-deshabilitado); }

.banner {
  display: block; color: inherit; text-decoration: none;
  background: var(--violeta-suave); border-color: var(--violeta-borde);
}
.banner:hover { text-decoration: none; }

.linea-mov { padding: 13px 15px; }

/* --- Filtros en pildoras --- */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.filtros .pill { text-decoration: none; padding: 7px 14px; font-size: 13px; }
.filtros .pill:hover { text-decoration: none; opacity: .85; }

/* ============================================================
   RESERVA PÚBLICA — el clon de Fresha
   ============================================================ */

body.publico { background: var(--blanco); }

.contenedor-medio { max-width: 620px; margin: 0 auto; padding: 26px 16px 70px; }
@media (min-width: 768px) { .contenedor-medio { padding: 48px 24px 80px; } }

/* --- Cabecera del wizard: atrás · breadcrumb · cerrar --- */
.wizard-cabecera {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; position: sticky; top: 0; z-index: 20;
  background: var(--blanco);
}
.miga { flex: 1; font-size: 13px; color: var(--gris-deshabilitado); overflow-x: auto; white-space: nowrap; }
.miga .activo { color: var(--negro); font-weight: 500; }
.miga .sep { margin: 0 7px; }

/* --- Dos columnas: opciones + resumen pegajoso --- */
.wizard {
  max-width: 1180px; margin: 0 auto;
  padding: 0 16px 100px;
  display: grid; gap: 26px;
  /* minmax(0,1fr) y NO 1fr: `1fr` es minmax(auto,1fr), y ese `auto` impide
     que la columna baje del ancho mínimo de su contenido. Con un nombre de
     servicio largo la columna crecía a 485px dentro de una pantalla de 390 y
     el celular se iba de lado. Sale caro y no se ve hasta que se mide. */
  grid-template-columns: minmax(0, 1fr);
}
.wizard-izq, .wizard-der { min-width: 0; }
@media (min-width: 900px) {
  .wizard { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 34px;
            padding: 0 24px 60px; }
}

.wizard-izq > form + form { margin-top: 12px; }
.wizard-izq .card-sel { margin-bottom: 12px; align-items: flex-start; }

.resumen {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--r-card);
  padding: 20px;
  box-shadow: var(--sombra-card);
}
@media (min-width: 900px) {
  .wizard-der { position: sticky; top: 84px; align-self: start; }
  .resumen { min-height: 420px; display: flex; flex-direction: column; }
  .resumen .btn { margin-top: auto; }
}

.recorta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enlace-suave { color: var(--violeta); }
.titulo-servicio { font-size: 16px; font-weight: 500; }
.icono-grande { font-size: 22px; flex: none; }

/* --- Carrusel de días --- */
.carrusel-dias {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 4px 2px 10px; margin: 0 -2px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.carrusel-dias::-webkit-scrollbar { height: 0; }

.dia {
  flex: none; width: 66px; padding: 12px 4px;
  border: 1px solid var(--gris-borde); border-radius: var(--r-card);
  text-align: center; text-decoration: none; color: var(--negro);
  scroll-snap-align: start; background: var(--blanco);
}
.dia:hover { text-decoration: none; border-color: var(--gris-deshabilitado); }
.dia-nombre, .dia-mes { display: block; font-size: 12px; color: var(--gris-texto); }
.dia-numero { display: block; font-size: 21px; font-weight: 700; line-height: 1.25; }

/* Seleccionado: violeta RELLENO. Distinto a la hora, que va con borde —
   así los dos estados no se confunden en la misma pantalla. */
.dia.activo { background: var(--violeta); border-color: var(--violeta); color: var(--blanco); }
.dia.activo .dia-nombre, .dia.activo .dia-mes { color: rgba(255, 255, 255, .82); }

.dia.apagado { opacity: .4; cursor: not-allowed; }
.dia.apagado .dia-numero { font-weight: 500; }

/* --- Píldora del profesional --- */
.pildora-persona {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px; border-radius: 999px;
  border: 1px solid var(--gris-borde); background: var(--blanco);
  color: var(--negro); text-decoration: none; font-size: 14px; font-weight: 500;
}
.pildora-persona:hover { text-decoration: none; border-color: var(--gris-deshabilitado); }

/* --- Píldora flotante que sube al resumen (sólo móvil) --- */
.pildora-flotante {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 40; padding: 10px 20px; border-radius: 999px;
  background: var(--blanco); border: 1px solid var(--violeta);
  color: var(--violeta); font-size: 13px; font-weight: 700;
  text-decoration: none; box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
.pildora-flotante:hover { text-decoration: none; }
@media (min-width: 900px) { .pildora-flotante { display: none; } }

/* --- Pestañas (rápido / con cuenta) --- */
.pestanas {
  display: flex; gap: 6px; padding: 4px; margin-bottom: 20px;
  background: var(--gris-fondo); border-radius: 999px;
}
.pestana {
  flex: 1; padding: 9px 12px; border: none; border-radius: 999px;
  background: transparent; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--gris-texto); cursor: pointer;
}
.pestana.activa { background: var(--blanco); color: var(--negro); box-shadow: var(--sombra-card); }

/* --- Pie de confianza de la portada --- */
.pie-confianza { text-align: center; margin-top: 46px; }
.pie-confianza .meta { margin: 4px 0; }

/* --- Mosaico de la galeria --- */
.mosaico {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px;
}
@media (min-width: 700px) { .mosaico { grid-template-columns: repeat(3, 1fr); } }

/* --- Foto de portada del negocio: a sangre, arriba de todo --- */
.portada {
  height: 190px; background-size: cover; background-position: center;
  background-color: var(--gris-fondo);
}
@media (min-width: 768px) { .portada { height: 280px; } }

/* ============================================================
   CABECERA DE LA PORTADA
   Sin foto se ve intencional; con foto, la foto manda.
   ============================================================ */
.hero {
  background: linear-gradient(160deg, #1f1b3d 0%, var(--negro) 70%);
  color: var(--blanco);
  text-align: center;
  padding: 40px 20px 34px;
}
.hero-foto { background-size: cover; background-position: center; padding: 0; }
.hero-foto .hero-cubierta {
  /* Sin esta cortina, el texto blanco desaparece sobre una foto clara. */
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.78) 100%);
  padding: 40px 20px 34px;
}

.hero-logo {
  width: 76px; height: 76px; border-radius: 22px; object-fit: cover;
  display: block; margin: 0 auto 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.hero-iniciales {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); color: var(--blanco);
  font-size: 27px; font-weight: 700; letter-spacing: .02em;
  border: 1px solid rgba(255,255,255,.22);
}
.hero-nombre {
  font-size: 26px; font-weight: 700; letter-spacing: -.02em;
  margin: 0 0 4px; color: var(--blanco);
}
.hero-zona { margin: 0; font-size: 14px; color: rgba(255,255,255,.72); }
.hero-rating {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 10px 0 0; font-size: 14px; color: var(--blanco);
}
.estrellas { display: inline-flex; gap: 2px; color: #ffc043; }
.estrellas svg { width: 14px; height: 14px; }
.hero-resenas { color: rgba(255,255,255,.6); }

@media (min-width: 768px) {
  .hero, .hero-foto .hero-cubierta { padding: 56px 20px 48px; }
  .hero-nombre { font-size: 32px; }
  .hero-logo { width: 92px; height: 92px; }
}

.eslogan {
  text-align: center; color: var(--gris-texto);
  margin: 0 0 26px; font-size: 15px;
}
.titulo-seccion {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--gris-texto); margin: 0 0 12px;
}

/* --- Tarjetas de opción: ícono a la izquierda, chevron a la derecha --- */
.opcion {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 16px; margin-bottom: 12px;
  background: var(--blanco); border: 1px solid var(--gris-borde);
  border-radius: var(--r-card); box-shadow: var(--sombra-card);
  color: inherit; text-decoration: none;
  transition: border-color .12s ease, transform .12s ease;
}
.opcion:hover {
  text-decoration: none; border-color: var(--negro);
  transform: translateY(-1px);
}
.opcion-ico {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--violeta-suave); color: var(--violeta);
  display: inline-flex; align-items: center; justify-content: center;
}
.opcion-ico svg { width: 21px; height: 21px; }
.opcion-titulo { display: block; font-size: 16px; font-weight: 700; }
.opcion .meta { display: block; font-size: 14px; }
.opcion-flecha { color: var(--gris-deshabilitado); font-size: 24px; flex: none; }

/* --- Contacto --- */
.contacto { margin-top: 26px; }
.contacto p {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 10px; font-size: 14px; color: var(--gris-texto);
}
.contacto svg { width: 17px; height: 17px; flex: none; }
.contacto a { color: var(--negro); }

.pie-escudo { display: inline-flex; color: var(--gris-deshabilitado); }
.pie-escudo svg { width: 22px; height: 22px; }

/* --- Migas de pan: cuatro pasos no caben en un celular --- */
.miga-corta { display: inline; }
.miga-larga { display: none; }
@media (min-width: 620px) {
  .miga-corta { display: none; }
  .miga-larga { display: inline; }
}

/* --- Línea de dato con ícono (fecha, hora, barbero, dirección) --- */
.dato {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px; font-size: 14px; color: var(--gris-texto);
}
.dato svg { width: 16px; height: 16px; flex: none; }

.palomita {
  width: 68px; height: 68px; border-radius: 50%; margin: 26px auto 14px;
  background: var(--verde-suave); color: var(--verde);
  display: flex; align-items: center; justify-content: center;
}
.palomita svg { width: 32px; height: 32px; }

/* La píldora se esconde en cuanto el resumen entra en pantalla: ahí ya no
   informa nada y lo único que hacía era taparlo. */
.pildora-flotante {
  transition: opacity .18s ease, transform .18s ease;
}
.pildora-flotante.oculta {
  opacity: 0; transform: translateX(-50%) translateY(12px); pointer-events: none;
}