/* DEEC Studio · panel administrativo y portal de seguimiento (demostración) */
:root{
  --bg:#FFFFFF; --bg2:#F9FAFB; --card:#FFFFFF;
  --fg:#111827; --text:#4B5563; --muted:#6B7280;
  --acc:#2563EB; --acc-hover:#1D4ED8; --acc-l:#EFF6FF; --accfg:#FFFFFF;
  --line:#E5E7EB; --line-strong:#D1D5DB; --g100:#F3F4F6;
  --ok:#047857; --ok-l:#ECFDF5; --warn:#B45309; --warn-l:#FFFBEB; --bad:#B91C1C; --bad-l:#FEF2F2;
  /* Resto de tokens (estados, menú, KPI, superficies inversas…): theme.css · theme-core.js */
  --sans:"Manrope","Raleway","Segoe UI",system-ui,sans-serif;
  --r:4px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg2);color:var(--text);font:400 15px/1.55 "Raleway","Manrope","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.num,.mono{font-family:var(--sans);font-variant-numeric:tabular-nums}
.mono{font-size:13px;letter-spacing:.02em}

/* Aviso de demostración */
.demo-bar{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;padding:9px 16px;background:var(--fg);color:var(--fgfg);font-size:12.5px;line-height:1.4;text-align:center}
.demo-bar b{color:var(--fgfg);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:11px}

/* Botones y campos */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border:1px solid transparent;border-radius:var(--r);background:var(--acc);color:var(--accfg);font-size:14px;font-weight:500;letter-spacing:.01em;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--acc-hover)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn--ghost{background:var(--card);border-color:var(--line-strong);color:var(--fg)}
.btn--ghost:hover{background:var(--card);border-color:var(--acc);color:var(--acc)}
.btn--danger{background:var(--card);border-color:var(--bad-b);color:var(--bad)}
.btn--danger:hover{background:var(--bad);border-color:var(--bad);color:var(--accfg)}
.btn--sm{min-height:32px;padding:0 12px;font-size:13px}
.btn:focus-visible,.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible,.nav a:focus-visible,.tab:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.fld{display:grid;gap:6px;align-content:start}
.fld>span{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fld input,.fld select,.fld textarea{width:100%;min-height:42px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card);font-size:15px;color:var(--fg)}
.fld textarea{min-height:92px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--acc);outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 14%,transparent)}
.fld.err input,.fld.err select,.fld.err textarea{border-color:var(--bad-s)}
.fld .em{font-size:12.5px;color:var(--bad)}
.fld small{font-size:12.5px;color:var(--muted)}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text);line-height:1.5;cursor:pointer}
.chk input{margin-top:3px;width:16px;height:16px;accent-color:var(--acc);flex:none}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}

/* Etiquetas */
.bd{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:500;line-height:1.5;white-space:nowrap;background:var(--g100);color:var(--text)}
.bd::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.bd--ok{background:var(--ok-l);color:var(--ok)}
.bd--warn{background:var(--warn-l);color:var(--warn)}
.bd--bad{background:var(--bad-l);color:var(--bad)}
.bd--acc{background:var(--acc-l);color:var(--acc)}
.bd--plain::before{display:none}

:root{--logo-h:22px}
@media (max-width:900px){:root{--logo-h:20px}}

