/* ═══════════════════════════════════════════════════════════
   RAVVO — Equipe e Permissões 2.0 (12/10/2026) — tela do mockup: abas, coluna de cargos, matriz por módulo.
   Só variáveis do tema (claro e escuro); roxo do tema (--accent) nas seleções.
   ═══════════════════════════════════════════════════════════ */
.eq2 { display: flex; flex-direction: column; gap: 16px; }
.eq2-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.eq2-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--border, #24242c); overflow-x: auto; }
.eq2-aba { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; font-weight: 600; font-size: .9rem; color: var(--text-muted, #8a8a96); cursor: pointer; white-space: nowrap; }
.eq2-aba.ativa { color: var(--accent, #8B3FE8); border-bottom-color: var(--accent, #8B3FE8); }
.eq2-card { background: var(--bg-card, #16161d); border: 1px solid var(--border, #24242c); border-radius: 14px; padding: 16px; }
.eq2-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.eq2-filtros .form-input { flex: 1 1 240px; } .eq2-filtros .form-select { flex: 0 1 200px; width: auto; }

/* funcionários */
.eq2-lista { display: flex; flex-direction: column; }
.eq2-pessoa { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto 110px auto; gap: 12px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--border, #24242c); }
.eq2-pessoa:first-child { border-top: 0; }
.eq2-pessoa.inativo { opacity: .55; }
.eq2-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-weight: 700; font-size: .82rem; background: var(--accent-dim, rgba(139,63,232,.15)); color: var(--accent, #8B3FE8); flex-shrink: 0; }
.eq2-av img { width: 100%; height: 100%; object-fit: cover; }
.eq2-info { min-width: 0; }
.eq2-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq2-sub { font-size: .8rem; color: var(--text-muted, #8a8a96); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq2-cargo { --cor: var(--accent, #8B3FE8); font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: var(--cor); background: color-mix(in srgb, var(--cor) 14%, transparent); white-space: nowrap; }
.eq2-status { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.eq2-status.on { color: var(--success, #22C55E); background: rgba(34,197,94,.12); } .eq2-status.off { color: var(--text-muted, #8a8a96); background: var(--bg-input, #14141a); }
.eq2-acesso { font-size: .76rem; color: var(--text-muted, #8a8a96); }
.eq2-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* cargos e permissões */
.eq2-cargos { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; align-items: start; }
.eq2-col { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 12px; }
.eq2-col-tit { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, #8a8a96); margin: 0 0 4px; }
.eq2-cg { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; text-align: left; background: none; border: 1px solid transparent; border-radius: 10px; padding: 9px 10px; cursor: pointer; color: inherit; font: inherit; }
.eq2-cg:hover { background: var(--bg-input, #14141a); }
.eq2-cg.sel { border-color: var(--accent, #8B3FE8); background: var(--accent-dim, rgba(139,63,232,.1)); }
.eq2-cg-cor { width: 10px; height: 10px; border-radius: 50%; }
.eq2-cg-nome { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq2-cg-n { font-size: .74rem; color: var(--text-muted, #8a8a96); }
.eq2-selo { font-size: .64rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.eq2-selo.padrao { background: var(--bg-input, #14141a); color: var(--text-muted, #8a8a96); }
.eq2-selo.pers { background: var(--accent-dim, rgba(139,63,232,.14)); color: var(--accent, #8B3FE8); }
.eq2-selo.trava { background: rgba(245,165,36,.14); color: #f5a524; }
.eq2-novo { margin-top: 8px; width: 100%; justify-content: center; }
.eq2-painel { min-width: 0; padding-bottom: 0; }
.eq2-pcab { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.eq2-pcab h2 { margin: 0; font-size: 1.2rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; text-transform: none; letter-spacing: 0; }
.eq2-pcab p { margin: 4px 0 0; font-size: .86rem; }
.eq2-pacoes { display: flex; gap: 6px; align-items: flex-start; }
.eq2-perigo { color: var(--danger, #ef4444) !important; }
.eq2-sub { display: flex; gap: 4px; margin: 14px 0; border-bottom: 1px solid var(--border, #24242c); }
.eq2-sub button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font-weight: 600; font-size: .85rem; color: var(--text-muted, #8a8a96); cursor: pointer; }
.eq2-sub button.ativa { color: var(--accent, #8B3FE8); border-bottom-color: var(--accent, #8B3FE8); }
.eq2-rapidas { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; font-size: .82rem; color: var(--text-muted, #8a8a96); }
.eq2-chip { border: 1px solid var(--border, #2a2a33); background: var(--bg-input, #14141a); color: var(--text-primary, inherit); border-radius: 999px; padding: 5px 12px; font-size: .78rem; font-weight: 600; cursor: pointer; }
.eq2-chip:hover { border-color: var(--accent, #8B3FE8); color: var(--accent, #8B3FE8); }
.eq2-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.eq2-mod { border: 1px solid var(--border, #24242c); border-radius: 12px; padding: 12px; background: var(--bg-input, transparent); }
.eq2-mod-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.eq2-mod-cab strong { font-size: .9rem; } .eq2-mod-n { font-size: .74rem; color: var(--text-muted, #8a8a96); margin-left: auto; }
.eq2-todos { background: none; border: 0; color: var(--accent, #8B3FE8); font-size: .74rem; font-weight: 700; cursor: pointer; padding: 0; }
.eq2-cap { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .85rem; cursor: pointer; flex-wrap: wrap; }
.eq2-cap input { width: 16px; height: 16px; accent-color: var(--accent, #8B3FE8); }
.eq2-cap em { font-style: normal; font-size: .7rem; color: var(--text-muted, #8a8a96); margin-left: auto; }
.eq2-cap.trava, .eq2-cap.fora { opacity: .6; cursor: not-allowed; }
.eq2-nota { margin-top: 8px; font-size: .74rem; color: var(--text-muted, #8a8a96); border-top: 1px dashed var(--border, #2a2a33); padding-top: 8px; }
.eq2-barra { position: sticky; bottom: 0; margin: 14px -16px 0; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg-card, #16161d); border-top: 1px solid var(--accent, #8B3FE8); border-radius: 0 0 14px 14px; box-shadow: 0 -8px 20px rgba(0,0,0,.18); }
.eq2-barra > div { display: flex; gap: 8px; }
.eq2-gente { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.eq2-gp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eq2-gp > span { flex: 1 1 160px; font-weight: 600; } .eq2-gp.inativo { opacity: .55; }
.eq2-mover { width: auto; max-width: 220px; }
/* permissões individuais */
.eq2-pp-tab { max-height: 60vh; overflow: auto; }
.eq2-pp table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.eq2-pp th { text-align: left; font-size: .72rem; text-transform: uppercase; color: var(--text-muted, #8a8a96); padding: 6px; position: sticky; top: 0; background: var(--bg-card, #16161d); }
.eq2-pp td { padding: 5px 6px; border-top: 1px solid var(--border, #24242c); } .eq2-pp td.c { text-align: center; }
.eq2-pp-mod td { font-weight: 800; padding-top: 12px; color: var(--accent, #8B3FE8); border-top: 0; }
.eq2-pp .form-select, .eq2-pp .form-input { padding: 5px 8px; font-size: .8rem; min-width: 110px; }
.eq2-pp-ef.mais { color: var(--success, #22C55E); font-weight: 800; } .eq2-pp-ef.menos { color: var(--danger, #ef4444); font-weight: 800; }
/* convidar e logs */
.eq2-convite { border: 1px solid var(--accent, #8B3FE8); border-radius: 12px; padding: 12px; background: var(--accent-dim, rgba(139,63,232,.08)); }
.eq2-link code { display: block; margin-top: 8px; word-break: break-all; font-size: .78rem; }
.eq2-logs { display: flex; flex-direction: column; }
.eq2-log { display: grid; grid-template-columns: 28px 110px minmax(0, 1fr); gap: 8px; padding: 9px 2px; border-top: 1px solid var(--border, #24242c); font-size: .86rem; align-items: baseline; }
.eq2-log:first-child { border-top: 0; } .eq2-log-q { font-size: .76rem; color: var(--text-muted, #8a8a96); }

@media (max-width: 980px) {
  .eq2-cargos { grid-template-columns: 1fr; }
  .eq2-col { position: static; flex-direction: row; overflow-x: auto; }
  .eq2-col .eq2-cg { flex: 0 0 auto; } .eq2-col-tit { display: none; } .eq2-novo { margin: 0; width: auto; flex: 0 0 auto; }
}
@media (max-width: 760px) {
  .eq2-pessoa { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .eq2-pessoa .eq2-status, .eq2-pessoa .eq2-acesso { display: none; }
  .eq2-pessoa .eq2-acoes { grid-column: 1 / -1; justify-content: flex-start; }
  .eq2-log { grid-template-columns: 24px minmax(0, 1fr); } .eq2-log-q { grid-column: 2; }
  .eq2-barra { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* a regra de display acima anularia o [hidden] — a barra só aparece com alteração */
.eq2-barra[hidden] { display: none !important; }
/* v8-mobile-hotfix força label{display:block!important} no celular: a caixa ficava separada do texto */
.eq2 label.eq2-cap:not([hidden]) { display: flex !important; width: auto !important; }
.eq2 label.eq2-cap input { margin: 0 !important; flex-shrink: 0; }
.eq2 label.eq2-cap { padding: 6px 0 !important; margin: 0 !important; min-height: 0 !important; line-height: 1.3 !important; }