/* ===========================================================================
   MÓDULO CONSULTORIA — Consultoria — ordens de serviço e atividades
   ---------------------------------------------------------------------------
   Este arquivo veio do `public/styles.css` na CS2 do `CSS_POR_MODULO_LOOP.md`
   (item 35): são as regras que só esta tela usa. O que é de TODOS (a casca, os
   primitivos, o BI) continua em `styles.css`/sdk-ui, e o mapa de donos é
   `scripts/lib/modulos-do-front.js`. Carregado no `index.html` logo DEPOIS de
   `styles.css` — a ordem é o que preserva a cascata de antes da mudança.
   Regra nova de tela daqui nasce AQUI, não no `styles.css`.
   =========================================================================== */

/* ── AT4 — a tela Lançar atividades (docs/specs/ORDENS_SERVICO_ATIVIDADES.md) ──────────────
   As linhas são as MESMAS `.os-linha` do apontamento de horas (o editor é o mesmo componente);
   aqui só entram as cores da CONFERÊNCIA (o que o servidor devolveu) e a lista "Minhas
   atividades". Nenhuma regra de tela decide cruzamento — as classes vêm do painel. */
.os-linha--mesmo-cliente { border-color: color-mix(in oklch, var(--error-strong) 45%, transparent); background: var(--error-bg-soft); }

.os-linha--outro-cliente { border-color: color-mix(in oklch, var(--warning) 45%, transparent); background: var(--warning-bg-soft); }

.atv-cabecalho-acoes { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

.atv-acoes-form { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }

.atv-titulo-lista { margin: 1.5rem 0 0.4rem; font-size: 0.95rem; }

.atv-acoes { white-space: nowrap; }

.atv-cadeado { color: var(--muted-foreground); }

.sobreposicao-lista { margin: 0.5rem 0 0 1.1rem; display: grid; gap: 0.35rem; }

.atv-horario { white-space: nowrap; }

.atv-tipo { width: 1%; text-align: center; white-space: nowrap; }

.atv-tabela th:last-child, .atv-tabela .atv-acoes { width: 1%; }

/* ─── AF4 (fusão "Agrupar" → "Lançar atividades", mockup de 27/10/2026) ─────────────────────────
   A coluna de caixas, a barra de ação do pé, o selo "Na OS-…" e a faixa verde do sucesso. */
.atv-marcar { width: 2rem; text-align: center; }
.atv-marcar input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--primary); margin: 0; }
.atv-tabela tr.atv-marcada td { background: color-mix(in oklch, var(--primary) 5%, transparent); }
.atv-tabela tr.atv-travada td { color: var(--muted-foreground); }
.atv-a-conferir { margin-top: 0.25rem; }
.atv-acoes-ordenadas { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; }
.atv-situacao-os { background: var(--success-bg-soft); color: var(--success-strong); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
/* AF5: a nota "as horas já foram fotografadas e ficam travadas" do bloco "Horários da ordem". */
.os-horas-travadas { display: flex; align-items: center; gap: 0.35rem; margin: 0.15rem 0 0.6rem; font-size: 0.83rem; }
.atv-faixa-ok { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
/* 🔴 A armadilha do `[hidden]` (portão `hidden-vence-display.test.js`): quem fixa `display` precisa
   do override — sem ele a faixa "escondida" segue à vista. */
.atv-faixa-ok[hidden] { display: none; }
.atv-barra-marcadas { position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); padding: 0.6rem 0.9rem; margin-top: 0.8rem; box-shadow: 0 -2px 8px rgb(0 0 0 / 0.06); }
.atv-barra-marcadas--ativa { border-color: var(--primary); }
.atv-barra-texto { font-size: 0.84rem; }
.atv-barra-acoes { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 720px) {
  .atv-barra-marcadas { flex-direction: column; align-items: stretch; }
  .atv-barra-acoes { justify-content: flex-end; }
}

.ag-tabela .atv-horario, .ag-tabela .atv-tipo { white-space: nowrap; }

/* 🔴 Item de grade nasce com `min-width: auto` (o mínimo do CONTEÚDO): sem `minmax(0, 1fr)` e `min-width: 0`
   o cartão cresce até a largura da tabela (980 px) e a tabela passa POR CIMA do cartão ao lado, em vez de
   rolar dentro do `.os-rolagem`. Duas colunas só quando a coluna de conteúdo comporta (o menu lateral
   tira 256 px da janela: 68rem + 16rem = 84rem). */
.ag-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }

