*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --pr:#1F4E79;--pr-mid:#2E75B6;--pr-light:#EBF3FB;--pr-brd:#B5D4F4;
  --ok:#27AE60;--ok-l:#EAF7F0;--warn:#F39C12;--warn-l:#FEF9EC;
  --err:#E74C3C;--err-l:#FDECEA;
  --g50:#F9FAFB;--g100:#F3F4F6;--g200:#E5E7EB;--g300:#D1D5DB;--g400:#9CA3AF;--g600:#4B5563;--g800:#1F2937;
  --bg:#F0F4F8;--card:#fff;--tx:#1a2035;--txm:#64748b;
  --sw:220px;--hh:56px;--r:10px;--rs:6px;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--tx);font-size:14px;line-height:1.5;min-height:100vh}

/* ===== HEADER ===== */
.hdr{position:sticky;top:0;z-index:100;height:var(--hh);background:var(--pr);display:flex;align-items:center;padding:0 20px;gap:16px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.logo{color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0}
.logo-ico{width:28px;height:28px;background:rgba(255,255,255,.2);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0}
.tabs{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:6px 14px;border-radius:var(--rs);color:rgba(255,255,255,.75);cursor:pointer;font-size:13px;font-weight:500;border:none;background:transparent;transition:background .15s;white-space:nowrap;flex-shrink:0}
.tab:hover{background:rgba(255,255,255,.15);color:#fff}
.tab.on{background:rgba(255,255,255,.25);color:#fff}

/* ===== LAYOUT ===== */
.body{display:flex;min-height:calc(100vh - var(--hh))}
.sidebar{width:var(--sw);background:var(--card);border-right:1px solid var(--g200);padding:16px 0;flex-shrink:0;position:sticky;top:var(--hh);height:calc(100vh - var(--hh));overflow-y:auto}
.sl{font-size:10px;font-weight:700;color:var(--txm);text-transform:uppercase;letter-spacing:.08em;padding:12px 16px 6px}
.si{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;color:var(--g600);font-size:13px;transition:background .12s,color .12s;border-left:3px solid transparent}
.si:hover{background:var(--g50);color:var(--tx)}
.si.on{background:var(--pr-light);color:var(--pr);border-left-color:var(--pr);font-weight:600}
.main{flex:1;padding:24px;overflow-y:auto;min-width:0}

/* ===== SECTION / SCREEN ===== */
.sec{display:none}.sec.on{display:block}
.scr{display:none}.scr.on{display:block}

/* ===== CARD ===== */
.card{background:var(--card);border-radius:var(--r);border:1px solid var(--g200);padding:20px;margin-bottom:16px}
.ct{font-size:15px;font-weight:600;color:var(--tx);margin-bottom:16px}

/* ===== BADGE ===== */
.bdg{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.bi{background:var(--pr-light);color:var(--pr)}
.bo{background:var(--ok-l);color:#166534}
.bw{background:var(--warn-l);color:#92400e}
.be{background:var(--err-l);color:#991b1b}
.bg{background:var(--g100);color:var(--g600)}
.bp{background:#f3e8ff;color:#6b21a8}

/* ===== PLAN CARD ===== */
.plan{background:linear-gradient(135deg,var(--pr),var(--pr-mid));border-radius:var(--r);padding:20px;color:#fff;margin-bottom:16px}
.pn{font-size:11px;opacity:.8;text-transform:uppercase;letter-spacing:.1em}
.pt{font-size:22px;font-weight:700;margin:4px 0}
.creds{display:flex;gap:12px;margin-top:16px}
.cr{flex:1;background:rgba(255,255,255,.15);border-radius:8px;padding:12px}
.cl{font-size:10px;opacity:.8;text-transform:uppercase}
.cv{font-size:20px;font-weight:700}
.cb{height:4px;background:rgba(255,255,255,.3);border-radius:2px;margin-top:6px}
.cbf{height:100%;background:#fff;border-radius:2px}

/* ===== METRICS ===== */
.mgrp{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px}
.mc{background:var(--card);border-radius:var(--r);border:1px solid var(--g200);padding:16px}
.ml{font-size:11px;color:var(--txm);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.mv{font-size:24px;font-weight:700;color:var(--tx)}
.ms{font-size:12px;color:var(--txm);margin-top:4px}

/* ===== TABLE ===== */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;min-width:520px}
.tbl th{text-align:left;font-size:11px;font-weight:600;color:var(--txm);text-transform:uppercase;letter-spacing:.05em;padding:10px 12px;border-bottom:1px solid var(--g200);background:var(--g50);white-space:nowrap}
.tbl td{padding:11px 12px;font-size:13px;border-bottom:1px solid var(--g100);color:var(--g800)}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:var(--g50)}
.tbl tbody tr[onclick]{cursor:pointer}

/* ===== BTN ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:var(--rs);font-size:13px;font-weight:500;cursor:pointer;border:none;transition:opacity .15s,transform .1s;white-space:nowrap;min-height:36px}
.btn:hover{opacity:.88}
.btn:active{transform:scale(.98)}
.btp{background:var(--pr);color:#fff}
.bts{background:var(--g100);color:var(--g800)}
.bto{background:transparent;color:var(--pr);border:1px solid var(--pr-brd)}
.btok{background:var(--ok);color:#fff}
.btsm{padding:5px 10px;font-size:12px;min-height:30px}

/* ===== FORM ===== */
.fg{margin-bottom:16px}
.flabel{display:block;font-size:12px;font-weight:600;color:var(--g600);margin-bottom:6px}
.fc{width:100%;padding:9px 12px;border:1px solid var(--g200);border-radius:var(--rs);font-size:13px;color:var(--tx);background:var(--card);transition:border-color .15s;-webkit-appearance:none;appearance:none}
.fc:focus{outline:none;border-color:var(--pr-mid)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ===== WIZARD ===== */
.wiz{display:flex;align-items:center;padding:16px 20px;background:var(--card);border-radius:var(--r);border:1px solid var(--g200);margin-bottom:16px}
.ws{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0}
.wc{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;border:2px solid var(--g200);color:var(--g400);background:var(--card);z-index:1;position:relative;flex-shrink:0}
.ws.done .wc{background:var(--ok);border-color:var(--ok);color:#fff}
.ws.on .wc{background:var(--pr);border-color:var(--pr);color:#fff}
.wl{font-size:11px;margin-top:6px;color:var(--txm);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ws.on .wl{color:var(--pr);font-weight:600}
.ws.done .wl{color:var(--ok)}
.wcon{height:2px;flex:1;background:var(--g200);margin:0 4px 20px}
.wcon.done{background:var(--ok)}

/* ===== CHECKLIST ===== */
.cli{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--rs);margin-bottom:6px;border:1px solid var(--g200);background:var(--card)}
.clic{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px}
.clic.ok{background:var(--ok-l);color:#166534}
.clic.pend{background:var(--g100);color:var(--g400)}

/* ===== TIMELINE ===== */
.tl{list-style:none}
.tli{display:flex;gap:12px;padding-bottom:20px;position:relative}
.tli:last-child{padding-bottom:0}
.tld{width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-top:4px;position:relative;z-index:1}
.tld.ok{background:var(--ok)}
.tld.on{background:var(--pr);box-shadow:0 0 0 3px var(--pr-light)}
.tld.pend{background:var(--g200)}
.tli:not(:last-child)::before{content:'';position:absolute;left:5px;top:16px;bottom:0;width:2px;background:var(--g200)}
.tli.ok::before{background:var(--ok)}

/* ===== RISK ===== */
.ri{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:var(--rs);border:1px solid;margin-bottom:8px}
.ri.vd{border-color:#86efac;background:#f0fdf4}
.ri.am{border-color:#fcd34d;background:#fffbeb}
.ri.vm{border-color:#fca5a5;background:#fef2f2}
.rdot{width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-top:3px}
.rdot.vd{background:var(--ok)}.rdot.am{background:var(--warn)}.rdot.vm{background:var(--err)}
.rsel{display:flex;gap:4px;margin-top:6px}
.rb{flex:1;padding:4px;border-radius:var(--rs);font-size:11px;font-weight:700;cursor:pointer;border:2px solid transparent;text-align:center}
.rb.vd{background:#f0fdf4;color:#166534;border-color:#86efac}
.rb.vd.on{background:var(--ok);color:#fff;border-color:var(--ok)}
.rb.am{background:#fffbeb;color:#92400e;border-color:#fcd34d}
.rb.am.on{background:var(--warn);color:#fff;border-color:var(--warn)}
.rb.vm{background:#fef2f2;color:#991b1b;border-color:#fca5a5}
.rb.vm.on{background:var(--err);color:#fff;border-color:var(--err)}

/* ===== SPLIT ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ===== PAGE HEADER ===== */
.ph{margin-bottom:20px}
.ptit{font-size:20px;font-weight:700}
.psub{font-size:13px;color:var(--txm);margin-top:2px}

/* ===== ACTION BAR ===== */
.abar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.srch{flex:1;min-width:160px;padding:8px 12px 8px 32px;border:1px solid var(--g200);border-radius:var(--rs);font-size:13px;background:var(--card);color:var(--tx)}
.swrap{position:relative;flex:1;min-width:160px}
.sico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--g400);pointer-events:none;font-size:13px}

/* ===== URGENCY ===== */
.urg{width:4px;border-radius:2px;height:20px;display:inline-block;flex-shrink:0}
.urg.hi{background:var(--err)}.urg.md{background:var(--warn)}.urg.lo{background:var(--ok)}

/* ===== AVATAR ===== */
.av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.av-b{background:var(--pr-light);color:var(--pr)}
.av-g{background:var(--ok-l);color:#166534}
.av-p{background:#f3e8ff;color:#6b21a8}

/* ===== INFOBOX ===== */
.ibox{padding:10px 14px;border-radius:var(--rs);background:var(--pr-light);border:1px solid var(--pr-brd);font-size:12px;color:var(--pr);margin-bottom:12px}

/* ===== WHATSAPP ===== */
.wac{display:flex;gap:36px;align-items:flex-start;flex-wrap:wrap}
.wphone{width:300px;flex-shrink:0;background:#e5ddd5;border-radius:28px;overflow:hidden;border:10px solid #111;min-height:520px}
.whdr{background:#075e54;color:#fff;padding:10px 14px;display:flex;align-items:center;gap:10px}
.wav{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.wmsgs{padding:10px;min-height:400px;display:flex;flex-direction:column;gap:5px;overflow-y:auto;max-height:440px}
.wm{max-width:82%;padding:7px 11px;border-radius:8px;font-size:12px;line-height:1.45;display:none}
.wm.vis{display:block;animation:fi .3s ease}
@keyframes fi{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.wm.re{background:#fff;align-self:flex-start;border-bottom-left-radius:2px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.wm.se{background:#dcf8c6;align-self:flex-end;border-bottom-right-radius:2px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.wmt{font-size:10px;color:#999;text-align:right;margin-top:2px}
.wff{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.06);border-radius:4px;padding:4px 6px;margin-bottom:3px}

/* ===== FLOW ===== */
.fl-step{display:flex;gap:12px;margin-bottom:12px;align-items:flex-start}
.fl-num{width:22px;height:22px;border-radius:50%;background:var(--pr);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fl-actor{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.fl-actor.co{color:#075e54}.fl-actor.si{color:var(--pr)}.fl-actor.ad{color:#6b21a8}
.fl-bub{background:var(--g100);border-radius:6px;padding:5px 9px;font-size:11px;margin-top:4px;font-style:italic;color:var(--g600);border-left:2px solid var(--g300)}
.fl-bub.re{border-left-color:#075e54;background:#e8f5e9}
.fl-bub.se{border-left-color:var(--pr);background:var(--pr-light)}

/* ===== MOBILE BOTTOM NAV ===== */
.mbnav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--g200);z-index:50;padding:6px 0 max(6px, env(safe-area-inset-bottom))}
.mbi{flex:1;display:flex;flex-direction:column;align-items:center;padding:6px 4px;cursor:pointer;font-size:10px;color:var(--txm);border:none;background:none;gap:2px;min-width:0}
.mbi.on{color:var(--pr)}
.mbi span:first-child{font-size:18px}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .sidebar{display:none}
  .mbnav{display:flex}
  .main{padding:14px;padding-bottom:80px}
  .fgrid{grid-template-columns:1fr}
  .mgrp{grid-template-columns:1fr 1fr}
  .wac{flex-direction:column}
  .wphone{width:100%;max-width:340px;margin:0 auto}
  .split{grid-template-columns:1fr}
  .hdr{padding:0 12px;gap:10px}
  .logo-text{display:none}
  .tab{padding:5px 10px;font-size:12px}
  .plan{padding:16px}
  .creds{gap:8px}
  .ptit{font-size:18px}
}

@media(max-width:540px){
  .mgrp{grid-template-columns:1fr}
  .mv{font-size:20px}
  .wiz{padding:12px 8px}
  .wl{display:none}
  .wcon{margin-bottom:0}
  .abar{gap:8px}
  .abar .swrap{min-width:100%;order:-1}
  .ph .ptit{font-size:16px}
  .tabs .tab{padding:5px 8px;font-size:11px}
  .tbl{min-width:460px}
}

@media(max-width:380px){
  .main{padding:10px;padding-bottom:80px}
  .card{padding:14px}
  .tab{padding:4px 6px;font-size:10px}
}