/* MC estilistas — hoja de estilos.
   Lenguaje visual inspirado en Apple (tipografía del sistema, mucho aire,
   secciones alternando blanco y gris, botones de píldora, líneas de un píxel)
   con la paleta del logo: rojo hibisco y oro sobre blanco.
   Pensada primero para el móvil. */

:root {
  /* La web es de fondo claro a propósito. Declararlo evita que algunos
     navegadores de móvil la oscurezcan por su cuenta y rompan la paleta. */
  color-scheme: light;

  /* --- Paleta del logo --- */
  --rojo:         #9e1b22;   /* el rojo de los hibiscos */
  --rojo-vivo:    #c1272d;
  --rojo-oscuro:  #7d1319;
  --rojo-nube:    #fdf2f2;
  --oro:          #b8912f;
  --oro-claro:    #e3c77a;
  --oro-nube:     #fbf6ea;
  --oro-oscuro:   #8a6a1c;

  /* --- Neutros al estilo Apple --- */
  --tinta:        #1d1d1f;
  --tinta-suave:  #6e6e73;
  --tinta-tenue:  #86868b;
  --papel:        #ffffff;
  --gris:         #f5f5f7;
  --linea:        #d2d2d7;
  --linea-tenue:  #e8e8ed;

  --verde-ok:     #1d7a45;
  --verde-suave:  #e8f5ed;
  --rojo-error:   #b3261e;
  --rojo-suave:   #fdeceb;

  --sombra:       0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --sombra-alta:  0 2px 8px rgba(0,0,0,.06), 0 20px 48px rgba(0,0,0,.10);

  --radio:        18px;
  --radio-chico:  12px;
  --pildora:      980px;

  /* En iPhone, iPad y Mac esto ES la San Francisco del sistema. */
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI',
          Roboto, 'Helvetica Neue', Arial, sans-serif;

  --ancho:        1040px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 60px;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.01em;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { margin: 0 0 .4em; font-weight: 600; line-height: 1.07; letter-spacing: -.022em; }
h1 { font-size: clamp(2.4rem, 8vw, 4rem); }
h2 { font-size: clamp(1.9rem, 5.5vw, 2.9rem); }
h3 { font-size: 1.2rem; letter-spacing: -.015em; }
p  { margin: 0 0 1em; }

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

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 22px; }
.estrecho { max-width: 680px; }

/* Enlace con chevron, como los de Apple */
.enlace-chevron { font-size: 1.05rem; }
.enlace-chevron::after { content: ' \203A'; font-weight: 400; }
.enlace-chevron:hover { text-decoration: underline; }

/* --------------------------------------------------------------- cabecera --- */

.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linea-tenue);
}
.cabecera .contenedor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 56px;
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); }
.marca:hover { text-decoration: none; }
.marca img { height: 38px; width: auto; display: block; }
.marca .marca-texto { font-size: 1.02rem; font-weight: 600; letter-spacing: -.015em; }
.marca .marca-firma { display: block; font-size: .68rem; font-weight: 400; color: var(--tinta-tenue); letter-spacing: 0; }
@media (max-width: 420px) { .marca .marca-texto { display: none; } }

.nav-enlaces { display: flex; align-items: center; gap: 4px; }
.nav-enlaces a { font-size: .88rem; color: var(--tinta); padding: 8px 11px; border-radius: 8px; }
.nav-enlaces a:hover { background: rgba(0,0,0,.045); text-decoration: none; }
.nav-enlaces .btn { font-size: .88rem; }
@media (max-width: 620px) { .nav-enlaces .ocultar-movil { display: none; } }

/* ---------------------------------------------------------------- botones --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 1rem; font-weight: 400; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  padding: 12px 23px; border-radius: var(--pildora); border: 1px solid transparent;
  background: var(--rojo); color: #fff; min-height: 46px;
  transition: background .18s ease, opacity .18s ease, transform .1s ease;
}
.btn:hover { background: var(--rojo-oscuro); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.btn-claro { background: var(--papel); color: var(--rojo); border-color: var(--linea); }
.btn-claro:hover { background: var(--gris); border-color: var(--linea); }
.btn-oro { background: var(--oro); }
.btn-oro:hover { background: #97761f; }
.btn-texto { background: none; color: var(--rojo); padding: 10px 14px; }
.btn-texto:hover { background: rgba(158,27,34,.06); }
.btn-peligro { background: var(--rojo-error); }
.btn-peligro:hover { background: #8f1e17; }
.btn-bloque { width: 100%; }
.btn-chico { padding: 7px 15px; min-height: 36px; font-size: .88rem; }

/* ----------------------------------------------------------------- portada --- */

.hero { padding: clamp(56px, 11vw, 116px) 0 clamp(44px, 8vw, 88px); text-align: center; }
.hero-logo { width: clamp(160px, 42vw, 236px); height: auto; margin: 0 auto 26px; display: block; }
.hero h1 { margin-bottom: 18px; }
.hero .entradilla {
  font-size: clamp(1.05rem, 2.6vw, 1.28rem); line-height: 1.42; color: var(--tinta-suave);
  max-width: 620px; margin: 0 auto 32px;
}
.hero-acciones { display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: center; align-items: center; }
.hero .letra-chica { margin-top: 26px; font-size: .82rem; color: var(--tinta-tenue); }

.seccion { padding: clamp(56px, 9vw, 104px) 0; }
.seccion-gris { background: var(--gris); }
.seccion-titulo { text-align: center; max-width: 640px; margin: 0 auto clamp(34px, 5vw, 56px); }
.seccion-titulo p { color: var(--tinta-suave); font-size: 1.08rem; margin: 0; }
.filete { width: 44px; height: 3px; border: 0; border-radius: 3px; margin: 0 auto 24px;
  background: linear-gradient(90deg, var(--oro-claro), var(--oro)); }

