*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--canvas);scroll-padding-top:calc(var(--sat) + 72px);scroll-padding-bottom:calc(var(--sab) + 96px)}
body{margin:0;min-height:100%;overflow-x:clip;background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.4;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;padding-left:var(--sal);padding-right:var(--sar)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-user-select:none;user-select:none}
a{color:var(--tint);text-decoration:none}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ic{width:22px;height:22px;flex:none;display:block}
.mono,.folio{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.wordmark{font-family:var(--font-brand);font-weight:800;font-stretch:75%;letter-spacing:.02em;color:var(--blue);line-height:1}
:root[data-theme="dark"] .wordmark{color:#E8EBF2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wordmark{color:#E8EBF2}}
.warn-t{color:var(--warn)}
.center{text-align:center}
html.sheet-open,html.sheet-open body,html.is-busy body{overflow:hidden}

/* Banda corrugada (motivo de marca tomado de los documentos) */
.band{height:6px;border-radius:var(--r-2xs);position:relative;overflow:hidden;
  background:repeating-linear-gradient(90deg,var(--blue) 0 9px,var(--blue-d) 9px 12px,var(--blue-m) 12px 14px)}
.band::after{content:"";position:absolute;right:0;top:0;bottom:0;width:22%;background:repeating-linear-gradient(90deg,var(--brand-orange) 0 9px,var(--brand-orange-d) 9px 12px,var(--brand-orange-m) 12px 14px)}
.band.slim{height:4px;width:96px;margin:18px auto 0}

/* Pantalla de carga = apertura de la app (ui/components/opening.js). Sobria: sobre el fondo de la app aparecen el
   logotipo y el nombre con un desvanecido breve y una línea fina indica la carga; la razón social va al pie. Cuando la
   app está lista (.sp-exit) la línea se completa y la pantalla se desvanece. Las animaciones de entrada usan fill
   «backwards»: al terminar no retienen valores y la salida usa transiciones. Al recargar en la misma sesión
   (html.sp-warm) no hay entrada: solo se desvanece (.out). */
#splash{position:fixed;inset:0;z-index:var(--z-splash);background:var(--canvas);display:grid;place-items:center;transition:opacity .28s ease}
#splash.out{opacity:0;pointer-events:none}
.sp-inner{display:flex;flex-direction:column;align-items:center;padding:24px;text-align:center;transition:opacity .2s ease .14s,transform .34s var(--ease) .08s}
.sp-mark{width:72px;height:72px;object-fit:contain;animation:spRise .5s var(--ease) .04s backwards}
.sp-word{font-size:28px;margin-top:14px;animation:spRise .5s var(--ease) .14s backwards}
.sp-line{width:112px;height:2px;margin-top:22px;border-radius:1px;background:var(--line-2);overflow:hidden;animation:spFade .35s ease .26s backwards}
.sp-line i{display:block;height:100%;background:var(--tint);transform-origin:left center;transform:scaleX(.82);
  animation:spLoad .62s cubic-bezier(.3,.6,.2,1) .26s backwards;transition:transform .22s ease}
.sp-legal{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 28px);text-align:center;font-size:11px;font-weight:600;letter-spacing:.2em;padding-left:.2em;color:var(--muted);animation:spFade .5s ease .32s backwards;transition:opacity .2s ease .14s}
.sp-msg{max-width:300px;color:var(--ink-2);font-size:var(--fs-subhead);margin:16px 0 0}
.sp-msg:empty{display:none}
#splash.err .sp-line{display:none}
@keyframes spRise{from{opacity:0;transform:translateY(6px)}}
@keyframes spFade{from{opacity:0}}
@keyframes spLoad{from{transform:scaleX(0)}}
/* Salida escalonada (sin bloquear los toques): la línea se completa, el contenido se retira con un leve alejamiento y
   después se desvanece el fondo; así el logotipo no queda encimado sobre la pantalla que aparece */
#splash.sp-exit{opacity:0;pointer-events:none;transition:opacity .28s ease .26s}
#splash.sp-exit .sp-line i{transform:scaleX(1)}
#splash.sp-exit .sp-inner{opacity:0;transform:scale(.985)}
#splash.sp-exit .sp-legal{opacity:0}
/* Al recargar en la misma sesión: sin entrada */
.sp-warm #splash .sp-mark,.sp-warm #splash .sp-word,.sp-warm #splash .sp-line,.sp-warm #splash .sp-line i,.sp-warm #splash .sp-legal{animation:none}

/* Transiciones de pantalla */
/* Solo se anima el contenido (nunca el contenedor de las barras fijas) y sin dejar el transform aplicado:
   un ancestro con transform convierte position:fixed en relativo a él (Safari y Chrome). */
#view>.enter:not(.wiz),#view>.wiz.enter>.wiz-body{animation:scrIn .22s var(--ease) backwards}
#view>.enter-back:not(.wiz),#view>.wiz.enter-back>.wiz-body{animation:scrBack .22s var(--ease) backwards}
@keyframes scrIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes scrBack{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}