/* "O que fazer com elas" não é mais a 2ª coluna: é a janela `#ag-modal-fundo`, aberta sobre a lista. */
.ag-modal { max-width: 640px; }

.ag-card { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.9rem; background: var(--background); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; align-content: start; }

.ag-card h3 { margin: 0; font-size: 0.95rem; display: flex; align-items: center; gap: 0.45rem; }

.ag-passo { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 9999px; background: var(--secondary); color: var(--secondary-foreground); font-size: 0.75rem; }

.ag-filtros { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; }

.ag-filtros > div { min-width: 0; flex: 1 1 8rem; }

.ag-tabela { min-width: 980px; }

.ag-marcar { width: 2rem; }

.ag-dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }

.ag-resumo { margin: 0; color: var(--muted-foreground); font-size: 0.85rem; }

.ag-ok { color: var(--success-strong, var(--foreground)); font-size: 0.9rem; }

.ag-ok:empty { display: none; }

/* A frase do sucesso e o "Abrir a ordem" na mesma linha (quebra no celular). Sem frase não há linha:
   o `display` do contêiner vence o `[hidden]`, então ele some pelo `:has`, não pelo atributo. */
.ag-resultado { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }

.ag-resultado:not(:has(.ag-ok:not(:empty))) { display: none; }

/* O controle segmentado (`.seg`, botões com `aria-pressed`) das telas de atividades — não tinha estilo e
   aparecia como botão cru. */
.seg { display: inline-flex; justify-self: start; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--muted); border-radius: var(--radius-md); }

.seg button { border: 0; background: none; color: var(--muted-foreground); padding: 5px 12px; border-radius: calc(var(--radius-md) - 2px); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }

.seg button[aria-pressed="true"] { background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px color-mix(in oklch, var(--foreground) 14%, transparent); }

.seg button:focus-visible { outline: 3px solid color-mix(in oklch, var(--ring) 50%, transparent); outline-offset: 1px; }

/* Os blocos do formulário de agrupar: respiro entre rótulo, campo e ajuda. `display` declarado aqui,
   então cada um leva o seu `[hidden]` (regra de autor vence o atributo do navegador). */
.ag-card form, .ag-modal form, [data-ag-bloco-nova], [data-ag-bloco-existente] { display: grid; gap: 0.6rem; }

[data-ag-bloco-nova][hidden], [data-ag-bloco-existente][hidden], .ag-dupla[hidden] { display: none; }

.os-origem { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }

.os-horas { min-width: 7.5rem; }

.os-trilho { height: 6px; border-radius: 999px; background: var(--muted); border: 1px solid var(--border); overflow: hidden; margin-top: 0.25rem; }

.os-trilho > i { display: block; height: 100%; background: var(--primary); }

/* Situações — mesmas cores do Help-Desk. Vazado (faturada/cancelada) em vez de cinza fraco:
   --muted-foreground sobre --muted reprova AA (DESIGN.md). */
.os-sit { border: 1px solid transparent; white-space: nowrap; }

/* Tela 3 — detalhe. */
.os-passos { display: flex; flex-wrap: wrap; }

.os-passo-n { font-variant-numeric: tabular-nums; font-weight: 600; }

/* AJ6 (mockup `ordens-servico-detalhe-compacto-mockup.html`): o resumo vira uma FAIXA de 4
   colunas ACIMA da tabela — a barra lateral fixa de 320 px saiu. 2 colunas ≤1000px, 1 ≤560px. */
.os-faixa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }

