/* ═══════════════════════════════════════════════════════════════════════════
   Digital Tech · COMPONENTES
   Depende de tokens.css. Cada bloco daqui é uma PEÇA reaproveitável — é esta
   lista que vira componente de framework no dia em que houver um front:
   .dt-btn → <Botao>, .dt-campo → <Campo>, .dt-card → <Cartao>, e assim por diante.
   Regra: nenhum valor cravado. Tudo sai de var(--dt-*).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════ BASE ══════════════ */
.dt{
  font-family:var(--dt-fonte); font-size:var(--dt-t-base); line-height:1.65;
  color:var(--dt-texto); background:var(--dt-fundo); -webkit-font-smoothing:antialiased;
}
.dt h1,.dt h2,.dt h3,.dt-tit{
  font-family:var(--dt-fonte-tit); font-weight:800;
  letter-spacing:var(--dt-tit-tracking); line-height:1.05; color:var(--dt-texto);
}
.dt :focus-visible{outline:none; box-shadow:var(--dt-anel); border-radius:var(--dt-r-sm)}

/* grão: tira o aspecto chapado — o que mais denuncia interface gerada */
.dt-grao::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:var(--dt-grao);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══════════════ ASSINATURAS ══════════════
   As mecânicas que fazem reconhecer um produto Digital Tech sem ver o logo. */

/* 1 · RAIL DE ESTADO — barra vertical com a cor do estado.
   Sólida no claro, luminosa no escuro. Use --r para a cor. */
.dt-rail{position:relative;padding-left:15px}
.dt-rail::before{
  content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:2px;
  background:var(--r,var(--dt-vi));box-shadow:var(--dt-rail-luz) var(--r,var(--dt-vi));
}

/* 2 · RÓTULO MONO — separa DADO de RÓTULO sem gastar cor */
.dt-rot{
  font:500 var(--dt-t-xs)/1 var(--dt-fonte-mono);
  letter-spacing:var(--dt-mono-tracking); text-transform:uppercase; color:var(--dt-texto-3);
}

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

/* ============================================================================
   COMPONENTES BASE — os quatro que cobrem 80% de qualquer tela.
   Copie para o projeto (modelo shadcn) e construa em cima. Os demais nascem
   quando a primeira tela precisar deles.
   ============================================================================ */

/* ── BOTÃO ───────────────────────────────────────────────────────────────── */
.dt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--dt-e-2);
  font:600 var(--dt-t-md)/1 var(--dt-fonte);
  padding:11px 19px;border:1px solid transparent;border-radius:var(--dt-r-md);
  cursor:pointer;transition:var(--dt-rapido);white-space:nowrap;
}
.dt-btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
.dt-btn--sm{padding:8px 14px;font-size:var(--dt-t-sm);border-radius:var(--dt-r-sm)}
.dt-btn--lg{padding:15px 28px;font-size:15.5px;border-radius:var(--dt-r-lg)}

.dt-btn--primaria{background:var(--dt-vi);color:var(--dt-sobre-acao);box-shadow:var(--dt-som-alta)}
.dt-btn--primaria:hover:not(:disabled){background:var(--dt-vi-forte);transform:translateY(-1px)}

.dt-btn--secundaria{background:var(--dt-sup);border-color:var(--dt-borda-forte);color:var(--dt-texto)}
.dt-btn--secundaria:hover:not(:disabled){border-color:var(--dt-vi)}

.dt-btn--fantasma{background:transparent;color:var(--dt-vi)}
.dt-btn--fantasma:hover:not(:disabled){background:var(--dt-vi-fraco)}

.dt-btn--destrutiva{background:var(--dt-erro);color:var(--dt-sobre-acao)}
.dt-btn--destrutiva:hover:not(:disabled){filter:brightness(1.08)}

/* ── CAMPO ───────────────────────────────────────────────────────────────── */
.dt-campo-grupo{display:flex;flex-direction:column;gap:6px}
.dt-campo-rot{font:500 var(--dt-t-sm)/1.4 var(--dt-fonte);color:var(--dt-texto-2)}
.dt-campo{
  width:100%;padding:11px 13px;font:var(--dt-t-md)/1.4 var(--dt-fonte);
  background:var(--dt-sup);color:var(--dt-texto);
  border:1px solid var(--dt-borda);border-radius:var(--dt-r-md);transition:var(--dt-rapido);
}
.dt-campo::placeholder{color:var(--dt-texto-3)}
.dt-campo:focus{outline:none;border-color:var(--dt-vi);box-shadow:var(--dt-anel)}
.dt-campo:disabled{opacity:.55;cursor:not-allowed}
.dt-campo--erro{border-color:var(--dt-erro)}
.dt-campo--erro:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--dt-erro) 22%,transparent)}
.dt-campo-ajuda{font-size:var(--dt-t-sm);color:var(--dt-texto-3)}
.dt-campo-erro{font-size:var(--dt-t-sm);color:var(--dt-erro)}

