/* esteira.css — esteira espelhada da Vende AI em "Minha operação" (spec 2026-09-30; view em ui/esteira-view.js) */
.esteira-titulo{margin:28px 0 14px;font-family:var(--de-fonte-titulo,'Plus Jakarta Sans',sans-serif);font-size:22px;font-weight:800;}
.esteira-frescor{margin:0 0 18px;}
.esteira-filtros{flex-wrap:wrap;gap:6px;}
.esteira-atualizado{font-size:13px;color:var(--de-texto-secundario,#5D6068);}
/* indicador de carregando do botão Atualizar: escondido; aparece enquanto o botão está desabilitado esperando */
.esteira-giro{display:none;width:12px;height:12px;margin-right:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;}
.esteira-carregando .esteira-giro{display:inline-block;animation:esteira-gira .8s linear infinite;}
@keyframes esteira-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.esteira-carregando .esteira-giro{animation-duration:2.4s}}

/* aviso amarelo: só propostas sem dono */
.esteira-aviso{margin:12px 0;padding:12px 16px;border-radius:12px;font-size:14px;line-height:1.5;}
.esteira-aviso-amarelo{background:#FFF6DF;color:#705115;border:1px solid #EAD6A6;}

/* etiquetas de situação: a cor é o tom do grupo da Vende AI (success, info, warning, danger, neutral) nas cores do
   nosso design; cancelada, rejeitada e desconhecida não somam e nunca ficam com a cor do pago */
.esteira-sit{display:inline-block;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;line-height:1.3;white-space:nowrap;}
.esteira-tom-success{background:var(--de-status-contrato-fundo,#DFF1E4);color:var(--de-status-contrato-texto,#175E34);}
.esteira-tom-info{background:var(--de-status-atendimento-fundo,#E3EDFD);color:var(--de-status-atendimento-texto,#1E4E9C);}
.esteira-tom-warning{background:#FFF1D3;color:#77530D;}
.esteira-tom-danger{background:var(--de-status-frio-fundo,#FBE5E5);color:var(--de-status-frio-texto,#8E2A26);}
.esteira-tom-neutral{background:var(--de-status-seminteresse-fundo,#F0EDE7);color:var(--de-status-seminteresse-texto,#4F4E49);}
.esteira-valor{white-space:nowrap;}
/* ícone do banco: logo oficial contido em 22 px de altura, ou círculo com as 2 iniciais (cor por hash do código) */
.esteira-banco{display:inline-flex;align-items:center;gap:8px;}
.esteira-banco-logo{height:22px;width:auto;max-width:56px;object-fit:contain;flex:none;border-radius:4px;}
.esteira-banco-ini{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;color:#fff;font:700 9px/1 var(--de-fonte-texto,'Inter',sans-serif);letter-spacing:.02em;}
.esteira-vazio{margin:0;}

/* celular: a tabela vira uma pilha de cartões; cada célula mostra o nome da coluna (data-label) */
@media (max-width: 760px) {
  .esteira-tabela thead { display: none; }
  .esteira-tabela, .esteira-tabela tbody, .esteira-tabela tr, .esteira-tabela td { display: block; width: 100%; }
  .esteira-tabela tr { border: 1px solid var(--de-borda, #DEDBD5); border-radius: 14px; padding: 10px 14px; margin-bottom: 12px; background: var(--de-branco, #FFFFFF); }
  .esteira-tabela td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border: 0; padding: 6px 0; text-align: right; }
  .esteira-tabela td::before { content: attr(data-label); flex: none; font-size: 12px; font-weight: 700; color: var(--de-texto-secundario, #5D6068); text-align: left; }
  .esteira-tabela td small { display: block; margin: 0 0 0 8px; }
  .esteira-tabela td > b { display: inline; }
}

/* abas "Ranking da equipe" / "Esteira de propostas": o botão da plataforma é neutralizado e a aba ativa ganha o laranja da marca */
.esteira-abas{display:flex;gap:4px;margin:8px 0 16px;border-bottom:1px solid var(--de-borda,#DEDBD5);}
.esteira-abas .esteira-aba{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:0;padding:12px 10px;border:0;border-bottom:3px solid transparent;border-radius:0;background:none;color:var(--de-texto-secundario,#5D6068);font:700 15px/1.2 var(--de-fonte-texto,'Inter',sans-serif);cursor:pointer;margin-bottom:-1px;}
.esteira-abas .esteira-aba small{font-size:12px;font-weight:400;color:inherit;margin:0;}
.esteira-abas .esteira-aba:hover{background:var(--de-laranja-claro,#FFF7F0);filter:none;}
.esteira-abas .esteira-aba[aria-selected="true"]{color:var(--de-grafite,#181818);border-bottom-color:var(--de-laranja-principal,#FF7617);font-weight:800;}
.esteira-abas .esteira-aba:focus-visible{outline:3px solid var(--de-laranja-principal,#FF7617);outline-offset:-3px;}
.esteira-painel[hidden]{display:none;}
.esteira-em-cadastro{margin:0 0 10px;font-size:13px;}

/* Último acesso: "há 7 dias ou mais" e "nunca" em âmbar discreto, para o líder saber quem cobrar */
.esteira-acesso-alerta{display:inline-block;padding:1px 8px;border-radius:999px;background:#FFF1D3;color:#77530D;font-weight:700;}

/* bolinha "online agora" (A2): verde, 8 px, discreta; quem não está online fica sem nada */
.esteira-online{display:inline-block;width:8px;height:8px;border-radius:50%;background:#1F9D55;margin-right:6px;vertical-align:1px;flex:none;}

/* coroa do 1º em valor pago: laranja da marca, linha/cartão levemente alaranjado com borda esquerda fina; sem animação */
.esteira-coroa{display:inline-flex;vertical-align:-2px;margin-right:6px;color:var(--de-laranja-principal,#FF7617);}
.esteira-equipe tr.esteira-top td{background:#FFF1E6 !important;}   /* !important: telas.css pinta toda td de branco */
.esteira-equipe tr.esteira-top td:first-child{box-shadow:inset 3px 0 0 var(--de-laranja-principal,#FF7617);}

/* administradora master (A4): uma linha por líder, que abre para os afiliados dele; depois sem equipe e sem dono */
.esteira-lideres tr[hidden], .esteira-membro[hidden]{display:none !important;}   /* !important: no celular a linha vira grade e ganharia de [hidden] */
.esteira-lideres tr.esteira-lider-linha td{background:#FAF8F4 !important;font-weight:600;}
.esteira-lideres tr.esteira-membro td{background:#fff !important;font-size:.95em;}
.esteira-lideres tr.esteira-membro td:first-child{padding-left:52px;}
.esteira-lider-abrir{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;margin:-8px 4px -8px -10px;border:0;border-radius:10px;background:none;color:var(--de-laranja-hover,#C4540A);font-size:15px;cursor:pointer;vertical-align:middle;}
.esteira-lider-abrir:hover{background:#FFF1E6;}
.esteira-lider-abrir:focus-visible{outline:2px solid var(--de-laranja-principal,#FF7617);outline-offset:1px;}
.esteira-lider-abrir span{display:inline-block;transition:transform .15s ease;}
.esteira-lider-abrir[aria-expanded="true"] span{transform:rotate(90deg);}
@media (prefers-reduced-motion: reduce){.esteira-lider-abrir span{transition:none;}}
.esteira-lider-conta{color:var(--de-texto-secundario,#5D6068);font-weight:400;margin-left:4px;}
.esteira-sem-dono{padding:16px 20px;}
.esteira-sem-dono p{margin:0 0 6px;}
@media (max-width: 760px) {
  .card.table-scroll .esteira-lideres tr.esteira-lider-linha { background: #FAF8F4 !important; border-left: 3px solid var(--de-laranja-principal, #FF7617) !important; }
  .card.table-scroll .esteira-lideres tr.esteira-lider-linha td { background: none !important; }
  .card.table-scroll .esteira-lideres tr.esteira-membro { border-left: 3px solid var(--de-borda, #DEDBD5) !important; }
  .esteira-lideres .esteira-sem-celula { display: none !important; }
  .card.table-scroll .esteira-lideres tr.esteira-membro td { background: none !important; }
  .esteira-lider-abrir { margin: -10px 2px -10px -12px; }
}

@media (max-width: 760px) {
  /* "Sua equipe" no celular: cada afiliado é um cartão baixo (~110px), não uma pilha de linhas.
     Nome + total pago em cima, os números numa linha, telefone e entrada pequenos embaixo. O prefixo
     .card.table-scroll e os !important vencem a regra geral de tabela-vira-cartão (style.css e telas.css). */
  .card.table-scroll .esteira-equipe tr { display: grid !important; grid-template-columns: max-content max-content minmax(0, 1fr) max-content; grid-template-areas: "nome nome nome total" "prop pagas aguard aguard" "tel tel tel ent" "sim sim sim sim" "acesso acesso acesso acesso"; gap: 2px 8px; padding: 8px 12px !important; margin-bottom: 8px; }
  .card.table-scroll .esteira-equipe td { display: block !important; width: auto; min-width: 0; padding: 0 !important; border: 0 !important; text-align: left; font-size: 13px; line-height: 1.25; }
  .card.table-scroll .esteira-equipe td::before { display: block; font-size: 10px; font-weight: 700; color: var(--de-texto-secundario, #5D6068); }
  /* dinheiro nunca corta: as trilhas de Propostas, Aguardando e Total pago têm o tamanho do conteúdo; as células que atravessam colunas não mexem nas trilhas */
  .card.table-scroll .esteira-equipe td[data-label="Afiliado"], .card.table-scroll .esteira-equipe td[data-label="Telefone"], .card.table-scroll .esteira-equipe td[data-label="Entrada"], .card.table-scroll .esteira-equipe td[data-label="Simulações"], .card.table-scroll .esteira-equipe td[data-label="Último acesso"], .card.table-scroll .esteira-equipe td[data-label="Aguardando assinatura"] { contain: inline-size; }
  .card.table-scroll .esteira-equipe td[data-label="Afiliado"] { grid-area: nome; font-size: 14px; }
  .card.table-scroll .esteira-equipe td[data-label="Afiliado"]::before { display: none; }
  .card.table-scroll .esteira-equipe tr.esteira-top { border-left: 3px solid var(--de-laranja-principal, #FF7617) !important; background: #FFF1E6 !important; }
  .card.table-scroll .esteira-equipe tr.esteira-top td { background: none !important; box-shadow: none; }
  .card.table-scroll .esteira-equipe td[data-label="Total pago"] { grid-area: total; min-width: 112px; text-align: right; white-space: nowrap; font-size: 14px; }
  .card.table-scroll .esteira-equipe td[data-label="Total pago"]::before { content: "Pago"; }
  .card.table-scroll .esteira-equipe td[data-label="Propostas"] { grid-area: prop; }
  .card.table-scroll .esteira-equipe td[data-label="Aguardando assinatura"] { grid-area: aguard; }
  .card.table-scroll .esteira-equipe td[data-label="Aguardando assinatura"]::before { content: "Aguardando"; }
  .card.table-scroll .esteira-equipe td[data-label="Pagas"] { grid-area: pagas; }
  .card.table-scroll .esteira-equipe td small { display: inline; margin: 0 0 0 4px; font-size: 10px; }
  .card.table-scroll .esteira-equipe td[data-label="Telefone"] { grid-area: tel; font-size: 12px; white-space: nowrap; color: var(--de-texto-secundario, #5D6068) !important; }
  .card.table-scroll .esteira-equipe td[data-label="Entrada"] { grid-area: ent; font-size: 12px !important; white-space: nowrap; text-align: right; color: var(--de-texto-secundario, #5D6068) !important; }
  .card.table-scroll .esteira-equipe td[data-label="Simulações"], .card.table-scroll .esteira-equipe td[data-label="Último acesso"] { font-size: 12px; white-space: nowrap; color: var(--de-texto-secundario, #5D6068) !important; }
  .card.table-scroll .esteira-equipe td[data-label="Simulações"] { grid-area: sim; }
  .card.table-scroll .esteira-equipe td[data-label="Último acesso"] { grid-area: acesso; text-align: left; }
  .card.table-scroll .esteira-equipe td[data-label="Simulações"]::before, .card.table-scroll .esteira-equipe td[data-label="Último acesso"]::before { display: inline; font-size: 12px; font-weight: 400; }
  .card.table-scroll .esteira-equipe td[data-label="Simulações"]::before { content: "Simulações "; }
  .card.table-scroll .esteira-equipe td[data-label="Último acesso"]::before { content: "Último acesso: "; }
  .card.table-scroll .esteira-equipe td[data-label="Telefone"]::before { display: none; }
  .card.table-scroll .esteira-equipe td[data-label="Entrada"]::before { display: inline; font-size: 12px; font-weight: 400; content: "Entrada "; }
}

/* Autocontratação (PD-9): selo da venda feita pelo link do afiliado, ao lado do nome do cliente. */
.esteira-selo-link { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #1F6B4A; color: #FFFFFF; font-size: 12px; font-weight: 700; line-height: 1.4; }