/* Tela Controle de acesso — usa o design system (tabelas, modal, .fld).
   Perfis nomeados + permissões granulares (operacional/admin/acessos). */
.acc-help{font-size:11.5px;color:var(--muted);margin:8px 0 2px;line-height:1.5}
.muted{color:var(--muted)}
.sap{font-size:11px;color:var(--muted);margin-top:2px}

/* lista de permissões — um checkbox por linha, com descrição embaixo */
.acc-perms{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.acc-perm{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:start;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;margin:0}
.acc-perm:hover{border-color:var(--brand)}
.acc-perm>input{grid-column:1;grid-row:1/3;align-self:center;margin:0}
/* acesso granular por processo (blocos + subtítulo Quadro) */
.acc-sub{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);margin:8px 2px 2px}
.acc-proc{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-top:8px;background:#fbfcfe}
.acc-proc-feats{margin-top:6px;display:flex;flex-direction:column;gap:6px;padding-left:8px;border-left:2px solid var(--line)}
.acc-proc-feats select,.acc-perm select{font:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:#fff}
/* tabela de acesso de SISTEMA (por usuário, agrupada por área).
   Moldura, cantos e o visual do cabeçalho vêm do padrão (components.css) —
   aqui só o que é próprio: muitas colunas estreitas, então padding menor e
   conteúdo centralizado. */
.acc-systab thead th{padding:6px 8px;text-align:center}
.acc-systab thead th:first-child{text-align:left}
.acc-systab td{padding:5px 8px;vertical-align:middle}
/* centralizar é a regra; quem foge dela se declara (o ✎ e a célula do usuário).
   Antes isto era "todas menos a primeira" — e a primeira virou o botão. */
.acc-systab td{text-align:center}
.acc-systab .acc-td-user{text-align:left}
/* coluna do ✎: estreita e colada na esquerda, para não empurrar o nome */
.acc-systab .acc-th-ed,.acc-systab .acc-td-ed{width:1%;white-space:nowrap;padding-left:8px;padding-right:4px}
.acc-systab .acc-grp td{background:#eef1f6;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);text-align:left;cursor:pointer;user-select:none}
.acc-systab .acc-grp:hover td{background:#e4e9f2;color:var(--brand)}
/* níveis de agrupamento: cada nível recua e clareia um pouco */
.acc-systab .acc-grp-l1 td{padding-left:22px;background:#f2f5f9;font-size:10.5px;color:#5a6b86}
.acc-systab .acc-grp-l2 td{padding-left:38px;background:#f6f8fb;font-size:10px;color:#7a8aa6}
.acc-systab .acc-grp-l3 td{padding-left:54px;background:#f9fafc;font-size:10px;color:#8a94a6}
.acc-grp-cr{display:inline-block;width:12px;font-size:10px;color:var(--muted)}
.acc-grp-n{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:800;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:20px;padding:0 8px;text-transform:none;letter-spacing:0}
/* barra de busca + botão de filtros/agrupamento (modelo de Rotinas/Quadro) */
.acc-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 12px}
.acc-busca{flex:1;min-width:200px;max-width:420px;font:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:#fff;color:var(--ink)}
.acc-busca:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px rgba(10,46,110,.12)}
.acc-glevels{display:flex;flex-direction:column;gap:5px}
.acc-glevel-row{display:flex;align-items:center;gap:6px}
.acc-glevel-arw{color:var(--muted);flex:none;width:12px;text-align:center}
#acc-pop .acc-glevel{flex:1;min-width:0;width:auto;font:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:8px;padding:7px 9px;background:#fff;color:var(--ink)}
.acc-fld{display:flex;align-items:center;gap:8px;padding:3px 0}
.acc-fld-lbl{font-size:12.5px;font-weight:600;color:var(--ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-fld-sel{flex:none;max-width:170px;font:inherit;font-size:12px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:#fff;color:var(--ink)}
.acc-fld-sp{flex:none}
.acc-fld-nosort{flex:none;width:28px;margin-right:4px}
.acc-usys{font:inherit;font-size:12px;border:1px solid var(--line);border-radius:7px;padding:3px 6px;background:#fff;color:var(--ink)}
.acc-systab .user-cell .nome{font-weight:600}
/* coluna "Avisos": só leitura, três estados (recebe / desligado / sem telefone) */
/* o tamanho dos três estados sai daqui (o width/height do svg é só fallback) */
.wa-st{font-size:17px;font-weight:800;line-height:1;cursor:default}
.wa-on{color:var(--amber)}
.wa-on svg{display:inline-block;width:18px;height:18px;vertical-align:-4px}
.wa-off{color:var(--red);opacity:.6}
.wa-none{color:var(--line)}
.acc-perm>b{grid-column:2;grid-row:1;font-size:13px}
.acc-perm>.acc-help{grid-column:2;grid-row:2;margin:0}

/* badge de pendências na sub-aba */
.reqbadge{display:inline-block;background:var(--red);color:#fff;font-size:10px;font-weight:800;border-radius:99px;padding:1px 7px;margin-left:6px}
.sub-tab.on .reqbadge{background:#fff;color:var(--brand)}

/* fila de solicitações */
.req-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.req-card{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);flex-wrap:wrap}
.req-id{flex:1;min-width:180px}
.req-card .btn-aprovar,.req-card .btn-rejeitar{white-space:nowrap;border:0;border-radius:8px;padding:8px 12px;font-size:12.5px;font-weight:700;cursor:pointer}
.req-card .btn-aprovar{background:var(--brand,#0a2e6e);color:#fff}
.req-card .btn-rejeitar{background:#fee2e2;color:#b91c1c}
.acc-histh{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);margin:18px 0 8px}
.req-hist{display:flex;align-items:center;gap:10px;padding:6px 4px;border-bottom:1px solid var(--bg);font-size:12.5px;flex-wrap:wrap}
.req-hist .nome{flex:none}
.pend-ok{padding:24px 14px;text-align:center;color:#157a39;font-weight:700;font-size:13px}

/* ---- Permissão de TABELAS: um portão e duas marcas que se somam ----
   As outras permissões são escada de três degraus (nenhum/ver/editar) e cabem
   num select. Esta não: editar LINHA e editar COLUNA valem juntas ou uma sem a
   outra, e escada não representa "os dois". Então o select vira só o portão e
   cada edição ganha a sua marca ao lado — o mesmo desenho no modal e na grade,
   para as duas portas dizerem a mesma coisa. */
.acc-perm.acc-tab{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;cursor:default}
.acc-tab-ck,.acc-tabck{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink);cursor:pointer;white-space:nowrap;margin:0}
.acc-tab-ck>input,.acc-tabck>input{margin:0}
/* na GRADE de usuários a célula é estreita: os três controles empilham */
.acc-tabcell{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left}
.acc-tabcell select{font:inherit;font-size:12px;border:1px solid var(--line);border-radius:7px;padding:3px 6px;background:#fff;color:var(--ink)}
.acc-tabcell .acc-tabck{font-size:11px;color:var(--muted)}
/* na lente por-usuário as marcas ficam recuadas sob o nível de "Dados",
   para se lerem como detalhe dele e não como permissão irmã */
.acc-perm.acc-tabsub{display:flex;flex-wrap:wrap;gap:6px 14px;cursor:default;margin-left:14px;padding:6px 10px;background:#fbfcfe}