/* =======================================================================
   GESTÃO DE USUÁRIOS — abas, permissões por módulo (Visão A), estados de
   célula (efetiva × origem), níveis da matriz e barra de salvar.
   Só tokens do Design System (styles.css); mobile-first, sem rolagem
   horizontal a 375 px (a tabela vira lista de linhas no celular).
   ======================================================================= */

/* ---- abas da Gestão de Usuários ---- */
.gu-abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; }
.gu-abas .btn { min-height: 38px; }

/* ---- legenda (o que cada marca quer dizer) ---- */
.gu-legenda { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: .8rem; color: var(--text-secondary); margin: 6px 0 10px; }
.gu-legenda span { display: inline-flex; align-items: center; gap: 6px; }

/* ---- chip de ORIGEM da permissão ---- */
.gu-ori { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-pill); font-size: .66rem; font-weight: 700; letter-spacing: .02em; line-height: 1; border: 1px solid transparent; }
.gu-ori-perfil     { background: var(--info-bg);    color: var(--info-fg);    border-color: var(--info); }
.gu-ori-individual { background: var(--success-bg); color: var(--success-fg); border-color: var(--success); }
.gu-ori-restrita   { background: var(--danger-bg);  color: var(--danger-fg);  border-color: var(--danger); }
.gu-ori-admin      { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-soft-border); }

/* ---- nível resumido de um módulo (Visão A e Matriz) ---- */
.gu-nivel { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--radius-pill);
  font-size: .74rem; font-weight: 650; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); white-space: nowrap; }
.gu-nivel-completo { background: var(--success-bg); color: var(--success-fg); border-color: var(--success); }
.gu-nivel-edicao   { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-soft-border); }
.gu-nivel-consulta { background: var(--info-bg); color: var(--info-fg); border-color: var(--info); }
.gu-nivel-negado   { background: var(--surface-2); color: var(--text-muted); }

/* ---- módulo (acordeão) ---- */
.gu-mod { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 10px; background: var(--surface); overflow: hidden; }
.gu-mod > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 11px 14px; background: var(--surface-2); }
.gu-mod > summary::-webkit-details-marker { display: none; }
.gu-mod > summary::before { content: '▸'; color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-out); }
.gu-mod[open] > summary::before { transform: rotate(90deg); }
.gu-mod-nome { font-family: var(--font-display); font-weight: var(--fw-section); font-size: 1rem; color: var(--text-primary); }
.gu-mod-cont { font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.gu-mod-acoes { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.gu-mod-corpo { padding: 6px 10px 10px; }

/* ---- tabela funcionalidade × ação ---- */
.gu-ptab { width: 100%; min-width: 0; border-collapse: collapse; font-size: .86rem; }   /* anula o "table { min-width: 480px }" global */
.gu-ptab th { font-size: .72rem; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted);
  font-weight: 650; padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--border); }
.gu-ptab th:first-child { text-align: left; }
.gu-ptab td { padding: 5px 4px; border-bottom: 1px solid var(--grid-line); text-align: center; vertical-align: middle; }
.gu-ptab td:first-child { text-align: left; color: var(--text-primary); font-weight: 600; }
.gu-ptab tr:last-child td { border-bottom: 0; }
.gu-ptab td.gu-vazio { color: var(--text-disabled); }
.gu-func-sub { display: block; font-weight: 400; font-size: .76rem; color: var(--text-muted); }

/* ---- célula clicável (estado efetivo + origem) ---- */
.gu-cel { position: relative; display: inline-flex; align-items: center; gap: 5px; min-width: 52px; min-height: 34px; padding: 4px 8px;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--field-bg); color: var(--text-muted);
  font: inherit; font-weight: 700; cursor: pointer; justify-content: center; }
.gu-cel:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-hover); }
.gu-cel:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.gu-cel.on { color: var(--success-fg); background: var(--success-bg); border-color: var(--success); }
.gu-cel.off { color: var(--text-muted); }
.gu-cel.pend { border: 2px dashed var(--accent); }
.gu-cel:disabled { cursor: not-allowed; opacity: .72; }
.gu-cel .gu-ico { font-size: .95rem; line-height: 1; }
.gu-acao-rot { display: none; font-size: .7rem; font-weight: 600; color: var(--text-secondary); }

