/* Visão do Campo — ocorrencia: o bloco "Ocorrências" da lateral, o botão que abre
   o formulário (flutuante no desktop, de topo no celular) e o próprio modal.
   Segue os tokens de estilo.css — nada de cor ou fonte nova aqui. */

/* --------------------------------------------------------------- a lista */
.ocorrencia-lista { list-style: none; margin: 0; padding: 0; }
.ocorrencia-item { padding: 10px 0; border-top: 1px solid var(--linha); font-size: 12px; }
.ocorrencia-item:first-child { border-top: 0; }
.ocorrencia-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ocorrencia-tipo { font-weight: 600; font-size: 14px; }
.ocorrencia-quando { font-family: var(--mono); font-size: 12px; color: var(--tinta-2); white-space: nowrap; }
.ocorrencia-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: 12px; color: var(--tinta-2); }
.ocorrencia-situacao.em-curso { color: var(--ambar); font-weight: 600; }
.ocorrencia-onde { font-family: var(--mono); white-space: nowrap; }
.ocorrencia-descricao { margin: 6px 0 0; font-size: 12px; color: var(--tinta-2); }
.ocorrencia-por { margin-top: 4px; font-size: 12px; color: var(--tinta-3); }
.ocorrencia-acoes { display: flex; gap: 16px; margin-top: 4px; }
@media (pointer: coarse), (max-width: 900px) { .link-acao { min-height: 48px; } }
.link-acao { display: inline-flex; align-items: center; min-height: 32px; border: 0; background: none; padding: 0; font: 600 12px var(--ui); color: var(--tinta-2); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-acao:hover { color: var(--tinta); }
.link-acao-perigo { color: var(--fogo); }
.link-acao-perigo:hover { color: var(--fogo); opacity: 0.8; }

.ocorrencia-mini { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--r-s); }
.ocorrencia-mini-campo { display: flex; align-items: center; gap: 8px; font: 500 var(--t-body-m) var(--ui); color: var(--tinta-2); }
.ocorrencia-mini-campo input { min-height: var(--alvo); border: 1px solid #8A938A; border-radius: var(--r-s); padding: 0 12px; font: var(--t-body-m) var(--ui); background: var(--superficie); color: var(--tinta); }
.ocorrencia-mini .erro { margin: 0; }

/* ------------------------------------------------ o botao de ocorrencia
   O BOTAO DE "+ Ocorrencia" VIVE NO CABECALHO DO BLOCO (2026-09-24). Antes era
   flutuante: pilula preta de raio 22px com sombra, `position: sticky` no canto
   inferior direito da lateral — e `sticky`, nao `absolute`, porque quem rola e o
   proprio #sidebar e um filho absoluto ia parar no meio do texto. O conserto
   certo nao era o posicionamento: era nao flutuar. Ver `ocorrencia.js`. */
.ocorrencia-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ocorrencia-cabeca h3 { margin: 0; }
/* na ferramenta o cabeçalho da lateral já é "Ocorrências": o título repetido sai e fica só a ação, à direita (D-11) */
.em-ferramenta .ocorrencia-cabeca { justify-content: flex-end; }
.em-ferramenta .ocorrencia-cabeca h3 { display: none; }
/* a mesma forma dos outros botoes do produto: 4px, sem sombra, sem pilula */
.ocorrencia-add { flex-shrink: 0; }

/* ------------------------------------------------------------- o formulário */
.ocorrencia-fundo .campo:first-child { margin-top: 0; }
.ocorrencia-fundo textarea { width: 100%; border: 1px solid #8A938A; border-radius: var(--r-s); padding: 12px 16px; font: 400 var(--t-title-m)/24px var(--ui); background: var(--superficie); color: var(--tinta); resize: vertical; }   /* o campo do produto (estilo.css .campo) */
.ocorrencia-fundo .seg { margin-top: 2px; }
.ocorrencia-fundo .seg button { flex: 1 1 auto; justify-content: center; }   /* base no texto: no celular "Data completa" cabe numa linha (com base 0 as três ficavam iguais e quebravam) */
.ocorrencia-fundo input[type="date"], .ocorrencia-fundo input[type="month"] { margin-top: 8px; min-height: var(--alvo-toque); border: 1px solid #8A938A; border-radius: var(--r-s); padding: 0 16px; font: 400 var(--t-title-m) var(--ui); background: var(--superficie); color: var(--tinta); }
.ocorrencia-checkbox { display: flex; align-items: center; gap: 8px; font: 500 var(--t-body-m) var(--ui); color: var(--tinta); }
.ocorrencia-campo-terminou input[type="date"] { margin-left: 24px; margin-top: 8px; }
.ocorrencia-onde-op { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--t-body-m); }
.ocorrencia-onde-op:first-of-type { margin-top: 6px; }
.oc-onde > label + .ocorrencia-onde-op { margin-top: 0; }   /* a linha do rádio já tem 48 de alvo: sem somar mais um vão abaixo de "Onde" */
.ocorrencia-onde-op select { min-height: var(--alvo); border: 1px solid #8A938A; border-radius: var(--r-s); padding: 0 12px; font: var(--t-body-m) var(--ui); background: var(--superficie); color: var(--tinta); }
.ocorrencia-coord { font-family: var(--mono); color: var(--tinta-2); }

/* ---------------------------------------------------- caixa de seleção (Material 3)
   18 px desenhados, alvo de `--alvo` (40 no ponteiro fino, 48 no toque) na linha inteira. O traço do "✓" é uma máscara,
   para herdar a cor do texto do botão e não depender de imagem. Escopo no modal: o `.campo input` genérico tem padding e
   altura mínima que amassariam a caixa. */
.ocorrencia-fundo input[type="checkbox"].oc-check { appearance: none; -webkit-appearance: none; flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0;
  border: 2px solid var(--tinta-2); border-radius: 2px; background: transparent; cursor: pointer; display: inline-grid; place-content: center; }
.ocorrencia-fundo input[type="checkbox"].oc-check::after { content: ''; width: 12px; height: 12px; background: #fff; transform: scale(0); transition: transform 0.1s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ocorrencia-fundo input[type="checkbox"].oc-check:checked { background: var(--verde); border-color: var(--verde); }
.ocorrencia-fundo input[type="checkbox"].oc-check:checked::after { transform: scale(1); }
.ocorrencia-fundo input[type="checkbox"].oc-check:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.ocorrencia-checkbox { min-height: var(--alvo); cursor: pointer; }

/* ------------------------------------------------ várias áreas (Monday) */
.oc-onde.desligado { opacity: 0.55; }
.oc-onde.desligado .ocorrencia-onde-op { cursor: default; }
.oc-areas-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.oc-contagem { font: 600 12px var(--ui); color: var(--verde); white-space: nowrap; }
.oc-areas .dica { margin-top: -2px; }
.ocorrencia-fundo .oc-busca { width: 100%; box-sizing: border-box; border: 1px solid var(--linha-forte); border-radius: var(--r-s); padding: 0 12px; height: var(--alvo); font: 14px var(--ui); background: var(--superficie-2); color: var(--tinta); }
.oc-acoes { display: flex; gap: 16px; }
/* o `min-height: 48px` de `.link-acao` no toque vem ANTES da regra de 32 px e perde a cascata: aqui o alvo é o do token */
.ocorrencia-fundo .oc-acoes .link-acao { min-height: var(--alvo); padding: 0 4px; }
.oc-lista { max-height: 232px; overflow-y: auto; border: 1px solid var(--linha-forte); border-radius: var(--r-s); background: var(--superficie-2); }
.oc-area { display: flex; align-items: center; gap: 12px; min-height: var(--alvo); padding: 0 12px; font: 400 14px var(--ui); color: var(--tinta); cursor: pointer; }
.oc-area + .oc-area { border-top: 1px solid var(--linha); }
.oc-area:hover { background: var(--cinza-claro); }
.oc-area[hidden] { display: none; }
.oc-area-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-esta { font: 500 12px var(--ui); color: var(--tinta-2); }

/* o andamento e o resultado: a barra mostra quantas já foram, a lista diz qual deu certo e qual não */
.oc-status { padding-top: 12px; padding-bottom: 12px; }
.oc-status-titulo { margin: 0; font: 600 16px var(--ui); color: var(--tinta); }
.oc-status-titulo.com-falha { color: var(--fogo); }
.oc-status .dica { margin: 6px 0 0; font-size: 12px; color: var(--tinta-2); }
.oc-barra { height: 4px; margin: 12px 0; border-radius: 2px; background: var(--linha); overflow: hidden; }
.oc-barra i { display: block; height: 100%; background: var(--verde); transition: width 0.15s; }
.oc-resultado { list-style: none; margin: 12px 0 0; padding: 0; max-height: 240px; overflow-y: auto; }
.oc-res { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linha); font: 400 14px var(--ui); }
.oc-res:first-child { border-top: 0; }
.oc-res-nome { font-weight: 600; flex: 0 1 auto; }
.oc-res-txt { font-size: 12px; color: var(--tinta-2); text-align: right; flex: 1; }
.oc-res-feito .oc-res-txt { color: var(--verde); font-weight: 600; }
.oc-res-erro .oc-res-txt { color: var(--fogo); }

/* o formulário cresceu (lista de áreas): em janela baixa o corpo rola e o título e os botões ficam à vista */
.ocorrencia-fundo .modal { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); width: min(460px, 100%); }
.ocorrencia-fundo .modal-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ocorrencia-fundo .modal-cab, .ocorrencia-fundo .modal-pe { flex: 0 0 auto; }

@media (max-width: 900px) {
  .ocorrencia-fundo { padding: 0; }
  .ocorrencia-fundo .modal { width: 100%; height: 100%; max-height: none; border-radius: 0; display: flex; flex-direction: column; }
  .ocorrencia-fundo .modal-corpo { flex: 1 1 auto; overflow-y: auto; }
  .ocorrencia-fundo select,
  .ocorrencia-fundo textarea,
  .ocorrencia-fundo input[type="date"],
  .ocorrencia-fundo input[type="month"] { min-height: 48px; }
  .ocorrencia-fundo .seg button { min-height: 48px; }
  .ocorrencia-fundo .modal-pe .btn { min-height: 48px; }
}

/* "Onde": rádio do tamanho do M3 (20 px, verde) e a linha inteira como alvo */
.ocorrencia-onde-op { min-height: var(--alvo); cursor: pointer; }
.ocorrencia-onde-op input[type="radio"] { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; accent-color: var(--verde); }

/* B13 (QA final): a regra de 48 px no toque ficava ANTES da base de 32 e perdia a cascata */
@media (pointer: coarse), (max-width: 900px) { .link-acao { min-height: var(--alvo-toque, 48px); } }
.link-acao { font-size: var(--t-body-m); }