/* ==========================================================================
   citas.css — La página donde pide cita el cliente final (/citas/{slug}).
   --------------------------------------------------------------------------
   Casi siempre en un móvil, con una mano, a menudo saliendo de la peluquería.
   Botones grandes (48 px), una columna, un paso cada vez y el color del
   negocio. Nada de InnovaTap salvo la firma del pie.
   ========================================================================== */

:root {
  --ct-acento: #2E5E6E;
  /* Para TEXTO sobre el fondo crema: el color del negocio un poco más oscuro (4,5:1 siempre). */
  --ct-acento-texto: color-mix(in srgb, var(--ct-acento) 86%, #000);
  --ct-tinta: #1C1B1A;
  --ct-gris: #6B6560;
  --ct-linea: #E4E0DC;
  --ct-fondo: #F7F5F2;
  --ct-ok: #1E7A4F;
  --ct-error: #B3261E;
  --ct-radio: 14px;
}
* { box-sizing: border-box; }
body.ct {
  margin: 0; background: var(--ct-fondo); color: var(--ct-tinta);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%;
}
/* El color del negocio ya llega oscurecido lo justo para el blanco (menu_color_legible);
   como texto sobre el fondo crema se oscurece un poco más para que se lea igual de bien. */
a { color: var(--ct-acento-texto); }

/* ---------- Cabecera: bienvenida ---------- */
.ct-cab {
  background: var(--ct-acento); color: #fff; text-align: center;
  padding: 2rem 1rem 1.6rem;
}
.ct-cab--foto {
  background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.55)), var(--ct-portada) center / cover no-repeat, var(--ct-acento);
  padding: 3.2rem 1rem 2rem;
}
.ct-cab__dentro { max-width: 560px; margin: 0 auto; }
.ct-cab__logo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; background: #fff; margin-bottom: .6rem; }
.ct-cab h1 { margin: 0; font-size: 1.55rem; line-height: 1.2; overflow-wrap: anywhere; }
.ct-cab__texto { margin: .5rem 0 0; }

.ct-info {
  max-width: 560px; margin: 0 auto; padding: .8rem 1rem 0;
  display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
}
.ct-info__item {
  display: inline-block; padding: .3rem .7rem; border-radius: 999px; background: #fff; border: 1px solid var(--ct-linea);
  font-size: .85rem; text-decoration: none; color: var(--ct-tinta); overflow-wrap: anywhere;
}
.ct-info__hoy { color: var(--ct-gris); }

.ct-main { max-width: 560px; margin: 0 auto; padding: 1rem 1rem 2rem; }
.ct-main--solo { padding-top: 3rem; text-align: center; }
.ct-cargando, .ct-vacio { color: var(--ct-gris); }

/* ---------- Pasos ---------- */
.ct-pasos { margin-bottom: 1rem; }
.ct-pasos__linea { display: flex; justify-content: space-between; align-items: center; min-height: 2rem; }
.ct-pasos__n { font-size: .82rem; color: var(--ct-gris); font-weight: 600; }
.ct-atras { background: none; border: 0; padding: .3rem 0; font: inherit; font-weight: 600; color: var(--ct-acento-texto); cursor: pointer; }
.ct-pasos__barra { height: 4px; background: var(--ct-linea); border-radius: 4px; overflow: hidden; }
.ct-pasos__barra span { display: block; height: 100%; background: var(--ct-acento); transition: width .25s ease; }
.ct-pasos__resumen { margin: .6rem 0 0; font-size: .9rem; color: var(--ct-gris); }

.ct-paso h2 { font-size: 1.25rem; margin: .2rem 0 .9rem; }
.ct-grupo + .ct-grupo { margin-top: 1rem; }
.ct-grupo__titulo { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ct-gris); margin: 0 0 .4rem; }

