/* SodiaAlpha SaaS v4 — sistema de diseño (power-design: escala 4/8px, tipografía proporcional, contraste WCAG, sin neón ni degradados violeta) */
:root{
  --bg:#F4F3EE; --surface:#FFFFFF; --surface-2:#FAF9F6; --ink:#15181E; --ink-2:#2B313B; --muted:#5B6270; --faint:#8A909C;
  --line:#E4E2DA; --line-2:#EEECE6;
  --brand:hsl(168 62% 26%); --brand-ink:hsl(168 62% 20%); --brand-soft:hsl(168 40% 93%); --brand-line:hsl(168 30% 78%);
  --ok:#067647; --ok-soft:#E3F4EA; --warn:#9A5B00; --warn-soft:#FBEFD5; --bad:#B42318; --bad-soft:#FBE6E3; --info:#1D4E89; --info-soft:#E4EDF8;
  --side:#12161C; --side-ink:#C7CCD5; --side-mute:#7C8594; --side-line:#222831;
  --r-sm:6px; --r:10px; --r-lg:14px;
  --sh:0 1px 2px rgba(20,24,30,.05),0 1px 1px rgba(20,24,30,.03); --sh-lg:0 8px 28px rgba(20,24,30,.10);
  --ease:cubic-bezier(.23,1,.32,1);
  --font:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
[data-theme=dark]{
  --bg:#0F1318; --surface:#171C23; --surface-2:#1B2129; --ink:#EEF0F3; --ink-2:#D4D8DE; --muted:#A3AAB6; --faint:#7C8594;
  --line:#272E38; --line-2:#212831;
  --brand:hsl(165 55% 52%); --brand-ink:hsl(165 60% 66%); --brand-soft:hsl(168 30% 16%); --brand-line:hsl(168 30% 28%);
  --ok:#4CC38A; --ok-soft:#133224; --warn:#E3A33B; --warn-soft:#3A2A0E; --bad:#F07A6E; --bad-soft:#3A1713; --info:#7DB2F0; --info-soft:#13263F;
  --side:#0B0E12; --sh:none; --sh-lg:0 8px 28px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);font-size:14px;line-height:1.55;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* Layout */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{background:var(--side);color:var(--side-ink);position:sticky;top:0;height:100vh;overflow-y:auto;padding:20px 12px 16px;display:flex;flex-direction:column;gap:4px}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 18px;color:#fff;font-weight:700;font-size:18px;letter-spacing:-.02em}
.brand .mark{width:30px;height:30px;border-radius:8px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:16px;font-weight:800}
.brand small{display:block;font-weight:500;font-size:10.5px;letter-spacing:.08em;color:var(--side-mute);text-transform:uppercase;margin-top:1px}
.nav-label{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--side-mute);padding:14px 10px 6px;font-weight:600}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--side-ink);font-weight:500;font-size:13.5px;transition:background .15s var(--ease),color .15s}
.nav a:hover{background:rgba(255,255,255,.06);text-decoration:none;color:#fff}
.nav a.on{background:rgba(255,255,255,.1);color:#fff}
.nav a .ic{width:18px;text-align:center;opacity:.85}
.nav a .ct{margin-left:auto;font-size:11px;color:var(--side-mute);background:rgba(255,255,255,.06);padding:1px 7px;border-radius:99px}
.side-foot{margin-top:auto;padding:14px 10px 0;border-top:1px solid var(--side-line);font-size:11.5px;color:var(--side-mute);line-height:1.5}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;padding:12px 32px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.search{position:relative;flex:1;max-width:520px}
.search input{width:100%;padding:9px 14px 9px 36px;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink);font:inherit;transition:border-color .15s,box-shadow .15s}
.search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.search .s-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:14px}
.sr{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);max-height:420px;overflow:auto;display:none;padding:6px}
.sr.open{display:block}
.sr a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;color:var(--ink);font-size:13px}
.sr a:hover{background:var(--brand-soft);text-decoration:none}
.sr .t{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);width:62px;flex:none;font-weight:600}
.top-r{margin-left:auto;display:flex;gap:10px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--line);border-radius:99px;background:var(--surface);font-size:12px;color:var(--muted);font-weight:500}
.chip b{color:var(--ink);font-weight:650}
.icon-btn{border:1px solid var(--line);background:var(--surface);border-radius:99px;width:34px;height:34px;display:grid;place-items:center;transition:background .15s}
.icon-btn:hover{background:var(--brand-soft)}
.menu-btn{display:none}
.page{padding:28px 32px 64px;max-width:1500px;width:100%}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.crumbs{font-size:12px;color:var(--faint);margin-bottom:6px}
.crumbs a{color:var(--faint)}
h1{font-size:28px;letter-spacing:-.025em;line-height:1.15;font-weight:700}
.lead{color:var(--muted);max-width:760px;margin-top:6px;font-size:14.5px}
h2{font-size:18px;letter-spacing:-.015em;font-weight:650}
h3{font-size:14.5px;font-weight:650;letter-spacing:-.005em}
.sec{margin-top:36px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.sec-h p{color:var(--muted);font-size:13px}

/* Cards & grids */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);padding:20px}
.card.flat{box-shadow:none}
.card.pad0{padding:0;overflow:hidden}
.card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.card-h p{font-size:12.5px;color:var(--muted);margin-top:2px}
.g{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g5{grid-template-columns:repeat(5,minmax(0,1fr))}.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.kpi{padding:16px 18px}
.kpi .l{font-size:12px;color:var(--muted);font-weight:500;display:flex;gap:6px;align-items:center}
.kpi .v{font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1.2;margin-top:6px}
.kpi .v small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.kpi .s{font-size:12px;color:var(--faint);margin-top:4px}
.kpi.hl{background:var(--brand);border-color:var(--brand);color:#fff}
.kpi.hl .l,.kpi.hl .s,.kpi.hl .v small{color:rgba(255,255,255,.78)}
[data-theme=dark] .kpi.hl{color:#06140F}[data-theme=dark] .kpi.hl .l,[data-theme=dark] .kpi.hl .s{color:rgba(6,20,15,.75)}
.canvas-box{position:relative;height:300px}.canvas-box.sm{height:240px}.canvas-box.lg{height:380px}

/* Badges */
.b{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;white-space:nowrap;line-height:1.6}
.b.ok{background:var(--ok-soft);color:var(--ok)}.b.warn{background:var(--warn-soft);color:var(--warn)}.b.bad{background:var(--bad-soft);color:var(--bad)}.b.info{background:var(--info-soft);color:var(--info)}.b.mute{background:var(--line-2);color:var(--muted)}.b.brand{background:var(--brand-soft);color:var(--brand-ink)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--faint)}.dot.ok{background:var(--ok)}.dot.warn{background:#D9921F}.dot.bad{background:var(--bad)}

/* Tables */
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{position:sticky;top:0;background:var(--surface-2);text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:default}
th.sortable{cursor:pointer}th.sortable:hover{color:var(--ink)}
td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--surface-2)}
td.n,th.n{text-align:right}
.prod-cell{display:flex;align-items:center;gap:12px;min-width:260px}
.thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--line-2);flex:none;border:1px solid var(--line)}
.prod-cell a{color:var(--ink);font-weight:600;line-height:1.3}
.prod-cell small{display:block;color:var(--faint);font-size:11.5px;font-weight:400}
.sticky-1 th:first-child,.sticky-1 td:first-child{position:sticky;left:0;background:var(--surface);z-index:2;box-shadow:1px 0 0 var(--line)}
.sticky-1 th:first-child{background:var(--surface-2);z-index:3}
.bar{height:6px;border-radius:99px;background:var(--line-2);overflow:hidden;min-width:70px}.bar i{display:block;height:100%;background:var(--brand);border-radius:99px}
.stack{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--line-2)}.stack i{display:block;height:100%}

