/* Atribuição. Só tokens do app.css (Ultramar e Marfim, claro e escuro). Reaproveita .cap-bloco, .cap-tabela, .cap-nota e .met-tile. */

.atr-abas { max-width: 640px; margin-bottom: 20px; }
.atr-abas button { min-height: 40px; }
.atr-painel { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.atr-painel:focus { outline: none; }

.atr-dims { max-width: 460px; }
.atr-rolagem { overflow-x: auto; }
.atr-tabela th, .atr-tabela td { vertical-align: top; }
.atr-tabela tbody th { min-width: 160px; }
.atr-sub { display: block; font-size: 12px; font-weight: 400; color: var(--texto-tenue); }
.atr-rodape { margin-top: 12px; }

/* devolução */
.atr-plats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.atr-plat .linha { gap: 8px; }
.atr-contagem { margin-top: 12px; }
.atr-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.atr-motivo { margin-top: 4px; max-width: 34ch; }

/* linha do tempo do lead */
.atr-dialogo { min-width: min(520px, 100%); }
.atr-resumo { margin-bottom: 16px; }
.atr-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.atr-ponto { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
.atr-ponto:last-child { padding-bottom: 0; }
.atr-ponto::before { content: ''; position: absolute; left: 9px; top: 20px; bottom: 0; width: 2px; background: var(--linha); }
.atr-ponto:last-child::before { display: none; }
.atr-bolinha { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--destaque); background: var(--superficie); margin-top: 2px; z-index: 1; }
.atr-ponto.clique .atr-bolinha, .atr-ponto.visita .atr-bolinha { background: var(--destaque-suave); }
.atr-ponto.venda .atr-bolinha { background: var(--ok); border-color: var(--ok); }
.atr-ponto.perda .atr-bolinha { background: var(--perigo); border-color: var(--perigo); }
.atr-ponto.devolucao .atr-bolinha { border-style: dashed; }
.atr-titulo { font-weight: 700; }
.atr-espaco { margin-left: 8px; }

/* instalação */
.atr-passos { margin: 0 0 16px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.atr-check { display: flex; align-items: flex-start; gap: 10px; min-height: 32px; font-size: 14px; cursor: pointer; }
.atr-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--destaque); }
.atr-lista-check { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.atr-comando { margin: 0; padding: 12px; border: 1px solid var(--linha-forte); border-radius: var(--raio-sm); background: var(--fundo); white-space: pre-wrap; overflow-wrap: anywhere; }
#atr-gtm-codigo { width: 100%; }
.atr-sinal { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--linha-forte); border-radius: var(--raio-md); background: var(--superficie); }
.atr-sinal.ligado { border-color: var(--ok); background: var(--ok-fundo); }
.atr-luz { width: 12px; height: 12px; border-radius: 50%; background: var(--linha-forte); margin-top: 5px; flex: none; }
.atr-sinal.ligado .atr-luz { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-fundo); }
@media (prefers-reduced-motion: no-preference) { .atr-sinal.ligado .atr-luz { animation: atr-pulso 1.6s ease-in-out infinite; } }
@keyframes atr-pulso { 50% { box-shadow: 0 0 0 7px transparent; } }

@media (max-width: 860px) {
  .atr-plats { grid-template-columns: minmax(0, 1fr); }
  .atr-abas { max-width: none; overflow-x: auto; }
  .atr-abas button { flex: none; padding: 0 12px; }
}

/* tabela larga: rola dentro do cartão, nunca a página */
.atr-painel .pilha, .atr-painel .cartao, .atr-painel .cap-bloco { min-width: 0; max-width: 100%; }
.atr-tabela { font-size: 13px; }
.atr-tabela th, .atr-tabela td { padding: 9px 8px; }
.atr-tabela thead th { white-space: normal; }
.atr-tabela { min-width: 780px; }
.atr-tabela td { min-width: 90px; }
.atr-tabela td .atr-estado { min-width: 140px; }
.atr-resumo + .atr-tempo { margin-bottom: 14px; }
.atr-tempo + p { margin-top: 14px; }
.atr-passos { list-style: decimal; }
.atr-rolagem { position: relative; }