/* ===========================================================
   Mis citas (citas.html) y el enlace del correo (cita.html, /cita/<token>)
   -----------------------------------------------------------
   Los tokens (--primary, --text, --radius, --font-*, --apx-*) vienen de
   styles/main.css; aqui solo lo propio de estas dos paginas. Cabecera,
   menu y pie son los de toda la web (los mete scripts/main.js).

   El aura de Leidy: fondo blanco, tinta #2C1810, negro cafe #17110E,
   rosa esmalte #B97A6E / #8C5549, rosado sobre oscuro #D6B39A y crema
   #F3EAE0. Botones en negro cafe, como toda la web publica.

   Contrastes (minimo legible 4,5:1):
   - Texto #6B5D54 sobre blanco: 6,4. Ayudas #7A6A61: 5,6.
   - Etiquetas #8C5549 sobre blanco: 5,9; sobre el rosado claro: 5,2.
   - Error #B3261E sobre blanco: 6,5.
   - Sobre negro cafe: crema #F3EAE0 15,7; #D6B39A 9,6; #CBBCAE 10.
   =========================================================== */

/* hidden manda siempre, aunque la pieza tenga su propio display. */
.citas-pagina [hidden] { display: none !important; }

/* main.css deja 80 px abajo en el movil para la barra de "Agendar cita",
   que en estas paginas no hay. Por lo mismo, el aviso de cookies baja a su
   sitio: subido 82 px tapaba la ficha de la cita (y dejaba un hueco vacio
   debajo) al abrir el enlace del correo por primera vez. */
@media (max-width: 768px) {
  body.citas-pagina { padding-bottom: 0; }
}
@media (max-width: 720px) {
  .citas-pagina .cookie-banner { bottom: calc(10px + var(--safe-bottom)); }
}

/* El texto de encima del titulo ("Mis citas", "Hola, Lucia", "Hecho"): el
   rosa esmalte de toda la web da 3,5:1 sobre blanco y es letra pequena;
   aqui, el rosa hondo (6:1). */
.citas-pagina .eyebrow { color: var(--primary-d); }

/* Titulos que reciben el foco al cambiar de paso: no son botones, sin anillo. */
.citas-pagina [tabindex="-1"]:focus { outline: none; }

/* ---------- Cabecera de la pagina ---------- */
.citas-hero {
  padding: clamp(6rem, 11vw, 8rem) 0 clamp(1.5rem, 3.5vw, 2.4rem);
  text-align: center;
}
.citas-hero .eyebrow { margin-bottom: 0.8rem; }
.citas-hero__titulo {
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.06;
  text-wrap: balance; /* sin una palabra sola en la segunda linea */
}
.citas-hero__lead {
  max-width: 33rem;
  margin: 0.95rem auto 0;
  color: var(--text-soft);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.6;
}

.citas-seccion { padding: 0 0 clamp(3.5rem, 8vw, 6rem); }
/* El enlace del correo no lleva cabecera de pagina: la tarjeta sube. */
.citas-seccion--enlace { padding-top: clamp(6.4rem, 11vw, 8rem); }
.citas-contenedor { max-width: 600px; }

