/* ═════════════════════════════════════════════════════════════
   Portal do cliente v4 — base compartilhada
   Design importado do Claude Design (portal-cliente-v4.html)

   Carregado por todas as telas de /meu-veiculo antes do CSS da
   página. São páginas standalone (head próprio, sem shared.css),
   então os tokens moram aqui. Toda classe tem prefixo pc- pra não
   colidir com o pwa-install.css nem com nada global.
   ═════════════════════════════════════════════════════════════ */

:root {
  --pc-o: #f97316; --pc-o6: #ea580c; --pc-o4: #fb923c; --pc-o5: #fff4ec; --pc-o1: #ffe4cc;
  --pc-nv: #2a2d43; --pc-nv2: #1f2135; --pc-nv3: #3a3e5c;
  --pc-bg: #f3f4f8; --pc-bd: #e5e7ee; --pc-bd2: #eff0f5;
  --pc-ink: #1c1e30; --pc-mu: #4b5063; --pc-mu2: #6c7186; --pc-mu3: #9a9fb3;
  --pc-gr: #16a34a; --pc-gr5: #ecfdf3; --pc-gr7: #15803d;
  --pc-yl: #f59e0b; --pc-yl5: #fef6e6; --pc-yl7: #b45309;
  --pc-rd: #dc2626; --pc-rd5: #fef2f2; --pc-rd7: #b91c1c;
  --pc-blu: #2563eb;
  --pc-r: 18px;
  --pc-sh: 0 1px 2px rgba(28,30,48,.05), 0 6px 20px -12px rgba(28,30,48,.12);
  --pc-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Manrope', system-ui, sans-serif;
  background: var(--pc-bg); color: var(--pc-ink);
  font-size: 16px; line-height: 1.5; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 92px;
}
h1, h2, h3, h4 { margin: 0; }
.pc-dsp { font-family: 'Satoshi', 'Manrope', sans-serif; font-weight: 900; letter-spacing: -.03em; }
.pc-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-feature-settings: "tnum" 1; }
a { color: var(--pc-o6); text-decoration: none; }
a:hover { color: var(--pc-o); }
button { font-family: inherit; }
[hidden] { display: none !important; }
.pc-hidden { display: none !important; }