/* --------------------------------------------------------------- servicios --- */

.servicios { display: grid; gap: 14px; }
@media (min-width: 720px) { .servicios { grid-template-columns: 1fr 1fr; gap: 16px; } }

.servicio {
  background: var(--papel); border-radius: var(--radio); padding: 22px 24px;
  display: flex; gap: 18px; align-items: baseline;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.seccion-gris .servicio { box-shadow: none; }
.servicio-info { flex: 1; min-width: 0; }
.servicio-nombre { font-weight: 600; letter-spacing: -.015em; }
.servicio-desc { font-size: .92rem; color: var(--tinta-suave); margin: 3px 0 0; line-height: 1.4; }
.servicio-datos { text-align: right; white-space: nowrap; }
.servicio-precio { font-size: 1.22rem; font-weight: 600; letter-spacing: -.02em; }
.servicio-duracion { font-size: .82rem; color: var(--tinta-tenue); margin-top: 2px; }

/* ------------------------------------------------------- los cuatro pasos --- */

.pasos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; text-align: left; }
.pasos-lista li {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--gris); border-radius: var(--radio); padding: 24px 26px;
}
.paso-numero {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--oro-nube); color: var(--oro-oscuro);
  font-size: 1rem; font-weight: 600; line-height: 1;
}
.pasos-lista h3 { font-size: 1.08rem; margin: 4px 0 5px; letter-spacing: -.015em; }
.pasos-lista p { margin: 0; color: var(--tinta-suave); font-size: .96rem; line-height: 1.45; }

/* ------------------------------------------------------------------ fichas --- */
/* Las tres fichas de "El salón". La clave: NO se estiran a la misma altura.
   En pantalla ancha, las dos cortas (dirección y contacto) van apiladas en una
   columna y el horario, que es alto, ocupa la otra. Así no quedan huecos. */

.salon-rejilla { display: grid; gap: 16px; }
.salon-columna { display: grid; gap: 16px; align-content: start; }
@media (min-width: 840px) {
  .salon-rejilla { grid-template-columns: 1fr 1fr; align-items: start; gap: 18px; }
  .salon-columna { gap: 18px; }
}

.ficha {
  background: var(--gris); border-radius: var(--radio);
  padding: 30px 26px; text-align: center;
}
.seccion-gris .ficha { background: var(--papel); }

.ficha-icono {
  width: 44px; height: 44px; margin: 0 auto 16px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--oro-nube); color: var(--oro-oscuro);
}
.ficha h3 {
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-tenue); font-weight: 600; margin-bottom: 12px;
}
.ficha p { margin: 0; }
.ficha-dato { font-size: 1.14rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.35; }
.ficha-dato a { color: var(--tinta); }
.ficha-dato a:hover { color: var(--rojo); text-decoration: none; }
.ficha-sub { color: var(--tinta-tenue); margin-top: 2px !important; }
.ficha-accion { margin-top: 16px !important; }
.ficha-accion .enlace-chevron { font-size: .95rem; }
.ficha-accion + .ficha-accion { margin-top: 8px !important; }

/* El horario, alineado como una tabla de verdad. */
.ficha-horario { text-align: center; }
.tabla-horario { width: 100%; border-collapse: collapse; font-size: .97rem; text-align: left; margin-top: 4px; }
.tabla-horario td { padding: 11px 2px; border-bottom: 1px solid rgba(0,0,0,.07); vertical-align: top; }
.tabla-horario tr:last-child td { border-bottom: 0; }
.tabla-horario td:first-child { text-transform: capitalize; color: var(--tinta-suave); white-space: nowrap; }
.tabla-horario td:last-child { text-align: right; font-variant-numeric: tabular-nums; line-height: 1.45; }
.tabla-horario .cerrado { color: var(--tinta-tenue); }
.tabla-horario .hoy td { font-weight: 600; color: var(--tinta); }
.tabla-horario .hoy td:first-child { color: var(--tinta); }
.tabla-horario .hoy td:first-child::after {
  content: ' · hoy'; color: var(--rojo); font-weight: 500; text-transform: none;
}

/* --------------------------------------------------------------------- pie --- */

.pie { background: var(--gris); border-top: 1px solid var(--linea-tenue); padding: 44px 0 34px; font-size: .8rem; color: var(--tinta-suave); }
.pie a { color: var(--rojo); }
.pie .pie-rejilla { display: grid; gap: 26px; }
@media (min-width: 720px) { .pie .pie-rejilla { grid-template-columns: 2fr 1fr 1fr; } }
.pie h3 { font-size: .8rem; font-weight: 600; color: var(--tinta); letter-spacing: -.01em; margin-bottom: 8px; }
.pie img.pie-logo { width: 108px; height: auto; margin-bottom: 10px; }
.pie p { margin: 0 0 5px; }
.pie-legal { border-top: 1px solid var(--linea); margin-top: 30px; padding-top: 18px; color: var(--tinta-tenue); }

/* El acceso al panel, en el pie. Deliberadamente discreto: a una clienta no le
   interesa, y a Mónica le basta con que esté siempre en el mismo sitio. */
.acceso-panel { margin: 10px 0 0 !important; }
.acceso-panel a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--tinta-tenue) !important; font-size: .78rem; text-decoration: none;
  padding: 5px 10px; margin-left: -10px; border-radius: var(--pildora);
  transition: background .18s ease, color .18s ease;
}
.acceso-panel a::before { content: '🔒'; font-size: .82rem; filter: grayscale(1) opacity(.55); }
.acceso-panel a:hover { color: var(--rojo) !important; background: var(--rojo-nube); }
.acceso-panel a:hover::before { filter: none; }


/* -------------------------------------------------------------- formularios --- */