/* Estructura */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:calc(100vh - 38px)}
.sb{position:sticky;top:0;align-self:start;height:calc(100vh - 38px);display:flex;flex-direction:column;padding:22px 16px;background:var(--sb-bg);border-right:1px solid var(--sb-line)}
.sb__logo{padding:4px 10px 22px}
.sb__logo img{display:block;height:var(--logo-h);width:auto;object-fit:contain;filter:var(--sb-logo-filter)}
.sb__tag{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sb-muted)}
.nav{display:grid;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r);font-size:14.5px;color:var(--sb-fg);transition:background .15s,color .15s}
.nav a svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav a:hover{background:var(--sb-hover);color:var(--sb-fg-strong)}
.nav a.on{background:var(--sb-on);color:var(--sb-onfg);font-weight:500}
.nav__sep{margin:14px 12px 6px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sb-muted)}
.sb__foot{margin-top:auto;display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--sb-line);font-size:13px}
.sb__foot .who{padding:0 10px;color:var(--sb-muted)}
.sb__foot .btn--ghost{background:transparent;border-color:var(--sb-line);color:var(--sb-fg-strong)}
.sb__foot .btn--ghost:hover{background:var(--sb-hover);border-color:var(--sb-onfg);color:var(--sb-fg-strong)}
.main{min-width:0;padding:28px clamp(18px,3vw,44px) 64px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.top h1{font-size:clamp(30px,3.1vw,40px);font-weight:500;letter-spacing:-.02em;color:var(--fg);line-height:1.15}
.top p{margin-top:6px;font-size:clamp(16px,1.35vw,18px);line-height:1.4;color:var(--muted)}
.top__act{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.crumb{display:flex;gap:8px;align-items:center;margin-bottom:10px;font-size:13px;color:var(--muted)}
.crumb a:hover{color:var(--acc)}
.burger{display:none}

/* Tarjetas y tablas */
.card{background:var(--card);border:1px solid var(--line);border-radius:6px}
.card__h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line)}
.card__h h2,.card__h h3{font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--fg)}
.card__b{padding:20px}
.card+.card{margin-top:20px}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:20px}
.kpi{padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:6px}
.kpi span{display:block;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kpi b{display:block;margin-top:8px;font:500 32px/1 var(--sans);letter-spacing:-.02em;color:var(--fg)}
.kpi small{display:block;margin-top:6px;font-size:12.5px;color:var(--muted)}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.cols .card+.card{margin-top:0}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{padding:12px 16px;text-align:left;font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;border-bottom:1px solid var(--line);background:var(--card)}
td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--text)}
tr:last-child td{border-bottom:0}
tbody tr[data-go]{cursor:pointer;transition:background .15s}
tbody tr[data-go]:hover{background:var(--bg2)}
td b,td .strong{font-weight:500;color:var(--fg)}
td small{display:block;font-size:12.5px;color:var(--muted)}
.empty{padding:32px 20px;text-align:center;color:var(--muted);font-size:14px}
.bar{display:flex;align-items:center;gap:10px;min-width:120px}
.bar i{display:block;flex:1;height:6px;border-radius:99px;background:var(--g100);overflow:hidden}
.bar i::after{content:"";display:block;height:100%;width:var(--p,0%);background:var(--acc);border-radius:99px}
.bar span{font:500 12.5px var(--sans);color:var(--fg)}
.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.filters .fld{min-width:170px}
.filters .fld--grow{flex:1;min-width:220px}
.kv{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr);gap:10px 18px}
.kv dt{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.kv dd{color:var(--fg);overflow-wrap:anywhere}
.stack{display:grid;gap:20px}
.note{padding:12px 14px;border-radius:var(--r);background:var(--acc-l);color:var(--info);font-size:13.5px;line-height:1.5}
.note--warn{background:var(--warn-l);color:var(--warn)}
.note--bad{background:var(--bad-l);color:var(--bad)}
.note--ok{background:var(--ok-l);color:var(--ok)}
.row-act{display:flex;gap:8px;flex-wrap:wrap}

/* Expediente */
.tabs{display:flex;gap:4px;overflow-x:auto;margin-bottom:20px;border-bottom:1px solid var(--line)}
.tab{flex:none;padding:12px 16px;border:0;border-bottom:2px solid transparent;background:none;font-size:14.5px;color:var(--muted);white-space:nowrap;margin-bottom:-1px}
.tab:hover{color:var(--fg)}
.tab.on{color:var(--acc);border-bottom-color:var(--acc);font-weight:500}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.head h1{font-size:clamp(21px,2.2vw,28px);font-weight:500;color:var(--fg);letter-spacing:-.01em}
.head__meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.stage{display:grid;grid-template-columns:28px minmax(0,1.6fr) minmax(130px,.8fr) minmax(120px,.7fr) minmax(120px,.7fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.stage:last-child{border-bottom:0}
.stage .n{font:500 13px var(--sans);color:var(--acc)}
.stage input,.stage select{width:100%;min-height:38px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card);font-size:14px}
.stage .mv{display:flex;gap:4px}
.ib{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card);color:var(--text)}
.ib:hover{border-color:var(--acc);color:var(--acc)}
.ib svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tl{display:grid;gap:14px}
.tl li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;padding-bottom:14px;border-bottom:1px solid var(--line)}
.tl li:last-child{border-bottom:0;padding-bottom:0}
.tl time{font-size:12.5px;color:var(--muted);white-space:nowrap}
.tl p{color:var(--fg);overflow-wrap:anywhere}
.msgs{display:grid;gap:12px}
.msg{padding:12px 14px;border-radius:var(--r);background:var(--g100)}
.msg--deec{background:var(--acc-l)}
.msg--int{background:var(--warn-l)}
.msg small{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px;font-size:12px;color:var(--muted)}
.msg p{color:var(--fg);white-space:pre-wrap;overflow-wrap:anywhere}
.range{display:flex;align-items:center;gap:14px}
.range input[type=range]{flex:1;accent-color:var(--acc)}
.linkbox{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;border:1px dashed var(--line-strong);border-radius:var(--r);background:var(--bg2);overflow-wrap:anywhere}
.linkbox code{flex:1;min-width:200px;font:500 13px/1.4 var(--sans);color:var(--fg);word-break:break-all}

