/* Identidade BRAVUS SIS (D-059, D-060): preto, cinza cimento e bordô neon */
@font-face {
  font-family: "Rye";
  src: url("/static/fontes/Rye-Regular.ttf") format("truetype");
  font-display: swap;
}
:root {
  --preto: #0b0b0c;
  --cimento: #c3c5c7;
  --fundo: #c3c5c7;
  --cartao: #f7f7f6;
  --texto: #151515;
  --discreto: #5a5e62;
  --borda: #d5d7d9;
  --primaria: #a60f2d;
  --primaria-escura: #7a0a20;
  --neon: #ff2a55;
  --brilho: 0 0 10px rgba(255, 42, 85, .55);
  --ok-fundo: #e3f2e7;   --ok-texto: #1d6a35;
  --erro-fundo: #fbe4e8; --erro-texto: #9b0f2c;
  --alerta-fundo: #fff3d6; --alerta-texto: #6f5100;
  --raio: 8px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
}
a { color: var(--primaria); }
h1 { font-size: 1.5rem; margin: 0 0 .75rem; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
main { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

/* Topo */
.topo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
  padding: .6rem 1rem; background: var(--cartao); border-bottom: 1px solid var(--borda);
}
.marca { font-weight: 700; text-decoration: none; color: var(--texto); }
.topo nav { display: flex; gap: 1rem; flex: 1; }
.topo nav a { text-decoration: none; }
.quem { display: flex; align-items: center; gap: .75rem; color: var(--discreto); font-size: .9rem; }
.quem form { margin: 0; }

/* Cartões e formulários */
.cartao {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1.1rem 1.25rem; margin-bottom: 1rem;
}
.formulario label { display: block; margin-bottom: .85rem; font-weight: 500; }
input, select {
  display: block; width: 100%; margin-top: .3rem; padding: .55rem .65rem;
  font: inherit; border: 1px solid var(--borda); border-radius: 6px; background: #fff;
}
input:focus, select:focus { outline: 2px solid var(--primaria); outline-offset: 1px; }
.caixa { display: flex !important; align-items: center; gap: .5rem; font-weight: 400 !important; }
.caixa input { width: auto; margin: 0; }
button, .botao {
  display: inline-block; padding: .55rem 1.1rem; font: inherit; font-weight: 600;
  color: #fff; background: var(--primaria); border: 0; border-radius: 6px;
  cursor: pointer; text-decoration: none;
}
button:hover, .botao:hover { background: var(--primaria-escura); }
.botao-secundario {
  display: inline-block; padding: .45rem .9rem; font: inherit; color: var(--texto);
  background: transparent; border: 1px solid var(--borda); border-radius: 6px;
  cursor: pointer; text-decoration: none;
}
.botao-secundario:hover { background: var(--fundo); }
.acoes { display: flex; gap: .75rem; align-items: center; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

/* Entrada */
.entrada { max-width: 380px; margin: 3rem auto; }
.entrada button { width: 100%; }

/* Avisos */
.aviso-ok, .aviso-erro, .aviso-alerta { padding: .7rem 1rem; border-radius: 6px; margin: 0 0 1rem; }
.aviso-ok { background: var(--ok-fundo); color: var(--ok-texto); }
.aviso-erro { background: var(--erro-fundo); color: var(--erro-texto); }
.aviso-erro p, .aviso-alerta p { margin: .15rem 0; }
.aviso-alerta { background: var(--alerta-fundo); color: var(--alerta-texto); }

/* Lista de leads */
.titulo-linha { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.contagem { font-size: .85rem; font-weight: 500; color: var(--discreto); margin-left: .35rem; }
.filtros { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.filtros a {
  padding: .25rem .7rem; border: 1px solid var(--borda); border-radius: 999px;
  text-decoration: none; color: var(--texto); background: var(--cartao); font-size: .88rem;
}
.filtros a.ativo { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.tabela-rolagem { overflow-x: auto; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--borda); }
th { font-size: .82rem; color: var(--discreto); font-weight: 600; background: #fafbfc; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8fafc; }
.sem-quebra { white-space: nowrap; }
.etiqueta { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: #e8eefb; color: #23408a; font-size: .82rem; }
.etiqueta.grande { font-size: .95rem; padding: .25rem .8rem; }
.atrasada { color: var(--erro-texto); font-weight: 600; }
.vazio, .discreto { color: var(--discreto); }
.pequeno { font-size: .85rem; }

/* Ficha do lead */
.dados { display: grid; grid-template-columns: 170px 1fr; gap: .45rem 1rem; margin: 0; }
.dados dt { color: var(--discreto); }
.dados dd { margin: 0; }

/* Relatório */
.grade-relatorio { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 1rem; }
.compacta td { padding: .3rem 0; border-bottom: 1px solid var(--borda); }
.compacta tr:last-child td { border-bottom: 0; }
.numero { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.zerado td { color: var(--discreto); }

@media (max-width: 640px) {
  .duas-colunas { grid-template-columns: 1fr; }
  .dados { grid-template-columns: 1fr; }
  .dados dt { margin-top: .4rem; }
  .topo nav { order: 3; flex-basis: 100%; }
}

/* Usuários */
.sem-sublinhado { text-decoration: none; }
.acoes-tabela { display: flex; gap: .4rem; }
.acoes-tabela form { margin: 0; }
.acoes-tabela .botao-secundario { padding: .25rem .6rem; font-size: .85rem; white-space: nowrap; }
.etiqueta-alerta { background: var(--erro-fundo); color: var(--erro-texto); }
tr.inativo td { color: var(--discreto); }

/* Ações perigosas (excluir) */
.zona-perigo { border-color: #f1c4c4; }
.botao-perigo, button.botao-perigo {
  display: inline-block; padding: .55rem 1.1rem; font: inherit; font-weight: 600;
  color: #fff; background: #b42323; border: 0; border-radius: 6px; cursor: pointer; text-decoration: none;
}
.botao-perigo:hover { background: #8f1b1b; }
.acoes-tabela a.botao-secundario { padding: .25rem .6rem; font-size: .85rem; white-space: nowrap; }

/* Tarefas */
.grade-tarefas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 1rem; }
.tarefas { list-style: none; margin: 0; padding: 0; }
.tarefas li { padding: .55rem 0; border-bottom: 1px solid var(--borda); }
.tarefas li:last-child { border-bottom: 0; }
.tarefas .etiqueta { margin-left: .35rem; }
.destaque-erro { border-top: 3px solid #d64545; }
.destaque-alerta { border-top: 3px solid #e0a800; }

/* Relatório: tabelas dentro de cartões */
.tabela-rolagem.sem-borda { border: 0; border-radius: 0; }
th.numero { text-align: right; }

/* Central */
.materiais { list-style: none; margin: 0; padding: 0; }
.materiais li { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--borda); }
.materiais li:last-child { border-bottom: 0; }
.materiais a { text-decoration: none; }
.materiais .botao-secundario { padding: .2rem .6rem; }

/* Consentimento de WhatsApp na ficha do lead */
.consentimento { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .9rem;
  padding-top: .9rem; border-top: 1px solid var(--borda); }

/* Cotas e grupos (WhatsApp W2) */
h3 { font-size: .98rem; margin: 0 0 .6rem; }
.cota-nova { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borda); }
.grade-cota { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 .8rem; }
.acoes label { margin-bottom: 0; }

/* Modelos de mensagem (WhatsApp W3) */
.topo nav { flex-wrap: wrap; row-gap: .3rem; }
textarea { display: block; width: 100%; margin-top: .3rem; padding: .55rem .65rem; font: inherit;
  border: 1px solid var(--borda); border-radius: 6px; background: #fff; resize: vertical; }
textarea:focus { outline: 2px solid var(--primaria); outline-offset: 1px; }
.modelos { list-style: none; margin: 0; padding: 0; }
.modelos li { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--borda); }
.modelos li:last-child { border-bottom: 0; }
li.inativo { opacity: .6; }
.previa-mensagem { margin: .35rem 0 0; padding: .6rem .8rem; background: #e7f7ee; border-radius: 8px;
  white-space: pre-wrap; font-size: .92rem; }
code { font-size: .88em; background: #eef1f5; padding: .05rem .3rem; border-radius: 4px; }

/* Disparos (WhatsApp W4) */
.escolha-modelo .caixa { align-items: flex-start; }
.escolha-modelo .caixa input { margin-top: .3rem; }
.escolha-modelo .previa-mensagem { display: block; }
.mensagens-lead { margin-top: .9rem; }
.mensagens-lead summary { cursor: pointer; color: var(--primaria); }

/* Botão travado (ex.: nada novo para gerar) */
button:disabled, button:disabled:hover { background: #b8c2cf; cursor: not-allowed; }

/* ===== Revisão de layout (M2) ===== */

/* Menu: tela atual destacada e "Administração" como menu suspenso */
.topo nav a.atual { color: var(--texto); font-weight: 600; text-decoration: underline; text-underline-offset: .35rem; }
.submenu { position: relative; }
.submenu > summary { cursor: pointer; color: var(--primaria); list-style: none; }
.submenu > summary::-webkit-details-marker { display: none; }
.submenu-itens {
  position: absolute; top: 1.7rem; left: 0; z-index: 20; min-width: 190px;
  display: flex; flex-direction: column; padding: .35rem 0;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .1);
}
.submenu-itens a { padding: .45rem 1rem; }
.submenu-itens a:hover { background: var(--fundo); }
.menu-alternar { position: absolute; opacity: 0; pointer-events: none; }
.menu-botao { display: none; }
.dica-arrastar { display: none; }

@media (max-width: 640px) {
  main { padding: 1rem .75rem 3rem; }
  h1 { font-size: 1.3rem; }

  /* Topo: marca + botão; o resto aparece ao tocar em "Menu" */
  .topo { flex-wrap: wrap; gap: .5rem; padding: .55rem .75rem; }
  .menu-botao { display: inline-block; margin-left: auto; padding: .35rem .8rem; }
  .topo nav, .topo .quem { display: none; flex-basis: 100%; }
  .menu-alternar:checked ~ nav { display: flex; flex-direction: column; gap: 0; order: 3; }
  .menu-alternar:checked ~ .quem { display: flex; order: 4; flex-wrap: wrap; justify-content: space-between;
    padding-top: .6rem; border-top: 1px solid var(--borda); }
  .menu-alternar:focus-visible + .menu-botao { outline: 2px solid var(--primaria); }
  .topo nav a, .submenu > summary { padding: .55rem 0; border-bottom: 1px solid var(--fundo); }
  .submenu-itens { position: static; box-shadow: none; border: 0; padding: 0 0 0 .9rem; min-width: 0; }
  .submenu-itens a { padding: .5rem 0; }

  /* Filtros de etapa: uma linha só, deslizando para o lado */
  .filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; -webkit-overflow-scrolling: touch; }
  .filtros a { flex-shrink: 0; }

  /* Listas: cada linha da tabela vira um cartão com rótulos */
  table.cartoes-no-celular thead { display: none; }
  table.cartoes-no-celular, .cartoes-no-celular tbody, .cartoes-no-celular tr, .cartoes-no-celular td {
    display: block; width: 100%; }
  .cartoes-no-celular tr { padding: .65rem .8rem; border-bottom: 1px solid var(--borda); }
  .cartoes-no-celular tbody tr:last-child { border-bottom: 0; }
  .cartoes-no-celular td { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem;
    padding: .18rem 0; border: 0; text-align: right; white-space: normal; }
  .cartoes-no-celular td[data-label]::before { content: attr(data-label); flex-shrink: 0;
    color: var(--discreto); font-size: .8rem; text-align: left; }
  .cartoes-no-celular td.celula-titulo { display: block; text-align: left; font-weight: 600; font-size: 1rem; }
  .cartoes-no-celular td.celula-bloco { display: block; text-align: left; }
  .cartoes-no-celular td.celula-bloco::before { display: block; margin-bottom: .2rem; }
  .cartoes-no-celular td.celula-marcar { justify-content: flex-start; }
  .cartoes-no-celular td.celula-marcar input { width: 1.2rem; height: 1.2rem; }
  .cartoes-no-celular td:empty { display: none; }
  .cartoes-no-celular .acoes-tabela { flex-wrap: wrap; justify-content: flex-end; }

  .dica-arrastar { display: block; font-size: .8rem; color: var(--discreto); margin: 0 0 .3rem; }
  .titulo-linha .acoes { flex-wrap: wrap; }
}
@media (max-width: 640px) { .so-computador { display: none !important; } }
/* Cartões com caixinha (disparo, contemplação): caixinha à esquerda, dados à direita */
@media (max-width: 640px) {
  .cartoes-no-celular tr.com-marcar { display: grid; grid-template-columns: 2rem 1fr; column-gap: .4rem; }
  .cartoes-no-celular tr.com-marcar td { grid-column: 2; }
  .cartoes-no-celular tr.com-marcar td.celula-marcar { grid-column: 1; grid-row: 1 / span 6; padding-top: .3rem; }
  .cartoes-no-celular td.celula-acoes { justify-content: flex-end; padding-top: .45rem; }
  .bloco { display: block; }
}
.bloco { display: block; }
@media (max-width: 640px) { .menu-alternar:checked ~ .quem span { margin-right: auto; margin-left: .3rem; } }
/* A caixinha escondida do menu não pode herdar "width: 100%" dos campos */
.menu-alternar { width: 1px; height: 1px; margin: 0; left: 0; top: 0; }
@media (max-width: 640px) { .cartoes-no-celular td[data-label]::before { font-weight: 400; } }

/* Histórico de atividades (D-052) */
.grade-atividade { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 .8rem; }
.proxima-junto { margin: 0 0 .9rem; }
.proxima-junto summary { cursor: pointer; color: var(--primaria); margin-bottom: .6rem; }
.linha-do-tempo { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--borda); }
.linha-do-tempo li { padding: .7rem 0; border-bottom: 1px solid var(--borda); }
.linha-do-tempo li:last-child { border-bottom: 0; }
.linha-do-tempo p { margin: .3rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.filtro-atividades { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 .8rem; align-items: end; }
.filtro-atividades button { margin-bottom: .85rem; }
.totais-atividade { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.totais-atividade .cartao { margin: 0; display: flex; flex-direction: column; }
.totais-atividade strong { font-size: 1.6rem; }
.texto-atividade { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 16rem; }
.contadores span + span { margin-left: .4rem; }
@media (max-width: 640px) { .texto-atividade { min-width: 0; } }

/* Painel do período (D-055) */
.filtro-painel { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 .8rem; align-items: end; }
.filtro-painel button { margin-bottom: .85rem; }
.cartoes-painel { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.cartoes-painel .cartao { margin: 0; display: flex; flex-direction: column; gap: .15rem; }
.cartoes-painel strong { font-size: 1.5rem; }
.cartoes-painel .rotulo { color: var(--discreto); font-size: .85rem; }
.variacao { font-size: .82rem; font-weight: 600; }
.variacao.sobe { color: #167a3e; }
.variacao.desce { color: #b3261e; }
.variacao.igual, .variacao.sem-base { color: var(--discreto); font-weight: 400; }
.funil-painel { display: grid; gap: .45rem; }
.funil-linha { display: grid; grid-template-columns: 9.5rem 1fr 2.5rem; align-items: center; gap: .6rem; }
.funil-barra { background: #eef1f5; border-radius: 6px; height: 1.3rem; overflow: hidden; }
.funil-barra span { display: block; height: 100%; background: var(--primaria); border-radius: 6px; min-width: 2px; }
.funil-linha .numero { text-align: right; }
@media (max-width: 640px) { .funil-linha { grid-template-columns: 7rem 1fr 2rem; } }

/* Entrada com metas (D-056) */
.rosca { width: 150px; height: 150px; flex: none; transform: rotate(0deg); }
.rosca.grande { width: 200px; height: 200px; }
.rosca circle { fill: none; stroke-width: 6; }
.rosca .fundo { stroke: #e3e8ef; }
.rosca .parte { stroke: var(--primaria); stroke-linecap: butt; }
.rosca.batida .parte { stroke: #1f9d55; }
.rosca text { font-size: 7px; font-weight: 700; fill: var(--texto); }
.rosca-principal, .rosca-equipe { display: flex; align-items: center; gap: 1.2rem; }
.rosca-principal h2, .rosca-equipe h2 { margin-top: 0; }
.roscas-equipes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 1rem; }
.vendido-grande { font-size: 1.9rem; font-weight: 700; margin: .1rem 0 .4rem; }
.vendido-medio { font-size: 1.35rem; font-weight: 700; margin: .1rem 0 .4rem; }
.vendido-grande .discreto, .vendido-medio .discreto { font-size: .9rem; font-weight: 400; }
.falta { margin: 0 0 .15rem; }
.meta-batida { color: #167a3e; }
.metas-dia { list-style: none; margin: 0; padding: 0; }
.metas-dia li { padding: .8rem 0; border-bottom: 1px solid var(--borda); }
.metas-dia li:last-child { border-bottom: 0; }
.metas-dia li.batida .funil-barra span { background: #1f9d55; }
.meta-titulo { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; flex-wrap: wrap; }
.meta-manual { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; align-items: center; }
.meta-manual form { display: flex; gap: .4rem; align-items: center; margin: 0; }
.meta-manual input[type="number"] { width: 6rem; margin: 0; }
.meta-equipe { display: grid; grid-template-columns: 1fr auto; gap: 0 .8rem; align-items: end; max-width: 520px; }
.meta-equipe label { margin-bottom: .85rem; }
.meta-equipe button { margin-bottom: .85rem; }
.meta-equipe p { grid-column: 1 / -1; margin-top: -.5rem; }
.caixa-celula .caixa { margin: 0; }
@media (max-width: 640px) {
  .rosca-principal, .rosca-equipe { flex-direction: column; text-align: center; }
  .rosca, .rosca.grande { width: 140px; height: 140px; }
}

/* Relatório de vendas (D-058) */
.funil-linha.fatia { grid-template-columns: 1fr 3rem; min-width: 8rem; }

/* Versão para imprimir ou salvar em PDF: só o conteúdo, sem menu, filtros e botões */
@media print {
  .topo, .nao-imprimir, .aviso-alerta, script { display: none !important; }
  body { background: #fff; }
  main { max-width: none; padding: 0; }
  .cartao, .tabela-rolagem { box-shadow: none; break-inside: avoid; }
  .tabela-rolagem { overflow: visible; }
  a { color: inherit; text-decoration: none; }
}


/* ===== Tema BRAVUS SIS (D-059, D-060) ===== */
body { background: var(--cimento) linear-gradient(180deg, #cdcfd1 0, var(--cimento) 320px) no-repeat; }
h1 { font-family: "Rye", Georgia, serif; font-weight: 400; letter-spacing: .5px; font-size: 1.65rem; }
h1 .contagem { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0; }
a { color: var(--primaria); }
.cartao, .tabela-rolagem { border-color: #b9bcbf; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
th { background: #ececeb; }
tbody tr:hover { background: #f1f1f0; }
.etiqueta { background: #f2dde2; color: var(--primaria-escura); }
.etiqueta-alerta { background: var(--primaria); color: #fff; }
button, .botao { background: var(--primaria); }
button:hover, .botao:hover { background: var(--primaria-escura); box-shadow: var(--brilho); }
.botao-secundario { border-color: #a9acaf; }
.botao-secundario:hover { background: #ececeb; }
.filtros a { border-color: #a9acaf; }
.filtros a.ativo { background: var(--primaria); border-color: var(--primaria); box-shadow: var(--brilho); }
input:focus, select:focus, textarea:focus { outline-color: var(--neon); }

/* Topo preto com o capacete e o nome BRAVUS^SIS */
.topo { background: var(--preto); border-bottom: 2px solid var(--primaria); box-shadow: 0 2px 14px rgba(255, 42, 85, .35); }
.marca { display: inline-flex; align-items: center; gap: .55rem; color: #fff; }
.capacete {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  /* Só o capacete do logo: a faixa da direita (camada de cima) esconde o começo do nome escrito no logo */
  background: linear-gradient(90deg, transparent 0 74%, #e4e4e3 74%),
              #e4e4e3 url("/static/marca/logo_horizontal.jpg") no-repeat -7px -22px / 142px auto;
  background-blend-mode: normal, multiply; box-shadow: 0 0 0 2px var(--primaria), var(--brilho);
}
.nome-marca { font-family: "Rye", Georgia, serif; font-weight: 400; font-size: 1.35rem; letter-spacing: 1px; line-height: 1; }
.nome-marca sup {
  font-size: .5em; margin-left: .12em; vertical-align: super; letter-spacing: .5px;
  color: var(--neon); text-shadow: var(--brilho);
}
.topo nav a { color: #d6d6d6; }
.topo nav a:hover { color: #fff; }
.topo nav a.atual { color: #fff; text-decoration-color: var(--neon); }
.submenu > summary { color: #d6d6d6; }
.submenu-itens { background: #151515; border-color: #2a2a2a; }
.submenu-itens a { color: #d6d6d6; }
.submenu-itens a:hover { background: #262626; color: #fff; }
.quem { color: #a9a9a9; }
.quem a { color: #fff; }
.topo .botao-secundario { color: #e9e9e9; border-color: #4a4a4a; }
.topo .botao-secundario:hover { background: #1d1d1d; border-color: var(--primaria); }

/* Login com o guerreiro */
.entrada { text-align: center; }
.entrada form, .entrada .aviso-erro { text-align: left; }
/* A imagem já tem o nome escrito embaixo: mostramos só o guerreiro (o nome vem logo abaixo, em texto). */
.guerreiro { display: block; width: 300px; max-width: 100%; height: 136px; object-fit: cover; object-position: center top;
  margin: -.4rem auto .4rem; mix-blend-mode: multiply; }
.nome-marca.grande { font-size: 2.3rem; color: var(--preto); margin: 0 0 .4rem; }

/* Gráficos e barras no bordô neon */
.rosca .parte { stroke: var(--primaria); filter: drop-shadow(0 0 1.2px rgba(255, 42, 85, .8)); }
.rosca .fundo { stroke: #d9dbdc; }
.funil-barra { background: #dedfdf; }
.funil-barra span { background: linear-gradient(90deg, var(--primaria-escura), var(--primaria)); }
.variacao.desce { color: var(--primaria); }

@media (max-width: 640px) {
  .topo nav a, .submenu > summary { border-bottom-color: #222; }
  .menu-alternar:checked ~ .quem { border-top-color: #222; }
  .nome-marca { font-size: 1.15rem; }
  .capacete { width: 34px; height: 34px; background-position: 0 0, -6px -19px; background-size: auto, 122px auto; }
}
@media print {
  body { background: #fff; }
  h1 { font-family: Georgia, serif; }
}
.nome-marca.grande sup { color: var(--primaria); text-shadow: none; }
.entrada form label { display: block; margin-bottom: .85rem; font-weight: 500; }

/* ===== Entrada do esboço (D-059 a D-062) ===== */
.pizzas-entrada { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1rem; }
.pizza-cartao { text-align: center; display: flex; flex-direction: column; align-items: center; }
.pizza-cartao h2 { font-family: "Rye", Georgia, serif; font-weight: 400; letter-spacing: .5px; font-size: 1.15rem; }
.pizza-cartao .vendido-medio { margin: .4rem 0 .2rem; }
.pizza-cartao .meta-manual.centro { justify-content: center; }
.pizza-cartao .meta-manual input { width: 9rem; margin: 0; }
.rosca.mini { width: 44px; height: 44px; }
.rosca.mini text { font-size: 9px; }

/* Pizza fatiada */
.pizza-fatiada { width: 150px; height: 150px; flex: none; }
.pizza-fatiada.grande { width: 170px; height: 170px; }
.pizza-fatiada.mini { width: 64px; height: 64px; }
.pizza-fatiada circle { fill: none; stroke-width: 6; }
.pizza-fatiada .trilho { stroke: #d9dbdc; }
.pizza-fatiada .cheio { stroke: var(--primaria); }
.pizza-fatiada .cheio.batida { stroke: var(--neon); filter: drop-shadow(0 0 1.4px rgba(255, 42, 85, .9)); }
.pizza-fatiada text { font-size: 8px; font-weight: 700; fill: var(--texto); }
.pizza-fatiada.mini text { font-size: 9px; }
.legenda-fatias { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .7rem; font-size: .82rem; }
.legenda-fatias .ponto { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #d9dbdc; margin-right: .3rem; }
.legenda-fatias li.batida .ponto { background: var(--neon); box-shadow: var(--brilho); }
.legenda-equipes { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; text-align: left; font-size: .85rem; }
.legenda-equipes li { display: flex; align-items: center; gap: .4rem; }

/* Agendamentos do dia */
.agenda-topo { display: flex; gap: 1.2rem; align-items: flex-start; }
.agenda-resumo { flex: 1; min-width: 0; }
.pizza-agenda { width: 110px; height: 110px; flex: none; }
.pizza-agenda circle { fill: none; stroke-width: 6; }
.pizza-agenda .vazio-agenda { stroke: #d9dbdc; }
.pizza-agenda .realizado { stroke: var(--primaria); }
.pizza-agenda .a-fazer { stroke: #e58a9c; }
.pizza-agenda .nao-realizado { stroke: #8f9295; }
.pizza-agenda .numero-grande { font-size: 11px; font-weight: 700; fill: var(--texto); }
.pizza-agenda .legenda-pequena { font-size: 4.5px; fill: var(--discreto); }
.legenda-agenda { font-size: .85rem; color: var(--discreto); margin: .2rem 0 .5rem; }
.ponto { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin: 0 .2rem 0 .5rem; vertical-align: -1px; }
.legenda-agenda .ponto:first-child { margin-left: 0; }
.ponto.realizado { background: var(--primaria); }
.ponto.a-fazer { background: #e58a9c; }
.ponto.nao-realizado { background: #8f9295; }
.lista-agenda { list-style: none; padding: 0; margin: 0; }
.lista-agenda li { display: flex; gap: .7rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--borda); }
.lista-agenda li:last-child { border-bottom: 0; }
.lista-agenda .hora { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3rem; }
.lista-agenda .o-que { flex: 1; min-width: 0; }
.lista-agenda .o-que .discreto { display: block; }
.lista-agenda li.realizado .hora { color: var(--primaria); }
.lista-agenda li.nao-realizado .hora, .lista-agenda li.cancelado { color: #8f9295; }
.lista-agenda li.cancelado .o-que strong { text-decoration: line-through; }
.lista-agenda form { margin: 0; }
.acoes-agenda { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.botao-secundario.pequeno { padding: .25rem .6rem; font-size: .82rem; }
.dias-agenda a { white-space: nowrap; }

/* Equipe: cartões com mini pizza (opção A) */
.titulo-grupo { font-size: 1rem; margin: 1rem 0 .5rem; }
.titulo-grupo:first-of-type { margin-top: .2rem; }
.cartoes-equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.cartao-pessoa { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); }
.cartao-pessoa summary { display: flex; gap: .7rem; align-items: center; padding: .6rem .7rem; cursor: pointer; list-style: none; }
.cartao-pessoa summary::-webkit-details-marker { display: none; }
.cartao-pessoa[open] summary { border-bottom: 1px solid var(--borda); }
.quem-pessoa { min-width: 0; }
.detalhe-pessoa { list-style: none; margin: 0; padding: .5rem .8rem .7rem; font-size: .85rem; columns: 2; }
.detalhe-pessoa li.batida { color: var(--primaria); font-weight: 600; }

@media (max-width: 640px) {
  .agenda-topo { flex-direction: column; align-items: center; }
  .agenda-resumo { width: 100%; }
  .lista-agenda li { flex-wrap: wrap; }
  .detalhe-pessoa { columns: 1; }
}

/* ===== Importação e quadro de atendimentos (D-065) ===== */
.destinos { border: 1px solid var(--borda); border-radius: var(--raio); padding: .6rem .9rem; margin: 0 0 .9rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .1rem .8rem; }
.destinos legend { font-weight: 500; padding: 0 .3rem; }
.destinos .caixa { margin: .2rem 0; }

.quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: .7rem;
  overflow-x: auto; padding-bottom: .6rem; align-items: start; }
.coluna-quadro { background: #e3e4e5; border-radius: var(--raio); padding: .5rem; min-height: 6rem; }
.cabeca-coluna { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem; padding: .3rem .45rem .55rem;
  border-bottom: 3px solid var(--primaria); margin-bottom: .5rem; }
.cabeca-coluna.perdido { border-bottom-color: #8f9295; }
.valor-coluna { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--primaria-escura); }
.cartao-lead { background: var(--cartao); border: 1px solid #c9cbcd; border-left: 3px solid var(--primaria);
  border-radius: 0; padding: .55rem .65rem; margin-bottom: .5rem; }
.cartao-lead:target { box-shadow: 0 0 0 2px var(--neon), var(--brilho); }
.cartao-lead-topo { display: flex; justify-content: space-between; gap: .4rem; align-items: flex-start; }
.nome-lead { font-weight: 600; text-decoration: none; color: var(--texto); }
.valor-lead { margin: .2rem 0; font-weight: 700; color: var(--primaria-escura); }
.etiquetas-lead { margin: .25rem 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.etiquetas-lead .etiqueta { font-size: .74rem; padding: .05rem .45rem; }
.contadores-lead { display: flex; gap: .7rem; align-items: center; margin: .3rem 0; font-size: .85rem; color: var(--discreto); }
.contadores-lead .whats { margin-left: auto; font-size: .8rem; font-weight: 600; text-decoration: none; color: #157a3c;
  border: 1px solid #9fd3b4; border-radius: 999px; padding: .05rem .55rem; }
.botoes-lead { display: flex; flex-wrap: wrap; gap: .25rem; margin: .35rem 0 .2rem; }
.botoes-lead details { position: static; }
.botoes-lead summary { list-style: none; cursor: pointer; font-size: .76rem; padding: .12rem .5rem; border: 1px solid #b4b7ba;
  border-radius: 999px; background: #fff; }
.botoes-lead summary::-webkit-details-marker { display: none; }
.botoes-lead details[open] { flex-basis: 100%; }
.botoes-lead details[open] summary { background: var(--primaria); color: #fff; border-color: var(--primaria); display: inline-block; }
.mini-form { display: flex; flex-direction: column; gap: .35rem; margin: .4rem 0 .2rem; }
.mini-form input, .mini-form select, .mini-form textarea { margin: 0; padding: .35rem .5rem; font-size: .85rem; }
.mini-form label { margin: 0; font-weight: 400; }
.mini-form button { padding: .35rem .7rem; font-size: .85rem; align-self: flex-start; }
.rodape-lead { margin: .3rem 0 0; border-top: 1px dashed #d0d2d4; padding-top: .25rem; }

@media (max-width: 640px) {
  .quadro { grid-auto-columns: 86%; scroll-snap-type: x mandatory; }
  .coluna-quadro { scroll-snap-align: start; }
}
.atalhos-quadro a { white-space: nowrap; }
.coluna-quadro { scroll-margin-top: 1rem; }

/* ===== Pizzas nos relatórios (etapa D) ===== */
.pizza-partes { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.pizza-relatorio { width: 150px; height: 150px; flex: none; }
.pizza-relatorio circle { fill: none; stroke-width: 7; }
.pizza-relatorio .centro-pizza { font-size: 7px; font-weight: 700; fill: var(--texto); }
.pizza-relatorio .legenda-pequena { font-size: 3.6px; fill: var(--discreto); }
.legenda-partes { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 180px; font-size: .88rem; }
.legenda-partes li { display: flex; align-items: center; gap: .4rem; padding: .18rem 0; border-bottom: 1px dotted #d6d8da; }
.legenda-partes li:last-child { border-bottom: 0; }
.legenda-partes .ponto { margin: 0; flex: none; }
.nome-parte { flex: 1; min-width: 0; }
.valor-parte { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Paleta: bordô, preto e cinzas (D-060) */
.pizza-relatorio .cor-0 { stroke: #a60f2d; } .ponto.cor-0 { background: #a60f2d; }
.pizza-relatorio .cor-1 { stroke: #1b1b1c; } .ponto.cor-1 { background: #1b1b1c; }
.pizza-relatorio .cor-2 { stroke: #e0455f; } .ponto.cor-2 { background: #e0455f; }
.pizza-relatorio .cor-3 { stroke: #8f9295; } .ponto.cor-3 { background: #8f9295; }
.pizza-relatorio .cor-4 { stroke: #6b0a1d; } .ponto.cor-4 { background: #6b0a1d; }
.pizza-relatorio .cor-5 { stroke: #f2a5b3; } .ponto.cor-5 { background: #f2a5b3; }
.pizza-relatorio .cor-6 { stroke: #c4c6c8; } .ponto.cor-6 { background: #c4c6c8; }
.grade-pizzas { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 0 1rem; }
@media (max-width: 640px) { .pizza-partes { justify-content: center; } .grade-pizzas { grid-template-columns: 1fr; } }
.pizza-relatorio .cor-7 { stroke: #5a5e62; } .ponto.cor-7 { background: #5a5e62; }

/* ===== Quadro no jeito do Apollo, com a cara do BRAVUS (D-067) ===== */
.filtro-quadro { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 .8rem; align-items: end; }
.filtro-quadro .opcoes-filtro { margin-bottom: .85rem; }
.filtro-quadro .opcoes-filtro .caixa { margin: .15rem 0; font-size: .88rem; }
.filtro-quadro button { margin-bottom: .85rem; }
.alternar-selecao { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.barra-quadro { display: flex; flex-wrap: wrap; gap: .7rem; align-items: stretch; margin-bottom: .7rem; }
.chave-selecao { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; background: var(--cartao); }
.chave { width: 2rem; height: 1.1rem; border-radius: 999px; background: #b9bcbf; position: relative; transition: background .15s; }
.chave::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .8rem; height: .8rem; border-radius: 50%; background: #fff; transition: left .15s; }
.alternar-selecao:checked ~ .barra-quadro .chave { background: var(--primaria); }
.alternar-selecao:checked ~ .barra-quadro .chave::after { left: 1.05rem; }
.alternar-selecao:focus-visible ~ .barra-quadro .chave-selecao { outline: 2px solid var(--neon); }
.indicadores-quadro { display: flex; gap: .7rem; flex: 1; justify-content: flex-end; flex-wrap: wrap; }
.indicador { display: flex; flex-direction: column; justify-content: center; padding: .45rem 1.1rem; border-radius: var(--raio); color: #fff; min-width: 210px; }
.indicador span { font-size: .78rem; opacity: .85; }
.indicador strong { font-size: 1.3rem; }
.indicador.negociacao { background: linear-gradient(135deg, #2b2d30, #0b0b0c); }
.indicador.vendido { background: linear-gradient(135deg, var(--primaria), var(--primaria-escura)); box-shadow: var(--brilho); }
.barra-lote { display: none; flex-wrap: wrap; gap: .5rem; align-items: center; }
.barra-lote select { width: auto; margin: 0; }
.alternar-selecao:checked ~ .barra-lote { display: flex; }
.marcar-lead { display: none; width: 1.05rem; height: 1.05rem; margin: .15rem .35rem 0 0; flex: none; }
.alternar-selecao:checked ~ .quadro .marcar-lead { display: inline-block; }
.cartao-lead-topo { justify-content: flex-start; }
.cartao-lead-topo .etiqueta { margin-left: auto; }

/* Cabeçalho colorido por etapa (tons BRAVUS) */
.coluna-quadro { padding: 0; background: #dfe0e1; overflow: hidden; }
.cabeca-coluna { margin: 0; padding: .55rem .7rem; border: 0; color: #fff; justify-content: flex-start; }
.cabeca-coluna strong { font-size: .95rem; }
.contador-coluna { background: rgba(255, 255, 255, .25); border-radius: 999px; padding: 0 .5rem; font-size: .8rem; font-weight: 700; }
.cabeca-coluna .valor-coluna { color: #fff; opacity: .9; }
.cartoes-coluna { padding: .5rem; max-height: 72vh; overflow-y: auto; }
.etapa-0 .cabeca-coluna { background: #5a5e62; } .etapa-0 .cartao-lead { border-left-color: #5a5e62; }
.etapa-1 .cabeca-coluna { background: #2b2d30; } .etapa-1 .cartao-lead { border-left-color: #2b2d30; }
.etapa-2 .cabeca-coluna { background: #6b0a1d; } .etapa-2 .cartao-lead { border-left-color: #6b0a1d; }
.etapa-3 .cabeca-coluna { background: #8c0d27; } .etapa-3 .cartao-lead { border-left-color: #8c0d27; }
.etapa-4 .cabeca-coluna { background: #a60f2d; } .etapa-4 .cartao-lead { border-left-color: #a60f2d; }
.etapa-5 .cabeca-coluna { background: #d0284a; } .etapa-5 .cartao-lead { border-left-color: #d0284a; }
.etapa-6 .cabeca-coluna { background: #0b0b0c; box-shadow: inset 0 -3px 0 var(--neon); } .etapa-6 .cartao-lead { border-left-color: var(--neon); }
.etapa-7 .cabeca-coluna { background: #8f9295; } .etapa-7 .cartao-lead { border-left-color: #8f9295; }
.coluna-quadro.alvo { outline: 3px dashed var(--neon); outline-offset: -3px; }
.cartao-lead.arrastando { opacity: .45; }
.cartao-lead[draggable="true"] { cursor: grab; }

/* Ícones com contadores */
.icone { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; margin-right: .15rem; }
.contadores-lead { gap: .55rem; }
.contadores-lead > span { display: inline-flex; align-items: center; color: #3b3e41; font-weight: 600; font-size: .82rem; }
.rodape-lead { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; justify-content: space-between; }
.selo-consultor { background: var(--preto); color: #fff; border-radius: 999px; padding: .05rem .55rem; font-size: .74rem; font-weight: 600; }
.datas-lead .icone { width: .85rem; height: .85rem; }
.ultima-acao { margin: .15rem 0 0; }
.dica-arrastar-cartao { margin-top: .4rem; }

@media (max-width: 640px) {
  .indicadores-quadro { justify-content: stretch; }
  .indicador { flex: 1; min-width: 0; }
  .cartoes-coluna { max-height: none; }
  .dica-arrastar-cartao { display: none; }
}
/* No quadro, a tela usa a largura toda para caberem todas as etapas lado a lado (como na referência da líder) */
main:has(.quadro) { max-width: none; padding-left: 1.2rem; padding-right: 1.2rem; }
.quadro { grid-auto-columns: minmax(225px, 1fr); }
@media (max-width: 640px) { main:has(.quadro) { padding-left: .75rem; padding-right: .75rem; } .quadro { grid-auto-columns: 86%; } }
.cartoes-coluna { overflow-x: hidden; }
.contadores-lead { flex-wrap: wrap; }

/* Trocar entre quadro e lista de leads (D-069) */
.troca-vista { display: inline-flex; border: 1px solid #a9acaf; border-radius: 6px; overflow: hidden; }
.troca-vista a, .troca-vista span { padding: .45rem .85rem; text-decoration: none; color: var(--texto); background: var(--cartao); }
.troca-vista .atual { background: var(--preto); color: #fff; font-weight: 600; }
.troca-vista a:hover { background: #ececeb; }

/* Leads frios e importação em dois modos (D-070) */
.modo-importacao { display: block; }
.modo-importacao > .caixa { align-items: flex-start; margin: .35rem 0; }
.modo-importacao .caixa input { margin-top: .25rem; }
.sub-opcao { margin: 0 0 .7rem 1.6rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .1rem .8rem; }
.sub-opcao > .discreto { grid-column: 1 / -1; }
.marcar-todos { margin-top: .5rem; }
.troca-vista a { white-space: nowrap; }
.quantidade-equipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 1rem; max-width: 640px; }
.quantidade-equipes label { font-weight: 500; }
.erro-texto { color: var(--primaria); font-weight: 600; }

/* Novo Início no estilo do Apollo (D-072) */
.totais-inicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .6rem; margin-bottom: .6rem; }
.total-grande { margin: 0; display: flex; flex-direction: column; gap: .2rem; border-left: 4px solid var(--primaria); }
.total-grande.projetado { border-left-color: var(--neon); }
.total-grande strong { font-size: 2rem; }
.total-grande .rotulo { color: var(--discreto); font-size: .9rem; }
.grade-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.mini-numero { margin: 0; display: flex; flex-direction: column; gap: .15rem; }
.mini-numero strong { font-size: 1.4rem; }
.mini-numero .rotulo { color: var(--discreto); font-size: .82rem; }
.vendas-e-ano { display: grid; grid-template-columns: 2fr 1fr; gap: .8rem; margin-bottom: 1rem; }
.vendas-e-ano > .cartao { margin: 0; }
.tipos-barra { list-style: none; margin: .6rem 0 0; padding: 0; font-size: .9rem; }
.tipos-barra li { padding: .25rem 0; }
.titulo-secao { margin-top: 1.2rem; }
.valores-ocultos .valor-r, .valores-ocultos #vendas-por-tipo .valor-parte { filter: blur(8px); user-select: none; }
@media (max-width: 760px) { .vendas-e-ano { grid-template-columns: 1fr; } }

/* Comparativo meta × realizado (D-074) */
.tabela-comparativo td, .tabela-comparativo th { white-space: nowrap; }
.tabela-comparativo .funil-barra { min-width: 90px; margin-bottom: .1rem; }
.tabela-comparativo tfoot td { font-weight: 700; border-top: 2px solid var(--primaria); }
.delta-positivo { color: #1d7a3a; font-weight: 600; }
.delta-negativo { color: var(--primaria); font-weight: 600; }
.selo-meta { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #e3e4e6; color: var(--discreto); }
.selo-meta.batida { background: #1d7a3a; color: #fff; }
.selo-meta.nao-batida { background: var(--primaria); color: #fff; }

/* Tela de TV: ranking e pódio (D-076) — escura, letras grandes, sem menu */
.tela-tv { background: var(--preto); color: #f2f2f2; min-height: 100vh; }
.tela-tv a { color: #f2f2f2; }
.tv-topo { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.2rem; border-bottom: 2px solid var(--neon); box-shadow: var(--brilho); }
.tv-titulo { flex: 1; min-width: 0; }
.tv-titulo h1 { margin: 0; font-size: clamp(1.3rem, 3vw, 2.4rem); color: #fff; }
.tv-titulo p { margin: 0; color: #b9bcbf; }
.tv-relogio { font-size: clamp(1.4rem, 3.4vw, 2.6rem); font-weight: 700; color: var(--neon); font-variant-numeric: tabular-nums; }
.tv-controles { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; padding: .5rem 1.2rem; font-size: .85rem; }
.tv-controles label { display: flex; flex-direction: column; gap: .15rem; color: #b9bcbf; }
.tv-controles input, .tv-controles select { padding: .3rem .4rem; }
.tela-tv:fullscreen .tv-controles { display: none; }
.tela-tv .botao-secundario { color: #f2f2f2; background: transparent; border-color: #5a5e62; }
.tv-corpo { padding: .6rem 1.2rem 1.2rem; max-width: none; margin: 0; }   /* a TV usa a largura toda */
.tv-podio { display: flex; justify-content: center; align-items: flex-end; gap: 1rem; margin: .6rem 0 1.2rem; flex-wrap: wrap; }
.tv-degrau { background: #1a1a1c; border: 1px solid #333; border-radius: 12px; padding: 1rem 1.2rem; min-width: 200px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.tv-degrau.lugar-1 { border-color: var(--neon); box-shadow: var(--brilho); padding-top: 1.6rem; padding-bottom: 1.6rem; }
.tv-lugar { font-size: 1.1rem; font-weight: 700; color: var(--neon); }
.tv-iniciais { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.4rem; background: var(--primaria); color: #fff; }
.tv-iniciais.pequena { width: 40px; height: 40px; font-size: .95rem; flex: none; }
.tv-nome { font-size: 1.2rem; }
.tv-equipe, .tv-detalhe { color: #b9bcbf; font-size: .9rem; }
.tv-valor { font-size: 1.6rem; font-weight: 700; color: #fff; }
.lugar-1 .tv-valor { font-size: 2rem; color: var(--neon); }
.tv-grade { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
.tv-bloco { background: #151517; border: 1px solid #2c2c2f; border-radius: 12px; padding: 1rem; }
.tv-bloco h2 { margin: 0 0 .6rem; color: #fff; }
.tv-meta-geral { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 1rem; }
.tv-rotulo { color: #b9bcbf; text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; }
.tv-grande { font-size: clamp(1.6rem, 3.6vw, 2.8rem); color: #fff; }
.tv-barra { height: 10px; background: #2c2c2f; border-radius: 999px; overflow: hidden; margin: .25rem 0; }
.tv-barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--primaria), var(--neon)); }
.tv-lista-equipes, .tv-lista { list-style: none; margin: 0; padding: 0; }
.tv-lista-equipes li { padding: .5rem 0; border-top: 1px solid #2c2c2f; }
.tv-linha { display: flex; justify-content: space-between; gap: .6rem; }
.tv-lista li { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-top: 1px solid #2c2c2f; font-size: 1.05rem; }
.tv-lista li.destaque { background: rgba(255, 42, 85, .08); }
.tv-pos { width: 2ch; text-align: right; font-weight: 700; color: var(--neon); font-size: 1.2rem; }
.tv-pessoa { flex: 1; min-width: 0; }
.tv-vazio { color: #b9bcbf; text-align: center; padding: 1rem; }
.tv-rodape { color: #7d8084; font-size: .8rem; text-align: center; margin-top: 1rem; }
@media (max-width: 760px) {
  .tv-grade { grid-template-columns: 1fr; }
  .tv-degrau { min-width: 0; flex: 1 1 100%; order: 0 !important; }   /* no celular: 1º, 2º, 3º de cima para baixo */
  .tv-topo { flex-wrap: wrap; }
}

/* Agenda em mês (D-077) */
.alternar-vista { display: inline-flex; border: 1px solid var(--borda); border-radius: 999px; overflow: hidden; background: var(--cartao); }
.alternar-vista a { padding: .3rem .9rem; text-decoration: none; color: var(--texto); }
.alternar-vista a.ativo { background: var(--primaria); color: #fff; }
.mes-navegacao { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .4rem 0 .6rem; }
.mes-navegacao h2 { margin: 0; }
.calendario { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cabecalho span { padding: .35rem; text-align: center; font-size: .8rem; color: var(--discreto); background: #ececeb; }
.cal-dia { min-height: 92px; padding: .3rem; border-top: 1px solid var(--borda); border-left: 1px solid var(--borda); text-decoration: none; color: var(--texto); display: flex; flex-direction: column; gap: .15rem; overflow: hidden; }
.cal-semana .cal-dia:first-child { border-left: 0; }
.cal-dia:hover { background: #fff; }
.cal-dia.fora { color: #9a9ea2; background: #f0f0ef; }
.cal-dia.hoje .cal-numero { background: var(--primaria); color: #fff; border-radius: 999px; padding: 0 .4rem; }
.cal-numero { font-weight: 700; font-size: .9rem; align-self: flex-start; }
.cal-contagem { font-size: .75rem; font-weight: 700; color: var(--primaria); }
.cal-alerta { color: var(--erro-texto); }
.cal-itens { list-style: none; margin: 0; padding: 0; font-size: .72rem; }
.cal-itens li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--borda); padding-left: .25rem; margin-top: .1rem; }
.cal-itens li.realizado { border-left-color: var(--primaria); }
.cal-itens li.a-fazer { border-left-color: #e58a9c; }
.cal-itens li.nao-realizado { border-left-color: #8f9295; }
@media (max-width: 640px) {
  .cal-dia { min-height: 54px; padding: .2rem; }
  .cal-itens { display: none; }      /* no celular só o número de compromissos; a lista abre ao tocar no dia */
}

/* Aniversários (D-078) */
.aviso-aniversario { border-left: 4px solid var(--neon); }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { padding: .2rem 0; }
tr.aniversario-hoje td { background: #fff4f6; }

/* Busca rápida (D-080) */
.so-no-menu { display: none; }
@media (max-width: 640px) { .so-no-menu { display: inline; } }   /* no menu do celular aparece a palavra */
.busca-formulario { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; }
.busca-formulario label { flex: 1 1 260px; }

/* Distribuição: marcar os N primeiros (D-081) */
.marcar-n { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; margin-top: .4rem; }
.marcar-n input { width: 6rem; }

/* Agenda no celular (D-083) */
.aviso-celular { background: var(--cartao); border: 1px dashed var(--borda); border-radius: var(--raio); padding: .4rem .7rem; }

/* Rotina do mês dos gestores (D-084) */
.cartao-rotina { border-left: 4px solid var(--primaria); }
.rotina-hoje li { padding: .25rem 0; }
.rotina-proximos-titulo { margin: .6rem 0 .1rem; text-transform: uppercase; letter-spacing: .04em; }
.rotina-proximos li { padding: .15rem 0; font-size: .92rem; }
.rotina-dia { display: inline-block; min-width: 6.2rem; color: var(--discreto); font-variant-numeric: tabular-nums; }
.rotina-lista { list-style: none; margin: 0; padding: 0; }
.rotina-lista > li { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem .4rem; border-top: 1px solid var(--borda); }
.rotina-lista > li:first-child { border-top: 0; }
.rotina-lista > li.rotina-agora { background: #fff4f6; border-left: 3px solid var(--primaria); }
.rotina-selo { flex: none; min-width: 3.4rem; text-align: center; font-weight: 700; background: var(--preto); color: #fff; border-radius: 999px; padding: .15rem .5rem; font-variant-numeric: tabular-nums; }
.rotina-lista > li.rotina-agora .rotina-selo { background: var(--primaria); }
.rotina-atividade { flex: 1; }
.rotina-lista form { flex: 1; }
.rotina-editar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.rotina-editar input[type=number] { width: 4.5rem; }
.rotina-editar .rotina-texto { flex: 1 1 280px; }
.rotina-editar textarea { width: 100%; }
.rotina-botoes { display: flex; gap: .4rem; align-items: center; }

/* Início em duas colunas no computador (design 1) */
.inicio-grade { display: block; }
.inicio-principal, .inicio-lateral { min-width: 0; }
@media (min-width: 1360px) {
  main:has(.inicio-grade) { max-width: 1480px; }
  .inicio-grade { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.2rem; align-items: start; }
  .inicio-lateral { position: sticky; top: 4.2rem; max-height: calc(100vh - 5rem); overflow-y: auto; }
  .inicio-lateral .agenda-topo { flex-direction: column; align-items: flex-start; }
}

/* Início: hierarquia dos cartões (design 2) */
.totais-inicio { grid-template-columns: 3fr 2fr; }
@media (max-width: 760px) { .totais-inicio { grid-template-columns: 1fr; } }
.total-grande.destaque { background: linear-gradient(135deg, #0b0b0c 0, #2a0a12 100%); color: #fff; border-left: 0; border-top: 3px solid var(--neon); box-shadow: 0 6px 18px rgba(11, 11, 12, .25); }
.total-grande.destaque .rotulo { color: #c9ccce; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.total-grande.destaque strong { font-size: clamp(2rem, 3.4vw, 2.9rem); color: #fff; }
.total-grande.destaque .variacao.sobe { color: #6fe39a; }
.total-grande.destaque .variacao.desce { color: #ff8da1; }
.total-grande.destaque .variacao.sem-base, .total-grande.destaque .variacao.igual { color: #c9ccce; }
.total-grande.projetado strong { font-size: 1.9rem; }
.mini-numero .rotulo { display: flex; align-items: center; gap: .35rem; }
.mini-icone { font-size: 1rem; line-height: 1; }
.mini-numero .variacao { align-self: flex-start; padding: .05rem .45rem; border-radius: 999px; background: #eceded; font-size: .76rem; }
.mini-numero .variacao.sobe { background: #e3f2e7; }
.mini-numero .variacao.desce { background: #fbe4e8; }

/* Menu lateral no computador (design 3). No celular e em telas estreitas continua o menu de cima. */
.topo nav a .ic { display: none; }
@media (min-width: 1100px) {
  body:has(> .topo) { padding-left: 232px; }
  .topo {
    position: fixed; top: 0; left: 0; bottom: 0; width: 232px; z-index: 20; box-sizing: border-box;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .4rem; padding: 1rem .8rem;
    overflow-y: auto; border-bottom: 0; border-right: 2px solid var(--primaria); box-shadow: 2px 0 14px rgba(255, 42, 85, .25);
  }
  .topo .marca { padding: .2rem .4rem 1rem; border-bottom: 1px solid #262626; margin-bottom: .3rem; }
  .menu-botao { display: none; }
  .topo nav { flex-direction: column; flex-wrap: nowrap; gap: .1rem; flex: 1; order: 0; flex-basis: auto; }
  .topo nav a, .submenu > summary {
    display: flex; align-items: center; gap: .65rem; padding: .5rem .7rem; border-radius: 8px;
    text-decoration: none !important; font-size: .95rem;
  }
  .topo nav a .ic { display: inline-block; width: 1.3rem; text-align: center; filter: grayscale(.25); }
  .topo nav a:hover, .submenu > summary:hover { background: #1b1b1d; }
  .topo nav a.atual { background: linear-gradient(90deg, rgba(166, 15, 45, .55), rgba(166, 15, 45, .12)); color: #fff;
    box-shadow: inset 3px 0 0 var(--neon); }
  .topo nav .link-busca { border: 1px solid #333; margin-bottom: .4rem; color: #cfcfd1; }
  .submenu { margin-top: .3rem; }
  .submenu > summary { color: #8f9295; text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; cursor: default; pointer-events: none; }
  .submenu > summary::after { content: ""; }
  .submenu:not([open]) .submenu-itens, .submenu .submenu-itens { display: block; }
  .submenu-itens { position: static; border: 0; background: transparent; box-shadow: none; padding: 0; min-width: 0; }
  .submenu-itens a { padding: .5rem .7rem; }
  .topo .quem { flex-direction: column; align-items: flex-start; gap: .4rem; padding-top: .8rem; border-top: 1px solid #262626; }
  .topo .quem span { font-size: .8rem; }
  .topo .quem form { width: 100%; }
  .topo .quem button { width: 100%; }
  .nome-marca { font-size: 1.3rem; }
}
.topo nav .link-busca .ic { display: inline-block; }
@media (min-width: 1100px) { .link-busca .so-no-menu { display: inline; } }

/* Acabamento de cartões e tabelas (design 4) */
:root { --raio: 12px; --sombra: 0 1px 2px rgba(11, 11, 12, .06), 0 4px 14px rgba(11, 11, 12, .07); }
.cartao { box-shadow: var(--sombra); border-color: #cfd1d3; }
.tabela-rolagem { box-shadow: var(--sombra); }
th { text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; color: #4d5155; border-bottom: 2px solid #c3c5c7; }
tbody tr:nth-child(even) { background: rgba(11, 11, 12, .028); }
tbody tr:hover { background: rgba(166, 15, 45, .06); }
tfoot td { background: #ececeb; }
.tabela-rolagem th { position: sticky; top: 0; z-index: 1; }
button, .botao { box-shadow: 0 1px 0 rgba(0, 0, 0, .15), 0 3px 10px rgba(166, 15, 45, .25); transition: background .12s, transform .06s; }
button:active, .botao:active { transform: translateY(1px); }
.botao-secundario { transition: background .12s, border-color .12s; }
.botao-secundario:hover { border-color: var(--primaria); }
input, select, textarea { border-radius: 8px; transition: border-color .12s, box-shadow .12s; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--primaria); box-shadow: 0 0 0 3px rgba(166, 15, 45, .2); }
.etiqueta { border-radius: 999px; }
.aviso-ok, .aviso-erro, .aviso-alerta { border-radius: 10px; border-left: 4px solid currentColor; }
.filtros a { transition: background .12s, color .12s; }
.filtros a:hover:not(.ativo) { border-color: var(--primaria); color: var(--primaria); }
@media print { .cartao, .tabela-rolagem { box-shadow: none; } tbody tr:nth-child(even) { background: none; } }

/* Modo escuro (design 5): segue o sistema e pode ser trocado no botão do menu; a escolha fica só neste navegador. */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #111113; --cimento: #111113; --cartao: #1c1c1f; --texto: #ececec; --discreto: #a3a7ab; --borda: #323336;
  --primaria: #d6264d; --primaria-escura: #b01d3f; --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .4);
  --ok-fundo: #16301f; --ok-texto: #86d9a1; --erro-fundo: #3a141c; --erro-texto: #ff9bb0;
  --alerta-fundo: #3a2f12; --alerta-texto: #f0cf86;
}
:root[data-tema="escuro"] body { background: #111113; }
:where(:root[data-tema="escuro"]) a { color: #ff7a97; }   /* peso mínimo: botões e abas com cor própria continuam valendo */
:root[data-tema="escuro"] .botao, :root[data-tema="escuro"] button { color: #fff; }
:root[data-tema="escuro"] .filtros a.ativo { color: #fff; }
:root[data-tema="escuro"] input, :root[data-tema="escuro"] select, :root[data-tema="escuro"] textarea { background: #26262a; color: var(--texto); border-color: #3a3b3f; }
:root[data-tema="escuro"] th { background: #26262a; color: #b8bcc0; border-bottom-color: #3a3b3f; }
:root[data-tema="escuro"] tfoot td, :root[data-tema="escuro"] .cal-cabecalho span { background: #26262a; }
:root[data-tema="escuro"] tbody tr:nth-child(even) { background: rgba(255, 255, 255, .03); }
:root[data-tema="escuro"] tbody tr:hover { background: rgba(214, 38, 77, .12); }
:root[data-tema="escuro"] .cartao { border-color: #323336; }
:root[data-tema="escuro"] .etiqueta { background: #3a1822; color: #ffb3c2; }
:root[data-tema="escuro"] code { background: #26262a; }
:root[data-tema="escuro"] .botao-secundario { color: var(--texto); }
:root[data-tema="escuro"] .botao-secundario:hover, :root[data-tema="escuro"] .troca-vista a:hover { background: #2a2a2e; }
:root[data-tema="escuro"] .funil-barra { background: #2c2d30; }
:root[data-tema="escuro"] .coluna-quadro { background: #18181a; }
:root[data-tema="escuro"] .cartao-pessoa, :root[data-tema="escuro"] .cartao-lead { background: #202023; }
:root[data-tema="escuro"] .cal-dia:hover { background: #26262a; }
:root[data-tema="escuro"] .cal-dia.fora { background: #17171a; color: #6d7175; }
:root[data-tema="escuro"] tr.aniversario-hoje td, :root[data-tema="escuro"] .rotina-lista > li.rotina-agora { background: #2a1219; }
:root[data-tema="escuro"] .mini-numero .variacao { background: #2c2d30; }
:root[data-tema="escuro"] .mini-numero .variacao.sobe { background: #16301f; }
:root[data-tema="escuro"] .mini-numero .variacao.desce { background: #3a141c; }
:root[data-tema="escuro"] .selo-meta { background: #2c2d30; }
:root[data-tema="escuro"] .selo-meta.batida { background: #1d7a3a; }
:root[data-tema="escuro"] .variacao.sobe { color: #6fe39a; }
:root[data-tema="escuro"] .variacao.desce { color: #ff8da1; }
:root[data-tema="escuro"] .delta-positivo { color: #6fe39a; }
:root[data-tema="escuro"] .delta-negativo { color: #ff8da1; }
:root[data-tema="escuro"] .aviso-celular { background: #1c1c1f; }
:root[data-tema="escuro"] .previa-mensagem { background: #16301f; }
:root[data-tema="escuro"] h1 { color: #f2f2f2; }
:root[data-tema="escuro"] .nome-marca.grande { color: #f2f2f2; }
:root[data-tema="escuro"] .legenda-fatias .ponto, :root[data-tema="escuro"] .ponto.nao-realizado { background: #6d7175; }
:root[data-tema="escuro"] .pizza-relatorio .centro-pizza, :root[data-tema="escuro"] .centro-pizza { fill: var(--texto); }
.botao-tema { width: 100%; }
:root[data-tema="escuro"] .hora { color: #ff7a97; }
:root[data-tema="escuro"] .botoes-lead summary { background: #26262a; color: var(--texto); border-color: #3a3b3f; }
:root[data-tema="escuro"] .botoes-lead details[open] summary { background: var(--primaria); color: #fff; border-color: var(--primaria); }
:root[data-tema="escuro"] .contadores-lead .whats { color: #6fe39a; border-color: #2f6a45; }
:root[data-tema="escuro"] .rodape-lead { border-top-color: #3a3b3f; }
:root[data-tema="escuro"] .cabeca-coluna { color: #fff; }

:root[data-tema="escuro"] .alternar-vista a { color: var(--texto); }
:root[data-tema="escuro"] .alternar-vista a.ativo { color: #fff; }
:root[data-tema="escuro"] .lista-agenda .hora { color: #ff7a97; }
:root[data-tema="escuro"] .topo nav a { color: #d6d6d6; }
:root[data-tema="escuro"] .topo nav a:hover, :root[data-tema="escuro"] .topo nav a.atual { color: #fff; }
:root[data-tema="escuro"] .tela-tv a { color: #f2f2f2; }

/* Mural da equipe (D-086) */
.selo-menu { margin-left: auto; background: var(--neon); color: #fff; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 0 .45rem; min-width: 1.3rem; text-align: center; line-height: 1.35; }
.topo nav a:has(.selo-menu) { display: inline-flex; align-items: center; gap: .4rem; }
.mural-quadro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; align-items: start; }
@media (max-width: 900px) { .mural-quadro { grid-template-columns: 1fr; } }
.mural-coluna { background: rgba(11, 11, 12, .05); border-radius: var(--raio); padding: .5rem; }
.mural-coluna > header { display: flex; justify-content: space-between; align-items: center; padding: .2rem .4rem .5rem; }
.mural-coluna h2 { margin: 0; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; }
.coluna-a-fazer > header { border-bottom: 3px solid #8f9295; }
.coluna-fazendo > header { border-bottom: 3px solid #e58a9c; }
.coluna-feito > header { border-bottom: 3px solid var(--primaria); }
.mural-cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: .65rem .75rem; margin: .5rem 0; box-shadow: var(--sombra); }
.mural-cartao.atrasado { border-left: 4px solid var(--primaria); }
.mural-cartao h3 { margin: .35rem 0; font-size: 1rem; }
.mural-topo { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.mural-prazo { font-size: .8rem; color: var(--discreto); }
.vermelho { color: var(--primaria); font-weight: 700; }
.mural-linhas, .mural-participantes, .mural-fio { list-style: none; margin: .3rem 0; padding: 0; }
.mural-linhas li { display: flex; align-items: center; gap: .45rem; padding: .1rem 0; font-size: .9rem; }
.mural-linhas li.feito { color: var(--discreto); }
.mural-estado { flex: none; width: .7rem; height: .7rem; border-radius: 50%; background: #8f9295; }
.mural-estado.estado-fazendo { background: #e58a9c; }
.mural-estado.estado-feito { background: var(--primaria); }
.mural-rodape { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .4rem; }
.mural-rodape form { margin: 0; }
.mural-vazio { text-align: center; padding: .6rem; }
.mural-participantes li { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-top: 1px solid var(--borda); }
.mural-participantes li:first-child { border-top: 0; }
.mural-quem { flex: 1; min-width: 0; }
.mural-acoes { display: flex; gap: .3rem; flex-wrap: wrap; }
.mural-acoes form { margin: 0; }
.mural-fio li { padding: .6rem 0; border-top: 1px solid var(--borda); }
.mural-fio li:first-child { border-top: 0; }
.mural-fio p { margin: .2rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mural-descricao { white-space: pre-wrap; margin: .4rem 0 0; }
.mural-responder { margin-top: 1rem; border-top: 1px dashed var(--borda); padding-top: .8rem; }
.mural-remover { margin: 1rem 0; }

/* Ponte para o simulador (D-092) */
.simulador-oficial { border-left: 4px solid var(--primaria); }
.passos { margin: .3rem 0 0; padding-left: 1.2rem; }
.passos li { padding: .15rem 0; }
.etiqueta-ok { background: var(--ok-fundo); color: var(--ok-texto); }