/* Prancheta — componentes (CSS puro, sem build). Requer tokens.css carregado antes.
   Contexto de campo: <body class="pr pr--campo">. Tema: ver README › Tema. */
@font-face { font-family: "Barlow Fallback"; src: local("Roboto"), local("Arial"), local("Helvetica"); size-adjust: 92%; }
.pr, .pr * { box-sizing: border-box; }
.pr { font-family: var(--font-sans); color: var(--tinta); -webkit-font-smoothing: antialiased; }
.pr .num, .pr-num { font-variant-numeric: tabular-nums; }

/* Contexto de campo: bordas e texto secundário mais fortes para leitura ao sol */
.pr--campo { --linha: var(--linha-controle); --tinta-suave: var(--tinta-suave-campo); font-size: 17px; line-height: 24px; }

/* Foco: :focus como base (WebView antigo), :focus-visible refina onde existe */
.pr-btn:focus, .pr-input:focus, .pr-select:focus, .pr-textarea:focus, .pr-celula:focus, .pr-chip:focus, .pr-cartao:focus, .pr-nav__item:focus { outline: 2px solid var(--foco); outline-offset: 2px; }
.pr-btn:focus:not(:focus-visible), .pr-celula:focus:not(:focus-visible), .pr-chip:focus:not(:focus-visible), .pr-cartao:focus:not(:focus-visible), .pr-nav__item:focus:not(:focus-visible) { outline: none; }

/* ---------- Botão ---------- */
.pr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2);
  min-height: var(--alvo-escritorio); padding: 0 var(--espaco-4);
  font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 600;
  border-radius: var(--raio-sm); border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s;
}
.pr-btn--primario { background: var(--acao); color: var(--on-acao); }
.pr-btn--primario:hover { background: var(--acao-hover); }
.pr-btn--campo { background: var(--destaque); color: var(--on-destaque); }
.pr-btn--campo:hover { filter: brightness(1.05); }
.pr-btn--secundario { background: transparent; color: var(--tinta); border-color: var(--linha-controle); }
.pr-btn--secundario:hover { background: var(--superficie-2); }
.pr-btn--texto { background: transparent; color: var(--link); padding: 0 var(--espaco-2); }
.pr-btn--texto:hover { background: var(--superficie-2); }
.pr-btn--perigo { background: transparent; color: var(--critico); border-color: var(--critico); }
.pr-btn--perigo:hover { background: var(--critico-fundo); }
.pr-btn--grande { min-height: var(--alvo-campo); padding: 0 var(--espaco-5); font-size: 17px; }
.pr-btn--bloco { display: flex; width: 100%; }
.pr-btn--tabela { min-height: var(--alvo-tabela); padding: 0 var(--espaco-3); font-size: 13px; }
/* Desabilitado e carregando: sem opacity (perdia contraste); fundo neutro e texto legível */
.pr-btn[disabled], .pr-btn[aria-busy="true"] { background: var(--superficie-2); color: var(--tinta-suave); border-color: var(--linha-controle); cursor: not-allowed; filter: none; }
.pr-btn[aria-busy="true"] { cursor: wait; }
.pr-btn[aria-busy="true"]::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: pr-gira .8s linear infinite; }
@keyframes pr-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pr-btn[aria-busy="true"]::before { animation: none; } }

/* ---------- Status (badge) ---------- */
.pr-status {
  display: inline-flex; align-items: center; gap: var(--espaco-1);
  padding: 2px var(--espaco-2); border-radius: var(--raio-pill);
  font-size: 11px; line-height: 14px; font-weight: 600; white-space: nowrap;
  background: var(--superficie-2); color: var(--tinta-suave);
}
.pr-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pr-status--critico { background: var(--critico-fundo); color: var(--critico); }
.pr-status--critico::before { content: "!"; width: auto; height: auto; background: none; font-weight: 800; }
.pr-status--atencao { background: var(--atencao-fundo); color: var(--atencao); }
.pr-status--ok { background: var(--ok-fundo); color: var(--ok); }
.pr-status--ok::before { content: "✓"; width: auto; height: auto; background: none; }
.pr-status--info { background: var(--info-fundo); color: var(--info); }
.pr-status--marca { background: var(--destaque-fundo); color: var(--destaque-texto); }
.pr-status--campo, .pr--campo .pr-status { font-size: 14px; line-height: 20px; padding: var(--espaco-1) var(--espaco-3); min-height: 28px; }

