/* Component styles for the booking form. Tokens live on .turnos-root so they
   cannot overwrite the landing page when both documents share a DOM.
   @font-face rules live in turnos-fonts.css and are loaded only by /turnos/. */
.turnos-root {
  --cream: #F4E7D4;
  --paper: #FBF4E7;
  --ink: #14110C;
  --ink2: rgba(20, 17, 12, 0.66);
  --ink3: rgba(20, 17, 12, 0.42);
  --muted: rgba(20, 17, 12, 0.28);
  --line: rgba(20, 17, 12, 0.14);
  --green: #12A44B;
  --green-dark: #0B7034;
  --ember: #C7642B;
  --disp: "Archivo", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --pad: 24px;
  --max: 720px;
  -webkit-text-size-adjust: 100%;
}
body.turnos-root {
  min-height: 100dvh;
}

.turnos-root, .turnos-root *, .turnos-root *::before, .turnos-root *::after { box-sizing: border-box; }
.turnos-root { margin: 0; }

/* ---------------------------------------------------------------------------
   Isolation from the landing page.

   This form was built standalone for /turnos/, where no global stylesheet
   existed. It is also inlined into the landing (`#turnos`), and there the
   landing's element and class selectors reach inside it. They do not lose on
   specificity — the form simply never declared these properties, so nothing
   competed and the landing's values applied unopposed:

     section { padding: clamp(76px,10vw,150px); border-top: 1px solid ... }
       -> every step inherited ~150px of dead vertical space and a stray rule.
     .hint  { position: absolute; z-index: 5; ... }
       -> the email hint left the flow and landed on top of the submit button.
     .lead, h1,h2,h3 -> display type sizing meant for the landing's headers.

   Reset here rather than renaming the form's classes: renaming would touch
   form.html, turnos.js and every selector in this file, and the next landing
   class would collide again anyway. Keep this block first so the component
   rules below win normally.
   --------------------------------------------------------------------------- */
.turnos-root .panel {
  padding: 20px;
  border: 0;
}
.turnos-root .hint {
  position: static;
  z-index: auto;
  inset: auto;
  display: block;
  align-items: initial;
  gap: initial;
  pointer-events: auto;
  text-align: left;
  transform: none;
}
.turnos-root .lead {
  text-align: left;
  max-width: none;
  text-transform: none;
}

.turnos-root {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
}
.turnos-root img { max-width: 100%; }
/* `textarea` was missing here, so the note field fell back to the browser's
   monospace default and read as a different typeface than the rest. */
.turnos-root button, .turnos-root input, .turnos-root textarea, .turnos-root select { font: inherit; color: inherit; }
.turnos-root a { color: inherit; }
.turnos-root :focus { outline: none; }
.turnos-root :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.turnos-root .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.turnos-root .hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}
.turnos-root .skip {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 20;
  background: var(--ink);
  color: var(--cream);
  padding: 10px 16px;
  transform: translateY(-200%);
}
.turnos-root .skip:focus { transform: none; }

.turnos-root .page {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 28px var(--pad) calc(48px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.turnos-root .brand {
  margin: 0;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0;
}
.turnos-root .brand a { text-decoration: none; }

.turnos-root .step-label {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-dark);
}

.turnos-root .panel { display: flex; flex-direction: column; gap: 16px; }
.turnos-root .panel[hidden] { display: none; }

.turnos-root h1 {
  margin: 0;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: 0;
}
.turnos-root .lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink2);
}
.turnos-root .note {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink2);
}

.turnos-root .back, .turnos-root .text-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  min-height: 44px;
  align-self: start;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
  color: var(--ink);
}
.turnos-root .text-link { color: var(--green-dark); }

