/* ═══════════════════════════════════════════════════════════════════
   SMART.CSS — Design System do AdvSmart (Projeto Mobile · Bloco M1)
   ───────────────────────────────────────────────────────────────────
   REGRAS DA CASA:
   1. Consome APENAS as variáveis do tema (--gold, --surface, --text…)
      → herda automaticamente a personalização de cada escritório.
   2. Não redefine componentes existentes (.btn base, .card base):
      apenas ESTENDE com variantes e cria os que faltavam.
   3. O skin modern-light (com !important) continua soberano.
   4. A partir do M1: toda tela nova/editada usa estas classes.
      Guia vivo: /app/_guia/ (admin).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --touch: 44px;                              /* alvo mínimo de toque */
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px;
}

/* ── LAYOUT ─────────────────────────────────────────────────────── */
.sm-wrap        { max-width: 1040px; margin: 0 auto; }
.sm-wrap-narrow { max-width: 720px;  margin: 0 auto; }

.stack   > * + * { margin-top: var(--sp-4); }
.stack-2 > * + * { margin-top: var(--sp-2); }
.stack-5 > * + * { margin-top: var(--sp-5); }

.row      { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.row-end  { margin-left: auto; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: var(--sp-3); align-items: end; }

.hide-mobile { }
.only-mobile { display: none; }
@media (max-width: 900px) {
  .hide-mobile { display: none !important; }
  .only-mobile { display: initial; }
}

/* ── CABEÇALHO DE PÁGINA ────────────────────────────────────────── */
.page-head       { display: flex; align-items: center; gap: var(--sp-3);
                   flex-wrap: wrap; margin-bottom: var(--sp-1); }
.page-head h1    { font-size: 22px; margin: 0; }
.page-head h1 i  { color: var(--gold); margin-right: var(--sp-2); }
.page-sub        { opacity: .75; font-size: 13.5px; margin: 0 0 var(--sp-4); }
.page-back       { margin-left: auto; font-size: 12.5px; color: var(--gold);
                   text-decoration: none; font-weight: 700; }

/* ── CARTÕES ────────────────────────────────────────────────────── */
.sm-card      { background: var(--surface); border: 1px solid var(--border2);
                border-radius: var(--r-lg); }
.sm-card-pad  { padding: var(--sp-4) 18px; }
.sm-card-gold { border-color: var(--gold); }

/* ── BOTÕES (variantes novas; .btn base do tema permanece) ──────── */
.btn-ghost  { background: transparent; border: 1px solid var(--gold);
              color: var(--gold); border-radius: var(--r-md);
              padding: 10px 16px; font-weight: 700; cursor: pointer;
              font-size: 13px; text-decoration: none; display: inline-flex;
              align-items: center; gap: 6px; min-height: var(--touch); }
.btn-ghost:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); }

.btn-soft   { background: transparent; border: 1px solid var(--border2);
              color: var(--text); border-radius: var(--r-md);
              padding: 10px 16px; font-weight: 700; cursor: pointer;
              font-size: 13px; text-decoration: none; display: inline-flex;
              align-items: center; gap: 6px; min-height: var(--touch); }



.icon-btn   { background: transparent; border: none; color: inherit;
              cursor: pointer; font-size: 14px; padding: var(--sp-2);
              min-width: 40px; min-height: 40px; border-radius: var(--r-sm); }
.icon-btn:hover    { background: var(--surface2); }
.icon-btn-gold     { color: var(--gold); }
.icon-btn-danger   { color: var(--danger); }

/* ── ETIQUETAS ──────────────────────────────────────────────────── */
.chip        { display: inline-flex; align-items: center; gap: 4px;
               padding: 2px 10px; border-radius: 99px; font-size: 11.5px;
               font-weight: 800; border: 1px solid var(--border2);
               color: var(--muted); white-space: nowrap; }
