/* fuentes servidas por el propio panel */
@font-face{font-family:"Bricolage Grotesque";src:url(/static/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:Figtree;src:url(/static/fonts/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}
/* ================= paletas ================= */
:root{--ok:#2F9E6B;--warn:#E39A16;--bad:#D9473F;--r-l:22px;--r-m:15px;--r-s:11px;--ease:cubic-bezier(.2,.75,.2,1)}
/* petróleo y coral */
:root{--brand:#0B3C49;--brand-2:#11586A;--acc:#FF6F5E;--acc-ink:#C53B2E}

/* tema único: oscuro */
:root{
  --bg:color-mix(in oklab,var(--brand) 28%,#060607);
  --card:color-mix(in oklab,var(--brand) 38%,#0C0C0D);
  --soft:color-mix(in oklab,var(--brand) 40%,#141416);
  --line:color-mix(in oklab,var(--brand) 40%,#2A2A2C);
  --ink:#EDEBE7;
  --mute:color-mix(in oklab,var(--acc) 12%,#9C9C9C);
  --pri:var(--acc);--on-pri:var(--brand);--acc-ink:var(--acc);
  --side:color-mix(in oklab,var(--brand) 45%,#040405);--side-hi:color-mix(in oklab,var(--brand) 60%,#1A1A1C);
  --beam:var(--acc);
  --bar:#3A93A6;          /* serie principal de las gráficas */
  color-scheme:dark;
}
:root.alerta{--beam:var(--warn)}

/* ================= base ================= */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;transition:background .4s}
h1,h2,h3{font-family:"Bricolage Grotesque",Figtree,sans-serif;margin:0;letter-spacing:-.015em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;text-align:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:8px}
svg{display:block}
[hidden]{display:none!important}
.muted{color:var(--mute)}
.small{font-size:13px}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}

/* ================= barra lateral ================= */
.side{position:fixed;inset:0 auto 0 0;width:76px;z-index:30;background:var(--side);color:#fff;display:flex;flex-direction:column;padding:18px 14px 16px;transition:width .38s var(--ease),background .4s}
.wide .side{width:244px}
.brand{display:flex;align-items:center;gap:12px;height:48px;padding-left:2px;margin-bottom:6px;white-space:nowrap}
.brand b{font-family:"Bricolage Grotesque";font-size:23px;font-weight:750;letter-spacing:-.035em}
.lbl{opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .3s var(--ease);white-space:nowrap;pointer-events:none}
.wide .lbl{opacity:1;transform:none;transition-delay:.12s;pointer-events:auto}
.fold{position:relative;display:flex;align-items:center;gap:14px;height:40px;padding:0 12px;border-radius:12px;color:rgba(255,255,255,.55);margin-bottom:10px;white-space:nowrap}
.fold:hover{color:#fff;background:var(--side-hi)}
.fold svg{width:20px;height:20px;flex:none;transition:transform .38s var(--ease)}
.wide .fold svg{transform:rotate(180deg)}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a{position:relative;display:flex;align-items:center;gap:14px;height:46px;padding:0 13px;border-radius:13px;color:rgba(255,255,255,.66);font-weight:550;white-space:nowrap}
.nav a svg{width:21px;height:21px;flex:none;transition:transform .3s var(--ease)}
.nav a:hover{background:var(--side-hi);color:#fff}
.nav a:hover svg{transform:scale(1.1)}
.nav a.on{background:var(--side-hi);color:#fff}
.nav a.on svg{color:var(--acc)}
.nav a.on::before{content:"";position:absolute;left:-14px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--acc);animation:grow .4s var(--ease)}
@keyframes grow{from{transform:scaleY(0)}}
.badge{position:absolute;left:30px;top:7px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--warn);color:#2B1B00;font-size:11px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px var(--side);animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.2)}}
.app:not(.wide) .nav a:hover::after,.app:not(.wide) .fold:hover::after,.app:not(.wide) .side-foot button:hover::after{content:attr(data-tip);position:absolute;left:62px;top:50%;transform:translateY(-50%);background:var(--ink);color:var(--bg);font-size:13px;font-weight:600;padding:5px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;animation:tip .2s var(--ease)}
@keyframes tip{from{opacity:0;transform:translate(-4px,-50%)}}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.side-foot button{display:flex;align-items:center;gap:14px;height:44px;padding:0 13px;border-radius:12px;color:rgba(255,255,255,.6);white-space:nowrap;position:relative}
.side-foot button:hover{background:var(--side-hi);color:#fff}
.side-foot svg{width:20px;height:20px;flex:none}

main{margin-left:76px;padding:28px 36px 70px;transition:margin-left .38s var(--ease)}
.wide main{margin-left:244px}
.wrap{max-width:1120px;margin:0 auto}

/* ================= logos de Faro ================= */
.mark{display:block;flex:none}
.mark .m-bg{fill:var(--acc)}
.mark .m-fg{fill:var(--brand)}
.mark .m-st{fill:none;stroke:var(--brand);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mark .m-hi{fill:#fff}
.mark @keyframes sway{from{transform:rotate(-9deg)}to{transform:rotate(7deg)}}
.mark .draw{stroke-dasharray:80;stroke-dashoffset:80;animation:draw 1.6s var(--ease) .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.mark .ring{transform-origin:9px 16px;animation:ring 2.8s ease-out infinite}
.mark .ring.r2{animation-delay:1.4s}
@keyframes ring{0%{opacity:0;transform:scale(.6)}25%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
.mark .fan{transform-origin:12px 9px;animation:fan .9s var(--ease) both}
.mark .fan.f2{transform-origin:12px 16px;animation-delay:.15s}
@keyframes fan{from{transform:scaleX(0)}}

/* ================= cabecera con el haz ================= */
.hero{position:relative;overflow:hidden;border-radius:var(--r-l);min-height:230px;padding:34px 36px;color:#fff;display:flex;align-items:center;isolation:isolate;
  background:radial-gradient(90% 130% at 82% 40%,var(--brand-2) 0%,var(--brand) 55%,color-mix(in oklab,var(--brand) 70%,#000) 100%)}
.hero .txt{position:relative;z-index:3;max-width:520px}
.hero .when{color:rgba(255,255,255,.62);font-size:14px}
.hero h1{font-size:clamp(32px,4.4vw,48px);font-weight:750;line-height:1.02;letter-spacing:-.035em;margin:6px 0 14px}
.hero .line{display:inline-flex;align-items:center;gap:10px;color:rgba(255,255,255,.88);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:7px 14px 7px 12px;border-radius:99px;font-size:14.5px;transition:background .25s,transform .25s var(--ease)}
.hero .line:hover{background:rgba(255,255,255,.14);transform:translateX(3px)}
.hero .line i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:live 2s infinite}
.hero .line.off i{background:rgba(255,255,255,.4);animation:none}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--ok) 70%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
.hero.alerta h1{color:color-mix(in oklab,var(--warn) 55%,#fff)}

.lamp{position:absolute;right:16%;top:44%;width:0;height:0;z-index:1}
.lamp .beam{position:absolute;left:-760px;top:-760px;width:1520px;height:1520px;border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in oklab,var(--beam) 14%,transparent) 6deg,
    color-mix(in oklab,var(--beam) 46%,transparent) 14deg,
    color-mix(in oklab,var(--beam) 58%,transparent) 18deg,
    color-mix(in oklab,var(--beam) 14%,transparent) 28deg,
    transparent 36deg 180deg,
    color-mix(in oklab,var(--beam) 8%,transparent) 188deg,
    color-mix(in oklab,var(--beam) 26%,transparent) 197deg,
    color-mix(in oklab,var(--beam) 8%,transparent) 206deg,
    transparent 214deg);
  -webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.9) 6%,rgba(0,0,0,.35) 28%,transparent 52%);
          mask:radial-gradient(circle,#000 0,rgba(0,0,0,.9) 6%,rgba(0,0,0,.35) 28%,transparent 52%);
  filter:blur(6px);mix-blend-mode:screen;animation:spin 18s linear infinite}
.alerta .lamp .beam{animation-duration:7s}
@keyframes spin{to{transform:rotate(360deg)}}
.lamp .halo{position:absolute;left:-90px;top:-90px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in oklab,var(--beam) 55%,transparent) 0,color-mix(in oklab,var(--beam) 14%,transparent) 35%,transparent 70%);
  animation:breathe 9s ease-in-out infinite}
.alerta .lamp .halo{animation-duration:3.5s}
@keyframes breathe{0%,100%{transform:scale(.85);opacity:.75}50%{transform:scale(1.1);opacity:1}}
.lamp .core{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px color-mix(in oklab,var(--beam) 60%,#fff),0 0 18px 6px color-mix(in oklab,var(--beam) 80%,transparent)}
.lamp .post{position:absolute;left:-1px;top:10px;width:2px;height:120px;background:linear-gradient(rgba(255,255,255,.35),transparent)}
.sea{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:0;
  background:linear-gradient(to bottom,rgba(255,255,255,.07),transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.18),rgba(0,0,0,.32))}
.glint{position:absolute;right:calc(16% - 70px);bottom:0;width:140px;height:34%;z-index:1;
  background:repeating-linear-gradient(to bottom,color-mix(in oklab,var(--beam) 45%,transparent) 0 2px,transparent 2px 9px);
  -webkit-mask:radial-gradient(50% 100% at 50% 0,#000,transparent 85%);mask:radial-gradient(50% 100% at 50% 0,#000,transparent 85%);
  animation:shimmer 3s ease-in-out infinite alternate}
@keyframes shimmer{from{transform:scaleX(.8);opacity:.35}to{transform:scaleX(1.1);opacity:.65}}
.hero .cta{display:flex;width:fit-content;align-items:center;gap:8px;margin-top:12px;background:var(--warn);color:#2B1B00;font-weight:700;padding:9px 16px;border-radius:12px;transition:transform .25s var(--ease)}
.hero .cta:hover{transform:translateY(-2px)}
.hero .cta svg{width:16px;height:16px}

/* ================= bloques plegables ================= */
.blk{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);margin-top:18px;transition:background .4s,border-color .4s}
.blk > header{display:flex;align-items:center;gap:12px;padding:16px 18px 16px 22px}
.tog{display:flex;align-items:center;gap:10px;flex:1;min-width:0;border-radius:10px}
.tog h2{font-size:18px;font-weight:650}
.tog .chev{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;color:var(--acc-ink);background:color-mix(in oklab,var(--acc) 14%,transparent);transition:transform .35s var(--ease),background .2s}
.tog .chev svg{width:15px;height:15px}
.tog:hover .chev{background:var(--line);color:var(--ink)}
.blk.closed .tog .chev{transform:rotate(-90deg)}
.blk > header .extra{font-size:13.5px;color:var(--mute);display:flex;align-items:center;gap:10px}
.body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .42s var(--ease)}
.blk.closed .body{grid-template-rows:0fr}
.inner{overflow:hidden;min-height:0}
.pad{padding:2px 22px 22px;transition:opacity .3s,transform .42s var(--ease)}
.blk.closed .pad{opacity:0;transform:translateY(-8px)}
.blk.closed{background:color-mix(in oklab,var(--card) 70%,var(--bg))}

/* ================= estado del VPS ================= */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.met{background:var(--soft);border-radius:var(--r-m);padding:16px 18px;min-width:0;transition:transform .3s var(--ease)}
.met:hover{transform:translateY(-2px)}
.met .k{font-size:13.5px;color:var(--mute);display:flex;justify-content:space-between}
.met .v{font-family:"Bricolage Grotesque";font-size:32px;font-weight:650;letter-spacing:-.025em;margin:2px 0 12px;white-space:nowrap}
.met .v small{font-family:Figtree;font-size:14px;font-weight:500;color:var(--mute);letter-spacing:0}
.bar{height:7px;background:color-mix(in oklab,var(--line) 70%,transparent);border-radius:7px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,color-mix(in oklab,var(--acc) 70%,var(--brand)),var(--acc));border-radius:7px;transition:width 1.1s var(--ease) .15s}
.bar i.hi{background:var(--warn)}
.spark{width:100%;height:30px;overflow:visible}
.spark path{fill:none;stroke:var(--acc);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.4s var(--ease) .2s forwards}
.spark path.area{stroke:none;fill:color-mix(in oklab,var(--acc) 14%,transparent);stroke-dasharray:none;stroke-dashoffset:0;animation:fade .8s 1s both}
@keyframes fade{from{opacity:0}}

/* ================= enlaces ================= */
.lgroup + .lgroup{margin-top:18px}
.lgroup h3{font-family:Figtree;font-size:13.5px;font-weight:600;color:var(--mute);letter-spacing:0;margin-bottom:10px}
.ltiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.lt{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r-m);background:var(--soft);border:1px solid transparent;min-width:0;
  transition:transform .3s var(--ease),border-color .25s,background .25s,box-shadow .3s}
.lt:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--acc) 55%,transparent);background:var(--card);box-shadow:0 10px 24px -14px color-mix(in oklab,var(--brand) 60%,transparent)}
.lt b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt small{display:block;color:var(--mute);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt .grow{min-width:0;flex:1}
.lt .arr{width:17px;height:17px;color:var(--mute);flex:none;transition:transform .3s var(--ease),color .2s}
.lt:hover .arr{transform:translate(3px,-3px);color:var(--acc-ink)}
.lt:hover .logo{transform:rotate(-6deg) scale(1.06)}
.logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;transition:transform .35s var(--ease),background .4s;
  background:linear-gradient(150deg,var(--brand-2),var(--brand));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 6px 14px -8px rgba(11,60,73,.7)}
.logo svg{width:54%;height:54%;transition:fill .3s}
/* logos de las apps: su forma original con su color, suavizado hacia la paleta */
.logo{background:linear-gradient(150deg,color-mix(in oklab,var(--c) 34%,var(--brand-2)),var(--brand))}
.logo svg{fill:color-mix(in oklab,var(--c) 62%,#fff)}
.logo.faro{background:none;box-shadow:none}
.logo.faro .mark{width:100%;height:100%}

/* ================= servicios ================= */
.svc{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:14px;padding:11px 10px;border-radius:14px;width:100%;cursor:pointer;transition:background .2s}
.row{position:relative}
.row + .row::before{content:"";position:absolute;left:10px;right:10px;top:0;height:1px;background:var(--line)}
.row:hover{background:var(--soft)}
.row:hover .logo{transform:scale(1.06)}
.row .grow{flex:1;min-width:0}
.row b{font-weight:600;display:block}
.row small{color:var(--mute);font-size:13px}
.row .open{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--acc-ink);padding:6px 10px;border-radius:9px}
.row .open:hover{background:color-mix(in oklab,var(--acc) 14%,transparent)}
.row .open svg{width:14px;height:14px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650;padding:3px 10px;border-radius:99px;white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor}
.p-ok{background:color-mix(in oklab,var(--ok) 14%,transparent);color:var(--ok)}
.p-warn{background:color-mix(in oklab,var(--warn) 18%,transparent);color:color-mix(in oklab,var(--warn) 70%,var(--ink))}
.p-bad{background:color-mix(in oklab,var(--bad) 14%,transparent);color:var(--bad)}
.p-mute{background:var(--soft);color:var(--mute)}
.p-warn i{animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}

/* ficha lateral */
.scrim{position:fixed;inset:0;z-index:60;background:color-mix(in oklab,var(--brand) 40%,transparent);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:12px;right:12px;bottom:12px;width:min(420px,calc(100vw - 24px));z-index:61;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  transform:translateX(calc(100% + 24px));transition:transform .45s var(--ease);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 60px -30px #0008}
.drawer.on{transform:none}
.drawer .top{display:flex;align-items:center;gap:14px;padding:22px 22px 18px;border-bottom:1px solid var(--line)}
.drawer .top .logo{width:52px;height:52px;border-radius:15px}
.drawer .top h2{font-size:21px;font-weight:650;margin-bottom:4px}
.drawer .x{margin-left:auto;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--mute)}
.drawer .x:hover{background:var(--soft);color:var(--ink)}
.drawer .x svg{width:18px;height:18px}
.drawer .cnt{padding:20px 22px;overflow:auto;flex:1}
.facts{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0 0 22px;font-size:14px}
.facts dt{color:var(--mute)}.facts dd{margin:0;font-weight:550;min-width:0;overflow-wrap:anywhere}
.drawer h3{font-size:15px;font-weight:650;margin-bottom:10px}
.log{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.8;background:var(--soft);border-radius:var(--r-m);padding:12px 14px;white-space:pre;overflow-x:auto}
.log .t{color:var(--mute)}.log .w{color:color-mix(in oklab,var(--warn) 75%,var(--ink))}
.drawer .foot{padding:16px 22px;border-top:1px solid var(--line)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:12px;font-weight:650;font-size:14px;border:1px solid var(--line);background:var(--card);transition:transform .25s var(--ease),border-color .2s,filter .2s}
.btn:hover{transform:translateY(-1px);border-color:var(--mute)}
.btn.pri{background:var(--pri);border-color:var(--pri);color:var(--on-pri)}
.btn.pri:hover{filter:brightness(1.12)}
.btn svg{width:16px;height:16px}
.btn.full{width:100%}

/* ================= otras páginas ================= */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:4px;flex-wrap:wrap}
.head h1{font-size:32px;font-weight:700;letter-spacing:-.03em}
.head p{margin:4px 0 0;color:var(--mute)}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:4px;gap:2px;position:relative;margin-top:18px;max-width:100%;overflow-x:auto}
.seg button{position:relative;z-index:1;padding:7px 15px;border-radius:9px;font-weight:600;font-size:14px;color:var(--mute);transition:color .25s;white-space:nowrap}
.seg button.on{color:var(--on-pri)}
.seg .knob{position:absolute;z-index:0;top:4px;bottom:4px;border-radius:9px;background:var(--pri);transition:left .35s var(--ease),width .35s var(--ease)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpi{background:var(--soft);border-radius:var(--r-m);padding:16px 18px}
.kpi > span{font-size:13.5px;color:var(--mute)}
.kpi b{display:block;font-family:"Bricolage Grotesque";font-size:30px;font-weight:650;letter-spacing:-.02em}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.list li:first-child{border-top:0;padding-top:0}
.list .when{color:var(--mute);font-size:13px;white-space:nowrap}
.viewer{display:flex;align-items:center;gap:14px}
.face{width:42px;height:42px;border-radius:13px;background:var(--soft);display:grid;place-items:center;font-family:"Bricolage Grotesque";font-weight:700;color:var(--acc-ink);flex:none}
.viewer b{font-family:"Bricolage Grotesque";font-size:18px;font-weight:650;display:block;line-height:1.2}
.chart{width:100%;height:auto;overflow:visible}
.chart rect.b{transform-origin:bottom;transform-box:fill-box;animation:rise-bar .7s var(--ease) both}
@keyframes rise-bar{from{transform:scaleY(0)}}
.legend{display:flex;gap:16px;font-size:13px;color:var(--mute);margin-top:8px;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.days{display:flex;align-items:center;gap:10px;width:45%}
.days .bar{flex:1}
.empty{padding:22px;text-align:center;color:var(--mute);background:var(--soft);border-radius:var(--r-m)}

/* ================= entrada de la página ================= */
.rise{animation:rise .6s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* ================= acceso ================= */
.login{min-height:100vh;display:grid;grid-template-columns:1.15fr 1fr;background:var(--bg)}
.login .hero{border-radius:0;align-items:flex-end;min-height:100vh;padding:44px 48px}
.login .hero .lamp{right:30%;top:38%}
.login .hero .glint{right:calc(30% - 70px);height:28%}
.login .hero .sea{height:28%}
.login .hero h1{font-size:clamp(36px,4.5vw,58px)}
.login .hero p{color:rgba(255,255,255,.7);margin:0;max-width:380px}
.login .lb{position:absolute;top:40px;left:48px;z-index:3;display:flex;align-items:center;gap:12px}
.login .lb b{font-family:"Bricolage Grotesque";font-size:24px;font-weight:750;letter-spacing:-.035em}
.login form{align-self:center;justify-self:center;width:100%;max-width:380px;padding:32px 24px}
.login form h2{font-size:30px;font-weight:700;letter-spacing:-.03em;margin-bottom:6px}
.login form > p{color:var(--mute);margin:0 0 26px}
.login .btn{width:100%;padding:14px;font-size:15px;border-radius:14px}
.or{display:flex;align-items:center;gap:12px;color:var(--mute);font-size:13px;margin:22px 0 18px}
.or::before,.or::after{content:"";height:1px;flex:1;background:var(--line)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13.5px;font-weight:600}
.field input{font:inherit;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field input:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in oklab,var(--acc) 20%,transparent)}
.hint{font-size:13px;color:var(--mute);margin-top:18px;text-align:center}


/* ================= piezas de la versión real ================= */
.toast{position:fixed;left:50%;bottom:24px;z-index:90;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:var(--ink);color:var(--bg);font-weight:600;font-size:14px;padding:10px 16px;border-radius:12px;transition:transform .35s var(--ease),opacity .3s}
.toast.on{transform:translate(-50%,0);opacity:1}
.toast.bad{background:var(--bad);color:#fff}
.note{font-size:13.5px;color:var(--mute);margin:0}
.warnbox{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:var(--r-m);background:color-mix(in oklab,var(--warn) 12%,transparent);color:color-mix(in oklab,var(--warn) 70%,var(--ink));font-size:14px;margin-bottom:14px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hero .ctas .cta{margin-top:0}
.form{display:grid;grid-template-columns:1fr 2fr 1fr auto;gap:8px;align-items:end;padding:12px;background:var(--soft);border-radius:var(--r-m);margin:8px 0 4px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--mute);font-weight:600;min-width:0}
.form input,.form select{font:inherit;font-size:14px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-width:0;width:100%}
.form input:focus,.form select:focus{outline:0;border-color:var(--acc)}
.form .acts{display:flex;gap:6px}
.form.svcf{grid-template-columns:1.2fr 2fr auto auto}
.chk{flex-direction:row!important;align-items:center;gap:6px!important;white-space:nowrap;padding-bottom:10px}
.chk input{width:auto}
.lk{font-weight:600;color:var(--acc-ink)}
.lk.del{color:var(--bad)}
.lk:hover{text-decoration:underline}
.nt,.nt *{transition:none!important}
.skel{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--soft),var(--line),var(--soft));background-size:200% 100%;animation:skel 1.4s infinite}
@keyframes skel{to{background-position:-200% 0}}
.full-link{display:inline-flex;align-items:center;gap:8px}
@media (max-width:860px){.form,.form.svcf{grid-template-columns:1fr 1fr}.form .acts{grid-column:1/-1}}
/* ================= móvil ================= */
.tabbar,.mtop{display:none}
@media (max-width:1000px){.metrics{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  .side{display:none}
  main,.wide main{margin-left:0;padding:16px 16px calc(100px + env(safe-area-inset-bottom))}
  .mtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .mtop .brand{height:auto;margin:0}.mtop .brand b{color:var(--ink);font-size:22px}
  .mtop button{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--mute)}
  .mtop button svg{width:20px;height:20px}
  .hero{min-height:210px;padding:26px 22px;align-items:flex-start}
  .lamp{right:14%;top:32%}.glint{right:calc(14% - 70px)}
  .tabbar{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;background:var(--side);border-radius:20px;padding:6px;box-shadow:0 14px 30px -14px #000a}
  .tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.55);padding:7px 0;border-radius:14px;transition:background .25s}
  .tabbar a svg{width:21px;height:21px}
  .tabbar a.on{color:#fff;background:var(--side-hi)}.tabbar a.on svg{color:var(--acc)}
  .tabbar .badge{left:50%;margin-left:4px;top:2px}
  .blk > header{padding:14px 14px 14px 18px}.pad{padding:2px 18px 18px}
  .kpis{gap:8px}.kpi{padding:12px}.kpi b{font-size:22px}
  .login{grid-template-columns:1fr}
  .login .hero{min-height:320px;padding:28px 24px}
  .login .lb{top:26px;left:24px}
  .login .hero .lamp{right:18%;top:36%}
  .login form{padding:28px 20px 60px}
  .drawer{top:auto;left:8px;right:8px;width:auto;bottom:8px;max-height:82vh;transform:translateY(calc(100% + 20px))}
  .hide-m,.row .open{display:none}
}
@media (max-width:520px){
  .metrics{gap:8px}.met{padding:13px 14px}.met .v{font-size:24px}
  .ltiles{grid-template-columns:1fr 1fr}
  .lt{flex-direction:column;align-items:flex-start;gap:10px}.lt .arr{position:absolute;right:12px;top:14px}
  .kpis{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .lamp .beam{transform:rotate(200deg)}
}