/* Módulo Permissões (frente ui-pessoas): resumo, grupos, matriz (SfTreeGrid), membros. Usa também utilizadores.css. */

/* ── Resumo ── */
.pm-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.pm-numero { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra); }
.pm-numero strong { display: block; font-size: 22px; font-weight: 750; line-height: 1.1; letter-spacing: -.02em; }
.pm-numero small { color: var(--texto-3); font-size: 12.5px; }
.pm-numero-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; }
.pm-numero-icone.azul { background: var(--azul-suave); color: var(--azul-texto); }
.pm-numero-icone.verde { background: var(--verde-suave); color: var(--verde-texto); }
.pm-numero-icone.roxo { background: var(--roxo-suave); color: var(--roxo-texto); }
.pm-numero-icone.laranja { background: var(--laranja-suave); color: var(--laranja-texto); }
.pm-numero-icone.cinza { background: var(--superficie-2); color: var(--texto-2); }

/* ── Separadores da página ── */
.pm-separadores { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid var(--borda); }
.pm-separadores button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent;
  background: transparent; color: var(--texto-2); font: 600 14px var(--fonte); cursor: pointer; margin-bottom: -1px; }
.pm-separadores button:hover { color: var(--texto); }
.pm-separadores button.ativo { color: var(--texto); border-bottom-color: var(--acento); }
.pm-esqueleto { display: flex; flex-direction: column; gap: 16px; padding: 22px 18px; }

