@charset "UTF-8";
/* ============================================================================
   BARBAS SHOP P.V  ·  la agenda
   ----------------------------------------------------------------------------
   Va aparte de estilo.css porque es la pieza mas grande del sitio y la que mas
   se va a tocar. Hereda TODAS las variables y el material .vidrio de la hoja
   principal: aqui no se define ni un color.

   COMO ESTA PENSADA
   -----------------
   Cinco pasos, uno a la vez, y solo se puede avanzar cuando el paso actual
   esta resuelto. Se descarto el formulario largo de toda la vida: en un
   celular obliga a hacer scroll arriba y abajo para comprobar lo que llevas
   elegido, y la mitad de la gente lo abandona. Con un paso por pantalla
   siempre se ve entero lo que hay que decidir.

   El resumen va PEGADO ABAJO dentro del panel y no al final: el precio tiene
   que estar a la vista mientras se elige, no despues.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   01 · EL PANEL
   ══════════════════════════════════════════════════════════════════════════ */
.agenda {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  --cristal-alto: rgba(255, 255, 255, .085);
  --desenfoque: 28px;
}
.agenda > * { position: relative; z-index: 2; }

.agenda__cuerpo { padding: var(--e3) 1.15rem var(--e2); }

/* Mientras se carga la disponibilidad o se manda la reserva. */
.agenda[data-ocupada='true'] .agenda__cuerpo { opacity: .45; pointer-events: none; }
.agenda__cuerpo { transition: opacity .35s var(--curva); }

/* ══════════════════════════════════════════════════════════════════════════
   02 · RIEL DE PASOS
   ══════════════════════════════════════════════════════════════════════════ */
.pasos-rail {
  display: flex;
  gap: .2rem;
  padding: 1rem 1.15rem;
  box-shadow: inset 0 -1px 0 var(--filo-suave);
  overflow-x: auto;
  scrollbar-width: none;
}
.pasos-rail::-webkit-scrollbar { display: none; }

.rail-paso {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .55rem;
  border-radius: var(--r-pill);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris-hondo);
  white-space: nowrap;
  transition: color .4s var(--curva), background-color .4s var(--curva);
}
.rail-paso__n {
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  display: grid; place-content: center;
  font-size: .58rem;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px var(--filo);
  transition: background-color .4s var(--curva), color .4s var(--curva),
              box-shadow .4s var(--curva), transform .4s var(--curva-rebote);
}
/* Paso ya resuelto: el numero se cambia por una palomita. */
.rail-paso[data-estado='hecho'] { color: var(--plata); }
.rail-paso[data-estado='hecho'] .rail-paso__n {
  background: var(--hueso); color: var(--tinta); box-shadow: none;
}
.rail-paso[data-estado='hecho'] .rail-paso__n::after { content: '✓'; }
.rail-paso[data-estado='hecho'] .rail-paso__n span { display: none; }

.rail-paso[data-estado='ahora'] { color: var(--hueso); }
.rail-paso[data-estado='ahora'] .rail-paso__n {
  box-shadow: inset 0 0 0 1px var(--hueso);
  color: var(--hueso);
  transform: scale(1.12);
}

/* ══════════════════════════════════════════════════════════════════════════
   03 · CADA PASO
   Solo uno visible. Entra desde el lado al que se avanza: hacia adelante
   entra por la derecha, hacia atras por la izquierda. Ese detalle es lo que
   hace que se entienda que se esta yendo y viniendo dentro de un mismo
   formulario y no saltando a otra pantalla.
   ══════════════════════════════════════════════════════════════════════════ */
.paso-panel { animation: paso-entra .5s var(--curva) both; }
.paso-panel[data-sentido='atras'] { animation-name: paso-entra-atras; }

@keyframes paso-entra {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes paso-entra-atras {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: none; }
}

