/* ==============================
   ConsultoraEMP Agendador – Estilos
   Paleta:
   -- Rosa claro: #ffeef7
   -- Rosa fuerte: #ff66b3
   -- Azul marca (detalle): #004aad
   ============================== */

/* ---------- Helpers de color ---------- */
:root{
  --emp-rose:#ff66b3;
  --emp-rose-100:#ffeef7;
  --emp-rose-200:#ffd8ea;
  --emp-rose-300:#ffc2de;
  --emp-rose-700:#e0559f;
  --emp-blue:#004aad;
  --emp-text:#1a1a1a;
  --emp-text-soft:#555;
  --emp-border:rgba(0,0,0,0.08);
  --emp-shadow:0 10px 25px rgba(255,102,179,.25),0 2px 8px rgba(0,0,0,.05);
}

/* Evitar que el layout se rompa por ancho extra */
.emp-form,.emp-formulario,#formulario-reserva{
  box-sizing:border-box;
  max-width:880px;
  margin:0 auto;
}

/* ---------- Títulos ---------- */
.emp-titulo{
  margin:0 0 6px 0;
  font-weight:800;
  color:var(--emp-text);
  font-size:clamp(20px,3.6vw,28px);
}
.emp-subtitulo{
  margin:6px 0 10px 0;
  font-weight:700;
  color:var(--emp-text);
  font-size:clamp(16px,3vw,20px);
}
/* Subtítulo más suave para este bloque */
.emp-subtitulo.emp-subtitulo--soft{
  color:var(--emp-text-soft);
  margin-top:-2px;
  margin-bottom:10px;
}

/* ---------- Contenedores ---------- */
.time-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:8px 0 4px 0;
}

/* ---------- Botón base ---------- */
.dia-btn,.hora-btn,.emp-btn{
  appearance:none;
  border:0;
  outline:0;
  cursor:pointer;
  border-radius:999px;
  padding:10px 16px;
  font-size:15px;
  font-weight:600;
  line-height:1;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  white-space:nowrap;
}

/* ---------- Días (píldoras rosadas suaves) ---------- */
.dia-btn{
  background:var(--emp-rose-100);
  color:var(--emp-text);
  border:1px solid var(--emp-border);
}
.dia-btn:hover{ transform:translateY(-1px); box-shadow:var(--emp-shadow); }
.dia-btn.seleccionado{
  background:linear-gradient(90deg,var(--emp-rose),#ff8cc6);
  color:#000;
  box-shadow:var(--emp-shadow);
}

/* ---------- Horas ---------- */
.hora-btn{
  background:#fff;
  color:var(--emp-text);
  border:1px solid var(--emp-border);
}
.hora-btn:hover{ transform:translateY(-1px); box-shadow:var(--emp-shadow); }
.hora-btn.seleccionado{
  background:linear-gradient(90deg,var(--emp-rose),#ff8cc6);
  color:#000;
  box-shadow:var(--emp-shadow);
}

/* ---------- Botones de acción ---------- */
.emp-btn.emp-btn-primary{
  background:linear-gradient(90deg,var(--emp-rose),#ff8cc6);
  color:#000;
  padding:12px 22px;
  border-radius:999px;
  box-shadow:var(--emp-shadow);
}
.emp-btn.emp-btn-primary:hover{ transform:translateY(-1px); }
.emp-btn.emp-btn-primary:active{ transform:translateY(0); }

/* ---------- Resumen ---------- */
.emp-resumen{
  background:var(--emp-rose-100);
  border:1px solid var(--emp-border);
  color:var(--emp-text);
  padding:10px 14px;
  border-radius:12px;
  margin:14px 0 18px 0;
  display:none;
}
.emp-resumen.emp-resumen--visible{ display:block; }

/* ---------- Formulario ---------- */
.emp-formulario{
  padding:16px;
  background:#fff;
  border:1px solid var(--emp-border);
  border-radius:16px;
  box-shadow:0 4px 16px rgba(0,0,0,.04);
}
.emp-field{ margin-bottom:14px; }
.emp-field label{
  display:block;
  margin-bottom:6px;
  font-weight:700;
  color:var(--emp-text);
  font-size:14px;
}
.emp-formulario input[type="text"],
.emp-formulario input[type="email"],
.emp-formulario select{
  width:100%;
  border-radius:12px;
  border:1px solid var(--emp-border);
  background:#fff;
  color:var(--emp-text);
  padding:12px 14px;
  font-size:15px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.emp-formulario input::placeholder{ color:#999; }
.emp-formulario input:focus,
.emp-formulario select:focus{
  border-color:var(--emp-rose);
  box-shadow:0 0 0 3px rgba(255,102,179,.18);
  outline:none;
}

/* Contenedor botón enviar */
.emp-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  margin-top:16px;
}

/* Mensaje OK */
.emp-ok{
  margin-top:16px;
  background:var(--emp-rose-100);
  border:1px solid var(--emp-border);
  border-radius:12px;
  padding:12px 14px;
  color:var(--emp-text);
}

/* ---------- Micro ajustes visuales ---------- */
#time-selector{ margin-top:10px; }
#calendar-buttons{ margin-top:6px; }

/* Evitar salto lateral en iOS por transición de sombras */
.dia-btn:active,.hora-btn:active,.emp-btn:active{ transform:translateY(0); }

/* ---------- Grilla de días (3×4 móvil, 6 columnas desktop) ---------- */
#dias-semana{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)); /* 3 por fila en móvil */
  gap:10px;
}
#dias-semana .dia-btn{
  width:100%;
  text-align:center;
  padding:12px 10px;
  white-space:normal;
}

/* ---------- Contenedor de horas (SIEMPRE visible y adaptable) ---------- */
#horas-disponibles{
  display:flex !important;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

/* 3 horas por fila en móvil */
#horas-disponibles .hora-btn{
  flex:1 1 calc(33.333% - 10px);
  text-align:center;
  min-width:92px;      /* evita que colapse en móviles muy pequeños */
}

/* Teléfonos muy pequeños */
@media (max-width:360px){
  #dias-semana{ gap:8px; }
  #dias-semana .dia-btn{ padding:10px 8px; font-size:14px; }
  #horas-disponibles .hora-btn{ flex:1 1 calc(50% - 8px); }
}

/* En pantallas más anchas mostramos más columnas de días/horas */
@media (min-width:768px){
  #dias-semana{ grid-template-columns:repeat(6,minmax(0,1fr)); } /* 6 por fila en desktop */
  #horas-disponibles .hora-btn{ flex:1 1 calc(16.666% - 10px); } /* 6 por fila en desktop */
}

/* ---------- Responsivo general ---------- */
@media (max-width:600px){
  .time-buttons{ gap:8px; }
  .dia-btn,.hora-btn{ padding:10px 14px; font-size:14px; }
  .emp-btn.emp-btn-primary{ padding:11px 18px; font-size:15px; }
}

/* ---------- (Opcional) Borde superior rosado al bloque entero ---------- */
/* .emp-formulario{ border-top:3px solid var(--emp-rose); } */


/* Centrar títulos del agendador */
.emp-titulo,
.emp-subtitulo {
  text-align: center;
}