/* Declarante del hogar: estilos base. Colores, tipografía y controles salen de los tokens --s100-* de
   /static/s100-theme.css (docs/DISENO.md de s100-online); aquí solo hay geometría y su uso. */
:root{font-family:var(--s100-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);color:var(--s100-text);background:var(--s100-canvas);line-height:1.5;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;font-size:var(--s100-fs-body,16px)}
button,input,select,summary{font:inherit}
button,a,input,summary{-webkit-tap-highlight-color:transparent}
button,summary{cursor:pointer}
button:disabled{cursor:default;opacity:.55}
:is(button,a,input,select,summary):focus-visible{outline:3px solid var(--s100-focus);outline-offset:3px}
a{color:var(--s100-link);text-underline-offset:3px}
h1{margin:0 0 12px;font-size:var(--s100-fs-h1,28px);font-weight:700;letter-spacing:-.5px;line-height:1.2;overflow-wrap:anywhere}
h2{margin:0 0 9px;font-size:var(--s100-fs-h2,20px);font-weight:700}
h3{margin:12px 0 7px;font-size:1rem;font-weight:700}
p{margin:8px 0 16px}
small,.field-help{font-size:.88rem;color:var(--s100-muted)}
.field-help{font-size:14px}
.skip{position:absolute;top:-100px;left:12px}
.skip:focus{top:6px;background:var(--s100-surface);z-index:5}
[hidden]{display:none!important}

