/* TEMA "ASFALTO E SINAL" (08/10/2026, aprovado pelo dono na prévia "LocaFácil · novo visual").
   Camada por cima do CSS que já existe: só troca cores, fontes, cantos e tamanhos de toque.
   Nenhuma estrutura, id ou função muda — para desfazer, basta tirar o <link> deste arquivo.
   Grafite (#0E1A24) no lugar do roxo, verde-limão (#D4F04A) nos botões principais. */
:root {
    --la-grafite: #0E1A24;
    --la-grafite-2: #1B2A36;
    --la-sinal: #D4F04A;
    --la-sinal-escuro: #3E5200;
    --la-chao: #F3F5F2;
    --la-linha: #DDE3DE;
    --la-texto-suave: #52606B;
    --la-pago-fundo: #DCF2E4;  --la-pago: #155C38;
    --la-vence-fundo: #FEF3C7; --la-vence: #8A4B06;
    --la-atraso-fundo: #FDE4E1; --la-atraso: #9F1F14;
    --la-fonte-titulo: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --la-fonte: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --la-fonte-placa: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
}

body { font-family: var(--la-fonte); background: var(--la-chao); color: var(--la-grafite); }
.container { background: var(--la-chao); box-shadow: none; }
h1, h2, h3, .login-box h1, .cartao h2, .janela h2, .titulo-secao { font-family: var(--la-fonte-titulo); letter-spacing: -0.01em; }

/* Topo e faixa do contrato: grafite liso, sem degradê */
.topo { background: var(--la-grafite); border-radius: 0 0 22px 22px; padding: 20px 18px 22px; }
.topo h1 { font-family: var(--la-fonte-titulo); font-size: 1.25rem; }
.status-contrato { background: var(--la-grafite); box-shadow: 0 8px 20px -12px rgba(14, 26, 36, 0.7); }
.status-contrato .sc-selo.ok { background: var(--la-sinal); color: var(--la-grafite); }
.botao-menu { background: var(--la-grafite-2); border-radius: 12px; width: 44px; height: 44px; }

