/* ======================================================================
   Fatto — Design System (fonte única)
   Carregue DEPOIS do <style> da página: <link rel="stylesheet" href="design-system.css">
   Cores vêm dos tokens da página (--azul, --laranja, --borda, etc.).
   ====================================================================== */

/* =========================== BOTÕES =========================== */
/* base — vale para classes novas E legadas (todas autossuficientes) */
.btn,.colbtn,.act,.intelibot,.btn-novo,
[class*="btn-"]{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 16px; border-radius:9px;
  font-family:var(--font-ui,'Nunito',sans-serif); font-size:14px; font-weight:400; line-height:1;
  cursor:pointer; border:1px solid transparent; transition:.12s; white-space:nowrap; text-decoration:none;
}
.btn svg,.colbtn svg,.act svg,.intelibot svg,.btn-novo svg,[class*="btn-"] svg{ width:16px; height:16px; flex:none }
.btn:focus-visible,.colbtn:focus-visible,.act:focus-visible,.intelibot:focus-visible,.btn-novo:focus-visible,[class*="btn-"]:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--azul-50) }
.btn:active,.colbtn:active,.act:active,.intelibot:active,.btn-novo:active,[class*="btn-"]:active{ transform:translateY(1px) }
.btn:disabled,.is-disabled,[class*="btn-"]:disabled{ opacity:.45; cursor:not-allowed; transform:none }

