/* 4Trucker (antes FrotaZ Caminhoneiro) — visual (paleta azul-marinho + laranja do FrotaZ).
   Política de segurança (CSP): nada de style="…" no HTML; cor e forma só aqui.
   Ícones de botão: máscara de SVG ligada ao id (regra #ir-…::before). Botão com a classe "ic" e sem a regra
   aparece como QUADRADO CHEIO: ao criar um botão novo com ícone, crie também a regra abaixo. */
:root {
  --fundo: #eef2f7;
  --cartao: #ffffff;
  --texto: #0f172a;
  --suave: #4b5b6e;
  --borda: #d5dde7;
  --primaria: #102c42;
  --primaria-hover: #1b4466;
  --primaria-suave: #e7eef5;
  --destaque: #ea580c;          /* laranja: detalhes */
  --destaque-texto: #c2410c;    /* laranja escuro: botões e textos (contraste com o branco) */
  --destaque-hover: #9a3412;
  --destaque-fundo: #fff3e8;
  --foco: #f59e0b;
  --erro: #b91c1c;
  --erro-fundo: #fee2e2;
  --ok: #166534;
  --ok-fundo: #dcfce7;
  --atencao: #92400e;
  --atencao-fundo: #fef3c7;
  --aviso-fundo: #e0f2fe;
  --sombra: 0 1px 2px rgba(16, 44, 66, .06), 0 6px 18px rgba(16, 44, 66, .07);
  --raio: 16px;
  --superficie: #f8fafc;
  --superficie-2: #e2e8f0;
  --destaque-escuro: #9a3412;
  --fundo-marca: #102c42;
  --fundo-marca-2: #1d4a6e;
  --destaque-claro: #e2621a;
  --sombra-destaque: rgba(194, 65, 12, .22);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.45;
}
img { max-width: 100%; }
a { color: var(--primaria); font-weight: 600; text-underline-offset: 3px; }
a:hover { color: var(--destaque-texto); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
main:focus { outline: none; }
[hidden] { display: none !important; }

.pular { position: absolute; left: -9999px; top: 0; z-index: 10; padding: 10px 16px; background: var(--cartao); color: var(--primaria); }
.pular:focus { left: 8px; top: 8px; }

/* ---------- TOPO ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--fundo-marca);
  color: #fff;
  border-bottom: 4px solid var(--destaque);
  padding-top: env(safe-area-inset-top);
}
.topo-dentro {
  max-width: 1040px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-height: 44px; }
.marca:hover { color: #fff; }
.marca img { width: 40px; height: 40px; border-radius: 8px; display: block; }
.marca-nome { display: flex; flex-direction: column; line-height: 1.1; }
.marca-nome strong { font-size: 20px; letter-spacing: .3px; }
.marca-nome span { font-size: 14px; opacity: .85; font-weight: 500; }
.topo-acoes { margin-left: auto; display: flex; gap: 8px; }

/* ---------- ÁREA PRINCIPAL ---------- */
main {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 32px;
}
main.largo { max-width: 1040px; }
h1 { font-size: 27px; line-height: 1.2; margin: 6px 0 14px; color: var(--primaria); }
h2 { font-size: 21px; line-height: 1.25; margin: 0 0 10px; color: var(--primaria); }
p { margin: 0 0 12px; }
.sub { color: var(--suave); margin-top: -6px; overflow-wrap: anywhere; }
.centro { text-align: center; }
.nota { text-align: center; color: var(--suave); }
.dica { display: block; color: var(--suave); font-size: 15px; margin: 4px 0 0; }
.rotulo { color: var(--suave); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin: 0; }
.grande { font-size: 23px; font-weight: 800; color: var(--primaria); margin: 2px 0 4px; }
.carregando { color: var(--suave); text-align: center; padding: 40px 0; }
.rodape { text-align: center; color: var(--suave); font-size: 14px; padding: 16px; }

.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 18px;
  margin: 0 0 16px;
}
.cartao > :last-child { margin-bottom: 0; }

/* ---------- BOTÕES ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 8px 20px;
  border: 2px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.botao:disabled { cursor: not-allowed; opacity: .6; }
.botao.largo { display: flex; width: 100%; }
.primario { background: var(--destaque-texto); color: #fff; }
.primario:hover:not(:disabled) { background: var(--destaque-hover); color: #fff; }
.secundario { background: var(--cartao); color: var(--primaria); border-color: var(--primaria); }
.secundario:hover:not(:disabled) { background: var(--primaria-suave); color: var(--primaria); }
.perigo { background: var(--cartao); color: var(--erro); border-color: var(--erro); }
.perigo:hover:not(:disabled) { background: var(--erro-fundo); color: var(--erro); }
.perigo-cheio { background: var(--erro); color: #fff; }
.perigo-cheio:hover:not(:disabled) { background: #7f1d1d; color: #fff; }
.topo-btn { min-height: 44px; padding: 6px 14px; font-size: 16px; background: transparent; color: #fff; border-color: rgba(255, 255, 255, .85); }
.topo-btn:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.topo-btn:focus-visible { outline-color: #fff; }
.voltar { margin-bottom: 14px; }
.lado { display: flex; flex-wrap: wrap; gap: 10px; }
.lado > * { flex: 1 1 180px; }

/* Ícones (máscara de SVG; a cor vem do texto do botão). */
.ic::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
:root {
  --ic-conta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
  --ic-inicio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h5v-6h4v6h5V10'/%3E%3C/svg%3E");
  --ic-sair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h5v16h-5'/%3E%3Cpath d='M10 8l-4 4 4 4M6 12h10'/%3E%3C/svg%3E");
  --ic-entrar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h5v16h-5'/%3E%3Cpath d='M9 8l4 4-4 4M3 12h10'/%3E%3C/svg%3E");
  --ic-caminhao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h12v9H2zM14 10h4l3 3v3h-7'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E");
  --ic-mais: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --ic-busca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  --ic-atualizar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E");
  --ic-despesas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E");
  --ic-documentos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6v18h12V7z'/%3E%3Cpath d='M14 3v4h4M9 13h6M9 17h6'/%3E%3C/svg%3E");
  --ic-cadeado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --ic-frete: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M8 7h8M8 11h2M12 11h2M16 11h0M8 15h2M12 15h2M8 18h2M12 18h4'/%3E%3C/svg%3E");
  --ic-viagens: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Cpath d='M8.5 18H15a3 3 0 0 0 0-6H9a3 3 0 0 1 0-6h6.5'/%3E%3C/svg%3E");
  --ic-dinheiro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M6 9v.01M18 15v.01'/%3E%3C/svg%3E");
  --ic-instalar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2'/%3E%3Cpath d='M12 7v7M9 11l3 3 3-3M10 18h4'/%3E%3C/svg%3E");
  --ic-indicar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E");
  --ic-aparencia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3v18' /%3E%3Cpath d='M12 3a9 9 0 0 1 0 18' fill='black'/%3E%3C/svg%3E");
  --ic-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  --ic-desempenho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E");
  --ic-chave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0 5 5l-9.4 9.4a2.1 2.1 0 0 1-3-3l9.4-9.4a4 4 0 0 0-2-2z'/%3E%3C/svg%3E");
  --ic-painel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17a9 9 0 1 1 18 0'/%3E%3Cpath d='M12 17l4-5'/%3E%3Ccircle cx='12' cy='17' r='1.5'/%3E%3C/svg%3E");
  --ic-etiqueta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12l-8 8-9-9V3h8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
  --ic-ficha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V2h6v2M9 10h6M9 14h6M9 18h3'/%3E%3C/svg%3E");
  --ic-pneu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v5.5M12 16v5.5M2.5 12H8M16 12h5.5'/%3E%3C/svg%3E");
  --ic-calendario: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M9 15l2 2 4-4'/%3E%3C/svg%3E");
  --ic-visao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
  --ic-livro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M4 21a2 2 0 0 1 2-2h13v2H6'/%3E%3C/svg%3E");
  --ic-pagar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E");
}
#ir-conta::before { -webkit-mask-image: var(--ic-conta); mask-image: var(--ic-conta); }
#ir-inicio::before { -webkit-mask-image: var(--ic-inicio); mask-image: var(--ic-inicio); }
#ir-sair::before { -webkit-mask-image: var(--ic-sair); mask-image: var(--ic-sair); }
#ir-entrar::before { -webkit-mask-image: var(--ic-entrar); mask-image: var(--ic-entrar); }
#ir-pagar::before { -webkit-mask-image: var(--ic-pagar); mask-image: var(--ic-pagar); }
#ir-caminhao::before, #ir-novo-caminhao::before { -webkit-mask-image: var(--ic-mais); mask-image: var(--ic-mais); }
#ir-equipamento::before { -webkit-mask-image: var(--ic-caminhao); mask-image: var(--ic-caminhao); }
#ir-manual-buscar::before { -webkit-mask-image: var(--ic-busca); mask-image: var(--ic-busca); }
#ir-despesas::before { -webkit-mask-image: var(--ic-despesas); mask-image: var(--ic-despesas); }
#ir-contador::before, #ir-documentos::before { -webkit-mask-image: var(--ic-documentos); mask-image: var(--ic-documentos); }
#ir-financeiro::before { -webkit-mask-image: var(--ic-dinheiro); mask-image: var(--ic-dinheiro); }
#ir-frete::before { -webkit-mask-image: var(--ic-frete); mask-image: var(--ic-frete); }
#ir-viagens::before { -webkit-mask-image: var(--ic-viagens); mask-image: var(--ic-viagens); }
#ir-fipe::before { -webkit-mask-image: var(--ic-atualizar); mask-image: var(--ic-atualizar); }

/* ---------- FORMULÁRIOS ---------- */
.campo { margin: 0 0 14px; }
.campo label, .opcoes legend { display: block; font-weight: 700; margin: 0 0 6px; }
input:not([type=radio]):not([type=checkbox]), select, textarea {
  width: 100%;
  min-height: 50px;
  padding: 10px 12px;
  border: 2px solid var(--borda);
  border-radius: 10px;
  background: var(--cartao);
  color: var(--texto);
  font: inherit;
  font-size: 18px;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--primaria); }
