/* ==========================================================================
   Central do Vendedor BuscaBusca — tema "central" sobre o Adianti Framework
   Origem visual: doc/seller-buscabusca.html
   Trocar a marca: altere apenas os tokens --brand-* e --ink no bloco :root

   Organização:
     1. tokens (claro / escuro)
     2. ponte Bootstrap -> tokens (componentes Adianti herdam o visual)
     3. casca: sidebar, topbar, área de conteúdo
     4. peças do layout (page-head, card, pill, kpi, note, empty...)
     5. componentes Adianti (form builder, datagrid, notebook, diálogos)
     6. login
     7. responsivo
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  --brand:#005C9D; --brand-600:#00497D; --brand-100:#D6ECFF; --brand-50:#EAF6FF;
  --accent:#2196F3;
  --ink:#003C64; --ink-2:#004B7E; --ink-text:#B9D8EF;

  --bg:#F5F5F5; --surface:#FFFFFF; --surface-2:#F8FAFC;
  --line:#E5E7EB; --line-2:#EFF2F6;
  --text:#2A3B4C; --text-2:#64748B; --text-3:#94A3B8;

  --ok:#029B3B;      --ok-bg:#E4F6EA;
  --warn:#B45309;    --warn-bg:#FDF2E3;
  --danger:#C62828;  --danger-bg:#FBEAEA;
  --info:#005C9D;    --info-bg:#EAF6FF;

  --shadow-1:0 1px 2px rgba(0,60,100,.07), 0 1px 3px rgba(0,60,100,.05);
  --shadow-2:0 8px 24px rgba(0,60,100,.14);

  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --sidebar-w:248px;
  --topbar-h:60px;

  --f-display:"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --f-body:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  color-scheme: light;
}
:root[data-theme="dark"]{
  --brand:#4DB7FE; --brand-600:#7CCCFF; --brand-100:#0B3A5C; --brand-50:#08293F;
  --accent:#4DB7FE;
  --ink:#021724; --ink-2:#082E47; --ink-text:#9FC6E2;
  --bg:#071520; --surface:#0E2432; --surface-2:#143041; --line:#1E4257; --line-2:#18374A;
  --text:#E6F1F8; --text-2:#A9C4D6; --text-3:#7FA3BA;
  --ok:#3FD07A; --ok-bg:#08331C; --warn:#E3A44A; --warn-bg:#3A2C12;
  --danger:#F0898D; --danger-bg:#3B1618; --info:#6FC6F5; --info-bg:#0A2E43;
  --shadow-1:0 1px 2px rgba(0,0,0,.45); --shadow-2:0 10px 30px rgba(0,0,0,.5);
  color-scheme: dark;
}

/* ---------- 2. ponte Bootstrap -> tokens ----------
   Seletor com [data-bs-theme] para vencer o bloco do próprio Bootstrap. */
:root, :root[data-bs-theme="light"], :root[data-bs-theme="dark"]{
  --bs-body-bg:var(--bg);
  --bs-body-color:var(--text);
  --bs-body-font-family:var(--f-body);
  --bs-body-font-size:14px;
  --bs-font-sans-serif:var(--f-body);
  --bs-font-monospace:var(--f-mono);
  --bs-emphasis-color:var(--text);
  --bs-secondary-color:var(--text-2);
  --bs-tertiary-color:var(--text-3);
  --bs-secondary-bg:var(--surface-2);
  --bs-tertiary-bg:var(--surface-2);
  --bs-border-color:var(--line);
  --bs-border-color-translucent:var(--line);
  --bs-border-radius:var(--r-sm);
  --bs-border-radius-lg:var(--r-md);
  --bs-primary:var(--brand);
  --bs-primary-rgb:0,92,157;
  --bs-link-color:var(--brand);
  --bs-link-hover-color:var(--brand-600);
  --bs-link-color-rgb:0,92,157;
  --bs-heading-color:var(--text);
  --bs-card-bg:var(--surface);
  --bs-focus-ring-color:rgba(0,92,157,.25);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--brand)}
