/* ============================================================
   REDESIGN-UX-v1 — CRM Forno & Mesa
   Claro por padrão · marca como acento · mobile-first (390px) ·
   mono APENAS em números/códigos · sidebar fixa + topbar branca.
   ============================================================ */

/* ---------- tokens: MODO CLARO (padrão) ---------- */
:root{
  --fundo:#F7F5F2;            /* fundo do app (neutro quente claro) */
  --superficie:#FFFFFF;       /* cards e tabelas */
  --superficie-2:#FBFAF8;     /* thead sticky, zebra */
  --borda:#E7E2DC;
  --texto:#1F1A17;
  --texto-2:#6B615A;
  --marca:#7A4A21;            /* marrom FM — sidebar, botão primário */
  --marca-escura:#5E3818;
  --marca-suave:rgba(122,74,33,.08);
  --ouro:#CBA14A;             /* destaque pontual (item ativo, realces) */
  --ouro-suave:rgba(203,161,74,.16);
  --ok:#1E7F4F;        --ok-suave:rgba(30,127,79,.10);
  --atencao:#B25E09;   --atencao-suave:rgba(178,94,9,.10);
  --urgente:#C0362C;   --urgente-suave:rgba(192,54,44,.09);
  --neutro:#8A8378;    --neutro-suave:rgba(138,131,120,.13);
  --sombra:0 1px 3px rgba(31,26,23,.08);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Inter",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:8px; --r-card:12px;
  --sidebar-l:240px; --sidebar-icones:64px; --conteudo-max:1200px;
}

/* ---------- tokens: MODO ESCURO (opção secundária) ---------- */
[data-tema="escuro"]{
  --fundo:#1C1713;
  --superficie:#28211B;
  --superficie-2:#2F2721;
  --borda:#3E352C;
  --texto:#F1EBE3;
  --texto-2:#A89E92;
  --marca:#5E3818;
  --marca-escura:#4A2C12;
  --marca-suave:rgba(203,161,74,.10);
  --ouro:#D9B25F;
  --ouro-suave:rgba(217,178,95,.14);
  --ok:#5CB585;        --ok-suave:rgba(92,181,133,.12);
  --atencao:#E29A4C;   --atencao-suave:rgba(226,154,76,.12);
  --urgente:#E06B5F;   --urgente-suave:rgba(224,107,95,.12);
  --neutro:#9A9188;    --neutro-suave:rgba(154,145,136,.14);
  --sombra:0 1px 3px rgba(0,0,0,.35);
}

/* ---------- base ---------- */
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--fundo); color:var(--texto);
      font-family:var(--sans); font-size:14.5px; line-height:1.5;
      -webkit-font-smoothing:antialiased }
:focus-visible{ outline:2px solid var(--marca); outline-offset:2px }
[data-tema="escuro"] :focus-visible{ outline-color:var(--ouro) }
.oculto{ display:none !important }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums }

/* ============================================================
   LAYOUT GLOBAL — sidebar fixa + topbar + conteúdo
   (mobile-first: base é a versão 390px; media queries expandem)
   ============================================================ */

/* topbar */
.topbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:10px;
         background:var(--superficie); border-bottom:1px solid var(--borda);
         padding:10px 14px; min-height:54px }
.topbar .titulo{ font-size:17px; font-weight:700; margin:0; letter-spacing:-.01em }
.topbar .descricao{ display:none }
.topbar .direita{ margin-left:auto; display:flex; align-items:center; gap:8px }
/* busca global (bloco B) */
.busca-caixa{ position:relative; display:none; min-width:250px }
.busca-caixa input{ padding:7px 12px; font-size:13px; border-radius:999px;
  background:var(--fundo) }
.busca-resultados{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60;
  background:var(--superficie); border:1px solid var(--borda); border-radius:var(--r-card);
  box-shadow:0 8px 24px rgba(31,26,23,.16); max-height:440px; overflow-y:auto; padding:6px }
.busca-grupo{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--texto-2); padding:8px 10px 4px }
.busca-item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:0; border-radius:var(--r); padding:9px 10px; cursor:pointer;
  font-family:var(--sans); font-size:13.5px; color:var(--texto) }
.busca-item .sub{ display:block; font-size:11.5px; color:var(--texto-2) }
.busca-item .badge{ margin-left:auto }
.busca-item:hover, .busca-item.sel{ background:var(--marca-suave) }
.busca-rodape{ font-size:11px; color:var(--texto-2); text-align:right; padding:6px 10px 4px;
  font-family:var(--mono); font-variant-numeric:tabular-nums }
