:root{
    --preto: #141414;
    --preto-suave: #232323;
    --dourado: #C9A227;
    --dourado-claro: #EFC050;
    --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); }

  .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;
  }
  .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; }