@media (max-width: 1000px) { .os-faixa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 560px) { .os-faixa { grid-template-columns: minmax(0, 1fr); } }

.os-card h4 { margin: 0 0 0.6rem; font-size: 0.875rem; font-weight: 600; }

.os-escopo { display: flex; gap: 0.6rem; align-items: baseline; margin: 0 0 0.75rem; }

.os-escopo b { font-size: 0.8rem; flex: none; }

.os-escopo-texto { white-space: pre-wrap; min-width: 0; }

.os-par { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px dashed var(--border); font-size: 0.85rem; }

.os-par:last-of-type { border-bottom: 0; }

.os-par span:last-child { font-variant-numeric: tabular-nums; text-align: right; }

.os-par--total { border-bottom: 0; border-top: 1px solid var(--border); font-weight: 600; }

.os-sub { display: flex; align-items: center; gap: 0.35rem; margin: 1.1rem 0 0; font-size: 0.875rem; font-weight: 600; }

.os-margem-topo { margin-top: 0.7rem; }

/* AJ6: cada linha da tabela com no máximo 3 linhas de altura — o Tipo e o "O que foi feito"
   cortam em 2; o texto inteiro sai no `title` e no `aria-label` (e a célula é focável). */
.os-tipo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 11rem; }

.os-dica { display: block; max-width: 24rem; border-radius: var(--radius-sm); }

.os-dica:focus-visible { outline: 3px solid color-mix(in oklch, var(--ring) 50%, transparent); outline-offset: 1px; }

.os-corte { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.os-clipe { text-align: center; width: 2.2rem; }

.os-previa { padding: 0.5rem 0.7rem; background: var(--muted); border-radius: var(--radius-md); font-size: 0.85rem; color: var(--foreground); }

.os-previa:empty { display: none; }

.os-grade--transporte { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Sim/Não/Fora do previsto da tabela de apontamentos — as cores das situações do Help-Desk. */
.os-b--sim { background: var(--success-bg-soft); color: var(--success-strong); }

.os-historico { list-style: none; margin: 0; padding: 0; font-size: 0.8rem; }

.os-historico li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px dashed var(--border); }

.os-historico li:last-child { border-bottom: 0; }

/* ── OL4 — editor de vários horários, seções da nova ordem, chips e anexos
      (mockup `ordens-servico-lancamentos-mockup.html`; o `.os-apontar` de uma faixa só saiu). ──── */
.os-secao { border-top: 1px solid var(--border); padding-top: 0.9rem; margin-top: 1rem; }

.os-linhas { display: flex; flex-direction: column; gap: 0.75rem; }

.os-linha { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.85rem; background: var(--background); min-width: 0; }

.os-linha[data-erro="true"] { border-color: color-mix(in oklch, var(--error-strong) 35%, transparent); background: var(--error-bg-soft); }

.os-linha-cab { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; flex-wrap: wrap; }

.os-linha-cab b { font-size: 0.85rem; }

.os-noite { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--info-strong); }

.os-btn-icone { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid transparent; border-radius: var(--radius-md); background: none; color: var(--foreground); cursor: pointer; flex: none; }

.os-btn-icone:hover { background: var(--accent); }

.os-btn-icone[hidden] { display: none; }

.os-horario + .os-horario { margin-top: 0.4rem; }

.os-horario-fim { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }

.os-horario-dur { flex: 1; font-size: 0.8rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }

.os-horarios-adicionar { margin-top: 0.45rem; }