.busca-vazio{ padding:14px 10px; font-size:13px; color:var(--texto-2); text-align:center }
.busca-overlay{ position:fixed; inset:0; z-index:80; background:var(--fundo);
  display:flex; flex-direction:column; padding:12px }
.busca-overlay .topo{ display:flex; gap:8px; align-items:center; margin-bottom:8px }
.busca-overlay input{ flex:1 }
.busca-overlay .busca-resultados{ position:static; flex:1; margin-top:4px }
@media (min-width:1024px){ .busca-caixa{ display:block } .btn-lupa{ display:none } }

/* quick-add (bloco B) */
.qa-wrap{ position:relative }
.qa-menu{ position:absolute; top:calc(100% + 6px); right:0; z-index:60; min-width:210px;
  background:var(--superficie); border:1px solid var(--borda); border-radius:var(--r-card);
  box-shadow:0 8px 24px rgba(31,26,23,.16); padding:6px }
.qa-item{ display:block; width:100%; text-align:left; background:transparent; border:0;
  border-radius:var(--r); padding:10px 12px; cursor:pointer; font-family:var(--sans);
  font-size:13.5px; color:var(--texto); text-decoration:none }
.qa-item:hover{ background:var(--marca-suave) }
.qa-item.desabilitado{ opacity:.45; cursor:not-allowed }

/* modal padrão */
.modal-fundo{ position:fixed; inset:0; z-index:85; background:rgba(31,26,23,.45);
  display:flex; align-items:center; justify-content:center; padding:16px }
.modal-card{ width:100%; max-width:420px; background:var(--superficie);
  border:1px solid var(--borda); border-radius:var(--r-card); box-shadow:var(--sombra);
  padding:20px; max-height:92svh; overflow-y:auto }
.modal-card h3{ margin:0 0 4px; font-size:16px; font-weight:700 }
.btn-icone{ background:transparent; border:1px solid var(--borda); color:var(--texto-2);
  border-radius:var(--r); padding:7px 10px; cursor:pointer; font-size:14px; line-height:1;
  transition:border-color .15s, color .15s }
.btn-icone:hover{ color:var(--texto); border-color:var(--neutro) }
.btn-menu{ display:inline-flex }   /* hambúrguer (mobile) */

/* sidebar (desktop) / gaveta (mobile) */
.sidebar{ position:fixed; inset:0 auto 0 0; z-index:40; width:var(--sidebar-l);
          background:var(--marca); color:#fff; display:flex; flex-direction:column;
          transform:translateX(-100%); transition:transform .22s ease }