/* celular: cada funcionalidade vira um bloco; as ações viram uma fileira de botões rotulados */
@media (max-width: 640px) {
  .gu-ptab thead { display: none; }
  .gu-ptab, .gu-ptab tbody, .gu-ptab tr, .gu-ptab td { display: block; width: 100%; }
  .gu-ptab tr { padding: 8px 2px; border-bottom: 1px solid var(--grid-line); }
  .gu-ptab td { border: 0; padding: 2px 0; text-align: left; }
  .gu-ptab td:first-child { margin-bottom: 4px; }
  .gu-ptab td:not(:first-child) { display: inline-block; width: auto; margin: 2px 6px 2px 0; }
  .gu-ptab td.gu-vazio { display: none; }
  .gu-acao-rot { display: inline; }
}

/* ---- barra de ferramentas e filtros ---- */
.gu-ferr { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 12px; }
.gu-ferr input[type="search"] { flex: 1 1 220px; min-width: 0; }
.gu-ferr select { flex: 0 1 200px; min-width: 0; }

/* ---- situação de segurança da conta ---- */
.gu-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.gu-seg-item { background: var(--surface-2); box-shadow: var(--well); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; }
.gu-seg-item small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); font-weight: 650; }
.gu-seg-item b { display: block; margin-top: 3px; color: var(--text-primary); font-weight: 650; }
.gu-seg-item.alerta { border-color: var(--warning); background: var(--warning-bg); }
.gu-seg-item.alerta b { color: var(--warning-fg); }

/* ---- resumo antes de salvar ---- */
.gu-resumo { margin: 8px 0 4px; padding: 0; list-style: none; max-height: 46vh; overflow: auto; }
.gu-resumo li { padding: 7px 9px; border-bottom: 1px solid var(--grid-line); font-size: .88rem; }
.gu-resumo li.critica { background: var(--warning-bg); color: var(--warning-fg); border-radius: var(--radius-sm); }
.gu-resumo .gu-de-para { color: var(--text-muted); font-size: .8rem; }

/* ---- barra fixa "há alterações não salvas" ---- */
.gu-salvar-barra { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 14px -2px 40px; padding: 10px 12px; background: var(--plate-sheen), var(--card); border: 1px solid var(--accent-soft-border);
  border-radius: var(--shape-md); corner-shape: var(--shape-corners); box-shadow: var(--edge-light), var(--elev-2); }
.gu-salvar-barra .gu-pend-txt { flex: 1 1 180px; font-weight: 600; color: var(--text-primary); }
.gu-salvo { font-size: .8rem; color: var(--success-fg); }


/* =======================================================================
   VISÃO B ("Quais usuários têm esta permissão?"), MATRIZ DE ACESSOS e PERFIS
   Só tokens do Design System (styles.css) — nenhum hex. MOBILE-FIRST: a base é o
   celular (cada linha da tabela vira um cartão — NADA de rolagem horizontal a
   375 px); a tabela volta a partir de 901px (Visão B) e de 1241px (Matriz, que tem uma coluna por módulo).
   ======================================================================= */