/* ---------- KPI ---------- */
.pr-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espaco-2); }
@media (min-width: 640px) { .pr-kpis { grid-template-columns: repeat(4, 1fr); gap: var(--espaco-3); } }
.pr-kpi { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: var(--espaco-4); }
.pr-kpi__rotulo { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--tinta-suave); }
.pr-kpi__valor { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: var(--espaco-1); }
@media (min-width: 640px) { .pr-kpi__valor { font-size: 32px; line-height: 36px; } }
.pr-kpi__nota { font-size: 12px; line-height: 16px; color: var(--tinta-suave); margin-top: 2px; }
.pr--campo .pr-kpi__rotulo { font-size: 13px; line-height: 16px; }
.pr--campo .pr-kpi__nota { font-size: 14px; line-height: 20px; }
.pr-kpi--critico .pr-kpi__valor { color: var(--critico); }
.pr-kpi--critico .pr-kpi__rotulo::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--critico); color: var(--on-status); font-size: 11px; letter-spacing: 0; }
.pr-kpi--atencao .pr-kpi__valor { color: var(--atencao); }
.pr-kpi--ok .pr-kpi__valor { color: var(--ok); }

/* ---------- Cabeçalho (faixa de marca) ---------- */
.pr-cabecalho {
  display: flex; align-items: center; gap: var(--espaco-3);
  background: var(--marca-faixa); color: var(--on-marca);
  border-left: 6px solid var(--marca-ambar);
  padding: var(--espaco-2) var(--espaco-4); min-height: var(--alvo-nav);
}
.pr-cabecalho__logo { height: 28px; width: auto; display: block; flex: none; }
.pr-cabecalho__logo--simbolo { display: none; height: 32px; }
@media (max-width: 479px) {
  .pr-cabecalho__logo--completo { display: none; }
  .pr-cabecalho__logo--simbolo { display: block; }
  .pr-cabecalho__acoes { display: none; }
}
.pr-cabecalho__voltar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--alvo-campo); height: var(--alvo-campo); margin-left: calc(-1 * var(--espaco-3)); background: transparent; border: 0; color: var(--on-marca); font-size: 28px; line-height: 1; cursor: pointer; border-radius: var(--raio-sm); }
.pr-cabecalho__obra { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--linha-sobre-marca); padding-left: var(--espaco-3); }
.pr-cabecalho__kicker { font-family: var(--font-display); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--marca-ambar); }
.pr-cabecalho__titulo { font-family: var(--font-display); font-size: 17px; line-height: 22px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-cabecalho__acoes { margin-left: auto; display: flex; gap: var(--espaco-2); align-items: center; font-size: 12px; color: var(--marca-gelo); }
.pr-cabecalho a, .pr-cabecalho button { color: var(--on-marca); }
.pr-cabecalho :focus { outline-color: var(--marca-ambar); }
.pr-titulo { padding: var(--espaco-5) 0 var(--espaco-4); border-bottom: 1px solid var(--linha); margin-bottom: var(--espaco-6); }
.pr-titulo__kicker { font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--destaque-texto); }
.pr-titulo h1 { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; margin: var(--espaco-1) 0 0; }
.pr-titulo__meta { font-size: 12px; line-height: 16px; color: var(--tinta-suave); margin-top: var(--espaco-1); }
.pr--campo .pr-titulo__meta { font-size: 14px; line-height: 20px; }

/* ---------- Seção ---------- */
.pr-secao + .pr-secao { border-top: 1px solid var(--linha); padding-top: var(--espaco-7); margin-top: var(--espaco-8); }
@media (min-width: 640px) { .pr-secao + .pr-secao { padding-top: var(--espaco-8); margin-top: var(--espaco-9); } }
.pr-secao__titulo { font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; margin: 0 0 var(--espaco-3); }

