/* ═══════════════════════════════════════════════════════════════════════════
   AS PECAS DA /manutencao-preventiva-de-onibus.html (03/11/2026)
   ═══════════════════════════════════════════════════════════════════════════
   A identidade vem de /venda.css e as pecas comuns de /busca.css (bx-*, ct-*,
   es-*, cena). Aqui so' o que esta pagina tem de seu: os dois regimes, a
   tabela da estrutura do plano (que vira lista no celular) e a folha de
   impressao, que imprime so' a tabela. */

/* ── OS DOIS REGIMES ────────────────────────────────────────────────────── */
.pm-regimes{display:grid;gap:14px}
.pm-regime{border-radius:18px;padding:20px 22px 22px;background:var(--card);border:1px solid var(--linha)}
.pm-regime small{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.pm-regime b{display:block;font-size:19px;font-weight:700;color:var(--txt);line-height:1.25}
.pm-regime ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.pm-regime li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.45;color:var(--dim)}
.pm-regime li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--mute)}
.pm-regime.severo{border-color:var(--acc-borda);background:radial-gradient(80% 120% at 0 0,rgba(34,197,139,.09),transparent 60%),var(--card)}
.pm-regime.severo small{color:var(--acc)}
.pm-regime.severo li::before{background:var(--acc)}
.pm-regime-pe{margin-top:4px !important;font-size:13px !important;color:var(--mute) !important}

/* ── A TABELA DA ESTRUTURA ──────────────────────────────────────────────── */
.pm-cab-tabela{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 32px}
.pm-cab-tabela .bx-cab{max-width:680px}
.pm-dica{font-size:13px !important;color:var(--mute) !important;max-width:300px}
.pm-moldura{margin-top:34px;border-radius:22px;border:1px solid var(--linha);background:var(--card);overflow:hidden}
.pm-tabela{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.pm-tabela thead th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  padding:16px 22px;background:#0F141B;border-bottom:1px solid var(--linha)}
.pm-tabela td{padding:13px 22px;vertical-align:top;color:var(--dim);border-top:1px solid var(--linha)}
.pm-tabela td:first-child{color:var(--txt);font-weight:600;width:38%}
.pm-tabela td:nth-child(2){width:27%;white-space:nowrap}
.pm-tabela tbody tr.pm-grupo th{text-align:left;padding:20px 22px 8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);
  border-top:1px solid var(--linha);background:linear-gradient(90deg,rgba(34,197,139,.06),transparent 60%)}
.pm-tabela tbody tr.pm-grupo th span{letter-spacing:0;text-transform:none;font-weight:500;color:var(--mute);margin-left:8px}
.pm-tabela tbody tr.pm-grupo + tr td{border-top:0}
.pm-tabela .ct-campo{vertical-align:1px}
.pm-pe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:14px}
.pm-pe p{margin:0 !important;padding:14px 18px;border-radius:14px;background:var(--card);border:1px solid var(--linha);font-size:14px !important;line-height:1.5 !important;color:var(--dim) !important}
.pm-pe b{color:var(--txt)}

/* ── O PASSO A PASSO ────────────────────────────────────────────────────── */
.pm-passos{margin-top:0}
.pm-passos li{padding-bottom:22px}

@media (max-width:900px){
  .pm-regime{padding:18px 18px 20px}
  .pm-regime b{font-size:17px}
  .pm-pe{grid-template-columns:minmax(0,1fr)}
  .pm-dica{max-width:none}
}

/* NO CELULAR A TABELA VIRA LISTA: cada linha e' um cartao com o rotulo da
   coluna escrito em cima (data-rot). Rolar tabela de lado no celular e' o
   que faz a pessoa desistir. */
@media (max-width:760px){
  .pm-moldura{border-radius:18px}
  .pm-tabela thead{display:none}
  .pm-tabela,.pm-tabela tbody,.pm-tabela tr,.pm-tabela td,.pm-tabela th{display:block;width:auto !important}
  .pm-tabela tbody tr.pm-grupo th{padding:18px 18px 6px}
  .pm-tabela tbody tr.pm-grupo th span{display:block;margin:4px 0 0}
  .pm-tabela tbody tr:not(.pm-grupo){padding:12px 18px 14px;border-top:1px solid var(--linha)}
  .pm-tabela tbody tr.pm-grupo + tr{border-top:0}
  .pm-tabela td{padding:0;border:0;white-space:normal !important}
  .pm-tabela td + td{margin-top:6px;font-size:14px}
  .pm-tabela td[data-rot]::before{content:attr(data-rot);display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:1px}
}

/* ── A FOLHA IMPRESSA ───────────────────────────────────────────────────────
   Ctrl+P imprime so' a estrutura, em preto no branco, com os campos em branco
   como linha de escrever. */
@media print{
  html,body{background:#fff !important;color:#000 !important}
  header,footer,body > section:not(#estrutura),.pm-dica,.pm-cab-tabela .olho{display:none !important}
  #estrutura{background:#fff !important}
  #estrutura .bx-bloco{padding:0 !important;max-width:none}
  #estrutura h2{font-size:20px !important;color:#000 !important}
  #estrutura h2 em{color:#000 !important}
  #estrutura p{color:#000 !important}
  .pm-moldura{border:1px solid #999;border-radius:0;background:#fff;margin-top:12px}
  .pm-tabela{font-size:11pt}
  .pm-tabela thead th,.pm-tabela tbody tr.pm-grupo th{background:#eee !important;color:#000 !important}
  .pm-tabela td,.pm-tabela td:first-child{color:#000 !important;border-top:1px solid #bbb}
  .pm-tabela tr{break-inside:avoid}
  .pm-tabela .ct-campo{background:none !important;border:0 !important;border-bottom:1px solid #000 !important;color:#555 !important;min-width:80px}
  .pm-pe p{background:#fff !important;border:1px solid #bbb;color:#000 !important}
  .pm-pe b{color:#000}
  [data-entra]{transform:none !important}
}

/* o paragrafo logo abaixo do h2 nos blocos sem coluna (a tabela e o aviso) */
.pm-cab-tabela .bx-cab h2,#aviso .bx-cab h2{margin-bottom:18px}

/* no celular, "a cada" e "onde está o número" lado a lado: a lista cai pela
   metade. E o Ctrl+P nao existe no celular. */
@media (max-width:760px){
  .pm-dica{display:none}
  .pm-tabela tbody tr:not(.pm-grupo){display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:14px}
  .pm-tabela tbody tr:not(.pm-grupo) td:first-child{grid-column:1 / -1}
  .pm-tabela td + td{margin-top:8px}
}