:root{
    --preto: #141414;
    --preto-suave: #232323;
    --dourado: #C9A227;
    --dourado-claro: #EFC050;
    /* Fundo claro do dourado, no mesmo padrão de --verde-fundo/--laranja-fundo. Usado pelo
       selo "Pipeline" no funil (2026-08-12). */
    --dourado-fundo: #F7EFD5;
    --branco: #ffffff;
    --cinza-fundo: #F4F3F0;
    --cinza-borda: #E4E2DC;
    --texto-secundario: #6B6A64;
    --vermelho: #B23A2E;
    --vermelho-fundo: #FBEAE8;
    --laranja: #B5760D;
    --laranja-fundo: #FCF1DD;
    --verde: #2E7D4F;
    --verde-fundo: #E7F5EC;
  }

  * { box-sizing: border-box; }

  body{
    margin:0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--cinza-fundo);
    color: var(--preto);
    -webkit-tap-highlight-color: transparent;
  }

  .app{
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--branco);
    display: flex;
    flex-direction: column;
  }

  header{
    background: var(--preto);
    color: var(--branco);
    padding: 18px 16px 14px;
    position: sticky;
    top: 0;
    z-index: 5;
  }

  header .top-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom: 12px;
  }

  header h1{
    font-size: 19px;
    font-weight: 600;
    margin: 0;
    letter-spacing: 0.2px;
  }

  header .sub{
    font-size: 12.5px;
    color: #C8C6BE;
    margin-top: 2px;
  }

  .btn-novo{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--dourado);
    color: var(--preto);
    border: none;
    font-size: 22px;
    line-height: 1;
    font-weight: 600;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .btn-novo:active{ transform: scale(0.94); }

  .search-wrap{ position: relative; }
  .search-wrap input{
    width:100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: none;
    font-size: 15px;
    background: #2C2C2C;
    color: var(--branco);
  }
  .search-wrap input::placeholder{ color: #9A9990; }
  .search-wrap input:focus{ outline: 2px solid var(--dourado); }

  main{
    flex:1;
    padding: 14px 14px 90px;
  }

  .contador{
    font-size: 12.5px;
    color: var(--texto-secundario);
    margin: 4px 4px 12px;
  }

  .card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    background: var(--branco);
    border: 1px solid var(--cinza-borda);
    border-radius: 14px;
    padding: 13px 14px;
    margin-bottom: 10px;
  }

  .card .info{ min-width:0; }

  .card .nome{
    font-size: 15.5px;
    font-weight: 600;
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .badge{
    display:inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
  }
  .badge.critico{ background: var(--vermelho-fundo); color: var(--vermelho); }
  .badge.atencao{ background: var(--laranja-fundo); color: var(--laranja); }
  .badge.ok{ background: var(--verde-fundo); color: var(--verde); }

  .badge-nunca{ background: var(--vermelho-fundo); color: var(--vermelho); }

  .btn-visitar{
    flex-shrink:0;
    background: var(--preto);
    color: var(--dourado-claro);
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    cursor:pointer;
  }
  .btn-visitar:active{ transform: scale(0.96); }

  .vazio{
    text-align:center;
    padding: 50px 20px;
    color: var(--texto-secundario);
    font-size: 14.5px;
  }

  /* overlay / modal */
  .overlay{
    position: fixed;
    inset: 0;
    background: rgba(20,20,20,0.55);
    display:none;
    align-items:flex-end;
    justify-content:center;
    z-index: 50;
  }
  .overlay.aberto{ display:flex; }

  .sheet{
    background: var(--branco);
    width: 100%;
    max-width: 480px;
    border-radius: 20px 20px 0 0;
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
    animation: subir 0.18s ease-out;
  }
  @keyframes subir{
    from{ transform: translateY(30px); opacity:0; }
    to{ transform: translateY(0); opacity:1; }
  }

  .sheet h2{
    font-size: 17px;
    margin: 0 0 4px;
    font-weight: 600;
  }
  .sheet .sheet-sub{
    font-size: 13.5px;
    color: var(--texto-secundario);
    margin: 0 0 18px;
  }

  .linha-status{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--cinza-fundo);
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 13.5px;
    color: var(--preto);
  }
  .linha-status .ponto{
    width: 8px; height:8px; border-radius:50%;
    background: var(--cinza-borda);
    flex-shrink:0;
  }
  .linha-status.ativo .ponto{ background: var(--verde); }
  .linha-status.erro .ponto{ background: var(--vermelho); }

  .foto-area{
    margin: 6px 0 18px;
  }
  .foto-label{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 8px;
    border: 1.5px dashed var(--cinza-borda);
    border-radius: 12px;
    padding: 16px;
    font-size: 13.5px;
    color: var(--texto-secundario);
    cursor:pointer;
  }
  .foto-preview{
    margin-top: 10px;
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-radius: 12px;
    display:none;
  }

  .sheet-botoes{ display:flex; flex-direction:column; gap:10px; }

  .btn-confirmar{
    background: var(--preto);
    color: var(--dourado-claro);
    border:none;
    padding: 14px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor:pointer;
  }
  .btn-confirmar:active{ transform: scale(0.98); }

  .btn-cancelar{
    background: transparent;
    color: var(--texto-secundario);
    border:none;
    padding: 10px;
    font-size: 14px;
    cursor:pointer;
  }

  .campo{
    margin-bottom: 14px;
  }
  .campo label{
    display:block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--preto);
  }
  .campo input{
    width:100%;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid var(--cinza-borda);
    font-size: 15px;
  }
  .campo input:focus{ outline: 2px solid var(--dourado); border-color: transparent; }
  .campo input.invalido{ border-color: var(--vermelho); }

  .aviso-telefone{
    font-size: 12.5px;
    margin-top: 6px;
    display:none;
  }
  .aviso-telefone.erro{ display:block; color: var(--vermelho); }
  .aviso-telefone.vinculado{ display:block; color: var(--laranja); }

  /* Recado que fica SEMPRE visível abaixo de um campo (de onde veio o preço, de quando ele é,
     o quanto a proposta está abaixo da tabela). Classe própria porque `.aviso-telefone` nasce
     com `display:none` e só aparece com `.erro`/`.vinculado` — usar aquela aqui deixaria o
     texto invisível, que foi exatamente o erro pego na revisão desta tela. */
  .nota-campo{
    font-size: 12.5px;
    line-height: 1.45;
    margin-top: 6px;
    color: var(--texto-secundario);
  }
  .nota-campo:empty{ margin-top: 0; }

  /* O que a tabela de preços do CVCRM diz para a unidade escolhida — a origem dos campos
     pré-preenchidos logo abaixo. */
  .nota-tabela{
    background: var(--dourado-fundo);
    color: var(--preto);
    font-size: 12.5px;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 16px;
  }
  .nota-tabela em{ color: var(--texto-secundario); }

  .toast{
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translate(-50%, 20px);
    background: var(--preto);
    color: var(--branco);
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 13.5px;
    font-weight: 500;
    opacity: 0;
    transition: all 0.25s ease;
    z-index: 60;
    max-width: 90%;
    text-align:center;
    /* Achado testando a proposta com permuta em 2026-08-14: o toast fica bem em cima do botão
       "Salvar" de um modal comprido, e por ~2,6s ROUBA o toque de quem tenta clicar de novo
       depois de corrigir o erro que o próprio toast avisou — o clique acerta o toast (que não
       faz nada) em vez do botão embaixo. Ninguém interage com o toast; ele só informa. */
    pointer-events: none;
  }
  .toast.mostrar{
    transform: translate(-50%, 0);
    opacity: 1;
  }

  .nota-teste{
    background: var(--laranja-fundo);
    color: var(--laranja);
    font-size: 12px;
    padding: 8px 14px;
    text-align:center;
  }

  .usuario-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    margin-bottom: 12px;
  }
  .usuario-row select{
    background: #2C2C2C;
    color: var(--branco);
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12.5px;
  }
  .btn-roteiro-toggle{
    background: transparent;
    border: 1px solid #4A4A4A;
    color: var(--dourado-claro);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    cursor:pointer;
  }
  .btn-roteiro-toggle.ativo{
    background: var(--dourado);
    color: var(--preto);
    border-color: var(--dourado);
  }

  .checkbox-rota{
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--cinza-borda);
    flex-shrink: 0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 13px;
    color: var(--branco);
  }
  .checkbox-rota.marcado{
    background: var(--preto);
    border-color: var(--preto);
  }
  .checkbox-rota.bloqueado{
    border-color: var(--cinza-borda);
    background: var(--cinza-fundo);
  }

  .badge.emrota{
    background: #F4E9C9;
    color: #8A6D1F;
  }

  .card.selecionavel{ cursor:pointer; }
  .card.bloqueada{ opacity: 0.75; }

  .barra-roteiro{
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: var(--preto);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display:none;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    z-index: 40;
  }
  .barra-roteiro.aberta{ display:flex; }
  .barra-roteiro .contagem{
    color: var(--branco);
    font-size: 13.5px;
  }
  .barra-roteiro button{
    border:none;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 600;
    cursor:pointer;
  }
  .btn-gerar{
    background: var(--dourado);
    color: var(--preto);
  }
  .btn-gerar:disabled{
    background: #4A4A4A;
    color: #9A9990;
    cursor: default;
  }
  .btn-limpar-selecao{
    background: transparent;
    color: #C8C6BE;
  }

  /* ----- tela de login (adicionada em 2026-08-11) ----- */

  .tela-login{
    min-height: 100vh;
    background: var(--preto);
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 24px;
  }

  .login-caixa{
    width: 100%;
    max-width: 340px;
  }

  .login-caixa h1{
    color: var(--branco);
    font-size: 30px;
    font-weight: 600;
    margin: 0;
    text-align:center;
  }

  .login-sub{
    color: var(--dourado);
    text-align:center;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 4px 0 32px;
  }

  .login-caixa .campo label{ color: #C8C6BE; }

  .login-caixa select,
  .login-caixa input{
    width:100%;
    padding: 13px 12px;
    border-radius: 10px;
    border: 1px solid #3A3A3A;
    background: #2C2C2C;
    color: var(--branco);
    font-size: 16px;
  }
  .login-caixa select:focus,
  .login-caixa input:focus{ outline: 2px solid var(--dourado); border-color: transparent; }

  /* A senha é numérica: espaçar os dígitos deixa óbvio quantos já foram digitados. */
  #loginPin{ letter-spacing: 10px; text-align:center; font-size: 20px; }

  /* Dourado, não preto: no fundo preto do login o botão padrão sumia. */
  .login-caixa .btn-confirmar{
    width:100%;
    margin-top: 8px;
    background: var(--dourado);
    color: var(--preto);
  }

  .usuario-nome{
    color: var(--branco);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ----- endereço no card (adicionado em 2026-08-11) ----- */

  .card-endereco{
    font-size: 12.5px;
    color: var(--texto-secundario);
    margin: 6px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }
  /* Nenhum lead do CVCRM vem com endereço, então "sem endereço" é o estado comum no começo:
     precisa parecer um convite a preencher, não um erro. */
  .card-endereco.sem{ color: var(--laranja); font-weight: 600; }

  /* ----- resumo da visita (adicionado em 2026-08-12) ----- */

  /* Linha de ajuda embaixo de um campo: explica o porquê sem virar mais um rótulo. */
  .ajuda-campo{
    font-size: 12px;
    color: var(--texto-secundario);
    margin: 6px 0 0;
  }

  /* Resumo da última visita, no card. Fica recuado com uma barra dourada à esquerda para ler
     como "fala de outra pessoa", e não como mais um dado do cadastro da imobiliária.
     Limitado a 3 linhas: o card é uma lista de escolha, não a tela de leitura. */
  .card-resumo{
    font-size: 12.5px;
    color: var(--texto-secundario);
    margin: 8px 0 0;
    padding-left: 8px;
    border-left: 2px solid var(--dourado);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card-resumo .quem{ color: var(--preto); font-weight: 600; }

  /* ----- funil: pipeline x forecast (adicionado em 2026-08-12) ----- */

  /* Os dois números que resumem tudo, lado a lado, como no topo da planilha. */
  .funil-topo{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
  }
  .funil-cartao{
    display:flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 12px;
    border-radius: 12px;
    border: 1px solid var(--cinza-borda);
    background: var(--branco);
    /* Sem isso um VGV grande empurra o cartão vizinho e quebra a grade em celular. */
    min-width: 0;
  }
  .funil-cartao.pipeline{ border-left: 4px solid var(--dourado); }
  .funil-cartao.forecast{ border-left: 4px solid var(--texto-secundario); }
  .funil-rotulo{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--texto-secundario);
  }
  /* Valores em milhões estouram o cartão em tela de celular; quebrar palavra é feio, mas some
     dinheiro da tela é pior. Ver o bug de formatação que já aconteceu no dashboard. */
  .funil-numero{
    font-size: 20px;
    font-weight: 700;
    color: var(--preto);
    overflow-wrap: anywhere;
    line-height: 1.15;
  }
  .funil-sub{ font-size: 11.5px; color: var(--texto-secundario); }
  /* O valor arredondado do cartão ("R$ 3.8M") é para bater o olho; o exato fica logo abaixo,
     miúdo, para quem precisa do número de verdade não ter que abrir outra tela. */
  .funil-exato{
    font-size: 11px;
    color: var(--texto-secundario);
    overflow-wrap: anywhere;
  }

  .funil-nota{
    font-size: 12px;
    color: var(--texto-secundario);
    margin: 0 0 14px;
    line-height: 1.45;
  }
  /* A ressalva do forecast não pode passar como rodapé: é o motivo de faltar um número. */
  .funil-nota.destaque{
    background: var(--cinza-fundo);
    border-left: 3px solid var(--laranja);
    border-radius: 8px;
    padding: 10px 12px;
  }

  .funil-secao{ margin-bottom: 18px; }
  .funil-secao h3{
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-secundario);
    margin: 0 0 8px;
  }

  /* ----- atividades (adicionado em 2026-08-14) ----- */

  .ativ-resumo{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
  }
  .ativ-total{
    display:flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--cinza-borda);
    background: var(--branco);
  }
  .ativ-tipo-chip{
    display:flex;
    align-items:center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 20px;
    background: var(--cinza-fundo);
    font-size: 12.5px;
  }
  .ativ-tipo-chip .qtd{ font-weight: 700; color: var(--preto); }
  .ativ-tipo-chip .rotulo{ color: var(--texto-secundario); }

  /* Uma cor por tipo, só para diferenciar o card na lista de relance — mesma paleta usada no
     resto da tela (dourado/laranja/verde/vermelho), sem inventar cor nova. */
  .badge.tipo-acao_vendas{ background: var(--dourado-fundo); color: #8A6D1B; }
  .badge.tipo-treinamento{ background: var(--verde-fundo); color: var(--verde); }
  .badge.tipo-avaliacao{ background: var(--laranja-fundo); color: var(--laranja); }
  .badge.tipo-gravacao_midia{ background: var(--cinza-fundo); color: var(--texto-secundario); }

  /* ----- relatório: dashboard geral / por usuário (adicionado em 2026-08-14) ----- */

  .relatorio-periodo{
    align-items: flex-end;
    margin-bottom: 10px;
  }
  .periodo-campo{
    margin-bottom: 0;
    flex: 1 1 130px;
    min-width: 130px;
  }
  .relatorio-periodo .btn-mini{
    height: 42px;
  }

  /* Tabela larga em tela estreita rola dentro da própria caixa — nunca empurra a página
     inteira para o lado (rolagem lateral no celular já foi bug aqui antes). */
  .tabela-rolagem{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .funil-tabela{
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--branco);
    border-radius: 10px;
    overflow: hidden;
  }
  .funil-tabela th,
  .funil-tabela td{
    padding: 9px 10px;
    text-align: left;
    border-bottom: 1px solid var(--cinza-borda);
    white-space: nowrap;
  }
  .funil-tabela th{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-secundario);
    background: var(--cinza-fundo);
  }
  .funil-tabela td.num,
  .funil-tabela th.num{ text-align: right; }
  .funil-tabela tr:last-child td{ border-bottom: none; }

  .badge.pipeline{ background: var(--dourado-fundo); color: #8A6D1B; }
  .badge.forecast{ background: var(--cinza-fundo); color: var(--texto-secundario); }
  .funil-valor{ color: var(--dourado); font-weight: 700; }

  /* ----- módulo de atendimentos e propostas (adicionado em 2026-08-11) ----- */

  /* Abas no topo. Ficam no header preto, junto do resto da navegação. */
  .abas{
    display:flex;
    gap: 4px;
    margin-bottom: 12px;
  }
  .abas .aba{
    flex: 1;
    /* Sem isso, um item de flex não encolhe além do tamanho da palavra mais longa — com 5 abas
       ("Atendimentos", "Relatório"...) isso estourava a tela e criava rolagem lateral no app
       inteiro, achado ao testar a aba Relatório em 2026-08-14. */
    min-width: 0;
    background: transparent;
    border: 1px solid #3A3A3A;
    color: #C8C6BE;
    border-radius: 9px;
    padding: 8px 3px;
    font-size: 12px;
    font-weight: 600;
    cursor:pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .abas .aba.ativa{
    background: var(--dourado);
    border-color: var(--dourado);
    color: var(--preto);
  }

  /* Pendentes / Concluídos, dentro da aba de atendimentos. */
  .sub-abas{
    display:flex;
    gap: 6px;
    margin: 2px 0 10px;
  }
  .sub-abas .sub-aba{
    flex:1;
    background: var(--branco);
    border: 1px solid var(--cinza-borda);
    color: var(--texto-secundario);
    border-radius: 9px;
    padding: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor:pointer;
  }
  .sub-abas .sub-aba.ativa{
    background: var(--preto);
    border-color: var(--preto);
    color: var(--dourado-claro);
  }

  /* O card de atendimento tem mais linhas que o de imobiliária, então empilha em vez de
     ficar lado a lado com o botão. */
  .card-atend{
    display:block;
    background: var(--branco);
    border: 1px solid var(--cinza-borda);
    border-radius: 14px;
    padding: 13px 14px;
    margin-bottom: 10px;
  }
  .card-atend .nome{
    font-size: 15.5px;
    font-weight: 600;
    margin: 0 0 6px;
    /* Nome de cliente pode ser bem comprido: corta com reticências em vez de esticar o card. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .card-atend .detalhe{
    font-size: 12.5px;
    color: var(--texto-secundario);
    margin: 4px 0 0;
    overflow-wrap: anywhere;
  }
  .card-atend .acoes{
    display:flex;
    gap: 8px;
    margin-top: 12px;
  }
  .card-atend .acoes button{ flex:1; }

  .badge.hoje{ background: var(--laranja-fundo); color: var(--laranja); }
  .badge.atrasado{ background: var(--vermelho-fundo); color: var(--vermelho); }
  .badge.futuro{ background: var(--cinza-fundo); color: var(--texto-secundario); }
  .badge.concluido{ background: var(--verde-fundo); color: var(--verde); }

  /* Mesmo visual dos inputs, para o formulário não parecer remendado. */
  .campo textarea,
  .campo select{
    width:100%;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid var(--cinza-borda);
    font-size: 15px;
    font-family: inherit;
    background: var(--branco);
    color: var(--preto);
    resize: vertical;
  }
  .campo textarea:focus,
  .campo select:focus{ outline: 2px solid var(--dourado); border-color: transparent; }
  .campo textarea.invalido{ border-color: var(--vermelho); }

  .linha-check{
    display:flex;
    align-items:center;
    gap: 10px;
    margin-bottom: 14px;
  }
  /* accent-color troca o azul padrão do navegador pelo dourado da GT Home. */
  .linha-check input{ width: 20px; height: 20px; flex-shrink:0; accent-color: var(--dourado); }
  .linha-check label{
    font-size: 14px;
    font-weight: 600;
    margin: 0;
  }

  .btn-secundario{
    background: var(--cinza-fundo);
    color: var(--preto);
    border: 1px solid var(--cinza-borda);
    padding: 13px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 600;
    cursor:pointer;
  }
  .btn-secundario:active{ transform: scale(0.98); }

  /* Aviso honesto de que a proposta NÃO vai para o CVCRM. Some da tela seria pior:
     a equipe acharia que espelhou. */
  .nota-aviso{
    background: var(--laranja-fundo);
    color: var(--laranja);
    font-size: 12.5px;
    line-height: 1.45;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 16px;
  }

  /* Botão pequeno dentro do card de atendimento. */
  .btn-mini{
    background: var(--preto);
    color: var(--dourado-claro);
    border:none;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor:pointer;
  }
  .btn-mini.claro{
    background: var(--cinza-fundo);
    color: var(--preto);
    border: 1px solid var(--cinza-borda);
  }
  .btn-mini:active{ transform: scale(0.96); }