:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --border: #e6e9ee;
  --border-forte: #d4dae2;
  --texto: #1f2937;
  --texto-suave: #6b7280;
  --texto-fraco: #9ca3af;
  --accent: #0284c7;
  --accent-escuro: #0369a1;
  --accent-suave: #e0f2fe;
  --sidebar-bg: #141b2b;
  --verde: #15803d;
  --verde-bg: #dcfce7;
  --vermelho: #b91c1c;
  --vermelho-bg: #fee2e2;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --sombra-sm: 0 1px 2px rgba(16,24,40,.05);
  --sombra-md: 0 4px 12px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --sombra-lg: 0 12px 32px rgba(16,24,40,.12);
}
* { box-sizing: border-box; }
body { margin:0; font-family:"Inter","Segoe UI Variable","Segoe UI",system-ui,Roboto,-apple-system,Arial,sans-serif; background:var(--bg); color:var(--texto); font-size:14px; line-height:1.5; overflow-x:clip; }
.tabela-wrap { max-width:100%; }
h1,h2,h3 { margin:0; font-weight:600; letter-spacing:-.01em; }

.app { display:flex; min-height:100vh; }
.sidebar { width:244px; flex-shrink:0; background:var(--sidebar-bg,#141b2b); color:#9aa4b2; padding:22px 12px; display:flex; flex-direction:column; gap:12px; position:sticky; top:0; height:100vh;
  /* Com os submenus de BI abertos o menu passa da altura da tela; sem isto
     os itens de baixo ficam inalcançáveis. overscroll-behavior impede que o
     fim da rolagem do menu continue rolando a página atrás dele. */
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:#3a4456 transparent; }
/* Barra de rolagem discreta, para não cortar o fundo escuro do menu. */
.sidebar::-webkit-scrollbar { width:8px; }
.sidebar::-webkit-scrollbar-track { background:transparent; }
.sidebar::-webkit-scrollbar-thumb { background:#3a4456; border-radius:4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background:#4a5468; }
.marca { padding:4px 8px 8px; }
.logo-img { display:block; width:100%; max-width:160px; height:auto; margin:0 auto; }
.nav-label { font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:#5b6573; font-weight:600; padding:8px 12px 4px; }
.abas { display:flex; flex-direction:column; gap:2px; }
.aba { font-family:"Trebuchet MS","Segoe UI",sans-serif; display:flex; align-items:center; gap:12px; background:transparent; color:#9aa4b2; border:none; text-align:left; padding:10px 12px; cursor:pointer; font-size:14px; font-weight:500; border-radius:9px; transition:background .15s, color .15s; width:100%; }
.aba .ico { width:18px; height:18px; flex-shrink:0; }
.aba:hover { color:#e6edf5; background:rgba(255,255,255,.05); }
.aba.ativa { color:#ffffff; background:#243352; font-weight:600; box-shadow:inset 0 0 0 1px rgba(120,160,220,.16); }
.aba.ativa .ico { color:var(--accent); }

.area-toggle { font-family:"Trebuchet MS","Segoe UI",sans-serif; display:flex; align-items:center; gap:12px; background:transparent; color:#9aa4b2; border:none; text-align:left; padding:10px 12px; cursor:pointer; font-size:14px; font-weight:600; border-radius:9px; width:100%; }
.area-toggle .ico { width:18px; height:18px; flex-shrink:0; }
.area-toggle span { flex:1; }
.area-toggle:hover { color:#e6edf5; background:rgba(255,255,255,.05); }
.area-toggle .ico-seta { flex:none; width:14px; height:14px; transition:transform .15s; }
.area-toggle.area-ativa .ico-seta { transform:rotate(180deg); }
.area-submenu { display:flex; flex-direction:column; gap:2px; padding-left:14px; margin-top:2px; }
.sidebar-rodape { margin-top:auto; }
.usuario-logado { font-size:12px; color:#7e93ad; padding:6px 12px 2px; }
.usuario-logado strong { color:#cdd7e3; }

main { flex:1; min-width:0; padding:28px; }
.pagina { display:none; animation:aparecer .2s ease; }
.pagina.ativa { display:block; }
@keyframes aparecer { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.barra { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.barra-acoes { display:flex; gap:8px; }

.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:20px; }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px; box-shadow:var(--sombra-sm); }
.kpi-rotulo { font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--texto-fraco); font-weight:600; }
.kpi-valor { font-size:24px; font-weight:700; margin-top:4px; letter-spacing:-.02em; }
.kpi-unidade { font-size:12px; color:var(--texto-fraco); font-weight:500; margin-left:3px; }

.btn { background:var(--surface); border:1px solid var(--border-forte); color:var(--texto); padding:9px 16px; border-radius:var(--r-sm); cursor:pointer; font-size:14px; font-weight:500; transition:all .15s; white-space:nowrap; }
.btn:hover { border-color:var(--accent); color:var(--accent-escuro); box-shadow:var(--sombra-sm); }
.btn-primario { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.btn-primario:hover { background:var(--accent-escuro); border-color:var(--accent-escuro); color:#fff; }
.btn-contorno { background:transparent; border:1.5px solid var(--accent); color:var(--accent); font-weight:600; }
.btn-contorno:hover { background:var(--accent-suave); border-color:var(--accent-escuro); color:var(--accent-escuro); }
.btn:active { transform:translateY(1px); }
.btn-sm { padding:7px 12px; font-size:13px; }
.btn-bloco { width:100%; }

label { display:block; font-size:12px; color:var(--texto-suave); margin-bottom:5px; font-weight:600; }
input,textarea,select { font-family:inherit; font-size:14px; padding:9px 11px; border:1px solid var(--border-forte); border-radius:var(--r-sm); background:#fff; width:100%; color:var(--texto); transition:border-color .15s, box-shadow .15s; }
input::placeholder,textarea::placeholder { color:var(--texto-fraco); }
input:focus,textarea:focus,select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-suave); }
.campo-data input { width:auto; }
.form-linha { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.campo { min-width:140px; }
.campo.cresce { flex:1; }
.dev-form-acoes { display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }

.cartao { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 22px; box-shadow:var(--sombra-sm); margin-bottom:20px; }
.cartao h2 { font-size:15px; margin-bottom:16px; }

.tabela-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:auto; box-shadow:var(--sombra-sm); }
.tabela { width:100%; border-collapse:separate; border-spacing:0; min-width:860px; }
.tabela th,.tabela td { padding:11px 14px; text-align:left; }
.tabela tbody td { border-top:1px solid var(--border); }
.tabela thead th { background:var(--surface-2); color:var(--texto-suave); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; position:sticky; top:0; z-index:1; white-space:nowrap; }
.tabela tbody tr { transition:background .1s; }
.tabela tbody tr:hover { background:var(--surface-2); }
.col-num { text-align:right; font-variant-numeric:tabular-nums; }
.col-codigo { width:110px; }
.col-origem { width:110px; }
.col-origem select { width:100%; }
.col-data { width:170px; }
.col-acao { width:1%; white-space:nowrap; text-align:center; }
.tabela td input,.tabela td select { padding:7px 9px; }
.tabela td.col-num input { text-align:right; }
.linha-total td { font-weight:700; background:var(--surface-2); border-top:2px solid var(--border-forte); }
.tabela tbody tr.linha-aberta > td { background:var(--accent-suave); }
.tabela tbody tr.linha-aberta:hover > td { background:var(--accent-suave); }
.linha-detalhe > td { padding:0; background:var(--surface-2); }
.detalhe-card { padding:16px 18px; position:sticky; left:0; max-width:100vw; box-sizing:border-box; animation:aparecer .18s ease; }
.linha-clicavel { cursor:pointer; }
.grp-linha { cursor:pointer; }
.grp-linha:hover > td { background:var(--surface-2); }
.grp-seta { color:var(--accent-escuro); font-size:11px; }
.grp-mais { background:var(--accent-suave); color:var(--accent-escuro); border-radius:99px; padding:1px 7px; font-size:11px; font-weight:600; }
.grp-sub { color:var(--texto-suave); font-size:12px; }
.grp-detalhe > td { background:var(--surface-2); }

/* Primeira coluna fixa ao rolar a tabela na horizontal */
.tabela th:first-child, .tabela td:first-child { position:sticky; left:0; z-index:2; background:var(--surface); border-right:1px solid var(--border); }
.tabela thead th { z-index:3; }
.tabela thead th:first-child { z-index:4; background:var(--surface-2); }
.tabela tbody tr:hover td:first-child { background:var(--surface-2); }
.tabela .linha-total td:first-child { background:var(--surface-2); }
.tabela tbody tr.linha-aberta td:first-child { background:var(--accent-suave); }
.tabela tbody tr.grp-detalhe td:first-child { background:var(--surface-2); }
.tabela tbody tr.linha-detalhe > td { position:static; background:var(--surface-2); }

.dif-pos { color:var(--verde); font-weight:600; }
.dif-neg { color:var(--vermelho); font-weight:600; }
.dif-zero { color:var(--texto-fraco); }
.pill { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12.5px; font-weight:600; }
.pill-pos { background:var(--verde-bg); color:var(--verde); }
.pill-neg { background:var(--vermelho-bg); color:var(--vermelho); }
.pill-zero { background:var(--surface-2); color:var(--texto-fraco); }

.btn-texto { background:none; border:none; cursor:pointer; font-size:13px; font-weight:600; color:var(--accent-escuro); padding:4px 8px; border-radius:6px; transition:background .12s; }
.btn-texto:hover { background:var(--surface-2); }
.btn-texto-perigo { color:var(--vermelho); }
.btn-texto-perigo:hover { background:var(--vermelho-bg); }
.btn-add-linha { background:var(--accent-suave); color:var(--accent-escuro); white-space:nowrap; }
.btn-add-linha:hover { background:var(--accent); color:#fff; }
.nome-celula { color:var(--texto-suave); font-size:13px; }

.obs-geral { margin-top:20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--sombra-sm); }
.anexos { margin-top:20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--sombra-sm); }
.galeria { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.galeria-vazia { color:var(--texto-fraco); font-size:13px; margin-top:10px; }
.thumb { position:relative; width:96px; height:96px; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--border); background:var(--surface-2); }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.thumb-remover { position:absolute; top:3px; right:3px; background:rgba(0,0,0,.6); color:#fff; border:none; width:20px; height:20px; border-radius:50%; cursor:pointer; font-size:13px; line-height:1; display:grid; place-items:center; padding:0; }
.thumb-remover:hover { background:var(--vermelho); }
.visor { position:fixed; inset:0; background:rgba(0,0,0,.88); display:flex; align-items:center; justify-content:center; z-index:70; padding:24px; cursor:zoom-out; }
.visor img { max-width:100%; max-height:100%; border-radius:8px; box-shadow:var(--sombra-lg); }

/* editor de imagem */
.thumb-editar { position:absolute; top:3px; left:3px; background:rgba(0,0,0,.6); color:#fff; border:none; width:20px; height:20px; border-radius:50%; cursor:pointer; font-size:11px; line-height:1; display:grid; place-items:center; padding:0; }
.thumb-editar:hover { background:var(--accent); }
.editor-modal { position:fixed; inset:0; background:rgba(15,23,42,.6); z-index:75; display:flex; align-items:center; justify-content:center; padding:16px; }
.editor-conteudo { background:var(--surface); border-radius:var(--r-lg); max-width:680px; width:100%; padding:14px; box-shadow:var(--sombra-lg); }
.editor-area { max-height:62vh; overflow:hidden; background:var(--surface-2); border-radius:var(--r-sm); }
.editor-area img { max-width:100%; display:block; }
.editor-acoes { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; align-items:center; }

/* configurações */
.config-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.config-campo input[type="color"] { width:54px; height:38px; padding:2px; cursor:pointer; }
.config-linha { display:flex; align-items:center; gap:10px; }
.aviso { background:#fffbeb; border:1px solid #fde68a; color:#92400e; padding:13px 16px; border-radius:var(--r-md); margin-bottom:16px; }

.modal { position:fixed; inset:0; background:rgba(15,23,42,.5); display:flex; align-items:center; justify-content:center; z-index:50; padding:24px; backdrop-filter:blur(2px); animation:aparecer .15s ease; }
.modal-conteudo { background:var(--surface); border-radius:var(--r-lg); max-width:1100px; width:100%; max-height:90vh; overflow:auto; box-shadow:var(--sombra-lg); }
.modal-topo { display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface); z-index:1; }
.modal-topo h2 { font-size:17px; }
.btn-fechar { background:none; border:none; font-size:18px; cursor:pointer; color:var(--texto-suave); width:32px; height:32px; border-radius:8px; }
.btn-fechar:hover { background:var(--surface-2); color:var(--vermelho); }
#modal-corpo { padding:22px; }

.toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); background:var(--texto); color:#fff; padding:13px 24px; border-radius:var(--r-md); box-shadow:var(--sombra-lg); z-index:80; font-size:14px; font-weight:500; animation:subir .25s ease; }
@keyframes subir { from { opacity:0; transform:translate(-50%,12px); } to { opacity:1; transform:translate(-50%,0); } }
.toast.sucesso { background:var(--verde); }
.toast.erro { background:var(--vermelho); }

.oculto { display:none !important; }
.link-acao { background:none; border:none; color:var(--accent-escuro); cursor:pointer; font-weight:600; font-size:14px; padding:0; }
.link-acao:hover { text-decoration:underline; }
.vazio { text-align:center; color:var(--texto-fraco); padding:32px; }

/* ============ Dashboard ============ */
.dash-topo { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.dash-topo h2 { font-size: 19px; }
.dash-topo .sub { color: var(--texto-suave); font-size: 13px; }

.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); grid-auto-flow: row dense; gap: 16px; margin: 16px 0 4px; }
.kpi-card-duplo { grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; }
.kpi-duplo-sep { flex: none; height: 1px; background: var(--border); margin: 0; }
/* -2/-1 e -3/-2 = últimas duas colunas da grade, seja qual for o total de colunas */
.kpi-dup-3 { grid-column: -3 / -2; }
.kpi-dup-4 { grid-column: -2 / -1; }
@media (max-width: 760px) {
  .kpi-dup-3, .kpi-dup-4 { grid-column: auto; }
}
.kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: none; position: relative; }
.kpi-card .kpi-ico { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; display: grid; place-items: center; color: var(--texto); }
.kpi-card .kpi-ico svg { width: 22px; height: 22px; }
.kpi-card .rot { font-size: 12.5px; color: var(--texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.kpi-card .val { font-size: 32px; font-weight: 700; margin-top: 8px; letter-spacing: -.02em; }
.kpi-card .un { font-size: 14px; color: var(--texto-fraco); font-weight: 600; margin-left: 3px; }
.kpi-card .delta { font-size: 13px; font-weight: 600; margin-top: 8px; }
.delta.pos { color: var(--verde); } .delta.neg { color: var(--vermelho); } .delta.zero { color: var(--texto-fraco); }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.dash-grid .span2 { grid-column: 1 / -1; }
.cartao h3 { font-size: 14px; margin: 0 0 16px; color: var(--texto); }

.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut-box { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
.donut { width: 140px; height: 140px; transform: rotate(-90deg); }
.donut-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-centro b { font-size: 26px; line-height: 1; } .donut-centro span { font-size: 11px; color: var(--texto-suave); margin-top: 3px; }
.legenda { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 170px; }
.legenda-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.legenda-cor { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.legenda-num { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

.areachart { width: 100%; height: auto; display: block; }
.chart-box { position: relative; width: 100%; height: 250px; }
.dash-filtro { display: flex; align-items: center; gap: 8px; }
.dash-filtro label { margin: 0; font-size: 13px; color: var(--texto-suave); }
.dash-filtro select { width: auto; min-width: 220px; max-width: 340px; }

.hb { margin-bottom: 13px; }
.hb:last-child { margin-bottom: 0; }
.hb-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 5px; }
.hb-top .nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-top .val { color: var(--texto-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb-track { height: 9px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.hb-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-escuro)); border-radius: 99px; }

.db { display: grid; grid-template-columns: 120px 1fr 84px; align-items: center; gap: 10px; margin-bottom: 11px; font-size: 13px; }
.db:last-child { margin-bottom: 0; }
.db-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-bar { display: flex; align-items: center; height: 16px; }
.db-half { flex: 1; display: flex; }
.db-half.left { justify-content: flex-end; }
.db-fill { height: 14px; border-radius: 4px; }
.db-mid { width: 2px; height: 18px; background: var(--border-forte); border-radius: 2px; }
.db-val { text-align: right; }

.pill-warn { background: #fef3c7; color: #92400e; }
.lista { display: flex; flex-direction: column; }
.lista-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.lista-item:first-child { border-top: none; }
.lista-info { min-width: 0; }
.lista-info strong { font-weight: 600; }
.lista-info small { display: block; color: var(--texto-suave); font-size: 12px; }
.lista-dir { text-align: right; white-space: nowrap; }
.dash-alerta { margin-top: 16px; }

@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

/* ============ Barra superior do celular (menu gaveta) ============ */
.mobile-topbar { display: none; align-items: center; gap: 12px; background: var(--sidebar-bg,#141b2b); padding: 8px 12px; position: sticky; top: 0; z-index: 45; }
.btn-menu { background: transparent; border: none; color: #fff; padding: 6px; cursor: pointer; display: grid; place-items: center; }
.btn-menu svg { width: 26px; height: 26px; }
.mobile-logo { height: 26px; width: auto; }
.menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 55; }

/* ============ Celular / telas pequenas ============ */
@media (max-width: 760px) {
  .mobile-topbar { display: flex; }
  .app { flex-direction: column; }
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 240px;
    transform: translateX(-100%); transition: transform .25s ease;
    z-index: 60; flex-direction: column; align-items: stretch;
    gap: 8px; padding: 18px 12px; overflow-y: auto;
  }
  .sidebar.aberta { transform: translateX(0); box-shadow: 0 0 50px rgba(0,0,0,.45); }
  .marca { padding: 0; display: flex; justify-content: center; }
  .logo-img { max-width: 120px; }
  .nav-label { display: block; }
  .abas { flex-direction: column; gap: 3px; width: auto; }
  .aba { width: 100%; justify-content: flex-start; padding: 11px 14px; font-size: 14px; gap: 11px; }
  .aba .ico { width: 18px; height: 18px; }
  .sidebar-rodape { display: block; margin-top: auto; }

  main { padding: 16px; }
  .barra { align-items: stretch; }
  .barra-acoes { width: 100%; }
  .barra-acoes .btn { flex: 1; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
  .kpi-valor { font-size: 20px; }

  .modal { padding: 0; }
  .modal-conteudo { max-height: 100vh; border-radius: 0; }
  #modal-corpo { padding: 14px; }

  .app, main { max-width: 100%; min-width: 0; }
  .dash-filtro { width: 100%; }
  .dash-filtro select { flex: 1; min-width: 0; max-width: none; }

  /* Registrar devolução: um campo por linha, botões em largura cheia */
  #devolucoes-registrar .cartao { padding: 16px; }
  #devolucoes-registrar .cartao h2 { font-size: 16px; }
  #devolucoes-registrar .form-linha { flex-direction: column; align-items: stretch; gap: 14px; }
  #devolucoes-registrar .campo { min-width: 0; width: 100%; }
  #devolucoes-registrar input, #devolucoes-registrar select { font-size: 16px; padding: 11px 12px; }
  #devolucoes-registrar .dev-form-acoes { flex-direction: column; margin-top: 6px; }
  #devolucoes-registrar .dev-form-acoes .btn { width: 100%; padding: 12px 16px; }
}

/* ============ Login ============ */
.login-tela { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:linear-gradient(135deg,#141b2b,#0b1020); }
.login-cartao { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sombra-lg); width:100%; max-width:360px; padding:30px 28px; }
.login-logo { display:block; max-width:170px; margin:0 auto 8px; }
.login-sub { text-align:center; color:var(--texto-suave); font-size:13px; margin-bottom:22px; }
.login-cartao .campo-form { margin-bottom:14px; }
.login-erro { background:var(--vermelho-bg); color:var(--vermelho); border-radius:var(--r-sm); padding:10px 12px; font-size:13px; margin-bottom:14px; }

/* =====================================================================
   INTELIGÊNCIA COMERCIAL
   Reaproveita o design system existente (cards, tabelas, pills, cores).
   ===================================================================== */
.bi-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.bi-topo h2 { font-size: 19px; }
.bi-topo h3 { font-size: 14px; }
.bi-titulo-linha { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bi-sub { color: var(--texto-suave); font-size: 13px; }
.bi-topo-acoes { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.bi-ajuda { color: var(--texto-suave); font-size: 12.5px; margin: 0 0 12px; }
.bi-ajuda:last-child { margin-bottom: 0; }
.bi-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.bi-carregando { display: flex; align-items: center; gap: 10px; color: var(--texto-suave); font-size: 13.5px; padding: 22px 4px; }
.bi-spinner { width: 15px; height: 15px; border: 2px solid var(--border-forte); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: bi-girar .7s linear infinite; flex-shrink: 0; }
@keyframes bi-girar { to { transform: rotate(360deg); } }

.cartao.bi-filtros { padding: 14px 16px; }
.bi-filtros-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bi-filtros-titulo { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-fraco); }
.bi-filtros-titulo svg { width: 14px; height: 14px; }
.bi-filtros-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; }
.bi-filtros .dash-filtro { flex-direction: column; align-items: stretch; gap: 5px; min-width: 0; }
.bi-filtros .dash-filtro label { margin: 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: var(--texto-fraco); }
.bi-filtros .dash-filtro select { width: 100%; min-width: 0; max-width: none; padding: 7px 9px; font-size: 13px; border-radius: var(--r-sm); }

.bi-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* Controle segmentado (um único retângulo fino e arredondado) */
.ins-topicos { display: flex; align-items: center; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.ins-topicos::-webkit-scrollbar { display: none; }
.ins-topico { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; background: transparent; border: none; border-radius: 999px; padding: 7px 15px; font-size: 12.5px; font-weight: 600; color: var(--texto-suave); cursor: pointer; font-family: inherit; transition: background .15s, color .15s; }
.ins-topico:hover { color: var(--texto); }
.ins-topico-ativo { background: rgba(2, 132, 199, .16); color: var(--accent-escuro); }
.ins-ico { width: 14px; height: 14px; flex-shrink: 0; }

.kpi-card .kpi-nota { font-size: 11px; color: var(--texto-fraco); margin-top: 6px; line-height: 1.35; }
.kpi-alerta { color: #92400e; }
.kpi-clicavel { cursor: pointer; }
.kpi-indisponivel { background: var(--surface); border: 1px dashed var(--border-forte); border-radius: var(--r-lg); padding: 16px 18px; }
.kpi-indisponivel .rot { font-size: 11.5px; color: var(--texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.val-indisponivel { font-size: 13px; color: var(--texto-suave); margin-top: 8px; line-height: 1.4; }

.rank { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 6px; border-radius: 7px; background: var(--surface-2); color: var(--texto-suave); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-top { background: var(--accent-suave); color: var(--accent-escuro); }
.th-ordenavel { cursor: pointer; user-select: none; }
.th-ordenavel:hover { color: var(--accent-escuro); }
.th-asc::after { content: ' ▲'; font-size: 9px; }
.th-desc::after { content: ' ▼'; font-size: 9px; }

.bi-metodologia p { margin: 0 0 8px; font-size: 13px; }
.bi-metodologia code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; font-size: 12.5px; display: inline-block; }
.bi-ok-msg { margin-top: 14px; background: var(--verde-bg); color: var(--verde); border-radius: var(--r-md); padding: 11px 14px; font-size: 13px; font-weight: 600; }
.bi-aviso-ia { background: var(--accent-suave); color: var(--accent-escuro); border-radius: var(--r-md); padding: 11px 14px; font-size: 12.5px; margin-bottom: 16px; }

/* ---------- Central de Importação ---------- */
.imp-abrir { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.imp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.imp-zona { border: 1.5px dashed var(--border-forte); border-radius: var(--r-md); padding: 16px; background: var(--surface-2); transition: all .15s; }
.imp-zona-drag { border-color: var(--accent); background: var(--accent-suave); }
.imp-zona-titulo { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }
.imp-zona-desc { font-size: 11.5px; color: var(--texto-suave); line-height: 1.4; margin-bottom: 12px; min-height: 32px; }
.imp-zona-status { font-size: 12px; color: var(--texto-fraco); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 11px; margin-bottom: 10px; line-height: 1.45; }
.imp-zona-status.ok { border-color: #bbf7d0; background: var(--verde-bg); color: var(--verde); }
.imp-zona-status.erro { border-color: #fecaca; background: var(--vermelho-bg); color: var(--vermelho); }
.imp-zona-progresso { margin-top: 10px; }

.passos { display: flex; gap: 6px; flex-wrap: wrap; }
.passo { display: flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; color: var(--texto-fraco); font-weight: 600; }
.passo-ico { font-size: 12px; }
.passo-ok { background: var(--verde-bg); border-color: #bbf7d0; color: var(--verde); }
.passo-erro { background: var(--vermelho-bg); border-color: #fecaca; color: var(--vermelho); }
.passo-rodando { background: var(--accent-suave); border-color: var(--accent); color: var(--accent-escuro); }

.imp-log { margin-top: 14px; max-height: 240px; overflow-y: auto; background: #0f172a; border-radius: var(--r-md); padding: 12px 14px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.7; color: #cbd5e1; }
.imp-log:empty { display: none; }
.imp-log-linha.ok { color: #86efac; }
.imp-log-linha.erro { color: #fca5a5; }

.tabela-map { min-width: 560px; }
.tabela-map select { width: 100%; }
.map-amostra { color: var(--texto-suave); font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obrig { color: var(--vermelho); font-weight: 700; }

/* ===================================================================
   SELETOR PADRAO — .sel / .sel-item
   Um unico componente para TODO botao de escolha do site: filtros de
   insights, camadas do mapa, niveis de permissao, sugestoes do chat.

   O CONJUNTO e que e o retangulo de bordas arredondadas: uma trilha
   cinza que emoldura todas as opcoes e deixa claro que elas sao UMA
   escolha, nao botoes soltos. Dentro dela cada item e uma pilula sem
   borda propria, e so a escolhida ganha fundo.

   O toque acende um VEU TRANSPARENTE (::after com opacidade), que nao
   mexe em tamanho nem posicao — o item nao "pula" ao ser pressionado,
   defeito de quem anima padding no :active.
   =================================================================== */
.sel { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--border-forte); border-radius: var(--r-md); background: rgba(16,24,40,.05); max-width: 100%; }
.sel-item { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 0; border-radius: calc(var(--r-md) - 5px); background: transparent; color: var(--texto-suave); font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.3; cursor: pointer; white-space: nowrap; transition: color .12s, background .12s; }
.sel-item::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity .12s; pointer-events: none; }
.sel-item:hover::after { opacity: .07; }
.sel-item:active::after { opacity: .16; }
.sel-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
/* A opcao escolhida: pilula acesa dentro da trilha. */
.sel-item.ativo,
.sel-item:has(input:checked) { background: var(--surface); color: var(--accent-escuro); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.14); }
.sel-item.ativo::after,
.sel-item:has(input:checked)::after { opacity: .05; }
.sel-item:disabled,
.sel-item:has(input:disabled) { cursor: not-allowed; opacity: .45; }
.sel-item:disabled::after,
.sel-item:has(input:disabled)::after { opacity: 0; }
/* O radio existe pela semantica de formulario; quem aparece e o rotulo. */
.sel-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.sel-ico { width: 14px; height: 14px; flex-shrink: 0; }
.sel-n { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; background: rgba(0,0,0,.06); color: var(--texto-fraco); border-radius: 999px; padding: 1px 7px; }
.sel-item.ativo .sel-n { background: var(--accent-suave); color: var(--accent-escuro); }

/* ---------- Insights ---------- */
.ins-abas { margin-bottom: 18px; }

/* Carrossel: trilho horizontal com encaixe, e as setas nas laterais.
   O scroll-snap e o que faz o cartao parar alinhado em vez de meio
   cortado depois de cada clique na seta. */
.ins-carrossel { position: relative; }
.ins-lista { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 10px; scrollbar-width: none; }
.ins-lista::-webkit-scrollbar { display: none; }
.ins-lista > .ins-card { flex: 0 0 clamp(280px, 32%, 380px); scroll-snap-align: start; }

.ins-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border-forte); border-radius: 50%; background: var(--surface); color: var(--texto); box-shadow: var(--sombra-md); cursor: pointer; transition: opacity .15s; }
.ins-nav-btn svg { width: 20px; height: 20px; }
.ins-nav-btn:hover { background: var(--surface-2); }
.ins-nav-btn:disabled { opacity: 0; pointer-events: none; }
.ins-nav-esq { left: -18px; }
.ins-nav-dir { right: -18px; }

.ins-progresso-trilha { height: 3px; background: var(--border); border-radius: 999px; overflow: hidden; position: relative; margin-top: 2px; }
.ins-progresso-cursor { position: absolute; top: 0; bottom: 0; background: var(--accent); border-radius: 999px; transition: left .15s; }

.ins-vazio { color: var(--texto-suave); font-size: 13px; padding: 26px 0; text-align: center; }
.ins-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-fraco); margin-bottom: 8px; }
.ins-cat svg { width: 12px; height: 12px; }

@media (max-width: 900px) {
  .ins-nav-esq { left: 2px; }
  .ins-nav-dir { right: 2px; }
  .ins-lista > .ins-card { flex-basis: 86%; }
}

.ins-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border-forte); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--sombra-sm); }
.ins-card.sev-alta { border-left-color: var(--vermelho); }
.ins-card.sev-media { border-left-color: #f59e0b; }
.ins-card.sev-baixa { border-left-color: var(--accent); }
.ins-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.ins-topo h4 { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.35; }
.ins-bloco { margin-bottom: 11px; }
.ins-bloco:last-child { margin-bottom: 0; }
.ins-bloco p { margin: 3px 0 0; font-size: 13px; line-height: 1.55; }
.ins-rot { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-fraco); font-weight: 700; }
.ins-evidencias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ins-ev { background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 4px 9px; font-size: 12px; font-variant-numeric: tabular-nums; }
.ins-ev b { color: var(--texto-suave); font-weight: 600; margin-right: 5px; }
.ins-acao { background: var(--accent-suave); border-radius: var(--r-sm); padding: 10px 12px; margin-top: 12px; }
.ins-acao .ins-rot { color: var(--accent-escuro); }

/* ---------- Chat ---------- */
.chat-cartao { display: flex; flex-direction: column; min-height: 480px; }
.chat-mensagens { flex: 1; overflow-y: auto; max-height: 58vh; display: flex; flex-direction: column; gap: 12px; padding-right: 4px; }
.chat-vazio { color: var(--texto-suave); font-size: 13.5px; }
.chat-sugestoes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.chat-bolha { max-width: 88%; padding: 12px 15px; border-radius: var(--r-md); font-size: 13.5px; line-height: 1.6; }
.chat-usuario { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.chat-ia { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-sem-dados { border-color: #fde68a; background: #fffbeb; }
.chat-valores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.chat-telas { margin-top: 10px; font-size: 11.5px; color: var(--texto-fraco); }
.chat-form { display: flex; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.chat-form input { flex: 1; }

/* ---------- Mapa ---------- */
.bi-mapa { height: 420px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }

@media (max-width: 760px) {
  .bi-filtros .dash-filtro { min-width: 100%; }
  .ins-card { flex-basis: 82vw; }
  .chat-bolha { max-width: 96%; }
  .imp-grid { grid-template-columns: 1fr; }
  .bi-mapa { height: 320px; }
  .passos { gap: 4px; }
  .passo { padding: 6px 10px; font-size: 11.5px; }
}

/* ===================================================================
   WORKFLOW — canvas do fluxo do agente, no espírito do n8n.
   Nós posicionados em coordenadas absolutas sobre um SVG que desenha
   as ligações. HTML para os nós (texto que quebra linha de verdade),
   SVG só para as setas.
   =================================================================== */
/* --- A aba toma a coluna inteira: sem padding e sem rolagem no <main>. --- */
main.modo-workflow { padding: 0; height: 100vh; overflow: hidden; }
main.modo-workflow #workflow.pagina.ativa { display: flex; height: 100%; }
.wfd-tela { display: flex; flex-direction: column; flex: 1; min-width: 0; height: 100%; background: var(--surface); }

/* --- Barra de ferramentas --- */
.wfd-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.wfd-titulo-tela { margin: 0; font-size: 16px; font-weight: 700; }
.wfd-titulo-tela span { color: var(--texto-suave); font-weight: 600; }
.wfd-barra-dir { display: flex; align-items: center; gap: 10px; }
.wfd-btn-ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
.wfd-zoom { display: inline-flex; align-items: center; border: 1px solid var(--border-forte); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.wfd-zoom-btn { border: 0; background: transparent; font: inherit; font-size: 16px; line-height: 1; padding: 6px 12px; cursor: pointer; color: var(--texto-suave); }
.wfd-zoom-btn:hover { background: var(--surface-2); color: var(--texto); }
.wfd-zoom-rotulo { font-size: 12.5px; font-weight: 600; min-width: 48px; text-align: center; border-left: 1px solid var(--border-forte); border-right: 1px solid var(--border-forte); padding: 6px 0; }

/* --- Canvas. A malha de pontos da a leitura imediata de canvas. --- */
.wfd-quadro { position: relative; flex: 1; min-height: 0; }
.wfd-viewport { position: absolute; inset: 0; overflow: auto; background-color: var(--surface-2); background-image: radial-gradient(var(--border-forte) 1px, transparent 1px); background-size: 18px 18px; }
.wfd-sizer { position: relative; }
.wfd-palco { position: relative; transform-origin: 0 0; }
.wfd-svg { position: absolute; inset: 0; pointer-events: none; overflow: visible; }

/* --- Nos --- */
.wfd-no { position: absolute; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--surface); border: 2px solid var(--border-forte); border-radius: var(--r-md); box-shadow: var(--sombra-sm); cursor: grab; touch-action: none; user-select: none; }
.wfd-no:hover { box-shadow: var(--sombra-md); }
.wfd-no-sel { box-shadow: 0 0 0 3px var(--accent-suave), var(--sombra-md); }
/* Enquanto arrasta, o no sobe acima dos demais para colar no cursor. */
.wfd-arrastando { cursor: grabbing; z-index: 5; box-shadow: var(--sombra-lg); }
.wfd-inicial { border-color: #16a34a; }
.wfd-meio { border-color: #2563eb; }
.wfd-final { border-color: #dc2626; }

.wfd-cab { display: flex; align-items: center; gap: 8px; }
.wfd-ico svg { width: 15px; height: 15px; display: block; }
.wfd-titulo { font-size: 13.5px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfd-inicial .wfd-ico, .wfd-inicial .wfd-titulo { color: #15803d; }
.wfd-meio .wfd-ico, .wfd-meio .wfd-titulo { color: #1d4ed8; }
.wfd-final .wfd-ico, .wfd-final .wfd-titulo { color: #b91c1c; }
/* Ponto de estado: verde configurado, vermelho falta, cinza nao depende. */
.wfd-estado { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.wfd-lapis { flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--texto-fraco); cursor: pointer; }
.wfd-lapis svg { width: 13px; height: 13px; }
.wfd-lapis:hover { background: var(--accent-suave); border-color: var(--accent); color: var(--accent-escuro); }
.wfd-lapis:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.wfd-desc { font-size: 11.5px; line-height: 1.45; color: var(--texto-suave); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex: 0 0 auto; height: 34px; }
.wfd-rodape { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.wfd-num { font-size: 11px; font-weight: 700; color: var(--texto-fraco); }
.wfd-tag { font-size: 10.5px; padding: 2px 8px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--texto-suave); }

/* Alcas de conexao: decorativas - e um desenho de leitura, nao um editor. */
.wfd-alca { position: absolute; width: 6px; height: 6px; background: var(--border-forte); border-radius: 2px; }
.wfd-alca-t { top: -4px; left: 50%; margin-left: -3px; }
.wfd-alca-b { bottom: -4px; left: 50%; margin-left: -3px; }
.wfd-alca-e { left: -4px; top: 50%; margin-top: -3px; }
.wfd-alca-d { right: -4px; top: 50%; margin-top: -3px; }

/* --- Legenda e minimapa, flutuando sobre o canvas --- */
.wfd-legenda { position: absolute; left: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 11px; color: var(--texto-suave); background: rgba(255,255,255,.96); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; box-shadow: var(--sombra-sm); }
.wfd-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.wfd-bolinha { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.wfd-sep { width: 1px; height: 14px; background: var(--border-forte); }
.wfd-dica { color: var(--texto-fraco); font-style: italic; }
.wfd-minimapa { position: absolute; right: 14px; bottom: 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: rgba(255,255,255,.96); padding: 6px; box-shadow: var(--sombra-sm); }
.wfd-mini-int { position: relative; }
.wfd-mini-no { position: absolute; border-radius: 1px; opacity: .5; }
.wfd-mini-sel { opacity: 1; outline: 1px solid var(--texto); }

/* --- Gaveta de detalhes: entra pela direita, sobre o canvas --- */
.wfd-gaveta { position: absolute; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100%; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -8px 0 28px rgba(16,24,40,.10); transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column; }
.wfd-gaveta-aberta { transform: translateX(0); }
.wfd-gaveta-cab { display: flex; align-items: flex-start; gap: 11px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.wfd-gaveta-ico { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); }
.wfd-gaveta-ico svg { width: 17px; height: 17px; }
.wfd-ico-inicial { color: #15803d; background: var(--verde-bg); }
.wfd-ico-meio { color: #1d4ed8; background: var(--accent-suave); }
.wfd-ico-final { color: #b91c1c; background: var(--vermelho-bg); }
.wfd-gaveta-nomes { min-width: 0; flex: 1; }
.wfd-gaveta-etapa { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-fraco); }
.wfd-gaveta-titulo { margin: 2px 0 0; font-size: 15px; font-weight: 700; }
.wfd-gaveta-fechar { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--texto-suave); cursor: pointer; }
.wfd-gaveta-fechar svg { width: 14px; height: 14px; }
.wfd-gaveta-fechar:hover { background: var(--surface-2); color: var(--texto); }
.wfd-gaveta-corpo { padding: 16px 18px 22px; overflow-y: auto; }
.wfd-gaveta-desc { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--texto-suave); }

@media (max-width: 760px) {
  main.modo-workflow { height: auto; }
  main.modo-workflow #workflow.pagina.ativa { height: calc(100vh - 46px); }
  .wfd-minimapa { display: none; }
  .wfd-dica { display: none; }
  .wfd-gaveta { width: 100%; }
}


/* Painel de detalhes — o equivalente ao painel de parâmetros do n8n. */
.wf-painel { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: 14px 16px; }
.wf-painel-topo { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.wf-painel-titulo { font-size: 15px; font-weight: 700; }
.wf-painel-desc { margin-top: 9px; font-size: 13px; line-height: 1.6; color: var(--texto-suave); }
.wf-secao { margin-top: 13px; }
.wf-secao-rotulo { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-fraco); margin-bottom: 6px; }
.wf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-chip { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; padding: 3px 8px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--texto-suave); }
.wf-chip-ok { border-color: #bbf7d0; background: var(--verde-bg); color: var(--verde); }
.wf-chip-falta { border-color: #fecaca; background: var(--vermelho-bg); color: var(--vermelho); }
/* O caminho de erro: a parte que falta em toda documentação de fluxo. */
.wf-falha { margin-top: 13px; padding: 8px 12px; font-size: 12.5px; line-height: 1.55; color: #92400e; background: #fffbeb; border-left: 3px solid #fcd34d; border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* Ferramentas do agente (aba Agentes de IA) */
/* ===================================================================
   SEÇÃO RECOLHÍVEL
   <details> nativo: abre e fecha sem uma linha de JS e já responde ao
   teclado (Tab e Enter) sem precisar de aria-expanded na mão.
   =================================================================== */
.cartao-dobra { padding: 0; }
.dobra-cab { display: flex; align-items: center; gap: 10px; padding: 16px 22px; cursor: pointer; list-style: none; user-select: none; border-radius: var(--r-lg); }
/* Some com o triângulo padrão, que cada navegador desenha de um jeito. */
.dobra-cab::-webkit-details-marker { display: none; }
.dobra-cab:hover { background: var(--surface-2); }
.dobra-cab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dobra-titulo { font-size: 15px; font-weight: 600; color: var(--texto); }
.dobra-seta { width: 18px; height: 18px; margin-left: auto; color: var(--texto-fraco); transition: transform .18s ease; flex-shrink: 0; }
.cartao-dobra[open] .dobra-seta { transform: rotate(180deg); }
/* Aberta, a barra do título ganha uma régua para separar do conteúdo. */
.cartao-dobra[open] .dobra-cab { border-bottom: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.dobra-corpo { padding: 16px 22px 20px; }

/* O selo vive no título: fechada, é o único lugar onde uma pendência
   ainda consegue ser vista. */
.dobra-selo { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.dobra-selo-ok { background: var(--verde-bg); color: var(--verde); }
.dobra-selo-alerta { background: var(--vermelho-bg); color: var(--vermelho); }
.dobra-selo-neutro { background: var(--surface-2); color: var(--texto-fraco); font-variant-numeric: tabular-nums; }

/* ===================================================================
   SITUAÇÃO DO AGENTE
   Silencioso quando está tudo certo: cinco selos verdes iguais não
   informam nada. O resumo carrega o sinal, e só a exceção ganha cor.
   =================================================================== */
.ag-sit-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.ag-sit-resumo { font-size: 14px; font-weight: 600; color: var(--verde); }
.ag-sit-cab-alerta .ag-sit-resumo { color: var(--vermelho); }
.ag-sit-cont { font-size: 12px; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }

.ag-sit-lista { list-style: none; margin: 0; padding: 0; }
.ag-sit-linha { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.ag-sit-linha:last-child { border-bottom: 0; padding-bottom: 0; }
.ag-sit-rotulo { font-size: 13px; color: var(--texto); }
/* Valor em tom baixo: presença basta, não precisa de destaque. */
.ag-sit-valor { font-size: 12.5px; color: var(--texto-fraco); font-variant-numeric: tabular-nums; text-align: right; }
.ag-sit-linha-falta .ag-sit-rotulo { font-weight: 600; }
.ag-sit-linha-falta .ag-sit-valor { color: var(--vermelho); font-weight: 600; }
/* A dica ocupa a linha inteira e só existe quando há o que corrigir. */
.ag-sit-dica { grid-column: 1 / -1; font-size: 12px; line-height: 1.5; color: var(--texto-suave); }
.ag-sit-erro { font-size: 13px; color: var(--vermelho); }

/* ===================================================================
   FERRAMENTAS DO AGENTE
   Agrupadas por consequência — ler ou gravar — e dispostas como uma
   lista de definições, que é o que elas são.
   =================================================================== */
.ag-ferr-grupo + .ag-ferr-grupo { margin-top: 22px; }
.ag-ferr-cab { display: flex; align-items: baseline; gap: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--border-forte); }
.ag-ferr-cab h3 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto); }
.ag-ferr-cont { font-size: 11px; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.ag-ferr-nota { margin-left: auto; font-size: 12px; color: var(--texto-suave); }
/* O grupo que grava se distingue por uma régua âmbar, não por um fundo
   colorido: a diferença fica clara sem transformar metade da tela em aviso. */
.ag-ferr-grupo-escrita .ag-ferr-cab { border-bottom-color: #f59e0b; }
.ag-ferr-grupo-escrita .ag-ferr-nota { color: #b45309; font-weight: 600; }

.ag-ferr-lista { margin: 0; }
.ag-ferr-linha { display: grid; grid-template-columns: 190px 1fr; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ag-ferr-linha:last-child { border-bottom: 0; }
.ag-ferr-linha dt { margin: 0; }
.ag-ferr-linha dt code { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--texto); }
.ag-ferr-linha dd { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--texto-suave); }

@media (max-width: 620px) {
  .ag-ferr-linha { grid-template-columns: 1fr; gap: 3px; }
  .ag-ferr-nota { flex-basis: 100%; margin-left: 0; }
}

/* ===================================================================
   CONVERSAS DO AGENTE
   Lista de contatos à esquerda, thread + log à direita. Em telas
   estreitas vira uma coluna só, com a lista limitada em altura.
   =================================================================== */
.conv-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.conv-layout { display: grid; grid-template-columns: 270px 1fr; gap: 16px; align-items: start; }

.conv-lista { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden auto; max-height: 62vh; background: var(--surface-2); }
.conv-item { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); background: transparent; cursor: pointer; font: inherit; color: inherit; }
.conv-item:last-child { border-bottom: 0; }
.conv-item:hover { background: var(--surface); }
.conv-item-ativo { background: var(--accent-suave); box-shadow: inset 3px 0 0 var(--accent); }
.conv-item-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.conv-item-nome { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item-hora { color: var(--texto-fraco); font-size: 11px; flex-shrink: 0; }
.conv-item-previa { color: var(--texto-suave); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item-meta { margin-top: 6px; display: flex; gap: 5px; flex-wrap: wrap; }

.conv-painel { border: 1px solid var(--border); border-radius: var(--r-md); min-height: 320px; display: flex; flex-direction: column; }
.conv-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.conv-cab-nome { font-weight: 600; font-size: 14.5px; }
.conv-cab-sub { color: var(--texto-suave); font-size: 12px; margin-top: 2px; }
.conv-cab-acoes { display: flex; align-items: center; gap: 12px; }

.conv-tabs { display: inline-flex; border: 1px solid var(--border-forte); border-radius: var(--r-sm); overflow: hidden; }
.conv-tab { border: 0; background: var(--surface); padding: 6px 14px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--texto-suave); }
.conv-tab + .conv-tab { border-left: 1px solid var(--border-forte); }
.conv-tab-ativa { background: var(--accent); color: #fff; font-weight: 600; }

.conv-thread { max-height: 52vh; padding: 14px; }
.conv-hora { font-size: 10.5px; opacity: .7; margin-top: 5px; }
.conv-log { max-height: 52vh; overflow: auto; }
.conv-log .tabela td { font-size: 12.5px; vertical-align: top; }
.conv-log .linha-erro { background: var(--vermelho-bg); }
.conv-nenhum { color: var(--texto-suave); font-size: 13px; padding: 28px 16px; text-align: center; }

@media (max-width: 860px) {
  .conv-layout { grid-template-columns: 1fr; }
  .conv-lista { max-height: 32vh; }
  .conv-cab { align-items: flex-start; }
}

/* ===================================================================
   PERMISSOES POR AREA (tela de Usuarios)
   Uma linha por area, com um controle segmentado de tres estados.
   =================================================================== */
.perm-bloco { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.perm-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.perm-cab h3 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto); }
.perm-nota { font-size: 12px; color: var(--texto-suave); font-style: italic; }

.perm-matriz { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.perm-matriz-off { opacity: .5; }
.perm-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.perm-linha:last-child { border-bottom: 0; }
.perm-nome { font-size: 13px; font-weight: 600; color: var(--texto); }
.perm-abas { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; }

/* A matriz usa o seletor padrao (.sel/.sel-item); aqui so o alinhamento. */
.perm-opcoes { flex-shrink: 0; }

/* Resumo na tabela */
.perm-coluna { max-width: 320px; }
.perm-tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; margin: 1px 2px 1px 0; }
.perm-ver { background: var(--accent-suave); color: var(--accent-escuro); }
.perm-editar { background: var(--verde-bg); color: var(--verde); }
.perm-tudo { font-size: 12px; color: var(--verde); font-weight: 600; }
.perm-nenhuma { font-size: 12px; color: var(--texto-fraco); font-style: italic; }
.perm-rodape { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: var(--texto-suave); }

/* Editor aberto abaixo da linha do usuario */
.linha-edicao > td { background: var(--surface-2); padding: 0 !important; }
.perm-editor { padding: 16px 18px; }
.perm-acoes { display: flex; gap: 10px; margin-top: 14px; }

@media (max-width: 720px) {
  .perm-linha { flex-direction: column; align-items: stretch; gap: 8px; }
  .perm-opcoes { align-self: flex-start; }
}

/* ===================================================================
   MODO SOMENTE LEITURA
   Aplicado quando a area do usuario esta em nivel "ver". O servidor ja
   recusaria a gravacao; esconder o botao evita a armadilha de clicar
   num controle que so vai falhar depois.
   =================================================================== */
.aviso-somente-ver { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; font-size: 12.5px; padding: 9px 14px; border-radius: var(--r-sm); margin-bottom: 16px; }
main.somente-ver .btn-primario,
main.somente-ver .btn-perigo,
main.somente-ver .btn-texto-perigo,
main.somente-ver button[type="submit"],
main.somente-ver .col-acao { display: none !important; }
main.somente-ver .pagina.ativa form input,
main.somente-ver .pagina.ativa form select,
main.somente-ver .pagina.ativa form textarea { pointer-events: none; background: var(--surface-2); color: var(--texto-fraco); }

/* ===================================================================
   USO DAS APIs (aba Configurações)
   =================================================================== */
.uso-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.uso-topo h2 { white-space: nowrap; }
.uso-periodo { flex: 0 0 auto; width: auto; min-width: 160px; font: inherit; font-size: 12.5px; padding: 6px 10px; border: 1px solid var(--border-forte); border-radius: var(--r-sm); background: var(--surface); color: var(--texto); }
.uso-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.uso-bloco { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; background: var(--surface-2); }
.uso-rotulo { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-fraco); }
.uso-valor { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.uso-nota { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; line-height: 1.4; }
.uso-sub { margin-top: 34px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto); margin-bottom: 10px; }
.uso-tabela { margin-top: 14px; margin-bottom: 4px; }
.uso-tabela .dir { text-align: right; font-variant-numeric: tabular-nums; }
.uso-modelo { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--texto-suave); }
.uso-vazio { color: var(--texto-fraco); }
.uso-erro { font-size: 13px; color: var(--texto-suave); padding: 14px 0; }
.uso-limites { margin-top: 18px; padding: 10px 14px; background: var(--surface-2); border-left: 3px solid var(--border-forte); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 12px; color: var(--texto-suave); line-height: 1.55; }
.uso-limites ul { margin: 6px 0 0; padding-left: 18px; }

/* Variante SOLTA: para grupos que não são uma escolha única — as
   sugestões do chat são atalhos independentes, e emoldurá-las numa
   trilha sugeriria que só uma pode valer por vez. Mesmo item, sem a
   moldura em volta. */
.sel-solto { border: 0; background: transparent; padding: 0; gap: 7px; }
.sel-solto .sel-item { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; }
.bi .sel-solto .sel-item { border-color: var(--rule); background: var(--white); }

/* ---------- Log de atividades ---------- */
.tabela-log { min-width: 980px; }
.tabela-log .log-quando { white-space: nowrap; color: var(--texto-suave); font-size: 13px; }
.tabela-log .log-acao { min-width: 320px; }
.tabela-log .log-ip { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: var(--texto-fraco); white-space: nowrap; }
.log-paginacao { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.log-contagem, .log-pagina { font-size: 13px; color: var(--texto-suave); }
.log-pagina { align-self: center; padding: 0 6px; }
.log-detalhe { padding: 4px 2px; }
.log-detalhe-meta { font-size: 12.5px; color: var(--texto-suave); margin-bottom: 8px; }
.log-detalhe-meta code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; }
.log-json { margin: 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; max-height: 320px; overflow: auto; }
.log-sem-detalhe { font-size: 13px; color: var(--texto-fraco); }

/* Prévia do acesso da função escolhida (tela de usuários) */
.perm-previa { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 22px; }

/* Aviso de nova versão publicada (ver js/versao.js) */
.aviso-versao { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 90; max-width: calc(100% - 32px); background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; font: inherit; font-size: 13px; padding: 10px 16px; border-radius: var(--r-md); box-shadow: var(--sombra-lg); cursor: pointer; text-align: center; }
.aviso-versao:hover { background: #fef3c7; }