/* A grade "Minhas atividades"/"Agrupar": um horário por linha dentro da célula, cada um sem quebrar. */
.atv-horarios { display: flex; flex-direction: column; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── §13 — o VALOR da hora na linha da atividade (mockup ordens-servico-atividades-valor-hora-mockup.html):
   o campo com R$ e /h, a origem, o motivo (com contador) e o aviso ao vivo. ── */
.atv-valor-grade { display: grid; grid-template-columns: minmax(9rem, 0.9fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 0.6rem 0.7rem; align-items: start; }

@media (max-width: 860px) { .atv-valor-grade { grid-template-columns: minmax(0, 1fr); } }

.atv-valor-estado { margin-top: 0.5rem; padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--muted); font-size: 0.8rem; }

.atv-valor-celula { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }

/* Item 31/D2–D4 (LA6): o alerta do valor da hora — o `warning-circle` em vermelho ANTES do valor,
   focável, com o texto no `title`/`aria-label` e a dica de CSS no :hover e no :focus (tocar foca).
   Nada embaixo do valor. */
.atv-valor-alerta { position: relative; display: inline-flex; align-items: center; color: var(--error-strong); vertical-align: -0.2em; margin-right: 0.3rem; cursor: help; }

.atv-valor-alerta:focus-visible { outline: 3px solid color-mix(in oklch, var(--ring) 50%, transparent); outline-offset: 2px; border-radius: 3px; }

.atv-valor-alerta::after {
  content: attr(data-dica); position: absolute; left: 0; top: calc(100% + 0.35rem); z-index: 5; display: none;
  width: max-content; max-width: 16rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--popover); color: var(--popover-foreground);
  font-size: 0.75rem; font-weight: 400; line-height: 1.35; white-space: normal;
}

.atv-valor-alerta:hover::after, .atv-valor-alerta:focus::after { display: block; }

/* ── §13/V7 (VH5) — a conferência do valor no Agrupar e no detalhe da ordem (mockup, Telas 2 e 3):
   o segmento "A conferir", o cartão de decisão (Referência/Lançado/Diferença), a faixa e a coluna. ── */
.ag-filtro-conferir { margin: 0.2rem 0 0; }

.ag-aviso-conferir { margin: 0.4rem 0; }

.ag-conf { display: grid; gap: 0.6rem; border-top: 1px solid var(--border); margin-top: 0.6rem; padding-top: 0.8rem; }

/* 🔴 A regra de autor de um `display` vence o `[hidden]` do navegador (CLAUDE.md): sem o override,
   o bloco da conferência ficaria VISÍVEL para o consultor mesmo com o atributo. */
.ag-conf[hidden] { display: none; }

.ag-conf-cab-bloco { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }

.ag-conf-cab-bloco h4 { margin: 0; font-size: 0.95rem; display: flex; align-items: center; gap: 0.45rem; }

.ag-conf-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.7rem 0.8rem; display: grid; gap: 0.55rem; background: var(--muted); }

.ag-conf-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }

.ag-conf-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }

@media (max-width: 860px) { .ag-conf-numeros { grid-template-columns: minmax(0, 1fr); } }

.ag-conf-numeros > div { display: flex; flex-direction: column; gap: 0.1rem; }

.ag-conf-motivo { margin: 0; }

.ag-conf-opcoes { display: flex; flex-direction: column; gap: 0.35rem; }

.ag-conf-estado { font-size: 0.8rem; }

.ag-conf-etiqueta, .os-conf { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 500; white-space: nowrap; }

/* Item 19 (OS6/D4): o badge "confirmou em DD/MM" da conferência do administrador (mockup §4). */
.ag-conf-badge--ok { background: var(--success-bg-soft); color: var(--success-strong); }

/* Item 19 (OS6): os dois botões do aviso do consultor e a tabela "Corrigir" (mockup §1/§2). */
.ag-aviso-acoes { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }

.ag-corr-tabela td { vertical-align: top; }

.ag-corr-tabela .os-check { display: flex; align-items: center; gap: 0.35rem; margin: 0.15rem 0; }

.ag-corr-desc { max-width: 16rem; overflow-wrap: anywhere; }

.ag-corr-acoes { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }

.os-conf-faixa { margin: 0 0 0.8rem; }

.os-conf-celula { min-width: 9rem; }

.ag-dica { margin-right: auto; }

.atv-conferencia-celula { white-space: nowrap; }

.ag-tabela .celula-sub { color: var(--muted-foreground); font-size: 0.78rem; }

.os-linha-rodape { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem; }