/* ---------- Tabela ---------- */
.pr-tabela-wrap { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-lg); overflow-x: auto; }
.pr-tabela-wrap--rolagem { max-height: 70vh; overflow: auto; }
.pr-tabela { width: 100%; border-collapse: collapse; color: var(--tinta); font-size: 13px; line-height: 18px; }
.pr-tabela th { background: var(--superficie-2); text-align: left; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--tinta-suave); padding: var(--espaco-3); white-space: nowrap; }
.pr-tabela-wrap--rolagem th { position: sticky; top: 0; z-index: 2; }
.pr-tabela td { padding: var(--espaco-3); border-top: 1px solid var(--linha); vertical-align: middle; background: var(--superficie); }
.pr-tabela tbody tr:hover td { background: var(--superficie-2); }
.pr-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.pr-tabela .acao { text-align: right; width: 1%; white-space: nowrap; position: sticky; right: 0; z-index: 1; box-shadow: -1px 0 0 var(--linha); }
.pr-tabela th.acao { z-index: 3; }
.pr-tabela tr[aria-selected="true"] td { background: var(--destaque-fundo); }
.pr-tabela tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--destaque); }
.pr-dias--critico { color: var(--critico); font-weight: 600; }
.pr-dias--critico::before { content: "! "; }
.pr-dias--atencao { color: var(--atencao); font-weight: 600; }

/* ---------- Campo ---------- */
.pr-campo { display: flex; flex-direction: column; gap: 6px; }
.pr-campo__rotulo { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--tinta-suave); }
.pr-campo__ajuda { font-size: 12px; line-height: 16px; color: var(--tinta-suave); }
.pr-campo__erro { font-size: 12px; line-height: 16px; color: var(--critico); font-weight: 600; }
.pr-campo__erro::before { content: "! "; font-weight: 800; }
.pr-input, .pr-select, .pr-textarea {
  font: inherit; font-size: 14px; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--linha-controle); border-radius: var(--raio-sm);
  min-height: var(--alvo-escritorio); padding: 0 var(--espaco-3); width: 100%;
}
.pr-textarea { min-height: 72px; padding: var(--espaco-3); resize: vertical; }
.pr-select { -webkit-appearance: none; appearance: none; padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.pr-input:focus, .pr-select:focus, .pr-textarea:focus { border-color: var(--foco); }
.pr-input[aria-invalid="true"] { border-color: var(--critico); border-width: 2px; }
.pr-campo--campo .pr-input, .pr-campo--campo .pr-select, .pr--campo .pr-input, .pr--campo .pr-select { min-height: var(--alvo-campo); font-size: 17px; }
.pr-campo--campo .pr-campo__rotulo, .pr--campo .pr-campo__rotulo { font-size: 13px; line-height: 16px; }
.pr-campo--campo .pr-campo__ajuda, .pr--campo .pr-campo__ajuda { font-size: 14px; line-height: 20px; }
.pr-campo--campo .pr-campo__erro, .pr--campo .pr-campo__erro { font-size: 15px; line-height: 20px; color: var(--tinta); }
.pr-campo--campo .pr-campo__erro::before, .pr--campo .pr-campo__erro::before { color: var(--critico); }

/* ---------- Opções (escolha única, substitui select em campo) ---------- */
.pr-opcoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); border: 0; padding: 0; margin: 0; }
.pr-opcao { position: relative; }
.pr-opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pr-opcao span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--alvo-campo); min-width: var(--alvo-campo); padding: 0 var(--espaco-4); border: 1px solid var(--linha-controle); border-radius: var(--raio-sm); background: var(--superficie); font-family: var(--font-display); font-size: 17px; font-weight: 600; cursor: pointer; }
.pr-opcao input:checked + span { background: var(--acao); color: var(--on-acao); border-color: var(--acao); }
.pr-opcao input:checked + span::before { content: "✓"; }
.pr-opcao input:focus + span { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ---------- Passo (+/−) ---------- */
.pr-passo { display: grid; grid-template-columns: var(--alvo-campo) 1fr var(--alvo-campo); gap: var(--espaco-2); max-width: 280px; }
.pr-passo .pr-btn { min-height: var(--alvo-campo); padding: 0; font-size: 24px; }
.pr-passo .pr-input { min-height: var(--alvo-campo); text-align: center; font-family: var(--font-display); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Chips de filtro ---------- */
.pr-chips { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }
.pr-chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--alvo-escritorio); padding: 0 var(--espaco-4); border: 1px solid var(--linha-controle); border-radius: var(--raio-pill); background: var(--superficie); color: var(--tinta); font: 600 14px/20px var(--font-sans); cursor: pointer; }
.pr-chip[aria-pressed="true"] { background: var(--acao); color: var(--on-acao); border-color: var(--acao); }
.pr-chip[aria-pressed="true"]::before { content: "✓"; }
.pr-chip__n { font-variant-numeric: tabular-nums; opacity: .8; }
.pr--campo .pr-chip { min-height: 44px; font-size: 15px; }

