/* ARV Agenda — página pública de reservas */
body { background: var(--crema); }
.r-cab { background: #fff; border-bottom: 3px solid var(--dorado); }
.r-cab-int { max-width: 980px; margin: 0 auto; padding: .9rem 1.2rem; display: flex; align-items: center; }
.r-logo { height: 64px; display: block; }
.r-main { max-width: 980px; margin: 0 auto; padding: 2rem 1.2rem 3rem; }
.r-intro { text-align: center; margin-bottom: 1.4rem; }
.r-intro h1 { font-size: 1.9rem; }
.r-intro p { color: var(--suave); margin: 0; font-size: 1.05rem; }
.r-caja { background: #fff; border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra); padding: 1.6rem; }
.pasos { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.pasos li { display: flex; align-items: center; gap: .45rem; font-family: var(--titulos); font-weight: 600; font-size: .82rem; color: #A39C8B;
  padding: .35rem .8rem; border-radius: 999px; background: var(--crema); }
.pasos li span { width: 1.4rem; height: 1.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #D9D2C1; color: #fff; font-size: .75rem; }
.pasos li.activo { color: var(--azul); background: #F4EBD5; }
.pasos li.activo span { background: var(--azul); }
.pasos li.hecho span { background: var(--dorado-osc); }
section h2 { text-align: center; font-size: 1.2rem; margin-bottom: 1rem; }

.socios { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem; max-width: 820px; margin: 0 auto; }
.socio { border: 1.5px solid var(--borde); border-radius: 14px; padding: 1.1rem; background: #fff; cursor: pointer; text-align: left; font: inherit;
  display: flex; gap: .85rem; align-items: center; transition: border-color .15s, box-shadow .15s, transform .15s; color: var(--texto); }
.socio:hover { border-color: var(--azul); box-shadow: var(--sombra); transform: translateY(-1px); }
.socio .avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--azul); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--titulos); font-weight: 700; flex: none; }
.socio.cualquiera .avatar { background: var(--dorado); color: var(--azul-osc); font-size: 1.3rem; }
.socio b { font-family: var(--titulos); color: var(--azul); display: block; font-size: 1rem; }
.socio small { color: var(--suave); font-size: .85rem; }

.r-barra { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.r-elegido { font-family: var(--titulos); font-weight: 600; color: var(--azul); font-size: .9rem; }
.r-fechas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.6rem; }
.r-fechas .cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.r-fechas .cal-cab h2 { margin: 0; font-size: 1.1rem; }
.r-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.r-cal .dsem { text-align: center; font-family: var(--titulos); font-weight: 700; font-size: .7rem; color: var(--suave); text-transform: uppercase; padding: .3rem 0; }
.r-cal button { aspect-ratio: 1; border: none; border-radius: 10px; background: transparent; font-family: var(--titulos); font-weight: 600; font-size: .9rem;
  color: #C2BCAE; cursor: default; }
.r-cal button.libre { background: var(--azul-claro); color: var(--azul); cursor: pointer; }
.r-cal button.libre:hover { background: #D5E0F5; }
.r-cal button.elegido { background: var(--azul); color: #fff; }
.r-cal button.hoy { box-shadow: inset 0 0 0 1.5px var(--dorado); }
.r-zona { margin-top: 1rem; }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; max-height: 380px; overflow-y: auto; padding: 2px; }
.horas button { border: 1.5px solid var(--azul); background: #fff; color: var(--azul); border-radius: 10px; padding: .65rem .3rem; font-family: var(--titulos);
  font-weight: 600; font-size: .88rem; cursor: pointer; }
.horas button:hover { background: var(--azul); color: #fff; }
.horas .vacio { grid-column: 1 / -1; padding: 1rem; }

.r-resumen { background: var(--crema); border-radius: 12px; padding: .9rem 1rem; margin-bottom: 1.2rem; border-left: 4px solid var(--dorado); }
.r-resumen b { color: var(--azul); font-family: var(--titulos); }
.r-confirmar { width: 100%; padding: .85rem; font-size: 1rem; }
.r-listo { text-align: center; max-width: 520px; margin: 0 auto; padding: 1rem 0; }
.r-check { width: 64px; height: 64px; border-radius: 50%; background: var(--verde-claro); color: var(--verde); font-size: 2rem; display: flex; align-items: center;
  justify-content: center; margin: 0 auto 1rem; font-weight: 700; }
.r-listo .r-resumen { text-align: left; }
.r-nota { color: var(--suave); font-size: .9rem; }
.r-pie { text-align: center; color: var(--suave); font-size: .8rem; padding: 0 1rem 2rem; }

@media (max-width: 760px) {
  .r-main { padding: 1.2rem .8rem 2rem; }
  .r-logo { height: 52px; }
  .r-intro h1 { font-size: 1.5rem; }
  .r-caja { padding: 1.1rem .9rem; border-radius: 14px; }
  .r-fechas { grid-template-columns: 1fr; gap: 1.2rem; }
  .pasos li { font-size: .74rem; padding: .3rem .6rem; }
  .horas { grid-template-columns: repeat(3, 1fr); max-height: none; }
}