.paso-titulo {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--hueso);
  margin: 0 0 .25rem;
  line-height: 1.15;
}
.paso-ayuda { font-size: .84rem; color: var(--gris); margin: 0 0 var(--e3); }

/* ══════════════════════════════════════════════════════════════════════════
   04 · OPCIONES (servicios y extras)
   ══════════════════════════════════════════════════════════════════════════ */
.opciones { display: grid; gap: .5rem; }

.opcion {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .2rem .9rem;
  width: 100%;
  padding: .95rem 1rem;
  border-radius: var(--r-s);
  text-align: left;
  color: var(--plata);
  background: rgba(255, 255, 255, .028);
  box-shadow: inset 0 0 0 1px var(--filo-suave);
  transition: background-color .35s var(--curva), box-shadow .35s var(--curva),
              transform .35s var(--curva);
}
.opcion:active { transform: scale(.99); }

.opcion__nombre {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--hueso);
  line-height: 1.2;
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.opcion__precio {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--hueso);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.opcion__desde {
  display: block;
  font-family: var(--texto);
  font-size: .5rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris);
  text-align: right;
}
.opcion__detalle {
  grid-column: 1 / -1;
  font-size: .8rem;
  color: var(--gris);
  margin: .15rem 0 0;
}
.opcion__min {
  grid-column: 1 / -1;
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris);
  margin-top: .3rem;
}

.opcion[aria-pressed='true'] {
  background: rgba(255, 255, 255, .085);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
}
/* Palomita en la esquina. Aparece con rebote: es la unica confirmacion de que
   el toque se registro, y en un celular eso importa mas que en un raton. */
.opcion[aria-pressed='true']::after {
  content: '✓';
  position: absolute;
  top: -7px; right: -7px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--hueso);
  color: var(--tinta);
  font-size: .7rem;
  display: grid; place-content: center;
  animation: palomita .4s var(--curva-rebote);
}
@keyframes palomita {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.opciones__titulo {
  font-size: .58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gris);
  margin: var(--e3) 0 .7rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   05 · BARBEROS
   ══════════════════════════════════════════════════════════════════════════ */
.barberos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }

.barbero-op {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: 1.1rem .6rem;
  border-radius: var(--r-s);
  background: rgba(255, 255, 255, .028);
  box-shadow: inset 0 0 0 1px var(--filo-suave);
  color: var(--plata);
  transition: background-color .35s var(--curva), box-shadow .35s var(--curva),
              transform .35s var(--curva);
}
.barbero-op__disco {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-content: center;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--hueso);
  background: radial-gradient(120% 120% at 30% 20%,
              rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 60%, rgba(255,255,255,0) 100%);
  box-shadow: inset 0 0 0 1px var(--cristal-filo);
  overflow: hidden;
  transition: transform .4s var(--curva);
}
.barbero-op__nombre { font-size: .8rem; letter-spacing: .1em; color: var(--hueso); }
.barbero-op__nota { font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }

.barbero-op[aria-pressed='true'] {
  background: rgba(255, 255, 255, .085);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
}
.barbero-op[aria-pressed='true'] .barbero-op__disco { transform: scale(1.06); }
.barbero-op[disabled] { opacity: .35; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════════════
   06 · DIAS
   Una tira que se arrastra con el dedo. Se descarto el calendario de mes
   completo: en un celular sus casillas quedan por debajo del tamaño minimo
   que se puede acertar con el pulgar.
   ══════════════════════════════════════════════════════════════════════════ */
.dias {
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 2px 1.15rem 2px;
  margin-inline: -1.15rem;
}
.dias::-webkit-scrollbar { display: none; }

.dia {
  flex: none;
  scroll-snap-align: center;
  width: 62px;
  padding: .7rem .3rem;
  border-radius: var(--r-s);
  display: grid;
  justify-items: center;
  gap: .1rem;
  background: rgba(255, 255, 255, .028);
  box-shadow: inset 0 0 0 1px var(--filo-suave);
  color: var(--plata);
  transition: background-color .3s var(--curva), box-shadow .3s var(--curva),
              transform .3s var(--curva), color .3s var(--curva);
}
.dia__sem { font-size: .54rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
.dia__num { font-family: var(--display); font-size: 1.4rem; color: var(--hueso); line-height: 1; }
.dia__mes { font-size: .52rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-hondo); }

.dia[aria-pressed='true'] {
  background: var(--hueso);
  box-shadow: 0 10px 26px -12px rgba(244,241,234,.6);
  transform: translateY(-2px);
}
.dia[aria-pressed='true'] .dia__num,
.dia[aria-pressed='true'] .dia__sem,
.dia[aria-pressed='true'] .dia__mes { color: var(--tinta); }

/* Dia sin un solo hueco libre. Se enseña igual y tachado en vez de esconderlo:
   asi se ve de un vistazo cuando la semana esta llena, que es informacion. */
.dia[disabled] { opacity: .3; pointer-events: none; }
.dia[disabled] .dia__num { text-decoration: line-through; }

.dias-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
}
.dias-nav__mes { font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); }

/* ══════════════════════════════════════════════════════════════════════════
   07 · HORAS
   ══════════════════════════════════════════════════════════════════════════ */
.horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: .45rem;
}
.hora {
  min-height: 50px;
  border-radius: var(--r-pill);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  color: var(--hueso);
  background: rgba(255, 255, 255, .028);
  box-shadow: inset 0 0 0 1px var(--filo-suave);
  transition: background-color .3s var(--curva), box-shadow .3s var(--curva),
              color .3s var(--curva), transform .3s var(--curva);
  /* Entran escalonadas; el indice lo pone el JS en --i. */
  animation: hora-entra .4s var(--curva) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
@keyframes hora-entra {
  from { opacity: 0; transform: translateY(8px) scale(.95); }
  to   { opacity: 1; transform: none; }
}
.hora[aria-pressed='true'] {
  background: var(--hueso);
  color: var(--tinta);
  box-shadow: 0 10px 26px -12px rgba(244,241,234,.6);
}
.hora[disabled] {
  color: var(--gris-hondo);
  text-decoration: line-through;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--filo-suave);
  opacity: .55;
}

.horas-vacio {
  padding: var(--e3) 0;
  color: var(--gris);
  font-size: .9rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   08 · DATOS Y PAGO
   ══════════════════════════════════════════════════════════════════════════ */
.datos-rejilla { display: grid; gap: 0; }

.metodos { display: grid; gap: .5rem; margin-top: var(--e2); }
.metodo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  align-items: start;
  padding: 1rem;
  border-radius: var(--r-s);
  text-align: left;
  background: rgba(255, 255, 255, .028);
  box-shadow: inset 0 0 0 1px var(--filo-suave);
  transition: background-color .35s var(--curva), box-shadow .35s var(--curva);
}
.metodo__marca {
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--filo-fuerte);
  position: relative;
  flex: none;
}
.metodo[aria-pressed='true'] {
  background: rgba(255, 255, 255, .085);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
}
.metodo[aria-pressed='true'] .metodo__marca { box-shadow: inset 0 0 0 1px var(--hueso); }
.metodo[aria-pressed='true'] .metodo__marca::after {
  content: '';
  position: absolute; inset: 4px;
  border-radius: 50%;
  background: var(--hueso);
  animation: palomita .35s var(--curva-rebote);
}
.metodo__nombre { color: var(--hueso); font-size: .95rem; }
.metodo__nota { font-size: .78rem; color: var(--gris); margin: .2rem 0 0; }

/* ══ LOS DATOS DE LA CUENTA ═══════════════════════════════════════════════
   Sale al elegir transferencia y ocupa el mismo hueco que ocuparia el
   formulario de tarjeta: la pantalla no salta al cambiar de forma de pago. */
