:root{
 --brand:#264566;--brand-d:#1a3049;--brand-m:#3d6289;--brand-l:#e8eef4;
 --bg:#eef1f5;--surface:#ffffff;--surface-2:#f7f9fb;--border:#e4e8ee;--border-2:#d3d9e2;
 --text:#1e2733;--text-2:#5c6672;--text-3:#8b95a2;
 --ok-bg:#e1f5ee;--ok:#0f6e56;--warn-bg:#faeeda;--warn:#854f0b;--dang-bg:#faece7;--dang:#993c1d;--info-bg:#e6f1fb;--info:#185fa5;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:13.5px;-webkit-font-smoothing:antialiased}
/* El mockup original usaba <div>/<span> con onclick; al convertir a <a> para navegación
   real, el navegador aplica azul+subrayado por defecto. Se resetea de raíz. */
a{text-decoration:none;color:inherit;cursor:pointer}
.app{display:grid;grid-template-columns:216px 1fr;height:100vh;overflow:hidden}
/* sidebar */
.side{background:var(--brand);display:flex;flex-direction:column;overflow-y:auto}
.side::-webkit-scrollbar{width:0}
.logo{padding:18px 16px 12px}
.logo img{height:37px;margin:0 auto;display:table;margin-bottom:6px}
.navsec{font-size:10.5px;color:#7d97b0;letter-spacing:.7px;text-transform:uppercase;padding:14px 18px 5px}
.nav{display:flex;align-items:center;gap:11px;padding:9px 16px;color:#c3d3e2;cursor:pointer;font-size:13px;border-left:3px solid transparent}
.nav i{font-size:18px;width:18px;text-align:center}
.nav:hover{background:rgba(255,255,255,.06);color:#fff}
.nav.on{background:rgba(255,255,255,.12);color:#fff;border-left-color:#fff;font-weight:500}
.side .foot{position:relative;margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid rgba(255,255,255,.12);color:#c3d3e2;font-size:12.5px}
.side .foot .av{width:30px;height:30px;border-radius:50%;background:var(--brand-m);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500}
.side .foot .r{font-size:10.5px;color:#7d97b0}
/* main */
.main{overflow-y:auto;background:var(--bg)}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--border)}
.top h1{font-size:17px;font-weight:500}
.search{flex:1;max-width:340px;display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text-3);font-size:13px}
.search input,.tsearch input{border:none;background:none;outline:none;flex:1;min-width:0;color:var(--text);font:inherit}
.search input::placeholder,.tsearch input::placeholder{color:var(--text-3)}
.sp{flex:1}
.ico{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--text-2);font-size:18px;position:relative;cursor:pointer}
.ico .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:#d85a30;border:1.5px solid var(--surface)}
.btn{background:var(--brand);color:#fff;border:none;border-radius:8px;padding:9px 15px;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn-o{background:var(--surface);color:var(--text-2);border:1px solid var(--border-2);border-radius:8px;padding:8px 12px;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.wrap{padding:20px;max-width:1560px;margin:0 auto}
.screen{display:none}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.c-15-1{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
.mt{margin-top:14px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px}
.card.form-card{max-width:820px;margin:0 auto}
.card.form-card.wide{max-width:1040px}
.form-wrap{max-width:1040px;margin:0 auto}
.h{font-size:14px;font-weight:500;display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.h .mo{font-size:12px;color:var(--brand-m);font-weight:400;cursor:pointer}
.hs{font-size:11.5px;color:var(--text-3);margin-top:-10px;margin-bottom:14px}
/* kpi */
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:15px}
.kpi .k1{display:flex;align-items:center;justify-content:space-between}
.kpi .lbl{font-size:12.5px;color:var(--text-2)}
.kpi .ki{width:32px;height:32px;border-radius:9px;background:var(--brand-l);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:17px}
.kpi .val{font-size:24px;font-weight:500;margin:10px 0 4px}
.trd{font-size:12px;color:var(--ok);display:flex;align-items:center;gap:3px}
.trd.dn{color:#d85a30}
/* pills / tags */
.pill{font-size:10.5px;padding:3px 9px;border-radius:20px;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.p-ok{background:var(--ok-bg);color:var(--ok)}.p-warn{background:var(--warn-bg);color:var(--warn)}.p-dang{background:var(--dang-bg);color:var(--dang)}.p-info{background:var(--info-bg);color:var(--info)}.p-mut{background:#f0f1f3;color:#5f5e5a}.p-brand{background:var(--brand-l);color:var(--brand)}
/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl thead th{text-align:left;font-size:10.5px;color:var(--text-3);font-weight:500;padding:12px 14px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;background:var(--surface-2);border-bottom:1px solid var(--border)}
.tbl tbody td{padding:13px 14px;border-top:1px solid var(--border);vertical-align:middle}
.tbl tbody tr:first-child td{border-top:none}
.tbl tbody tr[onclick]{cursor:pointer}
.tbl tbody tr[onclick]:hover{background:var(--surface-2)}
.tbl .r{text-align:right}.tbl .c{text-align:center}
.who{display:flex;align-items:center;gap:10px}
.av{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;flex-shrink:0}
.av.m{background:var(--brand-m)}
.nm{font-weight:500}.sub{font-size:11px;color:var(--text-3)}
.val{font-weight:500;color:var(--brand)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--text-3)}
/* toolbar */
.tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tsearch{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text-3);font-size:12.5px}
.chip{font-size:12px;padding:7px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.chip.on{background:var(--brand-l);color:var(--brand);border-color:var(--brand-l);font-weight:500}
/* breadcrumb bar */
.bc{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);margin-bottom:16px}
.bc b{color:var(--text);font-weight:500}
.bc .lnk{cursor:pointer}.bc .lnk:hover{color:var(--brand)}
/* pipeline bars */
.pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.stg{text-align:center}
.stg .sn{font-size:11px;color:var(--text-2);margin-bottom:6px;height:28px}
.bar{height:92px;background:var(--brand-l);border-radius:7px 7px 0 0;display:flex;align-items:flex-end}
.fill{width:100%;background:var(--brand);border-radius:7px 7px 0 0}
.stg .amt{font-size:12.5px;font-weight:500;margin-top:6px}
.stg .cnt{font-size:11px;color:var(--text-3)}
/* kanban */
.kan{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}
.klist{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:15px}
.deal{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--brand);border-radius:6px;padding:10px;margin-bottom:8px;cursor:pointer}
.deal:hover{border-color:var(--brand-m)}
.deal .dn{font-size:12.5px;font-weight:500}
.deal .dc{font-size:11px;color:var(--text-2);margin:4px 0 8px;display:flex;align-items:center;gap:4px}
.deal .dr{display:flex;align-items:center;justify-content:space-between}
.av2{width:20px;height:20px;border-radius:50%;background:var(--brand-m);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:500}
/* list rows */
.lrow{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--border);font-size:13px}
.lrow:first-child{border-top:none}
.cb{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border-2);flex-shrink:0}
.cb.on{background:var(--brand);border-color:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px}
.lrow .g{flex:1}
.feed{display:flex;gap:11px;padding:10px 0;border-top:1px solid var(--border);font-size:12.5px}
.feed:first-child{border-top:none}
.fi{width:30px;height:30px;border-radius:9px;background:var(--brand-l);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.mut{color:var(--text-3);font-size:11px;margin-top:2px}
/* progress */
.track{width:100%;height:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:20px;overflow:hidden}
.tf{display:block;height:100%;background:var(--brand)}
.tf.w{background:#ef9f27}.tf.d{background:#d85a30}
.bar2{width:80px;height:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:20px;overflow:hidden;display:inline-block;vertical-align:middle;margin-right:7px}
/* document */
.doc{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:26px}
.dtop{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}
.dtop .blogo{height:30px}
.dtop .tl{font-size:11px;color:var(--text-3);margin-top:6px;line-height:1.6}
.dno{text-align:right}
.dno .t{font-size:18px;font-weight:500}
.dno .n{font-family:ui-monospace,monospace;font-size:13px;color:var(--brand);margin-top:3px}
.parties{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px}
.pt .plbl{font-size:10.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.pt .pnm{font-weight:500;font-size:13.5px}
.pt .pln{font-size:12px;color:var(--text-2);line-height:1.6}
.dtbl{width:100%;border-collapse:collapse;font-size:12.5px}
.dtbl thead th{text-align:left;font-size:10.5px;color:var(--text-3);font-weight:400;padding:0 8px 9px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1.5px solid var(--brand)}
.dtbl thead th.r{text-align:right}.dtbl thead th.c{text-align:center}
.dtbl tbody td{padding:10px 8px;border-bottom:1px solid var(--border)}
.dtbl tbody td.r{text-align:right}.dtbl tbody td.c{text-align:center}
.sum{display:flex;justify-content:flex-end;margin-top:16px}
.sumb{width:270px}
.srow{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;color:var(--text-2)}
.srow span:last-child{color:var(--text)}
.trow{display:flex;justify-content:space-between;font-size:16px;font-weight:500;padding:11px 0 0;margin-top:6px;border-top:1.5px solid var(--brand)}
.trow .tv{color:var(--brand)}
/* steps (delivery) */
.dsteps{display:flex;margin:0 0 22px}
.dstp{flex:1;text-align:center;position:relative}
.dstp .cir{width:28px;height:28px;border-radius:50%;background:var(--surface-2);border:1.5px solid var(--border-2);color:var(--text-3);display:flex;align-items:center;justify-content:center;font-size:14px;margin:0 auto 7px;position:relative;z-index:1}
.dstp.done .cir{background:var(--brand);border-color:var(--brand);color:#fff}
.dstp.cur .cir{background:#fff;border-color:var(--brand);color:var(--brand)}
.dstp .lb{font-size:11px;color:var(--text-2)}
.dstp.done .lb,.dstp.cur .lb{color:var(--brand);font-weight:500}
.dstp::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:1.5px;background:var(--border-2)}
.dstp.done::before,.dstp.cur::before{background:var(--brand)}
.dstp:first-child::before{display:none}
/* opp steps */
.osteps{display:flex;gap:4px;margin-bottom:18px}
.ostep{flex:1;text-align:center;font-size:11px;padding:9px 4px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-3)}
.ostep.done{background:var(--brand-l);color:var(--brand);font-weight:500}
.ostep.cur{background:var(--brand);color:#fff;font-weight:500}
.ostep:first-child{border-radius:8px 0 0 8px}.ostep:last-child{border-radius:0 8px 8px 0}
/* timeline */
.tl{position:relative;padding-left:20px}
.tl .it{position:relative;padding:0 0 14px}
.tl .it::before{content:"";position:absolute;left:-14px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--brand)}
.tl .it::after{content:"";position:absolute;left:-9.5px;top:13px;bottom:-2px;width:1.5px;background:var(--border-2)}
.tl .it:last-child::after{display:none}
.tl .tt2{font-size:12.5px;font-weight:500}
.tl .tm{font-size:10.5px;color:var(--text-3);margin-top:3px}
/* profile */
.prof{text-align:center}
.pav{width:70px;height:70px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:500;margin:2px auto 10px}
.fld{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:7px 0}
.fld i{font-size:16px;color:var(--brand-m);width:16px}
.stat{display:flex;justify-content:space-around;margin:14px 0;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stat .sv{font-size:16px;font-weight:500;color:var(--brand)}
.stat .sl{font-size:10.5px;color:var(--text-3)}
.tabs{display:flex;gap:3px;margin-bottom:16px;border-bottom:1px solid var(--border)}
.tab{font-size:12.5px;padding:9px 13px;color:var(--text-2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.on{color:var(--brand);border-color:var(--brand);font-weight:500}
/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cald{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;min-height:86px;padding:7px;font-size:11px}
.cald .dn2{font-size:12px;color:var(--text-2);margin-bottom:5px}
.cald.off{opacity:.4}
.cald.today .dn2{color:#fff;background:var(--brand);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.ev{font-size:10px;padding:2px 6px;border-radius:4px;margin-bottom:3px;background:var(--brand-l);color:var(--brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.g{background:var(--ok-bg);color:var(--ok)}.ev.o{background:var(--warn-bg);color:var(--warn)}.ev.m{background:var(--info-bg);color:var(--info)}
.calh{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:8px}
.calh div{font-size:10.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px;text-align:center}
/* email */
.mailbox{display:grid;grid-template-columns:180px 1fr;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.mfold{border-right:1px solid var(--border);padding:12px}
.mf{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;font-size:12.5px;color:var(--text-2);cursor:pointer}
.mf.on{background:var(--brand-l);color:var(--brand);font-weight:500}
.mf .n{margin-left:auto;font-size:11px;color:var(--text-3)}
.mlist{}
.mitem{display:flex;gap:11px;padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer}
.mitem:hover{background:var(--surface-2)}
.mitem.un .msubj{font-weight:500}
.mitem .mmeta{flex:1;min-width:0}
.msubj{font-size:13px}
.mprev{font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtime{font-size:11px;color:var(--text-3);white-space:nowrap}
/* tpv */
.tpv{display:grid;grid-template-columns:1fr 300px;gap:14px}
.prodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px;text-align:center;cursor:pointer}
.pcard:hover{border-color:var(--brand-m)}
.pcard .pi{width:40px;height:40px;border-radius:10px;background:var(--brand-l);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:20px;margin:0 auto 8px}
.pcard .pn{font-size:12px;font-weight:500}
.pcard .pp{font-size:12px;color:var(--brand);margin-top:3px}
.ticket{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;flex-direction:column}
.tk{display:flex;justify-content:space-between;font-size:12.5px;padding:8px 0;border-bottom:1px solid var(--border)}
.tk .tq{color:var(--text-3);font-size:11px}
/* settings */
.setrow{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--border)}
.setrow:first-child{border-top:none}
.setrow .si{width:38px;height:38px;border-radius:10px;background:var(--brand-l);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:18px}
.setrow .g{flex:1}
.tog{width:40px;height:22px;border-radius:20px;background:var(--brand);position:relative;flex-shrink:0}
.tog::after{content:"";position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:#fff}
.tog.off{background:var(--border-2)}
.tog.off::after{right:auto;left:2px}
/* ai assistant */
.ai{display:grid;grid-template-columns:1fr 260px;gap:14px}
.chat{background:var(--surface);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;height:calc(100vh - 130px);overflow:hidden}
.chat .ch{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.chat .ch .ai-av{width:34px;height:34px;border-radius:10px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px}
.chat .ch .st{font-size:11px;color:var(--ok);display:flex;align-items:center;gap:4px}
.chat .ch .st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.msgs{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:14px}
.msg{display:flex;gap:10px;max-width:82%}
.msg .b{padding:10px 13px;border-radius:12px;font-size:13px;line-height:1.55}
.msg .mav{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.msg.ai-msg .mav{background:var(--brand-l);color:var(--brand)}
.msg.ai-msg .b{background:var(--surface-2);border:1px solid var(--border);border-top-left-radius:3px;color:var(--text)}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.me .mav{background:var(--brand-m);color:#fff}
.msg.me .b{background:var(--brand);color:#fff;border-top-right-radius:3px}
.msg .b b{font-weight:600}
.suggs{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 12px}
.sugg{font-size:12px;padding:7px 12px;border-radius:20px;border:1px solid var(--border-2);background:var(--surface);color:var(--brand-m);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.sugg:hover{background:var(--brand-l);border-color:var(--brand-l)}
.compose{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--border)}
.compose .cin{flex:1;display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:10px 13px;color:var(--text-3);font-size:13px}
.compose .send{width:40px;height:40px;border-radius:10px;background:var(--brand);color:#fff;border:none;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}
@media(max-width:820px){.grid4{grid-template-columns:repeat(2,1fr)}.pipe,.kan{grid-template-columns:repeat(2,1fr)}.c-15-1,.grid2,.grid3,.tpv,.ai{grid-template-columns:1fr}.parties{grid-template-columns:1fr}}
/* ==================== EXTRAS (login, forms, modal, toast, kanban drag, dsteps, segmented) ==================== */

/* Fix: enlaces del sidebar no oscurecidos por reglas globales */
.nav{color:#c3d3e2 !important;text-decoration:none}
.nav:hover{color:#fff !important}
.nav.on{color:#fff !important}
.side .foot .cog{margin-left:auto;color:#7d97b0;background:none;border:none;cursor:pointer;padding:6px;border-radius:6px;font-size:16px}
.side .foot .cog:hover{background:rgba(255,255,255,.06);color:#fff}
.badge-count{margin-left:auto;background:rgba(255,255,255,.14);color:#fff;font-size:10px;font-weight:600;padding:1px 8px;border-radius:20px}

/* Login centrado */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden;
  background:radial-gradient(1200px 700px at 50% -10%,var(--brand-m) 0%,var(--brand) 42%,var(--brand-d) 100%)}
.login-page::after{content:"";position:absolute;right:-140px;top:-140px;width:460px;height:460px;border-radius:50%;background:rgba(255,255,255,.04)}
.login-page::before{content:"";position:absolute;left:-120px;bottom:-120px;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.035)}
.login-box{position:relative;z-index:1;width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center}
.login-logo{margin-bottom:22px;text-align:center}
.login-logo img{height:48px;filter:brightness(0) invert(1)}
.login-card{width:100%;background:var(--surface);border:1px solid rgba(255,255,255,.4);border-radius:16px;padding:34px 32px 28px;box-shadow:0 24px 60px rgba(20,30,45,.28)}
.login-card h2{font-size:23px;font-weight:600;margin-bottom:6px;text-align:center}
.login-card .sub{font-size:13px;color:var(--text-2);margin-bottom:24px;text-align:center}
.login-foot{margin-top:22px;font-size:12.5px;color:var(--text-3);text-align:center}
.lbl{display:block;font-size:12px;font-weight:500;color:var(--text-2);margin:14px 0 6px}
.inp{width:100%;border:1px solid var(--border-2);border-radius:8px;padding:10px 12px;font-size:13.5px;color:var(--text);background:var(--surface);font-family:inherit;transition:border-color .12s,box-shadow .12s}
.inp:focus{outline:none;border-color:var(--brand-m);box-shadow:0 0 0 3px rgba(61,98,137,.13)}
.inp.is-invalid{border-color:#c0492a;box-shadow:0 0 0 3px rgba(192,73,42,.12)}
.inp::placeholder{color:var(--text-3)}
select.inp{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%235c6672' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 11px center;appearance:none;-webkit-appearance:none;padding-right:32px}
textarea.inp{resize:vertical;min-height:80px;font-family:inherit}
.pw-wrap{position:relative}.pw-wrap .inp{padding-right:44px}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-3);cursor:pointer;padding:4px;display:flex;font-size:17px}
.pw-toggle:hover{color:var(--brand-m)}
.switch{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-2);cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch i{width:36px;height:20px;border-radius:20px;background:var(--border-2);position:relative;transition:background .18s;flex-shrink:0;display:block}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + i{background:var(--brand)}
.switch input:checked + i::after{left:18px}
.alert{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:9px;font-size:12.5px;line-height:1.5;margin-bottom:6px}
.alert svg{width:17px;height:17px;flex-shrink:0;margin-top:1px}
.alert--error{background:var(--dang-bg);color:var(--dang)}
.alert--ok{background:var(--ok-bg);color:var(--ok)}
.btn--primary{width:100%;justify-content:center;margin-top:20px;padding:12px;font-size:14px}

/* Formularios */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px}
.form-grid .full{grid-column:1/-1}
.fgroup{display:flex;flex-direction:column}
.fgroup label{font-size:11.5px;font-weight:500;color:var(--text-2);margin-bottom:5px}
.fgroup label .req{color:#c0492a;margin-left:2px}
.field-err{font-size:11px;color:#c0492a;margin-top:4px}
.form-section{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:14px}
.form-section h3{font-size:13.5px;font-weight:600;margin-bottom:2px}
.form-section .desc{font-size:11.5px;color:var(--text-3);margin-bottom:14px}
.form-actions{display:flex;align-items:center;gap:10px;padding-top:6px}
.btn-danger{background:var(--surface);color:var(--dang);border:1px solid var(--border-2);border-radius:8px;padding:8px 12px;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn-danger:hover{background:var(--dang-bg);border-color:var(--dang-bg)}
.section-title,.form-sec-title{font-size:10.5px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.bc .lnk,.h .mo,a.mo{text-decoration:none}
table.tbl input.inp{padding:7px 9px;font-size:12.5px}
table.tbl input.inp.r{text-align:right}

/* Segmented (empresa/particular) */
.segmented{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:3px;gap:2px}
.segmented input{position:absolute;opacity:0;pointer-events:none}
.segmented label{padding:6px 12px;border-radius:6px;font-size:12.5px;color:var(--text-2);cursor:pointer;font-weight:500}
.segmented input:checked + label{background:var(--brand);color:#fff}

/* Modal / toast / dropdown */
.modal-bg{position:fixed;inset:0;background:rgba(20,30,45,.5);backdrop-filter:blur(2px);z-index:50;display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.modal-bg.open{display:flex}
.modal{background:var(--surface);border-radius:14px;width:100%;max-width:560px;box-shadow:0 24px 60px rgba(20,30,45,.28);animation:mI .18s ease}
.modal.lg{max-width:760px}
@keyframes mI{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-h .t{font-size:14.5px;font-weight:600}
.modal-h .x{width:30px;height:30px;border-radius:7px;border:none;background:var(--surface-2);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:17px}
.modal-h .x:hover{background:var(--border)}
.modal-b{padding:20px}
.modal-f{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--border);background:var(--surface-2);border-radius:0 0 14px 14px}
.toast-host{position:fixed;bottom:22px;right:22px;z-index:80;display:flex;flex-direction:column;gap:10px}
.toast{display:flex;align-items:center;gap:10px;background:var(--brand-d);color:#fff;padding:11px 15px;border-radius:10px;font-size:13px;box-shadow:0 12px 30px rgba(20,30,45,.3);animation:tI .2s ease}
.toast.ok{background:var(--ok)}.toast.err{background:var(--dang)}
@keyframes tI{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
.dd{position:relative;display:inline-block}
.dd-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 30px rgba(20,30,45,.15);padding:6px;min-width:180px;z-index:20;display:none}
.dd-menu.open{display:block}
.dd-menu a,.dd-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 10px;border-radius:7px;font-size:12.5px;color:var(--text);background:none;border:none;cursor:pointer;text-decoration:none;font-family:inherit}
.dd-menu a:hover,.dd-menu button:hover{background:var(--surface-2)}
.dd-menu .sep{height:1px;background:var(--border);margin:5px 0}
.dd-menu button.dng,.dd-menu a.dng{color:var(--dang)}
.dd-menu .head{padding:8px 10px;font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}

/* Kanban drag */
.klist.over{outline:2px dashed var(--brand-m);outline-offset:-2px}
.deal[draggable]{cursor:grab}.deal[draggable]:active{cursor:grabbing}
.kvrow{display:flex;align-items:center;gap:10px}
.kvacio{font-size:11.5px;color:var(--text-3)}
.klist:has(.deal) .kvacio{display:none}

/* Reparaciones — pasos */
.dsteps{display:flex;margin:0 0 22px}
.dstp{flex:1;text-align:center;position:relative}
.dstp .cir{width:28px;height:28px;border-radius:50%;background:var(--surface-2);border:1.5px solid var(--border-2);color:var(--text-3);display:flex;align-items:center;justify-content:center;font-size:14px;margin:0 auto 7px;position:relative;z-index:1}
.dstp.done .cir{background:var(--brand);border-color:var(--brand);color:#fff}
.dstp.cur .cir{background:#fff;border-color:var(--brand);color:var(--brand)}
.dstp .lb{font-size:11px;color:var(--text-2)}
.dstp.done .lb,.dstp.cur .lb{color:var(--brand);font-weight:500}
.dstp::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:1.5px;background:var(--border-2)}
.dstp.done::before,.dstp.cur::before{background:var(--brand)}
.dstp:first-child::before{display:none}

/* Oportunidad — pasos */
.osteps{display:flex;gap:4px;margin-bottom:18px}
.ostep{flex:1;text-align:center;font-size:11px;padding:9px 4px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-3);cursor:pointer}
.ostep.done{background:var(--brand-l);color:var(--brand);font-weight:500}
.ostep.cur{background:var(--brand);color:#fff;font-weight:500}
.ostep:first-child{border-radius:8px 0 0 8px}.ostep:last-child{border-radius:0 8px 8px 0}
.osteps.clickable .ostep{cursor:pointer}

/* Sum de líneas */
.sum{display:flex;justify-content:flex-end;margin-top:16px}
.sumb{width:270px}
.srow{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;color:var(--text-2)}
.srow span:last-child{color:var(--text)}
.trow{display:flex;justify-content:space-between;font-size:16px;font-weight:500;padding:11px 0 0;margin-top:6px;border-top:1.5px solid var(--brand)}
.trow .tv{color:var(--brand)}

/* Ficha (avatar grande) */
.prof{text-align:center}
.pav{width:70px;height:70px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:500;margin:2px auto 10px}
.fld{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:7px 0}
.fld i{font-size:16px;color:var(--brand-m);width:16px}
.stat{display:flex;justify-content:space-around;margin:14px 0;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stat .sv{font-size:16px;font-weight:500;color:var(--brand)}
.stat .sl{font-size:10.5px;color:var(--text-3)}
.tabs{display:flex;gap:3px;margin-bottom:16px;border-bottom:1px solid var(--border)}
.tab{font-size:12.5px;padding:9px 13px;color:var(--text-2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.on{color:var(--brand);border-color:var(--brand);font-weight:500}

/* Paginación / empty / utilidades / calendario */
.pagination{display:flex;gap:4px;list-style:none;margin:0;justify-content:flex-end}
.pagination a,.pagination span{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border:1px solid var(--border);border-radius:8px;font-size:12.5px;color:var(--text-2);text-decoration:none;background:var(--surface)}
.pagination .active span{background:var(--brand);color:#fff;border-color:var(--brand)}
.pagination [aria-disabled] span{opacity:.4}
.empty{text-align:center;padding:44px 20px;color:var(--text-3)}
.empty > i{font-size:38px;opacity:.5;display:block;margin-bottom:10px}
.empty .btn{margin-top:14px}
.empty .btn i{font-size:15px}
.empty .txt{font-size:13px;color:var(--text-2);font-weight:500;margin-bottom:4px}
.link{color:var(--brand-m);cursor:pointer;text-decoration:none}
.link:hover{color:var(--brand)}
.mut{color:var(--text-3);font-size:11px;margin-top:2px}
a.plain{color:inherit;text-decoration:none}

.cald{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;min-height:86px;padding:7px;font-size:11px}
.cald .dn2{font-size:12px;color:var(--text-2);margin-bottom:5px}
.cald.off{opacity:.4}
.cald.today .dn2{color:#fff;background:var(--brand);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.ev{font-size:10px;padding:2px 6px;border-radius:4px;margin-bottom:3px;background:var(--brand-l);color:var(--brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.g{background:var(--ok-bg);color:var(--ok)}.ev.o{background:var(--warn-bg);color:var(--warn)}.ev.m{background:var(--info-bg);color:var(--info)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calh{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:8px}
.calh div{font-size:10.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px;text-align:center}

/* Screen force show */
.screen{display:block}
@media(max-width:820px){.grid4,.grid5{grid-template-columns:repeat(2,1fr)}.pipe,.kan{grid-template-columns:repeat(2,1fr)}.c-15-1,.grid2,.grid3{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}}

/* ==================== SELECTOR PROPIO (sustituye al desplegable del sistema) ====================
   El <select> real sigue en el DOM (invisible pero enfocable): el formulario, la validación
   del navegador y el JS existente siguen funcionando igual. Esto solo es la capa visual. */
.sel{position:relative;width:100%}
.sel-nativo{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;z-index:-1}
.sel-btn{display:flex;align-items:center;gap:8px;text-align:left;line-height:16px;cursor:pointer;
  padding-right:32px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%235c6672' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center}
.sel-btn:hover{border-color:var(--text-3)}
.sel-btn:focus{outline:none;border-color:var(--brand-m);box-shadow:0 0 0 3px rgba(61,98,137,.13)}
.sel.abierto .sel-btn{border-color:var(--brand-m);box-shadow:0 0 0 3px rgba(61,98,137,.13)}
.sel.invalido .sel-btn{border-color:#c0492a;box-shadow:0 0 0 3px rgba(192,73,42,.12)}
.sel.inhabil .sel-btn{background-color:var(--surface-2);color:var(--text-3);cursor:not-allowed}
.sel-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-val.vacia{color:var(--text-3)}

.sel-pop{position:fixed;z-index:60;background:var(--surface);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 12px 30px rgba(20,30,45,.15);padding:6px;display:none;flex-direction:column;overflow:hidden}
.sel-pop.abierto{display:flex;animation:selIn .13s ease}
@keyframes selIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sel-buscar{position:relative;padding:2px 2px 6px;margin-bottom:4px;border-bottom:1px solid var(--border);flex-shrink:0}
.sel-buscar .ti{position:absolute;left:10px;top:9px;font-size:14px;color:var(--text-3);pointer-events:none}
.sel-buscar input{width:100%;border:1px solid var(--border-2);border-radius:7px;padding:7px 10px 7px 30px;
  font-size:12.5px;font-family:inherit;color:var(--text);background:var(--surface)}
.sel-buscar input:focus{outline:none;border-color:var(--brand-m)}
.sel-lista{overflow-y:auto;overscroll-behavior:contain;max-height:266px}
.sel-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;font-size:12.5px;
  color:var(--text);cursor:pointer;overflow:hidden}
.sel-opt-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-opt:hover{background:var(--surface-2)}
.sel-opt.elegida{background:var(--brand-l);color:var(--brand);font-weight:500}
.sel-opt.activa{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--brand-m)}
.sel-opt.elegida.activa,.sel-opt.elegida:hover{background:var(--brand-l)}
.sel-opt.inhabil{color:var(--text-3);cursor:not-allowed}
.sel-grupo{padding:8px 10px 4px;font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}
.sel-vacio{padding:16px 10px;text-align:center;font-size:12.5px;color:var(--text-3)}
.sel-pie{flex-shrink:0;padding:7px 10px 3px;margin-top:4px;border-top:1px solid var(--border);
  font-size:11px;color:var(--text-3);text-align:center}
/* Dentro de las tablas de líneas los campos son más bajos: el selector se iguala a ellos */
table.tbl .sel-btn{padding:7px 9px;padding-right:28px;font-size:12.5px;line-height:15px;background-position:right 9px center}
@media(max-width:820px){.sel-lista{max-height:46vh}}

/* ==================== Buscador global instantáneo (sugerencias al teclear) ==================== */
.gsug{position:fixed;z-index:60;background:var(--surface);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 12px 30px rgba(20,30,45,.15);padding:6px;display:none;flex-direction:column;overflow:hidden}
.gsug.abierto{display:flex;animation:selIn .13s ease}
.gsug-lista{overflow-y:auto;overscroll-behavior:contain;max-height:min(60vh,440px)}
.gsug-grupo{padding:9px 10px 4px;font-size:10.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.gsug-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;cursor:pointer}
.gsug-item>.ti{font-size:17px;color:var(--brand-m);flex-shrink:0;width:18px;text-align:center}
.gsug-item:hover,.gsug-item.activa{background:var(--surface-2)}
.gsug-item .g{flex:1;min-width:0}
.gsug-item .nm{font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsug-item .mut{font-size:11px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.gsug-pie{flex-shrink:0;border-top:1px solid var(--border);margin-top:4px;padding:9px 10px;font-size:12px;
  color:var(--brand);cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}
.gsug-pie:hover,.gsug-pie.activa{background:var(--surface-2)}
.gsug-estado{padding:18px 10px;text-align:center;font-size:12.5px;color:var(--text-3)}

/* Calendario: celda clicable y modal de día */
.cald-clic{cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease}
.cald-clic:hover{border-color:var(--brand-m);box-shadow:0 1px 6px rgba(20,30,45,.08)}
.cald-clic:focus-visible{outline:2px solid var(--brand-m);outline-offset:1px}
.modal{margin:auto}
#dia-body{max-height:min(60vh,520px);overflow-y:auto}
#dia-body .lrow .ti-chevron-right{margin-left:2px}
#dia-body form{margin:0}
#dia-body .chip{font:inherit;font-size:12px}

/* Botón de filtro de la tarjeta "Ingresos del mes" (dashboard) */
.kpi-alt{background:none;border:none;padding:0;margin-top:7px;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--brand-m);cursor:pointer;font-family:inherit}
.kpi-alt:hover{text-decoration:underline}

/* Móvil: barra lateral plegable (en escritorio no cambia nada) */
.menu-btn{display:none;background:none;border:none;color:var(--text-2);font-size:21px;cursor:pointer;padding:6px;border-radius:8px;margin-right:2px}
.side-velo{display:none}
@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;top:0;bottom:0;left:0;width:240px;z-index:70;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 30px rgba(10,20,30,.35)}
  body.menu-abierto .side{transform:none}
  body.menu-abierto .side-velo{display:block;position:fixed;inset:0;background:rgba(15,30,45,.45);z-index:65}
  .menu-btn{display:inline-flex;align-items:center}
}