/* Modal y avisos */
.mdl{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:color-mix(in srgb,var(--shadow) 50%,transparent)}
.mdl__box{width:100%;max-width:720px;max-height:calc(100vh - 40px);overflow:auto;background:var(--card);border-radius:6px;box-shadow:0 30px 80px -20px color-mix(in srgb,var(--shadow) 50%,transparent)}
.mdl__h{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 24px;background:var(--card);border-bottom:1px solid var(--line)}
.mdl__h h2{font-size:18px;font-weight:500;color:var(--fg)}
.mdl__b{padding:24px;display:grid;gap:18px}
.mdl__f{position:sticky;bottom:0;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:16px 24px;background:var(--card);border-top:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:24px;z-index:90;translate:-50% 0;max-width:min(560px,92vw);padding:12px 18px;border-radius:var(--r);background:var(--fg);color:var(--fgfg);font-size:14px;box-shadow:0 14px 40px -12px color-mix(in srgb,var(--shadow) 50%,transparent)}
.toast--bad{background:var(--bad)}
.sw{position:relative;display:inline-flex;align-items:center;gap:10px}
.mini{font-size:12.5px;color:var(--muted)}
.sep{height:1px;background:var(--line);margin:4px 0}

/* Portal del cliente */
.pt{min-height:100vh;background:var(--bg2)}
.pt__top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(18px,5vw,64px);background:var(--card);border-bottom:1px solid var(--line)}
.pt__top img{display:block;height:22px;width:auto}
.pt__top span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pt__in{max-width:920px;margin:0 auto;padding:36px clamp(18px,4vw,32px) 80px;display:grid;gap:22px}
.pt__hero h1{font-size:clamp(26px,3.4vw,38px);font-weight:400;letter-spacing:-.02em;line-height:1.15;color:var(--fg)}
.pt__hero p{margin-top:8px}
.pt__hero .bd{margin-top:14px}
.pt__sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pt__sum div{padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:6px}
.pt__sum span{display:block;font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pt__sum b{display:block;margin-top:6px;font-weight:500;color:var(--fg);font-size:16px}
.pt h2{font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--fg)}
.steps{display:grid;gap:0;margin-top:10px}
.steps li{position:relative;display:flex;gap:14px;align-items:flex-start;padding:10px 0 10px}
.steps li::before{content:"";position:absolute;left:11px;top:34px;bottom:-10px;width:1px;background:var(--line-strong)}
.steps li:last-child::before{display:none}
.steps i{flex:none;display:grid;place-items:center;width:23px;height:23px;margin-top:1px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--card);font-style:normal}
.steps .done i{background:var(--acc);border-color:var(--acc)}
.steps .done i::after{content:"";width:5px;height:9px;border:solid var(--card);border-width:0 1.8px 1.8px 0;rotate:45deg;translate:0 -1px}
.steps .cur i{border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 14%,transparent)}
.steps .cur i::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--acc)}
.steps b{display:block;font-weight:500;color:var(--fg);line-height:1.4}
.steps li:not(.done):not(.cur) b{color:var(--muted);font-weight:400}
.steps small{color:var(--muted);font-size:12.5px}