/* ---- ajudantes comuns às 3 visões ---- */
.gu-u-nome { font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
.gu-u-mail, .gu-u-perfil { display: block; margin-top: 1px; font-size: .78rem; font-weight: 400; color: var(--text-muted); overflow-wrap: anywhere; }
.gu-u-perfil { color: var(--text-secondary); }
.gu-nowrap { white-space: nowrap; }
.gu-vb .gu-ferr select, .gu-mx .gu-ferr select { flex: 1 1 170px; }   /* o rótulo cabe inteiro; cresce para preencher a linha */
.gu-pag { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px; font-size: .84rem; color: var(--text-secondary); }
.gu-pag b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.gu-pag-bt { display: inline-flex; align-items: center; gap: 8px; }

/* ---- tabela → cartões (base = celular) ---- */
.gu-tab-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gu-tab { display: block; width: 100%; min-width: 0; font-size: .88rem; }   /* min-width: 0 anula o "table { min-width: 480px }" global */
.gu-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gu-tab tbody { display: block; }
.gu-tab tbody tr { display: block; margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.gu-tab tbody td { display: block; padding: 0; border: 0; }

/* ---- Visão B: seletor, resumo e lote ---- */
.gu-vb-sel { display: grid; grid-template-columns: 1fr; gap: 0 12px; margin: 8px 0 4px; }
.gu-vb-sel label.field { margin-bottom: 8px; }
.gu-vb-resumo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin: 12px 0 6px; }
.gu-vb-cont { font-size: 1rem; color: var(--text-secondary); }
.gu-vb-cont b { font-family: var(--font-display); font-size: 1.45rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.gu-vb-perm { font-size: .86rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.gu-vb-perm b { color: var(--text-primary); }
.gu-vb-lote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 10px; padding: 8px 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.gu-vb-lote .btn { min-height: 38px; }
.gu-vb-nsel { flex: 1 1 100%; font-size: .86rem; color: var(--text-secondary); }
.gu-vb-nsel b { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* linha da Visão B (cartão no celular): marcar · usuário · perfil · obras · permissão · ação */
.gu-vb-tab tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.gu-vb-tab tbody td { flex: 1 1 100%; min-width: 0; }
.gu-vb-tab tbody td.gu-c-sel { flex: 0 0 auto; }
.gu-vb-tab tbody td.gu-c-user { flex: 1 1 0; }
.gu-vb-tab .gu-c-sel input { width: 22px; height: 22px; margin: 0; }
.gu-vb-tab td[data-rot]::before { content: attr(data-rot) ': '; font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); }
.gu-vb-tab .gu-c-acao { margin-top: 4px; }
.gu-vb-tab .gu-c-acao .btn { width: 100%; min-height: 40px; }
.gu-vb-motivo { display: block; margin-top: 4px; font-size: .76rem; color: var(--text-muted); }
.gu-vb-ori { margin-left: 6px; font-size: .8rem; color: var(--text-secondary); }
.gu-vb-sim { background: var(--success-bg); color: var(--success-fg); }
.gu-vb-nao { background: var(--danger-bg); color: var(--danger-fg); }

/* ---- Matriz: célula por módulo (selos que quebram linha no celular) ---- */
#gu-mx-res { scroll-margin-top: calc(var(--topbar-h) + 8px); }
.gu-mx-tab tbody td.gu-mx-user { margin-bottom: 8px; }
.gu-mx-tab tbody td.gu-mx-m { display: inline-block; vertical-align: top; max-width: 100%; margin: 0 6px 6px 0; }
.gu-mx-cel { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 104px; max-width: 100%; padding: 6px 9px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--text-primary);
  font: inherit; text-align: left; cursor: pointer; }
.gu-mx-cel:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.gu-mx-cel:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.gu-mx-mod { display: block; font-size: .72rem; font-weight: 600; color: var(--text-secondary); overflow-wrap: anywhere; }
.gu-mx-cont { font-size: .74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* detalhe SÓ-LEITURA (modal da Matriz): funcionalidade + as ações como chips ✓/— com a origem */
.gu-ro-func { padding: 8px 0; border-bottom: 1px solid var(--grid-line); }
.gu-ro-func:last-child { border-bottom: 0; }
.gu-ro-nome { margin-bottom: 5px; font-weight: 650; color: var(--text-primary); }
.gu-ro-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.gu-cel.gu-cel-ro { cursor: default; min-height: 30px; }
.gu-cel.gu-cel-ro.on:hover { border-color: var(--success); background: var(--success-bg); }
.gu-cel.gu-cel-ro.off:hover { border-color: var(--border); background: var(--field-bg); }
.gu-cel-ro .gu-acao-rot { display: inline; }
.gu-cel.gu-cel-mini { min-width: 28px; min-height: 20px; padding: 0 6px; cursor: default; }

/* ---- Perfis: cartões e editor ---- */
.gu-pf-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.gu-pf-lista { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
.gu-pf-cartao { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--plate-sheen), var(--card);
  border: 1px solid var(--border); border-radius: var(--shape-md); corner-shape: var(--shape-corners); box-shadow: var(--edge-light), var(--elev-1); }
.gu-pf-nome { font-family: var(--font-display); font-weight: var(--fw-section); font-size: 1.05rem; color: var(--text-primary); overflow-wrap: anywhere; }
.gu-pf-desc { flex: 1 1 auto; font-size: .86rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.gu-pf-num { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; color: var(--text-muted); }
.gu-pf-num b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.gu-pf-npend { padding: 1px 8px; border: 1px dashed var(--accent); border-radius: var(--radius-pill); background: var(--accent-soft);
  font-size: .74rem; font-weight: 650; color: var(--accent-strong); white-space: nowrap; }
.gu-pf-previa { margin: 12px 0 4px; padding: 10px 12px; border: 1px solid var(--accent-soft-border); border-radius: var(--radius-sm);
  background: var(--accent-soft); font-size: .88rem; color: var(--text-primary); }
.gu-pf-previa.vazia { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
.gu-pf-previa p { margin: 8px 0 0; }
.gu-pf-ganha, .gu-pf-perde { margin: 8px 0 0; padding: 7px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); }
.gu-pf-ganha { background: var(--success-bg); color: var(--success-fg); border-color: var(--success); }
.gu-pf-perde { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger); }

/* ---- telas médias e largas ---- */
@media (min-width: 641px) {
  .gu-vb-sel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gu-vb-nsel { flex: 1 1 auto; }
  .gu-pf-lista { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
/* Visão B: a tabela volta a partir de 901px (abaixo, cartões). Se faltar largura, rola SÓ o quadro da tabela — nunca a página. */
@media (min-width: 901px) {
  .gu-vb-tab { display: table; border-collapse: collapse; }
  .gu-vb-tab thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: table-header-group; }
  .gu-vb-tab tbody { display: table-row-group; }
  .gu-vb-tab thead tr, .gu-vb-tab tbody tr { display: table-row; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .gu-vb-tab th, .gu-vb-tab tbody td { display: table-cell; padding: 8px; border-bottom: 1px solid var(--grid-line); vertical-align: middle; }
  .gu-vb-tab th { background: var(--surface-2); border-bottom-color: var(--border); color: var(--text-muted); font-size: .72rem; font-weight: 650;
    text-align: left; text-transform: uppercase; letter-spacing: var(--tracking-caps); vertical-align: bottom; }
  .gu-vb-tab tbody tr:last-child td { border-bottom: 0; }
  .gu-vb-tab tbody tr:hover > td { background: var(--row-hover); }
  .gu-vb-tab tbody tr:hover > td:first-child { box-shadow: inset 2px 0 0 var(--accent); }   /* cursor de leitura do Design System (como o .table-wrap) */
  .gu-vb-tab td[data-rot]::before { content: none; }
  .gu-vb-tab .gu-c-sel { width: 36px; }
  .gu-vb-tab .gu-c-acao { width: 112px; margin-top: 0; white-space: nowrap; }
  .gu-vb-tab .gu-c-acao .btn { width: auto; min-height: 0; }
  .gu-vb-tab .gu-u-mail { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gu-vb-motivo { display: none; }
}
/* Matriz: 12 módulos pedem largura — a tabela só volta a partir de 1241px; abaixo disso, cartões com os selos dos módulos. */
@media (min-width: 1241px) {
  .gu-mx-tab { display: table; border-collapse: collapse; }
  .gu-mx-tab thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: table-header-group; }
  .gu-mx-tab tbody { display: table-row-group; }
  .gu-mx-tab thead tr, .gu-mx-tab tbody tr { display: table-row; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .gu-mx-tab th, .gu-mx-tab tbody td { display: table-cell; padding: 8px 3px; border-bottom: 1px solid var(--grid-line); vertical-align: middle; }
  .gu-mx-tab th { background: var(--surface-2); border-bottom-color: var(--border); color: var(--text-muted); font-size: .62rem; font-weight: 650;
    letter-spacing: .02em; text-align: center; text-transform: uppercase; vertical-align: bottom; }
  .gu-mx-tab th.gu-mx-user { padding-left: 8px; text-align: left; letter-spacing: var(--tracking-caps); }
  .gu-mx-tab tbody tr:last-child td { border-bottom: 0; }
  .gu-mx-tab tbody tr:hover > td { background: var(--row-hover); }
  .gu-mx-tab tbody tr:hover > td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
  .gu-mx-tab tbody td.gu-mx-user { min-width: 170px; max-width: 200px; margin: 0; padding-left: 8px; }
  .gu-mx-tab tbody td.gu-mx-m { display: table-cell; margin: 0; text-align: center; }   /* vence o inline-block da base (mesma especificidade, vem depois) */
  .gu-mx-tab .gu-u-mail, .gu-mx-tab .gu-u-perfil { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gu-mx-mod { display: none; }
  .gu-mx-cel { align-items: center; width: 100%; min-width: 0; padding: 4px 3px; }
  .gu-mx-cel .gu-nivel { padding: 2px 6px; font-size: .7rem; line-height: 1.15; text-align: center; white-space: normal; }
}