.os-linha-erro { color: var(--error-strong); font-size: 0.78rem; margin: 0.4rem 0 0; }

.os-linha-erro[hidden] { display: none; }

.os-linha-aviso { margin: 0.5rem 0 0; font-size: 0.8rem; padding: 0.5rem 0.7rem; }

.os-linha-aviso[hidden] { display: none; }

.os-linhas-acao { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* AJ6/Q1 — a correção NA PRÓPRIA LINHA (mockup, Tela 2): o editor mora dentro do `<tr>`, azul
   clarinho, com Salvar/Cancelar na primeira linha da grade e a caixa de texto na largura toda. */
.os-editando > td { background: var(--info-bg-soft); border-bottom: 1px solid color-mix(in oklch, var(--info-strong) 25%, transparent); padding: 0.7rem 0.75rem; }

.os-editando .os-linha { border: 0; padding: 0; background: none; }

.os-editando .os-linha-cab { display: none; }

.os-editando .os-linha-grade { grid-template-columns: 9rem repeat(3, 5.5rem) minmax(11rem, 1fr) auto; }

.os-editando textarea { field-sizing: content; min-height: 3.2rem; width: 100%; overflow: hidden; resize: none; }

.os-editando .os-duracao { margin-left: auto; }

@media (max-width: 860px) {
  .os-editando .os-linha-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os-editando .os-edit-acoes { grid-column: 1 / -1; flex-direction: row; }
}

.os-total-linhas { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; padding: 0.6rem 0.8rem; background: var(--muted); border-radius: var(--radius-md); font-variant-numeric: tabular-nums; margin-top: 0.75rem; font-size: 0.85rem; }

.os-apontar-linhas { margin-top: 0.75rem; }

.os-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.os-chip { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.1rem 0.2rem 0.1rem 0.5rem; font-size: 0.75rem; background: var(--muted); max-width: 100%; }

.os-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.os-chip-tirar { border: 0; background: none; cursor: pointer; padding: 0.15rem; display: inline-flex; color: var(--muted-foreground); }

.os-chip-tirar:hover { color: var(--foreground); }

.os-soltar { border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: 1rem; text-align: center; color: var(--muted-foreground); font-size: 0.83rem; background: var(--sidebar); cursor: pointer; width: 100%; font: inherit; display: block; }

.os-soltar b { color: var(--foreground); }

.os-soltar:focus-visible, .os-chip-tirar:focus-visible, .os-btn-icone:focus-visible { outline: 3px solid color-mix(in oklch, var(--ring) 50%, transparent); outline-offset: 1px; }

.os-anexos { list-style: none; margin: 0; padding: 0; }

.os-anexos li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.2rem 0.6rem; padding: 0.55rem 0; border-bottom: 1px dashed var(--border); align-items: center; }

.os-anexos li:last-child { border-bottom: 0; }

.os-anexo-nome { font-weight: 500; overflow-wrap: anywhere; text-align: left; justify-self: start; }

.os-anexo-meta { grid-column: 1 / -1; }

/* A coluna "Anexos" da grade (M0-B, tela 2): o clipe com a quantidade. */
.atv-clipe { display: inline-flex; align-items: center; gap: 0.25rem; font-variant-numeric: tabular-nums; }

.os-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }

.os-seg label { position: relative; }

.os-seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }

.os-seg span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0 0.8rem; height: 2.1rem; font-size: 0.83rem; font-weight: 500; border-right: 1px solid var(--border); }

.os-seg label:last-child span { border-right: 0; }

.os-seg input:checked + span { background: var(--primary); color: var(--primary-foreground); }

.os-seg input:focus-visible + span { outline: 3px solid color-mix(in oklch, var(--ring) 50%, transparent); outline-offset: -3px; }

.os-busca-cliente { margin-bottom: 0.4rem; }

.os-total { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.6rem 0.8rem; background: var(--muted); border-radius: var(--radius-md); font-variant-numeric: tabular-nums; }

.os-total b { font-size: 1.05rem; }

.os-sem-margem { margin: 0; }