/* PRIMÁRIA — laranja (CTA). Bare .btn / .btn-novo / .intelibot já são primárias. */
.btn,.btn-novo,.intelibot,.btn-primary,.act.primary{ background:var(--laranja); color:#fff; border-color:transparent }
.btn:hover,.btn-novo:hover,.intelibot:hover,.btn-primary:hover,.act.primary:hover{ background:var(--laranja-600) }

/* SECUNDÁRIA — azul sólido */
.btn-secondary{ background:var(--azul); color:#fff } .btn-secondary:hover{ background:var(--azul-600) }
/* CONTORNO — azul */
.btn-outline{ background:#fff; border-color:var(--azul-100); color:var(--azul) } .btn-outline:hover{ background:var(--azul-50) }
/* NEUTRA / utilitário — branco + borda cinza (estilo "Expandir"). Legado: .colbtn / .act */
.btn-ghost,.colbtn,.act{ background:#fff; border-color:var(--borda); color:var(--texto-2) }
.btn-ghost:hover,.colbtn:hover,.act:hover{ border-color:var(--azul-300); color:var(--azul); background:var(--azul-50) }
/* SUAVE — azul-50 */
.btn-soft{ background:var(--azul-50); color:var(--azul) } .btn-soft:hover{ background:var(--azul-100) }
/* TEXTO / link */
.btn-text{ background:transparent; color:var(--azul); padding:0 6px } .btn-text:hover{ text-decoration:underline }
/* SUCESSO — verde (pontual) */
.btn-success{ background:var(--verde); color:#fff } .btn-success:hover{ filter:brightness(.94) }
/* ATENÇÃO — âmbar */
.btn-warning{ background:var(--ambar-bg); color:var(--ambar-tx); border-color:#F3E1B0 }
/* PERIGO — vermelho. Contorno (Excluir) e sólido (irreversível). Legado: .act.danger */
.btn-danger,.act.danger{ background:#fff; border-color:#F3C2C2; color:var(--vermelho) } .btn-danger:hover,.act.danger:hover{ background:var(--vermelho-bg) }
.btn-danger-solid{ background:var(--vermelho); color:#fff } .btn-danger-solid:hover{ filter:brightness(.94) }

/* TAMANHOS / variações (sempre aplicadas DEPOIS, vencem a base) */
.btn-sm{ height:32px; padding:0 12px; font-size:13px } .btn-sm svg{ width:14px; height:14px }
.btn-lg{ height:46px; padding:0 22px; font-size:15px }
.btn-icon{ width:38px; height:38px; padding:0 } .btn-icon.btn-sm{ width:32px; height:32px }
.btn-block{ width:100%; }

/* =========================== CAMPOS / DROPDOWNS =========================== */
/* padrão único de campo: input, textarea e select (.fld) + gatilho do dropdown custom (.dd-trig) */
.fld{ font-family:var(--font-ui,'Nunito',sans-serif); font-size:var(--fs-val,12px); color:var(--texto); background:#fff;
  border:1px solid var(--borda); border-radius:9px; height:40px; padding:0 11px; outline:none; width:100% }
textarea.fld{ height:auto; min-height:84px; padding:9px 11px; resize:vertical }
.fld:focus{ border-color:var(--azul-300); box-shadow:0 0 0 3px var(--azul-50) }
.fld::placeholder{ font-size:var(--fs-ph,10px); color:var(--texto-3) }
/* select com chevron padrão (mesmo do dropdown custom) */
select.fld{ -webkit-appearance:none; appearance:none; padding-right:32px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center }
/* gatilho do dropdown custom (os-list) alinhado ao mesmo visual */
.dd-trig{ height:40px; border-radius:9px }

/* =========================== PAGINADOR (rodapé de tabela) =========================== */
.pager{ display:flex; align-items:center; gap:14px; padding:12px 16px; border-top:1px solid var(--borda); font-size:13px; color:var(--texto-2); flex-wrap:wrap }
.pager .spacer{ flex:1 }
.pages{ display:flex; gap:4px }
.pages button{ min-width:32px; height:32px; border:1px solid var(--borda); background:#fff; border-radius:8px; cursor:pointer; font-size:13px; color:var(--texto-2) }
.pages button:hover{ border-color:var(--azul-300) } .pages button.cur{ background:var(--azul); color:#fff; border-color:var(--azul) } .pages button:disabled{ opacity:.4; cursor:default }
.pager select{ height:32px; border:1px solid var(--borda); border-radius:8px; padding:0 8px; background:#fff }

/* =========================== MOTOR DE TABELA (RT) =========================== */
.rtbar{ display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap } .rtbar .spacer{ flex:1 }
.tsearch{ display:flex; align-items:center; gap:6px; border:1px solid var(--borda); border-radius:9px; padding:0 10px; height:38px; width:280px; max-width:60vw; background:#fff } .tsearch input{ border:none; outline:none; width:100%; font-size:13px } .tsearch svg{ width:15px; height:15px; color:var(--texto-3) }
.colbtn{ display:flex; align-items:center; gap:6px; border:1px solid var(--borda); border-radius:9px; height:38px; padding:0 12px; color:var(--texto-2); cursor:pointer; font-size:13px; font-weight:600; background:#fff; position:relative } .colbtn:hover{ border-color:var(--azul-300); color:var(--azul) } .colbtn svg{ width:15px; height:15px }
.rtmenu{ position:relative } .rtview svg.star{ color:var(--laranja) }
.rtdrop{ position:absolute; top:42px; left:0; background:#fff; border:1px solid var(--borda); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); width:230px; padding:8px; z-index:25; display:none } .rtdrop.open{ display:block }
.rtdrop .it{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:7px; font-size:13px; cursor:pointer; color:var(--texto) } .rtdrop .it:hover{ background:var(--bg) } .rtdrop .it svg{ width:16px; height:16px; color:var(--texto-2) } .rtdrop .it.cur{ color:var(--azul); font-weight:700 }
.colmenu{ position:absolute; top:42px; right:0; background:#fff; border:1px solid var(--borda); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.1); width:220px; padding:8px; z-index:25; display:none; max-height:320px; overflow:auto } .colmenu.open{ display:block } .colmenu label{ display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:7px; font-size:13px; cursor:pointer; color:var(--texto) } .colmenu label:hover{ background:var(--bg) }
.bulk{ display:none; align-items:center; gap:8px; padding:10px 14px; background:var(--azul); color:#fff; border-radius:12px; margin-bottom:12px } .bulk.show{ display:flex } .bulk .spacer{ flex:1 } .bulk button{ display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.14); color:#fff; border:none; border-radius:8px; height:34px; padding:0 12px; font-size:13px; cursor:pointer } .bulk button svg{ width:16px; height:16px } .bulk button:hover{ background:rgba(255,255,255,.26) } .bulk .cancelar{ background:transparent }
.filtbar{ display:none; align-items:center; gap:8px; padding:0 0 12px; flex-wrap:wrap } .filtbar.show{ display:flex } .filtbar .spacer{ flex:1 } .flink{ color:var(--azul); font-weight:600; cursor:pointer; font-size:13px }
.fchip{ display:flex; align-items:center; gap:7px; background:var(--azul-50); color:var(--azul); border:1px solid var(--azul-100); border-radius:20px; padding:4px 6px 4px 12px; font-size:12px; font-weight:500 } .fchip b{ font-weight:600 } .fchip .fx{ width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer } .fchip .fx:hover{ background:var(--azul-100) } .fchip.sortchip{ background:#fff } .fchip.groupchip{ background:var(--ambar-bg,#FEF6E0); color:var(--ambar-tx,#8A5A00); border-color:#F3E1B0 }
.hdrmenu{ position:fixed; background:#fff; border:1px solid var(--borda); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.14); width:240px; padding:6px; z-index:80; display:none } .hdrmenu.open{ display:block }
.hm-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:7px; font-size:13px; cursor:pointer; color:var(--texto) } .hm-item:hover{ background:var(--bg) } .hm-item svg{ width:16px; height:16px; color:var(--texto-2) }
.hm-sep{ border-top:1px solid var(--borda); margin:5px 0 } .hm-label{ font-size:11px; color:var(--texto-3); text-transform:uppercase; letter-spacing:.04em; padding:6px 10px 4px }
.hm-search{ display:flex; align-items:center; gap:6px; border:1px solid var(--borda); border-radius:8px; padding:0 10px; height:34px; margin:0 6px 6px } .hm-search input{ border:none; outline:none; width:100%; font-size:13px } .hm-search svg{ width:15px; height:15px; color:var(--texto-3) }
.hm-vals{ max-height:170px; overflow:auto; padding:0 4px } .hm-vals label{ display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:7px; font-size:13px; cursor:pointer; color:var(--texto) } .hm-vals label:hover{ background:var(--bg) }
.rtcard{ background:#fff; border:1px solid var(--borda); border-radius:14px; overflow:hidden; width:100% }
/* Múltiplos responsáveis: +N e popover */
.respmore{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:var(--laranja); color:#fff; font-size:11px; font-weight:700; cursor:pointer; margin-left:5px; vertical-align:middle } .respmore:hover{ filter:brightness(1.08) }
.respmenu{ position:fixed; z-index:90; display:none; background:#fff; border:1px solid var(--borda); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.16); min-width:170px; padding:6px } .respmenu.open{ display:block }
.respmenu .rm-h{ font-size:11px; font-weight:700; color:var(--texto-3); padding:4px 8px } .respmenu .rm-i{ display:flex; align-items:center; gap:8px; padding:7px 8px; font-size:13px; border-radius:7px } .respmenu .rm-i:hover{ background:var(--bg) }
.respmenu .rm-av{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--azul); color:#fff; font-size:11px; font-weight:700 }
/* scroll dentro da tabela: cabeçalho da tabela fixo, toolbar/busca/botões e paginador permanecem visíveis */
.twrap{ overflow:auto; max-height:calc(100vh - 290px); min-height:180px }
.twrap thead th{ position:sticky; top:0; z-index:3; background:#fff }
.atbl{ border-collapse:collapse; width:100%; white-space:nowrap } .atbl th{ font-size:12px; font-weight:600; color:var(--texto-3); text-align:left; padding:0; border-bottom:1px solid var(--borda); background:#fff }
.atbl .th-in{ display:flex; align-items:center; gap:6px; padding:12px 14px; cursor:pointer; user-select:none } .atbl .th-in:hover{ background:var(--bg) } .atbl .th-in .ind{ display:flex; gap:3px; color:var(--laranja) } .atbl .th-in .ind svg{ width:14px; height:14px }
.atbl td{ padding:12px 14px; border-bottom:1px solid var(--borda); font-size:13px; color:var(--texto-2) } .atbl tbody tr:last-child td{ border-bottom:none }
.atbl tbody tr{ cursor:pointer } .atbl tbody tr:hover{ background:var(--bg) } .atbl tbody tr.sel{ background:var(--azul-50) } .atbl tr.grouprow td{ background:#F3F6F9; font-weight:600; color:var(--azul); font-size:12px }