.turnos-root .sedes {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.turnos-root .sede {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  column-gap: 10px;
  row-gap: 6px;
  align-items: start;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 14px 16px;
  min-height: 44px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.turnos-root .sede.is-selected { border: 2px solid var(--green); padding: 13px 15px; }
.turnos-root .sede-name {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
}
.turnos-root .sede-addr {
  grid-column: 1 / -1;
  font-size: 13px;
  color: rgba(20, 17, 12, 0.59); /* 4.63:1 on #FBF4E7 */
  line-height: 1.35;
}
.turnos-root .sede-map {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 500;
  text-underline-offset: 2px;
}
.turnos-root .radio {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(20, 17, 12, 0.42);
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.turnos-root .sede.is-selected .radio { border-color: var(--green); }
.turnos-root .radio::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: transparent;
}
.turnos-root .sede.is-selected .radio::after { background: var(--green); }

.turnos-root .cta {
  appearance: none;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--green-dark);
  color: #fff;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  transition: background 0.22s;
}
.turnos-root .cta:hover { background: var(--ink); }
.turnos-root .cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.turnos-root .cta[hidden], .turnos-root .checks[hidden] {
  display: none;
}
.turnos-root .cta-dialog { width: auto; min-width: 160px; }

.turnos-root .calendar {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* From tablet up the calendar stops stretching to the full panel width, where it
   read as oversized. Only the width is capped: the height is content-driven on
   purpose. The grid reserves `repeat(6, 44px)` because some months need six
   weeks (November 2026 does), and 44px is the touch target floor — so the box
   needs 376px and any max-height below that clips a real, bookable day. */
@media (min-width: 700px) {
  .turnos-root .calendar { max-width: 400px; }
}
.turnos-root .cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  gap: 8px;
}
.turnos-root .cal-nav-btn {
  appearance: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}
.turnos-root .cal-month {
  margin: 0;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 16px;
}
.turnos-root .cal-dows, .turnos-root .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.turnos-root .cal-grid {
  grid-template-rows: repeat(6, 44px);
}
.turnos-root .cal-dows span {
  display: grid;
  place-items: center;
  height: 20px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink2);
}
.turnos-root .cal-day {
  appearance: none;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border: 0;
  background: transparent;
  border-radius: 999px;
  font-size: 14px;
  display: grid;
  place-items: center;
  color: var(--muted);
  cursor: default;
}
.turnos-root .cal-day.is-available {
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
}
.turnos-root .cal-day.is-selected {
  background: var(--green-dark);
  color: #fff;
  border-color: var(--green-dark);
  font-weight: 500;
}
.turnos-root .cal-day:disabled { color: var(--muted); }
.turnos-root .cal-day.is-skeleton {
  border: 1px solid var(--line);
  animation: cal-skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes cal-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.turnos-root .hours {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.turnos-root .hour {
  appearance: none;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.turnos-root .hour.is-selected {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: #fff;
}

.turnos-root #datos-form {
  display: flex;
  flex-direction: column;
  gap: var(--pad);
}
.turnos-root .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.turnos-root .field label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.turnos-root .field .hint {
  margin: 0;
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.35;
}
.turnos-root .email-suggest {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink2);
  min-height: 44px;
}
.turnos-root .email-suggest[hidden] { display: none; }
.turnos-root .field input[type="text"], .turnos-root .field input[type="email"], .turnos-root .field input[type="tel"] {
  width: 100%;
  min-height: 48px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0 14px;
  font-size: 16px;
  line-height: 1.35;
  border-radius: 0;
}
.turnos-root .field input::placeholder { color: rgba(20, 17, 12, 0.59); /* 4.63:1 on #FBF4E7 */ }
/* Chrome paints autofilled fields pale blue, which breaks the cream palette on
   the whole step. There is no property to opt out, so the inset shadow is the
   documented way to repaint the field with our own surface colour. */
.turnos-root .field input:-webkit-autofill,
.turnos-root .field input:-webkit-autofill:hover,
.turnos-root .field input:-webkit-autofill:focus,
.turnos-root .field textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--paper) inset;
  box-shadow: 0 0 0 1000px var(--paper) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
}
.turnos-root .field textarea {
  width: 100%;
  min-height: 96px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.35;
  border-radius: 0;
  resize: none;
}
.turnos-root .field textarea::placeholder { color: rgba(20, 17, 12, 0.59); /* 4.63:1 on #FBF4E7 */ }
.turnos-root #datos-form { position: relative; }

.turnos-root .field.is-error input {
  border: 2px solid var(--ember);
  padding: 0 13px;
}
.turnos-root .field.is-error textarea {
  border: 2px solid var(--ember);
  padding: 11px 13px;
}
.turnos-root .field input:focus, .turnos-root .field input:focus-visible {
  outline: none;
  border: 2px solid var(--ink);
  padding: 0 13px;
}
.turnos-root .field textarea:focus, .turnos-root .field textarea:focus-visible {
  outline: none;
  border: 2px solid var(--ink);
  padding: 11px 13px;
}
/* A field with an error keeps its ember border while focused, and gains a
   focus ring, so the invalid state does not flash away on focus. */