@media (max-width:1100px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sb{position:fixed;left:0;top:0;bottom:0;z-index:70;width:270px;height:auto;translate:-100% 0;transition:translate .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 20px 60px -10px color-mix(in srgb,var(--shadow) 40%,transparent)}
  .sb.open{translate:0 0}
  .burger{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card)}
  .burger svg{width:20px;height:20px;fill:none;stroke:var(--fg);stroke-width:1.8;stroke-linecap:round}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage{grid-template-columns:24px minmax(0,1fr) minmax(0,1fr);}
  .stage .mv{grid-column:2/-1}
  .pt__sum{grid-template-columns:1fr}
}
@media (max-width:640px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2,.grid3{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr;gap:2px 0}.kv dd{margin-bottom:10px}
  .mdl{padding:0;align-items:end}.mdl__box{max-height:94vh;border-radius:10px 10px 0 0}
  .card__b{padding:16px}
  .tl li{grid-template-columns:minmax(0,1fr);gap:4px}
}
@media (prefers-reduced-motion:reduce){.sb{transition:none}}

/* Barra lateral: logotipo centrado */
.sb__logo{display:flex;flex-direction:column;align-items:center;text-align:center}
.sb__logo img{margin:0 auto}

/* Barra lateral con desplazamiento propio */
.sb{height:calc(100dvh - var(--sbo,0px));max-height:100dvh;contain:layout}
.sb__logo,.sb__foot{flex:none}
.nav{flex:1 1 auto;min-height:0;overflow-y:auto;align-content:start;overscroll-behavior:contain;margin-right:-8px;padding-right:8px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.nav::-webkit-scrollbar-track{background:transparent}
@media (max-width:900px){.sb{height:auto;max-height:none}}
/* Navegación de regreso */
.backbar{margin:0 0 14px}
.back,.btn--back{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.back{padding:7px 16px 7px 10px;border:1px solid var(--line-strong);border-radius:99px;background:var(--card);font:500 13.5px var(--sans);color:var(--fg);transition:border-color .2s,background .2s,color .2s}
.back:hover{border-color:var(--acc);background:var(--acc-l);color:var(--acc)}
.back svg,.btn--back svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Portal de seguimiento en el expediente del cliente */
.cp{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.cp>li{display:grid;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.cp__h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.cp__h b{font-weight:600;color:var(--fg)}.cp__h small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.cp__u{display:grid;gap:4px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);border-radius:10px;background:var(--acc-l)}
.cp__u>span{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.cp__u code{font-size:12.5px;overflow-wrap:anywhere;color:var(--fg)}
.cp__u small{font-size:12px;color:var(--muted)}

/* Compras directas vs. vía CRM */
.osplit{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch;margin-bottom:18px}
.osplit__t{display:flex;align-items:center;padding:0 18px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:14px;color:var(--text)}
.osplit__t b{font:300 30px/1 var(--sans);margin-right:8px;color:var(--fg)}
.osplit__c{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:var(--card);text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.osplit__c:hover{border-color:color-mix(in srgb,var(--acc) 40%,transparent)}
.osplit__c.on{border-color:var(--acc);background:var(--acc-l)}
.osplit__c i{flex:none;width:10px;height:10px;border-radius:50%}
.osplit__c .d-s{background:var(--inv-acc)}.osplit__c .d-c{background:var(--acc)}
.osplit__c b{font:300 30px/1 var(--sans);color:var(--fg)}
.osplit__c span{display:grid;font-size:14px;font-weight:500;color:var(--fg)}
.osplit__c small{font-weight:400;font-size:12.5px;color:var(--muted)}
.osplit__bar{grid-column:1/-1;display:flex;height:6px;border-radius:99px;overflow:hidden;background:var(--g100)}
.osplit__bar i{display:block;height:100%;background:var(--inv-acc)}.osplit__bar i.c{background:var(--acc)}
@media (max-width:860px){.osplit{grid-template-columns:1fr 1fr}.osplit__t{grid-column:1/-1;min-height:52px}}
@media (max-width:520px){.osplit{grid-template-columns:1fr}}