/* native.css — capa de app nativa de stockerfy.app (20-oct-2026). Ver native.js.
   Se aplica a todas las páginas. Lo que depende de estar instalada (pantalla de inicio o app
   de iPhone) cuelga de html.sf-app; lo táctil, de (hover:none). Nada cambia en el escritorio. */

:root{
  /* resorte: la curva que usa iOS para hojas y rebotes (CSS linear(), Safari 17.2+; el resto cae a ease-out) */
  --sf-spring:cubic-bezier(.2,.9,.25,1);
  --sf-fondo:#0d0a0b; --sf-papel:#171214; --sf-papel2:#221a1d;
  --sf-crema:#f5e5ba; --sf-texto:#f5ecd9; --sf-gris:#a89788; --sf-filete:rgba(var(--ink),.16);
}
@supports (transition-timing-function: linear(0, 1)){
  :root{--sf-spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1.004 83.8%,1)}
}
/* alto de la barra de estado: env() y, si iOS lo da en 0 con la barra translúcida encima, el valor que fija native.js */
:root{--sf-top:env(safe-area-inset-top,0px)}
html{background:var(--sf-fondo)}
html,body{color-scheme:dark}

/* ── Transiciones entre páginas (View Transitions entre documentos: Safari 18.2+, Chrome) ──
   La barra inferior y el raíl se quedan quietos; solo el contenido se funde y sube. */