.datos-banco {
  margin-top: var(--e2);
  padding: var(--e2) 1rem;
  border-radius: var(--r-s);
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px var(--filo-suave);
  animation: paso-entra .4s var(--curva) both;
}
.datos-banco__titulo {
  font-size: .58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 .7rem;
}
.datos-banco__lista { display: grid; gap: .45rem; margin: 0; }
.datos-banco__fila { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.datos-banco__fila dt { color: var(--gris); flex: none; }
.datos-banco__fila dd { margin: 0; color: var(--hueso); text-align: right; }
/* La CLABE se dicta y se teclea: numeros de ancho fijo y sin partirse a la
   mitad al final de la linea. */
.datos-banco__clabe {
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  white-space: nowrap;
}
.datos-banco__copiar {
  margin-top: .85rem;
  width: 100%;
  padding: .6rem 1rem;
  border-radius: var(--r-pill);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hueso);
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px var(--filo);
  transition: background-color .3s var(--curva);
}
.datos-banco__copiar:active { background: rgba(255, 255, 255, .12); }
.datos-banco__nota { font-size: .76rem; color: var(--gris); margin: .7rem 0 0; }

/* Contenedor del formulario de tarjeta de Mercado Pago. */
.brick { margin-top: var(--e2); min-height: 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   09 · RESUMEN PEGADO ABAJO
   ══════════════════════════════════════════════════════════════════════════ */
.agenda__resumen {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .8rem 1rem;
  padding: .9rem 1.15rem calc(.9rem + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 10, 14, .78);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--filo-suave);
}
.agenda__linea {
  grid-column: 1;
  min-width: 0;
  font-size: .74rem;
  color: var(--gris);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agenda__total {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--hueso);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.agenda__total small {
  font-family: var(--texto);
  font-size: .5rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris);
  display: block;
  margin-bottom: .15rem;
}
.agenda__acciones { grid-column: 2; grid-row: 1 / 3; display: flex; gap: .5rem; }
.agenda__acciones .boton { min-height: 48px; padding-inline: 1.3rem; font-size: .66rem; }
.agenda__atras {
  width: 48px;
  padding: 0;
  border-radius: var(--r-pill);
  color: var(--hueso);
  box-shadow: inset 0 0 0 1px var(--cristal-filo);
  display: grid; place-content: center;
  transition: box-shadow .3s var(--curva);
}

/* ══════════════════════════════════════════════════════════════════════════
   10 · CONFIRMACION
   ══════════════════════════════════════════════════════════════════════════ */

/* Con la cita hecha, la barra de abajo estorba: no queda nada que continuar y
   su linea de resumen asomaba por debajo de los botones. */
.agenda[data-listo='true'] .agenda__resumen { display: none; }

.listo { text-align: center; padding: var(--e2) 0 0; }

/* El sello que cae al confirmar. Es la recompensa del formulario: sin algo
   asi, terminar cinco pasos se siente igual que abandonar.

   Va por partes y en este orden, que es el orden en que lo lee el ojo:
   el disco cae -> el aro se cierra -> la palomita se traza -> las chispas.
   Junto duraria lo mismo pero se veria como un parpadeo. */
.listo__sello {
  position: relative;
  width: 92px; height: 92px;
  margin: 0 auto var(--e3);
  display: grid; place-content: center;
}

.listo__disco {
  width: 92px; height: 92px;
  border-radius: 50%;
  display: grid; place-content: center;
  background: var(--hueso);
  animation: sello-golpe .7s var(--curva-rebote) both;
}
@keyframes sello-golpe {
  0%   { transform: scale(2.4) rotate(-18deg); opacity: 0; }
  55%  { transform: scale(.92) rotate(3deg);   opacity: 1; }
  100% { transform: scale(1) rotate(0);        opacity: 1; }
}

