/* NeuroClinic — Reserva de citas. Todo va bajo .ncr para no chocar con el tema. */
.ncr {
  --ncr-primary: #2563eb;
  --ncr-ink: #0f172a;
  --ncr-soft: #475569;
  --ncr-muted: #94a3b8;
  --ncr-line: #e2e8f0;
  --ncr-bg: #ffffff;
  --ncr-tint: color-mix(in srgb, var(--ncr-primary) 9%, #fff);
  --ncr-tint-2: color-mix(in srgb, var(--ncr-primary) 18%, #fff);
  --ncr-radius: 14px;
  max-width: 720px;
  margin: 0 auto;
  color: var(--ncr-ink);
  font-size: 16px;
  line-height: 1.5;
  text-align: left !important;
}
.ncr, .ncr p, .ncr label, .ncr span, .ncr dl, .ncr dt, .ncr dd, .ncr h3, .ncr h4, .ncr strong, .ncr small, .ncr em, .ncr li { text-align: left; letter-spacing: normal; text-transform: none; }
.ncr .ncr-done, .ncr .ncr-done > p, .ncr .ncr-done > h3, .ncr .ncr-small, .ncr .ncr-contact { text-align: center; }
.ncr .ncr-steps li, .ncr .ncr-steps em, .ncr .ncr-steps span, .ncr .ncr-week span, .ncr .ncr-day, .ncr .ncr-slot { text-align: center; }
.ncr *, .ncr *::before, .ncr *::after { box-sizing: border-box; }
/* Algunos temas aplican `* { margin: 0 auto }`: se neutraliza dentro del formulario. */
.ncr * { margin: 0; }
.ncr p { margin: 0 0 .75em; }
.ncr a { color: var(--ncr-primary); }

.ncr .ncr-card {
  background: var(--ncr-bg);
  border: 1px solid var(--ncr-line);
  border-radius: calc(var(--ncr-radius) + 4px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -12px rgba(15, 23, 42, .12);
  padding: clamp(18px, 4vw, 32px);
}
.ncr .ncr-h { margin: 0 0 14px; font-size: clamp(1.25em, 3.2vw, 1.55em); font-weight: 800; line-height: 1.25; color: var(--ncr-ink); letter-spacing: -.01em; }
.ncr .ncr-lead { font-weight: 700; font-size: 1.05em; margin: 18px 0 12px; outline: none; }
.ncr .ncr-small { font-size: .85em; color: var(--ncr-soft); margin-top: 14px; }
.ncr .ncr-contact { font-size: .9em; color: var(--ncr-soft); margin: 14px 0 0; }

/* Carga */
.ncr .ncr-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px 16px; color: var(--ncr-soft); border: 1px dashed var(--ncr-line); border-radius: var(--ncr-radius); }
.ncr .ncr-spin { width: 18px; height: 18px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: ncr-spin .7s linear infinite; vertical-align: -3px; }
@keyframes ncr-spin { to { transform: rotate(360deg); } }

/* Pasos */
.ncr .ncr-steps { display: flex; gap: 6px; list-style: none; margin: 0 0 6px; padding: 0; counter-reset: none; }
.ncr .ncr-steps li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .75em; color: var(--ncr-muted); position: relative; margin: 0; padding: 0; }
.ncr .ncr-steps li::before { content: ""; position: absolute; top: 14px; left: -50%; right: 50%; height: 2px; background: var(--ncr-line); z-index: 0; }
.ncr .ncr-steps li:first-child::before, .ncr .ncr-steps li:empty + li::before { display: none; }
.ncr .ncr-steps li:empty { display: none; }
.ncr .ncr-steps span { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #f1f5f9; color: var(--ncr-muted); border: 2px solid #fff; }
.ncr .ncr-steps em { font-style: normal; font-weight: 600; }
.ncr .ncr-steps li.done span { background: var(--ncr-tint-2); color: var(--ncr-primary); }
.ncr .ncr-steps li.done::before, .ncr .ncr-steps li.current::before { background: var(--ncr-primary); }
.ncr .ncr-steps li.current span { background: var(--ncr-primary); color: #fff; box-shadow: 0 0 0 4px var(--ncr-tint); }
.ncr .ncr-steps li.current em { color: var(--ncr-ink); }
@media (max-width: 480px) { .ncr .ncr-steps em { display: none; } .ncr .ncr-steps li.current em { display: block; position: absolute; top: 34px; white-space: nowrap; } .ncr .ncr-steps { margin-bottom: 22px; } }

.ncr .ncr-summary { display: flex !important; flex-wrap: wrap; justify-content: flex-start !important; gap: 6px; margin: 14px 0 0; }
.ncr .ncr-summary span { display: inline-block !important; flex: none; width: auto !important; margin: 0 !important; background: var(--ncr-tint); color: var(--ncr-primary); font-weight: 600; font-size: .85em; padding: 4px 11px; border-radius: 999px; }

/* Botones (reseteo fuerte: los temas suelen estilizar todos los <button>) */
.ncr button, .ncr .ncr-btn { font: inherit; letter-spacing: normal; text-transform: none; text-shadow: none; line-height: 1.2; margin: 0; }
.ncr .ncr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--ncr-primary); color: #fff !important; font-weight: 700; font-size: 1em; text-decoration: none !important;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--ncr-primary) 60%, transparent);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.ncr .ncr-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.ncr .ncr-btn:disabled { opacity: .65; cursor: wait; transform: none; }
.ncr .ncr-btn-ghost { background: #fff; color: var(--ncr-primary) !important; border: 1.5px solid var(--ncr-tint-2); box-shadow: none; }
.ncr .ncr-btn-danger { background: #dc2626; box-shadow: none; }
.ncr .ncr-link { background: none; border: 0; padding: 10px 2px; color: var(--ncr-soft); font-weight: 600; cursor: pointer; font-size: .95em; box-shadow: none; }
.ncr .ncr-link:hover { color: var(--ncr-primary); background: none; }
.ncr .ncr-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; }
.ncr .ncr-actions.ncr-center { justify-content: center; }
.ncr [tabindex="-1"]:focus { outline: none; }
.ncr button:focus-visible, .ncr a:focus-visible, .ncr input:focus-visible, .ncr textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--ncr-primary) 45%, transparent); outline-offset: 2px; }