/* ---------- topo navy ---------- */
.pc-hero { background: var(--pc-nv); color: #fff; padding-bottom: 64px; position: relative; overflow: hidden; }
.pc-hero::after {
  content: ''; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px;
  border-radius: 50%; background: radial-gradient(circle, rgba(249,115,22,.28), transparent 68%);
  pointer-events: none;
}
.pc-hd { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.pc-hd .pc-logo { height: 30px; width: auto; max-width: 190px; object-fit: contain; display: block; }
.pc-hd .pc-logo.pc-invert { filter: brightness(0) invert(1); }
.pc-hd .pc-out {
  margin-left: auto; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  color: #dfe1ec; font-weight: 700; font-size: 13px; padding: 8px 13px; border-radius: 9px;
  cursor: pointer; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap;
}
.pc-hd .pc-out:hover { background: rgba(255,255,255,.12); color: #fff; }
.pc-hero-in { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 14px 18px 0; }
.pc-shop { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #b8bccf; }
.pc-shop i { color: var(--pc-o4); }
.pc-hero h1 { margin: 8px 0 0; font-size: 30px; line-height: 1.1; color: #fff; }
.pc-hero h1 em { font-style: normal; color: var(--pc-o4); }
.pc-hero .pc-sb { margin-top: 8px; font-size: 15px; color: #b8bccf; font-weight: 600; max-width: 560px; line-height: 1.5; }
@media (min-width: 900px) { .pc-hero h1 { font-size: 40px; } .pc-hero { padding-bottom: 84px; } }

/* Voltar: mesma pinta do "Sair", mas na esquerda da barra do topo. */
.pc-back {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700;
  color: #b8bccf; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  padding: 8px 13px; border-radius: 9px;
}
.pc-back:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ---------- grade ---------- */
.pc-wrap { max-width: 1120px; margin: -52px auto 0; padding: 0 18px; position: relative; z-index: 3; }
.pc-cols { display: grid; gap: 18px; }
@media (min-width: 900px) {
  /* minmax(0, 1fr): sem isso um filho largo (a régua de dias do agendamento,
     uma tabela) estica a coluna e joga a lateral pra fora da página. */
  .pc-cols { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .pc-side { position: sticky; top: 18px; }
}
/* Telas de uma coluna só (acesso, agendamento sem horários) ficam centradas. */
.pc-wrap.pc-narrow { max-width: 760px; }
.pc-stk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; min-width: 0; }

.pc-card { background: #fff; border-radius: var(--pc-r); box-shadow: var(--pc-sh); }
.pc-ch { display: flex; align-items: center; gap: 9px; padding: 16px 20px; border-bottom: 1px solid var(--pc-bd2); font-size: 13.5px; font-weight: 800; color: var(--pc-ink); }
.pc-ch i { font-size: 17px; color: var(--pc-o); }
.pc-ch .pc-n { margin-left: auto; font-size: 12px; color: var(--pc-mu3); font-weight: 700; }
.pc-cb { padding: 20px; }

.pc-flash {
  display: flex; align-items: center; gap: 10px; background: var(--pc-gr5); color: var(--pc-gr7);
  border: 1px solid #bbf7d0; border-radius: 13px; padding: 13px 16px; font-size: 14px;
  font-weight: 700; margin-bottom: 18px;
}
.pc-flash i { font-size: 19px; flex-shrink: 0; }
.pc-flash.pc-bad { background: var(--pc-rd5); color: var(--pc-rd7); border-color: #fecaca; }

/* ---------- veículo ---------- */
.pc-veh { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: var(--pc-r); padding: 16px 18px; box-shadow: 0 14px 40px -18px rgba(28,30,48,.35); }
.pc-veh .pc-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--pc-nv); color: var(--pc-o4); display: grid; place-items: center; font-size: 24px; flex-shrink: 0; }
.pc-veh .pc-t { flex: 1; min-width: 0; }
.pc-veh .pc-t b { display: block; font-size: 17px; line-height: 1.2; }
.pc-veh .pc-t span { font-size: 13px; color: var(--pc-mu2); font-weight: 600; }
.pc-plate {
  border: 2px solid var(--pc-nv); border-radius: 7px; padding: 5px 10px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 700; font-size: 14.5px;
  letter-spacing: 1.5px; color: var(--pc-nv); flex-shrink: 0; position: relative;
}
.pc-plate::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--pc-blu); border-radius: 4px 4px 0 0; }

/* ---------- linhas de valor ---------- */
.pc-lin { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--pc-bd2); font-size: 14.5px; }
.pc-lin .pc-l { font-weight: 600; color: var(--pc-ink); }
.pc-lin .pc-l small { display: block; font-size: 12px; color: var(--pc-mu3); font-weight: 600; margin-top: 2px; }
.pc-lin .pc-v { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 700; white-space: nowrap; }
.pc-lin .pc-v.pc-na { font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--pc-mu3); font-size: 13px; }
.pc-lin.pc-tot { border-bottom: 0; padding-top: 16px; font-size: 16px; font-weight: 800; align-items: center; }
.pc-lin.pc-tot .pc-v { font-size: 24px; color: var(--pc-nv); font-family: 'Satoshi', 'Manrope', sans-serif; font-weight: 900; letter-spacing: -.02em; }
.pc-lin.pc-tot .pc-v.pc-na { font-size: 14px; }

/* ---------- botões ---------- */
.pc-btns { display: grid; gap: 10px; margin-top: 14px; }
@media (min-width: 520px) { .pc-btns.pc-two { grid-template-columns: 1fr auto; } }
.pc-b {
  border: 0; border-radius: 13px; padding: 15px 20px; font-size: 15.5px; font-weight: 800;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; transition: transform .1s, box-shadow .15s; text-align: center;
}
.pc-b:active { transform: translateY(1px); }
.pc-b i { font-size: 20px; }
.pc-b.pc-pri { background: var(--pc-grad); color: #fff; box-shadow: 0 12px 26px -12px rgba(249,115,22,.75); }
.pc-b.pc-pri:hover { color: #fff; box-shadow: 0 14px 30px -12px rgba(249,115,22,.9); }
.pc-b.pc-sec { background: #fff; color: var(--pc-nv); border: 1.5px solid var(--pc-bd); }
.pc-b.pc-sec:hover { color: var(--pc-nv); border-color: var(--pc-nv); }
.pc-b.pc-nv { background: var(--pc-nv); color: #fff; }
.pc-b.pc-nv:hover { color: #fff; background: var(--pc-nv3); }
.pc-b:disabled, .pc-b[disabled] { background: var(--pc-bd); color: var(--pc-mu3); box-shadow: none; cursor: not-allowed; }
.pc-fine { font-size: 12.5px; color: var(--pc-mu3); font-weight: 600; text-align: center; margin-top: 12px; line-height: 1.5; }

/* ---------- contato ---------- */
.pc-wa { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--pc-nv); border-radius: var(--pc-r); color: #fff; cursor: pointer; box-shadow: var(--pc-sh); }
.pc-wa:hover { background: var(--pc-nv3); color: #fff; }
.pc-wa .pc-ic { width: 44px; height: 44px; border-radius: 13px; background: #25d366; color: #fff; display: grid; place-items: center; font-size: 24px; flex-shrink: 0; }
.pc-wa .pc-t { flex: 1; min-width: 0; }
.pc-wa .pc-t b { display: block; font-size: 15.5px; font-weight: 800; color: #fff; }
.pc-wa .pc-t span { font-size: 12.5px; color: #b8bccf; font-weight: 600; }
.pc-wa .pc-ar { color: var(--pc-o4); font-size: 20px; flex-shrink: 0; }

/* ---------- destaque navy ---------- */
.pc-tip { display: flex; gap: 10px; align-items: center; background: var(--pc-nv); color: #dfe1ec; border-radius: 12px; padding: 12px 14px; margin-top: 16px; font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.pc-tip > i { color: var(--pc-o4); font-size: 18px; flex-shrink: 0; }
.pc-tip div { flex: 1; }
.pc-tip strong { color: #fff; }
.pc-tip .pc-tb { border: 0; background: var(--pc-grad); color: #fff; font-weight: 800; font-size: 13px; padding: 9px 13px; border-radius: 9px; cursor: pointer; flex-shrink: 0; min-height: 38px; display: inline-flex; align-items: center; }
.pc-tip .pc-tb:hover { color: #fff; }

/* ---------- campos ---------- */
.pc-lb { display: block; font-size: 13px; font-weight: 800; color: var(--pc-ink); margin-bottom: 8px; }
.pc-in {
  width: 100%; border: 2px solid var(--pc-bd); border-radius: 13px; background: var(--pc-bg);
  font: inherit; font-size: 15px; color: var(--pc-ink); padding: 13px 14px;
  outline: none; transition: border-color .15s, background .15s, box-shadow .15s;
}
.pc-in:focus { border-color: var(--pc-o); background: #fff; box-shadow: 0 0 0 4px rgba(249,115,22,.13); }
.pc-in::placeholder { color: var(--pc-mu3); }
.pc-in.pc-err { border-color: var(--pc-rd); background: var(--pc-rd5); }
textarea.pc-in { resize: vertical; min-height: 92px; }

.pc-msg { display: none; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--pc-rd7); font-weight: 600; line-height: 1.45; }
.pc-msg.on { display: flex; }
.pc-msg i { font-size: 16px; flex: none; margin-top: 1px; }

/* ---------- barra fixa mobile ---------- */
.pc-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--pc-bd);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 9px;
}
.pc-bar.pc-one { grid-template-columns: 1fr; }
.pc-bar .pc-b { font-size: 14.5px; padding: 13px 12px; min-height: 52px; }
@media (min-width: 900px) { .pc-bar { display: none; } body { padding-bottom: 30px; } }

/* ---------- rodapé ---------- */
.pc-ft { text-align: center; padding: 30px 18px 34px; font-size: 12.5px; color: var(--pc-mu3); font-weight: 600; line-height: 1.7; }
.pc-ft img { height: 22px; opacity: .55; display: block; margin: 10px auto 0; }
.pc-ft .pc-lock { display: inline-flex; align-items: center; gap: 6px; }
.pc-empty { font-size: 14px; color: var(--pc-mu2); font-weight: 600; margin: 0; padding: 4px 0; }