.sidebar.aberta{ transform:none; box-shadow:0 0 0 100vmax rgba(31,26,23,.45) }
.sidebar .logo{ display:flex; align-items:baseline; gap:8px; padding:18px 18px 14px;
  font-weight:800; font-size:16px; letter-spacing:.03em; color:#fff }
.sidebar .logo .amp{ color:var(--ouro); font-style:italic; font-weight:600 }
.sidebar nav{ flex:1; padding:6px 10px; overflow-y:auto }
.sidebar nav a{ display:flex; align-items:center; gap:11px; padding:10px 12px; margin:2px 0;
  border-radius:var(--r); color:rgba(255,255,255,.82); text-decoration:none; font-size:14px;
  font-weight:500; transition:background .15s, color .15s }
.sidebar nav a svg{ flex:0 0 auto; opacity:.85 }
.sidebar nav a:hover{ background:rgba(255,255,255,.08); color:#fff }
.sidebar nav a.ativo{ background:var(--marca-escura); color:#fff;
  box-shadow:inset 3px 0 0 var(--ouro) }
.sidebar nav a.ativo svg{ opacity:1 }
.sidebar .rodape-user{ border-top:1px solid rgba(255,255,255,.14); padding:12px 16px;
  font-size:12.5px; color:rgba(255,255,255,.82); display:flex; align-items:center; gap:10px }
.sidebar .rodape-user .quem-txt{ min-width:0 }
.sidebar .rodape-user .quem-txt div{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sidebar .rodape-user .papel-txt{ font-size:11px; opacity:.7; text-transform:capitalize }
.sidebar .rodape-user button{ margin-left:auto; background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.35); border-radius:var(--r); padding:5px 10px;
  font-size:12px; cursor:pointer }
.sidebar .rodape-user button:hover{ border-color:#fff }

/* barra inferior (mobile) */
.barra-inferior{ position:fixed; z-index:35; inset:auto 0 0 0; display:flex;
  background:var(--superficie); border-top:1px solid var(--borda);
  padding:4px 6px calc(4px + env(safe-area-inset-bottom)) }
.barra-inferior a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 2px; border-radius:var(--r); color:var(--texto-2); text-decoration:none;
  font-size:10.5px; font-weight:600 }
.barra-inferior a.ativo{ color:var(--marca) }
[data-tema="escuro"] .barra-inferior a.ativo{ color:var(--ouro) }

/* conteúdo */
.conteudo{ padding:16px 14px calc(84px + env(safe-area-inset-bottom));
           max-width:var(--conteudo-max); margin:0 auto }

/* desktop ≥1024: sidebar fixa aberta, sem hambúrguer/barra inferior */
@media (min-width:1024px){
  .sidebar{ transform:none; box-shadow:none }
  .btn-menu, .barra-inferior{ display:none }
  .pagina{ margin-left:var(--sidebar-l) }
  .topbar{ padding:12px 26px }
  .topbar .descricao{ display:block; color:var(--texto-2); font-size:13px; margin:1px 0 0 }
  .busca-global{ display:flex; min-width:220px }
  .conteudo{ padding:24px 26px 40px }
}
/* tablet 768–1023: sidebar só ícones */
@media (min-width:768px) and (max-width:1023.9px){
  .sidebar{ transform:none; width:var(--sidebar-icones); box-shadow:none }
  .sidebar .logo{ justify-content:center; padding:16px 6px }
  .sidebar .logo .rotulo-logo, .sidebar nav a .rotulo,
  .sidebar .rodape-user .quem-txt{ display:none }
  .sidebar nav a{ justify-content:center; padding:12px 8px }
  .sidebar .rodape-user{ justify-content:center; padding:12px 6px }
  .sidebar .rodape-user button{ margin:0 }
  .btn-menu, .barra-inferior{ display:none }
  .pagina{ margin-left:var(--sidebar-icones) }
  .conteudo{ padding:20px 22px 40px }
}

/* ============================================================
   COMPONENTES PADRÃO
   ============================================================ */

/* cabeçalho de página: título + descrição + ação primária */
.pagina-cab{ display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin:2px 0 16px }
.pagina-cab .t{ flex:1; min-width:220px }
.pagina-cab h2{ margin:0; font-size:19px; font-weight:700; letter-spacing:-.01em }
.pagina-cab p{ margin:3px 0 0; color:var(--texto-2); font-size:13.5px }
.pagina-cab .acao{ margin-left:auto }

/* cards */
.card{ background:var(--superficie); border:1px solid var(--borda);
       border-radius:var(--r-card); padding:16px; margin-bottom:14px; box-shadow:var(--sombra) }
.card h3{ margin:0 0 10px; font-size:14.5px; font-weight:700 }
.card p{ color:var(--texto-2); font-size:13.5px }
.card p b, .card p strong{ color:var(--texto) }

/* card de métrica */
.metricas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:0 0 14px }
.metrica{ background:var(--superficie); border:1px solid var(--borda); border-radius:var(--r-card);
          padding:14px 15px; box-shadow:var(--sombra); border-top:3px solid var(--m-ac,var(--borda)) }
.metrica .n{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:700;
             font-size:clamp(19px,3.4vw,26px); letter-spacing:-.01em; line-height:1.15 }
.metrica .rotulo{ font-size:12px; font-weight:600; color:var(--texto-2); margin-top:5px }
.metrica .contexto{ font-size:11.5px; color:var(--texto-2); opacity:.85; margin-top:2px }
.metrica.m-ok{ --m-ac:var(--ok) }        .metrica.m-ok .n{ color:var(--ok) }
.metrica.m-atencao{ --m-ac:var(--atencao) } .metrica.m-atencao .n{ color:var(--atencao) }
.metrica.m-urgente{ --m-ac:var(--urgente) } .metrica.m-urgente .n{ color:var(--urgente) }
.metrica.m-marca{ --m-ac:var(--ouro) }

/* tabela padrão */
.tabela-wrap{ background:var(--superficie); border:1px solid var(--borda);
              border-radius:var(--r-card); box-shadow:var(--sombra); overflow:auto;
              max-height:70vh; margin-bottom:14px }
table.padrao{ width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px }
table.padrao th{ position:sticky; top:0; z-index:2; background:var(--superficie-2);
  text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--texto-2); padding:10px 12px;
  border-bottom:1px solid var(--borda); white-space:nowrap }
