@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* Layout: producto SaaS. Acceso tipo DocSend (panel compacto sobre la portada desenfocada), visor sin ruido, panel con sidebar azul noche Nexen y contenido claro. Un solo look claro, deliberado. */
:root{
  --navy:#0B0D12;--navy-2:#171A22;--navy-3:#232733;
  --blue:#3D73A8;--blue-soft:#EAF3FB;
  --sky:#C8E0F4;--sky-2:#B3D3EE;--sky-3:#8DBBE2;
  --bg:#F3F7FB;--surface:#FFFFFF;--fg:#0B0D12;--text:#3A4048;--muted:#6E747C;--line:#DCE5EE;--line-2:#EDF2F7;
  --amber:#C9792B;--green:#2E9B6A;
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--fg);font-size:14px;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:8px;background:var(--blue);color:#fff;font-weight:600;font-size:13.5px}
.btn:hover{background:#2258E6}
.btn.sec{background:var(--surface);color:var(--fg);border:1px solid var(--line)}
.btn.sec:hover{border-color:#C9CEDA}
.btn.sm{height:32px;padding:0 12px;font-size:12.5px}
.field{width:100%;height:44px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;outline:none}
.field:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;letter-spacing:-.01em}
.logo svg{flex:none}
.nx{display:inline-block;height:32px;aspect-ratio:783/182.5;background:url('/assets/deckroom-logo.svg') left center/contain no-repeat;flex:none}
.nx.w{background-image:url('/assets/deckroom-logo-white.svg')}
.nxc{display:inline-block;height:12px;aspect-ratio:375/94;background:currentColor;-webkit-mask:url('/assets/nexen-logo.png') center/contain no-repeat;mask:url('/assets/nexen-logo.png') center/contain no-repeat;flex:none;vertical-align:middle}
.side .nx{height:36px}
.side .brand{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:6px;padding:6px 10px 20px;color:#fff}
.side .brand .nx{-webkit-mask-position:left center;mask-position:left center}
.side .brand small{font-size:11.5px;color:#6E7A98;letter-spacing:.02em}
.ro{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:var(--blue-soft);color:#1E3A8A;font-size:12.5px;margin-bottom:4px}
.modal{position:fixed;inset:0;z-index:70;background:rgba(10,21,48,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.modal .box{width:100%;max-width:460px;padding:24px}
.modal h3{margin:0 0 6px;font-size:18px}
.modal p{margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.5}
.copyrow{display:flex;gap:8px}
.copyrow .field{height:40px;font-size:12.5px;color:var(--text)}
.opt{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line-2);font-size:13px}
.opt small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.sw{width:36px;height:20px;border-radius:20px;background:var(--line);position:relative;flex:none}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.sw.on{background:var(--blue)}.sw.on::after{left:18px}
.blurmail{filter:blur(4px);user-select:none}

/* barra de demo */
.demobar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:8px 16px;background:#0B0F19;color:#C8CDD8;font-size:12px}
.seg{display:flex;background:#1B2130;border-radius:7px;padding:3px}
.seg button{padding:5px 12px;border-radius:5px;font-weight:600;font-size:12px;color:#97A0B3}
.seg button.on{background:#fff;color:#0B0F19}

/* ===== ACCESO (estilo DocSend) ===== */
.gate{position:relative;min-height:calc(100vh - 44px);display:flex;align-items:center;justify-content:center;padding:40px 16px;overflow:hidden;background:#1A2234}
.gate-bg{position:absolute;inset:-40px;display:flex;align-items:center;justify-content:center;filter:blur(14px) saturate(.9);opacity:.55;transform:scale(1.05)}
.gate-bg .slide{width:min(1100px,120%)}
.gate-shade{position:absolute;inset:0;background:rgba(10,21,48,.55)}
.access{position:relative;width:100%;max-width:400px;background:var(--surface);border-radius:14px;box-shadow:0 24px 60px rgba(4,10,28,.35);overflow:hidden}
.access-top{padding:28px 28px 0;display:flex;gap:14px;align-items:center}
.sl{width:46px;height:46px;border-radius:10px;background:#0F2E2A;display:grid;place-items:center;color:#7FE3BE;font-weight:700;font-size:18px;flex:none}
.access-top b{display:block;font-size:16px}
.access-top span{font-size:13px;color:var(--muted)}
.access form{padding:22px 28px 26px}
.access label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.consent{display:flex;gap:9px;align-items:flex-start;margin:14px 0 18px;font-size:12px;color:var(--muted);line-height:1.5}
.consent input{margin-top:2px;accent-color:var(--blue)}
.access .btn{width:100%;height:44px}
.err{color:#D93A3A;font-size:12.5px;margin-top:8px;min-height:16px}
.access-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 28px;background:var(--bg);border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.access-foot .logo{font-size:12.5px;color:var(--fg)}

/* ===== VISOR ===== */
.viewer{display:flex;flex-direction:column;height:calc(100vh - 44px);background:#1A2234;color:#fff}
.vbar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px;padding:0 18px;background:var(--navy)}
.vbar .who{display:flex;align-items:center;gap:12px;min-width:0}
.vbar .sl{width:32px;height:32px;border-radius:8px;font-size:14px}
.vbar b{font-size:14px}
.vbar small{display:block;color:#8F9BBA;font-size:12px}
.vbar .shared{font-size:12px;color:#8F9BBA;display:flex;align-items:center;gap:8px}
.vbar .shared .nx{height:24px}
.access-foot .nx{height:24px}
.top .nx{height:32px}
.stagewrap{flex:1;display:flex;min-height:0}
.thumbs{width:150px;flex:none;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:10px;background:#141B2B;border-right:1px solid #232C42}
.thumbs button{display:flex;gap:8px;align-items:flex-start;text-align:left;color:#7D89A6;font-size:11px}
.thumbs button .t{flex:1;aspect-ratio:16/9;border-radius:4px;overflow:hidden;position:relative;outline:2px solid transparent;outline-offset:1px}
.thumbs button.on{color:#fff}.thumbs button.on .t{outline-color:var(--blue)}
.thumbs .t .s{transform:scale(.115);transform-origin:0 0;width:870%;height:870%}
.stage{flex:1;display:flex;align-items:center;justify-content:center;padding:28px 72px;position:relative;min-width:0}
.slide{width:100%;max-width:980px;aspect-ratio:16/9;position:relative;overflow:hidden;background:#F3F6F2;color:#0E1B1A;border-radius:4px;box-shadow:0 18px 50px rgba(0,0,0,.4)}
.stage .slide{max-height:100%}
.wm{position:absolute;right:16px;bottom:12px;font-size:10.5px;color:rgba(14,27,26,.28);pointer-events:none}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center}
.nav:hover{background:rgba(255,255,255,.2)}
.nav.prev{left:16px}.nav.next{right:16px}
.vfoot{display:flex;align-items:center;justify-content:center;gap:16px;height:48px;background:var(--navy);font-size:12.5px;color:#8F9BBA}
.vfoot b{color:#fff;font-weight:600}
.pbar{width:180px;height:3px;border-radius:3px;background:#24345F;overflow:hidden}
.pbar i{display:block;height:100%;background:#fff;transition:width .25s}

/* slides de la startup ficticia (su propia marca, no la de Nexen) */
.s{position:absolute;inset:0;padding:6% 7%;display:flex;flex-direction:column;justify-content:center;gap:3%;font-family:Georgia,'Times New Roman',serif}
.s h3{margin:0;font-size:clamp(18px,3.4vw,42px);letter-spacing:-.02em;line-height:1.05;font-weight:400}
.s p{margin:0;font-family:var(--font);font-size:clamp(10px,1.4vw,16px);color:#3E5552;max-width:58ch;line-height:1.45}
.s .tag{font-family:var(--font);font-size:clamp(8px,1vw,12px);font-weight:600;color:#2E8B6F}
.s.dark{background:#0F2E2A;color:#EAF7F1}.s.dark p{color:#A9CFC3}
.s .nums{display:flex;gap:4%}
.s .nums div{flex:1;border-top:2px solid #2E8B6F;padding-top:2%}
.s .nums b{display:block;font-size:clamp(16px,3vw,38px);font-weight:400}
.s .nums small{font-family:var(--font);font-size:clamp(8px,1vw,12px);color:#5D7572}
.s .bars{display:flex;align-items:flex-end;gap:3%;height:40%}
.s .bars i{flex:1;background:#2E8B6F}

/* ===== PANEL ===== */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:calc(100vh - 44px)}
.side{background:var(--navy);color:#C5CCDD;padding:18px 12px;display:flex;flex-direction:column;gap:4px}
.side .logo{color:#fff;padding:4px 10px 18px}
.side .new{margin:0 4px 16px;height:38px}
.side h6{margin:14px 10px 6px;font-size:11.5px;font-weight:500;color:#6E7A98}
.side .item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13.5px;text-align:left;width:100%}
.side .item:hover{background:var(--navy-2)}
.side .item.on{background:var(--navy-3);color:#fff}
.side .item .dot{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:10.5px;font-weight:700;flex:none}
.side .item em{margin-left:auto;font-style:normal;font-size:11.5px;color:#6E7A98}
.side .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid var(--navy-2);font-size:12.5px}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:700;flex:none}

main{min-width:0}
.dhead{background:var(--surface);border-bottom:1px solid var(--line);padding:22px clamp(16px,3vw,32px) 0}
.crumbs{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.dtop{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cov{width:112px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;position:relative;border:1px solid var(--line);flex:none}
.cov .s{transform:scale(.115);transform-origin:0 0;width:870%;height:870%}
.dtop h1{margin:0;font-size:24px;letter-spacing:-.02em;font-weight:700}
.dtop .meta{font-size:13px;color:var(--muted);margin-top:4px}
.dtop .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--green);margin-left:8px;vertical-align:3px}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.tabs{display:flex;gap:24px;margin-top:20px;overflow-x:auto}
.tabs button{padding:10px 0 12px;font-size:13.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--fg);border-bottom-color:var(--blue)}
.tabs button em{font-style:normal;font-weight:500;color:var(--muted);margin-left:4px}

.content{padding:24px clamp(16px,3vw,32px) 40px;display:flex;flex-direction:column;gap:20px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:12px}
.stat{padding:18px 20px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat span{font-size:12.5px;color:var(--muted)}
.stat strong{display:block;font-size:28px;font-weight:700;letter-spacing:-.02em;margin-top:6px}
.stat small{font-size:12px;color:var(--green);font-weight:600}
.box{background:var(--surface);border:1px solid var(--line);border-radius:12px;min-width:0}
.box-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 20px 0}
.box-h h3{margin:0;font-size:15px;font-weight:700}
.box-h p{margin:0;font-size:12.5px;color:var(--muted)}
.box-b{padding:18px 20px 20px}

/* gráfico por página con miniaturas (seña de identidad DocSend) */
.pages{overflow-x:auto}
.pgrid{display:grid;grid-template-columns:repeat(8,minmax(78px,1fr));gap:10px;min-width:680px}
.pcol{display:flex;flex-direction:column;gap:8px}
.ptrack{height:150px;display:flex;align-items:flex-end;border-bottom:1px solid var(--line);position:relative}
.ptrack i{width:100%;border-radius:5px 5px 0 0;background:var(--navy)}
.pcol.top .ptrack i{background:var(--blue)}
.ptrack b{position:absolute;left:0;right:0;text-align:center;font-size:11.5px;font-weight:600;color:var(--text)}
.pthumb{aspect-ratio:16/9;border-radius:4px;overflow:hidden;position:relative;border:1px solid var(--line)}
.pthumb .s{transform:scale(.09);transform-origin:0 0;width:1112%;height:1112%}
.pcol footer{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted)}
.pcol footer span:last-child{font-weight:600;color:var(--text)}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px}

.split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px}
.visits{width:100%;border-collapse:collapse}
.visits td{padding:12px 20px;border-top:1px solid var(--line-2);vertical-align:middle}
.visits tr{cursor:pointer}
.visits tr:hover td{background:#FAFBFD}
.visits tr.sel td{background:var(--blue-soft)}
.vwho{display:flex;align-items:center;gap:11px;min-width:0}
.vwho b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vwho span{font-size:12px;color:var(--muted)}
.tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:5px;font-size:11px;font-weight:600;background:var(--blue);color:#fff;vertical-align:1px}
.comp{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text);white-space:nowrap}
.comp .track{width:70px;height:5px;border-radius:5px;background:var(--line-2);overflow:hidden}
.comp .track i{display:block;height:100%;background:var(--navy);border-radius:5px}
.comp .track i.full{background:var(--green)}
.when{font-size:12.5px;color:var(--muted);text-align:right;white-space:nowrap}
.tbl{overflow-x:auto}
.visits{min-width:620px}

.detail .who{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.detail .who b{display:block;font-size:15px}
.detail .who span{font-size:12.5px;color:var(--muted)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:18px}
.facts div{background:var(--surface);padding:12px 14px}
.facts span{font-size:11.5px;color:var(--muted)}
.facts b{display:block;font-size:16px;margin-top:3px}
.mini{display:flex;flex-direction:column;gap:7px}
.mini div{display:grid;grid-template-columns:22px 1fr 50px;gap:10px;align-items:center;font-size:12px;color:var(--muted)}
.mini span{height:8px;background:var(--line-2);border-radius:4px;overflow:hidden}
.mini span i{display:block;height:100%;background:var(--navy);border-radius:4px}
.mini div.top span i{background:var(--blue)}
.mini em{font-style:normal;text-align:right;color:var(--text);font-weight:600}
.signal{margin-top:16px;padding:12px 14px;border-radius:10px;background:#FFF6EB;color:#8A4B06;font-size:12.5px;line-height:1.5}

.linkrow{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--line-2)}
.linkrow .av{border-radius:8px}
.linkrow div{flex:1;min-width:0}
.linkrow b{display:block;font-size:13.5px}
.linkrow small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.addlink{display:flex;gap:8px;padding:14px 20px 18px;border-top:1px solid var(--line-2)}
.toast{position:fixed;bottom:calc(22px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%) translateY(120px);background:var(--navy);color:#fff;padding:11px 16px;border-radius:10px;font-size:13px;box-shadow:0 10px 30px rgba(10,21,48,.25);transition:transform .25s;z-index:60}
.toast.show{transform:translateX(-50%) translateY(0)}

/* pulido final */
.stat{display:flex;flex-direction:column}
.stat .spark{margin-top:10px;height:28px;width:100%}
.stat .delta{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--green);margin-top:2px}
.stat .delta.neutral{color:var(--muted);font-weight:500}
.dtop h1{font-size:26px}
.box{box-shadow:0 1px 2px rgba(10,21,48,.04)}
.pcol{transition:opacity .15s}
.pgrid:hover .pcol{opacity:.55}.pgrid .pcol:hover{opacity:1}
.pthumb{transition:transform .15s}.pcol:hover .pthumb{transform:translateY(-2px);box-shadow:0 6px 16px rgba(10,21,48,.12)}
.int{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;white-space:nowrap}
.int::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.int.hi{color:var(--green)}.int.md{color:var(--amber)}.int.lo{color:var(--muted)}
.side .nav-sec{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.side .nav-sec .item svg{opacity:.7}
.stage .nav{opacity:0;transition:opacity .2s}.stage:hover .nav,.nav:focus-visible{opacity:1}
.stage .slide{animation:fade .22s ease}
@keyframes fade{from{opacity:.4;transform:scale(.995)}to{opacity:1;transform:none}}
.access{animation:rise .35s ease}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.access-top .sl{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.secure{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:12px;justify-content:center}
@media (hover:none){.stage .nav{opacity:1}}

/* v6: verificación, interacción y analítica avanzada */
.otp{display:flex;gap:8px;justify-content:space-between;margin:4px 0 6px}
.otp input{width:46px;height:52px;text-align:center;font-size:20px;font-weight:700;border-radius:8px;border:1px solid var(--line);font-family:var(--font);color:var(--fg);background:var(--surface);outline:none}
.otp input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.hint{font-size:12.5px;color:var(--muted);margin:0 0 14px;line-height:1.5}
.linkish{color:var(--blue);font-weight:600;font-size:12.5px}
.vact{display:flex;gap:8px}
.vbtn{height:34px;padding:0 12px;border-radius:8px;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);color:#fff}
.vbtn:hover{background:rgba(255,255,255,.16)}
.vbtn.pri{background:#fff;color:var(--navy)}
.vbtn.pri:hover{background:#E6EBF5}
.vbtn.done{background:var(--green);color:#fff}
.qbox{position:absolute;right:18px;bottom:18px;width:min(320px,calc(100% - 36px));background:#fff;color:var(--fg);border-radius:12px;padding:14px;box-shadow:0 18px 40px rgba(0,0,0,.35);z-index:5}
.qbox b{font-size:13px}.qbox textarea{width:100%;margin:10px 0;min-height:70px;border-radius:8px;border:1px solid var(--line);padding:10px;font:inherit;font-size:13px;resize:vertical;outline:none}
.qbox textarea:focus{border-color:var(--blue)}
.shield{position:absolute;inset:0;background:#0A1530;color:#fff;display:grid;place-items:center;text-align:center;font-size:14px;z-index:4;padding:20px}
.ring{--v:0;width:58px;height:58px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--v)*1%),var(--line-2) 0);position:relative}
.ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
.ring b{position:relative;font-size:17px;font-weight:700}
.score{display:inline-grid;place-items:center;min-width:34px;height:24px;padding:0 7px;border-radius:6px;font-size:12px;font-weight:700}
.score.hi{background:#E3F6EC;color:#0E7A4E}.score.md{background:#FFF1E0;color:#A65A08}.score.lo{background:var(--line-2);color:var(--muted)}
.sect{margin-top:18px}
.sect h4{margin:0 0 10px;font-size:12.5px;font-weight:600;color:var(--muted)}
.path{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.path span{min-width:26px;height:26px;padding:0 6px;border-radius:6px;display:grid;place-items:center;font-size:11.5px;font-weight:700;background:var(--line-2);color:var(--text)}
.path span.back{background:#FFF1E0;color:#A65A08}
.path span.skip{background:transparent;border:1px dashed var(--line);color:var(--muted)}
.path i{font-style:normal;color:#C3C8D4;font-size:11px}
.mini div{grid-template-columns:22px 1fr 78px 74px}
.mini .spd{height:auto;background:none;overflow:visible;white-space:nowrap;font-size:11px;font-weight:600;text-align:right}
.spd.f{color:var(--muted)}.spd.n{color:var(--text)}.spd.d{color:var(--blue)}
.mini .rv{color:var(--amber);font-weight:700;margin-left:4px}
.tl{display:flex;flex-direction:column;gap:0}
.tl div{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:start;font-size:12.5px;padding-bottom:12px;position:relative}
.tl div::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--navy);margin-top:4px;z-index:1}
.tl div:not(:last-child)::after{content:"";position:absolute;left:4px;top:13px;bottom:0;width:1px;background:var(--line)}
.tl div.alert::before{background:#D93A3A}.tl div.good::before{background:var(--green)}.tl div.q::before{background:var(--blue)}
.tl em{font-style:normal;color:var(--muted);font-size:12px;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:7px;background:var(--line-2);font-size:12px;color:var(--text)}
.chip.red{background:#FDECEC;color:#B42323}.chip.green{background:#E3F6EC;color:#0E7A4E}.chip.blue{background:var(--blue-soft);color:#1E3A8A}
.pflags{display:flex;gap:4px;justify-content:center;min-height:18px}
.pflag{font-size:10.5px;font-weight:600;padding:1px 5px;border-radius:4px}
.pflag.rv{background:#FFF1E0;color:#A65A08}.pflag.sk{background:var(--line-2);color:var(--muted)}.pflag.q{background:var(--blue-soft);color:#1E3A8A}
.hours{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;align-items:end;height:80px}
.hours i{background:var(--navy);border-radius:3px 3px 0 0;min-height:2px;opacity:.85}
.hours i.pk{background:var(--blue);opacity:1}
.haxis{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;margin-top:6px;font-size:10px;color:var(--muted);text-align:center}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fwd{display:flex;flex-direction:column;gap:12px}
.fwd .org{display:flex;align-items:center;gap:10px}
.fwd .org b{font-size:13.5px}.fwd .org span{font-size:12px;color:var(--muted)}
.stack{display:flex}.stack .av{width:26px;height:26px;font-size:10px;border:2px solid #fff;margin-left:-6px}.stack .av:first-child{margin-left:0}
.qlist{display:flex;flex-direction:column}
.qitem{display:grid;grid-template-columns:auto 1fr auto;gap:14px;padding:14px 20px;border-top:1px solid var(--line-2);align-items:start}
.qitem .pthumb{width:84px}
.qitem p{margin:4px 0 0;font-size:13.5px;color:var(--fg);line-height:1.5}
.qitem small{font-size:12px;color:var(--muted)}
@media (max-width:980px){.three{grid-template-columns:1fr}}
[data-tab]{display:none}[data-tab].on{display:flex}

@media (max-width:980px){
  .app{grid-template-columns:1fr}.side{flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px}
  .side .logo{padding:4px 8px}.side h6,.side .me,.side .item:not(.on){display:none}.side .new{margin:0 0 0 auto}
  .stats{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .split{grid-template-columns:1fr}.thumbs{display:none}.stage{padding:14px 8px 64px}
  .nav{top:auto;bottom:10px;transform:none}.dtop .acts{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== versión real ===== */
.pthumb img,.cov img,.thumbs .t img{width:100%;height:100%;object-fit:cover;display:block}
.pthumb,.cov,.thumbs .t{background:var(--line-2)}
.gate-bg img{width:min(1100px,120%);max-width:none;border-radius:4px}
#slide canvas{width:100%;height:100%;display:block}
.stage .slide{background:#fff}
.loading{display:grid;place-items:center;color:#8F9BBA;font-size:13px;height:100%}
.empty{padding:48px 24px;text-align:center;color:var(--muted)}
.empty h3{color:var(--fg);font-size:18px;margin:0 0 8px}
.empty p{margin:0 auto 18px;max-width:46ch;line-height:1.55}
.login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.login-l{background:var(--navy);color:#fff;padding:48px clamp(20px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:30px}
.login-l .nx{height:50px}
.login-l h1{font-size:clamp(30px,3.6vw,46px);letter-spacing:-.03em;line-height:1.05;margin:0 0 14px;max-width:14ch}
.login-l p{color:#9AA6C4;max-width:40ch;line-height:1.6;margin:0}
.login-r{display:flex;align-items:center;justify-content:center;padding:32px 16px}
.login-r form{width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px}
.login-r h2{margin:0 0 8px;font-size:22px}
.login-r label{font-size:13px;font-weight:600}
.drop{border:1.5px dashed var(--line);border-radius:10px;padding:26px;text-align:center;color:var(--muted);cursor:pointer;font-size:13.5px;background:var(--bg)}
.drop.has{border-color:var(--green);color:var(--green);background:#F0FAF5}
.form-grid{display:flex;flex-direction:column;gap:6px}
.form-grid label{font-size:13px;font-weight:600;margin-top:10px}
.checkline{display:flex;gap:9px;align-items:center;font-size:13px;margin-top:12px}
.checkline input{accent-color:var(--blue)}
.progress-note{font-size:12.5px;color:var(--muted);margin-top:10px;min-height:18px}
.linkrow .off{opacity:.45}
.danger{color:#C42B2B}
@media (max-width:860px){.login{grid-template-columns:1fr}.login-l{min-height:auto}}
[hidden]{display:none!important}


/* ===================== TEMA NEXEN · relieve y color ===================== */
body{letter-spacing:-.005em}
/* botones con canto, como en la landing */
.btn{background:var(--navy);color:#fff;border-radius:999px;font-weight:600;box-shadow:0 3px 0 #000;transition:transform .12s,box-shadow .12s}
.btn:hover{background:var(--navy);transform:translateY(-1px);box-shadow:0 4px 0 #000}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #000}
.btn.sec{background:#fff;color:var(--fg);border:1.5px solid var(--fg);box-shadow:0 3px 0 var(--fg)}
.btn.sec:hover{border-color:var(--fg);box-shadow:0 4px 0 var(--fg)}
.btn.sm{border-radius:999px}
.field{border-radius:12px;border:1.5px solid var(--line)}
.field:focus{border-color:var(--fg);box-shadow:0 0 0 4px var(--blue-soft)}
/* tarjetas con relieve azul */
.box{border-radius:20px;border:1.5px solid var(--line);box-shadow:0 4px 0 var(--line)}
.box-h h3{font-size:16px;font-weight:700;letter-spacing:-.01em}
/* barra lateral negra con acento azul claro */
.side{background:var(--navy)}
.side .new{background:var(--sky);color:var(--navy);box-shadow:0 3px 0 var(--sky-3)}
.side .new:hover{background:var(--sky);box-shadow:0 4px 0 var(--sky-3)}
.side .item{border-radius:12px;font-weight:500}
.side .item.on{background:var(--sky);color:var(--navy)}
.side .item.on em{color:var(--navy)}
.side .item.on .dot{background:var(--navy)!important;color:var(--sky)!important}
.side .item .dot{border-radius:8px}
.nexen-card{background:var(--navy-3)!important;border-radius:14px!important}
/* cabecera del deck con fondo azul de marca y portada en 3D */
.dhead{background:var(--sky);border-bottom:0;position:relative;overflow:hidden}
.dhead::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(11,13,18,.08) 1.2px,transparent 1.2px);background-size:22px 22px;mask-image:linear-gradient(90deg,transparent,#000 60%);pointer-events:none}
.dhead > *{position:relative}
.crumbs{color:#3A4048}
.dtop h1{font-size:30px;font-weight:800;letter-spacing:-.035em}
.dtop .meta{color:#3A4048}
.cov{width:132px;border:0;border-radius:8px;transform:perspective(600px) rotateY(-16deg) rotateX(6deg);box-shadow:-2px 2px 0 #fff,-4px 4px 0 var(--sky-2),-6px 6px 0 var(--sky-3),-14px 22px 30px -12px rgba(11,13,18,.45)}
.status{color:var(--navy);background:#fff;padding:3px 10px;border-radius:999px;font-size:11.5px;box-shadow:0 2px 0 var(--sky-3)}
.status::before{background:var(--green)}
.tabs{gap:6px;margin-top:22px}
.tabs button{padding:10px 16px;border-radius:12px 12px 0 0;border-bottom:0;color:#3A4048}
.tabs button.on{background:var(--bg);color:var(--fg)}
.tabs button em{background:rgba(11,13,18,.08);padding:1px 7px;border-radius:999px;margin-left:6px;font-size:11.5px}
.tabs button.on em{background:var(--sky)}
/* indicadores: el primero destacado en negro, cifras grandes */
.stats{background:transparent;border:0;border-radius:0;gap:14px;display:grid}
.stat{background:#fff;border:1.5px solid var(--line);border-radius:20px;box-shadow:0 4px 0 var(--line)}
.stat:last-child{border-right:1.5px solid var(--line)}
.stat strong{font-size:34px;font-weight:800;letter-spacing:-.04em}
.stat:first-child{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 4px 0 #000}
.stat:first-child span{color:#AEB6C2}
.stat:first-child .delta{color:var(--sky)}
.stat:nth-child(2){background:var(--sky);border-color:var(--sky);box-shadow:0 4px 0 var(--sky-3)}
.stat:nth-child(2) span,.stat:nth-child(2) .delta.neutral{color:#2A3442}
.spark{display:none}
/* rendimiento por página: barras con volumen y miniaturas en relieve */
.ptrack i{background:var(--navy);border-radius:8px 8px 3px 3px;box-shadow:inset -4px 0 0 rgba(255,255,255,.08)}
.pcol.top .ptrack i{background:var(--blue)}
.pthumb{border-radius:8px;border:0;box-shadow:0 0 0 1.5px var(--line),0 4px 0 var(--line)}
.pcol:hover .pthumb{transform:translateY(-4px) rotateX(8deg);box-shadow:0 0 0 1.5px var(--fg),0 6px 0 var(--fg)}
.pflag.rv{background:#FBEBDD;color:#8A4A10}
.pflag.q{background:var(--sky);color:var(--navy)}
.legend i[style*="--navy"]{background:var(--navy)!important}
/* visitas y detalle */
.visits tr.sel td{background:var(--blue-soft)}
.av{font-weight:700}
.score{border-radius:999px;min-width:38px;font-weight:700}
.score.hi{background:var(--navy);color:var(--sky)}
.score.md{background:var(--sky);color:var(--navy)}
.comp .track i{background:var(--navy)}
.comp .track i.full{background:var(--green)}
.ring{width:64px;height:64px}
.ring b{font-size:19px;font-weight:800}
.facts{border-radius:14px}
.facts b{font-weight:700}
.signal{border-radius:14px;background:#FBF1E6;color:#7A410D}
.mini span i{background:var(--navy)}
.mini div.top span i{background:var(--blue)}
.path span{border-radius:9px;box-shadow:0 2px 0 var(--line)}
.path span.back{background:var(--sky);color:var(--navy);box-shadow:0 2px 0 var(--sky-3)}
.chip{border-radius:999px}
.chip.green{background:#E5F4EC;color:#1F6E4A}
.chip.blue{background:var(--sky);color:var(--navy)}
.hours i{background:var(--sky-3);border-radius:4px 4px 0 0}
.hours i.pk{background:var(--navy)}
.fwd .stack .av{border-color:#fff}
.ro{background:var(--sky);color:var(--navy);border-radius:14px}
.qitem .pthumb{border-radius:8px}
.empty h3{font-size:22px;font-weight:800;letter-spacing:-.03em}
/* modales */
.modal{background:rgba(11,13,18,.5)}
.modal .box{border-radius:24px;box-shadow:0 6px 0 var(--line),0 40px 80px -30px rgba(11,13,18,.5)}
.modal h3{font-size:22px;font-weight:800;letter-spacing:-.03em}
.drop{border-radius:16px;border:2px dashed var(--sky-3);background:var(--blue-soft);color:var(--blue);font-weight:500}
.drop.has{border-color:var(--green);background:#EAF6F0;color:var(--green)}
.sw.on{background:var(--navy)}
/* acceso */
.login-l{background:var(--sky);color:var(--navy);position:relative;overflow:hidden}
.login-l::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(11,13,18,.09) 1.2px,transparent 1.2px);background-size:24px 24px;pointer-events:none}
.login-l > *{position:relative}
.login-l .nx{color:var(--navy)}
.login-l h1{font-size:clamp(34px,3.8vw,52px);font-weight:800;letter-spacing:-.045em;max-width:13ch}
.login-l p{color:#2A3442}
.login-l small{color:#3A4048!important}
.login-r h2{font-weight:800;letter-spacing:-.03em}
.gbtn{border-radius:999px;border:1.5px solid var(--fg);box-shadow:0 3px 0 var(--fg);font-weight:600}
.gbtn:hover{border-color:var(--fg)}
.sent{background:var(--sky);color:var(--navy);border-radius:14px}
/* pila de slides decorativa en el acceso */
.login-deck{position:relative;height:260px;perspective:1200px;margin:10px 0}
.login-deck .dk{position:absolute;left:8%;top:50%;width:min(340px,80%);aspect-ratio:16/10;transform-style:preserve-3d;transform:translateY(-50%) rotateX(56deg) rotateZ(-30deg)}
.login-deck .sh{position:absolute;inset:0;border-radius:12px;background:#fff;box-shadow:0 1px 0 #E2E9F1,0 2px 0 #D6E0EA,0 3px 0 #CAD6E2,0 4px 0 #BECCDA,0 24px 40px -16px rgba(23,52,85,.45)}
.login-deck .sh:nth-child(1){transform:translateZ(0)}
.login-deck .sh:nth-child(2){transform:translateZ(36px);background:radial-gradient(60% 55% at 45% 55%,rgba(61,115,168,.4),transparent 70%),#fff}
.login-deck .sh:nth-child(3){transform:translateZ(72px);background:var(--navy);box-shadow:0 1px 0 #1C1F28,0 2px 0 #16181F,0 3px 0 #101217,0 24px 40px -16px rgba(11,13,18,.5)}
.login-deck{height:320px}
.login-deck .lslide{position:absolute;inset:0;padding:16px 18px;color:#fff;display:flex;flex-direction:column;gap:7px;box-sizing:border-box}
.login-deck .lslide .t{position:absolute;right:16px;top:12px;font-size:10px;opacity:.6}
.login-deck .lslide b{display:block;font-size:16px;line-height:1.2;letter-spacing:-.02em;white-space:nowrap}
.login-deck .lslide i{display:block;height:7px;width:70%;border-radius:4px;background:rgba(255,255,255,.18)}
.login-deck .lslide i.s{width:45%}
.login-deck .lslide .bars{margin-top:auto;display:flex;align-items:flex-end;gap:8px;height:42%}
.login-deck .lslide .bars u{flex:1;border-radius:4px 4px 0 0;background:var(--sky)}
.login-deck .tagx{position:absolute;display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:10px 14px;font-size:13px;box-shadow:0 3px 0 var(--sky-3),0 20px 30px -14px rgba(23,52,85,.5);white-space:nowrap}
.login-deck .tagx b{display:block;font-size:13px;font-weight:700}
.login-deck .tagx small{display:block;font-size:11.5px;color:#54595F}
.login-deck .tagx em{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#EEF4FA;color:#3D73A8;font-weight:700;font-size:16px;flex:none}
.login-deck .tagx em.lring{border-radius:50%;background:#fff;border:3px solid #0B0D12;color:#0B0D12;font-size:12px;width:36px;height:36px;box-sizing:border-box}
.login-deck .tagx em.ok{background:#E7F6EE;color:#1F8A5B}
.login-deck .t1{left:48%;top:4%}
.login-deck .t2{left:62%;top:44%}
.login-deck .t3{left:22%;bottom:0}
@media (max-width:860px){.login-deck{display:none}}

.modal{overflow-y:auto;align-items:flex-start;padding:24px 16px}
.modal > .box{margin:auto}

.admin-link{display:flex;align-items:center;gap:10px;margin:8px 0 4px;padding:11px 12px;border-radius:12px;border:1.5px dashed var(--sky);color:#fff;text-decoration:none;background:rgba(200,224,244,.08);transition:background .15s}
.admin-link:hover{background:rgba(200,224,244,.16)}
.admin-link[hidden]{display:none}
.admin-link>svg:first-child{color:var(--sky);flex:none}
.admin-link span{flex:1;min-width:0}
.admin-link b{display:block;font-size:13.5px}
.admin-link small{display:block;font-size:11.5px;color:#9AA6C4}
.admin-link .arr{color:var(--sky);flex:none}
@media (min-width:981px){
  .side{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;box-sizing:border-box}
  .side .me{position:sticky;bottom:-18px;background:var(--navy);margin-bottom:-18px;padding-bottom:18px;z-index:2}
}