.mostrar { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: -6px 0 10px; }
.mostrar input { width: 22px; height: 22px; accent-color: var(--destaque-texto); }
.mostrar label { font-size: 16px; }

.opcoes { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.opcao { position: relative; margin: 0 0 8px; }
.opcao input { position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; margin: -11px 0 0; accent-color: var(--destaque-texto); }
.opcao label {
  display: block;
  min-height: 54px;
  padding: 13px 14px 13px 50px;
  border: 2px solid var(--borda);
  border-radius: 12px;
  background: var(--cartao);
  cursor: pointer;
}
.opcao label span { color: var(--suave); }
.opcao label .marcador { color: var(--destaque-texto); font-weight: 700; }
.opcao input:checked + label { border-color: var(--destaque-texto); background: var(--destaque-fundo); }
.opcao input:focus-visible + label { outline: 3px solid var(--foco); outline-offset: 2px; }
.formas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.formas legend { grid-column: 1 / -1; }
.formas .opcao { margin: 0; }

/* ---------- MENSAGENS ---------- */
.msg { border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; font-weight: 600; border-left: 6px solid; }
.msg.ok { background: var(--ok-fundo); color: var(--ok); }
.msg.erro { background: var(--erro-fundo); color: var(--erro); }
.msg.aviso { background: var(--aviso-fundo); color: var(--primaria); }

/* ---------- PLANOS ---------- */
.chamada { text-align: center; margin: 4px auto 22px; max-width: 640px; }
.chamada h1 { font-size: 30px; margin-bottom: 8px; }
.chamada p { color: var(--suave); font-size: 19px; }
.vantagens { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vantagens li { background: var(--cartao); border: 1px solid var(--borda); border-radius: 999px; padding: 6px 14px; font-size: 15px; font-weight: 600; color: var(--primaria); }
.vantagens li::before { content: "✓ "; color: var(--destaque-texto); font-weight: 800; }
.planos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 0 0 18px; align-items: stretch; }
.plano {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cartao);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 22px 20px 20px;
}
.plano h2 { font-size: 24px; margin: 0 0 2px; }
.plano-qtd { color: var(--suave); font-weight: 600; }
.plano .botao { margin-top: auto; }
.preco { margin: 4px 0 18px; color: var(--suave); }
.preco strong { font-size: 34px; color: var(--primaria); letter-spacing: -.5px; }
.plano.destaque { border-color: var(--destaque-texto); box-shadow: 0 10px 28px var(--sombra-destaque); }
.selo {
  position: absolute;
  top: -14px;
  left: 20px;
  background: var(--destaque-texto);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .4px;
  padding: 4px 12px;
  border-radius: 999px;
}

/* ---------- INÍCIO ---------- */
.faixa { border-radius: var(--raio); padding: 16px 18px; margin: 0 0 16px; border-left: 8px solid; box-shadow: var(--sombra); }
.faixa > :last-child { margin-bottom: 0; }
.faixa-titulo { font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.faixa.teste { background: var(--destaque-fundo); border-color: var(--destaque); color: var(--destaque-escuro); }
.faixa.ok { background: var(--ok-fundo); border-color: var(--ok); color: var(--ok); }
.faixa.atraso { background: var(--atencao-fundo); border-color: #d97706; color: var(--atencao); }
.faixa.bloqueado { background: var(--erro-fundo); border-color: var(--erro); color: var(--erro); }
.faixa .botao { margin-top: 4px; }
.passos { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.passos li { display: flex; flex-direction: column; gap: 2px; }
.passos li.feito { padding-left: 34px; position: relative; }
.passos li.feito::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ok); color: #fff;
  display: grid; place-items: center; font-size: 15px; font-weight: 800;
}
.passos li.feito span { color: var(--suave); font-size: 16px; }
.passos .dica { text-align: center; }
.plano-curto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------- MINHA CONTA ---------- */
.resumo .preco { margin-bottom: 10px; }
.resumo .preco .dica { margin-top: 2px; }
.resumo .preco strong { font-size: 28px; }
.linhas { margin: 0 0 14px; }
.linhas div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--borda); }
.linhas dt { color: var(--suave); flex: 0 0 auto; white-space: nowrap; }
.linhas dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.pilula { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 15px; font-weight: 800; white-space: nowrap; }
.pilula.teste { background: var(--destaque-fundo); color: var(--destaque-escuro); }
.pilula.ativo { background: var(--ok-fundo); color: var(--ok); }
.pilula.atraso { background: var(--atencao-fundo); color: var(--atencao); }
.pilula.falta { background: var(--atencao-fundo); color: var(--atencao); }
.pilula.bloqueado { background: var(--erro-fundo); color: var(--erro); }
.confirmar { border: 2px solid var(--destaque-texto); background: var(--destaque-fundo); border-radius: 12px; padding: 14px; }
.destaque-borda { border: 2px solid var(--erro); }
.confirmar.perigo-fundo { border-color: var(--erro); background: var(--erro-fundo); }
.confirmar p { margin-bottom: 12px; }
.dobra { padding: 0; }
.dobra summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 0 18px;
  font-weight: 700; color: var(--primaria); cursor: pointer;
}
.dobra summary::-webkit-details-marker { display: none; }
.dobra summary::after { content: "▾"; font-size: 20px; }
.dobra[open] summary::after { content: "▴"; }
.dobra .dentro { padding: 0 18px 18px; }
#ir-sair:not(.topo-btn) { margin: 0 0 16px; }

/* ---------- ADMINISTRAÇÃO ---------- */
.abas { display: flex; gap: 6px; margin: 0 0 16px; border-bottom: 2px solid var(--borda); overflow-x: auto; }
.aba {
  min-height: 48px; padding: 0 16px;
  border: 0; border-bottom: 4px solid transparent; margin-bottom: -2px;
  background: transparent; color: var(--suave);
  font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.aba[aria-current=page] { color: var(--primaria); border-bottom-color: var(--destaque); }
.aba:hover { color: var(--primaria); }
.filtros .lado .campo { margin-bottom: 14px; }
.lista { display: grid; gap: 10px; margin: 8px 0 14px; }
.cliente {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra);
  padding: 14px 16px; color: var(--texto); text-decoration: none; font-weight: 400;
}
.cliente:hover { border-color: var(--primaria); color: var(--texto); }
.cliente-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cliente-topo strong { color: var(--primaria); font-size: 19px; overflow-wrap: anywhere; }
.cliente-email { overflow-wrap: anywhere; }
.historico { list-style: none; padding: 0; margin: 0; }
.historico li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--borda); }
.historico li .dica { margin: 0; }
.cartao > .dica + .campo, .cartao > h2 + .dica { margin-bottom: 12px; }
.grade-planos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.estreito { max-width: 560px; }

/* ---------- INÍCIO: ATALHOS (menu) ---------- */
.atalhos { display: grid; gap: 12px; margin: 0 0 16px; }
.atalho {
  display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  min-height: 76px; padding: 12px 16px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
  color: var(--primaria); text-decoration: none;
}
.atalho:hover { border-color: var(--primaria); color: var(--primaria); }
.atalho.ic::before {
  grid-row: 1 / 3; width: 52px; height: 52px; border-radius: 14px;
  background: var(--destaque-texto);
  -webkit-mask-size: 30px; mask-size: 30px;
}
.atalho-nome { font-size: 20px; font-weight: 800; align-self: end; }
.atalho-dica { color: var(--suave); font-size: 15px; font-weight: 500; align-self: start; overflow-wrap: anywhere; }