button{font:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.icon{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 3. casca ---------- */
.app{display:flex;min-height:100%}
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w); background:var(--ink); color:var(--ink-text);
  display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; z-index:40;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
.main{flex:1 1 auto; min-width:0; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-height:100vh}

.brandbar{display:flex;align-items:center;gap:10px;height:var(--topbar-h);padding:0 18px;flex:0 0 auto;text-decoration:none}
.logo-mark{width:28px;height:28px;border-radius:8px;background:var(--brand);display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-weight:800;font-size:13px;letter-spacing:-.02em}
.logo-txt{font-family:var(--f-display);font-weight:800;font-size:15px;color:#fff;letter-spacing:-.01em}
/* logo oficial (busca/public/assets/img/logo.png): versão para fundo escuro */
.brand-logo{height:28px;width:auto;display:block}
.brand-tag{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-text);opacity:.8;
  border-left:1px solid rgba(255,255,255,.18);padding-left:10px;line-height:1.25;max-width:84px}

/* nav — escopado em .sidebar: .nav/.nav-link também são classes do Bootstrap */
.sidebar .nav{display:block;flex:1 1 auto;overflow-y:auto;padding:6px 10px 20px;flex-wrap:nowrap}
.sidebar .nav-group{margin-bottom:2px}
.sidebar .nav-head{
  width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;background:none;
  border-radius:var(--r-sm);cursor:pointer;font-size:13.5px;font-weight:500;color:var(--ink-text);text-align:left;
}
.sidebar .nav-head:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar .nav-head .chev{margin-left:auto;transition:transform .18s ease;opacity:.5}
.sidebar .nav-group.open .nav-head .chev{transform:rotate(90deg)}
.sidebar .nav-group.open .nav-head{color:#fff}
.sidebar .nav-items{display:none;padding:2px 0 6px 34px}
.sidebar .nav-group.open .nav-items{display:block}
.sidebar .nav-link{
  display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--r-sm);
  font-size:13px;color:var(--ink-text);opacity:.85;text-decoration:none;
}
.sidebar .nav-solo .nav-link{padding:9px 10px;gap:10px;font-size:13.5px;font-weight:500}
.sidebar .nav-link:hover{background:rgba(255,255,255,.06);opacity:1;color:#fff}
.sidebar .nav-link.active{background:var(--brand);color:#fff;opacity:1;font-weight:500}
:root[data-theme="dark"] .sidebar .nav-link.active{color:#021724}
.sidebar .nav-link .count{margin-left:auto;font-family:var(--f-mono);font-size:11px;background:rgba(255,255,255,.14);padding:1px 6px;border-radius:20px}
.sidebar .nav-solo{margin:2px 0}
.sidebar .nav-sep{height:1px;background:rgba(255,255,255,.08);margin:10px}

.store{margin:0 10px 12px;padding:10px 12px;background:var(--ink-2);border-radius:var(--r-md);display:flex;gap:10px;align-items:center}
.store-av{width:32px;height:32px;flex:0 0 32px;border-radius:8px;background:var(--brand-600);display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-weight:700;font-size:12px}
:root[data-theme="dark"] .store-av{color:#021724}
.store-av{position:relative;overflow:hidden}
/* logo da loja: fundo branco porque os logos vêm com fundo claro/transparente */
.store-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:2px}
.store-name{font-size:12.5px;font-weight:600;color:#fff;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.store-tag{font-size:10.5px;color:rgba(255,255,255,.5)}

.topbar{
  height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;
  top:env(safe-area-inset-top,0px);z-index:30;
}
.burger{display:none;background:none;border:0;padding:6px;cursor:pointer;color:var(--text-2)}
.search{flex:1 1 auto;max-width:420px;position:relative;display:flex;align-items:center}
.search .icon{position:absolute;left:11px;color:var(--text-3)}
.search input{
  width:100%;height:36px;padding:0 12px 0 34px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);color:var(--text);font:inherit;font-size:13px;
}
.search input::placeholder{color:var(--text-3)}
.search input:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:4px}
.iconbtn{width:34px;height:34px;display:grid;place-items:center;border:0;background:none;border-radius:var(--r-sm);cursor:pointer;color:var(--text-2);position:relative}
.iconbtn:hover{background:var(--surface-2);color:var(--text)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--brand-100);color:var(--brand);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:11.5px}

/* menu do usuário (avatar) */
.usermenu{position:relative;margin-left:6px}
.usermenu>button{border:0;background:none;padding:2px;border-radius:50%;cursor:pointer}
.usermenu-pop{
  position:absolute;right:0;top:calc(100% + 8px);width:250px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-2);padding:6px;z-index:50;
}
.usermenu-head{padding:10px 10px 12px;border-bottom:1px solid var(--line-2);margin-bottom:6px}
.usermenu-name{font-weight:600;font-size:13px;line-height:1.3}
.usermenu-sub{font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usermenu-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;background:none;border-radius:var(--r-sm);color:var(--text);font-size:13px;text-decoration:none;cursor:pointer;text-align:left}
.usermenu-item:hover{background:var(--surface-2);color:var(--text)}
.usermenu-item.danger{color:var(--danger)}

.view{flex:1 1 auto;min-width:0;padding:22px 20px 56px;width:100%} /* sem max-width: todas as telas usam a largura toda (antes 1280px) */
.view>*{min-width:0}

/* ---------- 4. peças do layout ---------- */
.page-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.view h1,.login-card h1{font-family:var(--f-display);font-size:21px;font-weight:700;margin:0;letter-spacing:-.015em;color:var(--text)}
.page-sub{color:var(--text-2);font-size:13px;margin-top:3px}
.page-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.view h2,.ui-dialog .card-head h2{font-family:var(--f-display);font-size:15px;font-weight:700;margin:0;letter-spacing:-.01em}
.view h3{font-family:var(--f-display);font-size:13px;font-weight:700;margin:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 14px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:13px;font-weight:500;cursor:pointer;
  transition:background .15s,border-color .15s;white-space:nowrap;
}
.btn:hover{background:var(--surface-2);border-color:var(--text-3);color:var(--text)}
.btn-primary,.btn.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover,.btn.btn-primary:hover{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
:root[data-theme="dark"] .btn-primary,:root[data-theme="dark"] .btn-primary:hover{color:#021724}
.btn-danger,.btn.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover,.btn.btn-danger:hover{background:var(--danger);border-color:var(--danger);color:#fff;filter:brightness(.9)}
.btn-sm{min-height:30px;padding:0 10px;font-size:12.5px}
.btn-block{width:100%}
.btn-link{border:0;background:none;color:var(--brand);padding:0;min-height:0;font-size:13px;cursor:pointer}
.btn-link:hover{text-decoration:underline;background:none}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);color:var(--text)}
.card+.card{margin-top:16px} /* cards empilhados direto num form (sem .grid por cima) - ex.: FreteEnvioList */
.card-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.card-body{padding:18px}
.grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.grid>*{min-width:0}
.grid-2{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
.grid-fields{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.kpi{padding:16px 18px}
.kpi-l{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);font-weight:600}
.kpi-v{font-family:var(--f-display);font-size:25px;font-weight:800;letter-spacing:-.02em;margin-top:8px;font-variant-numeric:tabular-nums}
.kpi-d{font-size:12px;margin-top:5px;color:var(--text-2)}

.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.p-ok{background:var(--ok-bg);color:var(--ok)}
.p-warn{background:var(--warn-bg);color:var(--warn)}
.p-danger{background:var(--danger-bg);color:var(--danger)}
.p-info{background:var(--info-bg);color:var(--info)}
.p-mute{background:var(--line-2);color:var(--text-2)}

.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.mono{font-family:var(--f-mono);font-size:12px;color:var(--text-2)}

.note{display:flex;gap:10px;padding:12px 14px;border-radius:var(--r-md);background:var(--info-bg);color:var(--info);font-size:12.5px;line-height:1.5}
.note .icon{margin-top:1px}
.note.warn{background:var(--warn-bg);color:var(--warn)}
.note.danger{background:var(--danger-bg);color:var(--danger)}

.empty{padding:56px 20px;text-align:center;color:var(--text-3)}
.empty .icon{width:30px;height:30px;margin-bottom:10px}
.empty h3{font-size:14px;color:var(--text);margin-bottom:6px}

.offer{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.offer-c{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.frow-ro{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:baseline}
.frow-ro .kpi-l{margin:0}

.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid var(--line);border-radius:20px;font-size:12px;background:var(--surface-2)}

.scrim{display:none;position:fixed;inset:0;background:rgba(10,9,24,.5);z-index:35}
.scrim.on{display:block}

/* ---------- 4b. listas, abas, detalhe ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;padding:0 6px}
.tab{padding:12px 14px;font-size:13px;color:var(--text-2);border-bottom:2px solid transparent;white-space:nowrap;font-weight:500;text-decoration:none}
.tab:hover{color:var(--text)}
.tab.active{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
.tab .n{font-family:var(--f-mono);font-size:11px;margin-left:5px;color:var(--text-3)}
.tab.active .n{color:var(--brand)}

.toolbar{display:flex;gap:8px;padding:14px 18px;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line-2);margin:0}
.field{height:34px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font:inherit;font-size:13px;min-width:0}
.field:focus{outline:none;border-color:var(--brand)}
.field-l{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2);margin:0}
.btn-ghost{border-color:transparent;background:none}

.table-scroll{overflow-x:auto}
.ctable{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
.ctable.compact{min-width:480px}
.ctable thead th{text-align:left;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:600;white-space:nowrap}
.ctable tbody td{padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.ctable tbody tr:last-child td{border-bottom:0}
.ctable tbody tr:hover{background:var(--surface-2)}
.ctable .right,.right{text-align:right}
.ctable a{text-decoration:none}
.order-id{font-family:var(--f-mono);font-weight:600;font-size:13px}
.prod-n{font-weight:500;line-height:1.35}
.prod-s{font-size:11.5px;color:var(--text-3);margin-top:2px}
.todo-hint{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--warn);margin-top:5px;font-weight:500}
.todo-hint .icon{width:13px;height:13px;flex-basis:13px}
.pager{display:flex;align-items:center;gap:8px;padding:13px 18px;font-size:12.5px;color:var(--text-2);flex-wrap:wrap;border-top:1px solid var(--line-2)}
.pager .spacer{margin-left:auto}
.card-flush{padding:0}
.card-head .more{margin-left:auto}

.facts{display:grid;grid-template-columns:120px minmax(0,1fr);gap:9px 14px;margin:0;font-size:13px}
.facts dt{color:var(--text-2);font-weight:400}
.facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.sub-h{margin:18px 0 8px!important;font-size:12px!important;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.charges{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.charges li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:12.5px}
.charges li>span:first-child{flex:1 1 auto}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

.ctl{list-style:none;margin:0!important;padding:0!important}
.ctl li{position:relative;display:grid;grid-template-columns:14px minmax(0,1fr);gap:12px;padding:0 0 16px;margin:0}
.ctl li:last-child{padding-bottom:0}
/* trilho vertical ligando os pontos */
.ctl li::before{content:"";position:absolute;left:6px;top:16px;bottom:0;width:2px;background:var(--line-2)}
.ctl li:last-child::before{display:none}
.tl-dot{width:14px;height:14px;margin-top:2px;border-radius:50%;background:var(--surface);border:2px solid var(--text-3);position:relative;z-index:1}
.tl-ok .tl-dot{border-color:var(--ok)}
.tl-warn .tl-dot{border-color:var(--warn)}
.tl-danger .tl-dot{border-color:var(--danger)}
.tl-info .tl-dot{border-color:var(--info)}
.tl-body{min-width:0}
.tl-when{font-size:11px;color:var(--text-3);font-family:var(--f-mono)}
.tl-title{font-weight:600;font-size:13px;margin-top:1px}
.tl-text{font-size:12.5px;color:var(--text-2);margin-top:2px;overflow-wrap:anywhere}

.evidence{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.evidence img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line);display:block}

.todo-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.todo{background:var(--surface);padding:15px 16px;display:block;text-decoration:none;color:var(--text);transition:background .15s}
.todo:hover{background:var(--surface-2);color:var(--text)}
.todo-n{font-family:var(--f-display);font-size:23px;font-weight:800;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.todo-l{font-size:12.5px;color:var(--text-2);margin-top:3px}
.todo.is-alert .todo-n{color:var(--danger)}
.todo.is-warn .todo-n{color:var(--warn)}
.trend-up{color:var(--ok);font-weight:600}
.trend-down{color:var(--danger);font-weight:600}
.chart-wrap{padding:6px 10px 0}
.chart-legend{padding:0 18px 14px;font-size:12px;color:var(--text-2)}
.mini-list{list-style:none;margin:0;padding:0}
.mini-list li{border-bottom:1px solid var(--line-2)}
.mini-list li:last-child{border-bottom:0}
.mini-list a{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:11px 18px;text-decoration:none;color:var(--text)}
.mini-list a:hover{background:var(--surface-2)}
.mini-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px}

/* ---------- 5. componentes Adianti ---------- */
/* campos */
.form-control,.tfield,select.form-select{
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font-size:13px;
}
.form-control:focus,.tfield:focus{border-color:var(--brand);box-shadow:none;outline:none}
.form-control::placeholder{color:var(--text-3)}
label,.control-label{color:var(--text-2);font-size:13px}

/* BootstrapFormBuilder (panel/card) */
.view .card-header,.view .panel-heading{background:var(--surface);border-bottom:1px solid var(--line-2);padding:14px 18px;font-family:var(--f-display);font-weight:700}
.view .card-footer,.view .panel-footer{background:var(--surface-2);border-top:1px solid var(--line-2);border-radius:0 0 var(--r-lg) var(--r-lg)}

/* TDataGrid (BootstrapDatagridWrapper) */
.view .table{--bs-table-bg:transparent;--bs-table-color:var(--text);--bs-table-hover-bg:var(--surface-2);--bs-table-striped-bg:transparent;font-size:13px;margin:0;border-color:var(--line-2)}
.view .table thead th{
  background:var(--surface-2);border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-3);font-weight:600;white-space:nowrap;padding:10px 14px;
}
.view .table tbody td{padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.view .table tbody tr:hover{background:var(--surface-2)}

/* TNotebook */
.view .nav-tabs{border-bottom:1px solid var(--line)}
.view .nav-tabs .nav-link{border:0;border-bottom:2px solid transparent;color:var(--text-2);font-weight:500;font-size:13px}
.view .nav-tabs .nav-link.active{color:var(--brand);border-bottom-color:var(--brand);background:none;font-weight:600}

/* painel lateral (cortina) */
.right-panel{display:none;position:fixed;top:0;right:0;bottom:0;width:min(780px,100%);background:var(--surface);box-shadow:var(--shadow-2);z-index:60;overflow-y:auto}

/* diálogos */
.swal2-popup{border-radius:var(--r-lg)!important;font-family:var(--f-body)!important;background:var(--surface)!important;color:var(--text)!important}
.swal2-title{font-family:var(--f-display)!important;font-size:18px!important;color:var(--text)!important}
.swal2-html-container{color:var(--text-2)!important;font-size:14px!important}
.swal2-styled.swal2-confirm{background:var(--brand)!important;border-radius:var(--r-md)!important}

/* ---------- 6. login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--bg)}
.login-brand{
  background:var(--ink);color:var(--ink-text);padding:40px 48px;display:flex;flex-direction:column;gap:28px;
  position:relative;overflow:hidden;
}
.login-brand::after{
  content:"";position:absolute;width:520px;height:520px;right:-180px;bottom:-200px;border-radius:50%;
  background:radial-gradient(circle,rgba(33,150,243,.28),rgba(33,150,243,0) 70%);pointer-events:none;
}
.login-brand .brandbar{padding:0;height:auto}
.login-brand .brand-logo{height:40px}
.login-brand .brand-tag{font-size:11px}
.login-pitch{margin-top:auto;max-width:440px}
.login-pitch h2{font-family:var(--f-display);font-weight:800;font-size:30px;line-height:1.15;color:#fff;letter-spacing:-.02em;margin:0 0 12px}
.login-pitch p{font-size:14.5px;line-height:1.6;margin:0}
.login-points{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.login-points li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px}
.login-points .icon{color:#fff;margin-top:2px}
.login-points strong{color:#fff;font-weight:600}
.login-foot{font-size:11.5px;color:rgba(255,255,255,.45);margin-top:auto}

.login-side{display:grid;place-items:center;padding:32px 20px}
.login-card{width:100%;max-width:400px}
.login-card .page-sub{margin:4px 0 24px}
/* flex-column: quando o .lfield vira item de .grid-fields com vizinhos de label
   de tamanho diferente (ex.: "Tipo de pacote (orderPackageType)" quebra em 2
   linhas e os outros nao), o grid estica a altura de todos os itens da linha
   igualmente (comportamento padrao), e o margin-top:auto abaixo empurra o
   input pro final de cada um - mantendo todos os inputs alinhados na mesma
   linha de base mesmo com labels de alturas diferentes. Em formularios de uma
   coluna so (login, trocar senha) isso nao muda nada (sem altura extra pra
   empurrar pra baixo). */
.lfield{display:flex;flex-direction:column;margin-bottom:16px}
.lfield label{display:block;font-size:13px;font-weight:500;color:var(--text);margin-bottom:6px}
.lfield .form-control,.lfield input,.lfield select,.lfield .tpassword{margin-top:auto}
.lfield .form-control,.lfield input,.lfield select{width:100%;height:42px;padding:0 12px;font-size:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--text)}
.lfield .form-control:focus,.lfield input:focus,.lfield select:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-50)}
.lfield .input-group{flex-wrap:nowrap}
.lfield .input-group .form-control{border-top-right-radius:0;border-bottom-right-radius:0}
.lfield .input-group-text,.lfield .input-group .btn{border-color:var(--line);background:var(--surface-2);color:var(--text-2);border-radius:0 var(--r-md) var(--r-md) 0;min-height:42px}
.lfield-row{display:flex;align-items:center;justify-content:space-between;margin:-4px 0 20px;font-size:12.5px}
.lhint{font-size:11.5px;color:var(--text-3);margin-top:5px}
.req{color:var(--danger);font-weight:700}
.login-card .btn-primary{width:100%;height:44px;font-size:14px;font-weight:600}
.login-error{margin-bottom:16px}
.login-help{margin-top:24px;font-size:12.5px;color:var(--text-2);text-align:center}