.ct-opcion {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%;
  min-height: 56px; margin-bottom: .5rem; padding: .75rem 1rem; text-align: left;
  font: inherit; color: inherit; background: #fff; border: 1px solid var(--ct-linea); border-radius: var(--ct-radio); cursor: pointer;
}
.ct-opcion:hover { border-color: var(--ct-acento); }
.ct-opcion.is-elegida { border: 2px solid var(--ct-acento); padding: calc(.75rem - 1px) calc(1rem - 1px); }
.ct-opcion__nombre { font-weight: 700; }
.ct-opcion__meta { font-size: .88rem; color: var(--ct-gris); }
.ct-opcion__desc { font-size: .85rem; color: var(--ct-gris); }
.ct-opcion--pro { flex-direction: row; align-items: center; gap: .8rem; }
.ct-opcion__texto { display: flex; flex-direction: column; }
.ct-pro__foto, .ct-pro__inicial { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.ct-pro__inicial { display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.2rem; }
.ct-pro__inicial--igual { background: var(--ct-fondo); border: 1px dashed var(--ct-linea); font-size: 1.3rem; }

.ct-pie-paso {
  position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  margin: 1rem -1rem 0; padding: .8rem 1rem; background: #fff; border-top: 1px solid var(--ct-linea); font-weight: 600;
}

/* ---------- Día y hora ---------- */
.ct-primero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .8rem 1rem; margin-bottom: 1rem; background: #fff; border: 1px solid var(--ct-linea); border-radius: var(--ct-radio);
}
.ct-dias {
  display: flex; gap: .4rem; overflow-x: auto; padding: .2rem 0 .6rem; margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem;
  scroll-snap-type: x proximity;
}
.ct-dia {
  flex: 0 0 auto; width: 4.2rem; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: inherit; color: inherit; background: #fff; border: 1px solid var(--ct-linea); border-radius: 12px; cursor: pointer; scroll-snap-align: start;
}
.ct-dia:disabled { opacity: .35; cursor: default; text-decoration: line-through; }
.ct-dia.is-elegido { background: var(--ct-acento); border-color: var(--ct-acento); color: #fff; }
.ct-dia__semana, .ct-dia__mes { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.ct-dia__num { font-size: 1.3rem; font-weight: 700; line-height: 1.1; }
.ct-dia--mas { width: auto; padding: 0 .9rem; font-weight: 600; color: var(--ct-acento-texto); }

.ct-horas { margin-top: .6rem; }
.ct-horas__dia { font-size: 1rem; margin: .4rem 0 .6rem; }
.ct-franja + .ct-franja { margin-top: .8rem; }
.ct-franja__nombre { display: block; font-size: .8rem; font-weight: 700; color: var(--ct-gris); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .35rem; }
.ct-franja__horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .45rem; }
.ct-hora {
  min-height: 48px; font: inherit; font-weight: 700; color: var(--ct-tinta); background: #fff;
  border: 1px solid var(--ct-linea); border-radius: 12px; cursor: pointer;
}
.ct-hora:hover { border-color: var(--ct-acento); }
.ct-hora.is-elegida { background: var(--ct-acento); border-color: var(--ct-acento); color: #fff; }

/* ---------- Datos ---------- */
.ct-tarjeta {
  display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; margin-bottom: 1rem;
  background: #fff; border: 1px solid var(--ct-linea); border-left: 4px solid var(--ct-acento); border-radius: var(--ct-radio);
}
.ct-tarjeta .ct-enlace { align-self: flex-start; margin-top: .2rem; }
.ct-tarjeta--grande { text-align: left; }
.ct-tarjeta__cuando { font-size: 1.15rem; font-weight: 700; }

.ct-eres {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .7rem 1rem; margin-bottom: 1rem;
  background: #EEF5F3; border-radius: var(--ct-radio);
}
.ct-eres span { flex: 1 1 100%; font-weight: 600; }

.ct-form { display: block; }
.ct-campo { display: block; margin-bottom: 1rem; }
.ct-campo__etiqueta { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.ct-opc { font-weight: 400; color: var(--ct-gris); }
.ct-ayuda { display: block; font-size: .85rem; color: var(--ct-gris); margin: -.15rem 0 .35rem; }
.ct-campo input[type="text"], .ct-campo input[type="tel"], .ct-campo input[type="email"], .ct-campo textarea {
  width: 100%; min-height: 48px; padding: .65rem .8rem; font-size: 1rem; font-family: inherit; color: inherit;
  background: #fff; border: 1px solid var(--ct-linea); border-radius: 12px;
}
.ct-campo textarea { min-height: 0; resize: vertical; }
.ct-campo input:focus, .ct-campo textarea:focus { outline: 2px solid var(--ct-acento); outline-offset: 1px; }
.ct-campo [aria-invalid="true"] { border-color: var(--ct-error); }
.ct-error { display: block; margin-top: .3rem; color: var(--ct-error); font-size: .85rem; font-weight: 600; }
.ct-sugerencia { display: block; margin-top: .3rem; font-size: .88rem; }
.ct-radios { display: flex; flex-wrap: wrap; gap: .5rem; }
.ct-radio {
  display: flex; align-items: center; gap: .45rem; min-height: 44px; padding: .4rem .9rem;
  background: #fff; border: 1px solid var(--ct-linea); border-radius: 999px; cursor: pointer;
}
.ct-radio input, .ct-casilla input { accent-color: var(--ct-acento); width: 1.2rem; height: 1.2rem; }
.ct-casilla { display: flex; gap: .6rem; align-items: flex-start; margin: .4rem 0 1rem; cursor: pointer; }
.ct-casilla--error span { color: var(--ct-error); }
/* El campo trampa: fuera de la pantalla, no con display:none (algunos robots lo saltan). */
.ct-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }

/* ---------- Botones y avisos ---------- */
.ct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 48px; padding: .6rem 1.1rem;
  font: inherit; font-weight: 700; color: var(--ct-acento-texto); background: #fff; border: 1px solid var(--ct-acento);
  border-radius: 12px; text-decoration: none; cursor: pointer;
}
.ct-btn--principal { background: var(--ct-acento); color: #fff; }
.ct-btn--ancho { width: 100%; }
.ct-btn:disabled { opacity: .6; cursor: default; }
.ct-enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--ct-acento-texto); text-decoration: underline; cursor: pointer; }
.ct-aviso {
  padding: .8rem 1rem; margin-bottom: 1rem; background: #FFF4E5; border-left: 4px solid #D89B00;
  border-radius: 0 var(--ct-radio) var(--ct-radio) 0;
}
.ct-aviso .ct-btn { margin-top: .6rem; }
/* «¿Te llamamos a ese?» (08/11/2026): el mismo nombre con otro teléfono. */
.ct-otrotel p { margin: 0 0 .5rem; }
.ct-otrotel__titulo { font-weight: 600; font-size: 1.02rem; }
.ct-otrotel__pista { font-size: .9rem; color: var(--ct-gris); }
.ct-otrotel__botones { display: flex; flex-direction: column; gap: .5rem; }
.ct-otrotel__botones .ct-btn { margin-top: 0; width: 100%; }
.ct-proxima {
  padding: .7rem 1rem; margin-bottom: 1rem; background: #EAF4EE; border-radius: var(--ct-radio); font-size: .92rem;
}

