/* =====================================================================
   AIPCF · components.css — DESIGN SYSTEM compartilhado (igual ao AIP-IN-FN).
   Vocabulário visual reutilizável por TODAS as telas. Só estilos exclusivos
   de uma tela vão em features/<x>/<x>.css. Tokens vêm de base.css (:root).
   ===================================================================== */

/* ---------------- botões ----------------
   Radius consistente em TODOS os botões de ação (footer do modal e telas).
   Antes: .btn-primary/.btn-ghost/.btn-add usavam 9px e .btn-danger NÃO tinha
   border-radius (cantos retos no footer do App.modal). Agora todos partilham
   um radius coerente com os cartões/inputs do app. */
.btn,.btn-primary,.btn-ghost,.btn-danger,.btn-add,.btn-clear{border-radius:10px}
.btn{font-family:inherit;font-weight:700;font-size:12.5px;padding:9px 16px;cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--brand);border:none;color:#fff;font-family:inherit;font-weight:700;font-size:12.5px;padding:9px 16px;cursor:pointer}
.btn-primary:hover{background:var(--brand2)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--muted);font-family:inherit;font-weight:700;font-size:12.5px;padding:9px 16px;cursor:pointer}
.btn-ghost:hover{background:var(--bg)}
.btn-danger{background:var(--red-soft);border:1px solid #f3b6bb;color:#c01f2c;font-family:inherit;font-weight:700;font-size:12.5px;padding:9px 16px;cursor:pointer}
.btn-danger:hover{background:var(--red-soft);filter:brightness(.97)}
/* cores configuráveis do botão de transição (token estilo → classe btn-<token>) */
.btn-success,.btn-warning,.btn-neutral{border-radius:10px;border:none;color:#fff;font-family:inherit;font-weight:700;font-size:12.5px;padding:9px 16px;cursor:pointer}
.btn-success{background:#157a39}.btn-success:hover{filter:brightness(.95)}
.btn-warning{background:#b06f00}.btn-warning:hover{filter:brightness(.95)}
.btn-neutral{background:#5a6b85}.btn-neutral:hover{filter:brightness(.95)}
.btn-add{background:var(--brand);color:#fff;border:none;padding:9px 15px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.btn-add:hover{background:var(--brand2)}
.btn-clear{border:1px solid var(--line);background:#fff;padding:9px 14px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit}
.rowbtn{font-size:11px;font-weight:700;border:1px solid var(--line);background:#fff;border-radius:7px;padding:5px 10px;cursor:pointer;font-family:inherit;color:var(--brand)}
.rowbtn:hover{background:var(--brand-soft)}
.rowbtn.del{color:var(--red)}.rowbtn.del:hover{background:var(--red-soft)}
/* BOTÃO DE ÍCONE de linha (o ✎ das tabelas). Quadrado, cantos levemente
   arredondados, sem peso visual: quem manda na linha é o conteúdo, não o botão.
   Área de toque de 30px — o desenho é menor, mas o alvo do dedo não. */
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--muted);
  cursor:pointer;font:inherit;line-height:0}
.iconbtn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.iconbtn:active{transform:translateY(1px)}
.lnk-rm{font-size:11px;font-weight:700;color:var(--red);background:none;border:none;cursor:pointer;font-family:inherit}
.lnk-rm:hover{text-decoration:underline}

/* ---------------- cards ---------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}

/* ---------------- toolbar / filtros ---------------- */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.toolbar input[type=text]{flex:1;min-width:200px;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-family:inherit;font-size:13px;background:var(--bg)}
.toolbar select{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-family:inherit;font-size:12.5px;background:#fff;font-weight:600;cursor:pointer;color:var(--ink)}
.toolbar .count{font-size:12px;font-weight:700;color:var(--brand);margin-left:auto}

/* ---------------- tabelas ----------------
   O DESENHO DA TABELA MORA AQUI, E SÓ AQUI. Toda tabela do app é
   `.tablecard > .tablewrap > table` — mudar estes valores muda todas as telas
   de uma vez. NÃO redefina moldura, cantos ou cabeçalho na folha de uma tela:
   se precisar de algo diferente, ajuste aqui (vale para todo mundo) ou use uma
   classe própria só para o que é realmente exclusivo daquela tabela.

   Os cantos arredondados saem da combinação `border-radius` + `overflow:hidden`
   no CARD: é ele que recorta o cabeçalho azul e a última linha. Arredondar as
   células uma a uma não funciona — o cabeçalho é sticky e escaparia do canto. */
:root{ --tab-radius:12px; }
table{width:100%;border-collapse:collapse;font-size:12.5px}
.tablecard{overflow:hidden;margin-top:14px;border:1px solid var(--line);border-radius:var(--tab-radius);background:var(--card)}
.tablewrap{overflow-x:auto;max-height:640px;overflow-y:auto;border-radius:inherit}
thead th{position:sticky;top:0;background:var(--brand);color:#fff;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.3px;text-align:left;padding:11px 13px;white-space:nowrap;z-index:1}
tbody td{padding:10px 13px;border-bottom:1px solid var(--line)}
/* a última linha não desenha borda: ela cairia em cima do canto arredondado */
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--brand-soft)}

/* ---- LINHA DE FILTRO do cabeçalho ----
   As duas linhas do cabeçalho são sticky. Sem um `top` próprio, a de filtro
   gruda no MESMO 0 da linha de títulos e fica por cima dela — o título some e
   sobra um retângulo claro. O valor acompanha a altura da linha de títulos
   (medida: 44px com o padding atual); mexer no padding do `thead th` pede
   mexer aqui junto. */
:root{ --tab-hd-h:44px; }
thead .tb-frow th{top:var(--tab-hd-h)}

/* ---- COLUNAS CONGELADAS ----
   `tb-congela` no `.tablewrap` faz as duas primeiras colunas (ações e Código)
   pararem ao rolar para o lado — sem elas, depois de algumas telas de rolagem
   a linha perde a identidade e não dá para saber de qual registro ela é.

   O fundo nas células paradas é obrigatório: sem ele, o conteúdo das colunas
   que passam por baixo aparece através delas.

   `--tb-act` é a largura da coluna de ações, e é dela que sai o `left` da
   segunda. Cada grade declara a sua: a de processo tem um botão, a das tabelas
   tem três. */
.tb-congela{ --tb-act:52px; }
.tb-congela td:nth-child(1),.tb-congela th:nth-child(1){position:sticky;left:0;z-index:2;min-width:var(--tb-act);width:var(--tb-act)}
.tb-congela td:nth-child(2),.tb-congela th:nth-child(2){position:sticky;left:var(--tb-act);z-index:2}
.tb-congela tbody td:nth-child(1),.tb-congela tbody td:nth-child(2){background:var(--card)}
.tb-congela tbody tr:hover td:nth-child(1),.tb-congela tbody tr:hover td:nth-child(2){background:var(--brand-soft)}
/* O cabeçalho já é sticky no topo; nas duas primeiras ele é sticky nos DOIS
   eixos, então sobe um degrau em relação às demais células paradas. */
.tb-congela thead th:nth-child(1),.tb-congela thead th:nth-child(2){z-index:3;background:var(--brand)}
.tb-congela .tb-frow th:nth-child(1),.tb-congela .tb-frow th:nth-child(2){background:var(--bg)}
.nome{font-weight:700}
.empty{padding:44px;text-align:center;color:var(--muted)}

/* ---------------- painel lateral recolhível ----------------
   O COMPORTAMENTO mora em `shared/lateral.js`; aqui está só o desenho. A LARGURA
   da aba NÃO é definida aqui de propósito: quem sabe quanto a lista precisa é a
   tela (ex.: `.tb-list` pede 220px). Este bloco cuida de recolher e de virar
   gaveta no celular — e é isso que se herda ao adotar o padrão em outra tela.

   O botão fica num vão fixo à esquerda, aberto ou recolhido. Botão que muda de
   lugar conforme o estado obriga a procurar justamente quem já está perdido. */
.lat{display:flex;gap:14px;align-items:flex-start;position:relative}
.lat-corpo{flex:1;min-width:0}
/* COMPUTADOR/TABLET: a lista ganha rolagem PRÓPRIA e fica grudada abaixo do
   cabeçalho. Sem isto ela rola junto com a página — e como costuma ser mais alta
   que a janela (1.309px numa janela de 900, na tela Tabelas), some para cima
   justamente enquanto se olha a tabela, que tem altura própria e fica parada.
   Continua sendo COLUNA (não vira gaveta como no celular): o conteúdo ao lado
   encurta na horizontal, como já encurtava.
   O `top` acompanha o cabeçalho, que é sticky de 60px. */
.lat-aba{min-width:0;position:sticky;top:68px;max-height:calc(100vh - 84px);
  overflow-y:auto;overscroll-behavior:contain}
/* Filho de coluna ROLÁVEL não pode encolher. Com `flex-shrink` ligado (o padrão
   do flex), os itens se espremem para caber na altura disponível em vez de
   transbordar — e aí a rolagem quase não anda: com os quatro grupos abertos no
   celular, mandar rolar 400px movia 40, e o resto da lista ficava inalcançável.
   Vale nos dois modos: coluna no computador e gaveta no celular. */
.lat-aba > *{flex:0 0 auto}
.lat-tog{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--muted);cursor:pointer;font:inherit;line-height:0}
.lat-tog:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.lat-tog:active{transform:translateY(1px)}
.lat.lat-off > .lat-aba{display:none}
.lat-fundo{display:none}
/* Quando o botão é mandado para o título da tela (`data-lat-botao`), ele deixa
   de ser item do flex e vira conteúdo em linha — alinha pelo meio do texto. */
.ad-h1 > .lat-tog{vertical-align:middle;margin-right:9px}

/* CELULAR: a aba deixa de ser coluna e vira GAVETA por cima do conteúdo. Mesma
   mecânica do menu principal (`.app-drawer`, em base.css) — desliza em vez de
   piscar — e os mesmos andares de z-index, um degrau ABAIXO dele: o menu do app
   é navegação, e navegação sempre ganha de uma lista de dentro da tela. */
@media(max-width:820px){
  .lat{display:block}
  .lat > .lat-tog{margin-bottom:12px}
  .lat > .lat-aba{position:fixed;top:0;left:0;height:100%;max-height:none;z-index:75;
    width:min(300px,86vw);max-width:none;flex:none;
    display:flex;flex-direction:column;gap:6px;
    background:var(--card);border-right:1px solid var(--line);
    padding:14px;overflow-y:auto;overscroll-behavior:contain;
    box-shadow:2px 0 24px rgba(0,0,0,.3);
    transform:translateX(-100%);transition:transform .22s ease}
  /* fechada no celular NÃO é display:none: some deslizando, e para deslizar
     precisa continuar existindo. */
  .lat.lat-off > .lat-aba{display:flex;transform:translateX(-100%)}
  .lat:not(.lat-off) > .lat-aba{transform:none}
  .lat > .lat-fundo{display:block;position:fixed;inset:0;z-index:70;
    background:rgba(8,18,44,.45);opacity:0;pointer-events:none;transition:opacity .2s}
  .lat:not(.lat-off) > .lat-fundo{opacity:1;pointer-events:auto}
}

/* ---------------- títulos de tela, seções e chips (`.ad-*`) ----------------
   MORAVAM em `features/admin/admin.css`. A tela Admin foi aposentada e o
   `index.html` deixou de carregar aquela folha — mas as classes continuaram em
   uso em Tabelas, Integrações, Notificações e outras. Resultado: ficaram SEM
   ESTILO, e ninguém viu porque nada quebra visivelmente — o `<h1>` só passou a
   valer o padrão do navegador (32px, com margens enormes) e a linha de seção
   deixou de ser uma linha.

   Por isso vieram para cá: são usadas por várias telas, então são padrão, não
   detalhe de uma tela. O prefixo `ad-` ficou por não valer a pena reescrever
   ~50 pontos de uso; o nome é histórico e não quer dizer "admin". */
.ad-h1{font-size:18px;font-weight:800;color:var(--brand);margin:12px 0 0}
.ad-body{margin-top:14px;display:flex;flex-direction:column;gap:14px}
.ad-sec{padding:14px 16px}
.ad-sec-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ad-sec-hd b{font-size:13px;color:var(--ink)}
.ad-chips{display:flex;flex-direction:column;gap:6px}
.ad-chip{display:flex;align-items:center;justify-content:space-between;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 8px 8px 12px;font-size:13px;font-weight:600}
.ad-chip.ad-filho{background:var(--brand-soft)}
.ad-x{background:none;border:none;color:var(--red);font-size:16px;line-height:1;cursor:pointer;font-weight:700;padding:0 4px}
.ad-x:hover{transform:scale(1.15)}
.ad-none{font-size:11.5px;color:#b8c0cd;font-style:italic}
/* CELULAR: o título da tela é um rótulo, não uma capa — some do caminho. */
@media(max-width:820px){
  .ad-h1{font-size:16px;margin:6px 0 0}
  .ad-sec-hd{flex-wrap:wrap;gap:8px}
}

/* ---------------- selos / pílulas / chips ---------------- */
.pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.p-green{background:var(--green-soft);color:#157a39}
.p-amber{background:var(--amber-soft);color:#b06f00}
.p-red{background:var(--red-soft);color:#c01f2c}
.p-gray{background:#eef1f6;color:#7a8699}
.p-blue{background:var(--brand-soft);color:var(--brand)}
/* pílula de CONTORNO: o valor escolhido numa lista aparece como etiqueta, e não
   como texto solto. Sem preenchimento de propósito — numa tabela com 8 colunas
   de seleção, oito faixas coloridas competiriam entre si e com os selos de
   estado (esses sim coloridos, porque significam alguma coisa). */
.p-line{background:transparent;border:1px solid var(--line);color:var(--ink);font-weight:600}
/* pessoa numa célula: avatar + nome, do mesmo jeito que o resto do app mostra
   gente. Um id ou um nome solto não se reconhece de relance; a cara, sim. */
.cel-usr{display:inline-flex;align-items:center;gap:5px;max-width:100%;vertical-align:middle}
.cel-usr + .cel-usr{margin-left:6px}
.cel-usr .avatar{width:18px;height:18px;font-size:8px;flex:none}
.cel-usr > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tipo{display:inline-block;font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:6px;background:#eef1f6;color:#56627a;margin:1px}

/* ---------------- KPIs ---------------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-top:6px}
.kpi{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;overflow:hidden}
.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand)}
.kpi.g::before{background:var(--green)}.kpi.a::before{background:var(--amber)}.kpi.r::before{background:var(--red)}
.kpi .lab{font-size:12px;font-weight:600;color:var(--muted)}
.kpi .val{font-size:26px;font-weight:800;margin-top:6px;color:var(--brand);line-height:1}
.kpi.g .val{color:var(--green)}.kpi.a .val{color:#c47d00}.kpi.r .val{color:var(--red)}
.kpi .sub{font-size:11px;color:var(--muted);margin-top:4px}

/* ---------------- sub-abas (dentro de uma tela) ---------------- */
.sub-tabs{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.sub-tab{font-family:inherit;font-size:12px;font-weight:700;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:9px;padding:8px 14px;cursor:pointer}
.sub-tab.on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---------------- modal / diálogo ---------------- */
.modal-bg{position:fixed;inset:0;background:rgba(8,18,44,.5);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal-bg.on{display:flex}
.modal{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:100%;max-width:560px;max-height:88vh;overflow-y:auto;overscroll-behavior:contain}
.modal-hd{padding:18px 22px;border-bottom:1px solid var(--line);font-size:15px;font-weight:800;color:var(--brand);display:flex;justify-content:flex-start;align-items:center;gap:14px}
.modal-x{cursor:pointer;color:var(--muted);font-size:20px;line-height:1;background:none;border:none;margin-left:auto}
/* chip da etapa atual no cabeçalho do cartão (ao lado do código do cartão) */
.modal-hd-extra{display:inline-flex}
.hd-etapa{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink);
  background:#f4f7fc;border:1px solid var(--line);border-left-width:4px;border-radius:9px;padding:4px 10px}
.hd-etapa-lbl{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}
.hd-etapa b{font-size:12.5px;color:var(--ink)}
.modal-bd{padding:18px 22px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal-ft{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
/* modal de falha de gravação (sync) */
.sync-fatal{font-size:13px;color:var(--ink);line-height:1.5}
.sync-fatal-det{margin-top:10px;font-size:11.5px;color:var(--muted);background:#f4f7fc;border:1px solid var(--line);border-radius:8px;padding:8px 10px;overflow-wrap:anywhere}
/* código do erro (destaque + copiar) */
.sync-fatal-codbox{margin-top:12px;border:1px solid var(--line);border-radius:10px;background:#f8fafc;overflow:hidden}
.sync-fatal-codhd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 6px 12px;background:#eef2f8;border-bottom:1px solid var(--line)}
.sync-fatal-codhd span{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.sync-fatal-copy{font-size:11.5px;font-weight:600;color:var(--brand);background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 10px;cursor:pointer}
.sync-fatal-copy:hover{background:var(--brand-soft)}
.sync-fatal-cod{display:block;padding:10px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;color:var(--ink);word-break:break-all;user-select:all}
.sync-fatal-hint{margin-top:8px;font-size:12px;color:var(--muted)}
.sync-fatal-det2{margin-top:10px}
.sync-fatal-det2 summary{font-size:11.5px;color:var(--muted);cursor:pointer;user-select:none}
.sync-fatal-det2 pre{margin:8px 0 0;font-size:11px;line-height:1.5;color:var(--muted);background:#f4f7fc;border:1px solid var(--line);border-radius:8px;padding:8px 10px;white-space:pre-wrap;overflow-wrap:anywhere;user-select:all}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld.full{grid-column:1/3}
/* rótulo em 1 linha com reticências (não quebra em 2 linhas nem colide/corta o
   campo na moldura de 76px); o texto completo fica no title (tooltip). */
/* rótulo do campo: QUEBRA LINHA (mostra o texto todo em qualquer largura) em vez
   de reticências — não depende de hover/tooltip, que não existe no toque. */
.fld label{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;display:block;overflow-wrap:anywhere}
.fld input,.fld select,.fld textarea{font-family:inherit;font-size:13px;border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:var(--bg)}
/* controles preenchem e encolhem (evita estouro horizontal); checkbox/radio ficam de fora */
.fld input:not([type=checkbox]):not([type=radio]),.fld select,.fld textarea{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.fld textarea{resize:vertical;min-height:60px}
/* exemplo de preenchimento tem de PARECER exemplo: no cinza padrão do browser
   um placeholder de telefone/código passa por valor já digitado, e a pessoa
   salva achando que o campo estava preenchido. */
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted);opacity:.5;font-style:italic}
/* linha de ajuda de um campo (o "como se usa", não o rótulo). Discreta de
   propósito: no tamanho e na cor do corpo ela compete com o próprio campo e
   vira a coisa mais pesada do formulário. Vive AQUI porque é padrão de
   formulário — redefinir por tela é o que faz "mudar o design" virar caçada. */
.fld-help{font-size:11.5px;line-height:1.45;color:var(--muted);margin:-2px 0 2px}
.fld-help b{color:var(--ink);font-weight:700}
/* campo obrigatório faltando ao tentar mover de etapa — realce vermelho SUAVE.
   padding+margem negativa dão folga p/ o anel/tint sem deslocar o layout. */
/* Realce no CONTROLE (não no wrapper): assim o anel não sobe e cruza o título
   do grupo quando o campo é o 1º da seção. Rótulo em vermelho suave. */
.fld-falta>label{color:#cc6b6b}
.fld-falta input,.fld-falta select,.fld-falta textarea,.fld-falta .ss-btn,.fld-falta .fld-lookup,.fld-falta .fld-arq,.fld-falta .fld-user1{border-color:rgba(214,69,69,.55);background:rgba(214,69,69,.05);box-shadow:0 0 0 1px rgba(214,69,69,.16);transition:box-shadow .15s,background .15s,border-color .15s}
/* somente-leitura: texto normal escuro sobre fundo levemente preenchido (mesmo ar
   do .fld-lookup) em vez de esmaecer — legível e claramente "só leitura". */
.fld input.ro,.fld select.ro,.fld textarea.ro{background:#f4f7fc;color:var(--ink);opacity:1;-webkit-text-fill-color:var(--ink);cursor:default}
.fld input.ro:focus,.fld select.ro:focus,.fld textarea.ro:focus{outline:none;box-shadow:none;border-color:var(--line)}
/* campo lookup: valor derivado de outra seleção, só leitura */
.fld-lookup{font-size:13px;color:var(--ink);background:#f4f7fc;border:1px solid var(--line);border-radius:9px;padding:9px 11px;min-height:38px;box-sizing:border-box;display:flex;align-items:center}
/* valor de SELECT só-leitura: texto que quebra linha (mostra tudo, sem depender
   de hover/tooltip — funciona no celular). data-val guarda o valor p/ o readModal. */
.fld-roval{font-size:13px;color:var(--ink);background:#f4f7fc;border:1px solid var(--line);border-radius:9px;padding:9px 11px;min-height:38px;box-sizing:border-box;display:flex;align-items:center;white-space:normal;overflow-wrap:anywhere}
/* campo "Usuários" (responsáveis): mesmo visual do anexo (fld-arq) — o "adicionar"
   é o seletor com avatar (App.userSelect); cada responsável é um chip com foto. */
.usr-add{align-self:flex-start;flex:none;white-space:nowrap;font-size:12px;padding:6px 11px;max-width:170px}
.usr-addw{align-self:flex-start}
.usr-item .arq-ic{font-size:15px}
.usr-ava{width:22px;height:22px;flex:none;display:inline-flex;align-items:center;justify-content:center}
.usr-ava .avatar{width:22px;height:22px}

/* ---- Seletor de usuário com avatar (App.userSelect) ---- */
.usel{position:relative;display:inline-block;min-width:180px;max-width:100%}
.fld-user1 .usel{display:block;width:100%}
.usel-btn{display:flex;align-items:center;gap:8px;width:100%;background:#fff;border:1px solid var(--line);border-radius:9px;padding:6px 10px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;text-align:left}
.usel-btn:hover{border-color:var(--brand)}
.usel.open .usel-btn{border-color:var(--brand);box-shadow:0 0 0 2px rgba(90,63,176,.12)}
.usel-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.usel-ph{flex:1;color:var(--muted)}
.usel-cr{flex:none;color:var(--muted);font-size:11px}
.usel-add .usel-btn{background:#f4f7fc;font-size:12px;padding:6px 11px;color:var(--brand);font-weight:700}
/* popover: busca fixa no topo + lista rolável (mostra até 100 e filtra ao digitar) */
.usel-pop{position:fixed;z-index:100050;min-width:180px;max-width:min(360px,92vw);max-height:300px;display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.22);padding:4px}
.usel-search{flex:none;margin:2px 2px 5px;font:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:8px;padding:7px 9px;background:var(--bg)}
/* display:block (NÃO flex): itens não encolhem verticalmente (senão sobrepõem); rolam.
   overscroll-behavior:contain: rolar a lista não "vaza" p/ o quadro atrás. */
.usel-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.usel-more{font-size:11px;color:var(--muted);text-align:center;padding:5px}
.usel-it{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;border-radius:7px;padding:6px 8px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;text-align:left}
.usel-it:hover{background:#f1eeff}
.usel-it.on{background:#ece9ff}
.usel-it .avatar{width:22px;height:22px;flex:none}
.usel-none{color:var(--muted);font-style:italic}
.usel-empty{padding:10px;font-size:12px;color:var(--muted)}

/* ---- Combobox de busca p/ <select> grandes (App.searchSelect) ---- */
.ss{position:relative;display:block;width:100%}
.ss select{display:none}   /* <select> oculto = fonte da verdade (readModal/dependentes) */
.ss-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:6px;font:inherit;font-size:13px;text-align:left;border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:#fff;color:var(--ink);cursor:pointer}
.ss-btn:hover{border-color:var(--brand)}
.ss.open .ss-btn{border-color:var(--brand);box-shadow:0 0 0 2px rgba(90,63,176,.12)}
.ss-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-ph{color:var(--muted)}
.ss-cr{flex:none;color:var(--muted);font-size:10px}
.ss-pop{position:fixed;z-index:100050;min-width:180px;max-width:min(420px,92vw);max-height:320px;display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.22);padding:4px}
.ss-search{flex:none;margin:2px 2px 5px;font:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:8px;padding:7px 9px;background:var(--bg)}
/* display:block (NÃO flex): itens mantêm a altura natural (flex encolheria → sobrepõe). */
.ss-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.ss-it{display:block;width:100%;text-align:left;font:inherit;font-size:13px;color:var(--ink);background:none;border:0;border-radius:7px;padding:8px 9px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-it:hover{background:#eef3ff}
.ss-it.on{background:#e7f0ff;color:var(--brand);font-weight:700}
.ss-grp{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);padding:6px 9px 2px}
.ss-empty{padding:10px;font-size:12px;color:var(--muted);font-style:italic;text-align:center}
.ss-more{font-size:11px;color:var(--muted);text-align:center;padding:5px}

/* campo data fixa/relativa (Rotinas) */
.fld-datarel{display:flex;flex-direction:column;gap:6px}
.dr-modes{display:flex;gap:14px;flex-wrap:wrap}
.dr-modes label{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;text-transform:none}
.dr-rel{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink)}
.dr-rel .dr-dias{width:70px}
.fld-datarel input[type=date],.fld-datarel input[type=number]{font:inherit;font-size:13px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:#fff}
/* modal largo + grade de 12 colunas (cartão low-code, layout do editor) */
.modal.modal-wide{max-width:960px}

/* modal com painel lateral (Comentários & Histórico à direita do form).
   Vira grade: cabeçalho e rodapé cruzam as 2 colunas; corpo (form) | painel.
   O modal em si NÃO rola: cada coluna (form e painel) rola por dentro, então o
   painel acompanha a tela e a caixa de comentar fica sempre visível no rodapé. */
.modal.modal-has-side{display:grid;grid-template-columns:minmax(0,1fr) 320px;
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"hd hd" "bd side" "ft ft";max-height:88vh;overflow:hidden}
.modal.modal-has-side>.modal-hd{grid-area:hd}
.modal.modal-has-side>.modal-bd{grid-area:bd;overflow-y:auto;overscroll-behavior:contain;min-height:0}
.modal.modal-has-side>.modal-side{grid-area:side}
.modal.modal-has-side>.modal-ft{grid-area:ft}
/* painel lateral ESQUERDO (config) + direito (comentários) = 3 colunas */
.modal.modal-has-side.modal-has-sideleft{grid-template-columns:300px minmax(0,1fr) 320px;
  grid-template-areas:"hd hd hd" "sideL bd side" "ft ft ft"}
.modal.modal-has-sideleft:not(.modal-has-side){display:grid;grid-template-columns:300px minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"hd hd" "sideL bd" "ft ft";max-height:88vh;overflow:hidden}
.modal.modal-has-sideleft>.modal-hd{grid-area:hd}
.modal.modal-has-sideleft>.modal-bd{grid-area:bd;overflow-y:auto;overscroll-behavior:contain;min-height:0}
.modal.modal-has-sideleft>.modal-ft{grid-area:ft}
.modal.modal-has-sideleft>.modal-side-left{grid-area:sideL}
.modal-side{border-left:1px solid var(--line);background:#f8fafd;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.modal-side-left{border-left:none;border-right:1px solid var(--line)}
/* ---- Responsivo (celular): modais numa coluna, sem rolagem horizontal ---- */
@media(max-width:640px){
  .modal-bg{padding:10px}
  .modal-bd{grid-template-columns:1fr}
  .fld.full{grid-column:auto}
  .modal.modal-wide{max-width:100%}
  /* modais com painel lateral: empilha numa coluna e o modal rola por inteiro */
  .modal.modal-has-side{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;
    grid-template-areas:"hd" "bd" "side" "ft";max-height:92vh;overflow-y:auto}
  .modal.modal-has-sideleft.modal-has-side{grid-template-rows:auto auto auto auto auto;
    grid-template-areas:"hd" "sideL" "bd" "side" "ft"}
  .modal.modal-has-sideleft:not(.modal-has-side){grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;grid-template-areas:"hd" "sideL" "bd" "ft";
    max-height:92vh;overflow-y:auto}
  .modal.modal-has-side>.modal-bd,.modal.modal-has-sideleft>.modal-bd{overflow:visible;min-height:0}
  .modal.modal-has-side>.modal-side,.modal.modal-has-sideleft>.modal-side{overflow:visible}
  .modal-side,.modal-side-left{border-left:none;border-right:none;border-top:1px solid var(--line)}
  .cp-body{overflow:visible}
}
.cp-hd{padding:14px 16px 8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}
.cp-tabs{display:flex;gap:6px;padding:0 16px}
.cp-tab{flex:1;font-size:12px;font-weight:700;color:var(--muted);background:#eef1f6;border:1px solid var(--line);
  border-radius:8px 8px 0 0;padding:7px 6px;cursor:pointer}
.cp-tab.on{color:var(--brand);background:#fff;border-bottom-color:#fff}
.cp-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.cp-empty{font-size:12px;color:#b8c0cd;font-style:italic;text-align:center;padding:12px}
.cp-item{background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.cp-mv{font-size:12px;color:var(--ink)}.cp-mv b{color:var(--brand)}
/* código da etapa nas referências do painel (histórico/comentários) */
.cp-code{font-size:8.5px;font-weight:800;letter-spacing:.3px;color:var(--muted);background:#eef1f6;border:1px solid var(--line);border-radius:4px;padding:0 4px;white-space:nowrap}
.cp-meta{font-size:10.5px;color:var(--muted);margin-top:2px}
.cp-just{font-size:12px;color:var(--ink);white-space:pre-wrap;background:#f4f7fc;border-left:3px solid var(--amber);
  border-radius:6px;padding:6px 8px;margin-top:6px}
.cp-txt{font-size:12.5px;line-height:1.4;color:var(--ink);white-space:pre-wrap;margin-top:4px}
/* diff da auditoria de edição (quem editou o quê: campo de→para) */
.cp-edits{margin-top:5px;display:flex;flex-direction:column;gap:3px}
.cp-edit-l{font-size:11.5px;color:var(--ink);line-height:1.35}
.cp-edit-de{color:var(--muted);text-decoration:line-through}
.cp-edit-pa{color:var(--ink);font-weight:600}
/* delta de anexos/checklist: entrou (＋), saiu (✕), ticado (☑), desticado (☐) */
.cp-edit-l>span+span{margin-left:2px}
.cp-d-add,.cp-d-rem,.cp-d-tick,.cp-d-untick{display:inline-block;font-weight:600;font-size:11px;border-radius:5px;padding:1px 6px;white-space:nowrap;margin:1px 0}
.cp-d-add{color:#157a39;background:#e7f5ec}
.cp-d-rem{color:#c01f2c;background:#fdecec;text-decoration:line-through}
.cp-d-tick{color:#0a2e6e;background:#eef3fc}
.cp-d-untick{color:#8a6a12;background:#fdf3d7}
.cp-d-none{color:var(--muted);font-style:italic}
/* caixa de comentar: rodapé fixo do painel (fora do corpo rolável) */
.cp-add{flex:none;display:flex;flex-direction:column;gap:6px;padding:10px 16px;border-top:1px solid var(--line);background:#f8fafd}
.cp-add textarea{width:100%;box-sizing:border-box;font:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;resize:vertical}
.cp-add .btn-primary{font-size:12px;padding:6px 14px}
.cp-add-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cp-add-row .btn-clear{font-size:12px;padding:6px 10px}
/* menção (@) no comentário — lista sobe sobre o compositor, sem empurrar layout */
.cp-new-wrap{position:relative}
.cp-menc-pop{position:absolute;left:0;right:0;bottom:calc(100% + 4px);z-index:40;max-height:260px;overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 8px 22px rgba(16,32,64,.16);padding:4px}
.cp-menc-op{display:block;width:100%;text-align:left;font:inherit;font-size:12.5px;color:var(--ink);
  background:none;border:0;border-radius:6px;padding:6px 9px;cursor:pointer}
.cp-menc-op:hover,.cp-menc-op.on{background:#eef3ff;color:var(--brand)}
.cp-menc-mais{font-size:11.5px;color:var(--ink-3,#7b879c);padding:5px 9px 3px;border-top:1px solid var(--line);margin-top:3px}
.cp-menc{color:var(--brand);font-weight:600}
/* corpo das abas do painel (histórico/comentários; config/comentários da rotina) */
.cp-tabbody{flex:1;min-height:0;display:flex;flex-direction:column}
.rt-tab-cfg{flex:1;min-height:0;overflow-y:auto}
.rt-tab-com{flex:1;min-height:0;display:flex;flex-direction:column}
/* anexos dentro de um comentário + arquivos pendentes de envio */
.cp-anx{display:flex;flex-direction:column;gap:3px;margin-top:5px}
.cp-anx-row{display:flex;align-items:center;gap:6px}
.cp-anx-l{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--brand);text-decoration:none;min-width:0}
.cp-anx-l>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-anx-l:hover>span{text-decoration:underline}
.cp-anx-dl{flex:none;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--muted);cursor:pointer;line-height:0;padding:2px}
.cp-anx-dl:hover{color:var(--brand)}
.ic-clip,.ic-dl{flex:none;opacity:.9}
.arq-dl{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--muted);cursor:pointer;line-height:0;padding:2px}
.arq-dl:hover{color:var(--brand)}
.cp-add.cp-drop{outline:2px dashed var(--brand);outline-offset:-3px;background:#eef3ff}
.cp-files{display:flex;flex-wrap:wrap;gap:5px}
.cp-file{font-size:11px;background:#eef2f8;border:1px solid var(--line);border-radius:6px;padding:2px 6px;display:inline-flex;align-items:center;gap:5px}
.cp-file button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:12px;line-height:1;padding:0}
/* telas estreitas: painel abaixo do form (1 coluna); modal volta a rolar inteiro */
@media(max-width:820px){
  .modal.modal-has-side{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;
    grid-template-areas:"hd" "bd" "side" "ft";overflow-y:auto}
  .modal.modal-has-side>.modal-bd{overflow-y:visible}
  .modal-side{border-left:none;border-top:1px solid var(--line);max-height:360px}
  /* 3 colunas → empilha: config, form, comentários */
  .modal.modal-has-side.modal-has-sideleft{grid-template-columns:1fr;
    grid-template-areas:"hd" "sideL" "bd" "side" "ft"}
  .modal.modal-has-sideleft:not(.modal-has-side){grid-template-columns:1fr;grid-template-rows:auto auto auto auto;
    grid-template-areas:"hd" "sideL" "bd" "ft";overflow-y:auto}
  .modal-side-left{border-right:none;border-top:1px solid var(--line);max-height:360px}
}
/* em grid12 o corpo é um bloco: note/motivo full-width + a grade aninhada */
.modal-bd.grid12{display:block}
.modal-bd.grid12>.fld{margin-bottom:12px}
/* minmax(0,1fr): as colunas ENCOLHEM p/ caber em telas médias (ex.: Fold aberto ~690px)
   em vez de forçar overflow. No desktop é idêntico (só age quando falta espaço). */
.modal-grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;grid-auto-rows:minmax(66px,auto);align-items:start}
/* no cartão espacial a altura da textarea vem da altura (gh) do campo (definida no
   editor, que empurra os de baixo). Sem puxador nativo p/ não cobrir os campos. */
.modal-grid12 textarea{resize:none}
/* seções visuais (grupos temáticos) — caixa titulada ATRÁS dos campos.
   A caixa EXPANDE p/ fora das células (margin negativa) → sobra folga entre a
   borda e os campos. z-index:0 atrás; os campos ficam em z-index:1 (acima). O
   título é um chip no topo, na faixa acima dos campos (sem sobrepor). */
.modal-grid12>.fld{position:relative;z-index:1;min-width:0}
.card-secao{position:relative;z-index:0;align-self:stretch;margin:-9px -8px -4px -8px;border:1px solid var(--line);border-radius:11px;background:rgba(10,46,110,.028);pointer-events:none}
.card-secao-tt{position:absolute;top:-9px;left:14px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);background:#fff;padding:1px 8px;border-radius:6px;border:1px solid var(--line)}
/* campo de anexos (PDF/imagem/vídeo) — botão pequeno + lista VERTICAL rolável */
.modal-grid12>.fld.fld-arq-cell{align-self:stretch;min-height:0;overflow:hidden}
.fld-arq{display:flex;flex-direction:row;align-items:stretch;gap:10px;flex:1;min-height:0;min-width:0;
  border:1.5px dashed var(--line);border-radius:10px;padding:6px 8px;background:var(--bg);transition:border-color .12s,background .12s}
.fld-arq.arq-drop-on{border-color:var(--brand);background:#eef3fc}
.arq-btn{flex:none;align-self:flex-start;white-space:nowrap;font-size:12px;padding:6px 11px}
/* lista vertical — os chips empilham e ROLAM na vertical (rodinha normal) */
.arq-list{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.arq-list::-webkit-scrollbar{width:7px}
.arq-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.arq-ph{font-size:11.5px;color:var(--muted);text-align:center;white-space:normal;line-height:1.35;align-self:center;margin:auto;max-width:95%}
.fld-arq.arq-drop-on .arq-ph{color:var(--brand);font-weight:600}
.arq-item{flex:none;display:flex;align-items:center;gap:8px;font-size:12px;
  border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:#fff}
.arq-name{color:var(--brand);text-decoration:none;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arq-name:hover{text-decoration:underline}
.arq-thumb{width:24px;height:24px;object-fit:cover;border-radius:5px;border:1px solid var(--line);flex:none}
.arq-ic{width:20px;text-align:center;flex:none}
.arq-x{flex:none;background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:0 2px}
.arq-x:hover{color:#c0392b}

/* Campo SELECT MÚLTIPLO — dropdown (visual do select único) + chips fora do campo */
.msel{display:flex;flex-direction:column;gap:6px}
.msel-chips{display:flex;flex-wrap:wrap;gap:5px;max-height:60px;overflow:auto}
.msel-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--brand);background:#eef3fc;border:1px solid var(--brand);border-radius:999px;padding:3px 5px 3px 10px;font-weight:600;text-transform:none;letter-spacing:0}
.msel-chip-x{background:none;border:0;color:var(--brand);cursor:pointer;font-size:11px;line-height:1;padding:0 3px}
.msel-chip-x:hover{color:#c0392b}
/* opção da lista com checkbox (herda o visual .ss-it do select) */
.ss-it.msel-it{display:flex;align-items:center;gap:9px}
.msel-cb{flex:none;width:16px;height:16px;border:1.5px solid var(--line);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;line-height:1;color:#fff;background:#fff}
.msel-cb.on{background:var(--brand);border-color:var(--brand)}
/* barra "Selecionar todos / Limpar" no topo da lista */
.msel-tools{display:flex;gap:6px;padding:4px 6px 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.msel-tools button{flex:1;font:inherit;font-size:11.5px;font-weight:700;color:var(--brand);background:#eef3fc;border:1px solid var(--line);border-radius:6px;padding:4px 8px;cursor:pointer}
.msel-tools button:hover{border-color:var(--brand)}
.msel-tools .msel-clear{color:#c0392b;background:#fdecec}

/* Campo CHECKLIST (itens marcáveis) */
/* Fica na própria célula da grade (respeita posição/largura do editor). Quando o
   cartão tem checklist, as faixas viram minmax(76px,auto): a linha do checklist
   estica com o conteúdo e empurra os campos de baixo — sem sobrepor. */
/* align-items:flex-start → os filhos NÃO esticam full-width; a tabela abraça o
   conteúdo (width:max-content) em vez de deixar um vão enorme na coluna da pergunta. */
.fld-check{display:flex;flex-direction:column;gap:6px;min-width:0;align-items:flex-start}
/* editável: lista simples e caixa de "+ adicionar" com largura confortável (não
   full-width à toa); a TABELA robusta abraça o próprio conteúdo (regra abaixo). */
.fld-check .chk-list,.fld-check .chk-add{width:100%;max-width:560px}
/* SEM max-height/scroll: um container de rolagem NÃO força a linha da grade
   (grid-auto-rows auto) a crescer — o conteúdo transbordaria por cima do campo
   de baixo. Em fluxo normal, o checklist cresce e empurra o formulário pra baixo. */
.chk-list{display:flex;flex-direction:column;gap:5px}
.chk-ph{font-size:12px;color:var(--muted);padding:3px 2px}
.chk-item{display:flex;align-items:center;gap:8px}
.chk-item input[type=checkbox]{width:16px;height:16px;flex:none;accent-color:var(--brand);cursor:pointer}
.chk-item input[type=checkbox]:disabled{cursor:default}
.chk-txt{flex:1;min-width:0;font:inherit;font-size:13px;border:1px solid var(--line);border-radius:8px;padding:6px 9px;background:var(--bg)}
.chk-txt-ro{flex:1;min-width:0;font-size:13px;color:var(--ink);line-height:1.35}
.chk-item.done .chk-txt-ro{color:var(--muted);text-decoration:line-through}
.chk-x{flex:none;background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:0 4px}
.chk-x:hover{color:#c0392b}
/* alça de arraste (6 pontos) p/ reordenar — só na etapa de edição total.
   Alinhada AO TOPO (não centro) p/ não flutuar no meio de linhas altas; toque
   habilitado (touch-action:none evita a rolagem roubar o arraste). */
.chk-drag{flex:none;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;width:24px;height:26px;color:#7d8aa0;background:#eef1f6;border:1px solid var(--line);cursor:grab;font-size:15px;line-height:1;border-radius:7px;touch-action:none;user-select:none}
.chk-drag:hover{color:#fff;background:var(--brand);border-color:var(--brand)}
.chk-drag:active{cursor:grabbing}
/* o estado "sendo arrastada" vem do compartilhado (.arr-pegando, mais abaixo) */
.chk-td-drag{width:1%;vertical-align:top;padding-top:6px!important}
.chk-td-x{white-space:nowrap}
.chk-add{display:flex;gap:6px;margin-top:2px}
.chk-new{flex:1;min-width:0;font:inherit;font-size:12.5px;border:1px dashed var(--line);border-radius:8px;padding:6px 9px;background:#fff}
.chk-addb{flex:none;font:inherit;font-size:12px;font-weight:700;border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:#fff;color:var(--brand);cursor:pointer}
.chk-addb:hover{border-color:var(--brand)}
/* checklist COM OPÇÕES = TABELA (perguntas nas linhas, opções nas colunas,
   o flag na interseção). Rola na horizontal se houver muitas colunas. */
/* overflow-y:clip (não 'auto'): rola SÓ na horizontal — assim a altura continua
   crescendo nativamente e empurra o campo de baixo, sem sobrepor nem sobrar. */
/* width:max-content → a caixa ABRAÇA a tabela (não estica full-width à toa);
   max-width:100% → se passar do modal, para na borda e ROLA na horizontal. */
.chk-tablewrap{display:block;width:max-content;max-width:100%;overflow-x:auto;overflow-y:clip;margin-top:2px;border:1px solid var(--line);border-radius:10px}
/* width:max-content → a PRÓPRIA tabela abraça o conteúdo (a coluna da pergunta não
   engole a folga); se passar do campo, o wrap (max-width:100%) rola na horizontal. */
.chk-table{border-collapse:collapse;width:max-content;max-width:none;font-size:13.5px}
/* cabeçalho herda o padrão do app (thead th: fundo --brand + texto BRANCO);
   aqui só ajustamos o alinhamento/padding das colunas de opção. */
.chk-table th{text-align:center;padding:8px 10px}
.chk-table th.chk-th-q{text-align:left}
/* colunas de OPÇÃO abraçam o rótulo (width:1% + nowrap): não esticam além do
   texto da opção — só a coluna da pergunta usa a largura que sobra. */
.chk-table th:not(.chk-th-q){width:1%;white-space:nowrap}
.chk-table td{padding:5px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.chk-table tr:last-child td{border-bottom:0}
/* pergunta: texto legível, largura pela própria pergunta (sem quebrar) */
.chk-td-q{white-space:nowrap}
.chk-table .chk-txt{width:220px;box-sizing:border-box;font-size:13.5px}
.chk-td-q .chk-q{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.chk-cell{text-align:center;width:1%;white-space:nowrap}
.chk-cell input{width:17px;height:17px;accent-color:var(--brand);cursor:pointer;margin:0}
.chk-cell input:disabled{cursor:default}
.chk-td-x{width:1%}
.chk-empty{color:var(--muted);font-size:12px;padding:8px 4px;text-align:left}

/* ===== Responsividade do cartão/modais no mobile =====================
   Fica DEPOIS das regras base de .modal-grid12/.card-secao para vencer o cascade.
   Dois eixos INDEPENDENTES, ambos por LARGURA:
   (A) BORDA vs TELA CHEIA — corte em 820px: <820px = SEM borda (tela cheia,
       fluxo único); ≥820px = COM borda (cartão flutuante, igual computador).
       Assim celular e Fold FECHADO ficam tela cheia; Fold ABERTO (~800) idem;
       tablet em pé (≥820) e tablet deitado/PC ficam com borda.
   (B) COLUNA ÚNICA — corte em 600px: celular normal e Fold FECHADO (~344px).
       Fold ABERTO / tablets (600–819) ficam MULTI-COLUNA em tela cheia.
   820px e 600px são calibráveis. */
/* (A) <820px: modal borda a borda, tela cheia, FLUXO ÚNICO (rola tudo junto) */
@media(max-width:819px){
  .modal-bg{padding:0}
  /* o modal inteiro rola de uma vez (nada fixo por dentro); momentum no iOS */
  .modal{width:100%;max-width:100%!important;height:100vh;height:100dvh;
    max-height:100vh;max-height:100dvh;border-radius:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* painel(is) lateral(is) empilham em FLUXO na ordem do DOM: formulário →
     histórico/comentários → rodapé. Vira BLOCO (sem grid) p/ tudo rolar junto. */
  .modal.modal-has-side,.modal.modal-has-sideleft{display:block!important;
    max-width:100%!important;max-height:100dvh;overflow-y:auto}
  /* o corpo NÃO é um scroll-container próprio aqui (senão "prende" o toque e o
     cartão não rola no tablet) — quem rola é o modal inteiro */
  .modal.modal-has-side>.modal-bd,.modal.modal-has-sideleft>.modal-bd{overflow:visible}
  .modal-hd{padding:14px 16px}
  .modal-bd{padding:14px 16px}
  /* rodapé NÃO fixo: flui no fim do cartão, depois de histórico/comentários */
  .modal-ft{padding:12px 16px;flex-wrap:wrap}
  /* histórico/comentários fluem naturais (sem altura fixa nem scroll próprio) */
  .modal-side,.modal-side-left{display:block;max-height:none;overflow:visible;
    border-left:none;border-right:none;border-top:1px solid var(--line)}
  .cp-body,.cp-tabbody,.rt-tab-cfg,.rt-tab-com{overflow:visible;flex:none;min-height:0}
}
/* (B) Tela estreita (celular normal + Fold fechado): formulário em COLUNA ÚNICA */
@media(max-width:600px){
  /* grade espacial vira fluxo de bloco: campos full-width na ordem do DOM (gy,gx) */
  .modal-grid12{display:block}
  .modal-grid12>.fld{grid-column:auto!important;grid-row:auto!important;margin-bottom:12px}
  /* textarea perde a altura fixa (gh*76) e ganha altura natural */
  .modal-grid12 textarea{height:auto!important;min-height:96px;resize:vertical}
  /* caixas de seção são posicionadas por grid-area e vêm antes dos campos no DOM;
     em fluxo de bloco quebrariam — some com a decoração (campos seguem legíveis) */
  .card-secao{display:none}
  /* modais genéricos (2 colunas) → 1 coluna */
  .modal-bd:not(.grid12){grid-template-columns:1fr}
  .fld.full{grid-column:auto}
}
/* ≥820px COM borda: em telas médias (ex.: tablet ~1024px) o cartão+painel (~1160px)
   não caberia — cap em 96vw p/ não estourar; acima disso usa a largura configurada. */
@media(min-width:820px) and (max-width:1220px){
  .modal.modal-has-side,.modal.modal-has-sideleft{max-width:96vw!important}
}

/* ---------------- avisos de área ---------------- */
.areanote{border-radius:12px;padding:12px 15px;font-size:12.5px;margin-top:16px}
.areanote.g{background:var(--green-soft);border:1px solid #bfe6cd;color:#1c5d34}
.areanote.a{background:var(--amber-soft);border:1px solid #f4d795;color:#7a5600}

/* ---------------- "está em uso, não dá para excluir" ----------------
   Mesma caixa para tabela, coluna e campo (0161–0163), montada por
   `App.avisoEmUso`. Mora aqui porque é um padrão de tela: quem criar a próxima
   trava USA, não redesenha uma parecida. Só aparece ao clicar em Excluir, e
   lista NOMINALMENTE quem está segurando (com botão de copiar). */
.tb-uso{margin-top:2px;padding:11px 13px;border:1px solid #f0e3bd;background:#fbf6e7;border-radius:10px;font-size:12.5px;line-height:1.6;color:#6d5411}
.tb-uso b{color:#5a4409}
.tb-uso ul{margin:6px 0 0 18px;padding:0}
.tb-uso span{display:block;margin-top:9px;color:#8a6d1a}
.tb-uso-dica{padding-top:9px;border-top:1px solid #f0e3bd}
/* O que o botão copia fica DENTRO da moldura do botão — é ela que responde
   "o que vou levar?". O `padding-right` abre a canaleta do ícone para que a
   primeira linha não corra por baixo dele. */
.tb-uso-lista{position:relative;padding:9px 46px 9px 11px;border:1px solid #ecdcb0;background:#fffdf6;border-radius:8px}
.tb-uso-cop{position:absolute;top:7px;right:7px;border-color:#e5d4a6;color:#8a6d1a}
.tb-uso-cop:hover{border-color:#b8912f;color:#5a4409;background:#fbf1d8}

/* ---------------- gráficos (Chart.js) ---------------- */
.charts-sec{margin-top:16px}
.cgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;margin-top:12px}
.ch-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.ch-card .ch-t{font-size:11.5px;font-weight:700;color:var(--ink);margin-bottom:2px}
.chartbox{position:relative;height:250px}.chartbox.sm{height:210px}
@media(max-width:1080px){.cgrid{grid-template-columns:1fr}}

/* ---------------- avatar (imagem ou iniciais) — port do AIP-IN-FN ---------------- */
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex:none;background:#eef1f6;vertical-align:middle;line-height:1}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-ini{display:none;width:100%;height:100%;align-items:center;justify-content:center;color:#fff;font-weight:800;letter-spacing:.5px}
.avatar.noimg .avatar-ini{display:flex}
/* botão "trocar imagem" sobre um avatar grande */
.avatar-edit{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:11px;font-weight:700;color:var(--brand);background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 10px;cursor:pointer}
.avatar-edit:hover{background:var(--brand-soft)}
.avatar-wrap{display:flex;align-items:center;gap:12px}
/* célula "avatar + nome" em listas (ex.: Usuários) */
.user-cell{display:flex;align-items:center;gap:10px}

/* -------- arrastar para ORDENAR (shared/arrastar.js) --------
   Vale em toda tela que reordena arrastando: organograma, unidades, cargos,
   processos, checklist do cartão. */
/* ALÇA. `touch-action:none` é o que faz o arrasto valer NO DEDO: sem ele o
   navegador entende o gesto como rolagem antes de o JavaScript ver qualquer
   coisa. A área de toque é maior que o desenho, p/ dar de pegar no celular. */
.arr-punho{flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;min-height:22px;padding:2px 4px;touch-action:none;user-select:none;
  cursor:grab;color:var(--muted);font-size:12px;letter-spacing:-2px}
.arr-punho:hover{color:var(--brand)}
.arr-punho:active{cursor:grabbing}
/* PEÇA SENDO ARRASTADA — acompanha o ponteiro (o `transform` vem do JS). Fica
   translúcida e com sombra grande, para parecer levantada da página. Sem
   `transition` no transform: o movimento tem que ser instantâneo, senão a peça
   anda atrás do dedo. */
.arr-pegando{position:relative;z-index:60;opacity:.7;cursor:grabbing;
  box-shadow:0 14px 30px rgba(10,46,110,.3);border-color:var(--brand)}
/* solto fora do grupo: desliza de volta em vez de sumir e reaparecer */
/* Numa CÉLULA de cabeçalho a translucidez lava o fundo e a peça fica BRANCA —
   o contrário de "levantada". Aqui o levantar vem do realce e da sombra. */
th.arr-pegando{opacity:1;background:var(--brand2);box-shadow:0 10px 24px rgba(10,46,110,.38)}
.arr-voltando{transition:transform .18s ease-out}
/* MARCA DE ENCAIXE: onde a peça entra se soltar agora. Presa na tela, fora da
   lista — inserir um elemento de verdade entre as peças mexeria no layout. */
.arr-marca{position:fixed;z-index:70;display:none;background:var(--brand);border-radius:3px;
  pointer-events:none;box-shadow:0 0 0 2px rgba(255,255,255,.9)}

/* ---------------- utilitários ---------------- */
.hidden{display:none !important}

/* Alteração feita PELA TABELA (edição em massa) no histórico do cartão.
   Destaque próprio porque é o único caminho que não passou pelas regras do
   fluxo — a etapa não validou transição e o campo não obedeceu ao modo da
   etapa. Quem lê o histórico meses depois precisa distinguir "seguiu o
   processo" de "foi arrumado por fora", e a diferença tem que saltar. */
.cp-item-tab{border-left:3px solid var(--amber);background:#fffdf2;
  padding-left:9px;border-radius:0 8px 8px 0}
.cp-selo-tab{display:inline-block;margin-left:7px;font-size:9.5px;font-weight:800;
  letter-spacing:.4px;text-transform:uppercase;color:#7a5a10;background:#fdf3d7;
  border:1px solid #eadfae;border-radius:5px;padding:1px 6px;white-space:nowrap;vertical-align:1px}

/* ---- CONFIRMAÇÃO DE ALTERAÇÃO FORA DO FLUXO (App.confirmarEdicaoFora) ----
   Compartilhada por duas telas: a edição em massa na tabela de processo e o
   cartão aberto pelo ✎ dela. A caixa não pergunta "tem certeza?" — ela MOSTRA o
   que vai acontecer, cartão por cartão, com o valor de antes e o de depois.
   Caixa que só pede confirmação sem dizer do quê ensina a clicar em "sim" no
   automático, que é o contrário de conferir. */
.tb-cf-tot{font-size:12px;font-weight:800;color:var(--brand);margin-bottom:8px}
.tb-cf-lista{max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.tb-cf-cart{border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:9px;padding:8px 11px;background:#fff}
.tb-cf-cod{font-size:11.5px;font-weight:800;letter-spacing:.3px;color:var(--brand)}
.tb-cf-cart ul{margin:5px 0 0;padding-left:18px}
.tb-cf-cart li{font-size:12.5px;line-height:1.55;color:var(--ink)}
.tb-cf-etapa{color:#7a5a10}
.tb-cf-aviso{font-size:12.5px;line-height:1.55;color:#7a5a10;background:#fdf3d7;border:1px solid #eadfae;
  border-radius:9px;padding:9px 12px;margin-bottom:10px}
/* "e editou": diz, no cabeçalho do registro, que a mesma gravação mexeu na
   etapa E em campos — o detalhe vem logo abaixo. */
.cp-tb-e{font-size:11px;font-weight:700;color:var(--muted)}

/* ---------------- EDITOR DE LISTA DE OPÇÕES (App.editorOpcoes) ----------------
   Serve ao editor de campo do processo (select de lista fixa, respostas do
   checklist) e à configuração de coluna de tabela. Morava em processo.css
   enquanto era de uma tela só; virou compartilhado junto com a função. */
.ck-oe-lbl{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;display:block;margin-bottom:6px}
.ck-oe{display:flex;flex-direction:column;gap:6px}
/* fundo próprio: enquanto a linha flutua no arrasto ela sai da pilha, e sem
   fundo se veria o que está atrás dela */
.ck-oe-row{display:flex;align-items:center;gap:8px;background:#fff;border-radius:8px}
.ck-oe-inp{flex:1;min-width:0;font:inherit;font-size:13px;border:1px solid var(--line);border-radius:8px;padding:7px 9px;background:var(--bg)}
.ck-oe-x{flex:none;background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:0 4px}
.ck-oe-x:hover{color:#c0392b}
.ck-oe-add{display:flex;gap:6px;margin-top:2px}
.ck-oe-new{flex:1;min-width:0;font:inherit;font-size:12.5px;border:1px dashed var(--line);border-radius:8px;padding:7px 9px;background:#fff}