.os-pilha { display: flex; flex-direction: column; gap: 0.9rem; }

.os-check { display: flex; gap: 0.5rem; align-items: flex-start; cursor: pointer; }

.os-check input { margin-top: 0.2rem; }

.os-cab-fila { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

.os-cab-fila h3 { margin: 0; font-size: 1.1rem; }

/* ═══ AJ7/D24 — Gestão dos tipos de atendimento (tela 4 do mockup aprovado) ═══
   O grupo de ações à direita da barra vive num `<span>`: o `os-empurra` (margin-left:auto)
   fica nele, e não no botão, porque o botão "Tipos de atendimento" só existe para admin —
   escondê-lo não pode arrastar "A faturar"/"Nova ordem" para a esquerda. */
.os-barra-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* O modal: o formulário de novo tipo, a lista e o interruptor ativo/inativo.
   🔴 O trilho é PINTURA; o estado é do checkbox (`change` no checkbox, nunca `click` no
   trilho — CLAUDE.md; com o listener no trilho os dois gestos se cancelam e a tela passa a
   mostrar um estado salvando o oposto). */
.os-tp-novo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto auto; gap: 0.5rem; align-items: end; }

.os-tp-novo-campo { min-width: 0; }

.os-tp-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); }

.os-tp { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; gap: 0.6rem; align-items: center; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }

/* Item 20 (OS5): a caixa "Desenvolvimento" da linha — a marca que manda a atividade usar a hora
   de desenvolvimento do cliente (D-OS4). O mockup a desenha como caixa nativa com o rótulo. */
.os-tp-dev { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--muted-foreground); cursor: pointer; white-space: nowrap; }

.os-tp:last-child { border-bottom: 0; }

/* PC4 (4a): a conta financeira do tipo — a célula com o aviso "Sem conta financeira" e o botão
   que a define/troca. Fica ao lado do nome, antes do interruptor. */
.os-tp-conta { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }

.os-tp-conta-texto { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.78rem; overflow-wrap: anywhere; }

.os-tp-nome { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.os-tp-texto { overflow-wrap: anywhere; }

.os-tp-uso { font-size: 0.75rem; color: var(--muted-foreground); }

.os-tp--inativo .os-tp-texto { color: var(--muted-foreground); text-decoration: line-through; }

.os-tp-switch { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }

.os-tp-checkbox { position: absolute; width: 0; height: 0; opacity: 0; }

.os-tp-thumb { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--muted-foreground); top: 3px; left: 3px; transition: transform 0.2s, background 0.2s; }

.os-tp-track--on .os-tp-thumb { transform: translateX(18px); background: var(--primary); }

.os-tp-btn-icone { flex-shrink: 0; }

.os-tp--editando { background: var(--info-bg-soft); grid-template-columns: minmax(0, 1fr) auto; }

.os-tp-campo { min-width: 0; }

.os-tp-edit-acoes { display: flex; gap: 0.3rem; flex-shrink: 0; }

@media (max-width: 560px) {
  .os-tp-novo { grid-template-columns: minmax(0, 1fr); }
  .os-tp { grid-template-columns: minmax(0, 1fr) auto; }
  .os-tp--editando { grid-template-columns: minmax(0, 1fr); }
}

/* O seletor do centro na linha do apontamento é ESTREITO de propósito: a coluna que ele abre tira
   largura do Horário, do Tipo e do "O que foi feito", e com a fonte larga do CI (Linux) a linha
   passava das 3 linhas do AJ6. O texto escolhido corta; a lista aberta mostra o nome inteiro. */
.os-select-centro { width: 8.5rem; min-width: 0; font-size: 0.85rem; }

/* O bloco de um consultor: o cabeçalho com o nome e a matriz de cartões (a função única
   `htmlDoCartao` com a variante `matriz`, do `.zr-kpi`). */
.atv-indicadores { display: grid; gap: 1rem; margin-top: 0.4rem; }

.atv-ind-bloco { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); padding: 0.85rem 1rem 1rem; min-width: 0; }