/* ---------- La tarjeta ---------- */
.citas-tarjeta {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.35rem, 5vw, 2.6rem);
  text-align: center;
}
.citas-tarjeta h1,
.citas-tarjeta h2 {
  font-size: clamp(1.6rem, 5.4vw, 2.05rem);
  line-height: 1.15;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.citas-sub {
  max-width: 28rem;
  margin: 0.7rem auto 1.6rem;
  color: var(--text-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* Cargando */
.citas-cargando {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  padding: 2.2rem 0;
  color: var(--text-soft);
  font-size: 0.95rem;
}
.citas-spinner {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(140, 85, 73, 0.25);
  border-top-color: var(--primary-d);
  animation: citas-gira 0.8s linear infinite;
}
@keyframes citas-gira { to { transform: rotate(360deg); } }

/* Aviso tranquilo ("Has salido"). Vacio no ocupa sitio, pero sigue en la
   pagina para que el lector de pantalla lo anuncie al llenarse. */
.citas-aviso {
  margin: -0.4rem 0 1.4rem;
  padding: 0.75rem 1rem;
  border-left: 2px solid var(--primary-d);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(185, 122, 110, 0.09);
  text-align: left;
  font-size: 0.9rem; line-height: 1.55;
  color: var(--text);
}
.citas-aviso:empty { margin: 0; padding: 0; border: 0; }

/* ---------- Casillas ---------- */
.citas-campo { margin-bottom: 1.3rem; text-align: left; }
.citas-campo label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--primary-d);
}
.citas-campo input {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  border: 1.5px solid rgba(44, 24, 16, 0.18);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.1rem; /* mas de 16 px: el iPhone no hace zoom al tocar */
  letter-spacing: 0.03em;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.citas-campo input::placeholder { color: #A5968C; }
.citas-campo input:focus {
  outline: none;
  border-color: var(--primary-d);
  box-shadow: 0 0 0 4px rgba(185, 122, 110, 0.16);
}
.citas-campo input[aria-invalid="true"] {
  border-color: #B3261E;
  box-shadow: 0 0 0 1px #B3261E;
}
/* Telefono con asteriscos alternos (scripts/citas.js, taparCasilla): la
   casilla de verdad con la letra transparente y encima la capa que se ve.
   Letra monoespaciada en las dos para que el cursor caiga en su cifra. */
.citas-tapado { position: relative; }
.citas-tapado input,
.citas-tapado__capa {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", "Liberation Mono", monospace;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
}
.citas-campo .citas-tapado input {
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--text);
}
.citas-campo .citas-tapado input::placeholder {
  color: #A5968C;
  -webkit-text-fill-color: #A5968C;
}
.citas-campo .citas-tapado input:-webkit-autofill,
.citas-campo .citas-tapado input:autofill { -webkit-text-fill-color: transparent; }
.citas-tapado__capa {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding: 0 calc(1rem + 1.5px); /* el relleno y el borde de la casilla */
  overflow: hidden;
  white-space: pre;
  color: var(--text);
  pointer-events: none;
}
/* Alto contraste: el sistema impone los colores y se verian los dos textos
   uno encima del otro; ahi la casilla queda normal. */
@media (forced-colors: active) {
  .citas-tapado__capa { display: none; }
  .citas-campo .citas-tapado input { color: FieldText; -webkit-text-fill-color: FieldText; }
}

.citas-ayuda {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem; line-height: 1.5;
  color: #7A6A61;
}
.citas-ayuda a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(140, 85, 73, 0.55);
  text-underline-offset: 3px;
}
.citas-ayuda a:hover { color: var(--primary-d); }

/* El codigo: una casilla grande, las cifras bien separadas. */
.citas-campo--codigo label,
.citas-campo--codigo .citas-ayuda { text-align: center; }
.citas-campo .citas-codigo {
  padding: 0.75rem 0 0.7rem 0.45em; /* el 0.45em compensa el espacio de la ultima cifra */
  text-align: center;
  font-size: clamp(1.6rem, 8vw, 2.05rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.45em;
  line-height: 1.2;
}
.citas-campo .citas-codigo::placeholder { color: #CBBCAE; letter-spacing: 0.45em; }

/* Errores: en rojo, pero sobre todo con palabras y el "!" delante, para que
   no dependa del color. Vacio no ocupa sitio. */
.citas-error {
  position: relative;
  margin: 0;
  text-align: left;
  font-size: 0.88rem; font-weight: 600; line-height: 1.5;
  color: #B3261E;
}
.citas-error:not(:empty) { margin-top: 0.65rem; padding-left: 1.6rem; }
.citas-error:not(:empty)::before {
  content: '!';
  position: absolute;
  left: 0; top: 0.15em;
  width: 1.1rem; height: 1.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #B3261E;
  color: #fff;
  font-size: 0.72rem; font-weight: 700; line-height: 1;
}
.citas-error a { color: #8C1D18; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Botones ---------- */
/* El principal es el .btn--primary de la web (negro cafe, main.css). */
.citas-boton { width: 100%; white-space: normal; text-align: center; }
.citas-pagina .btn[aria-busy="true"]:disabled { opacity: 0.75; cursor: progress; }

/* Secundario: filo negro cafe sobre blanco. No es .btn--ghost porque main.css
   pinta ese de negro lleno. */
.citas-boton-suave {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  border: 1.5px solid #17110E;
  border-radius: 999px;
  background: #fff;
  color: #17110E;
  font-family: var(--font-sans);
  font-size: 0.95rem; font-weight: 600;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.citas-boton-suave:hover { background: #F6EFEA; }
.citas-boton-suave:disabled { opacity: 0.5; cursor: not-allowed; }
.citas-boton-suave svg { flex: none; }

/* Botones con aspecto de enlace: "Cambiar telefono", "Reenviar codigo", "Salir". */
.citas-enlace {
  display: inline-block;
  padding: 0.55rem 0.15rem;
  line-height: 1.4;
  font-family: var(--font-sans);
  font-size: 0.9rem; font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(140, 85, 73, 0.55);
  text-underline-offset: 4px;
  cursor: pointer;
}
.citas-enlace:hover { color: var(--primary-d); }
.citas-enlace[disabled] { color: #7A6A61; text-decoration: none; cursor: default; }
.citas-reenvio { margin: 0.9rem 0 0; }
.citas-reenvio__cuenta { font-variant-numeric: tabular-nums; }

/* Notas al pie de la tarjeta (WhatsApp, plazo). */
.citas-nota {
  margin: 1.3rem auto 0;
  max-width: 28rem;
  font-size: 0.88rem; line-height: 1.55;
  color: var(--text-soft);
}
.citas-nota a,
.citas-sub a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(140, 85, 73, 0.55);
  text-underline-offset: 3px;
}
.citas-nota a:hover,
.citas-sub a:hover { color: var(--primary-d); }

/* El telefono con "Cambiar" / "Salir". Si no cabe en una linea, el boton
   baja centrado. */
.citas-telefono {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0 1.1rem;
  margin: 0 0 1.5rem;
  padding: 0.25rem 1rem;
  border: 1px solid var(--apx-linea);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text-soft);
}
.citas-telefono strong {
  margin-left: 0.3rem;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.citas-lista-cabecera .citas-telefono { margin: 0.9rem 0 0; }

/* ---------- Lista de citas ---------- */
.citas-lista {
  display: grid;
  gap: 0.9rem;
  margin: 1.5rem 0 0;
  text-align: left;
}
.cita { list-style: none; }
.cita__tarjeta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 1.05rem;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
/* La hoja de calendario: solo adorno (el dia va escrito al lado). */
.cita__hoja {
  align-self: start;
  width: 62px;
  padding: 0.5rem 0 0.55rem;
  border-radius: 12px;
  background: #17110E;
  color: #F3EAE0;
  display: flex; flex-direction: column; align-items: center;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cita__hoja-semana {
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #D6B39A;
}
.cita__hoja-dia {
  margin: 0.12rem 0 0.08rem;
  font-family: var(--font-serif);
  font-size: 1.7rem; font-weight: 600;
}
.cita__hoja-mes {
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #CBBCAE;
}
.cita__datos { min-width: 0; }
.cita__marca {
  display: inline-block;
  margin-bottom: 0.35rem;
  padding: 0.12rem 0.6rem;
  border-radius: 999px;
  background: rgba(185, 122, 110, 0.13);
  color: var(--primary-d);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.cita__servicio {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.2rem; font-weight: 600;
  line-height: 1.25;
  overflow-wrap: break-word;
}
.cita__cuando {
  margin-top: 0.3rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
}
.cita__cuando .cita__hora { white-space: nowrap; }
.cita__detalle {
  margin-top: 0.15rem;
  font-size: 0.9rem; line-height: 1.5;
  color: var(--text-soft);
}
.cita__acciones {
  grid-column: 1 / -1;
  padding-top: 0.95rem;
  border-top: 1px solid var(--border);
}
.cita__cancelar { width: 100%; }
@media (min-width: 560px) {
  .cita__cancelar { width: auto; }
}

/* Confirmacion dentro de la tarjeta */
.cita__confirmar {
  padding: 1rem;
  border-radius: 12px;
  background: rgba(185, 122, 110, 0.09);
}
.cita__pregunta {
  margin: 0 0 0.85rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}
.cita__botones { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cita__botones > * { flex: 1 1 9.5rem; min-height: 48px; }
.cita__botones .btn { min-height: 48px; padding: 0.7rem 1.2rem; font-size: 0.95rem; }
.cita__confirmar .citas-error:not(:empty) { margin: 0.8rem 0 0; }

/* Mensajes de la tarjeta: plazo, ya no se puede, cancelada */
.cita__mensaje {
  margin: 0;
  font-size: 0.95rem; line-height: 1.55;
  color: var(--text);
}
.cita__mensaje a {
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(140, 85, 73, 0.6);
  text-underline-offset: 3px;
}
.cita__mensaje a:hover { color: var(--primary-d); }
.cita__mensaje--plazo {
  padding: 0.8rem 0.95rem;
  border-left: 2px solid var(--primary-d);
  border-radius: 0 10px 10px 0;
  background: rgba(185, 122, 110, 0.09);
}
.cita__hecho {
  display: flex; align-items: flex-start; gap: 0.7rem;
}
.cita__hecho-icono {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #17110E;
  color: #D6B39A;
}
.cita__hecho-texto strong { display: block; color: var(--text); }
.cita__hecho-texto a { display: inline-block; margin-top: 0.35rem; }

/* Cancelada: la tarjeta se apaga y la hoja pasa a nude. */
.cita.is-cancelada .cita__tarjeta { background: #FCFAF8; }
.cita.is-cancelada .cita__hoja { background: #EDE1DC; color: #6B5D54; }
.cita.is-cancelada .cita__hoja-semana,
.cita.is-cancelada .cita__hoja-mes { color: #8C5549; }
.cita.is-cancelada .cita__servicio,
.cita.is-cancelada .cita__cuando { color: var(--text-soft); }

/* Sin citas */
.citas-vacia { padding-top: 0.2rem; }
.citas-vacia__icono {
  width: 56px; height: 56px;
  margin: 0 auto 1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(185, 122, 110, 0.12);
  color: var(--primary-d);
}

/* ---------- La cita del enlace (cita.html) ---------- */
.cita-unica .eyebrow { margin-bottom: 0.7rem; }
.cita-ficha {
  margin: 0 0 1.5rem;
  padding: 0.35rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
}
.cita-ficha div {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.7rem 0;
}
.cita-ficha div + div { border-top: 1px solid var(--border); }
.cita-ficha dt {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--primary-d);
  padding-top: 0.2rem;
}
.cita-ficha dd {
  margin: 0;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: break-word;
}
.cita-ficha.is-cancelada dd { color: var(--text-soft); }
.cita-ficha__sello {
  display: inline-block;
  padding: 0.12rem 0.65rem;
  border-radius: 999px;
  background: #EDE1DC;
  color: #6B5D54;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.cita-acciones {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.7rem;
}
.cita-acciones .btn,
.cita-acciones .citas-boton-suave { width: 100%; }
.cita-hecho-icono {
  width: 64px; height: 64px;
  margin: 0 auto 1.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #17110E;
  color: #D6B39A;
  box-shadow: 0 12px 30px -12px rgba(23, 17, 14, 0.55);
}

/* ---------- Movil estrecho (iPhone SE y menos) ---------- */
@media (max-width: 420px) {
  /* La cabecera fija mide unos 80 px: un respiro por debajo. */
  .citas-hero { padding-top: 6rem; }
  .citas-seccion--enlace { padding-top: 6.4rem; }
  .cita__tarjeta { padding: 0.95rem; gap: 0.85rem 0.85rem; }
  .cita__hoja { width: 54px; }
  .cita__hoja-dia { font-size: 1.5rem; }
  .cita__servicio { font-size: 1.12rem; }
  .cita-ficha { padding: 0.25rem 0.9rem; }
  .cita-ficha div { grid-template-columns: 1fr; gap: 0.15rem; padding: 0.6rem 0; }
  .cita-ficha dt { padding-top: 0; }
}
@media (max-width: 340px) {
  .citas-hero__lead { font-size: 0.95rem; }
  .citas-tarjeta { padding: 1.2rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .citas-spinner { animation-duration: 2.4s; }
}