/* Gestão → Quadro de chaves — `#/chaves` (migration 077; web/chaves.js).
 *
 * O armário da Total: cartões por chave (número grande, situação em cor), a agenda por dia e a ficha de cada chave.
 * Celular primeiro (360 px). Reaproveita `.fin-config-voltar/-botoes/-erros` (financiamento.css).
 *
 * ⚠️ Nenhuma cor fora dos dois blocos de token (CLAUDE.md §4). Todo `--ch-*` tem par no escuro.
 */
:root {
  --ch-livre: #047857;
  --ch-livre-s: #e4f7ef;
  --ch-fora: #1d4ed8;
  --ch-fora-s: #e8effd;
  --ch-parada: #b45309;
  --ch-parada-s: #fdf3de;
  --ch-perdida: #b91c1c;
  --ch-perdida-s: #fde8e8;
}

:root[data-tema="escuro"] {
  --ch-livre: #6ee7b7;
  --ch-livre-s: #12302a;
  --ch-fora: #93b4fb;
  --ch-fora-s: #172338;
  --ch-parada: #f5b86a;
  --ch-parada-s: #3a2a10;
  --ch-perdida: #fca5a5;
  --ch-perdida-s: #3b1717;
}

.ch { display: flex; flex-direction: column; gap: 14px; max-width: 960px; margin: 0 auto; }
.ch .card { margin: 0; }
.ch h2 { margin: 0 0 4px; }
.ch h3 { margin: 0 0 8px; font-size: 16px; }
.ch-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#ch_nova { flex: 0 0 auto; white-space: nowrap; }
.ch-ficha .ch-cab { justify-content: flex-start; }
.ch-txt-conflito { color: var(--ch-perdida); }

.ch-abas { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-abas button { flex: 0 0 auto; min-height: 40px; background: var(--bg3); color: var(--fg); border: 1px solid var(--line); }
.ch-abas button[aria-selected="true"] { background: var(--teal-dark); color: var(--btn-fg); border-color: var(--teal-dark); }
.ch-abas button[aria-selected="true"] .muted { color: inherit; }

.ch-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ch-cartao { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius);
  background: var(--bg2); border: 1px solid var(--line); border-left: 5px solid var(--ch-livre);
  color: var(--fg); text-decoration: none; min-width: 0; }
.ch-cartao:hover { box-shadow: var(--sombra-card); }
.ch-num { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800; font-size: 22px; line-height: 1.1; }
.ch-num-g { font-size: 34px; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--ch-livre-s); color: var(--ch-livre); }
.ch-sit { font-size: 13px; font-weight: 600; color: var(--ch-livre); }
.ch-im, .ch-prox { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.ch-obs { font-size: 12.5px; color: var(--fg); overflow-wrap: anywhere; }
.ch-prox::before { content: "⏱ "; }

.ch-sit-emprestada { border-left-color: var(--ch-fora); }
.ch-sit-emprestada .ch-sit { color: var(--ch-fora); }
.ch-sit-emprestada .ch-num-g { background: var(--ch-fora-s); color: var(--ch-fora); }
.ch-sit-manutencao, .ch-sit-com_proprietario { border-left-color: var(--ch-parada); }
.ch-sit-manutencao .ch-sit, .ch-sit-com_proprietario .ch-sit { color: var(--ch-parada); }
.ch-sit-manutencao .ch-num-g, .ch-sit-com_proprietario .ch-num-g { background: var(--ch-parada-s); color: var(--ch-parada); }
.ch-sit-extraviada { border-left-color: var(--ch-perdida); }
.ch-sit-extraviada .ch-sit { color: var(--ch-perdida); }
.ch-sit-extraviada .ch-num-g { background: var(--ch-perdida-s); color: var(--ch-perdida); }

.ch-selo { display: inline-block; align-self: flex-start; padding: 1px 8px; border-radius: 999px; font-size: 11.5px;
  font-weight: 700; background: var(--ch-parada-s); color: var(--ch-parada); }
.ch-selo-conflito { background: var(--ch-perdida-s); color: var(--ch-perdida); }

.ch-dia { margin: 14px 0 6px; font-size: 13px; text-transform: capitalize; color: var(--muted); }
.ch-agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ch-res { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--bg3); font-size: 13.5px; }
.ch-res-conflito { background: var(--ch-perdida-s); }
.ch-res-hora { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.ch-res-corpo { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.ch-res-cod { font-weight: 800; margin-right: 4px; }
.ch-cancelar { flex: 0 0 auto; min-height: 36px; }

.ch-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ch-acoes button { flex: 1 1 auto; }
.ch-linha { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
.ch-form textarea { width: 100%; box-sizing: border-box; }
/* app.css só estiliza text/tel/select/textarea: os campos de número, dia, hora e busca do quadro seguem o mesmo desenho */
.ch input[type=number], .ch input[type=date], .ch input[type=time], .ch input[type=search], .ch input:not([type]) {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; background: var(--bg3);
  border: 1px solid var(--line); border-radius: 8px; color: var(--fg); font-size: 16px; font-family: inherit; }
.ch-check { display: flex; align-items: center; gap: 8px; color: var(--fg); }
.ch-check input { width: auto; }
.ch-texto label { margin-top: 0; }
.ch-texto-linha { display: flex; gap: 8px; align-items: stretch; }
.ch-texto-linha textarea { flex: 1 1 auto; min-width: 0; }
.ch-mic { flex: 0 0 auto; min-width: 48px; font-size: 20px; }
.ch-mic-on { background: var(--ch-perdida-s); color: var(--ch-perdida); border-color: var(--ch-perdida); }
.ch-proposta { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--ch-livre-s); }
.ch-proposta p { margin: 0; }
.ag-faixa { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.ch-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }

@media (min-width: 640px) {
  .ch-linha { grid-template-columns: repeat(3, 1fr); }
}