/* Scoped to the current, display-only onboarding screens. Dimensions follow
   DantaApplicationTheme / DantaFlowComponents at a 390px mobile canvas. */
.dui-flow { padding:.5em 1em 0; }
.dui-flow>.dui-heading { flex:none; min-height:2.6em; margin:0 0 .7em; }
.dui-flow>.dui-heading h2 { font-size:1.375em; }
.dui-flow>.dui-heading:has(h2:empty) { display:none; }
.dui-flow-content { flex:1; min-height:0; overflow:hidden; }
.dui-flow-content.is-centered { display:flex; flex-direction:column; justify-content:center; }
.dui-flow-content>h3 { font-size:1.2em; margin:.5em 0 .75em; }
.dui-flow p { margin:.6em 0; }
.dui-flow-progress { flex:none; margin:0 .25em 1em; }
.dui-flow-progress>small { color:var(--dui-muted); font-size:.875em; }
.dui-flow-progress>div { display:flex; gap:.625em; margin:.75em 0 .2em; }
.dui-flow-progress>div>span { flex:1; color:var(--dui-muted); }
.dui-flow-progress i { display:block; height:.3125em; margin-bottom:.625em; border-radius:1em; background:var(--dui-line); }
.dui-flow-progress .is-done { color:var(--dui-ink); }
.dui-flow-progress .is-done i { background:var(--dui-ink); }
.dui-flow-progress .is-current { font-weight:700; }
.dui-flow-progress>b { display:block; font-size:.875em; }
.dui-flow-actions { flex:none; display:flex; gap:.6em; padding:.65em 0 .4em; }
.dui-flow-action { display:flex; align-items:center; justify-content:center; gap:.5em; min-height:3em; padding:.75em 1.15em; border:1px solid var(--dui-ink); border-radius:3em; background:var(--dui-ink); color:white; text-align:center; line-height:1.2; font-weight:700; }
.dui-flow-action.is-secondary { color:var(--dui-ink); background:transparent; border-color:var(--dui-line); }
.dui-flow-action.is-text { color:var(--dui-ink); background:transparent; border-color:transparent; }
.dui-action-unavailable>.dui-flow-action { color:var(--dui-muted); background:var(--dui-line); border-color:var(--dui-line); }
.dui-flow-actions>.dui-flow-action { flex:1; }
.dui-flow-actions.is-stacked { flex-direction:column; gap:.5em; }
.dui-flow-field { position:relative; margin:1em 0; padding:1.125em 1em; background:white; border:1px solid var(--dui-line); border-radius:1em; }
.dui-flow-field>small { position:absolute; top:-.7em; left:1em; max-width:calc(100% - 2em); padding:0 .25em; background:white; color:var(--dui-muted); font-size:.75em; }
.dui-flow-field>div { display:flex; justify-content:space-between; align-items:center; gap:.6em; min-height:1.25em; }
.dui-flow-field .dui-icon { width:1.1em; height:1.1em; }
.dui-flow-field>em { position:absolute; left:1.2em; bottom:-1.6em; font-style:normal; font-size:.69em; color:var(--dui-muted); }
.dui-flow-field.has-hint { margin-bottom:2.3em; }
.dui-select-chevron { transform:rotate(90deg); }
.dui-flow-field.is-focused { border-color:var(--dui-ink); box-shadow:inset 0 0 0 1px var(--dui-ink); }
.dui-secret { letter-spacing:.15em; }
.dui-flow-intro { margin:0 0 1.5em; }
.dui-flow-intro-icon { display:grid; place-items:center; width:2.75em; height:2.75em; border-radius:.94em; background:var(--dui-soft); color:var(--dui-ink); margin-bottom:1em; }
.dui-flow-intro h3 { font-size:1.5em; }
.dui-flow-intro p { margin:.5em 0 0; color:var(--dui-muted); line-height:1.45; }
.dui-flow-intro.is-compact { display:flex; align-items:flex-start; gap:.75em; margin:0 0 .75em; }
.dui-flow-intro.is-compact .dui-flow-intro-icon { width:1.75em; height:1.75em; flex:none; border-radius:0; background:transparent; margin:0; }
.dui-flow-intro.is-compact h3 { font-size:1.25em; }
.dui-flow-card { background:white; border:1px solid var(--dui-line); border-radius:1em; padding:.9em; margin:1em 0; }
.dui-flow-card h3 { font-size:1.25em; }
.dui-flow-card>.dui-flow-field:first-child { margin-top:0; }
.dui-flow-card>.dui-flow-action { margin-top:1em; }
.dui-flow-card>p { color:var(--dui-muted); }
.dui-flow-summary { padding:1em; margin:1em 0; border-radius:1.5em; background:var(--dui-soft); }
.dui-flow-summary>small { color:var(--dui-muted); }
.dui-flow-summary>h3 { margin:.4em 0; }
.dui-flow-summary .dui-flow-intro { margin-bottom:0; }
.dui-flow-text-link { display:block; margin:.65em 0; color:var(--dui-ink); font-size:.875em; font-weight:700; }
.dui-flow-notice { display:flex; gap:.65em; padding:1em; margin:1em 0; border-radius:1em; background:var(--dui-soft); }
.dui-flow-notice>.dui-icon { width:1.25em; height:1.25em; }
.dui-flow-gate { display:flex; flex:none; align-items:center; margin:.4em -.5em 0; border-top:1px solid var(--dui-line); padding:.55em 0 .25em; }
.dui-flow-gate>span { display:flex; flex:1; flex-direction:column; align-items:center; color:var(--dui-muted); gap:.3em; font-size:.8125em; }
.dui-flow-gate .is-selected { color:var(--dui-ink); font-weight:700; }
.dui-flow-gate .is-selected>.dui-icon { background:var(--dui-soft); border-radius:.3em; }
.dui-account-options { display:grid; gap:.75em; margin:1.5em 0; }
.dui-account-option { display:flex; align-items:center; gap:.75em; padding:.875em; border:1px solid var(--dui-line); border-radius:1em; }
.dui-account-option.is-selected { border:1.5px solid var(--dui-ink); background:var(--dui-soft); }
.dui-account-option>div { flex:1; }
.dui-account-option small { display:block; margin-top:.25em; color:var(--dui-muted); font-size:.78125em; }
.dui-account-option>i { display:grid; place-items:center; width:1.25em; height:1.25em; border:1px solid var(--dui-muted); border-radius:50%; flex:none; }
.dui-account-option.is-selected>i { color:white; background:var(--dui-ink); border-color:var(--dui-ink); }
.dui-account-option>i>.dui-icon { width:1em; height:1em; }
.dui-password-rules { display:grid; grid-template-columns:1fr 1fr; gap:.35em .5em; padding:.8em; background:var(--dui-soft); border-radius:.75em; font-size:.75em; }
.dui-password-rules>span { display:flex; align-items:center; gap:.3em; }
.dui-password-rules .dui-icon { width:1em; height:1em; color:var(--dui-accent); }
.dui-referral-scan { display:flex; align-items:center; justify-content:center; gap:.5em; padding:.7em; border:1px solid var(--dui-line); border-radius:2em; }
.dui-biometry { display:flex; gap:.75em; align-items:center; }
.dui-biometry>div { flex:1; }
.dui-biometry small { display:block; margin-top:.5em; color:var(--dui-muted); }
.dui-flow-switch { position:relative; width:2.6em; height:1.5em; border:1px solid var(--dui-muted); border-radius:1em; background:var(--dui-line); }
.dui-flow-switch::before { content:''; position:absolute; width:.9em; height:.9em; background:var(--dui-muted); border-radius:50%; left:.2em; top:.23em; }
.dui-pin-center { padding:1.25em .25em; text-align:center; }
.dui-pin-lock { display:grid; place-items:center; margin:0 auto 1.25em; width:4.5em; height:4.5em; border-radius:1.375em; background:var(--dui-ink); color:white; box-shadow:0 .6em 1.5em #0002; }
.dui-pin-lock>.dui-icon { width:2.125em; height:2.125em; }
.dui-pin-badge { display:inline-block; padding:.5em 1em; border-radius:2em; background:var(--dui-soft); font-size:.69em; font-weight:700; letter-spacing:.06em; }
.dui-pin-center h2 { font-size:1.625em; margin:.75em 0 .4em; }
.dui-pin-center p { color:var(--dui-muted); font-size:.9375em; }
.dui-pin-steps { display:flex; gap:.625em; margin:1.375em 0 .875em; }
.dui-pin-steps>span { flex:1; display:flex; justify-content:center; align-items:center; gap:.45em; padding:.7em; border-radius:1em; background:var(--dui-soft); font-weight:700; }
.dui-pin-steps>span.is-current { background:var(--dui-ink); color:white; }
.dui-pin-steps>span.is-complete { background:#1f7a4d; color:white; }
.dui-pin-steps .dui-icon { width:1.1em; height:1.1em; }
.dui-pin-center .dui-flow-card { padding:1.35em 1em; border-radius:1.75em; }
.dui-pin-digits { display:flex; gap:.45em; margin:1em 0; }
.dui-pin-digits>span { display:grid; flex:1; place-items:center; height:2.8em; border:1px solid var(--dui-muted); border-radius:.6em; }
.dui-pin-center>small:last-child { color:var(--dui-muted); }
.dui-pin-center>small>.dui-icon { width:1em; height:1em; }
.dui-email-gate { text-align:center; padding:1em .5em; }
.dui-email-gate>.dui-icon { width:4em; height:4em; margin-bottom:1em; }
.dui-email-gate h2 { font-size:1.375em; }
.dui-email-gate p { margin:1em 0; font-size:.9375em; }
.dui-email-gate>.dui-flow-action { margin-top:.6em; }
.dui-birthdate { display:flex; gap:.5em; }
.dui-birthdate>.dui-flow-field { flex:1; min-width:0; padding:.75em .5em; }
.dui-birthdate .dui-icon { width:.65em; }
.dui-lookup-status { font-size:.85em; color:var(--dui-muted); }
.dui-photo-tile { padding:.7em; margin:.65em 0; border:1px solid var(--dui-line); border-radius:.75em; }
.dui-photo-tile>b { display:block; }
.dui-photo-tile>small { display:block; color:var(--dui-muted); margin:.3em 0 .55em; font-size:.75em; }
.dui-photo-tile>div { display:flex; align-items:center; justify-content:space-between; gap:.3em; font-size:.75em; }
.dui-photo-tile>div>span { display:flex; align-items:center; gap:.3em; }
.dui-photo-tile .is-loaded { color:var(--dui-inflow); }
.dui-photo-tile .dui-icon { width:1em; height:1em; }
.dui-photo-tile i { border:1px solid var(--dui-line); padding:.55em .8em; border-radius:2em; font-style:normal; font-weight:700; }
.dui-flow-content:has(.dui-photo-tile)>.dui-flow-card { margin:.25em 0; padding:.65em; }
.dui-flow-content:has(.dui-photo-tile)>.dui-flow-intro p { font-size:.875em; }
.dui-flow-content .dui-photo-tile { padding:.6em; margin:.45em 0; }
.dui-flow-content .dui-photo-tile>small { margin:.2em 0 .4em; }
.dui-submission { display:block; text-align:center; margin-top:.75em; color:var(--dui-muted); }
.dui-privacy { padding:1.75em 1.5em .5em; }
.dui-privacy p { font-size:.875em; }
.dui-privacy .dui-flow-actions { padding-top:1.1em; }
.dui-flow-scroll-hint { flex:none; text-align:center; color:var(--dui-muted); padding:.6em; border-top:1px solid var(--dui-line); }
.dui-recovery { position:relative; padding:0; justify-content:center; }
.dui-recovery-backdrop { position:absolute; inset:0; opacity:.25; pointer-events:none; }
.dui-recovery-dialog { position:relative; z-index:1; padding:1.5em; margin:0 1em; border-radius:1.5em; background:var(--dui-paper); box-shadow:0 0 0 100vw #173f314a; }
.dui-recovery-dialog>p { font-size:.875em; }
.dui-recovery-dialog .dui-flow-field { margin:.6em 0; }
.dui-recovery-dialog .dui-flow-actions { padding-bottom:0; }
.dui-flow-check { display:flex; align-items:flex-start; gap:.75em; padding:.5em 0; font-size:.875em; }
.dui-flow-check>i { display:grid; place-items:center; flex:none; width:1.15em; height:1.15em; margin-top:.15em; border:1px solid var(--dui-muted); border-radius:.2em; }
.dui-flow-check>i.is-checked { background:var(--dui-ink); color:white; border-color:var(--dui-ink); }
.dui-flow-check .dui-icon { width:1em; height:1em; }
.dui-processing { justify-content:center; padding:1.5em; text-align:center; }
.dui-processing .dui-mark { width:4em; height:4em; }
.dui-flow-spinner { display:block; width:2em; height:2em; margin:1.5em auto; border:3px solid var(--dui-line); border-top-color:var(--dui-accent); border-radius:50%; }
.dui-tutorial-screen.is-active .dui-flow-spinner, .dui-preview-screen .dui-flow-spinner { animation:dui-orbit 1s linear infinite; }
.dui-account-ready { height:100%; position:relative; }
.dui-favorites-empty { display:flex; align-items:center; gap:.6em; padding:.9em 1em; margin:1em 0; border:1px solid var(--dui-line); border-radius:1.125em; }
.dui-flow-toast { position:absolute; z-index:6; bottom:1em; left:1em; right:1em; padding:.85em 1em; display:flex; align-items:center; gap:.5em; color:white; background:var(--dui-ink); border-radius:.8em; box-shadow:0 .3em 1em #0002; font:400 .85em/1.4 var(--dui-font); }
.dui-account-ready>.dui-flow-toast { bottom:5.75em; font-size:3.5cqw; }
.dui-access { position:relative; display:flex; flex-direction:column; justify-content:center; padding:1.4em 1.35em .7em; background:#103d30; color:white; }
.dui-access::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 120% 38%,#2c996651,transparent 65%); pointer-events:none; }
.dui-access>* { position:relative; }
.dui-access-wordmark { width:12em; height:3.7em; object-fit:contain; filter:brightness(0) invert(1); margin:0 auto 1.6em; }
.dui-access-hero { position:relative; margin:0 .25em 1.5em; }
.dui-access-hero h2 { font-size:2.6em; line-height:1.06; letter-spacing:-.043em; }
.dui-access-hero p { color:#d7e9de; font-size:.85em; margin-top:.75em; }
.dui-access-trail { position:absolute; right:.4em; top:.15em; width:4em; height:7em; color:#b8d8c4; opacity:.8; }
.dui-access-trail>span { position:absolute; width:1.4em; height:1.4em; }
.dui-access-trail>span:nth-child(1) { bottom:0; right:1.8em; transform:rotate(10deg); }
.dui-access-trail>span:nth-child(2) { bottom:2.2em; right:0; transform:rotate(15deg); }
.dui-access-trail>span:nth-child(3) { top:0; right:1.4em; transform:rotate(25deg); }
.dui-access-trail svg { width:100%; height:100%; }
.dui-access-panel { padding:1.5em 1.5em .9em; border-radius:1.625em; border:1px solid var(--dui-line); color:var(--dui-ink); background:var(--dui-paper); }
.dui-access-panel h3 { font-size:1.5em; }
.dui-access-panel>p { font-size:.875em; color:var(--dui-muted); margin:.45em 0 1.1em; }
.dui-access-method { display:flex; align-items:center; justify-content:center; gap:.65em; padding:1em .5em; border:1px solid var(--dui-line); border-radius:1em; margin-top:.7em; background:white; font-weight:700; font-size:.875em; }
.dui-access-method>img { width:1.4em; height:1.4em; }
.dui-access-method>.dui-icon { width:1.4em; height:1.4em; }
.dui-access-account { display:flex; align-items:center; gap:.7em; background:var(--dui-soft); padding:.65em; margin-top:1em; border-radius:.75em; font-size:.8em; }
.dui-access-create { display:flex; align-items:center; justify-content:center; gap:.5em; font-weight:700; padding:.85em .1em .25em; margin-top:.25em; }
.dui-access-create.is-cued { text-decoration:underline; text-underline-offset:.3em; }
.dui-access-create>.dui-icon { width:1.05em; height:1.05em; }
.dui-access-footer { text-align:center; padding:1.3em 0 .5em; color:#e0ebe3; }
.dui-access-footer>.dui-icon { width:1.15em; height:1.15em; margin-right:.3em; }
.danta-device[data-current-screen="acceso"] .dui-status { background:#103d30; color:white; }
.danta-device[data-current-screen="acceso"] .dui-viewport { background:#103d30; }
.danta-device[data-current-screen="acceso"] .dui-home-indicator { background:white; }
.dui-tutorial-screen { position:absolute; inset:11cqw 0 6cqw; visibility:hidden; opacity:0; overflow:hidden; transition:opacity .28s ease; }
.dui-tutorial-screen.is-active { visibility:visible; opacity:1; }
.tutorial-player-root[data-phone-design="current"] .tutorial-step:not(.is-active):focus { outline:none; }
.tutorial-player-root[data-phone-design="current"] .tutorial-phone-sticky .danta-device { width:min(390px, calc((100svh - 145px) * .4875)); }
.tutorial-player-root[data-phone-design="current"] .tutorial-phone-caption { bottom:3svh; }
.tutorial-player-root[data-phone-design="current"] .tutorial-phone-glow { background:radial-gradient(circle at 34% 25%,#ffffffb3,transparent 17%),linear-gradient(145deg,#2c996621,#d8f0e2eb); }
@media(min-width:901px) {
  .tutorial-player-root[data-phone-design="current"] .tutorial-phone-sticky { top:85px; height:calc(100svh - 150px); align-items:start; padding-top:12px; }
  .tutorial-player-root[data-phone-design="current"] .tutorial-phone-sticky .danta-device { width:min(370px,calc((100svh - 235px) * .4875)); }
  .tutorial-player-root[data-phone-design="current"] .tutorial-phone-caption { left:50%; right:auto; bottom:12px; transform:translateX(-50%); width:max-content; text-align:center; }
}
@media(max-width:900px) {
  .tutorial-player-root[data-phone-design="current"] .tutorial-phone-sticky .danta-device { width:min(250px, calc(51svh * .4875)); border-width:6px; border-radius:34px; }
  .tutorial-player-root[data-phone-design="current"] .dui-viewport { border-radius:28px; }
  .tutorial-player-root[data-phone-design="current"] .dui-island { height:13px; top:6px; }
  .tutorial-player-root[data-phone-design="current"] .tutorial-step { padding-top:calc(var(--header-height) + 53svh); padding-bottom:70px; }
  .tutorial-player-root[data-phone-design="current"] .tutorial-step h2 { font-size:clamp(1.6rem,6vw,2.5rem); }
  .tutorial-player-root[data-phone-design="current"] .tutorial-step-tips { margin-bottom:0; }
}