/* telas/notificacoes/estilo.css — Notificações / relato de anomalia (#233, refeita na #509).
   Cor só por token de web/styles.css. Tudo sob .notif (a folha entra no app inteiro);
   a visão agência (telas/notificacoes-agencia) usa estas mesmas classes. */

.notif { color: var(--ink); }
.notif-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 12px; }
.notif-topo h2 { margin: 0; }

.notif-ks {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  background: var(--panel); border: 1px solid var(--line); border-left-width: 4px;
  border-radius: var(--radius, 10px); padding: 10px 14px; margin: 0 0 14px; font-size: 13px;
}
.notif-ks.notif-ok { border-left-color: var(--ink-ok); }
.notif-ks.notif-err { border-left-color: var(--ink-err); }
.notif-ks.notif-mudo { border-left-color: var(--muted); }

.notif-ok { color: var(--ink-ok); }
.notif-warn { color: var(--ink-warn); }
.notif-err { color: var(--ink-err); }
.notif-info { color: var(--ink-info); }
.notif-mudo { color: var(--muted); }
.notif-ks.notif-ok, .notif-ks.notif-err, .notif-ks.notif-mudo { color: var(--ink); }

.notif-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.notif-filtros select, .notif-busca, .notif-num, .notif-campo select {
  font: inherit; font-size: 12px; color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; min-width: 0;
}
.notif-busca { flex: 1 1 10rem; max-width: 20rem; }
.notif-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink); }

.notif-grupo { margin: 0 0 16px; }
.notif-grupo h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.notif-regras { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.notif-regra {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; min-width: 0;
}
.notif-regra.ligada { border-color: var(--ink-accent); }
.notif-regra.em-breve { opacity: .72; }
.notif-regra-topo { display: flex; gap: 12px; align-items: flex-start; }
.notif-regra-texto { min-width: 0; flex: 1; }
.notif-regra-titulo { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.notif-desc { margin: 4px 0; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.notif-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; }
.notif-pol, .notif-fase, .notif-pill {
  font-size: 10.5px; font-weight: 700; border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 8px; white-space: nowrap;
}
.notif-fase { color: var(--muted); }
.notif-con a { color: var(--ink-accent); }
.notif-erro { color: var(--ink-err); font-size: 12px; }
.notif-quem { margin-top: 6px; font-size: 11px; }

.notif-regra-ctrl { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 8px 0 0 52px; }
.notif-campo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }

/* toggle */
.notif-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 40px; }
.notif-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.notif-trilho {
  position: absolute; inset: 0; border-radius: 999px; background: var(--panel);
  border: 1px solid var(--line); transition: background .15s;
}
.notif-trilho::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--muted); transition: transform .15s;
}
.notif-toggle input:checked + .notif-trilho { background: var(--orange); border-color: var(--orange); }
.notif-toggle input:checked + .notif-trilho::after { transform: translateX(18px); background: var(--on-accent); }
.notif-toggle input:disabled { cursor: not-allowed; }
.notif-toggle input:disabled + .notif-trilho { opacity: .55; }
.notif-toggle input:focus-visible + .notif-trilho { outline: 2px solid var(--ink-accent); outline-offset: 2px; }

.notif-params { margin: 10px 0 0 52px; max-width: 34rem; }
.notif-num { width: 7rem; text-align: right; }
.notif-params-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }

.notif-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 8px; margin: 0 0 12px; }
.notif-kpi { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.notif-kpi .n { font-size: 20px; font-weight: 800; color: var(--ink); }
.notif-kpi .l { font-size: 12px; color: var(--muted); }
.notif-kpi .sub { font-size: 11px; }

.notif-tabela th { cursor: pointer; user-select: none; }
.notif-texto { max-width: 36rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.notif-acoes { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.notif-msg { margin: 0 0 8px; }

/* tablet */
@media (max-width: 1100px) {
  .notif-texto { max-width: 22rem; }
  .notif-regra-ctrl, .notif-params { margin-left: 0; }
}

/* celular: a tabela vira cartão, nada empurra o body para o lado */
@media (max-width: 640px) {
  .notif .tabela-rolagem { overflow-x: visible; }
  .notif-tabela { min-width: 0 !important; width: 100%; }
  .notif-tabela thead { display: none; }
  .notif-tabela tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .notif-tabela td { display: flex; gap: 8px; padding: 2px 0; border: 0; text-align: left; }
  .notif-tabela td[data-r]:not([data-r=""])::before {
    content: attr(data-r); flex: 0 0 6.5rem; color: var(--muted); font-size: 11px;
  }
  .notif-tabela td.num { justify-content: flex-start; }
  .notif-texto { max-width: none; }
  .notif-busca { max-width: none; }
  .notif-filtros select { flex: 1 1 100%; }
  .notif-params table { width: 100%; }
  .notif-num { width: 5rem; }
}