table.padrao td{ padding:10px 12px; border-bottom:1px solid var(--borda); vertical-align:middle }
table.padrao tbody tr:nth-child(even) td{ background:color-mix(in srgb, var(--superficie-2) 55%, var(--superficie)) }
table.padrao tbody tr:hover td{ background:var(--marca-suave) }
table.padrao tbody tr:last-child td{ border-bottom:0 }
table.padrao tr.clicavel{ cursor:pointer }
table.padrao td.num, table.padrao th.num{ text-align:right; font-family:var(--mono);
  font-variant-numeric:tabular-nums }
table.padrao td .sub{ display:block; font-size:11.5px; color:var(--texto-2); margin-top:1px }

/* tabela → cards no celular (célula precisa de data-rotulo; .so-desktop some) */
@media (max-width:639.9px){
  table.padrao thead{ display:none }
  table.padrao, table.padrao tbody, table.padrao tr, table.padrao td{ display:block; width:100% }
  table.padrao tr{ border-bottom:8px solid var(--fundo); padding:6px 0 }
  table.padrao td{ border:0; padding:5px 14px; text-align:left !important }
  table.padrao td[data-rotulo]::before{ content:attr(data-rotulo);
    display:block; font-size:10.5px; font-weight:700; text-transform:uppercase;
    letter-spacing:.05em; color:var(--texto-2); margin-bottom:1px }
  table.padrao td.so-desktop{ display:none }
  table.padrao tbody tr:nth-child(even) td{ background:transparent }
}

/* chips de filtro */
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px }
.chip{ cursor:pointer; border:1px solid var(--borda); background:var(--superficie);
  color:var(--texto-2); font-size:12.5px; font-weight:600; padding:7px 14px;
  border-radius:999px; transition:all .15s }
.chip:hover{ border-color:var(--neutro); color:var(--texto) }
.chip[aria-pressed="true"]{ background:var(--marca); border-color:var(--marca); color:#fff }

/* badges de status (sempre com texto) */
.badge{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em;
        text-transform:uppercase; padding:3px 9px; border-radius:999px; white-space:nowrap }
.b-ativo, .b-efetivado, .b-ok{ background:var(--ok-suave); color:var(--ok) }
.b-pendente, .b-atencao, .b-staging, .b-revisado{ background:var(--atencao-suave); color:var(--atencao) }
.b-inativo, .b-neutro, .b-descartado, .b-construcao{ background:var(--neutro-suave); color:var(--neutro) }
.b-urgente, .b-erro{ background:var(--urgente-suave); color:var(--urgente) }
.b-marca{ background:var(--ouro-suave); color:var(--marca) }
[data-tema="escuro"] .b-marca{ color:var(--ouro) }

/* botões */
.botao{ display:inline-flex; align-items:center; gap:7px; background:var(--marca); color:#fff;
  border:1px solid var(--marca); border-radius:var(--r); padding:9px 16px; font-size:13.5px;
  font-weight:600; font-family:var(--sans); cursor:pointer; text-decoration:none;
  transition:filter .12s, transform .1s }
.botao:hover{ filter:brightness(1.12) }
.botao:active{ transform:scale(.98) }
.botao.secundario{ background:var(--superficie); color:var(--texto); border-color:var(--borda) }
.botao.secundario:hover{ border-color:var(--neutro); filter:none }
.botao.perigo{ background:var(--superficie); color:var(--urgente); border-color:var(--urgente) }
.botao.pequeno{ padding:6px 12px; font-size:12.5px }
.botao:disabled{ opacity:.45; cursor:not-allowed; transform:none; filter:none }

/* formulários */
label{ display:block; font-size:12.5px; font-weight:600; color:var(--texto); margin:12px 0 5px }
input[type=email], input[type=password], input[type=number], input[type=text], select{
  width:100%; padding:9px 11px; border:1px solid var(--borda); border-radius:var(--r);
  font-size:14px; font-family:var(--sans); color:var(--texto); background:var(--superficie);
  transition:border-color .15s, box-shadow .15s }
input:focus, select:focus{ outline:none; border-color:var(--marca);
  box-shadow:0 0 0 3px var(--marca-suave) }
.erro-campo{ color:var(--urgente); font-size:12px; margin-top:4px }
.dica-campo{ font-size:11.5px; color:var(--texto-2); margin-top:4px }
.dica-campo .num{ font-size:11px }

/* mensagens inline */
.msg{ margin-top:12px; font-size:13px; line-height:1.55; padding:10px 13px;
      border-radius:var(--r); display:none; white-space:pre-wrap }
.msg.erro { background:var(--urgente-suave); color:var(--urgente); border:1px solid var(--urgente); display:block }
.msg.ok   { background:var(--ok-suave); color:var(--ok); border:1px solid var(--ok); display:block }
.msg.aviso{ background:var(--atencao-suave); color:var(--atencao); border:1px solid var(--atencao); display:block }

/* toasts */
#toasts{ position:fixed; z-index:90; top:12px; right:12px; display:flex;
         flex-direction:column; gap:8px; max-width:min(360px, calc(100vw - 24px)) }