/* ---------- Progresso ---------- */
.pr-progresso { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--espaco-3); }
.pr-progresso__trilha { height: 8px; border-radius: var(--raio-pill); background: var(--superficie-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--linha); }
.pr-progresso__barra { height: 100%; border-radius: var(--raio-pill); background: var(--acao); }
.pr-progresso__valor { font: 700 15px/20px var(--font-display); font-variant-numeric: tabular-nums; }
.pr-progresso__rotulo { grid-column: 1 / -1; font-size: 12px; line-height: 16px; color: var(--tinta-suave); }

/* ---------- Lista de campo (cartões tocáveis) ---------- */
.pr-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espaco-2); }
.pr-cartao { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--espaco-1) var(--espaco-3); width: 100%; min-height: 64px; padding: var(--espaco-3) var(--espaco-4); background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-lg); color: var(--tinta); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.pr--campo .pr-cartao { border-width: 2px; }
.pr-cartao:active { background: var(--superficie-2); }
.pr-cartao__titulo { font: 700 17px/22px var(--font-display); }
.pr-cartao__meta { grid-column: 1; font-size: 14px; line-height: 20px; color: var(--tinta-suave); }
.pr-cartao__lado { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: var(--espaco-2); }
.pr-cartao__seta { font-size: 24px; line-height: 1; color: var(--tinta-suave); }
.pr-cartao--critico { box-shadow: inset 0 0 0 1px var(--critico); border-color: var(--critico); }

/* ---------- Navegação inferior (campo) ---------- */
.pr-nav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--superficie); border-top: 1px solid var(--linha-controle); padding-bottom: env(safe-area-inset-bottom); }
.pr-nav--fixa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; }
.pr-nav__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--alvo-nav); padding: 6px 4px; background: transparent; border: 0; color: var(--tinta-suave); font: 600 13px/16px var(--font-sans); text-decoration: none; cursor: pointer; }
.pr-nav__item svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pr-nav__item[aria-current="page"] { color: var(--tinta); }
.pr-nav__item[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; border-radius: 0 0 3px 3px; background: var(--destaque); }
.pr-com-nav { padding-bottom: calc(var(--alvo-nav) + env(safe-area-inset-bottom)); }

/* ---------- Avisos e estados (vazio, erro, offline) ---------- */
.pr-aviso { display: flex; align-items: flex-start; gap: var(--espaco-3); padding: var(--espaco-3) var(--espaco-4); border: 1px solid var(--linha-controle); border-radius: var(--raio-md); background: var(--superficie-2); color: var(--tinta); font-size: 14px; line-height: 20px; }
.pr-aviso__marca { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tinta-suave); color: var(--superficie); font-weight: 800; font-size: 14px; }
.pr-aviso__texto { flex: 1; min-width: 0; }
.pr-aviso__texto strong { display: block; }
.pr-aviso .pr-btn { flex: none; }
.pr-aviso--erro { background: var(--critico-fundo); border-color: var(--critico); }
.pr-aviso--erro .pr-aviso__marca { background: var(--critico); color: var(--on-status); }
.pr-aviso--offline { background: var(--atencao-fundo); border-color: var(--atencao); }
.pr-aviso--offline .pr-aviso__marca { background: var(--atencao); color: var(--on-status); }
.pr-aviso--info { background: var(--info-fundo); border-color: var(--info); }
.pr-aviso--info .pr-aviso__marca { background: var(--info); color: var(--on-status); }
.pr--campo .pr-aviso { font-size: 15px; line-height: 22px; }
.pr-vazio { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-2); padding: var(--espaco-8) var(--espaco-4); text-align: center; color: var(--tinta-suave); font-size: 14px; line-height: 20px; }
.pr-vazio strong { font: 700 17px/22px var(--font-display); color: var(--tinta); }