/* Entrar */
.login-box h1 { color: var(--la-grafite); font-weight: 800; font-size: 1.6rem; }
label { color: var(--la-texto-suave); }
input, select, textarea { border-color: var(--la-linha); border-radius: 12px; background: #fff; color: var(--la-grafite); }
input:focus, textarea:focus, select:focus { border-color: var(--la-grafite); box-shadow: 0 0 0 3px rgba(212, 240, 74, 0.55); }
.campo-senha .olho:focus-visible { outline-color: var(--la-grafite); }

/* Botões: o principal é verde-limão com texto grafite */
.btn { border-radius: 14px; min-height: 50px; font-family: var(--la-fonte); }
.btn-primario { background: var(--la-sinal); color: var(--la-grafite); }
.btn-primario:active { background: #C3DE3A; }
.btn-secundario { background: #fff; color: var(--la-grafite); border: 1px solid var(--la-linha); }

/* Resumo e itens */
.card-resumo { background: #fff; border-color: var(--la-linha); border-radius: 16px; }
.card-resumo .valor { color: var(--la-grafite); font-family: var(--la-fonte-titulo); }
.card-resumo .rotulo { color: var(--la-texto-suave); }
.item, .cartao, .cartao-locadora, .atalho-app, .item-check { border-color: var(--la-linha); border-radius: 16px; }
.item .valor-item { color: var(--la-grafite); }
.item .secundario, .grade-dados div span, .atalho-app small, .card-resumo .rotulo { color: var(--la-texto-suave); }
.link-acao, .cartao-locadora .linha a { color: var(--la-sinal-escuro); }
.placa { font-family: var(--la-fonte-placa); background: #fff; border-color: var(--la-grafite); color: var(--la-grafite); border-radius: 8px; letter-spacing: 0.06em; }

/* Situação: verde pago, âmbar vencendo, vermelho atrasado */
.badge { border-radius: 999px; }
.badge-pendente { background: var(--la-vence-fundo); color: var(--la-vence); }
.badge-pago, .badge-recebido { background: var(--la-pago-fundo); color: var(--la-pago); }
.badge-atrasada, .badge-vencida { background: var(--la-atraso-fundo); color: var(--la-atraso); }
.badge-ativa { background: #E6EBE6; color: var(--la-grafite); }

/* Pagar */
.aviso-portal, .destaque-venc { background: #EEF1ED; color: var(--la-grafite); border-radius: 14px; }
.btn-acao-boleto { border-radius: 12px; min-height: 44px; background: #fff; color: var(--la-grafite); border-color: var(--la-linha); display: inline-flex; align-items: center; }
.btn-acao-boleto:hover { background: #EEF1ED; }
.btn-acao-boleto.pix { background: var(--la-sinal); border-color: var(--la-sinal); color: var(--la-grafite); }
.btn-acao-boleto.pix:hover { background: #C3DE3A; }
.caixa-pix { border-color: var(--la-linha); background: #fff; border-radius: 16px; }
.caixa-pix .mensagem { color: var(--la-grafite); }
.pix-passo { color: var(--la-sinal-escuro); }

/* Atalhos da tela inicial: cores lisas, sem degradê */
.atalho-app:hover, .atalho-app:active { box-shadow: 0 8px 20px rgba(14, 26, 36, 0.10); }
.atalho-app b { color: var(--la-grafite); }
.atalho-app.escuro, .atalho-app.destaque { background: var(--la-grafite); }
.atalho-app.escuro b, .atalho-app.destaque b { color: var(--la-sinal); }
.atalho-app.escuro small, .atalho-app.destaque small { color: #C9D3DA; }
.atalho-app.oleo { background: #B45309; }
.atalho-app.alerta { background: #B42318; }
.atalho-pix { background: var(--la-grafite); color: var(--la-sinal); }

/* Menu lateral e abas */
#telaApp .aba.ativa { border-left-color: var(--la-sinal); background: #EEF1ED; color: var(--la-grafite); }
.aba.ativa { color: var(--la-grafite); border-bottom-color: var(--la-sinal); }
.segmento.ativo { background: var(--la-grafite); border-color: var(--la-grafite); color: #fff; }
.precad .doc, .caixa-pix { border-color: var(--la-linha); background: #fff; }
.precad .grupo { color: var(--la-grafite); border-top-color: var(--la-linha); }

/* Barra de baixo */
.barra-inferior { border-top-color: var(--la-linha); box-shadow: 0 -4px 14px rgba(14, 26, 36, 0.06); }
.barra-pill { min-height: 40px; }

/* Peças que ainda vinham em roxo */
.entrada-recursos div { background: #fff; border-color: var(--la-linha); color: var(--la-grafite); border-radius: 14px; }
.vist-slot .num, .barra-inferior .avatar-mini { background: #EEF1ED; color: var(--la-grafite); }
.vist-slot label.tirar { background: var(--la-grafite); color: var(--la-sinal); }
.caixa-pedido { background: #fff; border-color: var(--la-linha); border-radius: 14px; }
.caixa-pedido .titulo { color: var(--la-grafite); }
#cartaoIndicacao { background: var(--la-grafite) !important; box-shadow: 0 10px 26px rgba(14, 26, 36, 0.28) !important; }
#cartaoIndicacao #indTitulo { color: var(--la-sinal); }
#resumoProximaCobranca { background: var(--la-grafite) !important; color: #fff; border-radius: 16px !important; }
#emgLigar { background: var(--la-grafite) !important; color: var(--la-sinal) !important; }
a[onclick*="esqueciSenhaPortal"] { color: var(--la-sinal-escuro) !important; }

/* ---------- Início e Pagar no formato da prévia (08/10/2026) ---------- */
.cpp { background: var(--la-grafite); color: #fff; border-radius: 20px; padding: 18px 18px 16px; margin: 0 0 12px; }
.cpp[hidden], .ultimo-pag[hidden] { display: none; }
.cpp-quando { font-size: 0.85rem; color: #C9D3DA; }
.cpp-valor { font-family: var(--la-fonte-titulo); font-size: 2.3rem; font-weight: 800; letter-spacing: -0.03em; color: var(--la-sinal); line-height: 1.1; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.cpp-data { font-size: 0.88rem; color: #C9D3DA; margin-bottom: 14px; }
.cpp-botao { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; border: 0; border-radius: 14px; background: var(--la-sinal); color: var(--la-grafite); font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; }
.cpp-botao:active { background: #C3DE3A; }
.cpp-botao:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cpp-aviso { display: inline-block; background: rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 8px 12px; font-size: 0.85rem; }
.cpp.cpp-atraso { box-shadow: inset 4px 0 0 #F97066; }
.cpp.cpp-atraso .cpp-quando { color: #FDA29B; font-weight: 700; }
.ultimo-pag { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--la-linha); border-radius: 16px; padding: 12px 14px; margin: 0 0 16px; }
.ultimo-pag-ok { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--la-pago-fundo); color: var(--la-pago); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.ultimo-pag-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ultimo-pag-txt b { color: var(--la-grafite); font-size: 0.92rem; }
.ultimo-pag-txt small { color: var(--la-texto-suave); font-size: 0.8rem; }
.ultimo-pag-link { flex: 0 0 auto; background: none; border: 0; color: var(--la-sinal-escuro); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }

/* Tela Pagar */
#janelaPagar .caixa { padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
#janelaPagar h2 { font-family: var(--la-fonte-titulo); font-size: 1.2rem; color: var(--la-grafite); }
.pagar-valor { font-family: var(--la-fonte-titulo); font-size: 2rem; font-weight: 800; color: var(--la-grafite); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pagar-venc { color: var(--la-texto-suave); font-size: 0.88rem; margin-bottom: 14px; }
#janelaPagar .segmentos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #EEF1ED; border-radius: 14px; padding: 4px; margin-bottom: 14px; }
#janelaPagar .segmento { min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--la-grafite); font: inherit; font-weight: 700; cursor: pointer; }
#janelaPagar .segmento.ativo { background: var(--la-grafite); color: #fff; }
#janelaPagar .segmento:disabled { opacity: 0.4; cursor: not-allowed; }
.pagar-qr { text-align: center; margin-bottom: 10px; }
.pagar-qr img { width: 210px; height: 210px; border-radius: 12px; border: 1px solid var(--la-linha); background: #fff; }
.pagar-codigo { width: 100%; box-sizing: border-box; font-family: var(--la-fonte-placa); font-size: 0.78rem; border: 1px solid var(--la-linha); border-radius: 12px; padding: 10px; margin: 0 0 10px; resize: none; color: var(--la-grafite); background: #F7F9F6; }
#janelaPagar .btn { width: 100%; display: flex; align-items: center; justify-content: center; text-decoration: none; margin-bottom: 8px; }
.pagar-nota { font-size: 0.82rem; color: var(--la-texto-suave); margin: 4px 0 12px; }
.pagar-fechar { margin-top: 4px; }

/* Barra de baixo com navegação */
.barra-inferior { gap: 6px; }
.nav-app { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; min-width: 0; }
.nav-app button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; padding: 4px 2px; border: 0; border-radius: 12px; background: transparent; color: var(--la-texto-suave); font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.nav-app button span { font-size: 1.15rem; line-height: 1; filter: grayscale(1); opacity: 0.7; }
.nav-app button.ativo { color: var(--la-grafite); background: #EEF1ED; }
.nav-app button.ativo span { filter: none; opacity: 1; }
.nav-app button:focus-visible { outline: 2px solid var(--la-grafite); outline-offset: 1px; }
.barra-inferior .nome-usuario { display: none; }
.barra-inferior .barra-pill.whatsapp { display: none; }
.barra-inferior .barra-pill.sair { padding: 8px 10px; }
.conteudo { padding-bottom: 96px; }
.whats-flutuante { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
#janelaPagar .btn { margin-top: 0; }