.tarjeta { background: var(--papel); border-radius: var(--radio); padding: clamp(22px, 4vw, 34px); box-shadow: var(--sombra); }
.seccion-gris .tarjeta, .fondo-gris .tarjeta { box-shadow: none; }

.campo { margin-bottom: 20px; }
.campo label { display: block; font-weight: 500; font-size: .94rem; margin-bottom: 7px; letter-spacing: -.01em; }
.campo .ayuda { font-size: .84rem; color: var(--tinta-tenue); font-weight: 400; margin: 0 0 7px; line-height: 1.35; }

input[type=text], input[type=tel], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=time], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--tinta);
  padding: 12px 15px; border: 1px solid var(--linea); border-radius: var(--radio-chico);
  background: var(--papel); min-height: 46px; -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type=date], input[type=time] { -webkit-appearance: none; }
textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--rojo);
  box-shadow: 0 0 0 4px rgba(158,27,34,.12);
}
::placeholder { color: var(--tinta-tenue); }

.fila { display: grid; gap: 16px; }
@media (min-width: 640px) { .fila-2 { grid-template-columns: 1fr 1fr; } .fila-3 { grid-template-columns: 1fr 1fr 1fr; } }

.aviso { padding: 14px 17px; border-radius: var(--radio-chico); margin-bottom: 20px; font-size: .94rem; line-height: 1.4; }
.aviso-error { background: var(--rojo-suave); color: var(--rojo-error); }
.aviso-ok { background: var(--verde-suave); color: var(--verde-ok); }
.aviso-info { background: var(--oro-nube); color: #7a5f13; }
[hidden] { display: none !important; }

/* ----------------------------------------------------------------- reserva --- */

.pasos { display: flex; gap: 6px; justify-content: center; margin-bottom: 34px; flex-wrap: wrap; }
.paso-punto {
  display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--tinta-tenue);
  padding: 6px 13px 6px 7px; border-radius: var(--pildora); background: var(--gris);
}
.paso-punto b {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #dcdce1; color: var(--tinta-suave); font-size: .74rem; font-weight: 600;
}
.paso-punto.activo { color: var(--tinta); background: var(--rojo-nube); }
.paso-punto.activo b { background: var(--rojo); color: #fff; }
.paso-punto.hecho b { background: var(--verde-ok); color: #fff; }
@media (max-width: 640px) { .paso-punto .paso-nombre { display: none; } .paso-punto { padding: 6px; } }

.elegibles { display: grid; gap: 10px; }
.elegible {
  display: flex; gap: 15px; align-items: flex-start; cursor: pointer;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 17px 19px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.elegible:hover { border-color: var(--tinta-tenue); }
.elegible input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: var(--rojo); }
.elegible.marcado { border-color: var(--rojo); background: var(--rojo-nube); box-shadow: 0 0 0 3px rgba(158,27,34,.09); }
.elegible:focus-within { outline: none; box-shadow: 0 0 0 4px rgba(158,27,34,.14); }

/* Calendario */
.cal-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 8px; }
.cal-mes { font-size: 1.16rem; font-weight: 600; text-transform: capitalize; letter-spacing: -.02em; }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button {
  font: inherit; font-size: 1.1rem; cursor: pointer; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--linea); background: var(--papel); color: var(--tinta);
  transition: background .15s ease;
}
.cal-nav button:hover:not(:disabled) { background: var(--gris); }
.cal-nav button:disabled { opacity: .3; cursor: not-allowed; }

.cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-dia-nombre { text-align: center; font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinta-tenue); padding: 6px 0; }
.cal-dia {
  position: relative; aspect-ratio: 1; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: inherit; font-size: 1rem; cursor: pointer; padding: 0;
  border: 1px solid var(--linea); border-radius: var(--radio-chico);
  background: var(--papel); color: var(--tinta);
  transition: background .13s ease, border-color .13s ease;
}
.cal-dia:hover:not(:disabled) { background: var(--gris); border-color: var(--tinta-tenue); }
.cal-dia:disabled { cursor: not-allowed; color: #c7c7cc; background: var(--gris); border-color: transparent; }
.cal-dia.vacio { border: 0; background: none; cursor: default; }
.cal-dia.elegido { background: var(--rojo); border-color: var(--rojo); color: #fff; font-weight: 600; }
.cal-dia.elegido:hover { background: var(--rojo-oscuro); }
.cal-dia .punto { width: 5px; height: 5px; border-radius: 50%; background: var(--oro); margin-top: 4px; }
.cal-dia.elegido .punto { background: rgba(255,255,255,.9); }
.cal-dia.hoy:not(.elegido) { border-color: var(--rojo); }
.cal-leyenda { display: flex; gap: 18px; justify-content: center; font-size: .82rem;
  color: var(--tinta-tenue); margin-top: 18px; flex-wrap: wrap; }
.cal-leyenda span { display: flex; align-items: center; gap: 7px; }
.cal-leyenda i { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--linea); background: var(--papel); }
.cal-leyenda i.no { background: var(--gris); border-color: transparent; }

/* Horas */
.grupo-horas { margin-bottom: 26px; }
.grupo-horas:last-child { margin-bottom: 0; }
.grupo-horas h3 { font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-tenue); margin-bottom: 12px; }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.hora {
  font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums; cursor: pointer; padding: 12px 6px;
  border: 1px solid var(--linea); border-radius: var(--radio-chico); background: var(--papel);
  color: var(--tinta); min-height: 46px; transition: background .13s ease, border-color .13s ease;
}
.hora:hover { background: var(--gris); border-color: var(--tinta-tenue); }
.hora.elegida { background: var(--rojo); border-color: var(--rojo); color: #fff; font-weight: 600; }

/* Barra de resumen pegada abajo */
.resumen-barra {
  position: sticky; bottom: 0; z-index: 40; margin-top: 28px;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--linea-tenue); border-radius: var(--radio);
  padding: 14px 18px; box-shadow: var(--sombra-alta);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.resumen-barra .texto { font-size: .86rem; color: var(--tinta-tenue); min-width: 0; }
.resumen-barra .texto b { display: block; color: var(--tinta); font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }
@media (max-width: 500px) { .resumen-barra .btn { width: 100%; } }

/* Resumen de la cita */
.resumen-cita { background: var(--papel); border: 1px solid var(--linea-tenue); border-radius: var(--radio); overflow: hidden; }
.resumen-cita .cabeza { padding: 22px 24px; border-bottom: 1px solid var(--linea-tenue); background: var(--gris); }
.resumen-cita .cabeza .dia { font-size: 1.02rem; color: var(--tinta-suave); text-transform: capitalize; }
.resumen-cita .cabeza .hora-grande { font-size: 2.6rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; margin: 2px 0 4px; }
.resumen-cita ul { list-style: none; margin: 0; padding: 6px 24px; }
.resumen-cita li { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0;
  border-bottom: 1px solid var(--linea-tenue); font-size: .96rem; }
.resumen-cita li:last-child { border-bottom: 0; }
.resumen-cita .total { padding: 16px 24px; border-top: 1px solid var(--linea);
  display: flex; justify-content: space-between; font-weight: 600; }

.codigo-cita {
  display: inline-block; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 1.7rem; font-weight: 600; letter-spacing: .2em;
  background: var(--gris); color: var(--tinta); padding: 12px 20px 12px 26px; border-radius: var(--radio-chico);
}
.marca-ok {
  width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--verde-ok); color: #fff; display: grid; place-items: center;
  font-size: 2rem; line-height: 1;
}