.chip-gold   { background: color-mix(in srgb, var(--gold) 14%, transparent);
               color: var(--gold);
               border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.chip-ok     { background: var(--success-bg); color: var(--success-t);
               border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.chip-warn   { background: var(--warning-bg); color: var(--warning-t);
               border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.chip-danger { background: var(--danger-bg); color: var(--danger-t);
               border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

/* ── AVISOS ─────────────────────────────────────────────────────── */
.alert        { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
                font-weight: 600; margin-bottom: var(--sp-4);
                border: 1px solid var(--border2); font-size: 13.5px; }
.alert-ok     { background: var(--success-bg); color: var(--success-t);
                border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.alert-erro   { background: var(--danger-bg); color: var(--danger-t);
                border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.alert-info   { background: var(--info-bg); color: var(--info-t);
                border-color: color-mix(in srgb, var(--info) 35%, transparent); }

/* ── FORMULÁRIOS ────────────────────────────────────────────────── */
/* .field / label: ADOTADOS do tema existente (header) — não redefinir. */
.f-input {
                padding: 10px 12px; border: 1px solid var(--border2);
                border-radius: var(--r-sm); background: transparent;
                color: inherit; font-size: 14px; width: 100%;
                box-sizing: border-box; min-height: var(--touch);
                font-family: inherit; }
textarea.f-input { min-height: 88px; }
.f-input:focus {
                outline: 2px solid color-mix(in srgb, var(--gold) 55%, transparent);
                outline-offset: 1px; border-color: var(--gold); }
.f-hint       { font-size: 11px; color: var(--muted); }
.f-span       { grid-column: 1 / -1; }

/* ── VAZIO ──────────────────────────────────────────────────────── */
.empty-state   { padding: 26px; text-align: center; opacity: .6; font-size: 13.5px; }

/* ── TABELAS (base; virar cards no mobile é o Bloco M3) ─────────── */
.sm-table            { width: 100%; border-collapse: collapse; font-size: 13px; }
.sm-table thead tr   { text-align: left; border-bottom: 2px solid var(--gold); }
.sm-table th         { padding: 11px 12px; }
.sm-table td         { padding: 9px 12px; border-bottom: 1px solid var(--border2); }
.sm-table tbody tr:hover { background: var(--surface2); }
.sm-scroll           { overflow: auto; }

/* ── DETAILS/RESUMO (criar novo, filtros) ───────────────────────── */
.sm-details > summary { cursor: pointer; font-weight: 800; color: var(--gold);
                        font-size: 14px; list-style: none; min-height: var(--touch);
                        display: flex; align-items: center; }
.sm-details > summary::-webkit-details-marker { display: none; }
.sm-details[open] > summary { margin-bottom: var(--sp-3); }

/* ── ADOTADOS DO TEMA (usar direto; definidos no _header) ──────────
   .btn .btn-primary .btn-danger .btn-sm .field .badge .card .table-wrap
   ─────────────────────────────────────────────────────────────────── */

/* ── DIVISOR ────────────────────────────────────────────────────── */
.sm-note { font-size: 11.5px; opacity: .6; margin-top: var(--sp-3); }

/* ── UTILITÁRIOS DE MIGRAÇÃO ────────────────────────────────────── */
.grow     { flex: 1; min-width: 200px; }
.wide-680 { min-width: 680px; }
.wide-720 { min-width: 720px; }
.hi-gold  { background: color-mix(in srgb, var(--gold) 6%, transparent); }
.link-strong { font-weight: 700; color: inherit; text-decoration: none; }
.td-sub  { font-size: 12px; color: var(--muted); }
.ta-r    { text-align: right; }
.list-row { display: flex; align-items: center; gap: 10px;
            padding: 10px 14px; border-bottom: 1px solid var(--border2); }
.ord     { font-weight: 800; color: var(--gold); min-width: 26px; }
.nowrap  { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════
   BLOCO M2 — NAVEGAÇÃO DE APP (mobile ≤900px; desktop intocado)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Aposenta o remendo da busca na topbar: some a barra, topbar volta ao normal */
  #busca-global-wrap { display: none !important; }
  .topbar { height: var(--header-h) !important; padding-bottom: 0 !important; }

  /* Conteúdo respira acima da tab bar */
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

}

/* ── Bottom Tab Bar ─────────────────────────────────────────────── */
.tabbar {
  display: none;                       /* só aparece ≤900px (regra acima) */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: var(--surface);
  border-top: 1px solid var(--border2);
  padding: 6px max(8px, env(safe-area-inset-left))
           max(10px, env(safe-area-inset-bottom))
           max(8px, env(safe-area-inset-right));
  justify-content: space-around; align-items: stretch;
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
}
.tabbar a, .tabbar button {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px;
  min-height: 52px; max-width: 96px;
  background: none; border: none; cursor: pointer;
  color: var(--muted); text-decoration: none;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  border-radius: var(--r-md);
}
.tabbar i { font-size: 19px; }
.tabbar .tb-active { color: var(--gold); }
.tabbar .tb-active i { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 45%, transparent)); }
.tabbar a:active, .tabbar button:active { background: var(--surface2); }

/* ── Busca em tela cheia ────────────────────────────────────────── */
.search-ov {
  position: fixed; inset: 0; z-index: 1300;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(6px);
  display: none; flex-direction: column;
  padding: max(14px, env(safe-area-inset-top)) 16px 16px;
}
.search-ov.open { display: flex; }
.search-ov-top { display: flex; gap: 10px; align-items: center; }
.search-ov-inp {
  flex: 1; font-size: 17px; padding: 14px 16px;
  border: 2px solid var(--gold); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); outline: none;
  min-height: 52px;
}
.search-ov-close {
  min-width: 48px; min-height: 48px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border2);
  color: var(--text); font-size: 18px; cursor: pointer;
}
.search-ov-hint { margin-top: 14px; font-size: 12.5px; color: var(--muted); line-height: 1.8; }
.search-ov-hint b { color: var(--text); }

/* Liga a tab bar no mobile — POR ÚLTIMO no arquivo (vence a base display:none) */
@media (max-width: 900px) {
  .tabbar { display: flex; }
}

/* [MOB-FIX-FLEX] Caixas "icone + texto + acao" numa linha so.
   No desktop cabe; no celular a soma das larguras fixas (icone, botao, X)
   estoura a tela: o texto e espremido a ~0 e sai 1 palavra por linha, e o
   botao vaza pra fora. Aqui a linha vira coluna a partir de 900px, que e o
   mesmo breakpoint da tabbar. Desktop fica intocado. */
@media (max-width: 900px) {
  .mob-wrap { flex-wrap: wrap !important; align-items: flex-start !important; }
  .mob-wrap > .mob-txt { flex: 1 1 100% !important; min-width: 0 !important; }
  .mob-wrap > .mob-acao { margin-left: 0 !important; }
}

/* Botões flutuantes (＋ ações e ? assistente) sobem acima da tab bar */
@media (max-width: 900px) {
  #fab-wrap { bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; }
  #sai-btn  { bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; }
  #sai-box  { bottom: calc(152px + env(safe-area-inset-bottom, 0px)) !important; }
  #acc-btn-voz { bottom: calc(152px + env(safe-area-inset-bottom, 0px)) !important; }
  .mobile-search-btn { display: none !important; }  /* lupa legada: a tab bar assumiu */
  .mobile-menu-btn   { display: none !important; }  /* hambúrguer flutuante legado: idem */
}

/* ═══════════════════════════════════════════════════════════════════
   BLOCO M3 — TABELAS → CARDS (mobile ≤900px; desktop intocado)
   Uso: <table class="... table-cards"> + data-label="Coluna" nos <td>
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .table-cards { min-width: 0 !important; }
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody { display: block; }
  .table-cards tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: var(--r-lg);
    margin: 0 0 10px;
    padding: 6px 2px;
  }
  .table-cards td {
    display: flex; gap: 10px; align-items: baseline;
    padding: 7px 12px; border: none !important;
    font-size: 13px; text-align: left !important; white-space: normal;
  }
  .table-cards td::before {
    content: attr(data-label);
    flex: 0 0 92px; max-width: 92px;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted);
  }
  .table-cards td[data-label=""]::before { display: none; }
  .table-cards td:first-child { font-weight: 700; }
  .table-cards td.td-actions {
    justify-content: flex-end; gap: 8px;
    border-top: 1px dashed var(--border2) !important;
    margin-top: 4px; padding-top: 10px;
  }
  .table-cards td.td-actions::before { display: none; }
  .table-cards tbody tr:hover { background: var(--surface); }
  .table-cards .empty-state { display: block; }
}

/* ── Gaveta aberta: barra e flutuantes se recolhem (foco no menu) ── */
@media (max-width: 900px) {
  .tabbar, #fab-wrap, #sai-btn { transition: transform .25s ease, opacity .25s ease; }
  body:has(.sidebar.open) .tabbar { transform: translateY(120%); }
  body:has(.sidebar.open) #fab-wrap,
  body:has(.sidebar.open) #sai-btn { opacity: 0; pointer-events: none; }

  /* Ações dentro dos cards: compactas, lado a lado (anula o full-width legado) */
  .table-cards .td-actions .actions { display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; width: 100%; }
  .table-cards .td-actions .btn,
  .table-cards .td-actions a,
  .table-cards .td-actions button,
  .table-cards .td-actions form {
    width: auto !important; flex: 0 1 auto !important;
    display: inline-flex !important; margin: 0 !important;
  }
}

/* ── Gaveta: bloco ÚNICO com deslize liso ──────────────────────────
   Curas de raiz: 100dvh (altura REAL no Chrome Android — 100vh fica
   atrás da barra de URL e escondia o Sair) + display:block (anula o
   flex herdado da base). Body travado = dedo comanda só a gaveta. */
@media (max-width: 900px) {
  .sidebar {
    display: block !important;
    top: 0 !important; bottom: auto !important;
    height: 100vh !important;   /* fallback */
    height: 100dvh !important;  /* altura visível de verdade */
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar .sidebar-footer {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  body:has(.sidebar.open) { overflow: hidden; }
}

/* ── Anti-estouro lateral (telas com filtros em fileira) ────────── */
@media (max-width: 900px) {
  select, input[type="text"], input[type="search"],
  input[type="date"], input[type="email"] { max-width: 100%; min-width: 0; }

  .pub-busca { flex-wrap: wrap; }
  .pub-busca input[type="text"] { flex: 1 1 100%; }
  .pub-busca select { flex: 1 1 calc(50% - 4px); }
  .pub-busca button { flex: 1 1 calc(50% - 4px); }

  .pub-tabs { -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
}

/* ═══════════════════════════════════════════════════════════════════
   BLOCO M5 — FORMULÁRIOS DE BOLSO (mobile ≤900px; desktop intocado)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* 16px mata o zoom automático do iOS; 48px = dedo confortável */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], input[type="time"],
  input[type="datetime-local"], input[type="search"], input[type="tel"],
  input[type="url"], select, textarea {
    font-size: 16px !important;
    min-height: 48px;
  }
  textarea { min-height: 96px; }

  /* Foco sempre visível no toque */
  input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--gold) 60%, transparent);
    outline-offset: 1px;
  }

  /* Botão Salvar grudado à vista nos formulários longos */
  .sm-sticky-save {
    position: sticky;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    box-shadow: 0 6px 22px rgba(0,0,0,.35);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   BLOCO M7 — MODO FÓRUM 🏛️ (painel de 1 toque; só celular)
   ═══════════════════════════════════════════════════════════════════ */
.mf-panel { display: none; }
.mf-drop { display: none; }
.mf-toast { display: none; }
@media (max-width: 900px) {
  .mf-panel {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 4px 0 16px;
  }
  .mf-btn {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 5px;
    min-height: 64px; padding: 8px 4px;
    background: var(--surface); border: 1px solid var(--border2);
    border-radius: var(--r-lg); cursor: pointer;
    color: var(--text); text-decoration: none;
    font-size: 10px; font-weight: 800; letter-spacing: .02em;
    text-align: center;
  }
  .mf-btn i { font-size: 19px; color: var(--gold); }
  .mf-btn:active { background: var(--surface2); transform: scale(.97); }
  .mf-btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }

  .mf-drop {
    display: none;
    background: var(--surface); border: 1px solid var(--gold);
    border-radius: var(--r-lg); padding: 12px 14px;
    margin: -8px 0 16px; font-size: 13px;
  }
  .mf-drop.open { display: block; }
  .mf-drop textarea {
    width: 100%; box-sizing: border-box; margin-bottom: 8px;
    border: 1px solid var(--border2); border-radius: var(--r-sm);
    background: transparent; color: inherit; padding: 10px;
  }
  .mf-toast {
    display: block;
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(150px + env(safe-area-inset-bottom, 0px));
    background: var(--gold); color: #07080D;
    padding: 10px 22px; border-radius: 99px;
    font-weight: 800; font-size: 13px; z-index: 1400;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  .mf-toast.show { opacity: 1; }
}


/* ══ R3 (20/07): deslize lateral assumido e elegante ═════════════════
   JS do _footer marca .tw-slide em qualquer bloco que realmente
   desliza no celular; aqui fica o visual: dica + sombra na borda. */
@media (max-width: 900px) {
  .tw-slide { position: relative; scrollbar-width: thin; }
  .tw-slide::before {
    content: "\2194  deslize";
    position: sticky; left: 0; top: 0; display: block; width: max-content;
    font-size: 10px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
    background: var(--surface); border: 1px solid var(--border2);
    border-radius: 99px; padding: 2px 9px; margin: 4px 0 6px 4px; opacity:.9;
  }
  .tw-slide::-webkit-scrollbar { height: 5px; }
  .tw-slide::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }
  /* quadro cujo conteúdo já virou cards não precisa rolar (mata resíduos de 1-10px) */
  .table-wrap:has(> .table-cards) { overflow-x: hidden !important; }
}

/* ══ Topo compacto no celular (20/07) ═══════════════════════════════
   Some o hambúrguer (duplicado do botão Menu da barra inferior) e o
   "Sistema ›"; topo mais baixo e menos respiro até o conteúdo. */
@media (max-width: 768px) {
  :root { --header-h: 48px; }
  .topbar { padding: 0 12px; }
  .topbar-hamburger { display: none !important; }
  .topbar-breadcrumb .crumb,
  .topbar-breadcrumb .sep { display: none !important; }
  .topbar-breadcrumb .current {
    font-size: 15px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .page-content { padding: 10px 12px 18px; }
  .page-header { margin-bottom: 12px; }
}

/* ===== #5v3 menu-status-empilhado (26/07/2026): menu de status sempre em coluna, mesmo no modo card ===== */
.status-drop form { display: block !important; }
.status-drop form > button { width: 100% !important; }


/* ===== #menu-app (26/07/2026): no celular, .collapsed nunca pode zerar a gaveta ===== */
@media (max-width: 900px) {
  .sidebar.collapsed { width: 260px !important; border-right: 1px solid var(--border) !important; }
}


/* ===== #busca-topo (26/07/2026): busca em tela cheia acima da faixa do modo demo ===== */
.search-ov { z-index: 100001 !important; }


/* ===== #9 colunas (26/07/2026): Grau e Observações somem quando a tela nao comporta as 9 colunas (gatilho medido: miolo=904px a 1214px de janela) ===== */
@media (max-width: 1380px) {
  .tabela-processos th:nth-child(7), .tabela-processos td:nth-child(7),
  .tabela-processos th:nth-child(8), .tabela-processos td:nth-child(8) { display: none !important; }
}


/* ===== #10 tema-escuro-publicacoes (26/07/2026): cores legíveis no tema escuro (só quando body nao tem .modern-light) ===== */
body:not(.modern-light) .pub-tab.active { color: #E9C46A; }
body:not(.modern-light) .pub-tab .badge { background: rgba(255,255,255,.12); color: var(--text-secondary); }
body:not(.modern-light) .pub-tab.active .badge { background: #C8A24A; color: #0A1F3D; }
body:not(.modern-light) .pub-item:hover { background: rgba(200,162,74,.08); }
body:not(.modern-light) .pub-item.orfa { background: rgba(217,119,6,.14); }
body:not(.modern-light) .pub-item.orfa:hover { background: rgba(217,119,6,.22); }


/* ===== #11-13 celular (26/07/2026): 400px — filtros empilham, rodape respira sob os flutuantes ===== */
@media (max-width: 520px) {
  .filtros-contas .search-select, .filtros-contas .search-input, .filtros-contas > div { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; }
  .filtros-contas input[type=date] { width: 100% !important; }
}
@media (max-width: 768px) {
  body { padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important; }
}


/* ===== #14 smart-tabs (26/07/2026): componente unico de abas (visual de Publicacoes, claro+escuro) ===== */
.smart-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
.smart-tab { padding: 10px 14px; font-size: 13px; color: var(--text-secondary); text-decoration: none; border: 0; border-bottom: 2px solid transparent; white-space: nowrap; transition: all .2s; background: none; cursor: pointer; font-family: inherit; }
.smart-tab:hover { color: var(--text-primary); }
.smart-tab.active { color: #0A1F3D; border-bottom-color: #C8A24A; font-weight: 600; }
.smart-tab .badge { display: inline-block; background: #f0f0f0; color: #374151; padding: 1px 8px; border-radius: 12px; font-size: 11px; margin-left: 4px; font-weight: 500; }
.smart-tab.active .badge { background: #C8A24A; color: #0A1F3D; }
body:not(.modern-light) .smart-tab.active { color: #E9C46A; }
body:not(.modern-light) .smart-tab .badge { background: rgba(255,255,255,.12); color: var(--text-secondary); }
body:not(.modern-light) .smart-tab.active .badge { background: #C8A24A; color: #0A1F3D; }
@media (max-width: 768px) { .smart-tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 2px; } .smart-tab { flex: 1 1 auto; text-align: center; } }

/* [DATA-TABLE-FIX v2] .data-table (6 telas) + card Processos deste cliente compacto */
.data-table{border-collapse:collapse}
.data-table th{padding:11px 14px;text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap;border-bottom:1px solid var(--border)}
.data-table td{padding:11px 14px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
.data-table tbody tr:hover td{background:var(--surface2)}
.data-table tbody tr:last-child td{border-bottom:0}
/* card da ficha do cliente: colunas coladas ao conteudo, sem esticar pela tela */
#processos-cliente .data-table{width:auto !important;min-width:0}
#processos-cliente .data-table th,
#processos-cliente .data-table td{white-space:nowrap;padding-right:44px}
#processos-cliente .data-table th:last-child,
#processos-cliente .data-table td:last-child{padding-right:14px}
/* [/DATA-TABLE-FIX] */

/* ── [TOUR-FAIXA] faixa do botão "Tour guiado" ─────────────────────────
   Estava repetida inline em 7 telas; centralizada aqui em 11/08/2026 para
   as 28 telas novas usarem só a classe. Valores idênticos aos originais. */
.tour-faixa { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:13px 16px; margin:0 0 18px; }
.tour-faixa-btn { display:inline-flex; align-items:center; gap:8px; background:#534AB7; color:#fff; border:0; border-radius:8px; padding:10px 18px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition:all .15s; font-family:inherit; }
.tour-faixa-btn:hover { background:#5F55CC; transform:translateY(-1px); box-shadow:0 3px 10px rgba(83,74,183,.32); }
.tour-faixa-txt { font-size:12.5px; color:var(--text-secondary); line-height:1.5; }
@media (max-width:640px){ .tour-faixa-btn{ width:100%; justify-content:center; } }