.theme-float{position:fixed;top:14px;right:14px;z-index:5}

/* ---------- 7. responsivo ---------- */
@media (max-width:960px){ .grid-2{grid-template-columns:1fr} }
@media (max-width:860px){
  .sidebar{transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow-2)}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .burger{display:grid;place-items:center}
  .view{padding:16px 16px 48px}
  .search{max-width:none}
  .login{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .login-brand{padding:22px 20px;gap:0}
  .login-pitch,.login-foot{display:none}
  .login-side{place-items:start center;padding:28px 16px}
}

/* ---------- visualizador de PDF ---------- */
.docview{position:fixed;inset:0;z-index:2000;background:rgba(10,9,24,.55);display:grid;place-items:center;padding:24px}
.docview-box{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-2);width:min(1000px,100%);height:min(92vh,1100px);display:flex;flex-direction:column;overflow:hidden}
.docview-head{display:flex;align-items:center;gap:8px;padding:12px 14px 12px 18px;border-bottom:1px solid var(--line)}
.docview-head h2{font-family:var(--f-display);font-size:15px;font-weight:700;margin:0 auto 0 0;color:var(--text)}
.docview iframe{flex:1 1 auto;width:100%;border:0;background:#525659}
@media (max-width:640px){ .docview{padding:0} .docview-box{height:100vh;border-radius:0} .docview-head a.btn:not(.btn-primary){display:none} }

/* checkbox com texto (CC-e) */
.check-line{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--text-2);margin:4px 0 16px;cursor:pointer}
.check-line input{margin-top:3px}
.lfield textarea{width:100%;padding:10px 12px;font-size:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--text);min-height:120px}