.atv-ind-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.6rem; }

.atv-ind-cab h4 { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 0.98rem; }

.atv-ind-vazio { color: var(--muted-foreground); margin: 0; }

.atv-ind-sem-bloco:empty { display: none; }

.atv-ind-sem-bloco { margin: 0.5rem 0 0; font-size: 0.8rem; }

/* A matriz: a primeira coluna é o PERÍODO, as outras são as células-cartão. `display: contents`
   deixa as linhas (role=row) caírem na grade do contêiner. */
.atv-ind-matriz { display: grid; gap: 0.5rem; align-items: stretch; }

.atv-ind-linha { display: contents; }

.atv-ind-periodo { display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; padding: 0.2rem 0.1rem; min-width: 0; }

.atv-ind-periodo b { font-size: 0.9rem; }

.atv-ind-periodo span { font-size: 0.76rem; color: var(--muted-foreground); }

/* O gráfico dos 30 dias: barra por dia útil, a linha da jornada e a barra vermelha do dia vazio. */
.atv-grafico { margin-top: 0.9rem; }

/* LA2 (item 25): o rótulo da jornada em 100% sobe 1,05rem acima da linha — o cabeçalho reserva
   esse espaço para a frase (título e contagem) nunca ser coberta. */
.atv-g-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.35rem; }

.atv-g-sem-dias { color: var(--muted-foreground); margin: 0; }

.atv-g-trilho { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 9rem; }

.atv-g-dia:focus-visible { outline: 3px solid color-mix(in oklch, var(--ring) 50%, transparent); outline-offset: 2px; border-radius: var(--radius-sm); }

.atv-g-barra { display: flex; flex-direction: column; justify-content: flex-end; height: var(--h, 0%); min-height: 2px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; overflow: hidden; }

.atv-g-f { background: var(--primary); min-height: 1px; }

.atv-g-s { background: var(--muted-foreground); opacity: 0.55; min-height: 1px; }

.atv-g-barra--vazia { background: color-mix(in oklch, var(--error-strong) 70%, transparent); height: 100%; min-height: 100%; }

.atv-g-rot { position: absolute; left: 0; right: 0; bottom: 0; font-size: 0.68rem; color: var(--muted-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }

.atv-g-rot--vazio { color: var(--error-strong); }

.atv-g-jornada span { position: absolute; right: 0; top: -1.05rem; font-size: 0.68rem; color: var(--muted-foreground); background: var(--card); padding: 0 0.2rem; }

.atv-g-datas { display: flex; gap: 2px; margin-top: 0.15rem; }

.atv-g-datas > span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 0.62rem; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; }

.atv-g-d-curto { display: none; }

@media (max-width: 640px) {
  .atv-g-d-longo { display: none; }
  .atv-g-d-curto { display: inline; }
}

/* O detalhe do dia clicado (D14): as ordens, as soltas por cliente e as ações. */
.atv-g-detalhe { margin-top: 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.7rem 0.85rem; background: var(--sidebar); }

.atv-g-detalhe[hidden] { display: none; }

.atv-g-det-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }

.atv-g-det-cab h5 { margin: 0 0 0.1rem; font-size: 0.9rem; }

.atv-g-ordens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }

.atv-g-ordem { min-width: 0; }

.atv-g-ordem-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; flex-wrap: wrap; min-width: 0; }

.atv-g-ordem-nome { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }

.atv-g-ordem-nome > span:last-child { overflow-wrap: anywhere; }

.atv-c-hor { white-space: nowrap; font-variant-numeric: tabular-nums; }

