/*
 * Expediente de pacientes nuevas (/registro/).
 *
 * Vive dentro del marco del portal (portal.css): mismas variables, misma
 * tipografía. Una tarjeta por pregunta, opciones grandes para el pulgar y
 * una barra de avance pegada arriba.
 */

.smci-root {
	--smci-ink: var(--smcp-ink, #201D29);
	--smci-ink-2: var(--smcp-ink-2, #4A4557);
	--smci-ink-3: var(--smcp-ink-3, #736D80);
	--smci-line: var(--smcp-line, #EAE5DE);
	--smci-gold: var(--smcp-gold, #B08340);
	--smci-gold-deep: var(--smcp-gold-deep, #8E6830);
	--smci-gold-tint: var(--smcp-gold-tint, #F7EFE1);
	--smci-jade: var(--smcp-jade, #2E8A72);
	--smci-jade-tint: var(--smcp-jade-tint, #E4F1EC);
	--smci-clay: var(--smcp-clay, #C0614A);
	--smci-clay-tint: var(--smcp-clay-tint, #FAE9E4);
	--smci-serif: var(--smcp-serif, 'Cormorant Garamond', Georgia, serif);
	--smci-sans: var(--smcp-sans, 'Montserrat', system-ui, sans-serif);
	max-width: 560px;
	margin: 0 auto;
	font-family: var(--smci-sans);
	color: var(--smci-ink);
}
.smci-root *, .smci-root *::before, .smci-root *::after { box-sizing: border-box; }
.smci-boot { padding: 48px 0; text-align: center; color: var(--smci-ink-3); }
.smci-noscript { padding: 16px; background: var(--smci-clay-tint); border-radius: 14px; }

/* El marco del portal ya muestra el logo arriba. */
.smcp-body .smci-logo { display: none; }

/* ── Avance ─────────────────────────────────────────────────────── */

.smci-top {
	position: sticky;
	top: calc(var(--smcp-top, 0px) + env(safe-area-inset-top));
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: -8px calc(var(--smcp-pad, 16px) * -1) 12px;
	padding: 10px var(--smcp-pad, 16px);
	background: var(--smcp-canvas, #FAF8F5);
}
.smci-back {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin-left: -10px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--smci-ink);
	cursor: pointer;
}
.smci-back:hover { background: rgba(32, 29, 41, .05); }
.smci-progress {
	flex: 1;
	height: 8px;
	border-radius: 99px;
	background: var(--smci-line);
	overflow: hidden;
}
.smci-progress span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--smci-gold), var(--smci-gold-deep));
	transition: width .35s cubic-bezier(.3, .7, .3, 1);
}
.smci-pct { flex: none; min-width: 38px; text-align: right; font-size: 13px; font-weight: 600; color: var(--smci-ink-3); font-variant-numeric: tabular-nums; }

/* ── Tarjeta ────────────────────────────────────────────────────── */

.smci-card {
	background: #fff;
	border: 1px solid var(--smci-line);
	border-radius: 24px;
	box-shadow: 0 1px 2px rgba(32, 29, 41, .04), 0 12px 32px -18px rgba(32, 29, 41, .18);
	padding: 28px 20px 24px;
	animation: smci-in-f .32s cubic-bezier(.3, .7, .3, 1) both;
}
.smci-card.smci-dir-b { animation-name: smci-in-b; }
@keyframes smci-in-f { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes smci-in-b { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.smci-card, .smci-progress span { animation: none; transition: none; }
}

.smci-root h1, .smci-root h2 {
	font-family: var(--smci-serif);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.15;
	color: var(--smci-ink);
}
.smci-root h1 { font-size: clamp(32px, 8.5vw, 40px); margin: 6px 0 10px; }
.smci-root h2 { font-size: clamp(25px, 6.6vw, 30px); margin: 4px 0 8px; }
.smci-eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--smci-gold-deep);
}
.smci-lead { margin: 0 0 22px; color: var(--smci-ink-2); font-size: 16.5px; line-height: 1.55; }
.smci-help { margin: 0 0 18px; color: var(--smci-ink-3); font-size: 14.5px; line-height: 1.5; }
.smci-muted { color: var(--smci-ink-3); font-size: 14px; }
.smci-muted.small { font-size: 12.5px; }
.smci-ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Bienvenida, secciones y final ──────────────────────────────── */

.smci-welcome, .smci-intro, .smci-done { text-align: center; padding: 8px 4px 4px; }
.smci-logo { display: block; width: 200px; height: auto; margin: 0 auto 18px; }
.smci-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
.smci-facts li {
	padding: 14px 6px;
	border-radius: 16px;
	background: var(--smci-gold-tint);
}
.smci-facts b { display: block; font-size: 13.5px; font-weight: 700; color: var(--smci-ink); }
.smci-facts span { display: block; margin-top: 2px; font-size: 12px; color: var(--smci-ink-2); line-height: 1.35; }

.smci-badge, .smci-done-ico {
	display: inline-grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin: 6px 0 14px;
	border-radius: 50%;
	background: var(--smci-gold-tint);
	color: var(--smci-gold-deep);
}
.smci-done-ico { background: var(--smci-jade-tint); color: var(--smci-jade); animation: smci-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes smci-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.smci-intro .smci-lead, .smci-done .smci-lead { max-width: 420px; margin-left: auto; margin-right: auto; }
.smci-welcome .smci-btn, .smci-intro .smci-btn, .smci-done .smci-btn { display: flex; width: 100%; margin-top: 10px; }

/* ── Botones ────────────────────────────────────────────────────── */

.smci-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 54px;
	padding: 14px 24px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font: 600 16px/1.2 var(--smci-sans);
	text-decoration: none !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform .12s ease, background-color .15s ease, opacity .15s ease;
}
.smci-btn:active { transform: scale(.98); }
.smci-btn--primary { background: var(--smci-ink); color: #fff !important; }
.smci-btn--primary:hover { background: #34303f; }
.smci-btn--ghost { background: #fff; border-color: var(--smci-line); color: var(--smci-ink) !important; }
.smci-btn--wide { width: 100%; }
.smci-btn[disabled] { opacity: .55; cursor: default; }
.smci-link {
	padding: 6px 2px;
	border: 0;
	background: none;
	font: 600 14px/1.2 var(--smci-sans);
	color: var(--smci-gold-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.smci-root button:focus-visible, .smci-root a:focus-visible, .smci-root input:focus-visible, .smci-root textarea:focus-visible {
	outline: 3px solid var(--smci-gold);
	outline-offset: 2px;
}

.smci-nav {
	position: sticky;
	bottom: 0;
	z-index: 10;
	margin: 0 calc(var(--smcp-pad, 16px) * -1);
	padding: 14px var(--smcp-pad, 16px) calc(14px + env(safe-area-inset-bottom));
	background: linear-gradient(to bottom, rgba(250, 248, 245, 0), var(--smcp-canvas, #FAF8F5) 30%);
}

/* ── Preguntas ──────────────────────────────────────────────────── */

.smci-q h2 { margin-bottom: 14px; }
.smci-q .smci-help { margin-top: -6px; }

.smci-options { display: grid; gap: 10px; }
.smci-options--grid { grid-template-columns: 1fr 1fr; }
.smci-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 12px 16px;
	border: 1.5px solid var(--smci-line);
	border-radius: 16px;
	background: #fff;
	font: 500 16px/1.3 var(--smci-sans);
	color: var(--smci-ink);
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.smci-opt:hover { border-color: #D8CFC2; }
.smci-opt:active { transform: scale(.985); }
.smci-opt-dot {
	flex: none;
	width: 22px;
	height: 22px;
	border: 2px solid #CFC6BA;
	border-radius: 50%;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.smci-opt.is-on { border-color: var(--smci-gold); background: var(--smci-gold-tint); }
.smci-opt.is-on .smci-opt-dot { border-color: var(--smci-gold-deep); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 11px var(--smci-gold-deep); }
.smci-options--grid .smci-opt { min-height: 52px; padding: 10px 12px; font-size: 15px; }

.smci-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.smci-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 9px 16px;
	border: 1.5px solid var(--smci-line);
	border-radius: 999px;
	background: #fff;
	font: 500 15px/1.25 var(--smci-sans);
	color: var(--smci-ink);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .15s ease, background-color .15s ease;
}
.smci-chip.is-on { border-color: var(--smci-gold); background: var(--smci-gold-tint); color: var(--smci-ink); }
.smci-chip.is-on .smci-ico { color: var(--smci-gold-deep); stroke-width: 2.4; }
.smci-chip--sm { min-height: 40px; padding: 7px 12px; font-size: 13.5px; flex: none; }

.smci-fields { display: grid; gap: 16px; }
.smci-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--smci-ink-2); }
.smci-input {
	display: block;
	width: 100%;
	min-height: 54px;
	padding: 13px 16px;
	border: 1.5px solid var(--smci-line);
	border-radius: 14px;
	background: #fff;
	font: 400 17px/1.4 var(--smci-sans);
	color: var(--smci-ink);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s ease;
}
.smci-input::placeholder { color: #A9A2B4; }
.smci-input:focus { border-color: var(--smci-gold); outline: none; }
.smci-input:disabled { background: #F6F3EF; color: var(--smci-ink-3); }
.smci-textarea { min-height: 112px; resize: vertical; }
input[type="date"].smci-input { min-height: 54px; }
.smci-age { margin: 12px 0 0; font-size: 14px; color: var(--smci-jade); font-weight: 600; }

/* Escalas 1–10 */
.smci-scales { display: grid; gap: 14px; }
.smci-scale { padding: 14px 16px 10px; border: 1.5px solid var(--smci-line); border-radius: 16px; }
.smci-scale-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 15.5px; font-weight: 500; }
.smci-scale-head b { min-width: 28px; text-align: right; font-size: 20px; color: var(--smci-gold-deep); font-variant-numeric: tabular-nums; }
.smci-scale input[type="range"] { width: 100%; height: 36px; margin: 6px 0 0; accent-color: var(--smci-gold-deep); cursor: pointer; }
.smci-scale input[type="range"].is-unset { opacity: .45; }
.smci-scale-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--smci-ink-3); }

/* Rutina que usa hoy */
.smci-routine { display: grid; gap: 14px; }
.smci-routine-row label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--smci-ink-2); }
.smci-routine-in { display: flex; gap: 8px; align-items: center; }
.smci-routine-in .smci-input { flex: 1; min-width: 0; }

/* ── Repaso ─────────────────────────────────────────────────────── */

.smci-review section { padding: 14px 0; border-top: 1px solid var(--smci-line); }
.smci-review section:first-child { border-top: 0; padding-top: 4px; }
.smci-review header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.smci-review h3 { margin: 0; font: 600 15px/1.3 var(--smci-sans); }
.smci-review dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 6px 14px; margin: 10px 0 0; font-size: 14px; }
.smci-review dt { color: var(--smci-ink-3); }
.smci-review dd { margin: 0; color: var(--smci-ink); overflow-wrap: anywhere; }

/* ── Autorizaciones y firma ─────────────────────────────────────── */

.smci-consent > p:first-child { margin: 0 0 14px; color: var(--smci-ink-2); font-size: 15px; }
.smci-docs { display: grid; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.smci-doc { border: 1.5px solid var(--smci-line); border-radius: 16px; padding: 12px 14px; transition: border-color .15s ease, background-color .15s ease; }
.smci-doc.is-on { border-color: #D9C49E; background: #FFFCF6; }
.smci-doc-head { display: flex; align-items: center; gap: 12px; }
.smci-doc-head > div { flex: 1; min-width: 0; }
.smci-doc-head b { display: block; font-size: 15px; font-weight: 600; }
.smci-doc-head small { font-size: 12.5px; color: var(--smci-ink-3); }
.smci-doc-text { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--smci-line); font-size: 14px; color: var(--smci-ink-2); }
.smci-doc-text p { margin: 0 0 8px; }

.smci-switch {
	position: relative;
	flex: none;
	width: 50px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 99px;
	background: #D6CFC5;
	cursor: pointer;
	transition: background-color .18s ease;
}
.smci-switch span {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	transition: transform .18s ease;
}
.smci-switch[aria-checked="true"] { background: var(--smci-gold-deep); }
.smci-switch[aria-checked="true"] span { transform: translateX(20px); }
.smci-switch:disabled { cursor: default; opacity: .9; }

.smci-consent .smci-label { margin-top: 18px; }
.smci-sig { margin-top: 14px; }
.smci-sig canvas {
	display: block;
	width: 100%;
	height: 170px;
	border: 1.5px dashed #CFC6BA;
	border-radius: 16px;
	background:
		linear-gradient(to top, transparent 44px, #E8E1D6 44px, #E8E1D6 45px, transparent 45px),
		#fff;
	touch-action: none;
	cursor: crosshair;
}
.smci-sig-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 13px; color: var(--smci-ink-3); }

.smci-error {
	margin: 14px 0 0;
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--smci-clay-tint);
	color: #8F3D2B;
	font-size: 14.5px;
	font-weight: 500;
}
.smci-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
/* Campo invisible que sostiene el teclado de iOS al cambiar de pantalla. */
.smci-kbd { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: 16px; pointer-events: none; }

@media (min-width: 640px) {
	.smci-card { padding: 36px 34px 30px; }
	.smci-facts span { font-size: 12.5px; }
}

/* Celular con lada */
.smci-phone { display: flex; gap: 8px; }
.smci-phone .smci-cc { flex: 0 0 auto; width: auto; padding: 0 10px; font-size: 16px; }
.smci-phone input { flex: 1; min-width: 0; }
.smci-help--cc { margin: 8px 0 0 !important; }

/* ── Autorizaciones: lo incluido en "datos de salud" ──────────── */

.smci-more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 44px; /* es lo que deja quitar los recordatorios: blanco de toque completo */
	margin: 10px 0 0;
	padding: 8px 0 4px;
	border: 0;
	border-top: 1px solid var(--smci-line);
	background: none;
	font: 500 13.5px/1.4 var(--smci-sans);
	color: var(--smci-ink-2);
	text-align: left;
	cursor: pointer;
}
.smci-more u { color: var(--smci-gold-deep); font-weight: 600; text-underline-offset: 3px; }
.smci-chev { display: grid; place-items: center; flex: none; color: var(--smci-gold-deep); transition: transform .18s ease; }
.smci-chev.is-open { transform: rotate(180deg); }
.smci-sub { display: grid; gap: 10px; margin: 10px 0 2px; padding: 0; list-style: none; }
.smci-sub > li { padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--smci-line); }
.smci-sub .smci-doc-head b { font-size: 14px; }
.smci-sub .smci-doc-head small { display: block; margin-top: 2px; line-height: 1.4; }
.smci-lock {
	display: grid;
	place-items: center;
	flex: none;
	width: 50px;
	height: 30px;
	border-radius: 99px;
	background: var(--smci-gold-tint);
	color: var(--smci-gold-deep);
}
.smci-doc-head small { display: block; line-height: 1.4; }
.smci-doc-head .smci-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }

/* ── Ya tiene registro o cita, folio y cita al final ──────────── */

.smci-badge--ok { background: var(--smci-jade-tint); color: var(--smci-jade); }
.smci-match .smci-btn { display: flex; width: 100%; margin-top: 10px; }
.smci-match-alt { display: inline-block; margin-top: 14px; }
.smci-cita {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 6px 0 16px;
	padding: 14px 16px;
	border: 1.5px solid #CFE3DA;
	border-radius: 16px;
	background: var(--smci-jade-tint);
	text-align: left;
}
.smci-cita-ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--smci-jade); }
.smci-cita b { display: block; font-size: 16px; }
.smci-cita span { display: block; font-size: 15px; color: var(--smci-ink-2); line-height: 1.45; }
.smci-folio {
	display: grid;
	gap: 2px;
	margin: 0 0 16px;
	padding: 14px 16px;
	border-radius: 16px;
	background: var(--smci-gold-tint);
}
.smci-folio span { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--smci-gold-deep); }
.smci-folio b { font-size: 24px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.smci-folio small { font-size: 13px; color: var(--smci-ink-2); }
.smci-done-next { margin: 4px 0 4px !important; }
.smci-costo { margin: -8px 0 18px; font-size: 14.5px; color: var(--smci-ink-2); }
.smci-privacy { margin: 16px 0 0; }
.smci-privacy a { color: var(--smci-gold-deep); }

/* ── Lote 13-oct (F): firma única ───────────────────────────────── */

.smci-doc-head .smci-sum { color: var(--smci-ink-2); font-size: 13.5px; }
.smci-consent > .smci-docs > .smci-doc:first-child .smci-doc-head b { font-size: 16px; }

/* Menores: quien firma declara que es su tutor (revisión 14-oct, M6). */
.smci-tutor { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; font-size: 15px; line-height: 1.4; min-height: 44px; cursor: pointer; }
.smci-tutor input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: currentColor; }