/* El atributo hidden siempre gana: varias clases de este archivo y de landing.css fijan display. */
[hidden] { display: none !important; }

/* Súmate · flujo de registro por pasos. Usa los tokens de colors_and_type.css y las piezas de landing.css
   (botones, campos, chips .theme). Mobile-first: la mayoría llega por QR desde el teléfono. */

body.sm { background: var(--rosa); min-height: 100svh; display: flex; flex-direction: column; }

.sm-top { position: relative; background: var(--petroleo); overflow: hidden; }
.sm-top__bg { position: absolute; inset: 0; background-size: cover; background-position: center 35%; }
.sm-top__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,38,47,.6), rgba(6,38,47,.85)); }
.sm-top__inner { position: relative; display: flex; justify-content: center; padding: calc(22px + env(safe-area-inset-top)) 22px 64px; }
.sm-top__logo { width: 180px; max-width: 52vw; filter: drop-shadow(0 8px 24px rgba(0,0,0,.4)); }

.sm-main { flex: 1; padding: 0 16px 32px; margin-top: -44px; position: relative; }
.sm-card {
  max-width: 560px; margin: 0 auto; background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); padding: 24px 20px 28px;
}
@media (min-width: 560px) { .sm-card { padding: 34px 36px 38px; } }

.sm-progress { margin-bottom: 22px; }
.sm-progress[hidden] { display: none; }
.sm-progress__bar { height: 8px; border-radius: var(--r-pill); background: var(--rosa); overflow: hidden; }
.sm-progress__bar span { display: block; height: 100%; width: 0; background: var(--magenta); border-radius: inherit; transition: width .35s ease; }
.sm-progress__txt { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--ink-soft); letter-spacing: .02em; }

.sm-step { display: none; }
.sm-step.is-on { display: block; animation: sm-in .28s ease; }
@keyframes sm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sm-step.is-on { animation: none; } .sm-progress__bar span { transition: none; } }

.sm-h { color: var(--petroleo); font-size: clamp(26px, 6.4vw, 38px); line-height: 1.08; margin-bottom: 12px; }
.sm-h:focus { outline: none; }
.sm-p { color: var(--ink-soft); font-size: 16px; line-height: 1.55; margin: 0 0 20px; }
.sm-step .lead { font-size: 18px; margin: 0 0 22px; }
.sm-opt { color: var(--ink-soft); font-weight: 600; font-size: 13px; }

.sm-list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 12px; }
.sm-list li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--petroleo); font-size: 15.5px; }
.sm-list li span { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--rosa); color: var(--magenta); display: flex; align-items: center; justify-content: center; }
.sm-list svg { width: 21px; height: 21px; }