/* ---------- ¿Ya tienes cita? ---------- */
.ct-mis { margin-top: 1.5rem; text-align: center; }
.ct-mis--abierto {
  text-align: left; padding: 1rem; background: #fff; border: 1px solid var(--ct-linea); border-radius: var(--ct-radio);
}
.ct-mis__titulo { margin: 0 0 .75rem; font-size: 1.05rem; }
.ct-mis__fila { display: flex; gap: .5rem; margin-bottom: .5rem; }
.ct-mis__fila input { flex: 1; min-width: 0; }
.ct-mis__lista { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .6rem; }
.ct-mis__cita {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .7rem .8rem; background: #EAF4EE; border-radius: 12px; font-size: .92rem;
}

/* ---------- Confirmada ---------- */
.ct-hecha { text-align: center; }
.ct-hecha__ok {
  width: 64px; height: 64px; margin: .4rem auto .6rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--ct-ok); color: #fff; font-size: 2rem; font-weight: 700;
}
.ct-hecha__ok--espera { background: #D89B00; font-size: 1.7rem; }   /* «Solicitud enviada»: aún sin confirmar */
.ct-acciones { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 1rem; }
.ct-nota { color: var(--ct-gris); font-size: .92rem; }

/* ---------- Pie ---------- */
.ct-pie { max-width: 560px; margin: 0 auto; padding: 1rem 1rem 2.5rem; font-size: .82rem; color: var(--ct-gris); }
.ct-privacidad summary { cursor: pointer; font-weight: 600; }
.ct-privacidad p { margin: .4rem 0; }
.ct-pie__firma { text-align: center; margin-top: 1.2rem; }

@media (min-width: 640px) {
  .ct-cab h1 { font-size: 1.9rem; }
  .ct-acciones { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* ---------- «Tu cita» (fase 4) ---------- */
.ct-cab--fina { padding: 1.2rem 1rem; }
.ct-cab--fina .ct-cab__logo { width: 56px; height: 56px; }
.ct-btn--peligro { color: var(--ct-error); border-color: #E8B4AF; }
.ct-tarjeta--anulada { border-left-color: var(--ct-gris); color: var(--ct-gris); }
.ct-tarjeta--anulada .ct-tarjeta__cuando { text-decoration: line-through; }
.ct-hecho { text-align: center; margin-bottom: 1rem; }
.ct-hecho p { font-weight: 600; }

/* Dentro del widget (fase 8): la misma página, con la cabecera más corta. */
.ct--widget .ct-cab__texto { display: none; }
.ct--widget .ct-cab { min-height: 0; }

/* «🔔 Avisarme en este móvil» (3.12 bis) */
.ct-avisame { margin: 1rem 0; display: grid; gap: .4rem; justify-items: center; text-align: center; }
.ct-avisame .ct-nota { margin: 0; }
.ct-avisame__ok { margin: 0; font-weight: 600; }
.ct-avisame__error { margin: 0; color: #B3261E; font-size: .92rem; }

/* «ERP completo fisios»: datos del paciente en el paso 4 (FISIO-ARQUITECTURA 4.1) */
.ct-campo input[type="date"] {
  width: 100%; min-height: 48px; padding: .65rem .8rem; font-size: 1rem; font-family: inherit; color: inherit;
  background: #fff; border: 1px solid var(--ct-linea); border-radius: 12px;
}
.ct-campo input[type="date"]:focus { outline: 2px solid var(--ct-acento); outline-offset: 1px; }
.ct-grupo { font-size: 1rem; margin: 1.4rem 0 .7rem; padding-top: 1rem; border-top: 1px solid var(--ct-linea); }

/* Clínica: «Rellena tu ficha antes de venir» en la confirmación */
.ct-aviso--ficha p { margin: .3rem 0 .7rem; }

/* Enlace a las clases en grupo de una clínica (fase 9) */
.ct-clases-enlace { display: block; margin-top: 1rem; background: #EEF5F3; border-left-color: var(--ct-acento); color: inherit; text-decoration: none; }
.ct-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Accesibilidad (11/10/2026): foco visible y movimiento reducido. */
.ct :focus-visible { outline: 3px solid var(--ct-acento-texto); outline-offset: 2px; }
.ct h2:focus-visible, .ct h3:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .ct *, .ct *::before, .ct *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- La rejilla de días y horas (18/10/2026, como Doctoralia) ----------
   Los días en columnas; libres en verde (se pulsan), ocupadas en rojo y tachadas (no). */
.ct-rej { --ct-libre: #E3F4EC; --ct-libre-borde: #8FCFAF; --ct-libre-texto: #0E5A3A;
  --ct-ocupada: #FCEBEB; --ct-ocupada-borde: #F2B5B5; --ct-ocupada-texto: #A32D2D; margin-top: .4rem; }
.ct-rej[aria-busy="true"] .ct-rej__cols { opacity: .55; }
.ct-rej__nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.ct-rej__rango { font-weight: 700; font-size: .95rem; }
.ct-rej__flecha { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ct-libre-borde); background: var(--ct-libre);
  color: var(--ct-libre-texto); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.ct-rej__flecha:disabled { opacity: .35; cursor: default; }
.ct-rej__cols { display: grid; grid-template-columns: repeat(var(--ct-rej-cols, 4), minmax(0, 1fr)); gap: .4rem; }
.ct-rej__col { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.ct-rej__dia { display: flex; flex-direction: column; align-items: center; padding-bottom: .3rem; border-bottom: 1px solid var(--ct-linea);
  font-size: .88rem; line-height: 1.25; }
.ct-rej__dia span { font-size: .78rem; color: var(--ct-gris); }
.ct-rej__hora { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px; font: inherit;
  font-size: .95rem; font-weight: 700; background: var(--ct-libre); border: 1px solid var(--ct-libre-borde); color: var(--ct-libre-texto); }
button.ct-rej__hora { cursor: pointer; }
button.ct-rej__hora:hover { border-color: var(--ct-libre-texto); }
.ct-rej__hora.is-elegida { background: var(--ct-ok); border-color: var(--ct-ok); color: #fff; }
.ct-rej__hora--ocupada { background: var(--ct-ocupada); border-color: var(--ct-ocupada-borde); color: var(--ct-ocupada-texto); font-weight: 400; }
.ct-rej__nada { text-align: center; padding: .7rem 0; font-size: .85rem; color: var(--ct-gris); }
.ct-rej__mas { display: block; margin: .9rem auto 0; font-weight: 700; }
.ct-rej__leyenda { display: flex; justify-content: center; align-items: center; gap: .4rem; margin: .8rem 0 0; font-size: .82rem; color: var(--ct-gris); }
.ct-rej__muestra { display: inline-block; width: 1.4rem; height: .9rem; border-radius: 4px; background: var(--ct-libre); border: 1px solid var(--ct-libre-borde); }
.ct-rej__muestra--ocupada { margin-left: .6rem; background: var(--ct-ocupada); border-color: var(--ct-ocupada-borde); }