/* ── BADGE DE ESTADO ─────────────────────────────────────────────────────── */
.dt-badge{
  display:inline-flex;align-items:center;gap:6px;
  font:500 var(--dt-t-xs)/1 var(--dt-fonte-mono);
  letter-spacing:.07em;text-transform:uppercase;
  padding:5px 9px;border:1px solid;border-radius:var(--dt-r-sm);
  color:var(--c,var(--dt-texto-2));
  border-color:color-mix(in srgb,var(--c,var(--dt-texto-3)) 34%,transparent);
  background:color-mix(in srgb,var(--c,var(--dt-texto-3)) 10%,transparent);
}
.dt-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.dt-badge--pendente { --c:var(--dt-st-pendente) }
.dt-badge--enviada  { --c:var(--dt-st-enviada) }
.dt-badge--entregue { --c:var(--dt-st-entregue) }
.dt-badge--lida     { --c:var(--dt-st-lida) }
.dt-badge--falhou   { --c:var(--dt-st-falhou) }
.dt-badge--degradado{ --c:var(--dt-st-degradado) }
.dt-badge--inativo  { --c:var(--dt-st-inativo) }

/* ── CARD ────────────────────────────────────────────────────────────────── */
.dt-card{
  border:1px solid var(--dt-borda);border-radius:var(--dt-r-xl);
  background:var(--dt-sup);padding:var(--dt-e-6);
  box-shadow:var(--dt-som);transition:var(--dt-medio);
}
.dt-card--interativo:hover{
  border-color:var(--dt-borda-forte);transform:translateY(-2px);box-shadow:var(--dt-som-alta);
}
/* DESTAQUE — borda na cor da marca + sombra mais alta. Marca a opção
   recomendada num conjunto de escolhas, o plano sugerido numa tabela de preço,
   o caminho certo num passo a passo.
   Regra: no máximo UM destaque por tela. Dois destaques é destaque nenhum. */
.dt-card--destaque{
  border-color:var(--dt-vi);box-shadow:var(--dt-som-alta);
}
/* Faixa de veredito dentro do cartão — o "por quê" em uma frase, separado do
   corpo. Herda a cor da borda quando o cartão está em destaque. */
.dt-card-nota{
  padding:var(--dt-e-3) var(--dt-e-4);border-radius:var(--dt-r-md);
  background:var(--dt-fundo-2);border-left:3px solid var(--dt-borda-forte);
  color:var(--dt-texto-2);font-size:var(--dt-t-md);line-height:1.55;
}
.dt-card--destaque .dt-card-nota{border-left-color:var(--dt-vi)}
.dt-card-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--dt-e-3);
  margin-bottom:var(--dt-e-3)}
.dt-card-titulo{font:700 17.5px/1.3 var(--dt-fonte-tit);letter-spacing:-.025em;color:var(--dt-texto)}
.dt-card-texto{color:var(--dt-texto-2);font-size:var(--dt-t-md)}
.dt-card-numero{font:800 var(--dt-t-3xl)/1 var(--dt-fonte-tit);letter-spacing:-.05em;color:var(--dt-vi)}

/* ── BOTÃO FLUTUANTE DE CONVERSA ──────────────────────────────────────────
   Círculo, canto inferior direito. Sem rótulo: o ícone do WhatsApp é uma das
   formas mais reconhecidas que existem, e legenda ao lado só rouba espaço.
   O anel só aparece no hover — anel pulsando o tempo todo lê como propaganda. */
.dt-zap{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:#25d366; color:#06301a;
  box-shadow:0 10px 28px -8px rgba(37,211,102,.6), 0 3px 10px rgba(0,0,0,.2);
  transition:var(--dt-medio);
}
.dt-zap::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid #25d366; opacity:0; transition:var(--dt-medio);
}
.dt-zap:hover{transform:translateY(-3px); box-shadow:0 16px 34px -8px rgba(37,211,102,.75)}
.dt-zap:hover::after{opacity:.4; inset:-9px}
.dt-zap svg{width:29px; height:29px}
@media(max-width:640px){.dt-zap{right:16px; bottom:16px; width:52px; height:52px}}

/* ── REDES SOCIAIS ────────────────────────────────────────────────────────
   Círculos neutros que assumem a cor da rede só no hover. Ícone colorido o
   tempo todo compete com a marca da página e envelhece rápido — o cinza que
   acende quando você chega perto é discreto e continua óbvio. */
.dt-redes{display:flex; gap:9px}
.dt-redes a{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--dt-borda); background:var(--dt-sup);
  color:var(--dt-texto-2); transition:var(--dt-medio);
}
.dt-redes a:hover{color:#fff; border-color:transparent; transform:translateY(-2px)}
.dt-redes svg{width:18px; height:18px}
.dt-redes .zap:hover  {background:#25d366; box-shadow:0 6px 16px -6px rgba(37,211,102,.7)}
.dt-redes .face:hover {background:#1877f2; box-shadow:0 6px 16px -6px rgba(24,119,242,.7)}
.dt-redes .insta:hover{box-shadow:0 6px 16px -6px rgba(193,53,132,.7);
  background:linear-gradient(45deg,#f09433,#dc2743 45%,#bc1888)}