/* Backlog da Manutencao (10/2026) — so o que nao existe no tema/style.
   Nenhuma classe daqui e' lida por app.js: esta pagina nao carrega o app.js.

   Cores dos tipos validadas com o validador de paleta (dataviz, 08/10/2026),
   sobre fundo claro: corretiva --info, preventiva --ok, servico --brand-ink.
   O --brand (#f7ac00) REPROVOU para marca de grafico: 1,9:1 contra o fundo. */

.bk-conteudo { max-width: 72rem; }
/* O header do style.css alinha com os 42rem do app do mecanico; aqui a pagina e'
   de 72rem, e o "Voltar" ficava solto no meio da tela larga. Mesma conta, outra largura. */
.bk-header { padding-inline: calc(max(0px, (100% - 72rem) / 2) + 16px); }

.bk-sub { margin: -6px 0 14px; font-size: var(--t-sm); color: var(--ink-2); }
.bk-carregando { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: var(--t-sm); padding: 24px 0; }

/* 44px: piso de alvo do projeto (campo.css). */
.bk-select, .bk-busca {
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line-forte);
  border-radius: var(--r-mini);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-sm);
}
.bk-busca { min-width: 0; flex: 1 1 200px; }

/* ── Cartoes do dia ───────────────────────────────────────────────────────── */

.bk-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.bk-cartao {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  background: var(--surface);
}
.bk-cartao-rotulo { font-size: var(--t-xs); color: var(--ink-2); }
.bk-cartao-valor { font-size: var(--t-xl); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.25; }
.bk-cartao-detalhe { font-size: var(--t-xs); color: var(--ink-3); }
/* Alarme: fundo e tinta de "bad", com texto — nunca so cor. */
.bk-cartao.bk-alarme { border-color: var(--bad-line); background: var(--bad-bg); }
.bk-cartao.bk-alarme .bk-cartao-valor,
.bk-cartao.bk-alarme .bk-cartao-rotulo,
.bk-cartao.bk-alarme .bk-cartao-detalhe { color: var(--bad-ink); }

/* ── Blocos ───────────────────────────────────────────────────────────────── */

.bk-bloco {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}
.bk-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.bk-titulo { font-size: var(--t-base); font-weight: 600; margin: 0; }
.bk-nota { font-size: var(--t-xs); color: var(--ink-3); }

.bk-legenda { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; }
.bk-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-xs); color: var(--ink-2); }
.bk-cor { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* Identidade dos tipos: mesma cor no grafico, na legenda e na tabela. */
.bk-cor-corretiva  { background: var(--info); }
.bk-cor-preventiva { background: var(--ok); }
.bk-cor-servico    { background: var(--brand-ink); }
.bk-cor-outros     { background: #9ca3af; }
.bk-barra-corretiva  { fill: var(--info); }
.bk-barra-preventiva { fill: var(--ok); }
.bk-barra-servico    { fill: var(--brand-ink); }
.bk-barra-outros     { fill: #9ca3af; }

/* ── Graficos (SVG em pixels medidos, como a /aderencia/) ─────────────────── */

.bk-grafico { height: 220px; }
.bk-grafico svg, .bk-grafico-clientes svg { display: block; width: 100%; }
.bk-eixo   { stroke: var(--line); stroke-width: 1; }
.bk-grade  { stroke: var(--line-soft); stroke-width: 1; }
.bk-rotulo { fill: var(--ink-3); color: var(--ink-3); }
.bk-valor  { font-weight: 600; fill: var(--ink-2); color: var(--ink-2); }
.bk-nome   { fill: var(--ink); color: var(--ink); }
.bk-alvo { fill: rgba(0, 0, 0, 0); cursor: pointer; }
.bk-alvo:hover { fill: rgba(0, 0, 0, .05); }
.bk-alvo-ativo { fill: var(--brand-15); }
.bk-vazio { color: var(--ink-3); font-size: var(--t-sm); padding: 16px 0; }

/* ── Tabelas ──────────────────────────────────────────────────────────────── */

.bk-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

/* No celular a tabela rola de lado DENTRO da caixa — a pagina nao. */
.bk-tabela-caixa { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bk-tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.bk-tabela th, .bk-tabela td { padding: 0 8px; text-align: left; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.bk-tabela td { height: 44px; color: var(--ink); }
.bk-tabela th { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.bk-tabela .bk-num { text-align: right; font-variant-numeric: tabular-nums; }
.bk-tabela .bk-texto { white-space: normal; min-width: 220px; max-width: 420px; color: var(--ink-2); }

/* Cabecalho que ordena: botao de 44px, sem cara de botao. */
.bk-ordenar {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; min-width: 44px; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
}
.bk-ordenar:hover { color: var(--ink); }
.bk-ordenar[aria-sort="ascending"]::after  { content: "↑"; }
.bk-ordenar[aria-sort="descending"]::after { content: "↓"; }

/* O link da RAT ocupa a altura da linha: alvo de 44px. */
.bk-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--info-ink); font-weight: 600; text-decoration: none;
}
.bk-link:hover { text-decoration: underline; }

.bk-tipo { display: inline-flex; align-items: center; gap: 6px; }

/* Etiquetas: tinta --ink sobre fundo claro (o ambar 15% com tinta de marca
   reprova em AA — ja pegou duas vezes no projeto). */
.bk-etiqueta {
  display: inline-block; padding: 1px 7px; margin-right: 4px;
  border-radius: var(--r-pill); font-size: var(--t-2xs); font-weight: 600;
  background: var(--brand-15); color: var(--ink);
}
.bk-etiqueta-alarme { background: var(--bad-bg); color: var(--bad-ink); }
.bk-etiqueta-info   { background: var(--info-bg); color: var(--info-ink); }

.bk-dias-velho { font-weight: 700; }

/* Titulo de tarefa pode ser um paragrafo inteiro: 2 linhas, o resto no title. */
.bk-resumo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  padding: 4px 0;
}