.cargando { text-align: center; padding: 44px 20px; color: var(--tinta-tenue); font-size: .94rem; }
.cargando::after {
  content: ''; display: block; width: 24px; height: 24px; margin: 16px auto 0;
  border: 2px solid var(--linea); border-top-color: var(--tinta-tenue);
  border-radius: 50%; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::after { animation: none !important; transition: none !important; } }

.vacio { color: var(--tinta-tenue); padding: 26px 0; text-align: center; font-size: .95rem; }

/* ------------------------------------------------------------------- panel --- */

.panel-cabecera {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linea-tenue);
}
.panel-cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 12px; }
.panel-cabecera .marca img { height: 32px; }
.panel-cabecera .marca-texto { font-size: .95rem; }

.pestanas { position: sticky; top: 56px; z-index: 55; background: var(--papel);
  border-bottom: 1px solid var(--linea-tenue); overflow-x: auto; }
.pestanas .contenedor { display: flex; gap: 2px; }
.pestana {
  font: inherit; font-size: .94rem; font-weight: 500; cursor: pointer; white-space: nowrap;
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 15px 15px 13px;
  color: var(--tinta-suave); transition: color .15s ease;
}
.pestana:hover { color: var(--tinta); }
.pestana.activa { color: var(--rojo); border-bottom-color: var(--rojo); font-weight: 600; }

.fondo-gris { background: var(--gris); min-height: 100vh; }

.cifras { display: grid; gap: 14px; margin-bottom: 26px; }
@media (min-width: 640px) { .cifras { grid-template-columns: repeat(4, 1fr); } }
.cifra { background: var(--papel); border-radius: var(--radio); padding: 20px 22px; }
.cifra .valor { font-size: 1.9rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.cifra .etiqueta { font-size: .78rem; color: var(--tinta-tenue); margin-top: 7px; letter-spacing: -.005em; }

.bloque { background: var(--papel); border-radius: var(--radio); padding: clamp(20px, 3.4vw, 30px); margin-bottom: 22px; }
.bloque > h2 { font-size: 1.42rem; margin-bottom: 5px; }
.bloque > .sub { color: var(--tinta-suave); font-size: .92rem; margin: 0 0 22px; line-height: 1.42; }

.tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.datos { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 580px; }
table.datos th {
  text-align: left; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-tenue); padding: 9px 11px; border-bottom: 1px solid var(--linea); white-space: nowrap;
}
table.datos td { padding: 13px 11px; border-bottom: 1px solid var(--linea-tenue); vertical-align: top; line-height: 1.4; }
table.datos tr:last-child td { border-bottom: 0; }
table.datos tr.cancelada td { opacity: .45; text-decoration: line-through; }
table.datos .acciones { display: flex; gap: 6px; white-space: nowrap; }