/* ---------- próximo passo (cancelamento/devolução) ---------- */
.next-step{border-left:4px solid var(--brand);margin-bottom:6px}
.next-step.tone-warn{border-left-color:var(--warn)}
.next-step.tone-ok{border-left-color:var(--ok)}
.next-step.tone-mute{border-left-color:var(--text-3)}
.next-step.tone-info{border-left-color:var(--info)}
.next-head{display:flex;gap:14px;align-items:flex-start;padding:18px 20px}
.next-head>.icon{width:26px;height:26px;flex:0 0 26px;margin-top:2px;color:var(--brand)}
.tone-warn .next-head>.icon{color:var(--warn)}
.tone-ok .next-head>.icon{color:var(--ok)}
.next-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:600}
.next-head h2{font-family:var(--f-display);font-size:17px;font-weight:700;margin:2px 0 4px}
.next-head p{margin:0;color:var(--text-2);font-size:13.5px;line-height:1.55;max-width:760px}
.next-body{padding:0 20px 18px 60px;display:flex;flex-direction:column;gap:12px}
.step-actions{display:flex;gap:8px;flex-wrap:wrap}
.step-hint{font-size:12.5px;color:var(--text-2);margin:0;line-height:1.5}
.step-more{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.step-extras{display:flex;flex-direction:column;gap:6px;margin:6px 0 4px}
.step-detail{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:0}
.step-detail>summary{cursor:pointer;padding:10px 14px;font-size:13px;font-weight:500;color:var(--text-2);display:flex;align-items:center;gap:8px;list-style:none}
.step-detail>summary::-webkit-details-marker{display:none}
.step-detail>summary:hover{color:var(--text)}
.step-detail[open]>summary{border-bottom:1px solid var(--line-2);color:var(--text)}
.step-detail>form,.step-detail>p,.step-detail>button{margin:12px 14px}
.step-detail>button{margin-top:0}
.field-lbl{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text-2);font-weight:500;margin:0}
.field-lbl .opt{color:var(--text-3);font-weight:400}
.field.wide{width:100%}
textarea.field{height:auto;padding:9px 11px;line-height:1.5;resize:vertical}
.chip-btn{cursor:pointer;color:var(--text-2);font:inherit;font-size:12px}
.chip-btn:hover{border-color:var(--brand);color:var(--brand)}
.seg-inline{display:flex;gap:16px;font-size:13px;margin-bottom:8px}
.seg-inline label{display:flex;gap:6px;align-items:center;margin:0}
.btn-danger-soft{border-color:var(--danger);color:var(--danger);background:var(--surface)}
.btn-danger-soft:hover{background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}
.facts-tight{grid-template-columns:170px minmax(0,1fr);gap:6px 14px}
.pix-box{background:var(--info-bg);border-radius:var(--r-md);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.pix-row{display:flex;gap:8px;flex-wrap:wrap}
.pix-row .field.wide{flex:1 1 220px;width:auto}

/* conferência: um cartão por item com − e + */
.conf-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.conf-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.stepper{display:flex;flex-direction:column;gap:4px;align-items:center}
.stepper-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--text-3)}
.stepper.tone-ok .stepper-lbl{color:var(--ok)}
.stepper.tone-danger .stepper-lbl{color:var(--danger)}
.stepper-ctl{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.stepper-ctl .iconbtn{width:34px;height:34px;border-radius:0;font-size:18px;color:var(--text)}
.stepper-ctl input{width:46px;height:34px;border:0;text-align:center;font:inherit;font-family:var(--f-mono);font-size:14px;background:transparent;color:var(--text);-moz-appearance:textfield}
.stepper-ctl input::-webkit-outer-spin-button,.stepper-ctl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
@media (max-width:640px){
  .next-body{padding:0 16px 16px}
  .conf-item{grid-template-columns:1fr 1fr}
  .conf-desc{grid-column:1 / -1}
}

/* ---------- visualizador de imagens ---------- */
.lightbox{position:fixed;inset:0;z-index:2100;background:rgba(5,10,20,.88);display:grid;place-items:center;padding:24px}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%;max-height:100%}
.lb-fig img{max-width:min(1100px,92vw);max-height:82vh;object-fit:contain;border-radius:var(--r-md);box-shadow:0 20px 50px rgba(0,0,0,.5);background:#fff}
.lb-fig figcaption{color:#fff;font-size:12.5px;opacity:.8;font-family:var(--f-mono)}
.lb-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.12);color:#fff}
.lb-close:hover{background:rgba(255,255,255,.22);color:#fff}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.lb-nav:hover{background:rgba(255,255,255,.26)}
.lb-prev{left:18px}.lb-next{right:18px}
.evidence a{cursor:zoom-in}

/* ==========================================================================
   Atendimento (ChatView)
   ========================================================================== */
.chat-card{overflow:hidden}
.chat-tabs .tab{background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px}
.chat-tabs .tab.active{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
.chat-tabs .n{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--line-2);color:var(--text-2);font-size:11px;font-weight:700;display:inline-grid;place-items:center}
.chat-tabs .n.is-new{background:var(--danger);color:#fff}

.chat{display:grid;grid-template-columns:340px minmax(0,1fr);height:calc(100vh - var(--topbar-h) - 190px);min-height:480px}
.chat-list{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.chat-filter{padding:12px;border-bottom:1px solid var(--line-2);display:flex;flex-direction:column;gap:9px}
.chat-search{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--text-3);margin:0}
.chat-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--bs-focus-ring-color)}
.chat-search input{border:0;outline:0;background:none;color:var(--text);font:inherit;font-size:13px;flex:1;min-width:0}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:2px;gap:2px;align-self:flex-start}
.seg button{border:0;background:none;padding:5px 12px;border-radius:6px;font:inherit;font-size:12.5px;color:var(--text-2);cursor:pointer;white-space:nowrap}
.seg button.on{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow-1)}
.seg button span{color:var(--text-3);font-weight:600;margin-left:3px}
.seg-wrap{flex-wrap:wrap}