/* Paso 1 */
.ncr .ncr-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ncr .ncr-type {
  display: flex !important; flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 4px; text-align: left !important; width: 100%; height: auto; margin: 0;
  padding: 16px 18px; border-radius: var(--ncr-radius); border: 1.5px solid var(--ncr-line); background: #fff; color: var(--ncr-ink); cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.ncr .ncr-type:hover { border-color: var(--ncr-primary); box-shadow: 0 0 0 4px var(--ncr-tint); background: #fff; color: var(--ncr-ink); }
.ncr .ncr-type strong, .ncr .ncr-type small { display: block; text-align: left !important; }
.ncr .ncr-type strong { font-size: 1.05em; line-height: 1.3; }
.ncr .ncr-type small { color: var(--ncr-soft); font-size: .85em; }
.ncr .ncr-type.is-on { border-color: var(--ncr-primary); background: var(--ncr-tint); }

/* Paso 2 — calendario */
.ncr .ncr-cal { border: 1px solid var(--ncr-line); border-radius: var(--ncr-radius); padding: 14px; max-width: 460px; margin-left: auto; margin-right: auto; }
.ncr .ncr-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ncr .ncr-cal-head strong { font-size: 1.05em; }
.ncr .ncr-nav { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--ncr-line); background: #fff; color: var(--ncr-ink); font-size: 1.4em; line-height: 1; cursor: pointer; padding: 0; }
.ncr .ncr-nav:hover:not(:disabled) { border-color: var(--ncr-primary); color: var(--ncr-primary); background: #fff; }
.ncr .ncr-nav:disabled { opacity: .35; cursor: default; }
.ncr .ncr-week, .ncr .ncr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ncr .ncr-week span { text-align: center; font-size: .72em; font-weight: 700; color: var(--ncr-muted); text-transform: uppercase; padding: 4px 0; }
.ncr .ncr-day { aspect-ratio: 1 / 1; min-height: 38px; display: grid; place-items: center; border-radius: 10px; color: #cbd5e1; font-size: .95em; position: relative; border: 0; background: none; padding: 0; }
.ncr .ncr-day.is-free { color: var(--ncr-ink); background: var(--ncr-tint); font-weight: 700; cursor: pointer; transition: background .12s, color .12s, transform .12s; }
.ncr .ncr-day.is-free i { position: absolute; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--ncr-primary); }
.ncr .ncr-day.is-free:hover { background: var(--ncr-tint-2); transform: scale(1.04); color: var(--ncr-ink); }
.ncr .ncr-day.is-on { background: var(--ncr-primary); color: #fff; }
.ncr .ncr-day.is-on i { background: #fff; }
.ncr .ncr-grid.is-busy { opacity: .5; pointer-events: none; }
.ncr .ncr-legend { display: flex; align-items: center; gap: 6px; font-size: .8em; color: var(--ncr-soft); margin: 10px 0 0; }
.ncr .ncr-legend i { width: 14px; height: 14px; border-radius: 4px; background: var(--ncr-tint-2); display: inline-block; }

/* Paso 3 — horas */
.ncr .ncr-slot-group h4 { margin: 14px 0 8px; font-size: .8em; text-transform: uppercase; letter-spacing: .06em; color: var(--ncr-soft); font-weight: 700; }
.ncr .ncr-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.ncr .ncr-slot { min-height: 46px; padding: 8px; border-radius: 11px; border: 1.5px solid var(--ncr-tint-2); background: #fff; color: var(--ncr-primary); font-weight: 700; cursor: pointer; transition: background .12s, color .12s; }
.ncr .ncr-slot:hover, .ncr .ncr-slot.is-on { background: var(--ncr-primary); border-color: var(--ncr-primary); color: #fff; }

/* Paso 4 — formulario */
.ncr .ncr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ncr .ncr-full { grid-column: 1 / -1; }
@media (max-width: 560px) { .ncr .ncr-row { grid-template-columns: 1fr; } }
.ncr .ncr-field { min-width: 0; margin: 0; padding: 0; float: none; width: auto; }
.ncr .ncr-field label { display: block !important; font-weight: 600; font-size: .9em; margin: 0 0 6px; padding: 0; color: var(--ncr-ink); text-align: left !important; line-height: 1.35; }
.ncr .ncr-field label span { color: var(--ncr-muted); font-weight: 500; }
.ncr .ncr-field input, .ncr .ncr-field textarea {
  display: block !important; width: 100% !important; max-width: none !important; float: none !important; height: auto; margin: 0 !important; min-height: 48px; padding: 11px 14px; font: inherit; font-size: 16px; line-height: 1.4; color: var(--ncr-ink); text-align: left !important;
  background: #fff; border: 1.5px solid #cbd5e1; border-radius: 11px; box-shadow: none; transition: border-color .12s, box-shadow .12s;
}
.ncr .ncr-field textarea { min-height: 88px; resize: vertical; }
.ncr .ncr-field input:focus, .ncr .ncr-field textarea:focus { border-color: var(--ncr-primary); box-shadow: 0 0 0 4px var(--ncr-tint); outline: none; }
.ncr .is-invalid { border-color: #dc2626 !important; }
.ncr .ncr-err { display: block; color: #dc2626; font-size: .82em; min-height: 0; margin-top: 4px; }
.ncr .ncr-err:empty { display: none; }
.ncr .ncr-check { display: flex !important; gap: 10px; align-items: flex-start; justify-content: flex-start; margin: 18px 0 0; padding: 0; font-size: .95em; font-weight: 400; color: var(--ncr-soft); cursor: pointer; text-align: left !important; }
.ncr .ncr-check input { width: 20px !important; height: 20px !important; min-height: 0; margin: 2px 0 0 !important; padding: 0; flex: none; float: none; position: static; accent-color: var(--ncr-primary); }
.ncr .ncr-check span { flex: 1; text-align: left !important; }
.ncr .ncr-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Paso 5 y resultado */
.ncr .ncr-review { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 6px 0 0; padding: 16px 18px; background: #f8fafc; border: 1px solid var(--ncr-line); border-radius: var(--ncr-radius); outline: none; }
.ncr .ncr-review dt { color: var(--ncr-soft); font-weight: 600; font-size: .9em; margin: 0; }
.ncr .ncr-review dd { margin: 0; font-weight: 600; word-break: break-word; }
.ncr .ncr-review dd small { font-weight: 400; color: var(--ncr-soft); }
.ncr .ncr-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.1em; letter-spacing: .06em; color: var(--ncr-primary); }
.ncr .ncr-done { text-align: center; }
.ncr .ncr-done .ncr-review { text-align: left; max-width: 440px; margin: 16px auto 0; }
.ncr .ncr-check-icon { width: 64px; height: 64px; margin: 4px auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 2em; font-weight: 800; color: #fff; background: #16a34a; box-shadow: 0 0 0 8px #dcfce7; animation: ncr-pop .35s ease-out; }
@keyframes ncr-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Avisos */
.ncr .ncr-alert { padding: 12px 14px; border-radius: 12px; font-size: .93em; margin: 12px 0; }
.ncr .ncr-alert-red { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.ncr .ncr-alert-amber { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.ncr .ncr-alert-green { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.ncr .ncr-alert-blue { background: var(--ncr-tint); color: var(--ncr-ink); border: 1px solid var(--ncr-tint-2); text-align: left; margin-top: 16px; }
.ncr .ncr-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8em; font-weight: 700; }
.ncr .ncr-green { background: #dcfce7; color: #166534; }
.ncr .ncr-amber { background: #fef3c7; color: #92400e; }
.ncr .ncr-red { background: #fee2e2; color: #991b1b; }
.ncr .ncr-gray { background: #f1f5f9; color: #475569; }
.ncr-admin-note { padding: 12px 16px; border-left: 4px solid #d63638; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.04); }

@media (prefers-reduced-motion: reduce) { .ncr * { animation: none !important; transition: none !important; } }