/* ── Grelha de grupos ── */
.pm-grupo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pm-grupo.inativo { opacity: .7; }
.pm-grupo-icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--azul-suave); color: var(--azul-texto); flex-shrink: 0; }
.pm-grupo-icone.admin { background: var(--roxo-suave); color: var(--roxo-texto); }
.pm-grupo-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.pm-grupo-texto small { color: var(--texto-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.pm-grupo-nome { display: flex; align-items: center; gap: 8px; min-width: 0; }
a.ut-nome:hover { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.pm-tag { padding: 1px 6px; border-radius: 6px; background: var(--superficie-3); color: var(--texto-2); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.pm-membros { font-weight: 650; font-variant-numeric: tabular-nums; }
.pm-medidor { display: grid; gap: 5px; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pm-medidor small { color: var(--texto-3); font-weight: 500; }
.pm-medidor-pista { height: 5px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
.pm-medidor-pista > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primario), var(--acento)); }
.pm-seta { display: inline-grid; place-items: center; color: var(--texto-3); }
.pm-opcao { display: flex; align-items: center; gap: 10px; padding: 6px 2px; }
.pm-opcao > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.pm-opcao small { color: var(--texto-3); font-size: 12px; }

/* ── Ficha do grupo ── */
.pm-ficha { display: flex; flex-direction: column; gap: 16px; }
.pm-dados { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.4fr) auto; gap: 16px 18px; align-items: start; }
.pm-dados .campo { display: flex; flex-direction: column; gap: 6px; }
.pm-dados .campo > span:first-child { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.pm-radio label { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 8px; color: var(--texto-2); font: 600 13px var(--fonte); cursor: pointer; }
.pm-radio label.ativo { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.pm-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pm-radio label:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 1px; }
.pm-radio label:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.pm-matriz-cartao { padding: 18px 18px 8px; }
.pm-matriz-topo { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.pm-matriz-topo > div:first-child { flex: 1; min-width: 240px; }
.pm-matriz-topo h2 { font-size: 16px; }
.pm-matriz-topo p { margin: 2px 0 0; }
.pm-contador { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pm-contador small { font-size: 13px; color: var(--texto-3); font-weight: 600; }
.pm-procura { flex: 0 1 320px; min-width: 220px; }
.pm-aviso { margin-bottom: 12px; }
.pm-link { color: var(--acento); font-weight: 600; }
.pm-link:hover { text-decoration: underline; }
.pm-link-botao { margin-left: 6px; padding: 0; border: 0; background: none; color: var(--texto-3); font: 600 12.5px var(--fonte); text-decoration: underline; cursor: pointer; }
.pm-link-botao:hover { color: var(--acento); }

/* ── Matriz ── */
.matriz { display: flex; flex-direction: column; gap: 14px; }
.matriz-gerais { display: flex; flex-wrap: wrap; gap: 10px; }
.matriz-interruptor { display: flex; align-items: center; gap: 14px; flex: 1 1 360px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px;
  background: var(--superficie-2); color: var(--texto); text-align: left; cursor: pointer; font: inherit; transition: border-color .15s, background .15s; }
.matriz-interruptor:hover:not(:disabled) { border-color: var(--borda-forte); }
.matriz-interruptor.ligado { border-color: color-mix(in srgb, var(--acento) 55%, var(--borda)); background: var(--acento-suave); }
.matriz-interruptor:disabled { cursor: default; }
.matriz-interruptor-pista { position: relative; flex-shrink: 0; width: 40px; height: 22px; border-radius: 999px; background: var(--borda-forte); transition: background .15s; }
.matriz-interruptor-pista > span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.matriz-interruptor.ligado .matriz-interruptor-pista { background: var(--primario); }
html[data-tema="dark"] .matriz-interruptor.ligado .matriz-interruptor-pista { background: var(--acento); }
.matriz-interruptor.ligado .matriz-interruptor-pista > span { transform: translateX(18px); }
.matriz-interruptor-texto { display: flex; flex-direction: column; line-height: 1.35; }
.matriz-interruptor-texto small { color: var(--texto-3); font-size: 12px; }

.matriz-arvore.e-treegrid, .matriz-arvore .e-grid { border: 1px solid var(--borda) !important; border-radius: 12px; overflow: hidden; background: var(--superficie); }
.matriz-arvore .e-gridheader, .matriz-arvore .e-headercell { background: var(--superficie-2) !important; }
.matriz-arvore .e-headercell .e-headertext { font-weight: 650; color: var(--texto-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.matriz-arvore .e-rowcell { border-color: var(--borda) !important; color: var(--texto); }
.matriz-arvore .e-row { background: var(--superficie); }
.matriz-arvore .e-row:has(.matriz-modulo.area) .e-rowcell { background: var(--superficie-2) !important; }
.matriz-arvore .e-row:hover .e-rowcell { background: color-mix(in srgb, var(--acento) 6%, var(--superficie)) !important; }
.matriz-arvore .e-treegridexpand, .matriz-arvore .e-treegridcollapse { color: var(--texto-3); }
.matriz-modulo { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.matriz-modulo.area { font-weight: 700; color: var(--texto); }
.matriz-modulo.area .icone { color: var(--acento); margin: 0 6px 0 2px; }
.matriz-modulo-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matriz-contagem { padding: 0 6px; border-radius: 999px; background: var(--superficie-3); color: var(--texto-2); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.matriz-contagem.cheia { background: var(--verde-suave); color: var(--verde-texto); }
.matriz-contagem.vazia { opacity: .7; }
.matriz-linha-tudo { padding: 0 4px; border: 0; background: none; color: var(--texto-3); font: 600 11.5px var(--fonte); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; opacity: 0; }
.matriz-arvore .e-row:hover .matriz-linha-tudo, .matriz-linha-tudo:focus-visible { opacity: 1; }
.matriz-linha-tudo:hover { color: var(--acento); }
.matriz-cab { display: inline-flex; align-items: center; gap: 6px; font: 650 12px var(--fonte); text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); }
.matriz-cab.botao { padding: 4px 8px; border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; }
.matriz-cab.botao:hover { border-color: var(--borda); background: var(--superficie); color: var(--texto); }

/* Caixa (role=checkbox): vazia / sim / parte; herdada = do grupo */
.matriz-caixa { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 2px solid var(--borda-forte); border-radius: 6px;
  background: var(--superficie); cursor: pointer; transition: background .12s, border-color .12s, transform .08s; vertical-align: middle; }
.matriz-caixa:hover:not(:disabled) { border-color: var(--acento); }
.matriz-caixa:active:not(:disabled) { transform: scale(.92); }
.matriz-caixa.sim, .matriz-caixa.parte { background: var(--primario); border-color: var(--primario); }
html[data-tema="dark"] .matriz-caixa.sim, html[data-tema="dark"] .matriz-caixa.parte { background: var(--acento); border-color: var(--acento); }
.matriz-caixa.sim::after { content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
html[data-tema="dark"] .matriz-caixa.sim::after { border-color: #0b1220; }
.matriz-caixa.parte::after { content: ""; width: 10px; height: 2.4px; border-radius: 2px; background: #fff; }
html[data-tema="dark"] .matriz-caixa.parte::after { background: #0b1220; }
.matriz-caixa.herdada { background: var(--superficie-3) !important; border-color: var(--borda-forte) !important; }
.matriz-caixa.herdada::after { border-color: var(--texto-2) !important; }
.matriz-caixa:disabled { cursor: not-allowed; }
.matriz.so-leitura .matriz-caixa:disabled:not(.sim):not(.parte) { opacity: .5; }
.matriz-caixa.area { width: 20px; height: 20px; }
.matriz-caixa.mini { width: 16px; height: 16px; border-width: 1.5px; border-radius: 5px; cursor: inherit; }
.matriz-caixa.mini.sim::after { width: 4px; height: 8px; border-width: 0 2px 2px 0; }
.matriz-caixa.mini.parte::after { width: 7px; height: 2px; }
.matriz-na { color: var(--texto-3); }
.matriz-extras { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.matriz-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 7px; border: 1px solid var(--borda); border-radius: 999px;
  background: var(--superficie); color: var(--texto-2); font: 600 12px var(--fonte); cursor: pointer; }
.matriz-chip:hover:not(:disabled) { border-color: var(--acento); color: var(--texto); }
.matriz-chip.sim { border-color: color-mix(in srgb, var(--acento) 55%, var(--borda)); background: var(--acento-suave); color: var(--texto); }
.matriz-chip.herdada { border-style: dashed; }
.matriz-chip:disabled { cursor: not-allowed; }
.matriz-legenda { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--texto-3); font-size: 12.5px; }
.matriz-legenda .matriz-caixa { margin-left: 10px; }

/* ── Membros ── */
.pm-membros-cartao { padding: 8px 8px; }
.pm-lista-membros { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; margin: 0; padding: 8px; list-style: none; }
.pm-lista-membros li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie-2); min-width: 0; }
.pm-lista-membros .chip { margin-left: auto; }
.pm-transferencia { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pm-coluna { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie-2); }
.pm-coluna.destino { border-color: color-mix(in srgb, var(--acento) 45%, var(--borda)); }
.pm-coluna header { display: flex; align-items: center; gap: 8px; }
.pm-coluna h3 { font-size: 14px; }
.pm-coluna .pesquisa-local { min-width: 0; flex: none; background: var(--superficie); }
.pm-coluna ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; height: min(48vh, 420px); overflow-y: auto; }
.pm-coluna li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; min-width: 0; }
.pm-coluna li:hover { background: var(--superficie); }
.pm-coluna li.ocupado { opacity: .62; }
.pm-coluna li.a-mover { opacity: .45; }
.pm-coluna li .ut-pessoa-texto { flex: 1; }
.pm-mover { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--borda); border-radius: 9px; background: var(--superficie);
  color: var(--acento); cursor: pointer; }
.pm-mover:hover:not(:disabled) { background: var(--acento-suave); border-color: var(--acento); }
.pm-mover.remover { color: var(--vermelho-texto); }
.pm-mover.remover:hover:not(:disabled) { background: var(--vermelho-suave); border-color: var(--vermelho); }
.pm-mover:disabled { opacity: .35; cursor: not-allowed; }
.pm-vazio { justify-content: center; color: var(--texto-3); font-size: 13px; padding: 24px 8px !important; }

@media (max-width: 1100px) {
  .pm-dados { grid-template-columns: 1fr 1fr; }
  .pm-dados .pm-estado { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .pm-dados, .pm-transferencia { grid-template-columns: 1fr; }
}