/* Captura de la credencial */
.sm-drop { display: block; text-align: center; }
.sm-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
button.sm-drop__frame { font: inherit; color: inherit; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.sm-drop__frame {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1.586; width: 100%; border-radius: var(--r-md);
  border: 2px dashed var(--rosa-mid); background: #fffafc; transition: border-color .15s ease, background .15s ease;
}
.sm-drop__frame::before, .sm-drop__frame::after { content: ""; position: absolute; width: 34px; height: 34px; border: 4px solid var(--magenta); }
.sm-drop__frame::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.sm-drop__frame::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.sm-drop__frame:hover, .sm-drop__frame:focus-visible { border-color: var(--magenta); background: #fff; }
.sm-drop__frame:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(244,56,144,.28); }
.sm-drop__ico { width: 66px; height: 66px; border-radius: 50%; background: var(--magenta); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 26px -12px rgba(244,56,144,.7); }
.sm-drop__ico svg { width: 30px; height: 30px; }
.sm-drop__txt { display: block; margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
.sm-drop__txt b { display: block; color: var(--petroleo); font-size: 16px; margin-bottom: 2px; }
.sm-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sm-solo-guia { display: none; }
.sm-shot--guia .sm-solo-guia { display: inline; }
.sm-shot--guia .sm-solo-sin-guia { display: none; }
/* Respaldo de la cámara guiada: el flujo de siempre (cámara del sistema o galería). */
.sm-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.sm-alt__btn { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 8px 10px;
  border: 2px solid var(--rosa-mid); border-radius: var(--r-pill); font-size: 14px; font-weight: 700; color: var(--petroleo); cursor: pointer; line-height: 1.2; }
.sm-alt__btn:hover { border-color: var(--petroleo); }
.sm-alt__btn:focus-within { outline: 3px solid var(--petroleo); outline-offset: 2px; }
.sm-liga { margin: -4px 0 14px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--rosa); color: var(--petroleo); font-weight: 600; font-size: 15px; line-height: 1.45; }
.sm-liga[hidden] { display: none; }

.sm-prev { margin: 0; }
/* La foto toma el lugar del recuadro, con la misma forma de credencial: la página no se alarga. */
.sm-prev img { display: block; width: 100%; aspect-ratio: 1.586; object-fit: cover; border-radius: var(--r-md); box-shadow: var(--shadow-soft); background: var(--rosa); }
.sm-prev .sm-retake { width: 100%; margin-top: 14px; min-height: 48px; }
.sm-checks { margin-top: 14px; display: grid; gap: 8px; }
.sm-chk { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.4; padding: 10px 12px; border-radius: var(--r-sm); }
.sm-chk svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.sm-chk--ok { background: rgba(10,165,165,.1); color: #08706f; }
.sm-chk--warn { background: rgba(244,200,76,.22); color: #6b4e00; }
.sm-chk--bad { background: rgba(226,59,84,.1); color: #b0223a; }
.sm-busy { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink-soft); padding: 10px 0; }
.sm-spin { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--rosa-mid); border-top-color: var(--magenta); animation: sm-rot .8s linear infinite; }
@keyframes sm-rot { to { transform: rotate(360deg); } }

/* Navegación entre pasos */
.sm-nav { display: flex; gap: 12px; margin-top: 26px; }
.sm-nav .btn { flex: 1; min-height: 54px; }
.sm-nav .btn--primary { flex: 2; }
.sm-back { background: transparent; color: var(--petroleo); border-color: var(--rosa-mid); }
.sm-back:hover { border-color: var(--petroleo); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn:focus-visible, .theme:focus-within, .sm-check:focus-within, .sm-switch:focus-within { outline: 3px solid var(--petroleo); outline-offset: 2px; }

/* Contacto */
.sm-fs { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.sm-fs > legend { padding: 0; }
.sm-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sm-chips--3 { grid-template-columns: repeat(3, 1fr); }
.sm-chips .theme { justify-content: center; padding: 12px 10px; font-size: 14px; min-height: 48px; }
.sm-red { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sm-red__ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--rosa); color: var(--petroleo); display: flex; align-items: center; justify-content: center; }
.sm-red__ico svg { width: 20px; height: 20px; }
.sm-red .input { min-height: 48px; }

.sm-switch { display: flex; align-items: center; gap: 12px; margin: -8px 0 22px; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--petroleo); }
.sm-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sm-switch__ui { flex: none; position: relative; width: 48px; height: 28px; border-radius: var(--r-pill); background: var(--rosa-mid); transition: background .15s ease; }
.sm-switch__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(10,60,73,.25); transition: transform .15s ease; }
.sm-switch input:checked + .sm-switch__ui { background: var(--turquesa); }
.sm-switch input:checked + .sm-switch__ui::after { transform: translateX(20px); }

/* Consentimiento */
.sm-consent { margin: 4px 0 18px; display: grid; gap: 12px; }
.sm-check { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.45; color: var(--petroleo); cursor: pointer; }
.sm-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--magenta); }
.sm-check a { color: var(--magenta); font-weight: 700; }
.sm-check .req { color: var(--magenta); }
.sm-consent__err { margin-top: -4px; }
.sm-consent.is-error .sm-consent__err { display: block; }
.sm-consent.is-error [data-field="privacidad"] { color: #b0223a; }
.sm-captcha { min-height: 0; margin-bottom: 4px; display: flex; justify-content: center; }
.sm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.sm-done { text-align: center; }
.sm-done__ico { width: 84px; height: 84px; margin: 6px auto 18px; border-radius: 50%; background: rgba(10,165,165,.12); color: var(--turquesa); display: flex; align-items: center; justify-content: center; }
.sm-done__ico svg { width: 46px; height: 46px; }

/* El toast de la landing asoma unos píxeles cuando está oculto: aquí se esconde del todo. */
.sm .toast { visibility: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s linear .35s; }
.sm .toast.show { visibility: visible; transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s; }

.sm-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); font-size: 13px; color: var(--ink-soft); }
.sm-foot a { color: var(--petroleo); font-weight: 700; }