.turnos-root .field.is-error input:focus, .turnos-root .field.is-error input:focus-visible {
  border: 2px solid var(--ember);
  padding: 0 13px;
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.turnos-root .field.is-error textarea:focus, .turnos-root .field.is-error textarea:focus-visible {
  border: 2px solid var(--ember);
  padding: 11px 13px;
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.turnos-root .field.is-error label, .turnos-root .field-error {
  color: #A45223; /* 4.52:1 on #F4E7D4 */
}
.turnos-root .field-error {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}
.turnos-root .field-error[hidden] { display: none; }

.turnos-root .error-summary {
  background: var(--paper);
  border: 2px solid var(--ember);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.turnos-root .error-summary[hidden] { display: none; }
.turnos-root .error-summary-title {
  margin: 0;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 18px;
}
.turnos-root .error-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.turnos-root .error-summary a {
  color: #A45223; /* 4.52:1 on #F4E7D4 */
  font-size: 14px;
}

.turnos-root .summary {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.turnos-root .summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}
.turnos-root .summary dt {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(20, 17, 12, 0.59); /* 4.63:1 on #FBF4E7 */
  margin: 0 0 4px;
}
.turnos-root .summary dd {
  margin: 0;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 16px;
}
.turnos-root .change {
  appearance: none;
  background: none;
  border: 0;
  color: #0E813B; /* 4.55:1 on #FBF4E7 */
  font-size: 14px;
  font-weight: 500;
  min-height: 44px;
  cursor: pointer;
  padding: 0;
}

/* "Cómo sigue" is neutral, forward-looking information — not a warning. It used
   the ember border, which is the error colour in this system (field errors, the
   error summary), so the last step read as if something had gone wrong. Green is
   the system accent and already carries the "this is on track" meaning. */
.turnos-root .pay-note {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green-dark);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.turnos-root .pay-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-dark); /* 5.9:1 on #FBF4E7 */
}
.turnos-root .pay-title {
  margin: 0;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
}
.turnos-root .pay-alt {
  margin: 0;
  font-size: 13px;
  color: var(--ink2);
}

.turnos-root .checks { display: flex; flex-direction: column; gap: 4px; }
.turnos-root .check-row-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
  min-height: 48px;
}
.turnos-root .check-row-wrap .check-row { width: auto; }
.turnos-root .check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  cursor: pointer;
  font-size: 15px;
}
.turnos-root .check-row input {
  appearance: none;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1.5px solid rgba(20, 17, 12, 0.42);
  border-radius: 4px;
  background: var(--paper);
  display: grid;
  place-items: center;
  margin: 0;
}
.turnos-root .check-row input:checked {
  background: var(--green);
  border-color: var(--green);
}
.turnos-root .check-row input:checked::after {
  content: "✓";
  color: #fff;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
}

.turnos-root .demo-banner {
  background: var(--paper);
  border: 2px solid var(--green-dark);
  padding: 14px 16px;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.turnos-root .demo-banner[hidden] { display: none; }
.turnos-root .demo-banner .pay-title { margin: 0; }
.turnos-root .demo-banner p { margin: 0; }

.turnos-root .legal {
  width: min(100%, 520px);
  max-height: 80vh;
  overflow: auto;
  border: 1px solid var(--line);
  background: var(--cream);
  padding: 24px;
  color: var(--ink);
}
.turnos-root .legal::backdrop { background: rgba(20, 17, 12, 0.45); }
.turnos-root .legal h2 {
  font-family: var(--disp);
  font-size: 22px;
  margin: 0 0 12px;
}
.turnos-root .legal p, .turnos-root .legal li { font-size: 15px; color: var(--ink2); }
.turnos-root .legal ol { padding-left: 1.2em; }
.turnos-root .legal form { margin-top: 20px; }

.turnos-root .empty {
  margin: 0;
  font-size: 15px;
  color: var(--ink2);
}

@media (min-width: 941px) {
  .turnos-root .page { padding: 48px var(--pad) 80px; gap: 20px; }
  .turnos-root h1 { font-size: 36px; letter-spacing: -0.02em; text-wrap: balance; }
  .turnos-root .sedes {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .turnos-root .cta { width: auto; align-self: start; min-width: 220px; }
  .turnos-root .hours { grid-template-columns: repeat(4, 1fr); }

  /* Supporting text keeps a readable measure instead of running the full width
     of the panel. */
  .turnos-root .lead, .turnos-root .note { max-width: 62ch; }

  /* A field's width should suggest how long the value is. Every input used to
     span the whole panel, so a phone number got the same ~580px as an address.
     Name/surname pair up; the short values get a cap. */
  .turnos-root #datos-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 20px;
    align-items: start;
    max-width: 680px;
  }
  .turnos-root #field-email,
  .turnos-root #field-email-confirm,
  .turnos-root #field-notes,
  .turnos-root .email-suggest,
  .turnos-root #datos-form .cta {
    grid-column: 1 / -1;
  }
  .turnos-root #field-phone input { max-width: 260px; }
  .turnos-root #field-email input,
  .turnos-root #field-email-confirm input { max-width: 420px; }

  /* "Cambiar" belongs next to the value it changes. Pinned to the panel's right
     edge it sat ~500px away from its own row and read as unrelated. */
  .turnos-root .summary { max-width: 520px; }
  .turnos-root .summary-row { justify-content: flex-start; gap: 20px; }
  .turnos-root .summary-row > div:first-child { min-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .turnos-root .cta { transition: none; }
  .turnos-root .cal-day.is-skeleton { animation: none; }
}