.listo__disco svg { width: 56px; height: 56px; overflow: visible; }
.listo__aro, .listo__trazo {
  fill: none;
  stroke: var(--tinta);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* El aro se cierra sobre si mismo. Empieza arriba (de ahi el giro de -90deg)
   porque un circulo que se cierra por la derecha se lee como una rueda de
   "cargando", que es justo lo contrario de lo que esto dice. */
.listo__aro {
  stroke-width: 2;
  opacity: .18;
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: aro-cierra .6s var(--curva) .18s both;
}
@keyframes aro-cierra { to { stroke-dashoffset: 0; } }

.listo__trazo {
  stroke-width: 4.5;
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: trazo-dibuja .42s var(--curva-suave) .46s both;
}
@keyframes trazo-dibuja { to { stroke-dashoffset: 0; } }

/* Las doce chispas. Cada una sale derecha hacia afuera con su propio angulo
   (--giro) y su propio retraso (--tardanza): salir todas a la vez pareceria
   una explosion de dibujo animado, escalonadas parece que algo revento. */
.listo__chispas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.listo__chispas i {
  position: absolute;
  top: 50%; left: 50%;
  width: 3px; height: 14px;
  margin: -7px 0 0 -1.5px;
  border-radius: var(--r-pill);
  background: var(--hueso);
  opacity: 0;
  animation: chispa-sale .62s var(--curva) var(--tardanza) both;
}
.listo__chispas i:nth-child(even) { background: var(--exito); height: 10px; }
/* Salen de DEBAJO del disco (empiezan a 26px del centro, el disco mide 46 de
   radio) y por eso parecen desprendidas del sello y no pegadas a su borde.
   Se mantienen opacas casi todo el viaje: si empezaran a desvanecerse desde
   el principio, a este tamano no se alcanzarian a ver. */
@keyframes chispa-sale {
  0%   { opacity: 0; transform: rotate(var(--giro)) translateY(-26px) scaleY(.35); }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--giro)) translateY(-66px) scaleY(1); }
}

/* Con el pago hecho el disco respira una vez al final del trazo. Es medio
   segundo y no se repite: una animacion en bucle en una pantalla de "listo"
   deja al cliente esperando algo que ya paso. */
.listo[data-pagada='true'] .listo__disco {
  animation: sello-golpe .7s var(--curva-rebote) both,
             sello-respira .5s var(--curva) .68s both;
}
@keyframes sello-respira {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 241, 234, 0); }
  40%      { box-shadow: 0 0 0 14px rgba(244, 241, 234, .09); }
}

/* Lo de abajo entra detras del sello, escalonado. El detalle de la cita llega
   cuando la palomita ya se trazo: si sube todo junto, el sello deja de ser el
   centro de la pantalla y se vuelve un adorno mas. */
.listo > h3,
.listo > .paso-ayuda,
.listo > .listo__detalle,
.listo > .listo__acciones {
  animation: listo-sube .5s var(--curva) both;
}
.listo > h3               { animation-delay: .40s; }
.listo > .paso-ayuda      { animation-delay: .48s; }
.listo > .listo__detalle  { animation-delay: .58s; }
.listo > .datos-banco     { animation-delay: .64s; }
.listo > .listo__acciones { animation-delay: .72s; }
/* Dentro de la confirmacion la cuenta entra con las demas piezas, en su turno,
   y no con la suya propia: si no, saldria antes que el titulo. */