.chat-items{flex:1;overflow-y:auto;min-height:0}
.ci{display:flex;gap:11px;width:100%;padding:12px 14px;border:0;border-bottom:1px solid var(--line-2);background:none;text-align:left;cursor:pointer;color:var(--text);font:inherit;position:relative}
.ci:hover{background:var(--surface-2)}
.ci.is-on{background:var(--brand-50)}
.ci.is-on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)}
.ci-av{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--brand-100);color:var(--brand);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:13px}
.ci-av.is-img{border-radius:8px;object-fit:cover;background:var(--surface-2);border:1px solid var(--line-2)}
.ci-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ci-top{display:flex;align-items:baseline;gap:8px}
.ci-name{flex:1;min-width:0;font-weight:500;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-time{font-size:11.5px;color:var(--text-3);white-space:nowrap}
.ci-ctx{font-size:11.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-ctx b{font-family:var(--f-mono);font-weight:600;color:var(--text-2)}
.ci-prev{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2)}
.ci-prev>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-n{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.ci.is-unread .ci-name{font-weight:700}
.ci.is-unread .ci-prev>span:first-child{color:var(--text);font-weight:500}
.ci.is-unread .ci-time{color:var(--danger);font-weight:600}
.chat-more{margin:12px auto;display:flex}
.chat-load,.chat-empty-l{padding:28px 18px;text-align:center;color:var(--text-3);font-size:13px}

.chat-pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface-2)}
.chat-empty{margin:auto;text-align:center;color:var(--text-3);padding:30px;max-width:340px}
.chat-empty .icon{width:42px;height:42px;stroke-width:1.3;color:var(--brand);opacity:.5}
.chat-empty h3{font-size:15px;color:var(--text);margin:10px 0 4px}
.chat-empty p{font-size:13px;margin:0}
.cp-head{display:flex;align-items:center;gap:11px;padding:11px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.cp-back{display:none}
.cp-who{flex:1;min-width:0;display:flex;flex-direction:column}
.cp-who b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-who small{font-size:12px;color:var(--text-2)}
.chat-ctx{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:9px 16px;background:var(--surface);border-bottom:1px solid var(--line-2);font-size:12.5px}
.cx-item{display:flex;align-items:center;gap:9px;min-width:0;max-width:320px}
.cx-item img,.cx-ph{width:36px;height:36px;flex:0 0 36px;border-radius:6px;object-fit:cover;background:var(--surface-2);border:1px solid var(--line-2)}
.cx-item span{display:flex;flex-direction:column;min-width:0}
.cx-item b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-item small{color:var(--text-3)}
.cx-more{color:var(--text-3)}
.cx-sum{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;color:var(--text-3)}
.cx-sum b{color:var(--text);font-family:var(--f-mono)}

.cp-msgs{flex:1;overflow-y:auto;padding:16px 18px 8px;display:flex;flex-direction:column;gap:4px;min-height:0}
.cm-day{text-align:center;margin:10px 0 6px}
.cm-day span{font-size:11px;font-weight:600;color:var(--text-2);background:var(--surface);border:1px solid var(--line-2);padding:3px 10px;border-radius:20px}
.cm{display:flex}
.cm-loja{justify-content:flex-end}
.cm-b{max-width:min(560px,78%);padding:8px 11px 6px;border-radius:14px;font-size:13.5px;line-height:1.45;position:relative;box-shadow:var(--shadow-1);overflow-wrap:anywhere}
.cm-cliente .cm-b{background:var(--surface);border:1px solid var(--line-2);border-bottom-left-radius:4px}
.cm-ia .cm-b{background:var(--surface);border:1px dashed var(--line);border-bottom-left-radius:4px;color:var(--text-2)}
.cm-loja .cm-b{background:var(--brand);color:#fff;border-bottom-right-radius:4px}
.cm-loja .cm-b a{color:#fff;text-decoration:underline}
.cm-tag{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--info);margin-bottom:2px}
.cm-time{display:block;text-align:right;font-size:10.5px;opacity:.65;margin-top:2px}
.cm-img{display:block;margin:-2px -5px 4px;border-radius:10px;overflow:hidden;cursor:zoom-in}
.cm-img img{display:block;max-width:260px;max-height:260px;width:100%;object-fit:cover}
.cm-file{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:8px;background:rgba(0,0,0,.06);text-decoration:none;color:inherit;font-weight:500;margin-bottom:3px}
.cm.is-sending .cm-b{opacity:.65}
.cm.is-failed .cm-b{background:var(--danger)}
.chat-start{margin:auto;max-width:380px;text-align:center;color:var(--text-2);font-size:13px;background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-md);padding:16px}

.cp-compose{padding:10px 14px 8px;background:var(--surface);border-top:1px solid var(--line)}
.cp-compose.is-busy textarea{opacity:.6}
.cp-row{display:flex;align-items:flex-end;gap:8px}
.cp-row textarea{flex:1;resize:none;min-height:40px;max-height:160px;padding:9px 12px;border:1px solid var(--line);border-radius:20px;background:var(--surface-2);color:var(--text);font:inherit;font-size:13.5px;line-height:1.4;outline:0}
.cp-row textarea:focus{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 3px var(--bs-focus-ring-color)}
.cp-row .iconbtn{height:40px;width:40px}
.cp-send{height:40px;border-radius:20px;gap:6px;padding:0 16px}
.cp-hint{font-size:11px;color:var(--text-3);margin:5px 4px 0}
.cp-file{display:flex;align-items:center;gap:9px;padding:6px 8px;margin-bottom:8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);font-size:12.5px}
.cp-file img{width:44px;height:44px;border-radius:6px;object-fit:cover}
.cp-file span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* perguntas */
.perg{padding:0 0 10px}
.perg-top{padding:14px 18px;border-bottom:1px solid var(--line-2)}
.perg-help{font-size:12.5px;color:var(--text-2);margin:9px 0 0}
.perg-item{padding:16px 18px;border-bottom:1px solid var(--line-2);display:flex;flex-direction:column;gap:10px}
.pq-prod{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:500;color:var(--text-2)}
.pq-prod img,.pq-prod .cx-ph{width:38px;height:38px;flex:0 0 38px;border-radius:6px;object-fit:cover;border:1px solid var(--line-2)}
.pq-l{display:block;font-size:11.5px;color:var(--text-3);margin-bottom:3px}
.pq-q{font-size:14px;line-height:1.5}
.pq-a{font-size:13.5px;line-height:1.5;background:var(--surface-2);border-left:3px solid var(--brand);padding:8px 12px;border-radius:0 var(--r-sm) var(--r-sm) 0}
.pq-form{display:none;flex-direction:column;gap:8px}
.perg-item.is-editing .pq-form{display:flex}
.perg-item.is-editing .pq-a{display:none}
.pq-form textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;resize:vertical}
.pq-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pq-acts:empty{display:none}