.atv-c-horas { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.atv-flag { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 3px; border: 1.5px solid var(--muted-foreground); vertical-align: -0.2em; }

.atv-g-sem { color: var(--muted-foreground); }

.atv-quad { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; margin-right: 0.3rem; }

.atv-quad--f { background: var(--primary); }

.atv-quad--s { background: color-mix(in oklch, var(--muted-foreground) 55%, transparent); }

.atv-quad--v { background: color-mix(in oklch, var(--error-strong) 70%, transparent); }

.atv-quad--j { border-top: 2px dashed var(--muted-foreground); height: 0; border-radius: 0; }

.atv-resumo-filtro { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.9rem; font-size: 0.82rem; }

.atv-legenda-cores { display: flex; gap: 0.9rem; flex-wrap: wrap; color: var(--muted-foreground); font-size: 0.76rem; }

/* A faixa de filtros (moldura do Modo IA + o miolo nosso). O `[hidden]` do Consultor e do painel
   "Mais filtros" precisa do override: os dois declaram display como regra de autor. */
.atv-filtros { border-radius: var(--radius-lg); padding: 0.85rem 1rem; margin: 0.4rem 0 0.6rem; display: grid; gap: 0.7rem; }

.atv-filtros-linha { display: flex; flex-wrap: wrap; gap: 0.7rem 0.9rem; align-items: flex-end; }

.atv-f { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 10rem; min-width: 0; }

.atv-f[hidden] { display: none; }

.atv-f-par { flex: 1 1 15rem; }

.atv-f-multi { border: 0; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; flex: 0 0 auto; }

.atv-f-multi legend { padding: 0; }

/* 🔴 O `.zr-checkbox` do design system é a CAIXA (width/height 1rem, accent-color): ele vai no
   INPUT, nunca no rótulo — com a classe no `<label>`, o rótulo herdava 1rem de largura e o texto
   vazava por cima do vizinho (o print do Eder). Item 30/D2, LA7. */
.atv-f-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; white-space: nowrap; }

/* D3 — celular: os campos ocupam a linha inteira e a pilha vira largura total, no fim da faixa. */
@media (max-width: 640px) {
  .atv-filtros-linha > .atv-f { flex-basis: 100%; }
  .atv-f-botoes { width: 100%; margin-left: 0; }
}

.atv-filtros-mais { display: flex; flex-wrap: wrap; gap: 0.7rem 0.9rem; align-items: flex-end; border-top: 1px solid var(--border); padding-top: 0.7rem; }

.atv-filtros-mais[hidden] { display: none; }

.atv-f-tipos { flex: 1 1 100%; align-items: flex-start; flex-direction: column; gap: 0.35rem; }

.atv-link { border: 0; background: none; padding: 0; font: inherit; font-size: 0.8rem; color: var(--primary); cursor: pointer; text-decoration: underline; }

.atv-os-link { cursor: pointer; }

/* ═══ Gestão › Feriados (telas 4 e 5) ═══ */
.atv-fer-cab { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; margin: 0.2rem 0 0.8rem; }

.atv-fer-cab + .zr-kpi-grade { margin-bottom: 1rem; }

.atv-fer-lista { container-type: inline-size; margin-top: 0.6rem; }

.atv-fer-opcoes { display: flex; flex-direction: column; gap: 0.35rem; border: 0; margin: 0.7rem 0 0.4rem; padding: 0; }

.atv-fer-opcoes legend { padding: 0; margin-bottom: 0.3rem; }

/* ── VM4 (item 84/D9 — mockup `voltar-ao-mergulho-mockup.html` §6): o aviso da marca "Consultor"
   mora NA LINHA, logo abaixo dos campos — o mesmo dos dois lados (com e sem o botão do cadastro).
   Os textos são do mockup, palavra por palavra; o vermelho/amarelo é o do `zr-alert--warning`. ── */
.atv-aviso-consultor {
  display: flex; gap: 0.5rem; align-items: flex-start; flex-wrap: wrap;
  margin: 0.5rem 0 0; padding: 0.5rem 0.7rem;
  border: 1px solid color-mix(in oklch, var(--warning-strong) 25%, transparent);
  border-radius: var(--radius-md); background: var(--warning-bg-soft); color: var(--warning-strong);
  font-size: 0.8rem;
}

.atv-aviso-consultor > .zr-icone { flex: none; margin-top: 0.1rem; }

.atv-aviso-consultor .txt { flex: 1 1 18rem; }