:root {
  --azul: #00416b;
  --azul-claro: #0a6aa8;
  --amarelo: #f7b500;
  --fundo: #f2f4f7;
  --branco: #fff;
  --texto: #1f2937;
  --cinza: #6b7280;
  --borda: #d1d5db;
  --verde: #15803d;
  --vermelho: #b91c1c;
  --raio: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  font-size: 16px;
}

/* ---------- Barra superior ---------- */

.topo {
  background: var(--azul);
  color: var(--branco);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  height: 60px;
}

.topo .marca {
  font-size: 20px;
  font-weight: 700;
  color: var(--amarelo);
  white-space: nowrap;
}

.topo nav {
  display: flex;
  gap: 4px;
  height: 100%;
}

.topo nav a {
  color: var(--branco);
  text-decoration: none;
  padding: 0 18px;
  display: flex;
  align-items: center;
  font-weight: 500;
  border-bottom: 3px solid transparent;
}

.topo nav a:hover { background: rgba(255, 255, 255, 0.08); }
.topo nav a.ativo { border-bottom-color: var(--amarelo); }

.saldo-badge {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.12);
  color: var(--amarelo);
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.btn-sair {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--branco);
  padding: 6px 14px;
  border-radius: var(--raio);
  cursor: pointer;
  font-size: 14px;
}
.btn-sair:hover { background: rgba(255, 255, 255, 0.1); }

.topbar { min-height:60px; padding:10px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--azul); color:var(--branco); }
.topbar .marca { color:var(--branco); font-size:20px; font-weight:700; white-space:nowrap; }
.topbar .marca span { color:var(--amarelo); }
.topbar .items-nav { display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.topbar .link { border:0; background:transparent; color:var(--branco); cursor:pointer; font:inherit; padding:8px; }
.topbar .link:hover, .topbar .link:focus-visible { text-decoration:underline; }

.seletor-idioma { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 8px; background: rgba(255,255,255,.12); }
.seletor-idioma button { width: 34px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; font-size: 19px; line-height: 1; opacity: .62; }
.seletor-idioma button:hover, .seletor-idioma button:focus-visible { opacity: 1; outline: 2px solid var(--amarelo); outline-offset: 1px; }
.seletor-idioma button.ativo { opacity: 1; border-color: var(--amarelo); background: rgba(255,255,255,.18); }
.login-idioma { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.login-idioma .seletor-idioma { background: var(--cinza-claro, #e5e7eb); }

@media (max-width: 760px) {
  .topo { height:auto; min-height:60px; padding:10px 12px; gap:10px; flex-wrap:wrap; }
  .topo nav { order:3; width:100%; overflow-x:auto; }
  .topo nav a { min-height:44px; padding:0 12px; white-space:nowrap; }
  .saldo-badge { margin-left:auto; }
  .topbar { padding:10px 12px; align-items:flex-start; }
  .topbar .items-nav { flex-wrap:wrap; gap:8px; }
}

/* ---------- Layout ---------- */

.container {
  max-width: 980px;
  margin: 24px auto 60px;
  padding: 0 16px;
}

.card {
  background: var(--branco);
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  padding: 20px 24px;
  margin-bottom: 20px;
}

.card h2 {
  margin: 0 0 16px;
  font-size: 17px;
  color: var(--azul);
  display: flex;
  align-items: center;
  gap: 10px;
}

.card h2 .passo {
  background: var(--azul);
  color: var(--branco);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* ---------- Formulários ---------- */

.linha {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.campo { flex: 1 1 180px; display: flex; flex-direction: column; }

/* Escolha inline (radio/checkbox + texto). Não usar .campo aqui: ela é
   flex-column para pôr o rótulo acima do input, o que empilha o círculo
   do radio sobre o texto. */
.escolha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--texto);
  padding: 8px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--branco);
}
.escolha:hover { border-color: var(--azul); }
.escolha input { margin: 0; width: auto; accent-color: var(--azul); }
.escolha:has(input:checked) { border-color: var(--azul); background: #f0f6fc; }
.campo.curto { flex: 0 1 130px; }
.campo.medio { flex: 0 1 220px; }

.campo label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cinza);
  margin-bottom: 4px;
}

.campo input, .campo select {
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--branco);
  width: 100%;
}

.campo input:focus, .campo select:focus {
  outline: 2px solid var(--azul-claro);
  outline-offset: -1px;
}

.dica { font-size: 12px; color: var(--cinza); margin-top: 4px; }

.subtitulo {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--azul);
  margin: 16px 0 8px;
}