.etiqueta-estado {
  display: inline-block; font-size: .72rem; font-weight: 600;
  padding: 3px 10px; border-radius: var(--pildora); white-space: nowrap;
  background: var(--linea-tenue); color: var(--tinta-suave);   /* el neutro, si no se dice otra cosa */
}
.etiqueta-estado.activa { background: var(--verde-suave); color: var(--verde-ok); }
.etiqueta-estado.cancelada { background: var(--rojo-suave); color: var(--rojo-error); }
/* Los estados que llegaron con la señal y el historial */
.etiqueta-estado.pendiente { background: var(--oro-nube); color: var(--oro-oscuro); }
.etiqueta-estado.no_show { background: var(--rojo-suave); color: var(--rojo-error); }
.etiqueta-estado.aviso { background: #fdeee0; color: #a55418; }
.etiqueta-estado.confianza { background: var(--verde-suave); color: var(--verde-ok); }

.dia-horario { border: 1px solid var(--linea-tenue); border-radius: var(--radio-chico); padding: 16px; margin-bottom: 10px; }
.dia-horario > .cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dia-horario > .cabeza b { text-transform: capitalize; letter-spacing: -.015em; }
.dia-horario.cerrado { background: var(--gris); border-color: transparent; }
.tramo { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.tramo input[type=time] { max-width: 132px; }
.tramo .a { color: var(--tinta-tenue); font-size: .9rem; }

.barra-guardar {
  position: sticky; bottom: 0; z-index: 45; margin-top: 4px;
  background: rgba(245,245,247,.86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--linea); padding: 15px 0;
}

code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .88em;
  background: var(--gris); padding: 2px 6px; border-radius: 6px; color: var(--tinta);
}

/* ------------------------------------------------------------------ equipo --- */

.equipo { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); max-width: 900px; margin: 0 auto; }
.persona { margin: 0; text-align: center; }
.persona-foto {
  width: 156px; height: 156px; margin: 0 auto 16px;
  border-radius: 50%; overflow: hidden; background: var(--gris);
  display: grid; place-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 10px 26px rgba(0,0,0,.08);
}
.persona-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.persona-foto.sin-foto {
  background: linear-gradient(150deg, var(--oro-claro) 0%, var(--oro) 55%, #8a6a1c 100%);
  color: #fff; font-size: 3.1rem; font-weight: 600; letter-spacing: -.02em;
}
.persona-nombre { display: block; font-size: 1.14rem; font-weight: 600; letter-spacing: -.015em; }
.persona-puesto { display: block; font-size: .88rem; color: var(--oro-oscuro); margin-top: 2px; }
.persona-bio { margin: 10px 0 0; font-size: .93rem; line-height: 1.45; color: var(--tinta-suave); }

/* El circulito con la inicial o la foto, en el paso "con quién" de la reserva */
.prof-avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--oro-claro), var(--oro));
  color: #fff; font-weight: 600; font-size: 1.05rem;
}
.prof-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------------------------ vídeos --- */
/* Los reels del perfil. La tarjeta es nuestra: la portada del vídeo a sangre,
   sin la cabecera ni el pie de Instagram. Al pulsar, el vídeo se reproduce
   dentro de la propia tarjeta, sin abrir ninguna ventana. */

.videos { display: grid; gap: 20px; grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
@media (min-width: 620px)  { .videos { grid-template-columns: 1fr 1fr; max-width: 700px; } }
@media (min-width: 940px)  { .videos { grid-template-columns: repeat(3, 1fr); max-width: none; } }

.video { margin: 0; }

.video-tarjeta {
  position: relative; width: 100%; aspect-ratio: 9 / 16;
  overflow: hidden; border-radius: 22px; background: #000;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.10);
  transition: box-shadow .3s ease, transform .3s ease;
}
.video-tarjeta:not(.reproduciendo):hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 22px 48px rgba(0,0,0,.16);
}

.video-portada {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.video-tarjeta:not(.reproduciendo):hover .video-portada { transform: scale(1.045); }

/* Velo suave: da profundidad y hace que el botón blanco se lea sobre cualquier
   portada, clara u oscura. */
.video-velo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.20) 0%, rgba(0,0,0,0) 58%),
    linear-gradient(to top, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 42%);
}
.video-tarjeta.sin-portada { background: linear-gradient(150deg, #b8912f 0%, #9e1b22 62%, #6f1116 100%); }
.video-tarjeta.sin-portada .video-velo { background: none; }

/* El botón ocupa toda la tarjeta; el círculo es solo su parte visible. */
.video-boton {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.video-boton:focus-visible { outline: 3px solid #fff; outline-offset: -6px; border-radius: 22px; }

.video-play {
  width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; padding-left: 3px;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), background .28s ease;
}
.video-boton:hover .video-play { transform: scale(1.1); background: rgba(255,255,255,.34); }

.video-sello {
  position: absolute; top: 13px; right: 13px; width: 32px; height: 32px; z-index: 2;
  display: grid; place-items: center; border-radius: 10px; color: #fff;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

/* Ya reproduciendo: se retira todo lo que tapaba y manda el reproductor. */
.video-tarjeta.reproduciendo .video-portada,
.video-tarjeta.reproduciendo .video-velo,
.video-tarjeta.reproduciendo .video-sello,
.video-tarjeta.reproduciendo .video-boton { display: none; }

/* Vídeo propio: el reproductor del navegador, a sangre en la tarjeta. */
.video-propio {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #000; display: block;
}

/* Marco de Instagram: se recorta para que se vea solo el vídeo. El iframe se
   dibuja a tamaño fijo y JavaScript lo desplaza y escala (ver inicio.js). */
.video-recorte { position: absolute; inset: 0; overflow: hidden; }
.video-recorte iframe { position: absolute; top: 0; left: 0; border: 0; display: block; }

.video figcaption {
  margin-top: 13px; padding: 0 4px; font-size: .93rem; line-height: 1.4;
  color: var(--tinta-suave); text-align: center;
}

/* ================================================== calendario semanal ===== */
/* Siete columnas, una por día, y las citas colocadas por su hora. En móvil se
   desplaza en horizontal: siete columnas no caben en una pantalla estrecha. */

.semana-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.semana-nav { display: flex; gap: 6px; align-items: center; }
.semana-nav button:not(.btn) {
  font: inherit; font-size: 1.1rem; cursor: pointer; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid var(--linea); background: var(--papel); color: var(--tinta);
}
.semana-nav button:not(.btn):hover { background: var(--gris); }

.semana-leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: var(--tinta-suave); margin-bottom: 14px; }
.semana-leyenda span { display: flex; align-items: center; gap: 6px; }
.semana-leyenda i { width: 11px; height: 11px; border-radius: 3px; display: block; }

.semana-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.semana-rejilla {
  display: grid; grid-template-columns: 56px repeat(7, minmax(96px, 1fr));
  min-width: 760px; border-top: 1px solid var(--linea);
}

.semana-dia-cabeza {
  padding: 9px 4px; text-align: center; border-left: 1px solid var(--linea-tenue);
  border-bottom: 1px solid var(--linea); background: var(--papel);
  position: sticky; top: 0; z-index: 3;
}
.semana-dia-cabeza .nd { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-tenue); }
.semana-dia-cabeza .nn { font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; }
.semana-dia-cabeza.hoy { background: var(--rojo-nube); }
.semana-dia-cabeza.hoy .nn { color: var(--rojo); }
.semana-dia-cabeza.cerrado .nn { color: var(--tinta-tenue); font-weight: 400; }
.semana-dia-cabeza .cuantas { font-size: .7rem; color: var(--tinta-tenue); }

.semana-esquina { border-bottom: 1px solid var(--linea); background: var(--papel); position: sticky; top: 0; z-index: 4; }

.semana-horas { position: relative; background: var(--papel); }
.semana-horas .marca-hora {
  position: absolute; right: 7px; font-size: .72rem; color: var(--tinta-tenue);
  transform: translateY(-50%); font-variant-numeric: tabular-nums;
}

.semana-col { position: relative; border-left: 1px solid var(--linea-tenue); background: var(--papel); }
.semana-col.cerrado { background: var(--gris); }
.semana-col .linea-hora { position: absolute; left: 0; right: 0; border-top: 1px solid var(--linea-tenue); }
.semana-col .linea-media { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(0,0,0,.045); }
.semana-col .franja-cerrada {
  position: absolute; left: 0; right: 0;
  background: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 5px, transparent 5px 10px);
}
.semana-col .ahora { position: absolute; left: 0; right: 0; border-top: 2px solid var(--rojo); z-index: 2; }
.semana-col .ahora::before {
  content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--rojo);
}

