/* ===== Base mínimo ===== */
*{
  box-sizing:border-box;
}
html,body{
  margin:0;
  padding:0;
}

/* Fallback: centrar H1 (por si se usa en otra vista) */
h1{
  text-align:center;
  margin:14px 0 6px;
}

/* ================================
   SHEET / MODAL DE RESERVA
   (centrado y sin scroll raro)
   ================================ */

/* Máscara del sheet */
.sheet-mask{
  position:fixed !important;
  inset:0 !important;
  display:none;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(0,0,0,.45) !important;
  z-index:9998 !important;
}
.sheet-mask.is-open{
  display:flex !important;
}

/* Sheet principal */
.sheet{
  position:fixed !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%, -50%) !important;

  width:min(92vw, 560px) !important;

  /* Clave: usar svh en móviles y restar un margen mínimo */
  height:auto !important;
  max-height:calc(100svh - 8px) !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch;

  /* Compacto y prolijo */
  padding:14px 16px !important;
  background:#fff !important;
  border-radius:14px !important;
  box-shadow:0 18px 48px rgba(0,0,0,.28) !important;
  margin:0 !important;
  z-index:9999 !important;
  box-sizing:border-box !important;
}

/* Fallback si el navegador no soporta svh */
@supports not (height: 100svh) {
  .sheet{
    max-height:calc(100vh - 8px) !important;
  }
}

/* Contenido interno del sheet */
.sheet h2{
  font-size:19px;
  margin:0 0 4px !important;
  color:#111827;
}

.row{
  display:flex;
  gap:8px !important;
  margin:4px 0 !important;
}
.row > *{
  flex:1;
}

label.small{
  font-size:12px;
  color:#6b7280;
  margin:2px 0;
  display:block;
}

input[type="text"],
input[type="email"],
textarea{
  width:100%;
  padding:8px 10px !important;
  border-radius:10px !important;
  border:1px solid #e5e7eb;
  font:inherit;
  box-sizing:border-box;
}

.actions{
  display:flex;
  justify-content:flex-end;
  gap:8px !important;
  margin-top:8px !important;
}

.btn{
  padding:9px 14px !important;
  border-radius:10px !important;
  border:1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
  font:inherit;
}
.btn.red{
  background:#D32F2F;
  border-color:#D32F2F;
  color:#fff;
}

.x{
  width:32px !important;
  height:32px !important;
  border-radius:10px !important;
  border:1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
}

/* Mobile: sheet un poco más angosto y filas en columna */
@media (max-width:560px){
  .sheet{
    width:min(94vw, 520px) !important;
    padding:12px 14px !important;
  }
  .row{
    flex-direction:column !important;
  }
}

/* ================================
   DÍA SELECCIONADO (cards de días)
   ================================ */

/* Día seleccionado = tarjeta roja completa (mantiene comportamiento actual) */
.day.selected,
.day:active{
  background:#D32F2F !important;
  border-color:#D32F2F !important;
  box-shadow:0 18px 36px rgba(211,47,47,.30) !important;
  transform:translateY(-2px);
}

/* Tipografías pasan a blanco al seleccionar */
.day.selected .dnum,
.day.selected .dw,
.day.selected .opts,
.day:active   .dnum,
.day:active   .dw,
.day:active   .opts{
  color:#fff !important;
}

/* Punto de disponibilidad sobre fondo rojo */
.day.selected .dot,
.day:active   .dot{
  background:#fff !important;
  box-shadow:0 0 0 6px rgba(255,255,255,.45) !important;
  opacity:1 !important;
}

/* ================================
   PASOS DEL TURNERO (debajo del H1)
   ================================ */

/* Pasos del turnero: centrados bajo el título (DESKTOP) */
.pasos-turno{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:40px;                 /* separación entre pasos */
  margin:16px auto 12px;    /* debajo del título */
  flex-wrap:wrap;
  max-width:760px;          /* no se abren demasiado a los lados */
}

/* Cada paso: icono + texto en columna, centrados */
.paso-turno{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* Iconos de cada paso */
.pasos-turno svg{
  display:block;
  width:30px;
  height:30px;
  margin:0 auto 6px;
}

/* Leyenda debajo del icono */
.paso-label{
  font-size:14px;
  font-weight:500;
  font-style:normal;
  color:#4b5563;
}

/* ===== Mobile: pasos en columna (vertical) ===== */
@media (max-width:640px){
  .pasos-turno{
    flex-direction:column;   /* los apila vertical */
    align-items:center;
    gap:10px;
    margin:10px auto 8px;
  }

  .paso-turno{
    width:100%;
    text-align:center;
  }

  .paso-label{
    font-size:12px;
  }
}