.item-linha { display: flex; gap: 12px; margin-bottom: 8px; align-items: flex-end; }
.item-linha .campo { margin: 0; }
.item-linha .btn-remover {
  background: none;
  border: none;
  color: var(--vermelho);
  font-size: 20px;
  cursor: pointer;
  padding: 10px 6px;
}

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: var(--raio);
  cursor: pointer;
  background: var(--azul);
  color: var(--branco);
}

.btn:hover { background: var(--azul-claro); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn.destaque { background: var(--amarelo); color: var(--azul); }
.btn.destaque:hover { filter: brightness(1.05); }

.btn.secundario {
  background: var(--branco);
  color: var(--azul);
  border: 1px solid var(--azul);
}
.btn.secundario:hover { background: #eef6fb; }

.btn.grande { width: 100%; padding: 16px; font-size: 18px; }

/* ---------- Mensagens ---------- */

.aviso {
  padding: 12px 16px;
  border-radius: var(--raio);
  margin-bottom: 16px;
  font-size: 15px;
}
.aviso.erro { background: #fee2e2; color: var(--vermelho); }
.aviso.sucesso { background: #dcfce7; color: var(--verde); }
.aviso.info { background: #dbeafe; color: var(--azul); }
.aviso a { color: inherit; font-weight: 700; }
.oculto { display: none !important; }

/* ---------- Cotação ---------- */

.servicos { display: flex; gap: 16px; flex-wrap: wrap; }

.servico {
  flex: 1 1 240px;
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  cursor: pointer;
  background: var(--branco);
  text-align: left;
}

.servico:hover { border-color: var(--azul-claro); }
.servico.selecionado { border-color: var(--azul); background: #eef6fb; }
.servico .nome { font-weight: 700; font-size: 18px; color: var(--azul); }
.servico .preco { font-size: 26px; font-weight: 700; margin: 8px 0 4px; }
.servico .prazo { color: var(--cinza); font-size: 14px; }
.servico .detalhe { color: var(--cinza); font-size: 13px; margin-top: 6px; }
.servico .economia { color: var(--verde); font-size: 13px; margin-top: 6px; font-weight: 600; }
.servico .economia.acima { color: var(--vermelho); }
.servico.indisponivel { opacity: 0.55; cursor: not-allowed; }
.servico.indisponivel .nome { color: var(--cinza); }

/* ---------- Pagamento ---------- */

.pagamentos { display: flex; gap: 12px; flex-wrap: wrap; }

.pagamento {
  flex: 1 1 140px;
  padding: 14px;
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  background: var(--branco);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.pagamento:hover { border-color: var(--azul-claro); }
.pagamento.selecionado { border-color: var(--azul); background: #eef6fb; color: var(--azul); }

.total-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--borda);
}
.total-linha .rotulo { font-size: 16px; color: var(--cinza); }
.total-linha .valor { font-size: 30px; font-weight: 700; color: var(--azul); }

/* ---------- Tabela (histórico) ---------- */

table { width: 100%; border-collapse: collapse; background: var(--branco); }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--borda); font-size: 15px; }
th { background: #f8fafc; color: var(--cinza); font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; }
tr:hover td { background: #f8fafc; }
td .btn { padding: 6px 12px; font-size: 14px; }

/* ---------- Comprovante (tela) ---------- */

#print-area { display: none; }

/* ---------- Impressão térmica 80mm ---------- */

@media print {
  @page { size: 80mm auto; margin: 0; }

  body { background: var(--branco); }
  .app { display: none !important; }

  #print-area {
    display: block;
    width: 72mm;
    margin: 0 auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    color: #000;
  }

  #print-area .via { padding: 4mm 0 6mm; }
  #print-area .corte {
    border-top: 1px dashed #000;
    text-align: center;
    font-size: 9px;
    padding-top: 1mm;
    margin-top: 2mm;
  }
  #print-area h1 { font-size: 14px; text-align: center; margin: 0 0 2mm; }
  #print-area .centro { text-align: center; }
  #print-area .secao { border-top: 1px dashed #000; margin-top: 2mm; padding-top: 2mm; }
  #print-area .titulo-secao { font-weight: bold; text-transform: uppercase; font-size: 10px; }
  #print-area .par { display: flex; justify-content: space-between; gap: 4mm; }
  #print-area .total { font-size: 14px; font-weight: bold; }
  #print-area p { margin: 0.5mm 0; }
  #print-area .rodape { font-size: 9px; text-align: center; margin-top: 3mm; }
}