*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f5f5f3;color:#1a1a18;font-size:14px}

/* ══ NAV ══ */
.nav{background:#fff;border-bottom:1px solid #e0e0dc;padding:0 16px;display:flex;align-items:center;gap:2px;height:46px;position:sticky;top:0;z-index:10;overflow-x:auto}
.nav-brand{font-weight:600;font-size:15px;margin-right:12px;white-space:nowrap}
.nav-btn{background:none;border:none;font-size:13px;color:#888;padding:5px 10px;border-radius:6px;cursor:pointer;white-space:nowrap}
.nav-btn:hover{background:#f5f5f3;color:#1a1a18}
.nav-btn.act{background:#1a1a18;color:#fff}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0}
.save-badge{font-size:11px;color:#27500A;background:#EAF3DE;padding:3px 10px;border-radius:20px;display:none}

/* ══ PAGE ══ */
.pg{padding:18px;max-width:1100px;margin:0 auto}
.pg-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.pg-hdr h1{font-size:24px;font-weight:500;letter-spacing:-0.3px}

/* ══ BUTTONS ══ */
.btn{border:1px solid #ddd;background:#fff;color:#1a1a18;padding:7px 14px;border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap}
.btn:hover{background:#f5f5f3}
.btn-p{background:#1a1a18;color:#fff;border-color:#1a1a18}
.btn-p:hover{background:#333}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-d{background:#fff;color:#A32D2D;border-color:#f09595}
.btn-d:hover{background:#FCEBEB}
.btn-menu{font-size:16px;letter-spacing:2px;padding:5px 10px}
.btn-link{background:none;border:none;color:#3C3489;font-size:12px;cursor:pointer;padding:0;text-decoration:underline}
.btn-link:hover{color:#26215C}
.btn-link-d{color:#A32D2D}

/* ══ TABS NIVEL 1 ══ */
.lv1{display:flex;gap:0;border-bottom:1px solid #e0e0dc}
.t1{font-size:14px;padding:10px 20px;cursor:pointer;color:#999;border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:all 0.15s;user-select:none}
.t1:hover{color:#555}
.t1.act{color:#1a1a18;border-color:#1a1a18;font-weight:600}
.t1 .ct{font-size:12px;color:#aaa;margin-left:6px;font-weight:400}
.t1.act .ct{color:#888}

/* ══ TABS NIVEL 2 ══ */
.lv2{display:flex;gap:0;background:#fff;border-bottom:1px solid #e0e0dc;overflow-x:auto;padding:0 4px}
.t2{font-size:13px;padding:9px 14px;cursor:pointer;color:#777;border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:all 0.15s;white-space:nowrap;user-select:none;display:flex;align-items:center;gap:6px}
.t2:hover{color:#666}
.t2.act{font-weight:600}
.t2 .dot{width:8px;height:8px;border-radius:50%;opacity:0.65;flex-shrink:0}
.t2.act .dot{opacity:1}
.t2 .ct2{font-size:11px;background:#f0f0ec;border-radius:10px;padding:1px 7px;color:#999}
.t2.act .ct2{font-weight:500}
.t2-all.act{color:#1a1a18;border-color:#888}
.t2-pr .dot{background:#888}.t2-pr.act{color:#555;border-color:#888}
.t2-et .dot{background:#D85A30}.t2-et.act{color:#993C1D;border-color:#D85A30}
.t2-ep .dot{background:#1D9E75}.t2-ep.act{color:#0F6E56;border-color:#1D9E75}
.t2-rp .dot{background:#EF9F27}.t2-rp.act{color:#854F0B;border-color:#EF9F27}
.t2-rc .dot{background:#639922}.t2-rc.act{color:#27500A;border-color:#639922}

/* ══ CARDS ══ */
.cards{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:12px;margin:18px 0}
.card{background:#fff;border:1px solid #e8e8e4;border-radius:12px;padding:16px 18px}
.card-label{font-size:12px;color:#666;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:8px}
.card-val{font-size:22px;font-weight:600;color:#1a1a18;line-height:1.2}
.card-val .unit{font-size:16px;font-weight:500}
.card-sub{font-size:13px;color:#1a1a18;margin-top:5px}
.card-val.debt{color:#854F0B}
.card-val.green{color:#27500A}
.card-highlight{border-color:#EF9F27;border-width:1.5px}

/* ══ SEARCH & FILTER ══ */
.fb{display:flex;gap:8px;padding:14px 0;flex-wrap:wrap;align-items:center}
.fb input{font-size:13px;padding:7px 12px;border-radius:8px;border:1px solid #ddd;min-width:220px;background:#fff;color:#1a1a18;outline:none;transition:border 0.15s}
.fb input:focus{border-color:#aaa}
.fb select{font-size:13px;padding:7px 12px;border-radius:8px;border:1px solid #ddd;background:#fff;color:#1a1a18;outline:none}
.fb .spacer{flex:1}
.pills{display:flex;gap:6px;align-items:center}
.pill{font-size:11px;padding:4px 12px;border-radius:20px;cursor:pointer;background:#f0f0ec;color:#888;transition:all 0.15s;user-select:none}
.pill:hover{background:#e0e0dc;color:#555}
.pill.act{background:#1a1a18;color:#fff}

/* ══ TABLE ══ */
.tw{background:#fff;border:1px solid #e0e0dc;border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
table{width:100%;border-collapse:collapse;font-size:13px;table-layout:auto}
th{padding:10px 14px;text-align:left;font-size:11px;color:#999;font-weight:500;border-bottom:1px solid #e8e8e4;white-space:nowrap;text-transform:uppercase;letter-spacing:0.3px;background:#fafaf8}
td{padding:12px 14px;border-bottom:1px solid #f5f5f0;vertical-align:middle}
tr:last-child td{border-bottom:none}
th.r,td.r{text-align:right}
tr.row:hover td{background:#fafaf8;cursor:pointer}
tr.row>td:first-child{padding-left:12px}
.foot td{font-weight:600;font-size:13px;border-top:1.5px solid #e0e0dc;background:#fafaf8;color:#555}

/* Row accents */
tr.row-pr>td:first-child{border-left:3px solid #B4B2A9}
tr.row-et>td:first-child{border-left:3px solid #D85A30}
tr.row-ep>td:first-child{border-left:3px solid #1D9E75}
tr.row-rp>td:first-child{border-left:3px solid #EF9F27}
tr.row-rc>td:first-child{border-left:3px solid #639922}

/* ══ CELLS ══ */
.id-cell{display:flex;flex-direction:column;gap:1px}
.id{font-weight:600;font-size:13px;color:#1a1a18;cursor:pointer}
.id:hover{color:#3C3489}
.nota{color:#aaa;font-size:11px;font-weight:400}
.pv{color:#666;font-size:13px}
.saldo{color:#854F0B;font-weight:600}
.saldo-ok{color:#27500A;font-weight:500}
.rec-ok{color:#27500A;font-weight:500;font-size:12px}
.falt{color:#A32D2D;font-weight:600;font-size:12px}
.info{font-size:12px;color:#888}
.info-desp{color:#3C3489;font-weight:500;font-size:12px}

/* ══ CHIPS ══ */
.prods{display:flex;flex-wrap:wrap;gap:3px}
.prod-chip{background:#f5f5f0;border-radius:4px;padding:2px 7px;font-size:11px;color:#666;white-space:nowrap}

/* ══ BADGES ══ */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.b-sp{background:#FEF2F2;color:#991B1B}.b-sp::before{content:'';width:6px;height:6px;border-radius:50%;background:#E24B4A}
.b-an{background:#FEF9EE;color:#854F0B}.b-an::before{content:'';width:6px;height:6px;border-radius:50%;background:#EF9F27}
.b-pa{background:#EFF6FF;color:#1E40AF}.b-pa::before{content:'';width:6px;height:6px;border-radius:50%;background:#378ADD}
.b-pg{background:#F0FDF4;color:#166534}.b-pg::before{content:'';width:6px;height:6px;border-radius:50%;background:#639922}

.fase{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500}
.f-pr{background:#f0f0ec;color:#5F5E5A}
.f-et{background:#FAECE7;color:#993C1D}
.f-ep{background:#E1F5EE;color:#0F6E56}
.f-rp{background:#FAEEDA;color:#633806}
.f-rc{background:#EAF3DE;color:#27500A}

.badge-estado{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600}
.be-activa{background:#E1F5EE;color:#085041}
.be-cerrada{background:#f0f0ec;color:#555}
.be-cancelada{background:#FCEBEB;color:#791F1F}

/* ══ ETA ══ */
.eta-c{display:flex;flex-direction:column;gap:1px}
.eta-d{font-weight:600;color:#854F0B;font-size:13px}
.eta-dd{font-size:11px;color:#B07A1A}
.eta-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px}
.eta-row+.eta-row{border-top:1px solid #f5f5f0}
.eta-emb{font-weight:600;color:#3C3489;min-width:62px;cursor:pointer}
.eta-emb:hover{text-decoration:underline}
.eta-pv{color:#888;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eta-date{font-weight:600;color:#854F0B;white-space:nowrap}
.eta-dias{font-size:11px;color:#B07A1A;white-space:nowrap}

/* ══ PROGRESS BAR ══ */
.bar-wrap{height:4px;background:#f0f0ec;border-radius:2px;width:60px;margin-top:3px}
.bar-fill{height:4px;border-radius:2px;background:#1D9E75}
.bar-lg{height:6px;background:#f0f0ec;border-radius:3px;margin-top:8px}
.bar-lg-fill{height:6px;border-radius:3px}
.bar-sm{height:4px;background:#f0f0ec;border-radius:2px;width:80px;margin-top:3px}
.bar-sm-fill{height:4px;border-radius:2px}

/* ══ BACK ══ */
.back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#3C3489;cursor:pointer;margin-bottom:20px;padding:5px 12px 5px 8px;border-radius:6px;border:none;background:#f0f0ec}
.back:hover{background:#e8e8e4}

/* ══ FICHA ══ */
.ficha{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid #e8e8e4;border-radius:10px;overflow:hidden;background:#fff;margin-top:16px}
.ficha-item{padding:10px 14px;border-right:1px solid #f0f0ec;border-bottom:1px solid #f0f0ec}
.ficha-item:nth-child(4n){border-right:none}
.ficha-item:nth-last-child(-n+4){border-bottom:none}
.ficha-l{font-size:10px;color:#999;text-transform:uppercase;letter-spacing:0.3px;margin-bottom:3px}
.ficha-v{font-size:13px;color:#1a1a18}
.ficha-v.link{color:#3C3489;cursor:pointer}
.ficha-v.link:hover{text-decoration:underline}
.ficha-v.eta{color:#993C1D;font-weight:600}

/* ══ DETAIL TABS ══ */
.dtabs{display:flex;gap:0;border-bottom:1px solid #e0e0dc;margin-bottom:0}
.dtab{font-size:13px;padding:10px 16px;cursor:pointer;color:#777;border-bottom:2.5px solid transparent;margin-bottom:-1px;user-select:none;display:flex;align-items:center;gap:6px}
.dtab:hover{color:#555}
.dtab.act{color:#1a1a18;border-color:#1a1a18;font-weight:600}
.dtab .tc{font-size:11px;background:#f0f0ec;border-radius:10px;padding:1px 7px;color:#999}
.dtab-content{background:#fff;border:1px solid #e0e0dc;border-top:none;border-radius:0 0 14px 14px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.04)}

/* ══ PAGO ITEM ══ */
.pago{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid #f5f5f0;align-items:flex-start}
.pago:last-child{border-bottom:none}
.pago-num{width:24px;height:24px;border-radius:50%;background:#f0f0ec;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#888;flex-shrink:0}
.pago-body{flex:1;min-width:0}
.pago-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:2px}

/* ══ EMBARQUE CARD ══ */
.emb-card{background:#fafaf8;border:1px solid #e8e8e4;border-radius:10px;padding:14px 16px;margin-bottom:8px}
.emb-card:hover{background:#f5f5f0;cursor:pointer}
.emb-id{font-weight:600;font-size:14px;color:#3C3489}

/* ══ ADJUNTOS ══ */
.adj{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #e8e8e4;border-radius:10px;margin-bottom:6px;background:#fafaf8}
.adj:hover{background:#f5f5f0}
.adj-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.adj-pdf{background:#FCEBEB;color:#A32D2D}
.adj-xls{background:#EAF3DE;color:#27500A}
.adj-ot{background:#f0f0ec;color:#555}

/* ══ MODAL ══ */
.ov{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.mo{background:#fff;border-radius:12px;width:100%;max-width:560px;padding:22px;max-height:90vh;overflow-y:auto}
.mh{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.mh h2{font-size:16px;font-weight:600}
.mh p{font-size:12px;color:#888;margin-top:2px}
.ff{margin-bottom:14px}
.ff label{display:block;font-size:12px;color:#666;margin-bottom:4px;font-weight:500}
.ff input,.ff select,.ff textarea{width:100%;font-size:13px;padding:7px 10px;border-radius:8px;border:1px solid #ccc;background:#fff;color:#1a1a18}
.ff textarea{resize:none;height:56px}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.al{border-radius:8px;padding:10px 14px;font-size:12px;margin-bottom:14px}
.aw{background:#FAEEDA;color:#633806}
.ai{background:#EEEDFE;color:#3C3489}

/* ══ SIDE PANEL ══ */
.side-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.15);z-index:80;display:none}
.side-overlay.open{display:block}
.side-panel{position:fixed;top:0;right:-420px;width:420px;height:100vh;background:#fff;border-left:1px solid #e0e0dc;box-shadow:-4px 0 20px rgba(0,0,0,0.06);z-index:90;overflow-y:auto;transition:right 0.25s ease}
.side-panel.open{right:0}

/* ══ CONTEXT MENU ══ */
.ctx{position:relative;display:inline-block}
.expand-trigger{cursor:pointer}
.expand-trigger td:first-child::before{content:'â–¸';color:#aaa;margin-right:6px;font-size:11px}
.expand-trigger.open td:first-child::before{content:'â–¾'}
.expand-row{display:none}
.expand-row.show{display:table-row}
.expand-row td{background:#fafaf8;font-size:12px}
.pf-chip{background:#EEEDFE;border-radius:4px;padding:2px 7px;font-size:11px;color:#3C3489;white-space:nowrap;cursor:pointer}
.pf-chip:hover{background:#CECBF6}
.ctx-menu{display:none;position:absolute;right:0;top:100%;background:#fff;border:1px solid #e0e0dc;border-radius:8px;padding:4px 0;min-width:160px;z-index:20;box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.ctx-menu.open{display:block}
.ctx-menu button{display:block;width:100%;text-align:left;padding:8px 14px;font-size:12px;border:none;background:none;cursor:pointer;color:#1a1a18}
.ctx-menu button:hover{background:#f5f5f3}
.ctx-menu .dg{color:#A32D2D}
.ctx-sep{border-top:1px solid #e0e0dc;margin:4px 0}

/* ══ SUMMARY ══ */
.summary{display:flex;gap:16px;padding:14px 16px;background:#fafaf8;border:1px solid #e8e8e4;border-radius:10px;margin-top:14px;flex-wrap:wrap;font-size:13px}

/* ══ SECTION ══ */
.section{background:#fff;border:1px solid #e0e0dc;border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.04);margin-bottom:16px}
.section-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #f0f0ec}
.section-head h3{font-size:15px;font-weight:500}
.sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.sh h3{font-size:15px;font-weight:500}

/* ══ ITEM ROW (new proforma) ══ */
.ire{display:flex;gap:8px;align-items:flex-end;margin-bottom:8px;flex-wrap:wrap}
.ire select,.ire input{font-size:13px;padding:5px 8px;border-radius:6px;border:1px solid #ccc}
.rb{background:none;border:none;color:#ccc;font-size:18px;cursor:pointer;padding:0 4px;line-height:1}
.rb:hover{color:#A32D2D}

/* ══ MAESTROS ══ */
.country{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;background:#f0f0ec;color:#666}
.unit-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;background:#f0f0ec;color:#666}
.section-tabs{display:flex;gap:0;border-bottom:1px solid #e0e0dc;background:#fff}
.stab{font-size:13px;padding:10px 16px;cursor:pointer;color:#777;border-bottom:2.5px solid transparent;margin-bottom:-1px;user-select:none}
.stab:hover{color:#555}
.stab.act{color:#1a1a18;border-color:#1a1a18;font-weight:600}
.stab .tc{font-size:11px;background:#f0f0ec;border-radius:10px;padding:1px 7px;color:#999;margin-left:4px}
.pnl{display:none}.pnl.show{display:block}
.pac-item{display:flex;gap:14px;padding:14px 18px;border-bottom:1px solid #f5f5f0;align-items:flex-start}
.pac-item:last-child{border-bottom:none}
.pac-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:4px}
.pac-body{flex:1;min-width:0}
.pac-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pac-monto{font-weight:600;font-size:15px}
.pac-meta{font-size:12px;color:#888;margin-top:2px}
.pac-status{font-size:12px;margin-top:2px;font-weight:500}
.pac-actions{display:flex;gap:8px;margin-top:6px}
.emb-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.emb-detail{font-size:12px;color:#888;margin-top:4px}

/* ══ DASHBOARD ══ */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.tw-hdr{padding:12px 14px;border-bottom:1px solid #e0e0dc;display:flex;justify-content:space-between;align-items:center}
.tw-title{font-weight:600;font-size:14px}
.val-sm{font-size:12px;color:#888;margin-top:1px}
.exp-toggle{color:#888;font-size:12px;margin-right:4px;display:inline-block;width:12px}
.sub-row td{padding:7px 14px 7px 32px;font-size:12px;background:#fafaf8}
.sub-row:hover td{background:#f5f5f0;cursor:pointer}
.ver-mas{padding:9px 14px;color:#3C3489;cursor:pointer;font-size:12px}
.ver-mas:hover{text-decoration:underline}
.yr{display:flex;gap:6px;justify-content:flex-end;margin:18px 0 14px;flex-wrap:wrap}
.yr-btn{font-size:12px;padding:4px 12px;border-radius:6px;border:1px solid #ccc;background:#fff;color:#888;cursor:pointer;transition:all 0.15s}
.yr-btn:hover{border-color:#999;color:#555}
.yr-btn.act{background:#1a1a18;color:#fff;border-color:#1a1a18}
.sp-hdr{padding:18px;border-bottom:1px solid #e0e0dc;display:flex;justify-content:space-between;align-items:center}
.sp-title{font-size:16px;font-weight:600}
.sp-close{background:none;border:none;font-size:22px;color:#888;cursor:pointer;padding:0 4px}
.sp-close:hover{color:#1a1a18}
.sp-item{padding:14px 18px;border-bottom:1px solid #f5f5f0}
.sp-item:hover{background:#fafaf8}

/* ══ PLAN DE COMPRAS ══ */
.plan-card{background:#FAFAF8;border:1px solid #e0e0dc;border-radius:12px;margin-bottom:6px;display:flex;align-items:stretch;cursor:pointer;overflow:visible;position:relative}
.plan-card:hover{background:#F5F5F0}
.plan-date{width:56px;min-width:56px;border-radius:12px 0 0 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;font-weight:600;line-height:1.3;flex-shrink:0}
.plan-date.has-date{background:#2a2a28;color:#fff}
.plan-date.no-date{background:#f0f0ec;color:#A32D2D}
.plan-body{flex:1;padding:12px 14px;display:flex;align-items:center;gap:12px;min-width:0}
.plus-btn{width:22px;height:22px;border-radius:6px;background:#EEEDFE;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;color:#534AB7;font-weight:500;flex-shrink:0}
.plus-btn:hover{background:#CECBF6}
.check-btn{width:22px;height:22px;border-radius:6px;background:#EAF3DE;display:flex;align-items:center;justify-content:center;font-size:11px;color:#27500A;flex-shrink:0}
.ec-row:hover td{background:#fafaf8;cursor:pointer}
.ec-gray{opacity:0.35}.ec-gray:hover{opacity:0.5}

/* ══ RESPONSIVE ══ */
@media(max-width:768px){.r2{grid-template-columns:1fr}.cards{grid-template-columns:1fr 1fr}.ficha{grid-template-columns:1fr 1fr}table{font-size:12px}th,td{padding:8px 6px}.mo{padding:16px;max-width:100%}.side-panel{width:100%;right:-100%}.g2{grid-template-columns:1fr}}
@media(max-width:480px){.cards{grid-template-columns:1fr}.nav-btn{font-size:12px;padding:5px 7px}.nav-brand{font-size:14px;margin-right:8px}}