/* badge do item de menu */
.nav-link .nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center}
.nav-link .nav-badge[hidden]{display:none}

/* toast genérico */
.ctoast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);opacity:0;background:var(--ink);color:#fff;padding:11px 18px;border-radius:10px;font-size:13px;box-shadow:var(--shadow-2);z-index:1300;transition:opacity .25s,transform .25s;max-width:calc(100vw - 32px)}
.ctoast.in{opacity:1;transform:translate(-50%,0)}
.ctoast.is-err{background:var(--danger)}

/* ==========================================================================
   Sino flutuante
   ========================================================================== */
.sino{position:fixed;right:22px;bottom:22px;z-index:1200}
.sino-btn{width:56px;height:56px;border-radius:50%;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,60,100,.35);position:relative;transition:transform .15s,background .15s}
.sino-btn:hover{transform:scale(1.06);background:var(--brand-600)}
.sino-btn .icon{width:24px;height:24px;flex-basis:24px;stroke-width:1.9}
.sino.has-new .sino-btn{background:var(--danger)}
.sino-badge{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#fff;color:var(--danger);font-size:12px;font-weight:800;display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.sino-badge[hidden]{display:none}
@keyframes sino-ring{0%,100%{transform:rotate(0)}15%{transform:rotate(-16deg)}30%{transform:rotate(13deg)}45%{transform:rotate(-10deg)}60%{transform:rotate(7deg)}75%{transform:rotate(-4deg)}}
.sino-btn.is-ring{animation:sino-ring .8s ease 2}
@keyframes sino-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.sino-badge.is-pulse{animation:sino-pulse .45s ease 3}
.sino-panel{position:absolute;right:0;bottom:68px;width:380px;max-width:calc(100vw - 32px);max-height:min(560px,calc(100vh - 120px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-2);display:flex;flex-direction:column;overflow:hidden}
.sino-panel[hidden]{display:none}
.sino-head{display:flex;align-items:center;gap:6px;padding:12px 10px 10px 16px;border-bottom:1px solid var(--line-2)}
.sino-head strong{flex:1;font-family:var(--f-display);font-size:14px}
.sino-som{width:34px;height:34px;border:0;background:none;border-radius:var(--r-sm);color:var(--text-2);display:grid;place-items:center;cursor:pointer}
.sino-som:hover{background:var(--surface-2)}
.sino-som[aria-pressed="false"]{color:var(--text-3)}
.sino-tabs{display:flex;gap:4px;padding:8px 12px;overflow-x:auto;border-bottom:1px solid var(--line-2)}
.sino-tabs button{border:1px solid var(--line);background:var(--surface);color:var(--text-2);padding:4px 10px;border-radius:20px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.sino-tabs button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.sino-tabs button span{font-weight:700}
.sino-body{overflow-y:auto;flex:1}
.sino-item{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line-2);border-left:4px solid var(--brand);background:none;padding:10px 14px;cursor:pointer;color:var(--text);font:inherit}
.sino-item:hover{background:var(--surface-2)}
.sino-item.t-produto{border-left-color:var(--ok)}
.sino-item.t-sac{border-left-color:var(--warn)}
.sino-item.t-perguntas{border-left-color:#8e44ad}
.sino-chip{align-self:flex-start;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3)}
.sino-l1{display:flex;gap:8px;align-items:baseline}
.sino-l1 b{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sino-l1 time{font-size:11px;color:var(--danger);font-weight:600}
.sino-l2{font-size:12.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sino-l3{font-size:11.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sino-l3 em{font-style:normal;font-weight:600;color:var(--brand);margin-left:4px}
.sino-vazio{padding:30px 20px;text-align:center;color:var(--text-3);font-size:13px;display:flex;flex-direction:column;gap:4px}
.sino-vazio b{color:var(--text);font-size:14px}
.sino-foot{display:block;text-align:center;padding:11px;font-size:13px;font-weight:600;color:var(--brand);border-top:1px solid var(--line-2);text-decoration:none}
.sino-foot:hover{background:var(--surface-2)}
.sino-toast{position:fixed;right:92px;bottom:26px;max-width:min(360px,calc(100vw - 120px));text-align:left;border:0;background:var(--ink);color:#fff;padding:10px 15px;border-radius:12px;box-shadow:var(--shadow-2);z-index:1250;cursor:pointer;opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s;display:flex;flex-direction:column;gap:2px;font:inherit}
.sino-toast.in{opacity:1;transform:translateY(0)}
.sino-toast small{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-text);font-weight:700}
.sino-toast span{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* atendimento no celular: lista OU conversa */
@media (max-width:899px){
  .chat{grid-template-columns:minmax(0,1fr);height:calc(100vh - var(--topbar-h) - 150px)}
  .chat-list{border-right:0}
  .chat .chat-pane{display:none}
  .chat.is-open .chat-list{display:none}
  .chat.is-open .chat-pane{display:flex}
  .cp-back{display:grid}
  .cp-send span{display:none}
  .cp-send{padding:0 12px}
  .cx-sum{margin-left:0;align-items:flex-start}
  .sino{right:14px;bottom:14px}
  .sino-toast{right:80px;bottom:18px}
}
.sino-head,.sino-tabs,.sino-foot{flex-shrink:0}
.sino-tabs button{flex:0 0 auto;line-height:1.4}
@media (max-width:899px){
  .cp-keys{display:none}
  /* conversa aberta no celular: o sino sobe para não cobrir o botão Enviar */
  body:has(.chat.is-open:not([hidden])) .sino{bottom:96px}
}

/* TWindow (jQuery UI dialog, usado em FreteEtiquetaForm etc.) - barra de titulo
   na cor da marca + botao de fechar redondo branco, no padrao do modal de PDF
   do plataforma_dev (LabelService). O "X" do botao vem em CSS, nao do sprite
   padrao do jQuery UI: lib/jquery/css/images/ so tem ui-icons_444444, falta o
   ui-icons_777777 que .ui-button .ui-icon usaria, entao o icone vinha em
   branco - mesma linha do resto do projeto, que usa icone SVG/CSS em vez de
   sprite (FreteMenu::icon). */
.ui-dialog-titlebar{background:var(--brand);color:#fff;border:0}
.ui-dialog-titlebar .ui-dialog-title{color:#fff;font-family:var(--f-display);font-weight:600;font-size:15px}
.ui-dialog-titlebar-close{background:#fff;border:0;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.3);display:flex!important;align-items:center;justify-content:center}
.ui-dialog-titlebar-close:hover{background:#f0f0f0}
.ui-dialog-titlebar-close .ui-icon{background-image:none!important;text-indent:0;overflow:visible;width:16px;height:16px;font-size:15px;line-height:16px;color:var(--ink);text-align:center}
.ui-dialog-titlebar-close .ui-icon::before{content:"\00d7";display:block}
/* Garantia do "X": desenhado como imagem de fundo do proprio botao (SVG), sem depender do <span class="ui-icon"> nem do ::before acima, que
   o jQuery UI/Bootstrap pode esconder (text-indent, overflow, cor). O span fica oculto para o X nao aparecer em dobro. */
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9' stroke='%23003C64' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") no-repeat center/12px 12px}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon{display:none!important}

/* link de ajuda abaixo de um campo ("Onde encontro...?") + quadro com ilustracao */
.help-link{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;font-weight:500;color:var(--brand);text-decoration:none}
.help-link:hover{text-decoration:underline}
.help-link .icon{width:14px;height:14px}
.help-pop{margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);max-width:460px}
.help-pop[hidden]{display:none}
.help-pop p{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--text-2)}
.help-pop svg{display:block;width:100%;height:auto;font-family:var(--f-body)}

/* caixa de marcar abaixo de um campo (ex.: "Inscricao Estadual Isenta") */
.lhint .lcheck{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer;margin-top:2px}
.lhint .lcheck input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}

/* alinhamento: dentro de .grid-fields cada .lfield ocupa 3 linhas da grade (rotulo / campo / dica)
   via subgrid. Assim os campos da mesma linha ficam alinhados pelo rotulo e pelo campo, nao
   importando se um rotulo quebra em duas linhas ou se so um deles tem dica/caixa abaixo. */
.grid-fields:has(> .lfield){row-gap:0}
.grid-fields > .lfield{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;align-content:start}
.grid-fields > .lfield > label{align-self:end}
.grid-fields > .lfield > .form-control,.grid-fields > .lfield > input,.grid-fields > .lfield > select{margin-top:0;align-self:start}

/* barra de busca das listas e botoes-link do cabecalho */
.toolbar input[type=search],.toolbar select{height:36px;padding:0 10px;font-size:13px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--text)}
.toolbar input[type=search]:focus,.toolbar select:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-50)}
.page-actions a.btn{text-decoration:none}

/* filtros da lista em uma linha so: busca ocupa o que sobra, situacao e botao ao lado */
.toolbar input[type=search]{flex:1 1 280px;min-width:220px;max-width:460px;width:auto}
.toolbar select{flex:0 0 auto;width:auto;min-width:190px}
.toolbar .btn{flex:0 0 auto}


/* cartao da lista alto: vai ate o pe da janela; paginacao no fundo e o aviso de vazio no meio */
.card-fill{display:flex;flex-direction:column;min-height:calc(100vh - 176px)}
.card-fill > .pager{margin-top:auto}
.card-fill > .empty{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}


/* texto do cartao lateral das telas de consulta */
.aside-help{font-size:13px;line-height:1.55;color:var(--text-2)}
.aside-help ul{margin:0;padding-left:18px;display:grid;gap:6px}
.aside-help p{margin:0 0 8px}

/* campo unico de texto nas consultas: nao precisa acompanhar a largura do cartao */
.lfield.field-short{max-width:520px}

/* botao de acao do formulario em grade (ex.: Cotacao): do tamanho do texto, nao esticado */
.card-body[style*="display:grid"] > .btn,.card-body[style*="display:grid"] > button{justify-self:start;align-self:start}

/* dentro de uma grade os cartoes ficam lado a lado, sem o espaco de empilhamento (.card+.card) */
.grid > .card + .card{margin-top:0}

/* indicadores lado a lado: sem o espaco de empilhamento de .card+.card */
.kpis > .card + .card{margin-top:0}

/* lista de modulos (caixas de marcar) do cadastro de usuario */
.perm-title{font-size:13px;font-weight:500;color:var(--text);margin-bottom:8px}
.perm-grid{display:flex;flex-wrap:wrap;gap:10px 24px}
.perm-grid .lcheck{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer;margin:0}
.perm-grid .lcheck input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;margin:0}

/* Cotacao: o espaco vazio ao lado das abas some quando a grade vira 1 coluna */
@media (max-width:960px){ .cot-vazio{display:none} }

/* Telas largas (ex.: FreteHubSellerList): sem o limite de 1280px do .view quando o conteudo traz .page-wide */
.view:has(.page-wide){max-width:none}