@view-transition{navigation:auto}
.sf-tabs{view-transition-name:sf-tabs}
.rail-nav{view-transition-name:sf-raiz}
.sf-estado{view-transition-name:sf-estado}
::view-transition-old(root){animation:sf-vt-sale .16s ease-out both}
::view-transition-new(root){animation:sf-vt-entra .34s var(--sf-spring) both}
@keyframes sf-vt-sale{to{opacity:0}}
@keyframes sf-vt-entra{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ── Tipografía de sistema en la app (San Francisco en iPhone) y cifras alineadas ── */
html.sf-app{--font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",sans-serif;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased}
table,td,th,.num,.ledger,[class*="pct"],[class*="pnl"],[class*="price"],[class*="-val"],.mono{font-variant-numeric:tabular-nums}

/* ── Barra de estado: el contenido pasa por debajo, difuminado, como en una app ── */
.sf-estado{display:none}
html.sf-app .sf-estado{display:block;position:fixed;left:0;right:0;top:0;height:var(--sf-top);z-index:9990;pointer-events:none;
  background:linear-gradient(rgba(var(--paper),.96),rgba(var(--paper),.82));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* páginas de scroll normal (portada, Stockdle, Análisis, legal): el contenido empieza bajo la barra */
html.sf-app:not(.sf-shell) body{padding-top:var(--sf-top)}
html.sf-app:not(.sf-shell) header.top,html.sf-app:not(.sf-shell) body>header{top:var(--sf-top)}

/* ── Sin rebote de página ni encadenado de scroll; el rebote lo da el pull-to-refresh propio ── */
html.sf-app,html.sf-app body{overscroll-behavior-y:none}
html.sf-app #view,html.sf-app .drawer-card,html.sf-app .modal-card,html.sf-app .ac-panel,html.sf-app .fw-card{overscroll-behavior:contain}
html.sf-app{-webkit-touch-callout:none}
html.sf-app body{-webkit-user-select:none;user-select:none}
html.sf-app input,html.sf-app textarea,html.sf-app [contenteditable],html.sf-app .sf-sel,html.sf-app p,html.sf-app td,html.sf-app li{-webkit-user-select:text;user-select:text}
html.sf-app img,html.sf-app svg{-webkit-user-drag:none}

/* ── Tacto: respuesta inmediata al apoyar el dedo (solo pantallas táctiles) ── */
@media (hover:none){
  button,[role=button],.sf-tabs a,.rail-nav .nav-item,.rail-nav .nav-x,.fw-bt,.ac-btn,.ac-chip,.chip,.k,.op,.hub-card,.g-go{
    transition:transform .18s var(--sf-spring),opacity .12s,background-color .12s}
  button:active,[role=button]:active,.fw-bt:active,.ac-btn:active,.ac-chip:active,.chip:active,.k:active,.op:active,.g-go:active{transform:scale(.965)}
  .sf-tabs a:active,.rail-nav .nav-item:active,.rail-nav .nav-x:active{opacity:.7}
  [data-open]:active,tr[data-t]:active,.peer-row:active{background:rgba(var(--ink),.06)}
  nav,header,.topbar,.sf-tabs,.rail-nav,th,.seg,.tabs{-webkit-user-select:none;user-select:none}
  [data-open],.peer-row,.sf-tabs a{-webkit-touch-callout:none}
}

/* ── Esqueleto mientras la vista carga (la vista del Scan y de Folio llega vacía) ── */
#view:empty{min-height:60vh;background:
  linear-gradient(100deg,transparent 30%,rgba(var(--ink),.07) 50%,transparent 70%) 0 0/220% 100% no-repeat,
  linear-gradient(var(--sf-papel),var(--sf-papel)) 16px 20px/calc(100% - 32px) 118px no-repeat,
  linear-gradient(var(--sf-papel),var(--sf-papel)) 16px 154px/calc(100% - 32px) 220px no-repeat,
  linear-gradient(var(--sf-papel),var(--sf-papel)) 16px 390px/calc(100% - 32px) 84px no-repeat;
  animation:sf-brilla 1.4s linear infinite}
@keyframes sf-brilla{to{background-position:-120% 0,0 0,0 0,0 0}}
@media (prefers-reduced-motion:reduce){#view:empty{animation:none}}

/* ── Pull-to-refresh propio ── */
.sf-ptr{position:fixed;left:50%;top:calc(var(--sf-top) + 8px);z-index:9995;width:38px;height:38px;margin-left:-19px;border-radius:50%;
  background:var(--sf-papel2);border:1px solid var(--sf-filete);box-shadow:0 8px 24px -10px rgba(0,0,0,.8);
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(-60px);will-change:transform,opacity}
.sf-ptr svg{width:20px;height:20px;color:var(--sf-crema);transform:rotate(calc(var(--p,0) * 270deg))}
.sf-ptr.listo svg{color:#4fb3a5}
.sf-ptr.carga{transition:transform .25s var(--sf-spring),opacity .2s}
.sf-ptr.carga svg{animation:sf-gira .8s linear infinite}
@keyframes sf-gira{to{transform:rotate(360deg)}}

/* ── Hojas inferiores: asa, resorte al abrir y arrastre para cerrar ── */
@media (max-width:760px){
  html.sf-app .drawer-card{transition:transform .5s var(--sf-spring),opacity .2s}
  html.sf-app .drawer-card::before{width:36px;height:5px;border-radius:3px;background:rgba(var(--ink),.34)}
  /* alertas, importar, ejemplo… (modales de Folio) como hoja inferior */
  .fw-modal{align-items:flex-end;padding:0;background:rgba(var(--scrim),.55)}
  .fw-card{max-width:none;border-radius:20px 20px 0 0;border-bottom:0;max-height:90dvh;overflow-y:auto;overscroll-behavior:contain;
    padding-bottom:calc(20px + env(safe-area-inset-bottom));animation:sf-hoja .45s var(--sf-spring)}
  .fw-card::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:rgba(var(--ink),.34);margin:-4px auto 14px}
  .ac-panel{animation:sf-hoja .45s var(--sf-spring)!important}
  .ac-panel:not(.ac-panel--wide)::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:rgba(var(--ink),.34);margin:-10px auto 12px}
  .sf-inst{animation:sf-hoja .45s var(--sf-spring)!important}
}
@keyframes sf-hoja{from{transform:translateY(100%)}}
.sf-arrastrando{transition:none!important;will-change:transform}
.sf-vuelve{transition:transform .42s var(--sf-spring)!important}
.sf-se-va{transition:transform .2s ease-in!important}

/* ── Menú de pulsación larga (hoja de acciones, como iOS) ── */
.sf-ac-velo{position:fixed;inset:0;z-index:9996;display:flex;align-items:flex-end;justify-content:center;background:rgba(var(--scrim),.5);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:sf-vel .2s ease-out}
@keyframes sf-vel{from{opacity:0}}
.sf-ac{width:100%;max-width:480px;padding:0 10px calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;
  font:500 17px/1.2 var(--font-sans,system-ui);animation:sf-hoja .45s var(--sf-spring)}
.sf-ac-grp{background:rgba(var(--elev-rgb),.97);border:1px solid var(--sf-filete);border-radius:16px;overflow:hidden}
.sf-ac-t{padding:13px 16px 11px;text-align:center;color:var(--sf-gris);font:600 13px/1.2 var(--font-sans,system-ui);letter-spacing:.02em}
.sf-ac-t b{color:var(--sf-texto);font-weight:700}
.sf-ac button{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 18px;border:0;border-top:1px solid rgba(var(--ink),.1);
  background:none;color:var(--sf-texto);font:inherit;text-align:left;cursor:pointer}
.sf-ac button:active{background:rgba(var(--ink),.08);transform:none}
.sf-ac button svg{width:20px;height:20px;flex:none;color:var(--sf-crema)}
.sf-ac .sf-ac-x{justify-content:center;border:1px solid var(--sf-filete);border-radius:16px;background:rgba(var(--elev-rgb),.97);font-weight:600;color:var(--sf-crema)}
.sf-presionado{animation:sf-presiona .35s var(--sf-spring) both}
@keyframes sf-presiona{50%{transform:scale(.96)}}

/* ── Sin conexión ── */
.sf-sinred{position:fixed;left:50%;top:calc(var(--sf-top) + 10px);transform:translate(-50%,-16px);z-index:9994;
  max-width:calc(100vw - 32px);padding:8px 14px;border-radius:999px;background:var(--sf-papel2);color:var(--sf-texto);
  border:1px solid var(--sf-filete);box-shadow:0 10px 28px -12px rgba(0,0,0,.85);font:500 13px/1.3 var(--font-sans,system-ui);
  white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .4s var(--sf-spring),opacity .25s,visibility 0s .4s}
/* oculto de verdad: antes solo subía un 140 % de su alto y su borde asomaba sobre la hora y la batería (23-oct-2026) */
.sf-sinred.on{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .4s var(--sf-spring),opacity .25s,visibility 0s}
.sf-sinred::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#e8c66a;vertical-align:1px}

/* ── Bloqueo con Face ID ── */
.sf-lock{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px;
  background:var(--sf-fondo);color:var(--sf-texto);text-align:center;font:400 16px/1.5 var(--font-sans,system-ui)}
.sf-lock[hidden]{display:none}
.sf-lock .sf-lock-m{width:84px;height:84px;border-radius:22px}
.sf-lock h2{margin:4px 0 0;font:600 22px/1.25 var(--font-sans,system-ui)}
.sf-lock p{margin:0;color:var(--sf-gris);max-width:28ch}
.sf-lock button{margin-top:8px;min-height:50px;padding:0 28px;border:0;border-radius:14px;background:var(--sf-crema);color:var(--sf-fondo);
  font:600 17px var(--font-sans,system-ui);display:inline-flex;align-items:center;gap:10px}
.sf-lock button svg{width:24px;height:24px}
.sf-lock-cubre{background:var(--sf-fondo)}

/* fila de seguridad en el panel de Folio */
.sf-seg{display:flex;flex-direction:column;gap:8px}
.sf-seg-fila{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--sf-filete);border-radius:12px;background:var(--sf-papel)}
.sf-seg-fila>span{flex:1;font:500 14px/1.35 var(--font-sans,system-ui)}
.sf-seg-fila small{display:block;margin-top:2px;color:var(--sf-gris);font-weight:400;font-size:12.5px}
.sf-sw{position:relative;flex:none;width:51px;height:31px;border-radius:16px;border:0;background:var(--sf-apagado,#3a3033);cursor:pointer;transition:background .2s}
.sf-sw::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.35);transition:transform .3s var(--sf-spring)}
.sf-sw[aria-checked=true]{background:#4fb3a5}
.sf-sw[aria-checked=true]::after{transform:translateX(20px)}
.sf-sw:active::after{width:31px}
.sf-sw[aria-checked=true]:active::after{transform:translateX(16px)}
.sf-seg-msg{margin:0;min-height:1.2em;font:400 12.5px/1.4 var(--font-sans,system-ui);color:var(--sf-gris)}
.sf-seg-msg.mal{color:var(--sf-mal,#e0707a)}

/* La franja de «instalar» no tiene sentido dentro de la app */
html.sf-app .sf-franja,html.sf-cap [data-instalar]{display:none!important}

/* ══ Tema claro · 24-oct-2026 ══ */
html[data-tema="claro"]{
  --sf-fondo:#f6f1e7; --sf-papel:#fffcf6; --sf-papel2:#ffffff;
  --sf-crema:#1c120e; --sf-texto:#1f1612; --sf-gris:#574841; --sf-filete:rgba(52,30,22,.16);
  --sf-apagado:#d6cbbb; --sf-mal:#c0222f;
}