/* sitio.css — piezas comunes de stockerfy.app (16-oct-2026). Ver sitio.js.
   Mismo material que el Scan: superficies planas, filete de 1px, sin degradados. */

/* Tokens del Scan (hawk/app.css) para las páginas que no cargan app.css y usan el
   panel de cuenta: en <body class="sf-chrome"> (Stockdle, Folio) y, para no tocar los
   tokens propios de la portada, también sobre el panel y el botón mismos. Los valores
   son los de hawk/app.css, así que en el Scan no cambian nada. */
.sf-chrome, .ac-panel, .ac-velo, .acct-slot, .ac-aviso{
  --brand-burgundy:#910713; --brand-cream:#f5e5ba;
  --bg-base:#0d0a0b; --bg-sunken:#090708; --bg-surface:#171214; --bg-elevated:#221a1d; --bg-hover:#2b2023;
  --border-1:rgba(var(--ink),0.08); --border-2:rgba(var(--ink),0.16); --border-3:rgba(var(--ink),0.28);
  --accent:#910713; --accent-deep:#5a0008;
  --shadow-lg:0 24px 60px -24px rgba(0,0,0,0.80); --ring:0 0 0 3px rgba(var(--ink),0.13);
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px; --radius-pill:999px;
  --font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:'Frank Ruhl Libre','Source Serif Pro',Georgia,serif;
  --font-mono:'JetBrains Mono','Menlo','Consolas',monospace;
  --dur-hover:120ms; --dur-base:200ms; --ease:cubic-bezier(0.2,0.8,0.2,1);
}
/* tema (24-oct-2026): canales RGB y colores de las piezas comunes; los mismos valores en todo el sitio */
:root{
  --ink:245,229,186; --paper:13,10,11; --scrim:8,6,7; --elev-rgb:34,26,29;
  --sfc-fondo:#0d0a0b; --sfc-surf:#171214; --sfc-elev:#221a1d; --sfc-t1:#f5ecd9; --sfc-t15:#d8cbb6; --sfc-t2:#a89788; --sfc-t3:#897a70;
  --sfc-ambar:#e8c66a; --sfc-verde:#4fb3a5; --sfc-azul:#4f9cf0;
}
.sf-chrome{--rail-w:0px}
.ac-panel.hidden, .ac-velo.hidden{display:none!important}
.acct-slot.icon-btn{display:flex;align-items:center;justify-content:center;background:var(--bg-surface);
  border:1px solid var(--border-2);color:var(--fg-2);cursor:pointer;padding:0;overflow:hidden;
  transition:border-color var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.acct-slot.icon-btn:hover{color:var(--fg-1);border-color:var(--border-3)}
.acct-slot.icon-btn svg{width:18px;height:18px}
[data-cuenta]{display:flex;align-items:center}

/* Punto de "quedan juegos de hoy" */
.sf-punto{display:none;width:7px;height:7px;border-radius:50%;background:#e8c66a;box-shadow:0 0 0 2px rgba(var(--paper),.9)}
.sf-punto.on{display:block}
.sf-punto--txt.on{display:inline-block;margin-left:6px;vertical-align:2px}

/* ── Scan: Stockdle y Folio en el raíl ─────────────────────────────────── */
.rail-nav .nav-sep{display:block;height:1px;margin:8px 14px;background:var(--border-1)}
.rail-nav .nav-x{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:11px 3px 9px;border-radius:12px;color:var(--fg-3);text-decoration:none;
  font:600 9.5px/1 var(--font-sans);letter-spacing:.03em;
  transition:color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.rail-nav .nav-x svg{width:21px;height:21px}
.rail-nav .nav-x:hover{color:var(--fg-1);background:rgba(var(--ink),.045)}
.rail-nav .nav-x:focus-visible{outline:none;box-shadow:var(--ring)}
.rail-nav .nav-x .sf-punto{position:absolute;top:9px;left:calc(50% + 8px)}
@media (max-width:1000px) and (min-width:761px){ .rail-nav .nav-x > span:not(.sf-mk){display:none} .rail-nav .nav-x{padding:12px 3px} }
@media (max-width:760px){
  .rail-nav .nav-sep{display:none}
  .rail-nav .nav-x{flex:1 1 0;justify-content:center;gap:4px;padding:8px 0 6px;font-size:10.5px;min-width:0}
  .rail-nav .nav-x > span:not(.sf-mk){display:block}
  .rail-nav .nav-x svg{width:22px;height:22px}
  .rail-nav .nav-x .sf-punto{top:6px}
  /* seis botones en 390 px: el texto se achica un punto para que "Glosario" y "Stockdle" quepan */
  .rail-nav .nav-item, .rail-nav .nav-x{font-size:10px;letter-spacing:0}
}

/* ── Barra inferior en el teléfono (fuera del Scan) ─────────────────────── */
.sf-tabs{display:none}
@media (max-width:760px){
  .sf-tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;height:calc(60px + env(safe-area-inset-bottom));
    padding:0 4px env(safe-area-inset-bottom);border-top:1px solid rgba(var(--ink),.16);background:rgba(var(--paper),.94);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .sf-tabs a{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    color:var(--sfc-t3);text-decoration:none;font:600 10.5px/1 'IBM Plex Sans',system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
  .sf-tabs a svg{width:22px;height:22px}
  .sf-tabs a.on{color:var(--brand-cream)}
  .sf-tabs a.on::before{content:"";position:absolute;top:0;left:50%;width:28px;height:2px;margin-left:-14px;background:#910713;border-radius:0 0 2px 2px}
  .sf-tabs a:active svg{transform:scale(.92)}
  .sf-tabs .sf-punto{position:absolute;top:8px;left:calc(50% + 8px)}
  body.sf-con-tabs{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  /* dentro de un juego la barra se va: el tablero y el teclado necesitan el alto */
  body.sf-sin-tabs .sf-tabs{display:none}
  body.sf-con-tabs.sf-sin-tabs{padding-bottom:0}
}

/* ── Marcas de producto (16-oct-2026): Scan, Stockdle, Folio ───────────── */
.sf-mk{--mk:20px; display:inline-flex; flex:none; width:var(--mk); height:var(--mk); line-height:0; vertical-align:middle}
.sf-mk svg{width:100%; height:100%; display:block; overflow:visible}
/* en la navegación de cabecera: marca chica antes del nombre */
header nav a.sf-prod{display:inline-flex; align-items:center; gap:7px}
header nav a.sf-prod .sf-mk{--mk:17px; transition:transform .35s cubic-bezier(.16,1,.3,1)}
header nav a.sf-prod:hover .sf-mk{transform:rotate(-8deg) scale(1.08)}
header nav a.sf-prod--scan.on, header nav a.sf-prod--scan[aria-current]{box-shadow:inset 0 -1.5px 0 #c4313d}
header nav a.sf-prod--stockdle.on, header nav a.sf-prod--stockdle[aria-current]{box-shadow:inset 0 -1.5px 0 #e8c66a}
header nav a.sf-prod--folio.on, header nav a.sf-prod--folio[aria-current]{box-shadow:inset 0 -1.5px 0 #4fb3a5}
/* lockup de producto en la cabecera de Stockdle y Folio: anillo de Stockerfy / marca + nombre */
.lk{display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0}
.lk .sf-mk{--mk:28px}
.lk b{font-family:var(--serif,'Frank Ruhl Libre',Georgia,serif); font-weight:700; font-size:19px; letter-spacing:-.01em; white-space:nowrap}
.lk-sep{color:rgba(var(--ink),.28); font-size:22px; font-weight:300; margin:0 -4px; user-select:none}
.brand--solo b{display:none}
/* raíl del Scan y barra inferior */
.rail-nav .nav-x .sf-mk{--mk:22px; opacity:.82; transition:opacity .2s, transform .35s cubic-bezier(.16,1,.3,1)}
.rail-nav .nav-x:hover .sf-mk{opacity:1; transform:scale(1.08)}
@media (max-width:760px){
  .sf-tabs .sf-mk{--mk:22px; opacity:.6; filter:saturate(.55); transition:opacity .2s, filter .2s}
  .sf-tabs a.on .sf-mk{opacity:1; filter:none}
  .sf-tabs[data-prod=stockdle] a.on{color:var(--sfc-ambar)}
  .sf-tabs[data-prod=stockdle] a.on::before{background:#e8c66a}
  .sf-tabs[data-prod=folio] a.on{color:var(--sfc-verde)}
  .sf-tabs[data-prod=folio] a.on::before{background:#4fb3a5}
}
/* grande: se anima al aparecer */
.sf-mk--hero{--mk:clamp(52px,7vw,72px)}
.sf-mk--hero .mk-t{transform-box:fill-box; transform-origin:center; animation:mk-gira .55s cubic-bezier(.16,1,.3,1) calc(.15s + var(--i) * .12s) both}
.sf-mk--hero .mk-b{transform-box:fill-box; transform-origin:bottom; animation:mk-crece .7s cubic-bezier(.16,1,.3,1) calc(.15s + var(--i) * .1s) both}
.sf-mk--hero .mk-a{stroke-dasharray:100; animation:mk-dibuja 1s cubic-bezier(.16,1,.3,1) .15s both}
.sf-mk--hero .mk-a2{animation-delay:.75s}
.sf-mk--hero .mk-f{transform-box:fill-box; transform-origin:center; animation:mk-pop .5s cubic-bezier(.16,1,.3,1) both}
@keyframes mk-gira{from{transform:rotateX(90deg)}}
@keyframes mk-crece{from{transform:scaleY(0)}}
@keyframes mk-dibuja{from{stroke-dashoffset:100}}
@keyframes mk-pop{from{transform:scale(.6); opacity:0}}
@media (prefers-reduced-motion:reduce){ .sf-mk--hero *{animation:none!important} }

/* ── Instalar en la pantalla de inicio (20-oct-2026) ── */
.sf-inst-velo{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-end;justify-content:center;background:rgba(var(--scrim),.66)}
.sf-inst{position:relative;width:100%;max-width:460px;background:var(--sfc-surf);color:var(--sfc-t1);border:1px solid rgba(var(--ink),.16);border-bottom:0;
  border-radius:22px 22px 0 0;padding:26px 22px calc(26px + env(safe-area-inset-bottom));box-shadow:0 -20px 50px -20px rgba(0,0,0,.8);
  font:400 15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;animation:sf-sube .22s ease-out}
@media (min-width:761px){ .sf-inst-velo{align-items:center} .sf-inst{border-radius:22px;border-bottom:1px solid rgba(var(--ink),.16)} }
@keyframes sf-sube{from{transform:translateY(24px);opacity:0}}
.sf-inst-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:50%;background:none;color:var(--sfc-t2);font-size:26px;line-height:1;cursor:pointer}
.sf-inst .sf-mk--inst,.sf-inst-logo{display:block;width:56px;height:56px;border-radius:14px;margin-bottom:14px}
.sf-inst .sf-mk--inst svg{width:100%;height:100%;display:block}
.sf-inst-h{font:600 20px/1.25 system-ui,-apple-system,"Segoe UI",sans-serif;margin:0 30px 12px 0;color:var(--sfc-t1)}
.sf-inst-pasos{margin:0;padding-left:20px;display:grid;gap:10px;color:var(--sfc-t15)}
.sf-inst-pasos b{color:var(--sfc-t1)}
.sf-inst-p,.sf-inst-nota{margin:12px 0 0;color:var(--sfc-t2);font-size:13.5px}
.sf-inst-ic{width:19px;height:19px;vertical-align:-4px;color:var(--sfc-azul)}
.sf-franja{position:fixed;left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:965;display:flex;align-items:center;gap:10px;
  padding:9px 8px 9px 10px;background:var(--sfc-elev);color:var(--sfc-t1);border:1px solid rgba(var(--ink),.18);border-radius:16px;
  box-shadow:0 14px 36px -14px rgba(0,0,0,.85);font:500 13.5px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;animation:sf-sube .25s ease-out}
.sf-franja>span{flex:1;min-width:0}
.sf-franja .sf-mk--franja,.sf-franja-logo{flex:0 0 auto;width:32px;height:32px;border-radius:9px}
.sf-franja .sf-mk--franja svg{width:100%;height:100%;display:block}
.sf-franja-bt{flex:0 0 auto;height:34px;padding:0 14px;border:0;border-radius:10px;background:var(--brand-cream);color:var(--sfc-fondo);font:600 13.5px system-ui,-apple-system,sans-serif;cursor:pointer}
.sf-franja-x{flex:0 0 auto;width:30px;height:30px;border:0;border-radius:50%;background:none;color:var(--sfc-t2);font-size:22px;line-height:1;cursor:pointer}

/* ── Capa táctil (20-oct-2026): ver sitio.js::capaTactil ── */
html.sf-tactil{-webkit-tap-highlight-color:transparent}
html.sf-tactil a,html.sf-tactil button,html.sf-tactil [role=button],html.sf-tactil input,html.sf-tactil select,html.sf-tactil label{touch-action:manipulation}
/* iPhone agranda la página al enfocar un campo con letra menor a 16 px */
html.sf-tactil input,html.sf-tactil select,html.sf-tactil textarea{font-size:max(16px,1em)}
.sf-escudo{position:absolute;inset:0;z-index:6;touch-action:pan-y;background:transparent;cursor:pointer}
.sf-escudo[hidden]{display:none}
.sf-activo{outline:1px solid rgba(var(--ink),.22);outline-offset:3px;border-radius:8px}
.sf-tip--toque{position:fixed;z-index:2100;pointer-events:none}
.sf-pista{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2100;
  max-width:calc(100vw - 32px);padding:9px 14px;border-radius:12px;background:var(--sfc-elev);color:var(--sfc-t1);border:1px solid rgba(var(--ink),.18);
  font:500 13px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;text-align:center;box-shadow:0 12px 30px -12px rgba(0,0,0,.8);animation:sf-sube .22s ease-out}
/* la franja de instalar nunca encima de un modal, un panel o la cuenta */
body:has(.modal:not(.hidden), .drawer.open, .fw-modal:not(.hidden), .ac-panel:not(.hidden), .ac-aviso, .sf-inst-velo, .fw-banda, dialog[open], .elige) .sf-franja{display:none}
/* la X de la franja con área de toque de 44 px, y el pie de las páginas de scroll normal (Stockdle,
   portada) termina sobre la franja, no debajo */
.sf-franja-x{position:relative}
.sf-franja-x::after{content:"";position:absolute;inset:-7px}
body.sf-chrome:has(.sf-franja) footer{padding-bottom:calc(150px + env(safe-area-inset-bottom))}

/* ══ Tema claro · 24-oct-2026 ══ (los mismos valores que hawk/app.css y folio/app.css) */
html[data-tema="claro"],
html[data-tema="claro"] :is(.sf-chrome, .ac-panel, .ac-velo, .acct-slot, .ac-aviso){
  --brand-burgundy-soft:rgba(145,7,19,.09); --brand-cream:#1c120e;
  --bg-base:#f6f1e7; --bg-sunken:#ede5d6; --bg-surface:#fffcf6; --bg-elevated:#ffffff; --bg-hover:#efe6d6;
  --ink:52,30,22; --paper:246,241,231; --scrim:44,28,22; --elev-rgb:255,255,255;
  --border-1:rgba(var(--ink),.10); --border-2:rgba(var(--ink),.17); --border-3:rgba(var(--ink),.30);
  --shadow-lg:0 24px 60px -24px rgba(60,35,25,.32),0 2px 6px rgba(60,35,25,.06); --ring:0 0 0 3px rgba(145,7,19,.16);
  --sfc-fondo:#f6f1e7; --sfc-surf:#fffcf6; --sfc-elev:#ffffff; --sfc-t1:#1f1612; --sfc-t15:#3b2e27; --sfc-t2:#574841; --sfc-t3:#6f5f55;
  --sfc-ambar:#8f6206; --sfc-verde:#1b766a; --sfc-azul:#1d68ab;
}
html[data-tema="claro"] .sf-punto{background:#c8930e}

/* Folio web: el sello de Stockerfy en la esquina lleva a la portada (04-nov-2026), con el mismo gesto que en el Scan */
a.rail-brand{cursor:pointer;transition:transform .25s cubic-bezier(.16,1,.3,1)}
a.rail-brand:hover{transform:scale(1.06)}
a.rail-brand:focus-visible,a.top-brand:focus-visible{outline:none;box-shadow:var(--ring)}
a.rail-brand .rail-mark{border-radius:50%}
a.top-brand{display:none;flex:0 0 auto;border-radius:50%}
a.top-brand img{width:32px;height:32px;display:block}
@media (max-width:760px){a.top-brand{display:flex}}

/* Stockerfy Pro (07-nov-2026): píldora discreta hacia /pro/ en el Scan y Folio (sitio.js::entradaPro) */
.sf-pro{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 10px;border:1px solid var(--border-2);
  border-radius:999px;background:none;font:600 11px/1 var(--font-sans);letter-spacing:.03em;color:var(--fg-2);text-decoration:none;
  transition:color .15s ease,border-color .15s ease}
@media (hover:hover){ .sf-pro:hover{color:var(--fg-1);border-color:var(--border-3)} }
.sf-pro:focus-visible{outline:none;box-shadow:var(--ring)}
.sf-pro--top{display:none}
@media (max-width:760px){ .sf-pro--top{display:inline-flex;height:34px;padding:0 12px;font-size:12px} }
/* a ≤ 380 px no cabe junto al título de la vista: ahí se entra por el panel de la cuenta */
@media (max-width:380px){ .sf-pro--top{display:none} }