.toast{ background:var(--superficie); border:1px solid var(--borda); border-left:4px solid var(--neutro);
  border-radius:var(--r); box-shadow:0 4px 14px rgba(31,26,23,.16); padding:11px 14px;
  font-size:13px; animation:toast-in .22s ease }
.toast.t-ok{ border-left-color:var(--ok) } .toast.t-erro{ border-left-color:var(--urgente) }
.toast.t-aviso{ border-left-color:var(--atencao) }
@keyframes toast-in{ from{ opacity:0; transform:translateY(-6px) } }

/* skeleton */
.skeleton{ border-radius:var(--r); background:linear-gradient(90deg,
  var(--borda) 25%, var(--superficie-2) 50%, var(--borda) 75%);
  background-size:200% 100%; animation:brilho 1.1s infinite linear; min-height:16px }
@keyframes brilho{ from{ background-position:200% 0 } to{ background-position:-200% 0 } }

/* barra fixa de salvar */
.barra-salvar{ position:fixed; z-index:50; left:0; right:0;
  bottom:calc(56px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px; background:var(--superficie);
  border-top:1px solid var(--borda); box-shadow:0 -3px 12px rgba(31,26,23,.10);
  padding:10px 16px }
.barra-salvar .contagem{ font-size:13px; color:var(--texto-2) }
.barra-salvar .botao{ margin-left:auto }
@media (min-width:768px){ .barra-salvar{ bottom:0; left:var(--sidebar-icones) } }
@media (min-width:1024px){ .barra-salvar{ left:var(--sidebar-l) } }

/* empty state */
.vazio{ text-align:center; padding:34px 16px; color:var(--texto-2) }
.vazio .icone{ font-size:30px; opacity:.5 }
.vazio p{ margin:8px 0 12px; font-size:13.5px }

/* barras de progresso */
progress{ -webkit-appearance:none; appearance:none; width:100%; height:10px; border:0;
  margin-top:10px; border-radius:999px; background:var(--borda); overflow:hidden }
progress::-webkit-progress-bar{ background:transparent }
progress::-webkit-progress-value{ background:var(--marca); border-radius:999px;
  transition:width .4s ease }
progress::-moz-progress-bar{ background:var(--marca); border-radius:999px }
.track{ position:relative; display:flex; height:8px; border-radius:999px;
        background:var(--borda); overflow:hidden }
.fill{ height:100%; width:0; border-radius:999px; transition:width .8s cubic-bezier(.2,.85,.25,1) }
.fill--marca{ background:var(--marca) } .fill--ouro{ background:var(--ouro) }
.fill--ok{ background:var(--ok) } .fill--urgente{ background:var(--urgente) }
.passo{ font-size:12.5px; color:var(--texto-2); margin:8px 0 }

/* dropzone */
.upload{ border:1.5px dashed var(--marca); border-radius:var(--r-card); padding:24px 18px;
  text-align:center; background:var(--marca-suave); cursor:pointer;
  transition:background .15s, border-color .15s }
.upload:hover{ background:var(--ouro-suave) }
.upload strong{ color:var(--marca) }
[data-tema="escuro"] .upload strong{ color:var(--ouro) }
.upload p{ margin:5px 0; font-size:13px; color:var(--texto-2) }

/* abas locais (fontes de import, status de carteiras) */
.tabs-fontes{ display:flex; gap:6px; overflow-x:auto; margin:0 0 14px; scrollbar-width:none }
.tabs-fontes::-webkit-scrollbar{ display:none }
.tab{ flex:0 0 auto; cursor:pointer; border:1px solid var(--borda); background:var(--superficie);
  color:var(--texto-2); font-size:12.5px; font-weight:600; padding:7px 15px;
  border-radius:999px; transition:all .15s; white-space:nowrap }
.tab:hover{ color:var(--texto); border-color:var(--neutro) }
.tab[aria-selected="true"]{ color:#fff; background:var(--marca); border-color:var(--marca) }

/* preview de mensagem (WhatsApp) */
.preview-zap{ background:var(--superficie-2); border:1px solid var(--borda);
  border-radius:var(--r-card); padding:14px 16px; font-family:var(--mono); font-size:12.5px;
  line-height:1.65; color:var(--texto); white-space:pre-wrap; word-break:break-word;
  max-height:480px; overflow-y:auto; margin:10px 0 0 }
.preview-zap b{ color:var(--marca) }
[data-tema="escuro"] .preview-zap b{ color:var(--ouro) }
.preview-zap i{ color:var(--texto-2) }

/* login (tela própria, sem shell) */
.tela-login{ min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding:20px; background:var(--fundo) }
.login-card{ width:100%; max-width:380px; background:var(--superficie);
  border:1px solid var(--borda); border-radius:var(--r-card); box-shadow:var(--sombra);
  padding:28px 24px }
.login-card .logo{ text-align:center; font-weight:800; font-size:19px; letter-spacing:.03em;
  margin-bottom:4px }
.login-card .logo .amp{ color:var(--ouro); font-style:italic }
.login-card .sub{ text-align:center; color:var(--texto-2); font-size:12.5px; margin:0 0 12px }
.login-card .botao{ width:100%; justify-content:center; margin-top:16px }

/* ações de 1 toque (bloco A) */
.contato{ display:inline-flex; gap:6px; vertical-align:middle }
.btn-contato{ display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border:1px solid var(--borda); border-radius:var(--r);
  color:var(--texto-2); background:var(--superficie); cursor:pointer;
  transition:color .15s, border-color .15s }
a.btn-contato:hover{ color:var(--ok); border-color:var(--ok) }
a.btn-contato[data-acao="ligar"]:hover{ color:var(--marca); border-color:var(--marca) }
.btn-contato.desabilitado{ opacity:.35; cursor:not-allowed }

/* utilidades */
.hint-base{ font-size:11.5px; color:var(--texto-2); margin-top:4px; white-space:nowrap }
.hint-base .num{ font-size:11px }
td input[type=number]{ min-width:110px }
.grade{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:12px 0 }
.kpi{ background:var(--superficie-2); border:1px solid var(--borda); border-radius:var(--r);
      padding:12px 13px; border-top:3px solid var(--kpi-ac,var(--borda)) }
.kpi .n{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:700;
         font-size:clamp(18px,3.2vw,24px); line-height:1.15 }
.kpi .t{ font-size:11.5px; font-weight:600; color:var(--texto-2); margin-top:5px }
.kpi.kverde{ --kpi-ac:var(--ok) }     .kpi.kverde .n{ color:var(--ok) }
.kpi.kvermelho{ --kpi-ac:var(--urgente) } .kpi.kvermelho .n{ color:var(--urgente) }
.kpi.kambar{ --kpi-ac:var(--atencao) }   .kpi.kambar .n{ color:var(--atencao) }
.etiqueta{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:3px 9px; border-radius:999px }
.et-efetivado{ background:var(--ok-suave); color:var(--ok) }
.et-staging,.et-revisado{ background:var(--atencao-suave); color:var(--atencao) }
.et-descartado{ background:var(--neutro-suave); color:var(--neutro) }
.et-alerta{ background:var(--urgente-suave); color:var(--urgente) }
.selo{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--texto-2); background:var(--neutro-suave);
  padding:2px 8px; border-radius:999px }
.tag-construcao{ display:inline-block; margin-top:8px; font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--neutro);
  background:var(--neutro-suave); padding:3px 9px; border-radius:999px }
.rodape{ font-size:11.5px; color:var(--texto-2); text-align:center; margin:28px 0 18px }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
}