/* ---------- Foto ---------- */
.pr-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--espaco-2); }
.pr-foto { position: relative; aspect-ratio: 1; border-radius: var(--raio-sm); overflow: hidden; background: var(--superficie-2); border: 1px solid var(--linha); }
.pr-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-foto__estado { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-size: 12px; line-height: 16px; font-weight: 600; background: var(--marca-azul); color: var(--on-marca); }
.pr-foto__estado i { display: block; height: 3px; margin-top: 3px; background: var(--marca-ambar); border-radius: var(--raio-pill); }
.pr-foto--erro { border: 2px solid var(--critico); }
.pr-foto--erro .pr-foto__estado { background: var(--critico); color: var(--on-status); }
.pr-foto-add { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px dashed var(--linha-controle); border-radius: var(--raio-sm); background: var(--superficie); color: var(--tinta); font: 600 14px/18px var(--font-display); cursor: pointer; }
.pr-foto-add svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Toast ---------- */
.pr-toast {
  display: inline-flex; align-items: center; gap: var(--espaco-3);
  background: var(--superficie); color: var(--tinta); border: 1px solid var(--linha);
  border-left: 4px solid var(--ok); border-radius: var(--raio-md);
  padding: var(--espaco-3) var(--espaco-4); box-shadow: var(--sombra-toast); font-size: 14px; line-height: 20px;
}
.pr--campo .pr-toast { font-size: 16px; line-height: 22px; }
.pr-toast--erro { border-left-color: var(--critico); }
.pr-toast__marca { font-weight: 700; color: var(--ok); }
.pr-toast--erro .pr-toast__marca { color: var(--critico); }
.pr-toast--fixo { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(20px, env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); z-index: 20; }
/* Acima do botão de campo do rodapé ou da navegação inferior */
.pr-toast--sobre-acao { bottom: calc(var(--alvo-campo) + 2 * var(--espaco-4) + env(safe-area-inset-bottom)); }
.pr-com-nav .pr-toast--fixo { bottom: calc(var(--alvo-nav) + var(--espaco-4) + env(safe-area-inset-bottom)); }

/* ---------- Matriz (serviço × pavimento) ---------- */
.pr-matriz-wrap { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: var(--espaco-3); }
.pr-matriz { display: grid; gap: 3px; font-size: 13px; line-height: 16px; font-variant-numeric: tabular-nums; min-width: max-content; }
.pr-matriz__torre { grid-column: 1 / -1; font: 700 15px/20px var(--font-display); padding: 0 0 var(--espaco-1); position: sticky; left: 0; }
.pr-matriz__cab { font-weight: 600; color: var(--tinta-suave); text-align: center; padding: var(--espaco-1) 0; }
.pr-matriz__servico { position: sticky; left: 0; z-index: 1; background: var(--superficie); font-weight: 600; padding: 0 var(--espaco-2) 0 0; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 3px 0 0 var(--superficie); }
.pr-celula { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--raio-sm); font: 600 13px/16px var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer; background: transparent; color: var(--tinta-suave); }
.pr-celula[data-status="concluido"] { background: var(--ok); color: var(--on-status); }
.pr-celula[data-status="em-dia"] { background: var(--ok-fundo); color: var(--ok); }
.pr-celula[data-status="em-curso"] { background: var(--atencao-fundo); color: var(--atencao); box-shadow: inset 0 0 0 2px var(--atencao); }
.pr-celula[data-status="atrasado"] { background: var(--critico); color: var(--on-status); }
.pr-celula[data-status="atrasado"]::before { content: "!"; font-weight: 800; margin-right: 2px; }
.pr-celula[data-status="vazio"] { color: var(--linha-controle); cursor: default; }
.pr-celula:hover { box-shadow: inset 0 0 0 2px var(--foco); }
.pr-legenda { display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-4); font-size: 13px; color: var(--tinta-suave); margin-top: var(--espaco-3); }
.pr-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.pr-legenda .pr-celula { min-width: 28px; min-height: 22px; font-size: 11px; cursor: default; }