/* ---------- MEU EQUIPAMENTO ---------- */
.cams { display: grid; gap: 12px; margin: 0 0 16px; }
.cam {
  display: flex; gap: 14px; align-items: center;
  background: var(--cartao); border: 1px solid var(--borda); border-left: 6px solid var(--destaque); border-radius: 14px; box-shadow: var(--sombra);
  padding: 14px 16px; color: var(--texto); text-decoration: none; font-weight: 400;
}
.cam:hover { border-color: var(--primaria); border-left-color: var(--destaque); color: var(--texto); }
.cam.inativo { border-left-color: #94a3b8; background: var(--superficie); }
.cam-ic {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; background: var(--primaria-suave);
  display: grid; place-items: center;
}
.cam-ic::before {
  content: ""; width: 28px; height: 28px; background: var(--primaria);
  -webkit-mask: var(--ic-caminhao) center / contain no-repeat; mask: var(--ic-caminhao) center / contain no-repeat;
}
.cam.inativo .cam-ic::before { background: #94a3b8; }
.cam-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cam-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cam-topo strong { color: var(--primaria); font-size: 20px; overflow-wrap: break-word; min-width: 0; }
.cam-modelo { color: var(--suave); font-size: 15px; overflow-wrap: anywhere; }
.cam-rodape { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cam-odo { font-weight: 700; }
.placa {
  display: inline-block; padding: 1px 8px; border: 2px solid #102c42; border-top-width: 5px; border-radius: 6px;
  background: #fff; color: #102c42; font-weight: 800; font-size: 15px; letter-spacing: 1px; white-space: nowrap;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.selo-inativo { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--superficie-2); color: var(--texto); font-size: 14px; font-weight: 800; white-space: nowrap; }
.plano-cheio p { margin: 0 0 10px; }
.plano-cheio .botao { font-size: 17px; }
.vazio { text-align: center; }
.vazio .grande { margin-bottom: 8px; }
.abas-cam { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; overflow: visible; }
.abas-cam .aba { padding: 0 4px; }
.cam-cabeca { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.cam-cabeca h1 { margin: 0 0 4px; overflow-wrap: anywhere; }
.cam-ic.grande-ic { width: 56px; height: 56px; border-radius: 14px; background: var(--fundo-marca); }
.cam-ic.grande-ic::before { width: 32px; height: 32px; background: #fff; }
.cam-sub { margin: 0; color: var(--suave); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.aba-titulo { margin-top: 4px; }
h3 { font-size: 19px; line-height: 1.25; margin: 0 0 10px; color: var(--primaria); }
.topo-dica { margin: -4px 0 14px; }

/* Cadastro em passos */
.progresso { margin: 0 0 12px; }
.passo-txt { margin: 0 0 6px; color: var(--destaque-texto); font-weight: 800; font-size: 15px; }
.barra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.barra span { height: 6px; border-radius: 999px; background: var(--borda); }
.barra span.feito { background: var(--primaria); }
.barra span.atual { background: var(--destaque); }
.navega { margin-top: 6px; }
.passo h2:focus { outline: none; }
.navega > * { flex: 1 1 120px; }
.alternar { margin: -4px 0 14px; }
.botao.texto {
  min-height: 44px; padding: 6px 4px; border: 0; background: transparent; color: var(--primaria);
  font-size: 17px; text-decoration: underline; text-underline-offset: 3px;
}
.botao.texto:hover { color: var(--destaque-texto); }
.sugestao { min-height: 44px; margin: -6px 0 16px; font-size: 16px; padding: 6px 14px; }
.fipe-previa {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
  background: var(--primaria-suave); border-left: 6px solid var(--primaria);
}
.fipe-valor { font-size: 26px; color: var(--primaria); letter-spacing: -.3px; white-space: nowrap; }
.dobra.dentro-form { box-shadow: none; margin-bottom: 14px; }
.revisao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px 2px; margin: 0 0 14px; }
.revisao .linhas { margin-bottom: 8px; }

/* Valor e depreciação */
.duplo { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 12px; }
.num { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borda); min-width: 0; }
.num strong { font-size: 22px; color: var(--primaria); white-space: nowrap; letter-spacing: -.3px; }
.num .rotulo { font-size: 13px; }
.num .dica { font-size: 14px; margin: 0; }
.variacao { font-weight: 800; font-size: 19px; padding: 10px 14px; border-radius: 12px; background: var(--superficie); color: var(--primaria); }
.variacao.sobe { background: var(--ok-fundo); color: var(--ok); }
.variacao.desce { background: var(--destaque-fundo); color: var(--destaque-escuro); }
.fipe-acao { margin: 0 0 16px; }
.linhas.numeros dt { white-space: normal; flex: 1 1 auto; }
.linhas.numeros dd { white-space: nowrap; overflow-wrap: normal; }

/* Manual */
.manual-link { font-size: 19px; display: inline-block; margin: 0 0 4px; overflow-wrap: anywhere; }
.url { overflow-wrap: anywhere; margin-bottom: 12px; }

/* Leituras */
.painel { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.painel .num { background: var(--primaria-suave); border: 0; }
.leituras { list-style: none; padding: 0; margin: 0 0 14px; }
.leituras li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--borda); }
.leituras .l-data { color: var(--texto); font-size: 16px; font-weight: 600; }
.leituras .l-valor { grid-column: 2; grid-row: 1 / 3; text-align: right; white-space: nowrap; font-size: 19px; }
.leituras .l-fonte { grid-column: 1; color: var(--suave); font-size: 14px; }
.leituras li.riscada .l-valor { text-decoration: line-through; color: var(--suave); }
.pilula.cinza { background: var(--superficie-2); color: var(--texto); font-size: 13px; }

/* ---------- INÍCIO: selo e aviso de documentos ---------- */
.atalho { position: relative; }
.selo-alerta {
  position: absolute; top: 10px; right: 12px;
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px;
  background: var(--erro); color: #fff; font-size: 16px; font-weight: 800; line-height: 28px; text-align: center;
  box-shadow: 0 0 0 3px #fff;
}
.alerta-docs {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0 0 16px; padding: 14px 18px; border-radius: var(--raio); border-left: 8px solid #d97706;
  background: var(--atencao-fundo); color: var(--atencao); text-decoration: none; box-shadow: var(--sombra);
}
.alerta-docs strong { font-size: 19px; }
.alerta-docs span { font-weight: 500; font-size: 16px; }
.alerta-docs:hover { color: var(--atencao); border-left-color: var(--atencao); }

/* ---------- DESPESAS ---------- */
.mes-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 0 0 14px; }
.mes-nav .botao { padding: 8px 12px; font-size: 16px; }
.mes-nome { margin: 0; text-align: center; font-size: 19px; line-height: 1.2; font-weight: 800; color: var(--primaria); }
.mes-nome::first-letter { text-transform: uppercase; }
.desp-total-linha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; }
.desp-total { font-size: 32px; color: var(--primaria); letter-spacing: -.5px; white-space: nowrap; }
.desp-manut {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px;
  padding: 10px 14px; margin: 0 0 12px; border-radius: 12px; border-left: 6px solid var(--destaque);
  background: var(--destaque-fundo); color: var(--destaque-escuro); font-weight: 700;
}
.desp-manut strong { font-size: 20px; white-space: nowrap; }
.desp-cats { list-style: none; padding: 0; margin: 0 0 10px; }
.desp-cats li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--borda); font-size: 16px; }
.desp-cats li span:last-child { font-weight: 700; white-space: nowrap; }
.destaque-dica { color: var(--destaque-escuro); font-weight: 600; margin: -8px 0 14px; }
.desp-lista { list-style: none; padding: 0; margin: 0; }
.desp { padding: 12px 0; border-top: 1px solid var(--borda); }
.desp.destaque { margin: 0 -8px; padding: 12px 8px 12px 10px; border-left: 5px solid var(--destaque); background: var(--destaque-fundo); border-radius: 0 10px 10px 0; }
.desp-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.desp-cat { color: var(--primaria); }
.desp-valor { white-space: nowrap; font-size: 19px; }
.desp-info { margin: 2px 0 0; color: var(--suave); font-size: 15px; overflow-wrap: anywhere; }
.desp-selos { margin: 6px 0 0; display: flex; gap: 6px; flex-wrap: wrap; }
.desp.riscada .desp-cat, .desp.riscada .desp-valor, .desp.riscada .desp-info { text-decoration: line-through; color: var(--suave); }
.desp .msg { margin: 8px 0 0; }
.desp-acoes { margin: 2px 0 0; }
.desp-acoes > .botao.texto { min-height: 44px; padding: 4px 0; font-size: 16px; color: var(--erro); }
.desp-acoes .confirmar { margin-top: 6px; }
.pilula.manut { background: var(--destaque-fundo); color: var(--destaque-escuro); border: 1px solid #fdba74; font-size: 13px; }

/* Custo base */
.custo-totais { margin: 0 0 14px; grid-template-columns: 1fr 1fr; }
.custo-totais .num { background: var(--primaria-suave); border: 0; }
.custo-lista { list-style: none; padding: 0; margin: 0 0 14px; }
.custo { padding: 12px 0; border-top: 1px solid var(--borda); }
.custo.encerrado .custo-nome, .custo.encerrado .custo-mes { color: var(--suave); }
.custo-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.custo-nome { color: var(--primaria); font-size: 19px; overflow-wrap: anywhere; min-width: 0; }
.custo-mes { white-space: nowrap; text-align: right; }
.custo-mes strong { font-size: 19px; }
.custo-mes span { color: var(--suave); font-size: 14px; }
.custo-info { margin: 2px 0 0; font-weight: 600; }
.custo .dica { margin-top: 2px; }
.custo-fim { margin: 6px 0 0; }
.custo .msg { margin: 8px 0 0; }
.custo-acoes { margin-top: 8px; align-items: flex-start; }
.custo-acoes > * { flex: 1 1 120px; }
.custo-acoes > div:empty { display: none; }
.custo-edit, .custo-form { flex: 1 1 100%; }
.dentro-cartao { border-top: 2px solid var(--borda); padding-top: 14px; margin-top: 4px; }

/* ---------- DOCUMENTOS ---------- */
.doc-contador { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 700; color: var(--primaria); }
.privacidade {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; margin: 0 0 16px; border-radius: 12px; background: var(--ok-fundo); color: var(--ok); font-weight: 600; font-size: 16px;
}
.privacidade::before {
  content: ""; flex: 0 0 22px; height: 22px; margin-top: 1px; background: currentColor;
  -webkit-mask: var(--ic-cadeado) center / contain no-repeat; mask: var(--ic-cadeado) center / contain no-repeat;
}
.tipos-doc { display: grid; grid-template-columns: 1fr; gap: 8px; }
.tipos-doc legend { grid-column: 1 / -1; }
.tipos-doc .opcao { margin: 0; }
.tipo-doc label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; line-height: 1.25; overflow-wrap: anywhere; }
.tipo-doc label strong { color: var(--texto); font-size: 17px; }
.tipo-doc label .dica { display: inline; font-size: 14px; margin: 0; }
.tipo-doc.bloqueado { opacity: .55; }
.tipo-doc.bloqueado label { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
.tipo-doc.bloqueado label strong { font-size: 16px; font-weight: 600; }
.tipo-doc.bloqueado label { cursor: not-allowed; background: var(--superficie); border-style: dashed; }
input[type=file] { padding: 10px; font-size: 16px; }
.doc-grupo { margin: 0 0 16px; }
.doc-grupo-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 10px; }
.doc {
  background: var(--cartao); border: 1px solid var(--borda); border-left: 6px solid var(--ok); border-radius: 14px; box-shadow: var(--sombra);
  padding: 14px 16px; margin: 0 0 12px;
}
.doc.a_vencer { border-left-color: #d97706; }
.doc.vencido { border-left-color: var(--erro); }
.doc.sem_validade { border-left-color: #94a3b8; }
.doc-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.doc-nome { color: var(--primaria); font-size: 19px; overflow-wrap: anywhere; min-width: 0; }
.doc-validade { margin: 4px 0 0; font-weight: 600; }
.doc.vencido .doc-validade { color: var(--erro); }
.doc.a_vencer .doc-validade { color: var(--atencao); }
.doc-arq { overflow-wrap: anywhere; margin: 2px 0 10px; }
.doc .msg { margin: 0 0 10px; }
.doc-acoes { align-items: flex-start; }
.doc-acoes > * { flex: 1 1 110px; }
.doc-acoes > .doc-atualizar { flex: 1 1 100%; }
.pilula.vigente { background: var(--ok-fundo); color: var(--ok); }
.pilula.a_vencer { background: var(--atencao-fundo); color: var(--atencao); }
.pilula.vencido { background: var(--erro-fundo); color: var(--erro); }
.pilula.sem_validade { background: var(--superficie-2); color: var(--texto); }
.marcas .mostrar { margin: 0; }
.grade-planos { margin-top: 12px; }
.recursos-adm .dobra { border: 1px solid var(--borda); border-radius: 12px; margin-bottom: 14px; }

@media (min-width: 520px) {
  .tipos-doc { grid-template-columns: 1fr 1fr; }
  .duplo { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  main { padding-top: 32px; }
  h1 { font-size: 32px; }
  .chamada h1 { font-size: 40px; }
  .filtros { display: grid; grid-template-columns: 2fr 2fr auto; gap: 0 14px; align-items: end; }
  .filtros .msg { grid-column: 1 / -1; order: 5; }
  .filtros .botao { margin-bottom: 14px; }
  .lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-detalhe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
}
/* Confirmação aberta (excluir, encerrar): ocupa a linha toda. */
.doc-acoes > div:has(> .confirmar), .custo-acoes > div:has(> .confirmar) { flex-basis: 100%; }

/* ---------- RELATÓRIO PARA O CONTADOR ---------- */
.contador-botoes { display: grid; gap: 10px; margin: 8px 0 10px; }
.contador-cpf { margin: 4px 0 8px; }
.contador-previa { margin-top: 16px; }
.contador-secao { margin: 0 0 18px; }
.contador-secao h2 { font-size: 18px; margin: 0 0 8px; }
.contador-campos dt { white-space: normal; flex: 1 1 auto; }
.contador-campos dd { white-space: nowrap; overflow-wrap: normal; }
.contador-campos .total { font-weight: 700; border-top: 2px solid var(--borda); }
.tabela-rolagem { overflow-x: auto; margin: 0 0 10px; border: 1px solid var(--borda); border-radius: 10px; -webkit-overflow-scrolling: touch; }
.contador-tabela { border-collapse: collapse; width: 100%; font-size: 14px; }
.contador-tabela th, .contador-tabela td { padding: 6px 8px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; }
.contador-tabela th { background: #eef2f6; white-space: nowrap; }
.contador-tabela .dir { text-align: right; white-space: nowrap; }
.contador-tabela tfoot td { font-weight: 700; }
@media (min-width: 520px) {
  .contador-botoes { grid-template-columns: 1fr 1fr; }
}
@media print {
  .topo, .rodape, .pular, .contador-form, .contador-acoes, .contador-previa > .dica, main > h1, main > .sub, main > .msg { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  .contador-previa { margin: 0; }
  .tabela-rolagem { overflow: visible; border: 0; }
  .contador-tabela { font-size: 10px; }
  .contador-secao { break-inside: avoid-page; }
}

/* ---------- CALCULADORA DE FRETE / VIAGENS ---------- */
.frete-resumo { margin: 14px 0; }
.frete-valor { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.frete-valor strong { font-size: 1.6rem; color: var(--primaria); }
.frete-linhas { list-style: none; padding: 0; margin: 10px 0; }
.frete-linhas li strong { white-space: nowrap; }
.frete-linhas li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--borda); }
.frete-linhas li.soma { font-weight: 700; }
.frete-linhas li.reserva { color: var(--atencao); }
.frete-linhas li.lucro { color: var(--ok); font-weight: 700; }
.frete-linhas li.negativo { color: var(--erro); }
.frete-acoes { display: grid; gap: 10px; }
.lista-cartoes { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 10px; }
.item-link { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.tabela-pr { width: 100%; border-collapse: collapse; }
.tabela-pr th, .tabela-pr td { padding: 6px 4px; border-bottom: 1px solid var(--borda); text-align: right; white-space: nowrap; }
.tabela-pr th[scope=row], .tabela-pr thead th:first-child { text-align: left; white-space: normal; }
.tabela-pr tr.lucro td { color: var(--ok); font-weight: 700; }
.tabela-pr tr.negativo td { color: var(--erro); font-weight: 700; }
.frete-linhas li.riscada { text-decoration: line-through; color: var(--suave); }
.pilula.situacao-planejada { background: var(--primaria-suave); color: var(--primaria); }
.pilula.situacao-em_andamento { background: var(--destaque-fundo); color: var(--destaque-escuro); }
.pilula.situacao-concluida { background: var(--ok-fundo); color: var(--ok); }
.pilula.situacao-cancelada { background: var(--borda); color: var(--suave); }

/* =========================================================
   REFINAMENTO VISUAL (v0.4.0): botões mais suaves, menu em blocos,
   início com boas-vindas e resumo do mês. Fica no fim para valer sobre o que vem antes.
   ========================================================= */
:root {
  --raio: 18px;
  --sombra: 0 1px 2px rgba(16, 44, 66, .04), 0 8px 24px rgba(16, 44, 66, .06);
  --borda: #e1e7ef;
}
.cartao { border-color: var(--borda); }
.botao { border-radius: 14px; border-width: 1.5px; font-weight: 650; min-height: 48px; transition: background-color .15s, box-shadow .15s, transform .05s; }
.botao:active:not(:disabled) { transform: translateY(1px); }
.primario { background: linear-gradient(180deg, var(--destaque-claro), var(--destaque-texto)); box-shadow: 0 4px 12px var(--sombra-destaque); }
.primario:hover:not(:disabled) { background: var(--destaque-hover); }
.secundario { background: var(--primaria-suave); border-color: transparent; color: var(--primaria); }
.secundario:hover:not(:disabled) { background: var(--superficie-2); color: var(--primaria); }
.perigo { border-color: #f1b4b4; }
.topo-btn { border-radius: 12px; border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); }
.topo-btn.so-icone { font-size: 0; gap: 0; padding: 6px 10px; min-width: 44px; }
.topo-btn.so-icone::before { margin: 0; }
#ir-voltar::before { -webkit-mask-image: var(--ic-voltar); mask-image: var(--ic-voltar); }
:root { --ic-voltar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }
input:not([type=radio]):not([type=checkbox]), select, textarea { border-radius: 12px; border-color: var(--borda); }
.abas .aba { border-radius: 999px; }
.pilula { font-weight: 700; font-size: 14px; }

/* Início: boas-vindas */
.boas-vindas {
  background: linear-gradient(135deg, var(--fundo-marca) 0%, var(--fundo-marca-2) 100%); color: #fff;
  border-radius: 22px; padding: 18px 18px 16px; margin: 0 0 16px; box-shadow: 0 10px 28px rgba(16, 44, 66, .18);
}
.boas-vindas h1 { color: #fff; margin: 2px 0 8px; font-size: 28px; }
.bv-data { margin: 0; font-size: 15px; opacity: .8; }
.bv-chip { display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 14px; font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpi { background: rgba(255, 255, 255, .1); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi span { font-size: 13px; opacity: .85; }
.kpi strong { font-size: 17px; overflow-wrap: anywhere; }
.kpi small { font-size: 13px; color: var(--suave); }
.kpi.positivo strong { color: #86efac; }
.kpi.negativo strong { color: #fecaca; }
.kpis.claros { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 16px; }
.kpi.claro { background: var(--cartao); color: var(--texto); border: 1px solid var(--borda); box-shadow: var(--sombra); padding: 12px 14px; }
.kpi.claro span { color: var(--suave); opacity: 1; }
.kpi.claro strong { font-size: 20px; color: var(--primaria); }
.kpi.claro.positivo strong { color: var(--ok); }
.kpi.claro.negativo strong { color: var(--erro); }
.titulo-secao { font-size: 18px; color: var(--suave); margin: 6px 0 10px; }

/* Início: menu em blocos (2 colunas no celular, 3 no computador) */
.atalhos.grade { grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 720px) { .atalhos.grade { grid-template-columns: repeat(3, 1fr); } }
.atalhos.grade .atalho { grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: 4px; align-items: start; min-height: 128px; padding: 14px; }
.atalhos.grade .atalho.ic::before { grid-row: 1; width: 44px; height: 44px; border-radius: 12px; -webkit-mask-size: 26px; mask-size: 26px; margin-bottom: 4px; }
.atalhos.grade .atalho-nome { font-size: 18px; align-self: start; }
.atalhos.grade .atalho-dica { font-size: 14px; }
.atalho { transition: border-color .15s, transform .05s; }
.atalho:active { transform: scale(.99); }
.em-curso { display: grid; gap: 2px; text-decoration: none; color: var(--texto); border-left: 6px solid var(--destaque); }
.em-curso strong { font-size: 20px; color: var(--primaria); }

/* Planos: o que cada um tem */
.inclui { list-style: none; padding: 0; margin: 4px 0 16px; display: grid; gap: 6px; font-size: 16px; }
.inclui li { padding-left: 26px; position: relative; color: var(--texto); }
.inclui li::before { content: "✓"; position: absolute; left: 4px; color: var(--ok); font-weight: 800; }

/* Manutenção e viagens */
.manut-lista { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 8px; }
.manut { padding: 10px 12px; border-radius: 12px; background: var(--superficie); border-left: 5px solid var(--primaria); }
.manut.corretiva { border-left-color: var(--erro); }
.manut .dica { margin: 4px 0 0; }
.manut-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pilula.preventiva { background: var(--primaria-suave); color: var(--primaria); }
.pilula.corretiva { background: var(--erro-fundo); color: var(--erro); }
.viagem-numeros { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 15px; color: var(--suave); }
.viagem-numeros .positivo { color: var(--ok); }
.viagem-numeros .negativo { color: var(--erro); }
.filtros .campo { margin-bottom: 0; }

/* Cor do tema (Minha conta): troca a cor principal; o laranja de destaque continua. */
.boas-vindas { background: linear-gradient(135deg, var(--fundo-marca) 0%, var(--fundo-marca-2) 100%); }
.temas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.tema-op input { position: absolute; opacity: 0; }
.tema-amostra { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid var(--borda); border-radius: 14px; cursor: pointer; font-weight: 600; }
.tema-amostra::before { content: ""; width: 26px; height: 26px; border-radius: 50%; flex: none; }
.tema-op input:checked + .tema-amostra { border-color: var(--destaque); background: var(--destaque-fundo); }
.tema-op input:focus-visible + .tema-amostra { outline: 3px solid var(--foco); outline-offset: 2px; }
/* Abas do caminhão: 6 abas em pílulas que rolam para o lado (não se sobrepõem). */
.abas-cam { display: flex; gap: 6px; overflow-x: auto; border-bottom: 0; padding-bottom: 4px; scrollbar-width: none; }
.abas-cam .aba { flex: none; white-space: nowrap; padding: 8px 14px; border: 1px solid var(--borda); border-bottom-width: 1px; background: var(--cartao); }
.abas-cam .aba[aria-current=page] { background: var(--fundo-marca); color: #fff; border-color: var(--fundo-marca); }
.abas .aba { border-radius: 999px; }
.kpi strong { white-space: nowrap; font-size: 16px; }
.kpi.claro strong { font-size: 19px; }


/* ---------- TEMAS (3 paletas completas: fundo, cartões, botões, ícones e destaques) ----------
   Estrada = padrão (azul-marinho + laranja, valores do :root). Floresta = verde + âmbar. Asfalto = grafite + azul.
   Ficam ANTES do modo escuro: no escuro, o bloco geral e os ajustes de cada tema (no fim do arquivo) valem por cima. */
[data-tema="floresta"] {
  --fundo: #edf3ee; --borda: #d6e3d9; --superficie: #f4f8f5; --superficie-2: #dfe9e1;
  --primaria: #14412b; --primaria-hover: #1d5a3c; --primaria-suave: #e1efe5;
  --fundo-marca: #14412b; --fundo-marca-2: #1f6b45;
  --destaque: #d97706; --destaque-texto: #b45309; --destaque-claro: #d97706; --destaque-hover: #92400e;
  --destaque-fundo: #fef3c7; --destaque-escuro: #92400e; --foco: #f59e0b; --sombra-destaque: rgba(180, 83, 9, .25);
}
[data-tema="asfalto"] {
  --fundo: #f0f1f3; --borda: #dcdfe4; --superficie: #f6f7f9; --superficie-2: #e2e5ea;
  --primaria: #1f2937; --primaria-hover: #374151; --primaria-suave: #e8eaee;
  --fundo-marca: #111827; --fundo-marca-2: #374151;
  --destaque: #3b82f6; --destaque-texto: #1d4ed8; --destaque-claro: #3b82f6; --destaque-hover: #1e40af;
  --destaque-fundo: #e0ebff; --destaque-escuro: #1e40af; --foco: #60a5fa; --sombra-destaque: rgba(29, 78, 216, .25);
}
/* Sinalização = PADRÃO desde a v0.6.0 (identidade 4Trucker: grafite + amarelo sinalização #FFC400).
   O amarelo não aguenta texto branco: botões e selos com amarelo usam texto grafite (regras no fim do arquivo). */
[data-tema="sinal"] {
  --fundo: #f2f2ef; --borda: #dedcd4; --superficie: #f7f7f4; --superficie-2: #e6e4dc;
  --primaria: #14171a; --primaria-hover: #2a2f35; --primaria-suave: #ebeae4;
  --fundo-marca: #14171a; --fundo-marca-2: #2a2f35;
  --destaque: #ffc400; --destaque-texto: #8a5a00; --destaque-claro: #ffd340; --destaque-hover: #e0ac00;
  --destaque-fundo: #fff5d1; --destaque-escuro: #6b4600; --foco: #c99a00; --sombra-destaque: rgba(255, 196, 0, .35);
  --icone: #14171a;
}
.tema-amostra::before { background: linear-gradient(135deg, var(--a1) 0 55%, var(--a2) 55% 100%); }
.tema-sinal { --a1: #14171a; --a2: #ffc400; }
.tema-estrada { --a1: #102c42; --a2: #ea580c; }
.tema-floresta { --a1: #14412b; --a2: #d97706; }
.tema-asfalto { --a1: #111827; --a2: #3b82f6; }

/* ---------- MODO ESCURO (Minha conta: Claro, Escuro ou Igual ao celular) ----------
   A cor do tema continua no topo e no bloco de boas-vindas (--fundo-marca); no escuro, --primaria vira um tom claro
   (é usada como cor de texto e borda). Sem escolha feita, segue o celular. */
[data-modo="escuro"] {
  color-scheme: dark;
  --fundo: #0e1319; --cartao: #17202a; --superficie: #1d2733; --superficie-2: #2a3644;
  --texto: #e6ebf1; --suave: #a3b1c2; --borda: #2b3746;
  --primaria: #cfe0f1; --primaria-hover: #e3eef8; --primaria-suave: #22303f;
  --destaque-fundo: #3a2414; --destaque-escuro: #fdba74;
  --erro: #fca5a5; --erro-fundo: #3a1818; --ok: #86efac; --ok-fundo: #12301f;
  --atencao: #fcd34d; --atencao-fundo: #3a2c0c; --aviso-fundo: #10283a;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-modo="claro"]):not([data-modo="escuro"]) {
  color-scheme: dark;
  --fundo: #0e1319; --cartao: #17202a; --superficie: #1d2733; --superficie-2: #2a3644;
  --texto: #e6ebf1; --suave: #a3b1c2; --borda: #2b3746;
  --primaria: #cfe0f1; --primaria-hover: #e3eef8; --primaria-suave: #22303f;
  --destaque-fundo: #3a2414; --destaque-escuro: #fdba74;
  --erro: #fca5a5; --erro-fundo: #3a1818; --ok: #86efac; --ok-fundo: #12301f;
  --atencao: #fcd34d; --atencao-fundo: #3a2c0c; --aviso-fundo: #10283a;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  }
}
.modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; }
.modo-op input { position: absolute; opacity: 0; }
.modo-op label { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 2px solid var(--borda); border-radius: 14px; cursor: pointer; font-weight: 600; text-align: center; font-size: 15px; }
.modo-op input:checked + label { border-color: var(--destaque); background: var(--destaque-fundo); }
.modo-op input:focus-visible + label { outline: 3px solid var(--foco); outline-offset: 2px; }
.modo-op label::before { content: ""; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--borda); }
.modo-claro::before { background: #fff; }
.modo-escuro::before { background: #17202a; }
.modo-sistema::before { background: linear-gradient(90deg, #fff 50%, #17202a 50%); }

/* ---------- MEU DINHEIRO ---------- */
.resultado { display: grid; gap: 8px; }
.res-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 18px; }
.res-linha strong { font-size: 22px; white-space: nowrap; }
.res-linha.total { border-top: 1px solid var(--borda); padding-top: 10px; font-weight: 700; }
.res-linha.total strong { font-size: 28px; }
.res-linha.positivo strong { color: var(--ok); }
.res-linha.negativo strong { color: var(--erro); }
.grande-frase { font-size: 19px; font-weight: 700; color: var(--primaria); margin: 10px 0 4px; }
.frete-linhas li small { display: block; font-size: 14px; color: var(--suave); font-weight: 400; margin-top: 2px; }
.dicas ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.dicas { border-left: 6px solid var(--destaque); }
.barras { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.barra-topo { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 16px; margin-bottom: 4px; }
.barras meter { width: 100%; height: 14px; }
.barras meter::-webkit-meter-bar { background: var(--superficie-2); border: 0; border-radius: 999px; height: 14px; }
.barras meter::-webkit-meter-optimum-value { background: var(--destaque); border-radius: 999px; }
.barras meter::-moz-meter-bar { background: var(--destaque); border-radius: 999px; }
.destaque-viagem { margin: 10px 0 0; border-left: 6px solid var(--ok); }
.destaque-viagem.pior { border-left-color: var(--erro); }
.tabela-meses td { font-size: 15px; }
.tabela-meses tr.negativo td:last-child { color: var(--erro); font-weight: 700; }
.tabela-meses tr.lucro td:last-child { color: var(--ok); font-weight: 700; }
.tabela-meses tr.lucro td, .tabela-meses tr.negativo td { color: var(--texto); font-weight: 400; }
.tabela-meses tr.negativo td:last-child { color: var(--erro); font-weight: 700; }
.tabela-meses tr.lucro td:last-child { color: var(--ok); font-weight: 700; }

/* Modo escuro de cada tema (vale por cima do escuro geral). */
[data-tema="floresta"][data-modo="escuro"] {
  --fundo: #0b130e; --cartao: #132019; --superficie: #19291f; --superficie-2: #22372a; --borda: #23362a;
  --primaria: #cdebd6; --primaria-hover: #e2f5e8; --primaria-suave: #1c3225;
  --destaque-fundo: #3a2a0e; --destaque-escuro: #fcd34d;
}
[data-tema="asfalto"][data-modo="escuro"] {
  --fundo: #0c0e11; --cartao: #171a1f; --superficie: #1e2228; --superficie-2: #292e36; --borda: #282d35;
  --primaria: #dbe3ee; --primaria-hover: #eef2f7; --primaria-suave: #222832;
  --destaque-fundo: #172a4d; --destaque-escuro: #93c5fd;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="floresta"]:not([data-modo="claro"]):not([data-modo="escuro"]) {
  --fundo: #0b130e; --cartao: #132019; --superficie: #19291f; --superficie-2: #22372a; --borda: #23362a;
  --primaria: #cdebd6; --primaria-hover: #e2f5e8; --primaria-suave: #1c3225;
  --destaque-fundo: #3a2a0e; --destaque-escuro: #fcd34d;
  }
  :root[data-tema="asfalto"]:not([data-modo="claro"]):not([data-modo="escuro"]) {
  --fundo: #0c0e11; --cartao: #171a1f; --superficie: #1e2228; --superficie-2: #292e36; --borda: #282d35;
  --primaria: #dbe3ee; --primaria-hover: #eef2f7; --primaria-suave: #222832;
  --destaque-fundo: #172a4d; --destaque-escuro: #93c5fd;
  }
}
.tema-amostra span { display: flex; flex-direction: column; line-height: 1.2; }
.tema-amostra small { font-weight: 500; color: var(--suave); font-size: 14px; }
.tema-amostra::before { width: 34px; height: 34px; }

/* ---------- INSTALAR O APP ---------- */
#ir-instalar::before { -webkit-mask-image: var(--ic-instalar); mask-image: var(--ic-instalar); }
.cartao-instalar { border-left: 6px solid var(--destaque); }
.passos-instalar { margin: 8px 0 12px; padding-left: 22px; display: grid; gap: 6px; }
/* App instalado no iPhone (tela cheia): o topo e o rodapé respeitam o relógio, a câmera e a barra de gestos. */
.topo { padding-top: env(safe-area-inset-top); }
body { padding-bottom: env(safe-area-inset-bottom); }
.texto-legal { max-width: 720px; margin: 0 auto; padding: 24px 18px 48px; }
.texto-legal h2 { margin-top: 26px; font-size: 20px; }
.texto-legal li { margin-bottom: 6px; }
.link-legal { text-align: center; font-size: 15px; }
/* Valores grandes (R$ 19.500,00) quebram depois do "R$" em vez de passar da borda. */
.kpi strong { white-space: normal; font-size: 16px; line-height: 1.2; }
.kpi.claro strong { font-size: 19px; }

/* Campo que falta ou está errado: borda e rótulo em vermelho. */
.campo.faltando label { color: var(--erro); }
.campo.faltando input, .campo.faltando select, .campo.faltando textarea { border-color: var(--erro); box-shadow: 0 0 0 3px var(--erro-fundo); }
/* No celular o toque deixa o "passar o mouse" grudado: o botão secundário nunca fica claro com texto claro. */
@media (hover: none) { .secundario:hover:not(:disabled) { background: var(--primaria-suave); } }
.botao:disabled { opacity: .55; }

/* Prévia da proposta (Ver orçamento) */
.texto-proposta { white-space: pre-wrap; font-family: inherit; font-size: 16px; line-height: 1.5; margin: 0; padding: 12px 14px;
  background: var(--superficie); border-radius: 12px; border: 1px solid var(--borda); }
.previa-proposta { margin-top: 4px; }

/* ---------- MINHA CONTA: resumo curto + menu ---------- */
.resumo-curto { display: grid; gap: 4px; text-decoration: none; color: var(--texto); }
.resumo-curto.urgente { border-left: 6px solid var(--erro); }
.resumo-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 22px; }
.resumo-acao { color: var(--erro); font-weight: 700; }
.menu-conta { display: grid; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); margin: 0 0 16px; overflow: hidden; }
.item-menu { display: grid; grid-template-columns: 40px 1fr 18px; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 14px 16px; text-decoration: none; color: var(--texto); border-bottom: 1px solid var(--borda); min-height: 64px; }
.item-menu:last-child { border-bottom: 0; }
.item-menu:hover { background: var(--superficie); color: var(--texto); }
.item-menu.ic::before { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; background: var(--destaque-texto); -webkit-mask-size: 24px; mask-size: 24px; }
.item-menu::after { content: ""; grid-row: 1 / 3; grid-column: 3; width: 18px; height: 18px; background: var(--suave);
  -webkit-mask: var(--ic-seta) center / contain no-repeat; mask: var(--ic-seta) center / contain no-repeat; }
.item-nome { font-weight: 700; font-size: 18px; }
.item-dica { color: var(--suave); font-size: 14px; grid-column: 2; }
#ir-conta-planos::before { -webkit-mask-image: var(--ic-pagar); mask-image: var(--ic-pagar); }
#ir-indicar::before, #ir-indicar-whats::before { -webkit-mask-image: var(--ic-indicar); mask-image: var(--ic-indicar); }
#ir-conta-instalar::before { -webkit-mask-image: var(--ic-instalar); mask-image: var(--ic-instalar); }
#ir-aparencia::before { -webkit-mask-image: var(--ic-aparencia); mask-image: var(--ic-aparencia); }
#ir-senha::before { -webkit-mask-image: var(--ic-cadeado); mask-image: var(--ic-cadeado); }
#ir-privacidade::before { -webkit-mask-image: var(--ic-documentos); mask-image: var(--ic-documentos); }

/* ---------- MEU CAMINHÃO: grade de partes (ícone + nome, 3 por linha) ---------- */
.grade-cam { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 18px; }
.aba-ic { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 10px 4px;
  background: var(--cartao); border: 1.5px solid var(--borda); border-radius: 16px; color: var(--texto); font: inherit; font-size: 14px;
  font-weight: 700; line-height: 1.15; text-align: center; cursor: pointer; box-shadow: var(--sombra); }
.aba-ic.ic::before { width: 30px; height: 30px; background: var(--destaque-texto); -webkit-mask-size: 28px; mask-size: 28px; }
.aba-ic:hover { border-color: var(--destaque); }
.aba-ic[aria-current=page] { background: var(--fundo-marca); border-color: var(--fundo-marca); color: #fff; }
.aba-ic[aria-current=page]::before { background: #fff; }
.aba-desempenho::before { -webkit-mask-image: var(--ic-desempenho); mask-image: var(--ic-desempenho); }
.aba-manutencao::before { -webkit-mask-image: var(--ic-chave); mask-image: var(--ic-chave); }
.aba-leituras::before { -webkit-mask-image: var(--ic-painel); mask-image: var(--ic-painel); }
.aba-valor::before { -webkit-mask-image: var(--ic-etiqueta); mask-image: var(--ic-etiqueta); }
.aba-ficha::before { -webkit-mask-image: var(--ic-ficha); mask-image: var(--ic-ficha); }
.aba-manual::before { -webkit-mask-image: var(--ic-livro); mask-image: var(--ic-livro); }
.aba-pneus::before { -webkit-mask-image: var(--ic-pneu); mask-image: var(--ic-pneu); }

/* ---------- PNEUS: desenho do caminhão (veio do FrotaZ de frotas; o desenho fica sempre em fundo claro) ---------- */
.pn-layout { display: grid; gap: 14px; }
.pn-diagrama { max-width: 320px; width: 100%; margin: 0 auto; padding: 10px 6px 6px; border: 1px solid var(--borda); border-radius: 18px;
  background: radial-gradient(120% 90% at 50% 20%, #ffffff 0%, #f1f5f9 62%, #e6ecf3 100%); box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05); }
.pn-previa { max-width: 240px; margin: 10px auto 4px; }
.pn-svg { width: 100%; height: auto; display: block; }
.pn-sv-frente { font-size: 9px; fill: #8a99ac; font-weight: 800; letter-spacing: .14em; }
.pn-sv-longarina { stroke: #9aa8ba; stroke-width: 1.2; }
.pn-sv-travessa { fill: #cfd8e3; stroke: #9aa8ba; stroke-width: .8; }
.pn-sv-parachoque { fill: #cfd8e3; stroke: #8795a8; stroke-width: 1.2; }
.pn-sv-eixo { stroke: #7b8a9e; stroke-width: 1; }
.pn-sv-diferencial { fill: #e6ecf3; stroke: #7b8a9e; stroke-width: 1.4; }
.pn-sv-diferencial-miolo { fill: #8795a8; }
.pn-sv-espelho { fill: #8795a8; stroke: #64748b; stroke-width: 1; }
.pn-sv-cabine { stroke: #64748b; stroke-width: 1.8; }
.pn-sv-vidro { stroke: #0d2942; stroke-width: 1; }
.pn-sv-teto { fill: rgba(255, 255, 255, .55); stroke: #aab6c6; stroke-width: 1; }
.pn-sv-farol { fill: #ffb27a; stroke: #ff6500; stroke-width: .8; }
.pn-sv-grade { stroke: #94a3b8; stroke-width: 1.4; stroke-linecap: round; }
.pn-sv-guia { stroke: #c3ceda; stroke-width: 1; stroke-dasharray: 2 3; }
.pn-sv-plaquinha { fill: #0d2942; stroke: #fff; stroke-width: 1.5; }
.pn-sv-num { font-size: 10px; font-weight: 800; fill: #fff; }
.pn-sv-pneu { cursor: pointer; outline: none; }
.pn-sv-corpo { stroke-width: 2; filter: drop-shadow(0 1.5px 1.5px rgba(15, 23, 42, .28)); }
.pn-sv-relevo { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1.2; }
.pn-sv-cubo { fill: rgba(255, 255, 255, .55); stroke: rgba(15, 23, 42, .25); stroke-width: 1; }
.pn-sv-rotulo { font-size: 10px; font-weight: 800; fill: #0f172a; pointer-events: none; }
.pn-sv-pneu:focus-visible .pn-sv-corpo, .pn-sv-pneu.sel .pn-sv-corpo { stroke: #0d2942; stroke-width: 3.5; filter: drop-shadow(0 0 4px rgba(13, 41, 66, .65)); }
.pn-sv-critico .pn-sv-corpo { fill: #fecaca; stroke: #b91c1c; }
.pn-sv-atencao .pn-sv-corpo { fill: #fde68a; stroke: #b45309; }
.pn-sv-info .pn-sv-corpo { fill: #bae6fd; stroke: #0369a1; }
.pn-sv-ok .pn-sv-corpo { fill: #bbf7d0; stroke: #166534; }
.pn-sv-nd .pn-sv-corpo { fill: #e2e8f0; stroke: #475569; }
.pn-sv-vazia .pn-sv-corpo { fill: #ffffff; stroke: #94a3b8; stroke-dasharray: 4 3; filter: none; }
.pn-sv-vazia .pn-sv-relevo, .pn-sv-vazia .pn-sv-cubo { display: none; }
.pn-sv-vazia .pn-sv-rotulo { fill: #7b8a9e; font-size: 18px; }
.pn-previa .pn-sv-pneu { cursor: default; }
.pn-legenda { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--suave); }
.pn-legenda li { display: flex; align-items: center; gap: 6px; }
.pn-chip { display: inline-block; width: 14px; height: 20px; border-radius: 4px; border: 2px solid; box-sizing: border-box; }
.pn-chip.pn-sv-critico { background: #fecaca; border-color: #b91c1c; } .pn-chip.pn-sv-atencao { background: #fde68a; border-color: #b45309; }
.pn-chip.pn-sv-info { background: #bae6fd; border-color: #0369a1; } .pn-chip.pn-sv-ok { background: #bbf7d0; border-color: #166534; }
.pn-chip.pn-sv-vazia { background: #fff; border-color: #94a3b8; border-style: dashed; }
.pn-sel { border: 1.5px solid var(--borda); border-left-width: 6px; border-radius: 14px; padding: 12px 14px; background: var(--superficie); }
.pn-sel h3 { margin: 2px 0 4px; font-size: 18px; }
.pn-sel .rotulo { margin: 0; font-size: 13px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.pn-borda-critico { border-left-color: #b91c1c; } .pn-borda-atencao { border-left-color: #d97706; }
.pn-borda-info { border-left-color: #0369a1; } .pn-borda-ok { border-left-color: #16a34a; } .pn-borda-vazia { border-left-color: #94a3b8; border-left-style: dashed; }
.pn-alertas { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.pn-alerta { padding: 8px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.pn-alerta.critico { background: #fee2e2; color: #7f1d1d; } .pn-alerta.atencao { background: #fef3c7; color: #78350f; } .pn-alerta.info { background: #e0f2fe; color: #0c4a6e; }
.pn-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pn-acoes > .botao { flex: 1 1 140px; }
.pn-acoes > form { flex: 1 1 100%; }
.pn-form { display: grid; gap: 4px; margin-top: 10px; }
.pn-form h4 { margin: 4px 0; font-size: 16px; }
.pn-soltos { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pn-solto { border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; background: var(--superficie); }
.pn-modelos { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pn-modelos .botao { flex: 0 1 auto; min-height: 38px; padding: 6px 12px; font-size: 14px; }
.lado.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.dica.centro { text-align: center; }

/* Serviços da manutenção: caixinhas em 2 colunas (marca vários). */
.opcoes.servicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opcoes.servicos legend { grid-column: 1 / -1; }
.opcoes.servicos .opcao label { font-size: 15px; line-height: 1.25; }
@media (max-width: 360px) { .opcoes.servicos { grid-template-columns: 1fr; } }
.opcoes.servicos .opcao { margin: 0; display: flex; }
.opcoes.servicos .opcao label { flex: 1; display: flex; align-items: center; margin: 0; }
.kpis.claros.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- MANUTENÇÃO: 4 partes (Visão geral, Preventiva, Corretiva, Pneus) ---------- */
.grade-manut { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 16px; padding: 6px; border-radius: 16px; background: var(--superficie-2); }
.manut-ic { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 2px; border-radius: 12px;
  color: var(--texto); text-decoration: none; font-size: 13px; font-weight: 700; text-align: center; line-height: 1.1; }
.manut-ic.ic::before { width: 24px; height: 24px; background: var(--destaque-texto); -webkit-mask-size: 22px; mask-size: 22px; }
.manut-ic[aria-current=page] { background: var(--cartao); color: var(--primaria); box-shadow: var(--sombra); }
.mic-visao::before { -webkit-mask-image: var(--ic-visao); mask-image: var(--ic-visao); }
.mic-preventiva::before { -webkit-mask-image: var(--ic-calendario); mask-image: var(--ic-calendario); }
.mic-corretiva::before { -webkit-mask-image: var(--ic-chave); mask-image: var(--ic-chave); }
.mic-pneus::before { -webkit-mask-image: var(--ic-pneu); mask-image: var(--ic-pneu); }
.manut-alertas { display: grid; gap: 8px; margin: 0 0 16px; }
.manut-alerta { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; text-decoration: none; border-left: 6px solid; }
.manut-alerta strong { font-size: 17px; } .manut-alerta span { font-size: 14px; }
.manut-alerta.critico { background: #fee2e2; color: #7f1d1d; border-color: #b91c1c; }
.manut-alerta.atencao { background: #fef3c7; color: #78350f; border-color: #d97706; }
.manut-ok { margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: var(--superficie); border-left: 6px solid var(--ok); font-weight: 600; }
.chips-filtro { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.chip { min-height: 36px; padding: 4px 14px; border-radius: 999px; border: 1.5px solid var(--borda); background: var(--cartao); color: var(--texto); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.chip[aria-pressed=true] { background: var(--fundo-marca); border-color: var(--fundo-marca); color: #fff; }
.manut.pneus { border-left-color: #64748b; }
.pilula.pneus { background: var(--superficie-2); color: var(--texto); }
.rev-lista { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 10px; }
.rev { padding: 12px 14px; border-radius: 14px; background: var(--superficie); border-left: 6px solid var(--ok); }
.rev.vencida { border-left-color: #b91c1c; } .rev.a_vencer { border-left-color: #d97706; } .rev.sem_km { border-left-color: #94a3b8; }
.rev-texto { margin: 4px 0 2px; font-weight: 700; font-size: 16px; }
.rev .dica { margin: 2px 0 0; }
.pilula.rev-vencida { background: #fee2e2; color: #7f1d1d; } .pilula.rev-a_vencer { background: #fef3c7; color: #78350f; }
.pilula.rev-em_dia { background: #dcfce7; color: #14532d; } .pilula.rev-sem_km { background: var(--superficie-2); color: var(--texto); }
.opcoes.sugestoes { grid-template-columns: 1fr; }
.opcao-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--borda); border-radius: 12px; background: var(--cartao); cursor: pointer; }
.opcao-check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--destaque); }
.opcao-check span { display: grid; gap: 2px; } .opcao-check small { color: var(--suave); font-size: 14px; }
.opcao-check:has(input:checked) { border-color: var(--destaque); background: var(--destaque-fundo); }
.rev-mais { flex: 1 1 100%; display: flex; justify-content: space-between; gap: 8px; }
.link-acao { background: none; border: 0; padding: 8px 2px; min-height: 40px; font: inherit; font-size: 15px; font-weight: 700; color: var(--primaria); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Preventiva em um bloco: lista compacta do plano + um botão para lançar. */
.bloco-prev h2 { margin: 0; }
.rev-lista.compacta { gap: 8px; }
.rev-lista.compacta .rev { padding: 10px 12px; border-left-width: 5px; }
.rev-lista.compacta .rev-texto { font-size: 15px; margin: 2px 0 0; }
.rev-lista.compacta .dica { font-size: 13px; }
.rev-edicao { display: none; }
.rev-lista.editando .rev-edicao { display: block; }
.prev-acao { margin-top: 12px; }
.lancar-prev { border-top: 1.5px solid var(--borda); padding-top: 12px; }
.lancar-prev h3 { margin: 0 0 6px; }
.outros-servicos { margin: 6px 0 8px; }
.outros-servicos summary { cursor: pointer; font-weight: 700; padding: 8px 0; color: var(--primaria); }
.sub-t { margin: 16px 0 4px; }
.mais-revisao { border: 1.5px dashed var(--borda); border-radius: 12px; padding: 4px 12px 8px; }
.mais-revisao .opcoes { margin-top: 6px; }
/* Revisão: itens como linhas dentro de um bloco só. */
.rev-linhas { list-style: none; padding: 0; margin: 8px 0 0; border-top: 1px solid var(--borda); }
.rev-linha { display: grid; grid-template-columns: 12px 1fr auto; gap: 4px 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.rev-ponto { width: 12px; height: 12px; border-radius: 50%; background: var(--ok); align-self: start; margin-top: 6px; }
.rev-linha.vencida .rev-ponto { background: #dc2626; } .rev-linha.a_vencer .rev-ponto { background: #d97706; } .rev-linha.sem_km .rev-ponto { background: #94a3b8; }
.rev-info { display: grid; gap: 3px; min-width: 0; }
.rev-info strong { font-size: 16px; line-height: 1.25; }
.rev-estado { font-size: 14px; font-weight: 700; }
.rev-estado .pilula { font-size: 12px; padding: 2px 8px; }
.rev-info small { color: var(--suave); font-size: 13px; }
.bt-finalizar { min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--borda); background: var(--superficie); color: var(--texto);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.bt-finalizar.urgente { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.rev-linha .rev-edicao { grid-column: 2 / -1; }
.rev-linhas.editando .rev-edicao { display: block; }
/* Meu dinheiro: resumo escrito e conselhos */
.cons-resumo { font-size: 17px; line-height: 1.5; margin: 0 0 12px; }
.cons-lista { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
.cons { padding: 10px 12px; border-radius: 12px; background: var(--superficie); border-left: 5px solid var(--primaria); }
.cons strong { display: block; font-size: 15px; margin-bottom: 2px; }
.cons p { margin: 0; line-height: 1.45; }
.cons.economia { border-left-color: var(--ok); }
.cons.pecando { border-left-color: #dc2626; }
.cons.melhorar { border-left-color: var(--destaque); }
/* Suporte (Minha conta) */
.pilha { display: grid; gap: 10px; margin-top: 12px; }
#ir-suporte::before, #ir-suporte-email::before { -webkit-mask-image: var(--ic-suporte); mask-image: var(--ic-suporte); }
#ir-suporte-whats::before { -webkit-mask-image: var(--ic-whats); mask-image: var(--ic-whats); }
:root {
  --ic-suporte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='3' y='13' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='13' width='4' height='6' rx='1.5'/%3E%3Cpath d='M19 19c0 1.7-1.8 2.5-5 2.5'/%3E%3C/svg%3E");
  --ic-whats: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5l1.3-4.2A8.5 8.5 0 1 1 8 19.4z'/%3E%3Cpath d='M9 9.5c.3 2.2 2.3 4.4 4.6 5l1.2-1.2 1.7.8c-.4 1.3-1.5 1.9-2.8 1.6C10.9 15 8.6 12.7 8 10c-.3-1.3.3-2.4 1.6-2.8l.8 1.7z'/%3E%3C/svg%3E");
}
/* Painel de avisos do início */
.avisos { padding-bottom: 8px; }
.avisos-topo { display: flex; align-items: center; gap: 8px; }
.avisos-topo h2 { margin: 0; }
.avisos-n { position: static; }
.avisos-lista { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.aviso { display: grid; grid-template-columns: 12px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--texto); background: var(--superficie); border-left: 5px solid #94a3b8; }
.aviso.critico { border-left-color: #dc2626; } .aviso.atencao { border-left-color: #d97706; }
.aviso-ponto { width: 12px; height: 12px; border-radius: 50%; background: #94a3b8; margin-top: 5px; }
.aviso.critico .aviso-ponto { background: #dc2626; } .aviso.atencao .aviso-ponto { background: #d97706; }
.aviso-txt { display: grid; gap: 2px; } .aviso-txt strong { font-size: 16px; } .aviso-txt small { color: var(--suave); font-size: 14px; }
.avisos-ok { margin: 8px 0 4px; color: var(--suave); font-weight: 600; }
/* Tutoriais (Minha conta) */
#ir-tutoriais::before { -webkit-mask-image: var(--ic-livro); mask-image: var(--ic-livro); }
#ir-suporte-tut::before { -webkit-mask-image: var(--ic-suporte); mask-image: var(--ic-suporte); }
.tutorial summary { cursor: pointer; font-weight: 800; font-size: 17px; padding: 2px 0; }
.tutorial[open] summary { margin-bottom: 8px; }
.tutorial .cartao-instalar { box-shadow: none; border: 0; padding: 0; margin: 0; background: none; }
.tutorial .cartao-instalar h2 { display: none; }
.tut-passos li { margin-bottom: 10px; }
.tut-fig { margin: 8px 0 4px; }
.tut-fig img { display: block; width: 100%; max-width: 300px; height: auto; border-radius: 12px; border: 1px solid var(--borda); box-shadow: var(--sombra); background: #fff; }
.busca-tut input { font-size: 17px; }
/* Atalho em destaque (ex.: Relatório para o contador em Meu dinheiro) */
.atalho-destaque { margin: 4px 0 16px; border: 2px solid var(--destaque); border-left-width: 8px; padding-right: 40px; position: relative; }
.atalho-destaque .atalho-nome { color: var(--texto); }
.atalho-destaque::after { content: "›"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 32px; font-weight: 700; color: var(--destaque-texto); }

/* ---------- LOGO 4TRUCKER (v0.6.0) ----------
   Escrita em HTML/CSS para seguir o TEMA: o bloco do "4" usa a cor de destaque do tema (amarelo no Sinalização,
   laranja no Estrada, âmbar no Floresta, azul no Asfalto) e o "4" leva a cor do topo. Fonte condensada do aparelho
   (Roboto Condensed no Android, Avenir Next Condensed no iPhone); a CSP não deixa carregar fonte de fora. */
.marca { gap: 0; }
.logo {
  display: inline-flex; align-items: center; gap: 7px; line-height: 1;
  font-family: "Barlow Condensed", "Roboto Condensed", "sans-serif-condensed", "Avenir Next Condensed", "Bahnschrift", "Arial Narrow", system-ui, sans-serif;
  font-style: italic; font-weight: 800; font-stretch: condensed; letter-spacing: .02em;
}
.logo-4 {
  display: inline-block; background: var(--destaque); color: var(--fundo-marca);
  font-size: 27px; padding: 4px 10px 3px; border-radius: 7px; transform: skewX(-10deg);
}
.logo-nome { color: #fff; font-size: 29px; }
@media (min-width: 700px) { .logo-4 { font-size: 30px; } .logo-nome { font-size: 33px; } }

/* Tema Sinalização: amarelo com texto grafite (contraste) e ícones grafite no claro / amarelos no escuro. */
[data-tema="sinal"] .primario { background: var(--destaque); color: #14171a; box-shadow: 0 4px 12px var(--sombra-destaque); }
[data-tema="sinal"] .primario:hover:not(:disabled) { background: var(--destaque-claro); color: #14171a; }
[data-tema="sinal"] .selo, [data-tema="sinal"] .bt-finalizar.urgente { background: var(--destaque); border-color: var(--destaque); color: #14171a; }
[data-tema="sinal"] .atalho.ic::before, [data-tema="sinal"] .item-menu.ic::before,
[data-tema="sinal"] .aba-ic.ic::before, [data-tema="sinal"] .manut-ic.ic::before { background: var(--icone); }
[data-tema="sinal"] .aba-ic[aria-current=page]::before { background: var(--destaque); }
[data-tema="sinal"][data-modo="escuro"] {
  --fundo: #0c0d0f; --cartao: #16191d; --superficie: #1c2024; --superficie-2: #272c32; --borda: #2a2f35;
  --primaria: #f1f1ee; --primaria-hover: #ffffff; --primaria-suave: #24282d;
  --destaque-texto: #ffc400; --destaque-fundo: #3a2f08; --destaque-escuro: #ffd34d; --icone: #ffc400;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="sinal"]:not([data-modo="claro"]):not([data-modo="escuro"]) {
  --fundo: #0c0d0f; --cartao: #16191d; --superficie: #1c2024; --superficie-2: #272c32; --borda: #2a2f35;
  --primaria: #f1f1ee; --primaria-hover: #ffffff; --primaria-suave: #24282d;
  --destaque-texto: #ffc400; --destaque-fundo: #3a2f08; --destaque-escuro: #ffd34d; --icone: #ffc400;
  }
}
[data-tema="sinal"] .plano.destaque, [data-tema="sinal"] .opcao input:checked + label { border-color: var(--destaque); }
/* Excluir minha conta */
.excluir-link { margin: 18px 0 0; font-size: 15px; }
.excluir-link a { color: var(--erro); }
.lista-exclusao { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; line-height: 1.4; }
.cartao.perigo-fundo { border: 2px solid var(--erro); }
/* Segurança da conta */
#ir-seguranca::before { -webkit-mask-image: var(--ic-escudo); mask-image: var(--ic-escudo); }
#ir-excluir::before { -webkit-mask-image: var(--ic-lixeira); mask-image: var(--ic-lixeira); }
.item-menu.perigo-item .item-nome { color: var(--erro); }
.item-menu.perigo-item::before { background: var(--erro) !important; }
:root { --ic-escudo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.2-8 9-4.6-.8-8-4.5-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
:root { --ic-lixeira: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E"); }
/* Desativar conta: link discreto e conversa */
.desativar-link { margin: 28px 0 0; font-size: 14px; }
.desativar-link a { color: var(--suave); }
.conversa { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.motivos-saida .opcao { margin: 6px 0; }
.ajuda-saida p { margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: var(--superficie); border-left: 4px solid var(--destaque); }
.ajuda-saida:empty { display: none; }
.link-sair { color: var(--suave); font-size: 15px; }
.texto-proposta { overflow-wrap: anywhere; word-break: break-word; }
.aba-dados::before { -webkit-mask-image: var(--ic-ficha); mask-image: var(--ic-ficha); }
.km-painel summary { cursor: pointer; font-weight: 700; }
.km-painel[open] summary { margin-bottom: 10px; }
/* Revisão: só aparece o que pede atenção */
.rev-tudo-ok { margin: 10px 0 4px; padding: 12px 14px; border-radius: 12px; background: var(--superficie); border-left: 5px solid var(--ok); font-weight: 700; display: grid; gap: 4px; }
.rev-tudo-ok small { font-weight: 500; color: var(--suave); font-size: 14px; }
.ver-plano { display: block; margin: 8px auto 0; font-size: 14px; color: var(--suave); }
/* Pneus simples: "Como está?" em 3 botões grandes e o selo do estado */
.pn-estados { display: grid; gap: 8px; margin: 6px 0 4px; }
.pn-estado { min-height: 52px; font-size: 17px; font-weight: 800; border: 2px solid; }
.pn-estado.bom { background: #dcfce7; color: #14532d; border-color: #16a34a; }
.pn-estado.gastando { background: #fef3c7; color: #78350f; border-color: #d97706; }
.pn-estado.trocar { background: #fee2e2; color: #7f1d1d; border-color: #dc2626; }
.pilula.pn-cond { font-size: 13px; }
.pilula.pn-cond.bom { background: #dcfce7; color: #14532d; }
.pilula.pn-cond.gastando { background: #fef3c7; color: #78350f; }
.pilula.pn-cond.trocar { background: #fee2e2; color: #7f1d1d; }
/* ---------- ABERTURA E CARREGANDO COM A LOGO ---------- */
.abertura { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--fundo-marca, #14171a);
  transition: opacity .35s ease; }
.abertura.saindo { opacity: 0; pointer-events: none; }
.abertura-centro { display: grid; justify-items: center; gap: 18px; padding: 24px; }
.abertura-logo { position: relative; display: flex; align-items: center; animation: logo-entra .7s cubic-bezier(.2, .9, .3, 1.2) both; }
.logo.grande .logo-4 { font-size: 54px; padding: 6px 18px 5px; border-radius: 12px; }
.logo.grande .logo-nome { font-size: 58px; }
.logo.grande { gap: 12px; }
.vel { position: absolute; right: 100%; height: 5px; border-radius: 3px; background: var(--destaque); opacity: 0; margin-right: 10px;
  animation: vel-passa .9s ease-out .15s both; }
.vel-1 { top: 22%; width: 54px; } .vel-2 { top: 47%; width: 82px; animation-delay: .22s; } .vel-3 { top: 72%; width: 40px; animation-delay: .3s; }
.abertura-frase { margin: 0; color: rgba(255, 255, 255, .88); font-size: 18px; font-weight: 600; letter-spacing: .02em;
  animation: frase-surge .6s ease-out .65s both; }
@keyframes logo-entra { from { opacity: 0; transform: translateX(-60px) skewX(-8deg); } to { opacity: 1; transform: none; } }
@keyframes vel-passa { 0% { opacity: 0; transform: translateX(30px) scaleX(.3); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateX(-40px) scaleX(1); } }
@keyframes frase-surge { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 420px) { .logo.grande .logo-4 { font-size: 42px; } .logo.grande .logo-nome { font-size: 44px; } }

.carregando { display: grid; justify-items: center; gap: 10px; padding: 48px 0; color: var(--suave); text-align: center; }
.logo.mini .logo-4 { font-size: 30px; padding: 4px 12px 3px; animation: quatro-pulsa 1s ease-in-out infinite; }
.carregando-txt { font-size: 15px; font-weight: 600; }
@keyframes quatro-pulsa { 0%, 100% { transform: skewX(-10deg) scale(1); opacity: 1; } 50% { transform: skewX(-10deg) scale(.88); opacity: .6; } }

@media (prefers-reduced-motion: reduce) {
  .abertura-logo, .vel, .abertura-frase, .logo.mini .logo-4 { animation: none; }
  .vel { display: none; }
}