.listo > .datos-banco { animation-name: listo-sube; animation-duration: .5s; }
@keyframes listo-sube {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.listo h3 { margin-bottom: .5rem; }
.listo__detalle {
  display: grid;
  gap: .45rem;
  margin: var(--e3) 0;
  padding: var(--e2) 1rem;
  border-radius: var(--r-s);
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px var(--filo-suave);
  text-align: left;
}
.listo__fila { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
.listo__fila dt { color: var(--gris); }
.listo__fila dd { margin: 0; color: var(--hueso); text-align: right; }
.listo__acciones { display: grid; gap: .6rem; margin-top: var(--e3); }

/* ══════════════════════════════════════════════════════════════════════════
   11 · PANTALLAS GRANDES
   ══════════════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  .opcion:hover:not([aria-pressed='true']),
  .barbero-op:hover:not([aria-pressed='true']):not([disabled]),
  .metodo:hover:not([aria-pressed='true']) {
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px var(--filo);
  }
  .dia:hover:not([aria-pressed='true']):not([disabled]),
  .hora:hover:not([aria-pressed='true']):not([disabled]) {
    background: rgba(255, 255, 255, .08);
    transform: translateY(-2px);
  }
  .agenda__atras:hover { box-shadow: inset 0 0 0 1px var(--filo-fuerte); }
}

@media (min-width: 640px) {
  .agenda__cuerpo { padding: var(--e4) var(--e3) var(--e2); }
  .pasos-rail { padding: 1.1rem var(--e3); }
  .agenda__resumen { padding: 1rem var(--e3); }
  .dias { padding-inline: var(--e3); margin-inline: calc(var(--e3) * -1); }

  .opciones { grid-template-columns: repeat(2, 1fr); }
  .barberos { grid-template-columns: repeat(3, 1fr); }
  .metodos { grid-template-columns: repeat(2, 1fr); }
  .datos-rejilla { grid-template-columns: repeat(2, 1fr); gap: 0 1rem; }
  .datos-rejilla .campo--ancho { grid-column: 1 / -1; }

  .agenda__resumen { grid-template-columns: auto 1fr auto; }
  .agenda__linea { grid-column: 2; grid-row: 1; }
  .agenda__total { grid-column: 1; grid-row: 1; }
  .agenda__acciones { grid-column: 3; grid-row: 1; }
  .listo__acciones { grid-auto-flow: column; justify-content: center; }
}

@media (min-width: 1000px) {
  .barberos { grid-template-columns: repeat(5, 1fr); }
  .paso-titulo { font-size: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .paso-panel, .hora, .listo__sello, .opcion::after, .metodo__marca::after { animation: none !important; }

  /* La confirmacion se queda quieta, pero entera: sin el dibujo del trazo hay
     que devolverle el relleno a mano, o el sello se quedaria en blanco. */
  .listo__disco, .listo__aro, .listo__trazo, .datos-banco,
  .listo > h3, .listo > .paso-ayuda,
  .listo > .listo__detalle, .listo > .listo__acciones { animation: none !important; }
  .listo__aro, .listo__trazo { stroke-dashoffset: 0; }
  .listo__chispas { display: none; }
}

/* ══ EL PASE, DEL LADO DEL CLIENTE ═══════════════════════════════════════
   Va dentro de la pantalla de "cita apartada". El QR se pinta en BLANCO sobre
   negro y no al reves: un QR oscuro sobre el cristal del sitio no lo lee
   ninguna camara, y este existe para ser leido.
   ═══════════════════════════════════════════════════════════════════════ */
.pase {
  margin-top: var(--e3);
  padding: var(--e3) var(--e2);
  border-radius: var(--r-m);
  text-align: center;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px var(--cristal-filo);
}
.pase__rotulo {
  margin: 0;
  font-size: .54rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gris);
}
.pase__titulo {
  margin: .2rem 0 var(--e2);
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--hueso);
}
.pase__qr {
  width: min(220px, 62%);
  margin: 0 auto;
  padding: 10px;
  border-radius: var(--r-s);
  background: #fff;
}
.pase__codigo {
  margin: var(--e2) 0 0;
  font-size: 1.05rem;
  letter-spacing: .22em;
  color: var(--hueso);
  font-variant-numeric: tabular-nums;
}
.pase__nota {
  margin: .6rem auto 0;
  max-width: 34ch;
  font-size: .82rem;
  color: var(--gris);
  line-height: 1.55;
}