.cita-bloque {
  position: absolute; overflow: hidden; cursor: pointer; text-align: left;
  border: 0; border-left: 3px solid var(--rojo); border-radius: 7px;
  background: var(--rojo-nube); color: var(--tinta);
  padding: 4px 6px; font: inherit; font-size: .76rem; line-height: 1.25;
  transition: transform .12s ease, box-shadow .12s ease;
}
.cita-bloque:hover { transform: scale(1.02); box-shadow: 0 4px 14px rgba(0,0,0,.16); z-index: 5; }
.cita-bloque:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; z-index: 5; }
.cita-bloque .cb-hora { font-variant-numeric: tabular-nums; color: var(--tinta-suave); font-size: .72rem; }
.cita-bloque .cb-nombre { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cita-bloque .cb-quien { display: block; font-size: .71rem; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cita-bloque.cancelada { opacity: .5; background: var(--gris); border-left-color: var(--tinta-tenue); }
.cita-bloque.cancelada .cb-nombre { text-decoration: line-through; }
.cita-bloque.sin-asignar { border-left-style: dashed; }

.semana-vacia { padding: 40px 20px; text-align: center; color: var(--tinta-tenue); grid-column: 1 / -1; }

/* ------------------------------------------------------ ventana de aviso ---- */
/* Se usa para confirmar la cancelación de una cita: es una decisión que no se
   debe poder tomar de un clic despistado. */

.modal {
  position: fixed; z-index: 91; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 32px)); max-height: 88vh; max-height: 88dvh; overflow-y: auto;
  background: var(--papel); border-radius: 18px; padding: 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,.24);
  animation: entra-modal .2s cubic-bezier(.2,.7,.3,1);
}
@keyframes entra-modal {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.97) }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1) }
}
.modal h2 { font-size: 1.25rem; }
.modal p { margin: 0 0 12px }

/* --------------------------------------------- cajón de detalle de la cita -- */

.cajon-fondo {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: aparecer .18s ease;
}
@keyframes aparecer { from { opacity: 0 } to { opacity: 1 } }

.cajon {
  position: fixed; z-index: 91; background: var(--papel);
  display: flex; flex-direction: column;
  top: 0; right: 0; bottom: 0; width: min(420px, 100vw);
  box-shadow: -12px 0 40px rgba(0,0,0,.18);
  animation: entra-lado .24s cubic-bezier(.2,.7,.3,1);
}
@keyframes entra-lado { from { transform: translateX(100%) } to { transform: none } }

/* En móvil, hoja que sube desde abajo */
@media (max-width: 620px) {
  .cajon { top: auto; left: 0; width: auto; max-height: 88vh; max-height: 88dvh; border-radius: 20px 20px 0 0; animation: entra-abajo .26s cubic-bezier(.2,.7,.3,1); }
  @keyframes entra-abajo { from { transform: translateY(100%) } to { transform: none } }
}

.cajon-cabeza {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 22px 22px 18px; border-bottom: 1px solid var(--linea-tenue); background: var(--gris);
}
.cajon-dia { margin: 0; font-size: .9rem; color: var(--tinta-suave); text-transform: capitalize; }
.cajon-hora { margin: 2px 0 0; font-size: 1.7rem; font-weight: 600; letter-spacing: -.025em; }
.cajon-cerrar {
  flex: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font: inherit;
  border: 1px solid var(--linea); background: var(--papel); color: var(--tinta);
}
.cajon-cerrar:hover { background: var(--linea-tenue); }
.cajon-cuerpo { padding: 22px; overflow-y: auto; flex: 1; }

.dato { margin-bottom: 18px; }
.dato .et { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-tenue); margin-bottom: 4px; }
.dato .vl { font-size: 1rem; }
.dato .vl a { font-weight: 500; }
.dato-nota { background: var(--oro-nube); border-radius: var(--radio-chico); padding: 12px 14px; font-size: .94rem; line-height: 1.45; }
.cajon-servicios { list-style: none; margin: 0; padding: 0; }
.cajon-servicios li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linea-tenue); font-size: .95rem; }
.cajon-servicios li:last-child { border-bottom: 0; }
.cajon-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--linea); }