/* Forms */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.fld{display:flex;flex-direction:column;gap:5px;min-width:130px}
.fld label{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.02em}
input[type=text],input[type=number],input[type=search],select{padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;min-width:0;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
input[type=range]{accent-color:var(--brand);width:100%}
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:13px;transition:transform .12s var(--ease),background .15s}
.btn:active{transform:scale(.97)}.btn:hover{background:var(--brand-soft);text-decoration:none}
.btn.pri{background:var(--brand);color:#fff;border-color:var(--brand)}.btn.pri:hover{background:var(--brand-ink)}
[data-theme=dark] .btn.pri{color:#06140F}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:none;padding:7px 13px;font-size:13px;font-weight:600;color:var(--muted)}
.seg button.on{background:var(--brand);color:#fff}
[data-theme=dark] .seg button.on{color:#06140F}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 16px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button.on{color:var(--brand-ink);border-color:var(--brand)}
.pane{display:none}.pane.on{display:block}

/* Product cards */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s var(--ease);color:var(--ink)}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);text-decoration:none}
.pcard .ph{position:relative;aspect-ratio:4/3;background:var(--line-2)}
.pcard .ph img{width:100%;height:100%;object-fit:cover}
.pcard .rk{position:absolute;top:10px;left:10px;background:var(--ink);color:var(--bg);font-weight:700;font-size:12px;padding:3px 9px;border-radius:99px}
.pcard .sc{position:absolute;top:10px;right:10px;background:var(--surface);color:var(--ink);font-weight:700;font-size:13px;padding:3px 10px;border-radius:99px;box-shadow:var(--sh)}
.pcard .bd{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard h4{font-size:14px;line-height:1.35;font-weight:650;min-height:38px}
.pcard .cat{font-size:11.5px;color:var(--faint)}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line-2)}
.mini div span{display:block;font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.mini div b{font-size:13.5px}

/* Detail */
.hero{display:grid;grid-template-columns:360px 1fr;gap:28px;align-items:start}
.hero .pic{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--surface);aspect-ratio:1/1}
.hero .pic img{width:100%;height:100%;object-fit:contain;background:#fff}
.dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.dl div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.dl div span{color:var(--muted)}.dl div b{text-align:right;font-weight:600}
.kv{display:grid;grid-template-columns:200px 1fr;gap:0}
.kv>div{padding:10px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.kv>div:nth-child(odd){color:var(--muted);font-weight:500;padding-right:16px}
.offer{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;background:var(--surface);position:relative;display:flex;flex-direction:column;gap:6px}
.offer.pop{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.offer .pr{font-size:24px;font-weight:700;letter-spacing:-.02em}
.offer s{color:var(--faint);font-size:13px}
.quote{border-left:3px solid var(--brand);background:var(--brand-soft);padding:12px 16px;border-radius:0 var(--r) var(--r) 0;font-size:13.5px;color:var(--ink-2)}
.step{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.step:last-child{border-bottom:none}
.step .tm{font-weight:700;color:var(--brand-ink);font-size:12.5px}
.links{display:flex;flex-wrap:wrap;gap:8px}
.callout{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r);border:1px solid;font-size:13px}
.callout.warn{background:var(--warn-soft);border-color:#E6C98B;color:var(--warn)}
.callout.info{background:var(--info-soft);border-color:#B5CCE8;color:var(--info)}
.callout.ok{background:var(--ok-soft);border-color:#A6D8BB;color:var(--ok)}
.callout.bad{background:var(--bad-soft);border-color:#EDB4AD;color:var(--bad)}
.callout b{font-weight:650}

/* Variables */
.vl{display:flex;flex-direction:column;gap:8px}
details.v{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);transition:border-color .15s}
details.v[open]{border-color:var(--brand-line);box-shadow:var(--sh)}
details.v summary{list-style:none;display:grid;grid-template-columns:62px minmax(0,1fr) 90px 150px 20px;gap:14px;align-items:center;padding:12px 16px;cursor:pointer}
details.v summary::-webkit-details-marker{display:none}
details.v summary:hover{background:var(--surface-2);border-radius:var(--r)}
details.v summary .id{font-weight:700;color:var(--brand-ink);font-size:12.5px}
details.v summary .nm{font-weight:600;line-height:1.35}
details.v summary .nm small{display:block;font-weight:400;color:var(--faint);font-size:11.5px}
details.v summary .pt{font-size:12.5px;color:var(--muted);text-align:right}
details.v summary .chev{transition:transform .2s var(--ease);color:var(--faint)}
details.v[open] summary .chev{transform:rotate(90deg)}
.vb{padding:6px 20px 22px;border-top:1px solid var(--line-2);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 32px}
.vb .full{grid-column:1/-1}
.fl{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);font-weight:650;margin:14px 0 4px}
.opt{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--surface-2)}
.opt .oh{display:flex;justify-content:space-between;gap:10px;font-weight:650;font-size:13px;margin-bottom:4px}
.opt p{font-size:12.5px;color:var(--ink-2)}.opt em{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:12px}

/* Misc */
.empty{padding:48px;text-align:center;color:var(--muted)}
.pill-row{display:flex;gap:6px;flex-wrap:wrap}
.muted{color:var(--muted)}.faint{color:var(--faint)}.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sp{flex:1}
.adc{display:grid;grid-template-columns:200px 1fr;gap:20px}
.adc img{width:100%;border-radius:var(--r);border:1px solid var(--line);aspect-ratio:1;object-fit:cover;background:var(--line-2)}
.adtext{white-space:pre-line;font-size:13px;color:var(--ink-2);max-height:190px;overflow:auto;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);padding:12px 14px}
.rtl{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.rit{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);color:var(--ink);display:flex;flex-direction:column}
.rit:hover{text-decoration:none;border-color:var(--brand-line)}
.rit img{aspect-ratio:1;object-fit:cover;width:100%;background:var(--line-2)}
.rit div{padding:10px 12px;font-size:12px;line-height:1.35;display:flex;flex-direction:column;gap:3px}
.rit b{font-size:14px}
.foot{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--faint);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (max-width:1180px){.g5,.g6{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-main,.hero{grid-template-columns:1fr}.hero .pic{max-width:420px}}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;z-index:60;width:264px;transform:translateX(-100%);transition:transform .25s var(--ease)}
  .side.open{transform:none}
  .menu-btn{display:grid}.page{padding:20px 16px 56px}.top{padding:10px 16px}
  .g2,.g3,.g4,.g5,.g6,.dl,.vb,.adc{grid-template-columns:1fr}
  details.v summary{grid-template-columns:54px minmax(0,1fr) 20px}details.v summary .pt,details.v summary .sm{display:none}
  .kv{grid-template-columns:1fr}.kv>div:nth-child(odd){border-bottom:none;padding-bottom:0}.chip.hide-m{display:none}h1{font-size:23px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.side,.top,.toolbar{display:none}.shell{display:block}}