/* Cabecera propia: solo fuera del trámite. */
.brand{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;min-height:var(--s100-header-h,64px);padding:8px max(16px,calc((100vw - var(--s100-content,640px)) / 2));background:var(--s100-header);color:#fff}
.brand-name{display:flex;align-items:center;gap:14px}
.brand-name>div{display:flex;flex-direction:column}
.brand strong{display:block;font-size:20px;line-height:1.2}
.brand div>span{display:block;font-size:12px;margin-top:3px;color:inherit;opacity:.9}
.brand-icon{font-size:31px;line-height:1;margin:0}

/* Dentro del trámite la entrada S100 marca <html data-s100-tramite> y pone su barra con «Continuar»:
   el módulo no repite cabecera, herramientas de la prueba ni accesos pensados para fuera del trámite. */
html[data-s100-tramite] :is(header.brand,.pilot-tools,#resume-login,.fuera-tramite){display:none!important}
.tramite-next{margin:20px 0 0;padding:14px 16px;border-radius:var(--s100-radius-control,12px);background:var(--s100-soft);color:var(--s100-info);font-weight:700}

main{max-width:var(--s100-content,640px);margin:20px auto 12px;padding:0 16px;overflow-wrap:anywhere}
.panel{background:var(--s100-surface);border:1px solid var(--s100-border);border-radius:var(--s100-radius-card,16px);padding:24px;box-shadow:0 8px 25px #18335a05}
/* Main es destino de lectura tras cambiar de pantalla, no un control. */
main:focus,#app:focus{outline:none}
.eyebrow,.step-line{margin:0 0 8px;font-size:12px;font-weight:650;color:var(--s100-muted)}
.lead{font-size:16px;color:var(--s100-muted)}

/* Botones (DISENO §3): principal relleno negro; secundario blanco con borde. */
.primary,.secondary,.back{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--s100-control-h,52px);padding:13px 16px;border:1px solid var(--s100-border);border-radius:var(--s100-radius-control,12px);background:var(--s100-surface);color:var(--s100-primary);font-size:16px;font-weight:700;line-height:1.35;text-align:center;text-decoration:none}
.primary{width:100%;background:var(--s100-primary);border-color:var(--s100-primary);color:#fff}
.primary:not(:disabled):hover{background:var(--s100-hover);border-color:var(--s100-hover)}
.primary:disabled{opacity:1;background:var(--s100-muted);border-color:var(--s100-muted)}
.text-button{min-height:44px;padding:6px 0;border:0;background:transparent;color:var(--s100-link);font-size:13px;text-decoration:underline;text-underline-offset:3px}
.actions{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--s100-border)}
.actions:has(>span){grid-template-columns:minmax(0,1fr)}
.actions>span:empty{display:none}
/* DISENO §3: la acción principal de un paso siempre se ve sin desplazar; en pantallas largas queda fija abajo. */
#app .actions{position:sticky;bottom:0;z-index:2;padding-bottom:12px;background:var(--s100-surface)}
.secondary-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 18px;margin-top:10px}
.secondary-actions button{min-height:44px;padding:8px 0;border:0;background:transparent;color:var(--s100-link);font-size:14px;text-align:left;text-decoration:underline;text-underline-offset:3px}
.orientation-link{min-height:44px;padding:0;border:0;background:transparent;color:var(--s100-link);font-size:14px;line-height:1.5;text-align:left;text-decoration:underline;text-underline-offset:3px}
.guide-links{margin:14px 0 12px;padding-top:10px;border-top:1px solid var(--s100-border)}
.guide-links a{display:block;min-height:44px;padding:8px 0;font-size:14px}

/* Formularios. */
.field{display:block;margin:16px 0}
.field>span,.field>strong{display:block;margin-bottom:6px;font-weight:600}
input:not([type=checkbox]):not([type=radio]){width:100%;min-height:var(--s100-control-h,52px);padding:12px;border:1px solid var(--s100-muted);border-radius:var(--s100-radius-control,12px);background:var(--s100-surface);color:inherit;font-size:16px}
input[aria-invalid=true]{border-color:#aa4739}
input:is([type=checkbox],[type=radio]){accent-color:var(--s100-primary)}
.required{font-weight:400;color:var(--s100-muted);font-size:.85rem}
.check{display:flex;gap:11px;align-items:flex-start;min-height:48px;padding:12px 0;font-size:15px;line-height:1.5}
.check input{flex:0 0 21px;width:21px;height:21px;margin:2px 0 0}
.name-review{border:0;padding:0;margin:20px 0}
.name-review legend{padding:0;margin-bottom:8px;font-size:var(--s100-fs-h2,20px);font-weight:700}
.name-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.name-grid .field:first-child{grid-column:1/-1}
.name-grid .field{margin:8px 0}
.phone-entry{display:flex;border:1px solid var(--s100-muted);border-radius:var(--s100-radius-control,12px);overflow:hidden}
.phone-entry:focus-within{outline:3px solid var(--s100-focus);outline-offset:3px}
.phone-prefix{display:flex;align-items:center;padding:0 14px;background:var(--s100-canvas);color:var(--s100-muted)}
.phone-entry input{flex:1;min-width:0;border:0!important;border-radius:0!important}
.phone-entry input:focus-visible{outline:none}
.phone-feedback{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0;font-size:14px;color:var(--s100-muted)}
.save-state{min-height:22px;font-size:.82rem;color:var(--s100-success,var(--s100-text))}

/* Avisos y desplegables. */
.note{margin:16px 0;padding:14px 16px;border:0;border-radius:12px;background:var(--s100-soft);color:var(--s100-info);font-size:14px}
.note p:last-child{margin-bottom:0}
.note.warn{background:#fff6e4;color:#6d5227}
.error:empty{display:none}
.error{margin:14px 0;padding:12px 14px;border-left:3px solid #b34d40;border-radius:4px;background:#fff0ee;color:#872f26}
.source-note{font-size:.82rem;color:var(--s100-muted)}
details{margin:12px 0 0;padding:13px 0;border-top:1px solid var(--s100-border)}
summary{display:list-item;min-height:44px;list-style:disclosure-closed inside;color:var(--s100-info);font-size:14px;font-weight:600;line-height:1.5}
details[open]>summary{list-style:disclosure-open}
details p{font-size:.9rem}
details ul{padding-left:21px}

/* Ficha de identidad. */
.identity{margin:18px 0;padding:14px;border:1px solid var(--s100-border);border-radius:12px;background:var(--s100-canvas)}
.card-top{display:flex;justify-content:flex-end;margin-bottom:8px}
.badge{font-size:12px;color:var(--s100-muted)}
.reviewed .badge{color:var(--s100-success,var(--s100-text));font-weight:600}
.identity-body{display:flex;gap:10px;align-items:flex-start}
.identity-mark{display:flex;align-items:center;justify-content:center;flex:0 0 28px;min-height:28px;margin-top:2px;border-radius:8px;background:var(--s100-soft);color:var(--s100-info)}
.identity-mark svg{width:20px;height:20px}
.identity-content{flex:1;min-width:0}
.identity-content>strong{display:block;font-size:17px;line-height:1.3;overflow-wrap:anywhere}
.identity-meta{margin:5px 0;font-size:14px;line-height:1.35;color:var(--s100-muted)}
.identity-source{margin:9px 0 0;font-size:12px;color:var(--s100-muted)}
.identity details{margin-bottom:0}

/* Preparación del celular y QR. */
.prep-grid{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:24px;align-items:center}
.prep-grid>*{min-width:0}
.prep-grid figure{margin:0}
.phone-photo{position:relative;width:220px;max-width:100%;margin:0 auto;overflow:hidden}
.phone-photo.open{aspect-ratio:365/780}
.phone-photo.open img{position:absolute;max-width:none;width:201.37%;height:auto;left:-50.68%;top:-31.41%}
.phone-photo.reader{aspect-ratio:376/750}
.phone-photo.reader img{position:absolute;max-width:none;width:195.48%;height:auto;left:-47.34%;top:-32.8%}
.photo-caption{margin:8px 0;font-size:12px;color:var(--s100-muted);text-align:center}
.perupass-open{display:flex;align-items:center;gap:20px;margin:16px 0 24px}
.perupass-app-icon{display:block;flex:0 0 auto;width:96px;height:96px;object-fit:contain;border-radius:20px}
.perupass-open>div{min-width:0}
.perupass-open p{margin:0}
.qr-region{margin:16px 0;text-align:center}
.qr{display:block;width:260px;max-width:100%;aspect-ratio:1;margin:0 auto}
.waiting{text-align:center;color:var(--s100-muted)}
.countdown{font-variant-numeric:tabular-nums;text-align:center}
.qr-help{margin-top:24px}
.qr-help-buttons{display:flex;flex-wrap:wrap;gap:12px}
.qr-help-buttons>button{flex:1 1 210px;min-height:48px;padding:12px 16px}
.qr-help-buttons>button[aria-expanded="true"]{background:var(--s100-soft)}
.qr-help-panel{margin-top:14px;padding:20px 22px;border-radius:14px;background:var(--s100-soft)}
.qr-help-panel>ol{margin:0;padding-left:22px}
.qr-help-panel>ol>li{margin:0 0 16px;padding-left:4px}
.qr-help-panel>ol>li:last-child{margin-bottom:0}
.qr-help-panel ul{margin:10px 0 14px;padding-left:22px}
.qr-help-panel ul>li{margin:3px 0}
.qr-help-panel .qr-data-use{color:var(--s100-info)}
.qr-help-panel .guide-links{margin:18px 0 0}

/* Instalación de Perú Pass. */
.installation-steps{margin:20px 0;padding-left:24px}
.installation-steps>li{margin:0 0 18px;padding-left:4px}
.installation-steps strong{font-size:16px}
.installation-steps p{margin:5px 0 0;font-size:14px;color:var(--s100-muted)}
.store-links{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:12px 0}
.store-links .secondary{min-height:48px;font-size:14px}
.installation-next{margin-top:20px;padding-top:20px;border-top:1px solid var(--s100-border)}
.installation-next .secondary{width:100%}

/* Bienvenida y pie. */
.view-welcome>.actions{margin:0;padding:0;border:0}
.view-welcome>.check{margin:15px 0;padding:0;font-size:14px}
.view-welcome>.check input{margin-top:1px}
.view-welcome>.primary{margin:0}
.site-bottom{display:flex;flex-direction:column;max-width:var(--s100-content,640px);margin:24px auto 0;padding:0 16px 26px;color:var(--s100-muted);font-size:.82rem;text-align:center}
.site-bottom .help-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;color:var(--s100-text);font-size:14px;font-weight:600}
.site-bottom #resume-login{display:none;margin-top:4px}
body:has(.view-welcome) .site-bottom #resume-login{display:inline-flex;justify-content:center;align-items:center}

/* Consentimiento: detalles y acciones secundarias bajo demanda. */
.consent-header{font-size:15px;line-height:1.6;margin-bottom:18px}
.legal-item{margin:14px 0}
#app .review-actions .actions{position:static;margin:0;padding:0;border:0}
.view-consent .notification-choice small{overflow-wrap:anywhere}
.view-consent .review-next li{margin-bottom:12px;font-size:14px}
.view-consent .legal-item h3{font-size:16px}
.view-consent .review-decision details{margin-top:8px}
.view-consent .review-decision details p{font-size:14px}

/* Dictado del teléfono (phone-dictation.js). */
.voice-panel{margin:12px 0;padding:12px 14px;border-radius:8px;background:var(--s100-soft)}
.voice-panel .secondary{margin:5px 8px 5px 0}
.voice-candidate strong{display:block;font-size:1.25rem;letter-spacing:.08em}
.voice-privacy{font-size:.85rem;color:var(--s100-muted)}

/* Diálogos y ayuda con imágenes (dnid-help.js). */
dialog{width:calc(100% - 28px);max-width:600px;max-height:90dvh;padding:22px;border:1px solid var(--s100-border);border-radius:18px;color:inherit;overflow:auto}
dialog::backdrop{background:#18344266}
dialog header{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:12px}
dialog .secondary{width:auto;min-height:44px}
.dnid-help{max-width:880px;width:calc(100% - 20px);padding:0}
.dnid-help-shell{display:flex;flex-direction:column;max-height:90dvh}
.dnid-help-header{display:flex;justify-content:space-between;gap:14px;padding:15px 18px}
.dnid-help-header h1{margin:0;font-size:1.2rem}
.dnid-help-close,.dnid-help-choices button,.dnid-help-navigation button{min-height:44px;padding:10px 14px;border:1px solid var(--s100-border);border-radius:var(--s100-radius-control,12px);background:var(--s100-surface);color:var(--s100-primary);font-weight:600}
.dnid-help-choices,.dnid-help-navigation,.dnid-help-links{display:flex;gap:10px;flex-wrap:wrap}
.dnid-help-choices,.dnid-help-notice,.dnid-help-progress{padding:0 18px}
.dnid-help-notice,.dnid-help-progress{margin:8px 0;font-size:.85rem}
.dnid-help-body{min-height:0;padding:0 18px;overflow:auto}
.dnid-help-image{display:block;width:100%;max-width:735px;height:auto;margin:auto}
.dnid-help-footer{padding:12px 18px;border-top:1px solid var(--s100-border)}
.dnid-help-navigation{justify-content:space-between}
.dnid-help-links{margin-top:10px;font-size:.8rem}
.dnid-help-choices button[aria-pressed=true]{background:var(--s100-soft)}

@media (max-width:680px){
  .site-bottom{padding-left:18px;padding-right:18px}
  main{margin:14px auto 12px;padding:0 12px}
  .panel{padding:21px 18px}
  .actions{gap:10px}
  .actions .primary{padding:13px 14px}
  .actions .back{padding:13px 12px}
  .identity{padding:12px}
}
@media (max-width:600px){
  h1{font-size:var(--s100-fs-h1,24px)}
}
@media (max-width:560px){
  .prep-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .name-grid{grid-template-columns:minmax(0,1fr)}
  .name-grid .field:first-child{grid-column:auto}
  .identity-body{gap:8px}
  .phone-prefix{padding:0 11px}
  .dnid-help-header{padding:12px}
  .dnid-help-header h1{font-size:1.1rem}
  .dnid-help-header .eyebrow{display:none}
  .dnid-help-close{flex-shrink:0;padding:8px}
  .qr{width:230px}
}
@media (max-width:520px){
  .brand{padding:8px 16px}
  .brand strong{font-size:19px}
  .store-links{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:500px){
  .perupass-open{align-items:flex-start;gap:14px}
  .perupass-app-icon{width:72px;height:72px;border-radius:16px}
  .qr-help-buttons>button{flex-basis:100%}
  .qr-help-panel{padding:18px 16px}
}
@media (max-width:360px){
  main{margin-inline:auto;padding:0 10px}
  .panel{padding:20px 16px}
}