/* ==========================================================================
   ADAPTACIÓN A MÓVIL, TABLET Y PANTALLAS PEQUEÑAS
   Todo lo de arriba está escrito pensando primero en el móvil. Aquí van los
   arreglos que dependen del dispositivo y no del ancho de la ventana.
   ========================================================================== */

/* --- 1. Alturas de pantalla reales -------------------------------------- --
   En el móvil, `100vh` cuenta la barra del navegador incluso cuando está
   tapando contenido, así que los paneles a pantalla completa se salían por
   abajo. `dvh` mide lo que de verdad se ve. Se dejan ambas: la segunda gana en
   los navegadores que la entienden. */
.fondo-gris { min-height: 100vh; min-height: 100dvh; }

/* --- 2. Zona segura (el notch y la barra inferior del iPhone) ------------ --
   Sin esto, la barra de resumen de la reserva y el cajón del panel quedan
   parcialmente debajo de la franja de gestos. */
.resumen-barra { margin-bottom: env(safe-area-inset-bottom, 0px); }
.barra-guardar { padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px)); }
.cajon-cuerpo { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
.pie { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
@supports (padding: max(0px)) {
  .contenedor {
    padding-left: max(22px, env(safe-area-inset-left));
    padding-right: max(22px, env(safe-area-inset-right));
  }
}

/* --- 3. Que iOS no haga zoom al tocar un campo --------------------------- --
   Safari en iPhone amplía la página cuando se enfoca un campo con letra menor
   de 16 px, y luego la deja descuadrada. Con 16 px no lo hace. Afecta a los
   campos pequeños que van dentro de las tablas del panel. */
@media (max-width: 900px) {
  /* Solo los campos donde se escribe o se elige: son los únicos que provocan el
     zoom. Los botones NO se tocan — los bloques de cita del calendario son
     botones y se descuadrarían. */
  input:not([type=checkbox]):not([type=radio]):not([type=color]),
  select,
  textarea { font-size: 16px !important; }
}

/* --- 4. Toque cómodo ----------------------------------------------------- --
   En pantallas táctiles se quita el resaltado azul al tocar y se asegura que
   nada interactivo baje de 44 px, que es el mínimo cómodo para un dedo. */
@media (hover: none) {
  a, button, label, select, input, .cita-bloque, .cal-dia, .hora { -webkit-tap-highlight-color: transparent; }
  .btn { min-height: 46px; }
  .nav-enlaces a { padding: 11px 12px; }
  /* Sin ratón no hay "pasar por encima": los efectos de hover se apagan para
     que no se queden pegados tras un toque. */
  .video-tarjeta:not(.reproduciendo):hover { transform: none; }
  .cita-bloque:hover { transform: none; box-shadow: none; }
  .servicio:hover, .elegible:hover { border-color: var(--linea); }
}

/* --- 5. Pantallas muy estrechas (iPhone SE y similares, 320-380 px) ------ */
@media (max-width: 380px) {
  .contenedor { padding-left: 16px; padding-right: 16px; }
  body { font-size: 16px; }
  .cal-rejilla { gap: 3px; }
  .cal-dia { min-height: 40px; font-size: .92rem; }
  .horas { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
  .pasos { gap: 4px; }
  .resumen-cita .cabeza, .resumen-cita ul, .resumen-cita .total { padding-left: 16px; padding-right: 16px; }
  .bloque, .tarjeta { padding-left: 16px; padding-right: 16px; }
  .codigo-cita { font-size: 1.3rem; letter-spacing: .14em; padding: 10px 14px 10px 20px; }
}

/* --- 6. Las pestañas del panel, deslizables con el dedo ------------------ */
.pestanas { scroll-snap-type: x proximity; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { scroll-snap-align: start; }
@media (max-width: 760px) {
  .pestanas .contenedor { padding-left: 12px; padding-right: 12px; }
  .pestana { padding: 14px 12px 12px; }
}

/* --- 7. Las tablas del panel, en fichas cuando no caben ------------------ --
   Una tabla de ocho columnas no se lee en un móvil ni desplazándola. Debajo de
   760 px cada fila pasa a ser una ficha, y cada dato lleva delante su etiqueta
   (la que estaba en la cabecera de la tabla, guardada en data-et). */
@media (max-width: 760px) {
  table.datos { min-width: 0; display: block; font-size: 1rem; }
  table.datos thead { display: none; }
  table.datos tbody, table.datos tr, table.datos td { display: block; width: auto; }

  table.datos tr {
    background: var(--gris); border-radius: var(--radio-chico);
    padding: 14px 16px; margin-bottom: 12px;
  }
  table.datos tr:last-child { margin-bottom: 0; }

  table.datos td {
    border: 0; padding: 6px 0;
    display: grid; grid-template-columns: 42% 1fr; gap: 12px; align-items: start;
  }
  table.datos td::before {
    content: attr(data-et);
    font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--tinta-tenue); padding-top: 2px;
  }
  /* Un dato vacío no merece una fila entera */
  table.datos td:empty { display: none; }
  /* La celda de acciones va a lo ancho, con los botones cómodos */
  table.datos td.acciones-td { grid-template-columns: 1fr; margin-top: 8px; }
  table.datos td.acciones-td::before { display: none; }
  table.datos td.acciones-td .acciones { flex-wrap: wrap; }
  table.datos td.acciones-td .btn { flex: 1; min-width: 120px; }

  .tabla-envoltorio { overflow-x: visible; }
}

/* --- 8. El calendario semanal en pantalla estrecha ---------------------- --
   Sigue desplazándose en horizontal (siete columnas no caben), pero la columna
   de las horas y la fila de los días se quedan fijas, así nunca se pierde la
   referencia de qué día y qué hora se está mirando. */
.semana-horas { position: sticky; left: 0; z-index: 3; box-shadow: 2px 0 0 var(--linea-tenue); }
.semana-esquina { position: sticky; left: 0; z-index: 5; }
@media (max-width: 760px) {
  .semana-rejilla { grid-template-columns: 46px repeat(7, minmax(78px, 1fr)); min-width: 620px; }
  .semana-dia-cabeza { padding: 7px 2px; }
  .semana-dia-cabeza .nn { font-size: 1rem; }
  .semana-dia-cabeza .cuantas { font-size: .66rem; }
  .cita-bloque { font-size: .72rem; padding: 3px 4px; }
  .cita-bloque .cb-hora { font-size: .68rem; }
  .cita-bloque .cb-quien { display: none; }        /* no cabe; está en la ficha */
  .semana-cabecera { flex-direction: column; align-items: stretch; }
  .semana-nav { justify-content: flex-end; }
}

/* --- 9. Los editores de horario, que no se salgan --------------------- */
@media (max-width: 480px) {
  .tramo { flex-wrap: wrap; }
  .tramo input[type=time] { max-width: none; flex: 1; min-width: 116px; }
  .dia-horario > .cabeza { flex-wrap: wrap; }
}

/* --- 10. Tablet en vertical (768-1024): aprovechar el ancho ------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .videos { grid-template-columns: 1fr 1fr; max-width: none; }
}

/* --- 11. Impresión: que la agenda del día salga en papel legible -------- */
@media print {
  .cabecera, .panel-cabecera, .pestanas, .resumen-barra, .barra-guardar,
  .nav-enlaces, .cajon, .cajon-fondo, .modal, .hero-acciones, .pie { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .bloque, .tarjeta { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  table.datos { min-width: 0; font-size: 10pt; }
  a { text-decoration: none; color: #000; }
}

/* --- 12. La cabecera del panel, en una sola línea ------------------------ --
   Las pestañas están pegadas a 56 px del borde superior. Si la cabecera se
   partiera en dos líneas al no caber, las pestañas la taparían. Así que en
   pantalla estrecha se compacta: el logo solo, sin el rótulo. */
@media (max-width: 560px) {
  .panel-cabecera .contenedor { flex-wrap: nowrap; min-height: 56px; }
  .panel-cabecera .marca-texto { display: none; }
  .panel-cabecera .btn-chico { padding: 7px 10px; }
}

/* ============================================================================
   Clientas, señal y avisos (lo que se añadió con el historial y WhatsApp)
   ========================================================================= */


/* Una cita esperando la señal: en la agenda tiene que cantar. */
.cita-bloque.pendiente { border-left-style: dotted; opacity: .82; }
.cita-bloque.pendiente .cb-nombre::after { content: ' 💰'; }
.cita-bloque.no-show { opacity: .55; }
.cita-bloque.no-show .cb-nombre { text-decoration: line-through; }

/* --- ficha de clienta --- */
.clienta-cabeza {
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--linea);
}
.clienta-cifras { display: flex; gap: 22px; flex-wrap: wrap; margin: 16px 0 4px; }
.clienta-cifra { min-width: 74px }
.clienta-cifra b { display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1 }
.clienta-cifra span { font-size: .78rem; color: var(--tinta-tenue); text-transform: uppercase; letter-spacing: .04em }
.clienta-cifra.mal b { color: var(--rojo-error) }

/* --- historial: una línea por cosa que pasó --- */
.historial { list-style: none; margin: 0; padding: 0 }
.historial li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid var(--linea-tenue); font-size: .92rem;
}
.historial li:last-child { border-bottom: 0 }
.historial .fecha { color: var(--tinta-tenue); font-size: .82rem; min-width: 92px; flex-shrink: 0 }
.historial .que { flex: 1 }
.historial .que small { display: block; color: var(--tinta-tenue) }
/* Un aviso perdonado sigue visible, pero se ve que ya no cuenta. */
.historial li.perdonado { opacity: .5 }
.historial li.perdonado .que > b { text-decoration: line-through }

/* --- WhatsApp: estado de la conexión y QR --- */
.wa-estado {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 12px; background: var(--gris); margin-bottom: 18px;
}
.wa-punto { width: 11px; height: 11px; border-radius: 50%; background: var(--tinta-tenue); flex-shrink: 0 }
.wa-punto.bien { background: var(--verde-ok); box-shadow: 0 0 0 4px rgba(29,122,69,.14) }
.wa-punto.espera { background: #d09a1e; box-shadow: 0 0 0 4px rgba(208,154,30,.16) }
.wa-punto.mal { background: var(--rojo-error); box-shadow: 0 0 0 4px rgba(158,27,34,.14) }
.wa-qr {
  display: block; margin: 18px auto; width: min(280px, 74vw); height: auto;
  border: 1px solid var(--linea); border-radius: 12px; background: #fff; padding: 10px;
}

/* Vista previa de un mensaje de WhatsApp, para que la dueña lea lo que van a
   recibir sus clientas antes de encender nada. */
.wa-muestra {
  white-space: pre-wrap; word-break: break-word;
  background: #d9fdd3; color: #111b21;
  border-radius: 12px 12px 12px 4px; padding: 12px 14px;
  font-size: .88rem; line-height: 1.45; margin: 0 0 4px;
  max-width: 420px;
}
.wa-muestra.propia { background: #fff; border: 1px solid var(--linea); border-radius: 12px 12px 4px 12px }
.wa-titulo-muestra { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-tenue); margin: 18px 0 6px }

/* --- lista de "repasar": ¿vino o no vino? --- */
.repasar-fila {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--linea-tenue);
}
.repasar-fila:last-child { border-bottom: 0 }
.repasar-fila .quien { flex: 1; min-width: 180px }
.repasar-fila .quien small { display: block; color: var(--tinta-tenue) }