/* PlusOne · tokens compartidos (landing, panel, consola).
   Color = ADN Precisión de ecom.leadrill.com (no se toca). Motion = escala de transitions.dev.
   Reglas: un acento por pantalla (magenta sólo en el CTA primario y la marca; verde sólo donde hay plata),
   hairline O sombra (nunca ambas; sombra sólo en superficies flotantes), números tabulares siempre,
   nada anima en el primer paint salvo la carga orquestada, nada anima al cambiar de tema. */

:root{
  --paper:#EFEDE6; --card:#FBFAF6; --sunken:#E7E4DB; --hover:#F6F4EE;
  --ink:#191921; --ink-2:rgba(25,25,33,.66); --ink-3:rgba(25,25,33,.46);
  --line:rgba(25,25,33,.09); --line-2:rgba(25,25,33,.18);
  --gain:#0B7A3B; --loss:#C22A1E; --warn:#946000;
  --brand:#C81FD6; --brand-ink:#8E0F99; --brand-soft:rgba(200,31,214,.10);
  --mp:#009EE3;
  --float-sh:0 1px 2px rgba(25,25,33,.06), 0 12px 32px -8px rgba(25,25,33,.18);
  --r-s:6px; --r-m:8px; --r-l:12px;
  /* motion (transitions.dev _root.css) */
  --d-stagger:40ms; --d-micro:80ms; --d-quick:150ms; --d-fast:250ms; --d-medium:350ms; --d-slow:400ms; --d-xslow:500ms;
  --e-out:cubic-bezier(.22,1,.36,1); --e-inout:ease-in-out; --e-event:cubic-bezier(.16,1,.3,1); --e-toggle:cubic-bezier(.34,1.35,.64,1);
  --font:"Inter",system-ui,-apple-system,sans-serif; --display:"Syne","Inter",sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#131118; --card:#1B1822; --sunken:#100E14; --hover:#221E2B;
  --ink:#EDEAF2; --ink-2:rgba(237,234,242,.66); --ink-3:rgba(237,234,242,.46);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --gain:#4ADE80; --loss:#F87171; --warn:#FBBF24; --brand-ink:#E893F0; --brand-soft:rgba(217,63,229,.14);
  --float-sh:0 1px 0 rgba(255,255,255,.05) inset, 0 16px 40px -10px rgba(0,0,0,.55);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#131118; --card:#1B1822; --sunken:#100E14; --hover:#221E2B;
  --ink:#EDEAF2; --ink-2:rgba(237,234,242,.66); --ink-3:rgba(237,234,242,.46);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --gain:#4ADE80; --loss:#F87171; --warn:#FBBF24; --brand-ink:#E893F0; --brand-soft:rgba(217,63,229,.14);
  --float-sh:0 1px 0 rgba(255,255,255,.05) inset, 0 16px 40px -10px rgba(0,0,0,.55);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"cv11" 1}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.015em;line-height:1.15}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--brand-soft)}
.mono{font-family:var(--mono);font-size:.92em;letter-spacing:0}
.num{font-variant-numeric:tabular-nums}
.theme-swap *{transition:none !important}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important} }

/* Botones: un primario magenta por pantalla; el resto, tinta sobre hairline. Sin brillo, sin levitar. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--r-m);padding:10px 16px;font-weight:600;font-size:14px;line-height:1.2;cursor:pointer;background:var(--brand);color:#fff;transition:background var(--d-quick) var(--e-out),border-color var(--d-quick) var(--e-out),transform var(--d-micro) var(--e-out)}
.btn:hover{background:#B01ABD}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--hover);border-color:var(--ink-3)}
.btn.sm{padding:7px 11px;font-size:13px;border-radius:var(--r-s)}
.btn.danger{background:transparent;color:var(--loss);border-color:var(--line-2)}
.btn.danger:hover{background:rgba(194,42,30,.06);border-color:var(--loss)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Superficies */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l)}
.floating{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--float-sh)}
.hairline{border-top:1px solid var(--line)}

/* Campos */
.field{width:100%;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-m);padding:9px 11px;outline:none;transition:border-color var(--d-quick) var(--e-out)}
.field:hover{border-color:var(--ink-3)}
.field:focus{border-color:var(--ink)}

/* Estados */
.kbd{display:inline-block;font-family:var(--mono);font-size:11px;line-height:1;padding:3px 5px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;color:var(--ink-2);background:var(--card)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gain);vertical-align:middle}
.dot.off{background:var(--warn)}
.dot.bad{background:var(--loss)}

/* Skeleton en el mismo slot (pulso 1 s, reveal 400 ms con blur) */
.skl{color:transparent !important;background:var(--sunken);border-radius:4px;animation:skl 1000ms var(--e-inout) infinite}
@keyframes skl{0%,100%{opacity:1}50%{opacity:.5}}
.reveal{animation:reveal var(--d-slow) var(--e-inout) both}
@keyframes reveal{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:blur(0)}}

/* Carga orquestada: sólo el primer paint */
.enter{opacity:0;transform:translateY(8px);animation:enter var(--d-fast) var(--e-out) forwards}
.enter:nth-child(2){animation-delay:var(--d-stagger)} .enter:nth-child(3){animation-delay:calc(var(--d-stagger)*2)} .enter:nth-child(4){animation-delay:calc(var(--d-stagger)*3)} .enter:nth-child(5){animation-delay:calc(var(--d-stagger)*4)} .enter:nth-child(n+6){animation-delay:calc(var(--d-stagger)*5)}
@keyframes enter{to{opacity:1;transform:none}}

/* Toast (350 abrir / 250 cerrar) */
.toast{position:fixed;left:50%;bottom:20px;z-index:90;max-width:min(92vw,480px);padding:10px 14px;border-radius:var(--r-m);background:var(--ink);color:var(--paper);font-size:13px;font-weight:500;pointer-events:none;opacity:0;transform:translateX(-50%) translateY(16px) scale(.97);filter:blur(2px);transition:opacity var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out),filter var(--d-fast) var(--e-out)}
.toast.on{opacity:1;transform:translateX(-50%);filter:none;transition-duration:var(--d-medium)}
.toast.err{background:var(--loss);color:#fff}

/* Toggle (350 ms, overshoot 1 px, sin animar en el primer render) */
.switch{position:relative;width:38px;height:22px;flex:none;cursor:pointer;display:inline-block}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .track{position:absolute;inset:0;border-radius:999px;background:var(--sunken);border:1px solid var(--line-2)}
.switch .track::before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--card);border:1px solid var(--line-2)}
.switch.is-init .track{transition:background var(--d-quick) var(--e-out),border-color var(--d-quick) var(--e-out)}
.switch.is-init .track::before{transition:transform var(--d-medium) var(--e-toggle)}
.switch input:checked + .track{background:var(--gain);border-color:var(--gain)}
.switch input:checked + .track::before{transform:translateX(16px);border-color:transparent}

/* Tema: botón discreto */
.tgl{width:34px;height:34px;border-radius:var(--r-m);border:1px solid var(--line);background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--ink-2)}
.tgl:hover{background:var(--hover);color:var(--ink)}
.tgl svg{width:16px;height:16px}

/* Grano (sólo landing: hero y footer) */
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.035;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
:root[data-theme="dark"] .grain::after{mix-blend-mode:screen;opacity:.05}