/* ---------- Modal ---------- */
.pr-modal { width: calc(100vw - 32px); max-width: var(--largura-modal); border: 1px solid var(--linha); border-radius: var(--raio-xl); background: var(--superficie); color: var(--tinta); padding: var(--espaco-6); }
.pr-modal::backdrop { background: var(--veu); }
.pr-modal h3 { font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 700; margin: 0 0 var(--espaco-3); }
.pr-modal__citacao { font-weight: 600; font-size: 14px; }
.pr-modal__meta { font-size: 12px; color: var(--tinta-suave); margin-top: 2px; }
.pr-modal hr { border: 0; border-top: 1px solid var(--linha); margin: var(--espaco-4) 0; }
.pr-modal__acoes { display: flex; justify-content: flex-end; gap: var(--espaco-2); margin-top: var(--espaco-5); }
@media (max-width: 419px) { .pr-modal__acoes { flex-direction: column-reverse; } .pr-modal__acoes .pr-btn { width: 100%; } }
/* Painel inferior: detalhe de célula da matriz, ações no celular */
.pr-painel { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; width: 100%; max-width: none; border-radius: var(--raio-xl) var(--raio-xl) 0 0; border: 1px solid var(--linha-controle); border-bottom: 0; padding: var(--espaco-5) var(--espaco-4) calc(var(--espaco-5) + env(safe-area-inset-bottom)); background: var(--superficie); color: var(--tinta); }
.pr-painel::backdrop { background: var(--veu); }

/* ---------- Carregando ---------- */
/* 1) Tela inteira (primeira carga): símbolo com os pavimentos subindo + frase */
.pr-carregando { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--espaco-4); min-height: 240px; padding: var(--espaco-8) var(--espaco-4); text-align: center; color: var(--tinta-suave); font-size: 15px; line-height: 22px; }
.pr-carregando strong { display: block; font: 700 17px/22px var(--font-display); color: var(--tinta); }
.pr-carregando svg { width: 64px; height: 64px; }
.pr-carregando .placa { fill: var(--marca-faixa); }
.pr-carregando .presilha, .pr-carregando .andar-3 { fill: var(--marca-ambar); }
.pr-carregando .andar-1, .pr-carregando .andar-2 { fill: var(--on-marca); }
.pr-carregando .andar-1, .pr-carregando .andar-2, .pr-carregando .andar-3 { transform-box: fill-box; transform-origin: left center; animation: pr-andar 1.8s ease-in-out infinite; }
.pr-carregando .andar-2 { animation-delay: .2s; }
.pr-carregando .andar-3 { animation-delay: .4s; }
@keyframes pr-andar { 0% { transform: scaleX(0); } 30%, 75% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.pr-carregando__demora { display: none; font-size: 14px; }
.pr-carregando[data-demorando] .pr-carregando__demora { display: block; }

/* 2) Esqueleto (recarga de lista, cartões, KPIs, tabela): mantém o layout no lugar */
.pr-esqueleto { display: block; height: 14px; border-radius: var(--raio-sm); background: var(--superficie-2); position: relative; overflow: hidden; }
.pr-esqueleto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--superficie), transparent); transform: translateX(-100%); animation: pr-brilho 1.4s ease-in-out infinite; opacity: .7; }
@keyframes pr-brilho { to { transform: translateX(100%); } }
.pr-esqueleto--titulo { height: 20px; width: 60%; }
.pr-esqueleto--numero { height: 32px; width: 45%; }
.pr-esqueleto--curto { width: 35%; }
.pr-esqueleto--pill { height: 24px; width: 72px; border-radius: var(--raio-pill); }
[aria-busy="true"] > .pr-cartao, .pr-cartao--esqueleto { cursor: default; pointer-events: none; }

/* 3) Barra no topo (ação em segundo plano, troca de filtro): não bloqueia a tela */
.pr-barra-topo { position: relative; height: 3px; overflow: hidden; background: var(--superficie-2); }
.pr-barra-topo--fixa { position: fixed; top: 0; left: 0; right: 0; z-index: 30; }
.pr-barra-topo::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: var(--destaque); animation: pr-correr 1.2s ease-in-out infinite; }
@keyframes pr-correr { from { left: -40%; } to { left: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .pr-carregando .andar-1, .pr-carregando .andar-2, .pr-carregando .andar-3 { animation: none; }
  .pr-esqueleto::after { animation: none; display: none; }
  .pr-barra-topo::after { animation: none; left: 0; width: 100%; opacity: .6; }
}