/* Gerador de Orçamento — Pedrozo Diesel
 * Tokens: brand/BrandSystem-PedrozoDiesel.md
 * Mobile-first: o Ângelo opera de celular, em pé, na oficina.
 */

:root {
  --industrial-black: #0b0b0b;
  --technical-blue: #0f2a44;
  --accent-blue: #1e4f7a;
  --neutral-900: #1c1f24;
  --neutral-700: #323b49;
  --diesel-green: #1a7a4a;
  --amber: #c17a00;
  --paper: #ffffff;
  --ink: #14181d;
  --ink-soft: #5b6673;
  --line: #d9dee5;
  --bg: #f2f4f7;
  --radius: 10px;
  --font: 'Paralucent', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Fontes copiadas para dentro da pasta: a página tem de ser auto-contida para
 * poder ser servida de qualquer raiz. Origem: brand/fonts_paralucent/ */
@font-face {
  font-family: 'Paralucent';
  src: url('fonts/Paralucent-Medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Paralucent';
  src: url('fonts/Paralucent-DemiBold.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Paralucent';
  src: url('fonts/Paralucent-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Regras de classe (.campo, .barra-total) empatam em especificidade com o
 * [hidden] do user-agent e, vindo depois, o anulam. Sem isto, [hidden] não
 * esconde nada que tenha display declarado. */
[hidden] { display: none !important; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

/* ---------- App shell ---------- */
.topbar {
  background: var(--industrial-black);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-marca { display: flex; align-items: center; gap: 10px; }
.topbar-logo { width: 32px; height: 32px; border-radius: 4px; display: block; }
.topbar h1 { font-size: 16px; font-weight: 700; letter-spacing: 0.2px; }
.topbar-sub { font-size: 11px; color: #9aa6b4; font-weight: 500; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--neutral-700);
  color: #cdd5de;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font);
  font-weight: 600;
  cursor: pointer;
}
.btn-ghost:active { background: var(--neutral-900); }

main { max-width: 720px; margin: 0 auto; padding: 16px 16px 120px; }

/* ---------- Cards / campos ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.card > h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent-blue);
  margin-bottom: 12px;
  font-weight: 700;
}

.campo { display: block; margin-bottom: 12px; }
.campo > span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
input, select, textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 16px; /* 16px evita zoom automático no iOS */
  font-weight: 500;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent-blue);
  outline-offset: 1px;
  border-color: var(--accent-blue);
}
textarea { resize: vertical; min-height: 76px; }

.linha-3 { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; }
.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.radios { display: flex; gap: 8px; margin-bottom: 12px; }
.radios label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
}
.radios input { width: auto; }
.radios label:has(input:checked) {
  border-color: var(--accent-blue);
  background: #eef4fa;
  color: var(--accent-blue);
}

.hint { font-size: 12px; color: var(--ink-soft); margin-top: -4px; margin-bottom: 10px; }

/* ---------- Itens ---------- */
.acoes-itens { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.btn-add {
  padding: 14px;
  border: 1.5px dashed var(--accent-blue);
  background: #f7fafd;
  color: var(--accent-blue);
  border-radius: 8px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.btn-add:active { background: #e8f1f9; }

.item {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-blue);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  background: #fcfdfe;
}
.item-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  color: #fff;
}
.tag-servico { background: var(--accent-blue); }
.tag-peca { background: var(--neutral-700); }
.btn-remover {
  background: none;
  border: none;
  color: #b3261e;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  padding: 4px;
}
.item-total { font-size: 13px; color: var(--ink-soft); text-align: right; margin-top: 4px; }
.item-total strong { color: var(--ink); font-size: 15px; }
.vazio { color: var(--ink-soft); font-size: 14px; text-align: center; padding: 20px 8px; }

/* ---------- Total + ação fixa ---------- */
.barra-total {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--industrial-black);
  color: #fff;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 20;
}
.barra-total-label { font-size: 11px; color: #9aa6b4; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; }
.barra-total-valor { font-size: 20px; font-weight: 700; }
.btn-primario {
  background: var(--accent-blue);
  color: #fff;
  border: none;
  padding: 14px 22px;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primario:active { background: #17608f; }

.alerta {
  background: #fdecea;
  border: 1px solid #f5c6c2;
  color: #8c1d18;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* ---------- Preview: barra de ações ---------- */
.acoes-preview {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
  position: sticky;
  top: 60px;
  z-index: 5;
}
.btn-whats { background: #25d366; color: #04310f; }
.btn-whats:active { background: #1eb355; }
.btn-sec {
  background: var(--technical-blue);
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 8px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

/* ---------- Histórico ---------- */
.hist-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  font-family: var(--font);
}
.hist-num { font-weight: 700; font-size: 13px; color: var(--accent-blue); }
.hist-cliente { font-weight: 600; font-size: 14px; }
.hist-meta { grid-column: 1 / -1; font-size: 12px; color: var(--ink-soft); }

/* ---------- DAV (A4) ---------- */
.dav-wrap { background: var(--bg); }
#dav {
  background: #fff;
  color: #000;
  padding: 14mm 12mm;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 10.5pt;
}
.dav-disclaimer {
  border: 1px solid #000;
  padding: 5px;
  text-align: center;
  font-size: 7pt;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
}
.dav-topo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  border-bottom: 2px solid var(--technical-blue);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.dav-emitente { display: flex; gap: 10px; align-items: flex-start; }
.dav-logo { width: 54px; height: 54px; border-radius: 3px; flex-shrink: 0; }
.dav-razao { font-weight: 700; font-size: 11pt; color: var(--technical-blue); margin-bottom: 2px; }
.dav-linha { font-size: 8pt; line-height: 1.4; color: #333; }
.dav-titulo {
  font-size: 15pt;
  font-weight: 700;
  color: var(--technical-blue);
  text-align: right;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.dav-meta table { border-collapse: collapse; font-size: 8pt; margin-left: auto; }
.dav-meta th, .dav-meta td { border: 1px solid var(--line); padding: 3px 8px; text-align: left; }
.dav-meta th { background: #f2f4f7; font-weight: 600; }

.dav-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dav-secao { margin-bottom: 12px; }
.dav-secao h3 {
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent-blue);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  margin-bottom: 6px;
}
.dav-bloco { font-size: 9pt; }
.dav-bloco .dav-linha { font-size: 8.5pt; }

.dav-tabela { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
.dav-tabela th {
  background: var(--technical-blue);
  color: #fff;
  padding: 5px 6px;
  text-align: left;
  font-weight: 600;
  font-size: 7.5pt;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.dav-tabela td { padding: 5px 6px; border-bottom: 1px solid #e8ecf1; }
.dav-tabela .num { text-align: right; white-space: nowrap; }
.dav-tabela tbody tr:nth-child(even) { background: #fafbfc; }

.dav-subtotal {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  font-size: 8pt;
  padding: 5px 6px;
  background: #f7f9fb;
  border-top: 1px solid var(--line);
}
.dav-subtotal strong { color: var(--technical-blue); }

.dav-total-geral {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--technical-blue);
  color: #fff;
  padding: 9px 12px;
  border-radius: 3px;
  margin: 12px 0;
}
.dav-total-geral span { font-size: 9pt; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.dav-total-geral strong { font-size: 15pt; font-weight: 700; }

.dav-rodape {
  border-top: 1px solid var(--line);
  padding-top: 6px;
  font-size: 7pt;
  color: #666;
  text-align: center;
}

/* ---------- Print: A4 fiel ---------- */
@page { size: A4; margin: 0; }

@media print {
  body { background: #fff; }
  .topbar, .acoes-preview, .barra-total, #tela-form, #tela-historico { display: none !important; }
  main { max-width: none; margin: 0; padding: 0; }
  #dav {
    border: none;
    border-radius: 0;
    padding: 12mm 10mm;
    width: 210mm;
    min-height: 297mm;
  }
  .dav-tabela { page-break-inside: auto; }
  .dav-tabela tr { page-break-inside: avoid; }
  .dav-secao { page-break-inside: avoid; }
  .dav-tabela th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dav-total-geral, .dav-tabela tbody tr:nth-child(even), .dav-meta th, .dav-subtotal {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

@media (max-width: 480px) {
  .linha-3 { grid-template-columns: 1fr; }
  .acoes-preview { grid-template-columns: 1fr; position: static; }
  #dav { padding: 10px; font-size: 9pt; }
  .dav-topo { grid-template-columns: 1fr; }
  .dav-titulo, .dav-meta table { text-align: left; margin-left: 0; }
}